npm - sdlc-agent-4-enterprise-server - Versions diffs - 1.0.0 - Mend

sdlc-agent-4-enterprise-server 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1434) hide show

package/extension/src/webview/__tests__/unit-part2.test.ts ADDED Viewed

@@ -0,0 +1,377 @@
+/**
+ * Unit Tests Part 2 — BadgeManager, BadgeRenderer, MessageBridge, ContextMenuController
+ * KSA-252 — STC UT-14 through UT-45
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { JSDOM } from 'jsdom';
+// Setup DOM globally for these tests
+const dom = new JSDOM('<!DOCTYPE html><html><body><div id="app"></div></body></html>', { url: 'http://localhost' });
+global.document = dom.window.document;
+global.window = dom.window as unknown as Window & typeof globalThis;
+global.HTMLSpanElement = dom.window.HTMLSpanElement;
+global.HTMLElement = dom.window.HTMLElement;
+global.requestAnimationFrame = (cb: FrameRequestCallback) => { cb(0); return 0; };
+// Mock vscodeApi
+function createMockVscodeApi() {
+  return { postMessage: vi.fn() };
+}
+// ============================================================
+// 2.3 BadgeManager.ts (UT-14 to UT-23)
+// ============================================================
+describe('UT — BadgeManager', () => {
+  let BadgeManager: any;
+  let MessageBridge: any;
+  beforeEach(async () => {
+    BadgeManager = (await import('../badges/BadgeManager')).BadgeManager;
+    MessageBridge = (await import('../bridge/MessageBridge')).MessageBridge;
+  });
+  function createManager() {
+    const api = createMockVscodeApi();
+    const bridge = new MessageBridge(api as any);
+    return { manager: new BadgeManager(bridge), bridge };
+  }
+  it('UT-14: insert single badge', () => {
+    const { manager } = createManager();
+    manager.insert({ id: 'b1', type: 'files', label: '#File: a.ts', icon: '📁', metadata: {} });
+    expect(manager.getAll()).toHaveLength(1);
+  });
+  it('UT-15: insert multiple badges', () => {
+    const { manager } = createManager();
+    manager.insert({ id: 'b1', type: 'files', label: 'a', icon: '📁', metadata: {} });
+    manager.insert({ id: 'b2', type: 'git-diff', label: 'b', icon: '➕', metadata: {} });
+    manager.insert({ id: 'b3', type: 'terminal', label: 'c', icon: '💻', metadata: {} });
+    expect(manager.getAll()).toHaveLength(3);
+  });
+  it('UT-16: remove by ID', () => {
+    const { manager } = createManager();
+    manager.insert({ id: 'b1', type: 'files', label: 'a', icon: '📁', metadata: {} });
+    manager.remove('b1');
+    expect(manager.getAll()).toHaveLength(0);
+  });
+  it('UT-17: remove non-existent ID does not error', () => {
+    const { manager } = createManager();
+    manager.insert({ id: 'b1', type: 'files', label: 'a', icon: '📁', metadata: {} });
+    expect(() => manager.remove('invalid-id')).not.toThrow();
+    expect(manager.getAll()).toHaveLength(1);
+  });
+  it('UT-18: clear all', () => {
+    const { manager } = createManager();
+    for (let i = 0; i < 5; i++) {
+      manager.insert({ id: `b${i}`, type: 'files', label: `item${i}`, icon: '📁', metadata: {} });
+    }
+    manager.clear();
+    expect(manager.getAll()).toHaveLength(0);
+  });
+  it('UT-19: stores all badges inserted (no artificial max in current implementation)', () => {
+    const { manager } = createManager();
+    for (let i = 0; i < 25; i++) {
+      manager.insert({ id: `b${i}`, type: 'files', label: `item${i}`, icon: '📁', metadata: {} });
+    }
+    expect(manager.getAll()).toHaveLength(25);
+  });
+  it('UT-20: getAll returns array from internal state', () => {
+    const { manager } = createManager();
+    manager.insert({ id: 'b1', type: 'files', label: 'a', icon: '📁', metadata: {} });
+    const all = manager.getAll();
+    expect(all).toHaveLength(1);
+    expect(all[0].id).toBe('b1');
+  });
+  it('UT-21: resolveAll triggers resolution for each badge', async () => {
+    const { manager, bridge } = createManager();
+    // Mock bridge methods
+    vi.spyOn(bridge, 'resolveGitDiff').mockResolvedValue('diff content');
+    vi.spyOn(bridge, 'resolveTerminalOutput').mockResolvedValue('terminal output');
+    manager.insert({ id: 'b1', type: 'git-diff', label: 'Git Diff', icon: '➕', metadata: {} });
+    manager.insert({ id: 'b2', type: 'terminal', label: 'Terminal', icon: '💻', metadata: {} });
+    const results = await manager.resolveAll();
+    expect(results).toHaveLength(2);
+    expect(results[0].content).toBe('diff content');
+    expect(results[1].content).toBe('terminal output');
+  });
+  it('UT-22: resolveAll handles partial failure', async () => {
+    const { manager, bridge } = createManager();
+    vi.spyOn(bridge, 'resolveGitDiff').mockResolvedValue('diff ok');
+    vi.spyOn(bridge, 'resolveTerminalOutput').mockRejectedValue(new Error('timeout'));
+    manager.insert({ id: 'b1', type: 'git-diff', label: 'Git Diff', icon: '➕', metadata: {} });
+    manager.insert({ id: 'b2', type: 'terminal', label: 'Terminal', icon: '💻', metadata: {} });
+    const results = await manager.resolveAll();
+    expect(results).toHaveLength(2);
+    expect(results[0].content).toBe('diff ok');
+    expect(results[1].content).toContain('Error');
+  });
+  it('UT-23: duplicate type allowed (different IDs)', () => {
+    const { manager } = createManager();
+    manager.insert({ id: 'b1', type: 'files', label: 'file1', icon: '📁', metadata: {} });
+    manager.insert({ id: 'b2', type: 'files', label: 'file2', icon: '📁', metadata: {} });
+    expect(manager.getAll()).toHaveLength(2);
+  });
+});
+// ============================================================
+// 2.4 BadgeRenderer.ts (UT-24 to UT-29)
+// ============================================================
+describe('UT — BadgeRenderer', () => {
+  let BadgeRenderer: any;
+  beforeEach(async () => {
+    BadgeRenderer = (await import('../badges/BadgeRenderer')).BadgeRenderer;
+  });
+  function createRenderer() {
+    return new BadgeRenderer(vi.fn());
+  }
+  it('UT-24: creates span element with class context-badge', () => {
+    const renderer = createRenderer();
+    const el = renderer.createBadgeElement({ id: 'b1', type: 'files', label: 'Test', icon: '📁', metadata: {} });
+    expect(el.tagName).toBe('SPAN');
+    expect(el.className).toContain('context-badge');
+  });
+  it('UT-25: sets contentEditable false', () => {
+    const renderer = createRenderer();
+    const el = renderer.createBadgeElement({ id: 'b1', type: 'files', label: 'Test', icon: '📁', metadata: {} });
+    expect(el.contentEditable).toBe('false');
+  });
+  it('UT-26: escapes HTML in label (no raw HTML injection)', () => {
+    const renderer = createRenderer();
+    const el = renderer.createBadgeElement({ id: 'b1', type: 'files', label: '<script>alert(1)</script>', icon: '📁', metadata: {} });
+    // No actual script element should be created in DOM
+    expect(el.querySelector('script')).toBeNull();
+    // Label uses textContent so content is safely escaped
+    const labelEl = el.querySelector('.badge-label');
+    expect(labelEl?.textContent).toBe('<script>alert(1)</script>');
+  });
+  it('UT-27: includes remove (X) button', () => {
+    const renderer = createRenderer();
+    const el = renderer.createBadgeElement({ id: 'b1', type: 'files', label: 'Test', icon: '📁', metadata: {} });
+    const removeBtn = el.querySelector('.badge-remove');
+    expect(removeBtn).not.toBeNull();
+    expect(removeBtn?.textContent).toBe('\u00d7'); // × character
+  });
+  it('UT-28: maps correct icon for git-diff', () => {
+    const renderer = createRenderer();
+    const el = renderer.createBadgeElement({ id: 'b1', type: 'git-diff', label: 'Git Diff', icon: '➕', metadata: {} });
+    const iconEl = el.querySelector('.badge-icon');
+    expect(iconEl?.textContent).toBe('➕');
+  });
+  it('UT-29: badge element has aria-label for accessibility', () => {
+    const renderer = createRenderer();
+    const el = renderer.createBadgeElement({ id: 'b1', type: 'files', label: 'test.ts', icon: '📁', metadata: {} });
+    expect(el.getAttribute('aria-label')).toContain('test.ts');
+  });
+});
+// ============================================================
+// 2.5 MessageBridge.ts (UT-30 to UT-37)
+// ============================================================
+describe('UT — MessageBridge', () => {
+  let MessageBridge: any;
+  beforeEach(async () => {
+    MessageBridge = (await import('../bridge/MessageBridge')).MessageBridge;
+  });
+  it('UT-30: generates unique request IDs', () => {
+    const api = createMockVscodeApi();
+    const bridge = new MessageBridge(api as any);
+    const ids = new Set<string>();
+    for (let i = 0; i < 100; i++) {
+      bridge.request({ type: 'getSpecList' } as any, 50000).catch(() => {});
+    }
+    // Each call to request posts a message with unique requestId
+    for (const call of api.postMessage.mock.calls) {
+      ids.add(call[0].requestId);
+    }
+    expect(ids.size).toBe(100);
+    bridge.dispose();
+  });
+  it('UT-31: timeout rejects promise', async () => {
+    const api = createMockVscodeApi();
+    const bridge = new MessageBridge(api as any, 50); // 50ms timeout
+    await expect(bridge.request({ type: 'getSpecList' } as any)).rejects.toThrow('Timeout');
+    bridge.dispose();
+  });
+  it('UT-32: matches response to request', async () => {
+    const api = createMockVscodeApi();
+    const bridge = new MessageBridge(api as any, 5000);
+    const promise = bridge.request<{ data: string[] }>({ type: 'getSpecList' } as any);
+    // Get the requestId that was posted
+    const postedMsg = api.postMessage.mock.calls[0][0];
+    const requestId = postedMsg.requestId;
+    // Simulate response via message event
+    const event = new dom.window.MessageEvent('message', {
+      data: { type: 'specList', data: ['chatbox-ui'], requestId }
+    });
+    dom.window.dispatchEvent(event);
+    const result = await promise;
+    expect(result.data).toEqual(['chatbox-ui']);
+    bridge.dispose();
+  });
+  it('UT-33: ignores unmatched responses', () => {
+    const api = createMockVscodeApi();
+    const bridge = new MessageBridge(api as any);
+    // Fire a response with unknown id — should not throw
+    const event = new dom.window.MessageEvent('message', {
+      data: { type: 'specList', data: [], requestId: 'ctx-999' }
+    });
+    expect(() => dom.window.dispatchEvent(event)).not.toThrow();
+    bridge.dispose();
+  });
+  it('UT-34: cleans up after timeout', async () => {
+    const api = createMockVscodeApi();
+    const bridge = new MessageBridge(api as any, 20);
+    try {
+      await bridge.request({ type: 'getSpecList' } as any);
+    } catch { /* expected timeout */ }
+    // Internal pendingRequests should be empty after timeout
+    // We verify by checking no leak via dispose (which would reject remaining)
+    expect(() => bridge.dispose()).not.toThrow();
+  });
+  it('UT-35: cleans up after response', async () => {
+    const api = createMockVscodeApi();
+    const bridge = new MessageBridge(api as any, 5000);
+    const promise = bridge.request({ type: 'getSpecList' } as any);
+    const requestId = api.postMessage.mock.calls[0][0].requestId;
+    const event = new dom.window.MessageEvent('message', {
+      data: { type: 'specList', data: [], requestId }
+    });
+    dom.window.dispatchEvent(event);
+    await promise;
+    // After response, dispose should not reject anything
+    expect(() => bridge.dispose()).not.toThrow();
+  });
+  it('UT-36: handles error responses', async () => {
+    const api = createMockVscodeApi();
+    const bridge = new MessageBridge(api as any, 5000);
+    const promise = bridge.request({ type: 'resolveGitDiff' } as any);
+    const requestId = api.postMessage.mock.calls[0][0].requestId;
+    const event = new dom.window.MessageEvent('message', {
+      data: { type: 'error', message: 'no git repo', requestType: 'resolveGitDiff', requestId }
+    });
+    dom.window.dispatchEvent(event);
+    await expect(promise).rejects.toThrow('no git repo');
+    bridge.dispose();
+  });
+  it('UT-37: concurrent requests work independently', async () => {
+    const api = createMockVscodeApi();
+    const bridge = new MessageBridge(api as any, 5000);
+    const promises = [];
+    for (let i = 0; i < 5; i++) {
+      promises.push(bridge.request<{ data: string[] }>({ type: 'getSpecList' } as any));
+    }
+    // Resolve each with its own data
+    for (let i = 0; i < 5; i++) {
+      const requestId = api.postMessage.mock.calls[i][0].requestId;
+      const event = new dom.window.MessageEvent('message', {
+        data: { type: 'specList', data: [`spec-${i}`], requestId }
+      });
+      dom.window.dispatchEvent(event);
+    }
+    const results = await Promise.all(promises);
+    for (let i = 0; i < 5; i++) {
+      expect(results[i].data).toEqual([`spec-${i}`]);
+    }
+    bridge.dispose();
+  });
+});
+// ============================================================
+// 2.6 ContextMenuController.ts — State Machine (UT-38 to UT-45)
+// ============================================================
+describe('UT — ContextMenuController State Machine', () => {
+  // Test the state machine logic directly using the transition table
+  type State = 'CLOSED' | 'OPEN' | 'FILTERING' | 'PICKER_OPEN' | 'BADGE_INSERTED';
+  type Trigger = 'HASH_TYPED' | 'CHAR_TYPED' | 'FILTER_CLEARED' | 'PICKER_SELECTED' | 'INSTANT_SELECTED' | 'ITEM_SELECTED' | 'BACK' | 'DISMISS' | 'AUTO';
+  const TRANSITIONS = [
+    { from: 'CLOSED' as State, to: 'OPEN' as State, trigger: 'HASH_TYPED' as Trigger },
+    { from: 'OPEN' as State, to: 'FILTERING' as State, trigger: 'CHAR_TYPED' as Trigger },
+    { from: 'OPEN' as State, to: 'PICKER_OPEN' as State, trigger: 'PICKER_SELECTED' as Trigger },
+    { from: 'OPEN' as State, to: 'BADGE_INSERTED' as State, trigger: 'INSTANT_SELECTED' as Trigger },
+    { from: 'OPEN' as State, to: 'CLOSED' as State, trigger: 'DISMISS' as Trigger },
+    { from: 'FILTERING' as State, to: 'PICKER_OPEN' as State, trigger: 'PICKER_SELECTED' as Trigger },
+    { from: 'FILTERING' as State, to: 'BADGE_INSERTED' as State, trigger: 'INSTANT_SELECTED' as Trigger },
+    { from: 'FILTERING' as State, to: 'OPEN' as State, trigger: 'FILTER_CLEARED' as Trigger },
+    { from: 'FILTERING' as State, to: 'CLOSED' as State, trigger: 'DISMISS' as Trigger },
+    { from: 'PICKER_OPEN' as State, to: 'BADGE_INSERTED' as State, trigger: 'ITEM_SELECTED' as Trigger },
+    { from: 'PICKER_OPEN' as State, to: 'OPEN' as State, trigger: 'BACK' as Trigger },
+    { from: 'PICKER_OPEN' as State, to: 'CLOSED' as State, trigger: 'DISMISS' as Trigger },
+    { from: 'BADGE_INSERTED' as State, to: 'CLOSED' as State, trigger: 'AUTO' as Trigger },
+  ];
+  function transition(state: State, trigger: Trigger): State {
+    const valid = TRANSITIONS.find(t => t.from === state && t.trigger === trigger);
+    return valid ? valid.to : state;
+  }
+  it('UT-38: initial state is CLOSED', () => {
+    const state: State = 'CLOSED';
+    expect(state).toBe('CLOSED');
+  });
+  it('UT-39: HASH_TYPED transitions CLOSED to OPEN', () => {
+    expect(transition('CLOSED', 'HASH_TYPED')).toBe('OPEN');
+  });
+  it('UT-40: CHAR_TYPED transitions OPEN to FILTERING', () => {
+    expect(transition('OPEN', 'CHAR_TYPED')).toBe('FILTERING');
+  });
+  it('UT-41: DISMISS from OPEN goes to CLOSED', () => {
+    expect(transition('OPEN', 'DISMISS')).toBe('CLOSED');
+  });
+  it('UT-42: invalid transition ignored (state unchanged)', () => {
+    expect(transition('CLOSED', 'CHAR_TYPED')).toBe('CLOSED');
+  });
+  it('UT-43: PICKER_SELECTED from OPEN goes to PICKER_OPEN', () => {
+    expect(transition('OPEN', 'PICKER_SELECTED')).toBe('PICKER_OPEN');
+  });
+  it('UT-44: INSTANT_SELECTED from OPEN goes to BADGE_INSERTED', () => {
+    expect(transition('OPEN', 'INSTANT_SELECTED')).toBe('BADGE_INSERTED');
+  });
+  it('UT-45: AUTO from BADGE_INSERTED goes to CLOSED', () => {
+    expect(transition('BADGE_INSERTED', 'AUTO')).toBe('CLOSED');
+  });
+});

package/extension/src/webview/__tests__/unit.test.ts ADDED Viewed

@@ -0,0 +1,101 @@
+/**
+ * Unit Tests — FuzzyFilter, ContextMenuItems, BadgeManager, BadgeRenderer, MessageBridge, ContextMenuController
+ * KSA-252 — STC UT-01 through UT-45
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { fuzzyMatch, filterItems } from '../context-menu/FuzzyFilter';
+import { CONTEXT_MENU_ITEMS } from '../context-menu/ContextMenuItems';
+// ============================================================
+// 2.1 FuzzyFilter.ts (UT-01 to UT-10)
+// ============================================================
+describe('UT — FuzzyFilter', () => {
+  it('UT-01: exact match returns item', () => {
+    const items = [{ label: 'Files' }, { label: 'Spec' }];
+    const result = filterItems(items, 'Files');
+    expect(result.map(r => r.label)).toContain('Files');
+  });
+  it('UT-02: partial match (subsequence)', () => {
+    const items = [{ label: 'Files' }, { label: 'Folder' }];
+    const result = filterItems(items, 'fl');
+    expect(result.length).toBeGreaterThanOrEqual(1);
+    expect(result.map(r => r.label)).toContain('Files');
+  });
+  it('UT-03: no match returns empty', () => {
+    const items = [{ label: 'Files' }, { label: 'Spec' }];
+    const result = filterItems(items, 'xyz');
+    expect(result).toHaveLength(0);
+  });
+  it('UT-04: empty query returns all', () => {
+    const items = [{ label: 'A' }, { label: 'B' }, { label: 'C' }];
+    const result = filterItems(items, '');
+    expect(result).toHaveLength(3);
+  });
+  it('UT-05: case insensitive matching', () => {
+    const items = [{ label: 'Git Diff' }];
+    const result = filterItems(items, 'git');
+    expect(result).toHaveLength(1);
+    expect(result[0].label).toBe('Git Diff');
+  });
+  it('UT-06: special characters handled', () => {
+    const items = [{ label: '#File: test.ts' }];
+    const result = filterItems(items, '#');
+    expect(result).toHaveLength(1);
+  });
+  it('UT-07: unicode characters', () => {
+    const items = [{ label: 'Tep' }, { label: 'Thu muc' }];
+    const result = filterItems(items, 'te');
+    expect(result.map(r => r.label)).toContain('Tep');
+  });
+  it('UT-08: score ordering (prefix > mid)', () => {
+    const items = [{ label: 'Current File' }, { label: 'Folder' }];
+    const result = filterItems(items, 'f');
+    // 'Folder' starts with 'f', should score higher
+    expect(result[0].label).toBe('Folder');
+  });
+  it('UT-09: single character query', () => {
+    const result = filterItems(CONTEXT_MENU_ITEMS, 'm');
+    expect(result.map(r => r.label)).toContain('MCP');
+  });
+  it('UT-10: very long query (20+ chars) returns empty for short items', () => {
+    const items = [{ label: 'Short' }];
+    const result = filterItems(items, 'verylongquerythatnevermatches');
+    expect(result).toHaveLength(0);
+  });
+});
+// ============================================================
+// 2.2 ContextMenuItems.ts (UT-11 to UT-13)
+// ============================================================
+describe('UT — ContextMenuItems', () => {
+  it('UT-11: all 9 items defined', () => {
+    expect(CONTEXT_MENU_ITEMS).toHaveLength(9);
+  });
+  it('UT-12: each item has required fields', () => {
+    for (const item of CONTEXT_MENU_ITEMS) {
+      expect(item).toHaveProperty('id');
+      expect(item).toHaveProperty('label');
+      expect(item).toHaveProperty('icon');
+      expect(item).toHaveProperty('type');
+    }
+  });
+  it('UT-13: correct types assigned to instant items', () => {
+    const instantIds = ['git-diff', 'terminal', 'problems', 'current-file'];
+    for (const id of instantIds) {
+      const item = CONTEXT_MENU_ITEMS.find(i => i.id === id);
+      expect(item).toBeDefined();
+      expect(item!.type).toBe('instant');
+    }
+  });
+});

package/extension/src/webview/badges/BadgeManager.ts ADDED Viewed

@@ -0,0 +1,94 @@
+/**
+ * BadgeManager — CRUD operations for context tag badges
+ * KSA-252
+ */
+import type { ContextTagBadge, ResolvedContext } from '../protocol';
+import { MessageBridge } from '../bridge/MessageBridge';
+export class BadgeManager {
+  private badges: Map<string, ContextTagBadge> = new Map();
+  private bridge: MessageBridge;
+  private idCounter = 0;
+  constructor(bridge: MessageBridge) {
+    this.bridge = bridge;
+  }
+  generateId(): string {
+    return `badge-${++this.idCounter}-${Date.now()}`;
+  }
+  insert(badge: ContextTagBadge): void {
+    this.badges.set(badge.id, badge);
+  }
+  remove(badgeId: string): boolean {
+    return this.badges.delete(badgeId);
+  }
+  getAll(): ContextTagBadge[] {
+    return Array.from(this.badges.values());
+  }
+  get(badgeId: string): ContextTagBadge | undefined {
+    return this.badges.get(badgeId);
+  }
+  clear(): void {
+    this.badges.clear();
+  }
+  count(): number {
+    return this.badges.size;
+  }
+  async resolveAll(): Promise<ResolvedContext[]> {
+    const results: ResolvedContext[] = [];
+    for (const badge of this.badges.values()) {
+      try {
+        const content = await this.resolveOne(badge);
+        results.push({
+          type: badge.type,
+          label: badge.label,
+          content,
+        });
+      } catch (err) {
+        results.push({
+          type: badge.type,
+          label: badge.label,
+          content: `[Error resolving ${badge.label}: ${(err as Error).message}]`,
+        });
+      }
+    }
+    return results;
+  }
+  private async resolveOne(badge: ContextTagBadge): Promise<string> {
+    switch (badge.type) {
+      case 'git-diff':
+        return this.bridge.resolveGitDiff();
+      case 'terminal':
+        return this.bridge.resolveTerminalOutput();
+      case 'problems': {
+        const diags = await this.bridge.resolveDiagnostics();
+        return diags.map(d => `${d.severity.toUpperCase()} ${d.file}:${d.line} - ${d.message}`).join('\n');
+      }
+      case 'current-file': {
+        const name = await this.bridge.getActiveFileName();
+        return name || '[No active file]';
+      }
+      case 'files':
+      case 'folder':
+      case 'spec':
+      case 'steering':
+      case 'mcp':
+        // These are resolved on submit via their metadata
+        return `[${badge.type}: ${badge.label}]`;
+      default:
+        return `[Unknown type: ${badge.type}]`;
+    }
+  }
+}

package/extension/src/webview/badges/BadgeRenderer.ts ADDED Viewed

@@ -0,0 +1,66 @@
+/**
+ * BadgeRenderer — DOM rendering for context tag badges
+ * KSA-252
+ */
+import type { ContextTagBadge } from '../protocol';
+const ICON_MAP: Record<string, string> = {
+  files: '📁',
+  spec: '📄',
+  'git-diff': '➕',
+  terminal: '💻',
+  problems: '⚠️',
+  folder: '📂',
+  'current-file': '📝',
+  steering: '🎯',
+  mcp: '💎',
+};
+export class BadgeRenderer {
+  private onRemove: (badgeId: string) => void;
+  constructor(onRemove: (badgeId: string) => void) {
+    this.onRemove = onRemove;
+  }
+  createBadgeElement(badge: ContextTagBadge): HTMLSpanElement {
+    const el = document.createElement('span');
+    el.className = 'context-badge';
+    el.contentEditable = 'false';
+    el.dataset.badgeId = badge.id;
+    el.setAttribute('role', 'img');
+    el.setAttribute('aria-label', `Context: ${badge.label}`);
+    const icon = document.createElement('span');
+    icon.className = 'badge-icon';
+    icon.textContent = ICON_MAP[badge.type] || badge.icon;
+    const label = document.createElement('span');
+    label.className = 'badge-label';
+    label.textContent = badge.label;
+    const removeBtn = document.createElement('span');
+    removeBtn.className = 'badge-remove';
+    removeBtn.textContent = '×';
+    removeBtn.setAttribute('aria-label', `Remove ${badge.label} context`);
+    removeBtn.dataset.action = 'remove';
+    removeBtn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.onRemove(badge.id);
+    });
+    el.appendChild(icon);
+    el.appendChild(label);
+    el.appendChild(removeBtn);
+    return el;
+  }
+  static removeBadgeElement(container: HTMLElement, badgeId: string): void {
+    const el = container.querySelector(`[data-badge-id="${badgeId}"]`);
+    if (el) {
+      el.remove();
+    }
+  }
+}

package/extension/src/webview/badges/types.ts ADDED Viewed

@@ -0,0 +1,12 @@
+/**
+ * Badge types — KSA-252
+ */
+import type { ContextSourceType, ContextMetadata, ContextTagBadge } from '../protocol';
+export { ContextSourceType, ContextMetadata, ContextTagBadge };
+export interface BadgeRenderOptions {
+  container: HTMLElement;
+  onRemove: (badgeId: string) => void;
+}