K-IDE VS Code Extension

AI-powered development assistant for K-Universe workspace.

Current Status: Phase 2 Complete

The extension has a working chat resolution pipeline with API → MCP → fallback cascade, 97 passing tests across 7 suites, and real integrations.

What Works

• Extension activation and sidebar registration
• Chat panel WebView rendering (React 19 + Zustand 5)
• Chat resolution cascade: API (/api/ai/chat) → MCP (capability-aware tool selection) → local fallback
• Streaming responses with chunked delivery and source metadata
• Non-streaming chat path with loading indicator and metadata
• MCP client with connection, tool discovery, callTool with timeout, hasTool check
• API client (GET/POST/PUT/DELETE) with PocketBase auth and AbortSignal timeout
• Context aggregation from 6 sources (workspace, user, AI provider, design system, knowledge graph, prompt templates) with 5-min TTL cache
• Dark/light mode toggle, clear chat, message history display
• 97 tests passing, ~47% overall coverage

Architecture

Webview (React 19)
  ↕ postMessage
ChatPanelProvider
  → _resolveChatReply() cascade:
      1. API  /api/ai/chat (single canonical endpoint)
      2. MCP  capability-aware tool selection (chat, ask, ask_agent, …)
      3. Fallback  local context summary
  → stream-start → stream-chunk × N → stream-end {source}
  → KUniverseContextProvider (6-source aggregation, 5-min TTL cache)

Project Structure

apps/vscode-k-ide-extension/
├── src/
│   ├── extension.ts              # Extension entry point
│   ├── providers/
│   │   ├── ChatPanelProvider.ts  # WebView provider
│   │   └── KUniverseContextProvider.ts  # Context aggregation
│   ├── webview/
│   │   ├── App.tsx               # React root component
│   │   ├── components/
│   │   │   ├── ChatPanel.tsx
│   │   │   ├── MessageList.tsx
│   │   │   └── InputForm.tsx
│   │   ├── styles/
│   │   │   └── globals.css
│   │   └── index.tsx             # React entry point
│   ├── mcp/
│   │   ├── client.ts             # MCP connection
│   │   └── tools.ts              # Tool definitions
│   └── utils/
│       ├── api.ts                # HTTP client
│       └── context.ts            # Context utilities
├── package.json
├── tsconfig.json
└── vscode-extension.config.yml

Dependencies

Runtime:

• @modelcontextprotocol/sdk@^1.0.0
• @k-universe/core (workspace:*)
• @k-universe/design-tokens (workspace:*)
• react@^19.0.0
• react-dom@^19.0.0
• zustand@^5.0.0

Development:

• @types/vscode@^1.95.0
• esbuild@^0.24.0
• typescript@^5.7.0

Development

Install Dependencies

pnpm install

Build Extension

pnpm run build

Build WebView

pnpm run compile:webview

Watch Mode

pnpm run dev

Type Check

pnpm run type-check

Configuration

VS Code Extension

• Publisher: k-universe
• DisplayName: K-IDE
• ActivationEvents: onStartupFinished
• Commands: k-ide.openChatPanel
• Views: k-ide.chatPanel (sidebar)

API Configuration

• Base URL: http://localhost:4100 (configurable via env)
• Timeout: 30 seconds
• Auth: Bearer token from PocketBase (port 8090)

MCP Configuration

• Server: D:\dev\mcp\k-flow-mcp\dist\index-new.js
• Transport: stdio
• Reconnection: Automatic on demand

Design Tokens

The extension imports design tokens from @k-universe/design-tokens:

• Typography: Power Grotesk (primary), system fallbacks
• Colors: Monochrome + accents (primary #0066FF, secondary #00CC88, etc.)
• Layout: 60px margin principle, 8px grid
• Motion: GSAP defaults (duration 300ms, ease power2.out)
• Theme: Dark mode by default, light mode toggle

Accessibility

• WCAG AAA target compliance
• Full keyboard navigation
• Screen reader support with ARIA labels
• Focus visible ≥2px
• Respects prefers-reduced-motion

Known Limitations

• No true SSE streaming (simulated chunking from complete responses)
• No message persistence across sessions
• No authentication UI (PocketBase auth is code-level only)
• Knowledge graph context deferred (returns placeholder)
• Some context sources return defaults when services are offline

Next Steps

1. Phase 3: True SSE streaming from API endpoint
2. Phase 3: Message persistence (workspace state or SQLite)
3. Phase 3: Authentication UI with PocketBase login flow
4. Phase 4: Knowledge graph integration (FalkorDB/Graphiti)
5. Phase 4: Saved conversations, history panel
6. Phase 5: VSIX packaging and marketplace release

Testing

7 suites, 97 tests, ~47% overall coverage. ChatPanelProvider at ~48% line coverage.

pnpm run test

Troubleshooting

Extension doesn't activate

• Check that VS Code version is >= 1.95.0
• Check that k-flow-mcp is installed at D:\dev\mcp\k-flow-mcp\dist\index-new.js

WebView shows blank

• Check browser console in VS Code debug tools
• Verify webview-dist/index.js exists after build

MCP connection fails

• Ensure k-flow-mcp server is running
• Check MCP server logs for errors
• Verify stdio transport configuration

Contributing

This is a Phase 1 scaffold. Contributions welcome for Phase 2 implementation.

License

MIT