Ticket to Code AI Companion

A VS Code extension that bridges your Jira board and your codebase — fetch a ticket, semantically search relevant code, and get an AI-generated implementation guide, all without leaving your editor.

What it does

1. Fetch a Jira issue by key (e.g. PROJ-123) — pulls summary, description, and acceptance criteria
2. Analyze your repository — indexes files using embeddings and runs semantic search to find the most relevant code
3. Generate a step-by-step implementation guide grounded in your actual codebase

Architecture

┌─────────────────────────────────────────────────────┐
│                    VS Code Host                      │
│  extension.ts → SidebarProvider → Engine Modules    │
└────────────────────┬────────────────────────────────┘
                     │ postMessage (both directions)
┌────────────────────▼────────────────────────────────┐
│               WebView UI (React + TS)                │
│     TicketPanel | AnalysisPanel | GuidePanel         │
└─────────────────────────────────────────────────────┘
                     │
┌────────────────────▼────────────────────────────────┐
│                 External APIs                        │
│         Jira REST API │ OpenAI API                   │
└─────────────────────────────────────────────────────┘

Tech Stack

• Extension Host: TypeScript + esbuild
• WebView UI: React 18 + TypeScript + Vite
• Embeddings: OpenAI text-embedding-3-small
• LLM: GPT-4o-mini
• Vector Store: JSON on disk + cosine similarity (MVP)
• Auth: VS Code SecretStorage

Project Structure

src/
├── extension/          # Extension host (Node.js)
│   ├── sidebar/        # WebviewViewProvider
│   ├── engine/         # TicketManager, CodeAnalyzer, AIEngine, CacheManager
│   ├── clients/        # JiraClient, OpenAIClient
│   ├── utils/          # chunker, similarity, fileWalker, editorNavigation
│   └── types/          # Shared types
└── webview/            # React UI (browser)
    ├── components/     # TicketPanel, AnalysisPanel, GuidePanel
    ├── hooks/          # useVsCodeMessages, useExtensionState
    └── styles/         # VS Code theme-aware CSS

Development

npm install
npm run dev        # watch mode (both extension + webview)

Press F5 in VS Code to launch the Extension Development Host.

Sprint Timeline