VS Code Webview UI

Overview

webview-ui

bridge/vscode

Project Structure

webview-ui

webview-ui/
├── src/
│   ├── components/        # Shared visual components reused across features
│   │   └── ui/            # shadcn/ui component library
│   ├── hooks/             # Shared React hooks
│   ├── features/
│   │   └── {feature}/
│   │       ├── index.tsx  # Feature entry component rendered from routing
│   │       ├── components/# Feature-specific components
│   │       └── hooks/     # Feature-specific hooks
│   ├── bridge/            # Messaging helpers for VS Code <-> webview
│   └── index.tsx          # Runtime router that mounts the selected feature
├── public/                # Static assets copied verbatim by Vite
├── vite.config.ts         # Vite build configuration
└── README.md

Coding Guidelines

• Shared Modules: Prefer shared modules under

  src/components

  and

  src/hooks

  before introducing feature-local code.
• Feature Boundaries: Add feature-only utilities inside the nested

  components/

  or

  hooks/

  directories to keep boundaries clear.
• Styling: Keep styling in Tailwind-style utility classes (see

  src/app.css

  for base tokens) and avoid inline styles when reusable classes exist.
• Messaging: Exchange messages with the extension via

  vscode.postMessage

  and subscribe through

  window.addEventListener('message', …)

  inside React effects.
• Configuration: When adding new steering or config references, obtain paths through the shared

  ConfigManager

  utilities from the extension layer.

Testing & Quality

• Integration Tests: Use Playwright or Cypress style integration tests if adding complex interactions (tests live under the repo-level

  tests/

  ).
• Pre-commit Checks: Run

  npm run lint

  and

  npm run build

  before committing to ensure TypeScript and bundler checks pass.