sdlc-agent-4-enterprise-server 1.0.0

package/extension/src/webview/bridge/MessageBridge.ts

@@ -0,0 +1,107 @@
+/**
+ * MessageBridge — postMessage request/response bridge between webview and extension host
+ * KSA-252
+ */
+
+import type {
+  ContextRequest,
+  ContextResponse,
+  FileTreeNode,
+  FolderTreeNode,
+  McpResourceItem,
+  DiagnosticItem,
+} from '../protocol';
+import type { PendingRequest, VsCodeApi } from './types';
+
+export class MessageBridge {
+  private pendingRequests: Map<string, PendingRequest> = new Map();
+  private requestId = 0;
+  private defaultTimeout: number;
+  private vscodeApi: VsCodeApi;
+
+  constructor(vscodeApi: VsCodeApi, defaultTimeout = 3000) {
+    this.vscodeApi = vscodeApi;
+    this.defaultTimeout = defaultTimeout;
+    window.addEventListener('message', this.handleMessage.bind(this));
+  }
+
+  private handleMessage(event: MessageEvent): void {
+    const data = event.data as ContextResponse;
+    if (!data || !('requestId' in data)) return;
+    const pending = this.pendingRequests.get(data.requestId);
+    if (!pending) return;
+    clearTimeout(pending.timer);
+    this.pendingRequests.delete(data.requestId);
+    if (data.type === 'error') {
+      pending.reject(new Error((data as { message: string }).message));
+    } else {
+      pending.resolve(data);
+    }
+  }
+
+  async request<T>(message: ContextRequest, timeout?: number): Promise<T> {
+    const id = `ctx-${++this.requestId}`;
+    const effectiveTimeout = timeout ?? this.defaultTimeout;
+    return new Promise<T>((resolve, reject) => {
+      const timer = setTimeout(() => {
+        this.pendingRequests.delete(id);
+        reject(new Error(`Timeout: ${message.type} (${effectiveTimeout}ms)`));
+      }, effectiveTimeout);
+      this.pendingRequests.set(id, { resolve: resolve as (v: unknown) => void, reject, timer });
+      this.vscodeApi.postMessage({ ...message, requestId: id });
+    });
+  }
+
+  async getFileTree(): Promise<FileTreeNode[]> {
+    const response = await this.request<{ data: FileTreeNode[] }>({ type: 'getWorkspaceFileTree' });
+    return response.data;
+  }
+
+  async getSpecList(): Promise<string[]> {
+    const response = await this.request<{ data: string[] }>({ type: 'getSpecList' });
+    return response.data;
+  }
+
+  async getFolderTree(): Promise<FolderTreeNode[]> {
+    const response = await this.request<{ data: FolderTreeNode[] }>({ type: 'getWorkspaceFolderTree' });
+    return response.data;
+  }
+
+  async getSteeringFiles(): Promise<string[]> {
+    const response = await this.request<{ data: string[] }>({ type: 'getSteeringFiles' });
+    return response.data;
+  }
+
+  async getMcpResources(): Promise<McpResourceItem[]> {
+    const response = await this.request<{ data: McpResourceItem[] }>({ type: 'getMcpResources' });
+    return response.data;
+  }
+
+  async getActiveFileName(): Promise<string | null> {
+    const response = await this.request<{ data: string | null }>({ type: 'getActiveFileName' });
+    return response.data;
+  }
+
+  async resolveGitDiff(): Promise<string> {
+    const response = await this.request<{ data: string }>({ type: 'resolveGitDiff' }, 5000);
+    return response.data;
+  }
+
+  async resolveTerminalOutput(lines?: number): Promise<string> {
+    const response = await this.request<{ data: string }>({ type: 'resolveTerminalOutput', lines }, 5000);
+    return response.data;
+  }
+
+  async resolveDiagnostics(): Promise<DiagnosticItem[]> {
+    const response = await this.request<{ data: DiagnosticItem[] }>({ type: 'resolveDiagnostics' });
+    return response.data;
+  }
+
+  dispose(): void {
+    for (const [, pending] of this.pendingRequests) {
+      clearTimeout(pending.timer);
+      pending.reject(new Error('Bridge disposed'));
+    }
+    this.pendingRequests.clear();
+  }
+}

package/extension/src/webview/bridge/types.ts

@@ -0,0 +1,15 @@
+/**
+ * MessageBridge types — KSA-252
+ */
+
+export interface PendingRequest {
+  resolve: (value: unknown) => void;
+  reject: (reason: unknown) => void;
+  timer: ReturnType<typeof setTimeout>;
+}
+
+export interface VsCodeApi {
+  postMessage(message: unknown): void;
+  getState(): unknown;
+  setState(state: unknown): void;
+}

package/extension/src/webview/context-menu/ContextMenuController.ts

@@ -0,0 +1,275 @@
+/**
+ * ContextMenuController — State machine + orchestration for Context Menu
+ * KSA-252
+ */
+
+import type { ContextMenuItem, ContextTagBadge } from '../protocol';
+import type { ContextMenuState, ContextMenuTrigger, StateTransition, ContextMenuOptions } from './types';
+import { ContextMenuView } from './ContextMenuView';
+import { CONTEXT_MENU_ITEMS } from './ContextMenuItems';
+import { filterItems } from './FuzzyFilter';
+import { BadgeManager } from '../badges/BadgeManager';
+import { BadgeRenderer } from '../badges/BadgeRenderer';
+import { MessageBridge } from '../bridge/MessageBridge';
+import { FilePicker } from './FilePicker';
+import { FolderPicker } from './FolderPicker';
+import { ListPicker } from './ListPicker';
+
+const TRANSITIONS: StateTransition[] = [
+  { from: 'CLOSED', to: 'OPEN', trigger: 'HASH_TYPED' },
+  { from: 'OPEN', to: 'FILTERING', trigger: 'CHAR_TYPED' },
+  { from: 'OPEN', to: 'PICKER_OPEN', trigger: 'PICKER_SELECTED' },
+  { from: 'OPEN', to: 'BADGE_INSERTED', trigger: 'INSTANT_SELECTED' },
+  { from: 'OPEN', to: 'CLOSED', trigger: 'DISMISS' },
+  { from: 'FILTERING', to: 'PICKER_OPEN', trigger: 'PICKER_SELECTED' },
+  { from: 'FILTERING', to: 'BADGE_INSERTED', trigger: 'INSTANT_SELECTED' },
+  { from: 'FILTERING', to: 'OPEN', trigger: 'FILTER_CLEARED' },
+  { from: 'FILTERING', to: 'CLOSED', trigger: 'DISMISS' },
+  { from: 'PICKER_OPEN', to: 'BADGE_INSERTED', trigger: 'ITEM_SELECTED' },
+  { from: 'PICKER_OPEN', to: 'OPEN', trigger: 'BACK' },
+  { from: 'PICKER_OPEN', to: 'CLOSED', trigger: 'DISMISS' },
+  { from: 'BADGE_INSERTED', to: 'CLOSED', trigger: 'AUTO' },
+];
+
+export class ContextMenuController {
+  private state: ContextMenuState = 'CLOSED';
+  private view: ContextMenuView;
+  private badgeManager: BadgeManager;
+  private badgeRenderer: BadgeRenderer;
+  private bridge: MessageBridge;
+  private filterText = '';
+  private visibleItems: ContextMenuItem[] = [...CONTEXT_MENU_ITEMS];
+  private options: ContextMenuOptions;
+
+  // Active picker
+  private filePicker: FilePicker | null = null;
+  private folderPicker: FolderPicker | null = null;
+  private listPicker: ListPicker | null = null;
+
+  // Screen reader announcer
+  private announcer: HTMLElement | null = null;
+
+  constructor(options: ContextMenuOptions, bridge: MessageBridge) {
+    this.options = options;
+    this.bridge = bridge;
+    this.view = new ContextMenuView(options.container);
+    this.badgeManager = new BadgeManager(bridge);
+    this.badgeRenderer = new BadgeRenderer((badgeId) => this.removeBadge(badgeId));
+    this.setupAnnouncer();
+  }
+
+  private setupAnnouncer(): void {
+    this.announcer = document.getElementById('sr-announcer');
+    if (!this.announcer) {
+      this.announcer = document.createElement('div');
+      this.announcer.id = 'sr-announcer';
+      this.announcer.setAttribute('aria-live', 'polite');
+      this.announcer.setAttribute('aria-atomic', 'true');
+      this.announcer.className = 'sr-only';
+      document.body.appendChild(this.announcer);
+    }
+  }
+
+  private announce(message: string): void {
+    if (this.announcer) {
+      this.announcer.textContent = '';
+      requestAnimationFrame(() => {
+        if (this.announcer) this.announcer.textContent = message;
+      });
+    }
+  }
+
+  private transition(trigger: ContextMenuTrigger): boolean {
+    const valid = TRANSITIONS.find(t => t.from === this.state && t.trigger === trigger);
+    if (!valid) return false;
+    this.state = valid.to;
+    return true;
+  }
+
+  getState(): ContextMenuState {
+    return this.state;
+  }
+
+  open(): void {
+    if (!this.transition('HASH_TYPED')) return;
+    this.filterText = '';
+    this.visibleItems = [...CONTEXT_MENU_ITEMS];
+
+    const rect = this.options.inputElement.getBoundingClientRect();
+    this.view.render(this.visibleItems, rect);
+    this.announce('Context menu opened. 9 items available. Use arrow keys to navigate.');
+  }
+
+  close(): void {
+    this.transition('DISMISS');
+    this.view.destroy();
+    this.filePicker?.close();
+    this.folderPicker?.close();
+    this.listPicker?.close();
+    this.filePicker = null;
+    this.folderPicker = null;
+    this.listPicker = null;
+    this.filterText = '';
+    this.options.onClose();
+  }
+
+  filter(text: string): void {
+    this.filterText = text;
+    if (!text) {
+      this.transition('FILTER_CLEARED');
+      this.visibleItems = [...CONTEXT_MENU_ITEMS];
+    } else {
+      if (this.state === 'OPEN') this.transition('CHAR_TYPED');
+      const filtered = filterItems(CONTEXT_MENU_ITEMS, text);
+      this.visibleItems = filtered;
+    }
+    this.view.updateItems(this.visibleItems);
+    this.announce(`${this.visibleItems.length} items match.`);
+  }
+
+  handleKeyDown(event: KeyboardEvent): boolean {
+    // Delegate to active picker first
+    if (this.state === 'PICKER_OPEN') {
+      if (this.filePicker?.handleKeyDown(event)) return true;
+      if (this.folderPicker?.handleKeyDown(event)) return true;
+      if (this.listPicker?.handleKeyDown(event)) return true;
+    }
+
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        this.view.moveHighlight('down');
+        return true;
+      case 'ArrowUp':
+        event.preventDefault();
+        this.view.moveHighlight('up');
+        return true;
+      case 'Enter':
+        event.preventDefault();
+        this.selectHighlighted();
+        return true;
+      case 'Escape':
+        event.preventDefault();
+        this.close();
+        return true;
+      case 'Tab':
+        this.close();
+        return false; // Let tab propagate
+      default:
+        return false;
+    }
+  }
+
+  handleItemClick(index: number): void {
+    const item = this.view.getItemAtIndex(index);
+    if (item) this.selectItem(item);
+  }
+
+  private selectHighlighted(): void {
+    const item = this.view.getHighlightedItem();
+    if (item) this.selectItem(item);
+  }
+
+  private selectItem(item: ContextMenuItem): void {
+    switch (item.type) {
+      case 'instant':
+        this.selectInstant(item);
+        break;
+      case 'picker':
+      case 'submenu':
+        this.openPicker(item);
+        break;
+    }
+  }
+
+  private selectInstant(item: ContextMenuItem): void {
+    this.transition('INSTANT_SELECTED');
+    const badge = this.createInstantBadge(item);
+    this.insertBadge(badge);
+    this.transition('AUTO');
+    this.view.destroy();
+    this.options.onClose();
+  }
+
+  private async openPicker(item: ContextMenuItem): Promise<void> {
+    this.transition('PICKER_SELECTED');
+    this.view.destroy();
+
+    const container = this.options.container;
+    const handleBadge = (badge: ContextTagBadge) => {
+      this.insertBadge(badge);
+      this.transition('ITEM_SELECTED');
+      this.transition('AUTO');
+      this.options.onClose();
+    };
+    const handleBack = () => {
+      this.transition('BACK');
+      const rect = this.options.inputElement.getBoundingClientRect();
+      this.view.render(this.visibleItems, rect);
+    };
+    const generateId = () => this.badgeManager.generateId();
+
+    switch (item.id) {
+      case 'files':
+        this.filePicker = new FilePicker({ bridge: this.bridge, container, onSelect: handleBadge, onBack: handleBack, generateId });
+        await this.filePicker.open();
+        break;
+      case 'folder':
+        this.folderPicker = new FolderPicker({ bridge: this.bridge, container, onSelect: handleBadge, onBack: handleBack, generateId });
+        await this.folderPicker.open();
+        break;
+      case 'spec':
+      case 'steering':
+      case 'mcp':
+        this.listPicker = new ListPicker({ bridge: this.bridge, container, sourceType: item.id, onSelect: handleBadge, onBack: handleBack, generateId });
+        await this.listPicker.open();
+        break;
+    }
+  }
+
+  private createInstantBadge(item: ContextMenuItem): ContextTagBadge {
+    const id = this.badgeManager.generateId();
+    switch (item.id) {
+      case 'git-diff':
+        return { id, type: 'git-diff', label: 'Git Diff', icon: item.icon, metadata: {} };
+      case 'terminal':
+        return { id, type: 'terminal', label: 'Terminal', icon: item.icon, metadata: {} };
+      case 'problems':
+        return { id, type: 'problems', label: 'Problems', icon: item.icon, metadata: {} };
+      case 'current-file':
+        return { id, type: 'current-file', label: 'Current File', icon: item.icon, metadata: {} };
+      default:
+        return { id, type: item.id as any, label: item.label, icon: item.icon, metadata: {} };
+    }
+  }
+
+  private insertBadge(badge: ContextTagBadge): void {
+    this.badgeManager.insert(badge);
+    this.options.onBadgeInsert(badge);
+    this.announce(`Context added: ${badge.label}`);
+  }
+
+  private removeBadge(badgeId: string): void {
+    const badge = this.badgeManager.get(badgeId);
+    this.badgeManager.remove(badgeId);
+    BadgeRenderer.removeBadgeElement(this.options.container, badgeId);
+    if (badge) this.announce(`Context removed: ${badge.label}`);
+  }
+
+  getBadgeManager(): BadgeManager {
+    return this.badgeManager;
+  }
+
+  getBadgeRenderer(): BadgeRenderer {
+    return this.badgeRenderer;
+  }
+
+  isOpen(): boolean {
+    return this.state !== 'CLOSED';
+  }
+
+  dispose(): void {
+    this.close();
+    this.bridge.dispose();
+  }
+}

package/extension/src/webview/context-menu/ContextMenuItems.ts

@@ -0,0 +1,72 @@
+/**
+ * Static menu item definitions for the Context Menu
+ * KSA-252
+ */
+
+import type { ContextMenuItem } from '../protocol';
+
+export const CONTEXT_MENU_ITEMS: ContextMenuItem[] = [
+  {
+    id: 'files',
+    label: 'Files',
+    icon: '📁',
+    type: 'picker',
+    subLabel: 'Browse workspace files',
+  },
+  {
+    id: 'spec',
+    label: 'Spec',
+    icon: '📄',
+    type: 'picker',
+    subLabel: 'Kiro specifications',
+  },
+  {
+    id: 'git-diff',
+    label: 'Git Diff',
+    icon: '➕',
+    type: 'instant',
+    subLabel: 'Current changes',
+  },
+  {
+    id: 'terminal',
+    label: 'Terminal',
+    icon: '💻',
+    type: 'instant',
+    subLabel: 'Recent output',
+  },
+  {
+    id: 'problems',
+    label: 'Problems',
+    icon: '⚠️',
+    type: 'instant',
+    subLabel: 'Diagnostics',
+  },
+  {
+    id: 'folder',
+    label: 'Folder',
+    icon: '📂',
+    type: 'picker',
+    subLabel: 'Browse folders',
+  },
+  {
+    id: 'current-file',
+    label: 'Current File',
+    icon: '📝',
+    type: 'instant',
+    subLabel: 'Active editor file',
+  },
+  {
+    id: 'steering',
+    label: 'Steering',
+    icon: '🎯',
+    type: 'picker',
+    subLabel: 'Steering files',
+  },
+  {
+    id: 'mcp',
+    label: 'MCP',
+    icon: '💎',
+    type: 'submenu',
+    subLabel: 'Model Context Protocol →',
+  },
+];

package/extension/src/webview/context-menu/ContextMenuView.ts

@@ -0,0 +1,154 @@
+/**
+ * ContextMenuView — DOM rendering for the context menu popup
+ * KSA-252
+ */
+
+import type { ContextMenuItem } from '../protocol';
+
+export class ContextMenuView {
+  private container: HTMLElement;
+  private menuEl: HTMLElement | null = null;
+  private itemEls: Map<string, HTMLElement> = new Map();
+  private highlightedIndex = -1;
+  private visibleItems: ContextMenuItem[] = [];
+
+  constructor(container: HTMLElement) {
+    this.container = container;
+  }
+
+  render(items: ContextMenuItem[], anchorRect: DOMRect): void {
+    this.destroy();
+    this.visibleItems = items;
+    this.menuEl = document.createElement('div');
+    this.menuEl.className = 'context-menu';
+    this.menuEl.setAttribute('role', 'listbox');
+    this.menuEl.setAttribute('aria-label', 'Context sources');
+
+    items.forEach((item, index) => {
+      const itemEl = this.createItemElement(item, index);
+      this.menuEl!.appendChild(itemEl);
+      this.itemEls.set(item.id, itemEl);
+    });
+
+    this.menuEl.style.position = 'absolute';
+    this.menuEl.style.bottom = `${this.container.clientHeight - anchorRect.top + 4}px`;
+    this.menuEl.style.left = `${anchorRect.left}px`;
+    this.menuEl.style.maxHeight = '320px';
+    this.menuEl.style.overflowY = 'auto';
+    this.container.appendChild(this.menuEl);
+
+    if (items.length > 0) {
+      this.setHighlight(0);
+    }
+  }
+
+  private createItemElement(item: ContextMenuItem, index: number): HTMLElement {
+    const el = document.createElement('div');
+    el.className = 'context-menu-item';
+    el.setAttribute('role', 'option');
+    el.setAttribute('aria-selected', 'false');
+    el.dataset.index = String(index);
+    el.dataset.itemId = item.id;
+
+    const subLabelHtml = item.subLabel
+      ? `<span class="context-menu-item__sublabel">${this.escapeHtml(item.subLabel)}</span>`
+      : '';
+    el.innerHTML = `
+      <span class="context-menu-item__icon">${item.icon}</span>
+      <span class="context-menu-item__label">${this.escapeHtml(item.label)}</span>
+      ${subLabelHtml}
+    `;
+    return el;
+  }
+
+  updateItems(items: ContextMenuItem[]): void {
+    if (!this.menuEl) return;
+    this.visibleItems = items;
+    this.itemEls.clear();
+    this.menuEl.innerHTML = '';
+    items.forEach((item, index) => {
+      const itemEl = this.createItemElement(item, index);
+      this.menuEl!.appendChild(itemEl);
+      this.itemEls.set(item.id, itemEl);
+    });
+    if (items.length > 0) {
+      this.setHighlight(0);
+    } else {
+      this.highlightedIndex = -1;
+      this.showEmptyState();
+    }
+  }
+
+  private showEmptyState(): void {
+    if (!this.menuEl) return;
+    const empty = document.createElement('div');
+    empty.className = 'context-menu-empty';
+    empty.textContent = 'No matching items';
+    this.menuEl.appendChild(empty);
+  }
+
+  setHighlight(index: number): void {
+    if (!this.menuEl) return;
+    const prev = this.menuEl.querySelector('.context-menu-item--highlighted');
+    if (prev) {
+      prev.classList.remove('context-menu-item--highlighted');
+      prev.setAttribute('aria-selected', 'false');
+    }
+    this.highlightedIndex = index;
+    const itemEls = this.menuEl.querySelectorAll('.context-menu-item');
+    if (index >= 0 && index < itemEls.length) {
+      const el = itemEls[index] as HTMLElement;
+      el.classList.add('context-menu-item--highlighted');
+      el.setAttribute('aria-selected', 'true');
+      el.scrollIntoView({ block: 'nearest' });
+    }
+  }
+
+  moveHighlight(direction: 'up' | 'down'): number {
+    const count = this.visibleItems.length;
+    if (count === 0) return -1;
+    let next: number;
+    if (direction === 'down') {
+      next = this.highlightedIndex < count - 1 ? this.highlightedIndex + 1 : 0;
+    } else {
+      next = this.highlightedIndex > 0 ? this.highlightedIndex - 1 : count - 1;
+    }
+    this.setHighlight(next);
+    return next;
+  }
+
+  getHighlightedItem(): ContextMenuItem | null {
+    if (this.highlightedIndex >= 0 && this.highlightedIndex < this.visibleItems.length) {
+      return this.visibleItems[this.highlightedIndex];
+    }
+    return null;
+  }
+
+  getItemAtIndex(index: number): ContextMenuItem | null {
+    return this.visibleItems[index] ?? null;
+  }
+
+  isVisible(): boolean {
+    return this.menuEl !== null && this.menuEl.parentElement !== null;
+  }
+
+  destroy(): void {
+    if (this.menuEl && this.menuEl.parentElement) {
+      this.menuEl.parentElement.removeChild(this.menuEl);
+    }
+    this.menuEl = null;
+    this.itemEls.clear();
+    this.highlightedIndex = -1;
+    this.visibleItems = [];
+  }
+
+  getElement(): HTMLElement | null {
+    return this.menuEl;
+  }
+
+  private escapeHtml(text: string): string {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+}