Skip to content
This repository was archived by the owner on Feb 25, 2026. It is now read-only.

feat(vscode): Wire up OpenCode chat UI in webview (2)#143

Closed
markijbema wants to merge 8 commits intomark/copy-files-from-appfrom
mark/chat2
Closed

feat(vscode): Wire up OpenCode chat UI in webview (2)#143
markijbema wants to merge 8 commits intomark/copy-files-from-appfrom
mark/chat2

Conversation

@markijbema
Copy link
Copy Markdown
Contributor

Summary

This PR wires up the OpenCode chat UI in the VS Code extension webview, establishing the communication layer between the webview and the extension host, which in turn bridges to the CLI backend.

Key Changes

New Files

  • src/shared/chat-protocol.ts - Typed message protocol for webview ↔ extension communication
  • src/controllers/ChatController.ts - Extension-host controller bridging webview to CLI backend
  • webview-ui/src/transport/ - Webview-side transport layer with Solid.js context
  • webview-ui/src/views/ChatView.tsx - Minimal chat UI component with message timeline and prompt input
  • NOTES.md - Architecture documentation

Modified Files

  • esbuild.js - Added alias plugin for @/ imports
  • package.json - Added dependencies (solid-js, eventsource)
  • webview-ui/tsconfig.json - Added path aliases
  • src/KiloProvider.ts - Updated to use ChatController
  • webview-ui/src/App.tsx - Updated to render ChatView with TransportProvider

Architecture

┌─────────────────────────────────────────────────────────────────┐
│                         VS Code Extension                        │
├─────────────────────────────────────────────────────────────────┤
│  Webview (browser)              │  Extension Host (Node.js)     │
│  ─────────────────              │  ─────────────────────────    │
│  ChatView.tsx                   │  ChatController.ts            │
│       │                         │       │                       │
│       ▼                         │       ▼                       │
│  TransportProvider ◄──postMsg──►│  KiloProvider                 │
│       │                         │       │                       │
│       ▼                         │       ▼                       │
│  chat-transport.ts              │  cli-backend-bridge.ts        │
│                                 │       │                       │
│                                 │       ▼                       │
│                                 │  HTTP/SSE to CLI backend      │
└─────────────────────────────────────────────────────────────────┘

Known Limitations

  • Chat UI is minimal (basic message display and input)
  • No markdown rendering yet
  • No tool call visualization
  • Session management is basic (single session)

Testing Instructions

  1. Build the extension: pnpm compile
  2. Press F5 to launch Extension Development Host
  3. Open the Kilo sidebar panel
  4. The chat UI should load and connect to the CLI backend
  5. Type a message and press Enter to send

Next Steps

  • Add markdown rendering for assistant messages
  • Implement tool call visualization
  • Add session list/switching
  • Improve error handling and reconnection logic

@markijbema markijbema changed the base branch from dev to mark/copy-files-from-app February 5, 2026 16:41
@markijbema markijbema changed the title feat(vscode): Wire up OpenCode chat UI in webview feat(vscode): Wire up OpenCode chat UI in webview (2) Feb 9, 2026
@markijbema markijbema force-pushed the mark/copy-files-from-app branch from 7b228c0 to cc14ca0 Compare February 9, 2026 09:00
- Add typed message protocol for webview ↔ extension communication
- Implement webview-side transport layer with Solid.js context
- Implement extension-host ChatController bridging to CLI backend
- Create minimal ChatView component with message timeline and prompt input
- Configure TypeScript path aliases and add required dependencies
- Add NOTES.md documentation
- Remove disabled state from PromptInput (was disabled during loading)
- Add try/catch to loadSession to ensure isLoading is reset on error
- Users can now type while session is loading
- Replace basic inline components with @opencode-ai/ui components:
  - Button, IconButton, Icon for UI elements
  - BasicTool for tool call display with collapsible details
  - Tooltip for hover information
  - Spinner for loading states
  - Card for permission requests
  - Collapsible for reasoning sections
  - Mark logo component
  - createAutoScroll hook for auto-scrolling

- Import Tailwind CSS from @opencode-ai/ui/styles/tailwind
- Add font loaders (woff, woff2, ttf, eot, svg) to esbuild config
- Improve message layout with proper spacing and styling
- Add empty state with suggested actions
- Better session header with status indicator
- Improved prompt input with keyboard shortcuts display
- Better permission request UI with Card component
The createAutoScroll hook from @opencode-ai/ui requires a working() function
in its options object. Replace with a simple scrollToBottom implementation
to fix the black screen issue.
- Update ChatView to use semantic CSS variables from the UI library:
  - --background-base, --background-weak instead of --color-background-*
  - --text-base, --text-weak, --text-strong instead of --color-text-*
  - --border-base, --border-weak-base instead of --color-border
  - --surface-* variables for raised/inset surfaces
  - --icon-* variables for icon colors
- Force dark mode in chat-view.css with color-scheme: dark
- Fix Invalid Date issue by adding safe formatTime helper
- Remove unused createMemo import
The @opencode-ai/ui components were rendering with white backgrounds because
the CSS uses @media (prefers-color-scheme: dark) which doesn't work reliably
in VSCode webviews.

This fix:
- Wraps the App with ThemeProvider from @opencode-ai/ui/theme
- Adds DarkModeEnforcer component that explicitly sets dark color scheme on mount
- The ThemeProvider dynamically injects dark theme CSS variables, bypassing
  the media query issue
- Fixed HTML template in KiloProvider.ts to properly set up height chain
  for flex layout (html/body/root all need height: 100%)
- Added box-sizing reset and removed conflicting padding/centering styles
- Changed ChatView from h-screen to h-full for proper webview sizing
- Added min-h-0 to flex children to prevent overflow issues
- Removed inline style override from App.tsx container
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant