sdlc-agent-4-enterprise-server 1.0.0

package/extension/src/panels/base-panel.ts

@@ -0,0 +1,95 @@
+/**
+ * BasePanel --- Abstract base class for all KB webview panels.
+ * Provides common lifecycle management, message handling, and server status subscription.
+ */
+
+import * as vscode from "vscode";
+import {
+  IKbPanel, ExtToWebviewMessage, WebviewToExtMessage,
+  PanelType, PANEL_VIEW_TYPES, PANEL_TITLES, mapServerStatusToWebview,
+} from "../types";
+import { McpServerManager, getNonce } from "../mcp-server-manager";
+import { getIframeHtml, getBaseHtml } from "./panel-html";
+export { getNonce };
+
+export abstract class BasePanel implements IKbPanel, vscode.Disposable {
+  public static authTokenProvider?: () => string;
+  protected _panel: vscode.WebviewPanel | undefined;
+  private _disposables: vscode.Disposable[] = [];
+  private _onDisposeEmitter = new vscode.EventEmitter<void>();
+
+  constructor(
+    protected readonly panelType: PanelType,
+    protected readonly mcpManager: McpServerManager,
+    protected readonly extensionUri: vscode.Uri
+  ) { this.create(); }
+
+  get viewType(): string { return PANEL_VIEW_TYPES[this.panelType]; }
+  get panel(): vscode.WebviewPanel { return this._panel!; }
+  get isAlive(): boolean { return this._panel !== undefined; }
+
+  onDispose(callback: () => void): void { this._onDisposeEmitter.event(callback); }
+
+  protected create(column: vscode.ViewColumn = vscode.ViewColumn.One): void {
+    this._panel = vscode.window.createWebviewPanel(
+      PANEL_VIEW_TYPES[this.panelType], PANEL_TITLES[this.panelType], column,
+      {
+        enableScripts: true, retainContextWhenHidden: true,
+        localResourceRoots: [
+          vscode.Uri.joinPath(this.extensionUri, "webview-assets"),
+          vscode.Uri.joinPath(this.extensionUri, "out"),
+        ],
+      }
+    );
+    this._panel.webview.html = this.getHtml(this._panel.webview);
+    this._panel.webview.onDidReceiveMessage(
+      (msg: WebviewToExtMessage | { type: 'auth_error' }) => {
+        if (msg.type === 'auth_error') {
+          vscode.commands.executeCommand('kiroSdlc.refreshToken').then(() => {
+            if (this._panel) { this._panel.webview.html = this.getHtml(this._panel.webview); }
+          });
+          return;
+        }
+        this.handleMessage(msg as WebviewToExtMessage);
+      }, undefined, this._disposables
+    );
+    this._panel.onDidDispose(() => {
+      this._panel = undefined;
+      this._onDisposeEmitter.fire();
+      this.disposeInternal();
+    }, null, this._disposables);
+    this.mcpManager.onStatusChange((status) => {
+      this.sendMessage({ type: "serverStatus", status: mapServerStatusToWebview(status) });
+    }, null, this._disposables);
+  }
+
+  reveal(): void { this._panel?.reveal(); }
+  reload(): void { if (this._panel) { this._panel.webview.html = this.getHtml(this._panel.webview); } }
+  sendMessage(msg: ExtToWebviewMessage): void { if (this._panel) { this._panel.webview.postMessage(msg); } }
+  dispose(): void { this._panel?.dispose(); }
+
+  private disposeInternal(): void {
+    this._disposables.forEach((d) => d.dispose());
+    this._disposables = [];
+    this._onDisposeEmitter.dispose();
+  }
+
+  protected getNonce(): string { return getNonce(); }
+
+  protected getWebviewUri(webview: vscode.Webview, ...pathSegments: string[]): vscode.Uri {
+    return webview.asWebviewUri(vscode.Uri.joinPath(this.extensionUri, ...pathSegments));
+  }
+
+  protected getIframeHtml(): string {
+    return getIframeHtml(this.panelType, BasePanel.authTokenProvider);
+  }
+
+  protected getBaseHtml(webview: vscode.Webview, bodyContent: string, scripts: string[], styles: string[]): string {
+    return getBaseHtml(webview, this.panelType, this.extensionUri, bodyContent, scripts, styles, this.getNonce());
+  }
+
+  // === Abstract methods ===
+  abstract getHtml(webview: vscode.Webview): string;
+  abstract loadData(): Promise<void>;
+  abstract handleMessage(msg: WebviewToExtMessage): Promise<void>;
+}

package/extension/src/panels/dashboard-panel.ts

@@ -0,0 +1,29 @@
+/**
+ * DashboardPanel — KB Dashboard using MCP invokeTool for data.
+ * mem_admin(dashboard) returns valid JSON: { metrics: {...}, recommendations: [...] }
+ */
+
+import * as vscode from "vscode";
+import { WebviewToExtMessage, SERVER_CONSTANTS } from "../types";
+import { McpServerManager } from "../mcp-server-manager";
+import { BasePanel } from "./base-panel";
+
+export class DashboardPanel extends BasePanel {
+  private refreshTimer: NodeJS.Timeout | undefined;
+
+  constructor(mcpManager: McpServerManager, extensionUri: vscode.Uri) {
+    super("dashboard", mcpManager, extensionUri);
+  }
+
+  getHtml(webview: vscode.Webview): string {
+    return this.getIframeHtml();
+  }
+
+  async loadData(): Promise<void> {
+    // No-op: Data is loaded natively by the iframe
+  }
+
+  async handleMessage(msg: WebviewToExtMessage): Promise<void> {
+    // No-op: Webview communication is handled inside the iframe
+  }
+}

package/extension/src/panels/graph-panel.ts

@@ -0,0 +1,27 @@
+/**
+ * GraphPanel — KB Graph viewer via iframe (shared viewer on MCP port).
+ * Uses same viewer as browser (http://localhost:PORT/) for consistent results.
+ */
+
+import * as vscode from "vscode";
+import { WebviewToExtMessage } from "../types";
+import { McpServerManager } from "../mcp-server-manager";
+import { BasePanel } from "./base-panel";
+
+export class GraphPanel extends BasePanel {
+  constructor(mcpManager: McpServerManager, extensionUri: vscode.Uri) {
+    super("graph", mcpManager, extensionUri);
+  }
+
+  getHtml(webview: vscode.Webview): string {
+    return this.getIframeHtml();
+  }
+
+  async loadData(): Promise<void> {
+    // No-op: iframe loads data directly from MCP server API
+  }
+
+  async handleMessage(msg: WebviewToExtMessage): Promise<void> {
+    // No-op: iframe handles all interactions internally
+  }
+}

package/extension/src/panels/impact-panel.ts

@@ -0,0 +1,167 @@
+/**
+ * ImpactPanel — KSA-174
+ * Shows blast radius visualization for a selected symbol.
+ * Calls MCP tool: code_impact to get affected files, callers, and tests.
+ */
+
+import * as vscode from "vscode";
+import { WebviewToExtMessage } from "../types";
+import { McpServerManager } from "../mcp-server-manager";
+import { BasePanel } from "./base-panel";
+
+interface ImpactResult {
+  symbol: string;
+  affectedFiles: { file: string; line: number; kind: string }[];
+  callers: { name: string; file: string; line: number }[];
+  tests: { name: string; file: string; line: number }[];
+  totalImpact: number;
+}
+
+export class ImpactPanel extends BasePanel {
+  private currentSymbol = "";
+
+  constructor(mcpManager: McpServerManager, extensionUri: vscode.Uri) {
+    super("analytics", mcpManager, extensionUri);
+  }
+
+  get viewType(): string {
+    return "kiroImpactPanel";
+  }
+
+  protected create(column: vscode.ViewColumn = vscode.ViewColumn.One): void {
+    this._panel = vscode.window.createWebviewPanel(
+      "kiroImpactPanel",
+      "Impact Analysis",
+      column,
+      { enableScripts: true, retainContextWhenHidden: true }
+    );
+    this._panel.webview.html = this.getHtml(this._panel.webview);
+    this._panel.webview.onDidReceiveMessage((msg: WebviewToExtMessage) => this.handleMessage(msg));
+    this._panel.onDidDispose(() => { this._panel = undefined; });
+  }
+
+  setSymbol(symbol: string): void {
+    this.currentSymbol = symbol;
+  }
+
+  getHtml(_webview: vscode.Webview): string {
+    const nonce = this.getNonce();
+    return `<!DOCTYPE html>
+<html lang="en"><head><meta charset="UTF-8">
+<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; script-src 'nonce-${nonce}';">
+<style>
+body{font-family:var(--vscode-font-family);padding:16px;color:var(--vscode-foreground);background:var(--vscode-editor-background)}
+.section{margin-bottom:16px}.section-title{font-weight:bold;margin-bottom:8px;font-size:1.1em}
+.item{padding:6px 8px;margin:2px 0;border:1px solid var(--vscode-editorWidget-border);border-radius:3px;cursor:pointer;display:flex;justify-content:space-between}
+.item:hover{background:var(--vscode-list-hoverBackground)}.item-name{font-weight:500}.item-file{font-size:.85em;opacity:.7}
+.summary{display:flex;gap:16px;margin-bottom:16px;padding:12px;background:var(--vscode-editor-inactiveSelectionBackground);border-radius:4px}
+.stat{text-align:center}.stat-value{font-size:1.5em;font-weight:bold}.stat-label{font-size:.8em;opacity:.7}
+.loading{text-align:center;padding:40px;opacity:.7}
+</style></head><body>
+<h2>Impact Analysis</h2>
+<div id="loading" class="loading">Analyzing impact...</div>
+<div id="content" style="display:none">
+<div id="symbol-name" style="font-size:1.2em;margin-bottom:12px"></div>
+<div class="summary" id="summary"></div>
+<div id="sections"></div>
+</div>
+<script nonce="${nonce}">
+const vscode=acquireVsCodeApi();vscode.postMessage({type:'ready'});
+window.addEventListener('message',e=>{const msg=e.data;if(msg.type==='impactData')renderImpact(msg.data);});
+function renderImpact(data){document.getElementById('loading').style.display='none';
+document.getElementById('content').style.display='block';
+document.getElementById('symbol-name').textContent='Symbol: '+data.symbol;
+document.getElementById('summary').innerHTML=
+'<div class="stat"><div class="stat-value">'+data.affectedFiles.length+'</div><div class="stat-label">Files</div></div>'+
+'<div class="stat"><div class="stat-value">'+data.callers.length+'</div><div class="stat-label">Callers</div></div>'+
+'<div class="stat"><div class="stat-value">'+data.tests.length+'</div><div class="stat-label">Tests</div></div>';
+let h='';
+if(data.callers.length){h+='<div class="section"><div class="section-title">Callers</div>';
+data.callers.forEach(c=>{h+='<div class="item" data-file="'+c.file+'" data-line="'+c.line+'"><span class="item-name">'+c.name+'</span><span class="item-file">'+c.file+':'+c.line+'</span></div>';});h+='</div>';}
+if(data.affectedFiles.length){h+='<div class="section"><div class="section-title">Affected Files</div>';
+data.affectedFiles.forEach(f=>{h+='<div class="item" data-file="'+f.file+'" data-line="'+f.line+'"><span class="item-name">'+f.file+'</span><span class="item-file">'+f.kind+'</span></div>';});h+='</div>';}
+if(data.tests.length){h+='<div class="section"><div class="section-title">Related Tests</div>';
+data.tests.forEach(t=>{h+='<div class="item" data-file="'+t.file+'" data-line="'+t.line+'"><span class="item-name">'+t.name+'</span><span class="item-file">'+t.file+':'+t.line+'</span></div>';});h+='</div>';}
+document.getElementById('sections').innerHTML=h||'<p>No impact detected.</p>';
+document.querySelectorAll('.item').forEach(el=>{el.addEventListener('click',()=>{
+vscode.postMessage({type:'openFile',file:el.dataset.file,line:parseInt(el.dataset.line)});});});}
+</script></body></html>`;
+  }
+
+  async loadData(): Promise<void> {
+    if (!this.currentSymbol) { return; }
+    try {
+      const raw = await this.mcpManager.invokeTool("code_context", { symbol: this.currentSymbol });
+      const data = this.parseImpact(raw);
+      this.sendMessage({ type: "impactData", data } as any);
+    } catch (err) {
+      this.sendMessage({ type: "error", message: `Impact analysis failed: ${(err as Error).message}`, retryable: true });
+    }
+  }
+
+  async handleMessage(msg: WebviewToExtMessage): Promise<void> {
+    switch (msg.type) {
+      case "ready":
+      case "refresh":
+        await this.loadData();
+        break;
+      case "manualRetry":
+        try { await this.mcpManager.reconnect(); } catch { /* ignore */ }
+        break;
+      default:
+        await this.handleOpenFile(msg as any);
+        break;
+    }
+  }
+
+  private async handleOpenFile(msg: { type: string; file?: string; line?: number }): Promise<void> {
+    if (msg.type !== "openFile" || !msg.file) { return; }
+    try {
+      const doc = await vscode.workspace.openTextDocument(msg.file);
+      const editor = await vscode.window.showTextDocument(doc);
+      const pos = new vscode.Position(Math.max(0, (msg.line || 1) - 1), 0);
+      editor.selection = new vscode.Selection(pos, pos);
+      editor.revealRange(new vscode.Range(pos, pos), vscode.TextEditorRevealType.InCenter);
+    } catch { /* file may not exist */ }
+  }
+
+  private parseImpact(raw: string): ImpactResult {
+    try {
+      const parsed = JSON.parse(raw);
+      return {
+        symbol: this.currentSymbol,
+        affectedFiles: parsed.affectedFiles || parsed.files || [],
+        callers: parsed.callers || parsed.references || [],
+        tests: parsed.tests || [],
+        totalImpact: parsed.totalImpact || 0,
+      };
+    } catch {
+      return { symbol: this.currentSymbol, affectedFiles: [], callers: [], tests: [], totalImpact: 0 };
+    }
+  }
+}
+
+/**
+ * Show impact analysis command — prompts user for symbol, then opens panel.
+ */
+export async function showImpactAnalysis(mcpManager: McpServerManager, extensionUri: vscode.Uri): Promise<void> {
+  const editor = vscode.window.activeTextEditor;
+  let defaultSymbol = "";
+
+  if (editor) {
+    const wordRange = editor.document.getWordRangeAtPosition(editor.selection.active);
+    if (wordRange) { defaultSymbol = editor.document.getText(wordRange); }
+  }
+
+  const symbol = await vscode.window.showInputBox({
+    prompt: "Enter symbol name for impact analysis",
+    value: defaultSymbol,
+    placeHolder: "e.g. MyClass.myMethod",
+  });
+
+  if (!symbol) { return; }
+
+  const panel = new ImpactPanel(mcpManager, extensionUri);
+  panel.setSymbol(symbol);
+  await panel.loadData();
+}

package/extension/src/panels/login-panel.ts

@@ -0,0 +1,100 @@
+/**
+ * LoginPanel — Webview for username/password login.
+ * Opens as a tab when user clicks "Login" in sidebar.
+ */
+
+import * as vscode from "vscode";
+import { getNonce } from "./base-panel";
+import { AuthManager } from "../auth/AuthManager";
+
+export class LoginPanel implements vscode.Disposable {
+  private panel: vscode.WebviewPanel | null = null;
+  private disposables: vscode.Disposable[] = [];
+
+  constructor(
+    private readonly authManager: AuthManager,
+    private readonly extensionUri: vscode.Uri
+  ) {}
+
+  show(): void {
+    if (this.panel) { this.panel.reveal(); return; }
+    this.panel = vscode.window.createWebviewPanel("kiroSdlc.login", "Kiro SDLC — Login", vscode.ViewColumn.One, { enableScripts: true, retainContextWhenHidden: false });
+    this.panel.webview.html = this.getHtml();
+    this.panel.webview.onDidReceiveMessage(async (msg) => { if (msg.type === "login") { await this.handleLogin(msg.username, msg.password); } }, null, this.disposables);
+    this.panel.onDidDispose(() => { this.panel = null; }, null, this.disposables);
+  }
+
+  close(): void { this.panel?.dispose(); this.panel = null; }
+
+  private async handleLogin(username: string, password: string): Promise<void> {
+    this.postMessage({ type: "loading", loading: true });
+    try {
+      await this.authManager.login(username, password);
+      this.postMessage({ type: "success" });
+      setTimeout(() => this.close(), 500);
+    } catch (err) {
+      this.postMessage({ type: "error", message: (err as Error).message });
+    }
+  }
+
+  private postMessage(msg: unknown): void { this.panel?.webview.postMessage(msg); }
+
+  private getHtml(): string {
+    const nonce = getNonce();
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Login</title>
+  <style>
+    body { font-family: var(--vscode-font-family); padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: var(--vscode-editor-background); color: var(--vscode-foreground); }
+    .container { width: 100%; max-width: 360px; padding: 40px 20px; }
+    h1 { font-size: 1.5em; text-align: center; margin-bottom: 8px; }
+    .subtitle { text-align: center; opacity: 0.7; margin-bottom: 32px; font-size: 0.9em; }
+    .form-group { margin-bottom: 16px; }
+    label { display: block; margin-bottom: 4px; font-size: 0.85em; color: var(--vscode-descriptionForeground); }
+    input { width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 1em; border: 1px solid var(--vscode-input-border); background: var(--vscode-input-background); color: var(--vscode-input-foreground); border-radius: 4px; outline: none; }
+    input:focus { border-color: var(--vscode-focusBorder); }
+    .btn { width: 100%; padding: 12px; font-size: 1em; border: none; border-radius: 4px; cursor: pointer; margin-top: 8px; font-weight: 500; }
+    .btn-primary { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
+    .btn-primary:hover { background: var(--vscode-button-hoverBackground); }
+    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
+    .error { color: var(--vscode-errorForeground); text-align: center; margin-top: 16px; font-size: 0.85em; display: none; }
+    .success { color: var(--vscode-testing-iconPassed); text-align: center; margin-top: 16px; font-size: 0.9em; display: none; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Kiro SDLC Agents</h1>
+    <p class="subtitle">Login to Backend Server</p>
+    <form id="loginForm">
+      <div class="form-group">
+        <label for="username">Username</label>
+        <input type="text" id="username" autocomplete="username" placeholder="admin" required />
+      </div>
+      <div class="form-group">
+        <label for="password">Password</label>
+        <input type="password" id="password" autocomplete="current-password" required />
+      </div>
+      <button type="submit" class="btn btn-primary" id="loginBtn">Login</button>
+    </form>
+    <div class="error" id="errorMsg"></div>
+    <div class="success" id="successMsg">Login successful</div>
+  </div>
+  <script nonce="${nonce}">
+    const vscode = acquireVsCodeApi();
+    const form = document.getElementById('loginForm');
+    const loginBtn = document.getElementById('loginBtn');
+    const errorMsg = document.getElementById('errorMsg');
+    const successMsg = document.getElementById('successMsg');
+    form.addEventListener('submit', (e) => { e.preventDefault(); const u = document.getElementById('username').value.trim(); const p = document.getElementById('password').value; if (!u || !p) return; errorMsg.style.display = 'none'; vscode.postMessage({ type: 'login', username: u, password: p }); });
+    window.addEventListener('message', (event) => { const msg = event.data; if (msg.type === 'loading') { loginBtn.disabled = msg.loading; loginBtn.textContent = msg.loading ? 'Logging in...' : 'Login'; } else if (msg.type === 'error') { errorMsg.style.display = 'block'; errorMsg.textContent = msg.message; loginBtn.disabled = false; loginBtn.textContent = 'Login'; } else if (msg.type === 'success') { successMsg.style.display = 'block'; errorMsg.style.display = 'none'; loginBtn.disabled = true; loginBtn.textContent = 'Done'; } });
+    document.getElementById('username').focus();
+  </script>
+</body>
+</html>`;
+  }
+
+  dispose(): void { this.close(); this.disposables.forEach(d => d.dispose()); }
+}

package/extension/src/panels/panel-html.ts

@@ -0,0 +1,124 @@
+/**
+ * BasePanel HTML generation --- extracted templates for iframe and base HTML.
+ */
+
+import * as vscode from "vscode";
+import { PanelType, PANEL_TITLES } from "../types";
+import { BasePanel } from "./base-panel";
+
+/**
+ * Generates an iframe that embeds the backend server's UI.
+ */
+export function getIframeHtml(panelType: PanelType, authTokenProvider?: () => string): string {
+  const config = vscode.workspace.getConfiguration("kiroSdlc");
+  const backendUrl = config.get<string>("backend.url") || "http://127.0.0.1:48721";
+  const token = authTokenProvider ? authTokenProvider() : "";
+  const encodedToken = encodeURIComponent(token);
+  const pageMapping: Record<string, string> = {
+    dashboard: "dashboard", graph: "graph", tags: "tags",
+    quality: "quality", analytics: "analytics", workflow: "workflow",
+  };
+  const page = pageMapping[panelType] || "dashboard";
+  const backendOrigin = new URL(backendUrl).origin;
+  const src = `${backendUrl}/admin?embed=true&page=${page}&token=${encodedToken}`;
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="referrer" content="no-referrer">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; frame-src ${backendOrigin}; style-src 'unsafe-inline';">
+    <title>${PANEL_TITLES[panelType]}</title>
+    <style>
+      body { padding: 0; margin: 0; height: 100vh; width: 100vw; overflow: hidden; background-color: var(--vscode-editor-background); }
+      iframe { border: none; width: 100%; height: 100%; display: block; }
+    </style>
+</head>
+<body>
+    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--vscode-descriptionForeground); text-align: center; z-index: -1;">
+        <p>Loading Dashboard UI from backend...</p>
+        <p style="font-size: 0.8em; opacity: 0.7;">If this message persists, the backend server may be down.</p>
+    </div>
+    <iframe src="${src}" allow="clipboard-read; clipboard-write"></iframe>
+    <script>
+      const vscode = acquireVsCodeApi();
+      window.addEventListener('message', (event) => {
+        if (event.data && (event.data.type === 'auth_error' || event.data.status === 401)) {
+          vscode.postMessage({ type: 'auth_error' });
+        }
+      });
+    </script>
+</body>
+</html>`;
+}
+
+/**
+ * Generate the base HTML wrapper with CSP headers.
+ */
+export function getBaseHtml(
+  webview: vscode.Webview,
+  panelType: PanelType,
+  extensionUri: vscode.Uri,
+  bodyContent: string,
+  scripts: string[],
+  styles: string[],
+  nonce: string
+): string {
+  const cspSource = webview.cspSource;
+  const getUri = (...segs: string[]) => webview.asWebviewUri(vscode.Uri.joinPath(extensionUri, ...segs));
+
+  const styleLinks = styles
+    .map((s) => `<link rel="stylesheet" href="${getUri("webview-assets", s)}">`)
+    .join("\n    ");
+  const scriptTags = scripts
+    .map((s) => `<script nonce="${nonce}" src="${getUri("webview-assets", s)}"></script>`)
+    .join("\n    ");
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'nonce-${nonce}'; style-src ${cspSource} 'unsafe-inline'; img-src ${cspSource} data:; font-src ${cspSource}; connect-src 'none';">
+    <title>${PANEL_TITLES[panelType]}</title>
+    ${styleLinks}
+    <style>
+      body { padding: 0; margin: 0; font-family: var(--vscode-font-family); font-size: var(--vscode-font-size); color: var(--vscode-foreground); background-color: var(--vscode-editor-background); }
+      .loading { display: flex; align-items: center; justify-content: center; height: 100vh; opacity: 0.7; }
+      .error-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; z-index: 9999; }
+      .error-overlay.visible { display: flex; }
+      .error-box { background: var(--vscode-editor-background); border: 1px solid var(--vscode-editorWidget-border); border-radius: 4px; padding: 20px; text-align: center; max-width: 400px; }
+      .error-box button { margin-top: 12px; padding: 6px 14px; background: var(--vscode-button-background); color: var(--vscode-button-foreground); border: none; border-radius: 2px; cursor: pointer; }
+    </style>
+</head>
+<body>
+    <div id="error-overlay" class="error-overlay">
+      <div class="error-box">
+        <p id="error-message">Server disconnected. Reconnecting...</p>
+        <button id="retry-btn" onclick="handleRetry()" style="display:none">Retry</button>
+      </div>
+    </div>
+    ${bodyContent}
+    <script nonce="${nonce}">
+      const vscode = acquireVsCodeApi();
+      window.addEventListener('message', (event) => {
+        const msg = event.data;
+        if (msg.type === 'serverStatus') {
+          const overlay = document.getElementById('error-overlay');
+          const errorMsg = document.getElementById('error-message');
+          const retryBtn = document.getElementById('retry-btn');
+          if (msg.status === 'connected') { overlay.classList.remove('visible'); vscode.postMessage({ type: 'refresh' }); }
+          else if (msg.status === 'disconnected') { errorMsg.textContent = 'Server disconnected. Reconnecting...'; retryBtn.style.display = 'none'; overlay.classList.add('visible'); }
+          else if (msg.status === 'failed') { errorMsg.textContent = 'Server unavailable. Click to retry.'; retryBtn.style.display = 'inline-block'; overlay.classList.add('visible'); }
+        }
+        if (msg.type === 'error') { const o = document.getElementById('error-overlay'); document.getElementById('error-message').textContent = msg.message; document.getElementById('retry-btn').style.display = msg.retryable ? 'inline-block' : 'none'; o.classList.add('visible'); }
+        if (typeof handlePanelMessage === 'function') { handlePanelMessage(msg); }
+      });
+      function handleRetry() { document.getElementById('error-overlay').classList.remove('visible'); vscode.postMessage({ type: 'manualRetry' }); }
+      vscode.postMessage({ type: 'ready' });
+    </script>
+    ${scriptTags}
+</body>
+</html>`;
+}

package/extension/src/panels/quality-panel.ts

@@ -0,0 +1,31 @@
+/**
+ * QualityPanel — Quality scores histogram, low-quality table, bulk actions.
+ * Real-time updates via KbEventBus SSE subscription + polling fallback.
+ */
+
+import * as vscode from "vscode";
+import { WebviewToExtMessage, SERVER_CONSTANTS } from "../types";
+import { McpServerManager } from "../mcp-server-manager";
+import { BasePanel } from "./base-panel";
+import { KbEventBus } from "../kb-event-bus";
+
+export class QualityPanel extends BasePanel {
+  private refreshTimer: NodeJS.Timeout | undefined;
+  private eventSubscription: vscode.Disposable | undefined;
+
+  constructor(mcpManager: McpServerManager, extensionUri: vscode.Uri, eventBus?: KbEventBus) {
+    super("quality", mcpManager, extensionUri);
+  }
+
+  getHtml(webview: vscode.Webview): string {
+    return this.getIframeHtml();
+  }
+
+  async loadData(): Promise<void> {
+    // No-op
+  }
+
+  async handleMessage(msg: WebviewToExtMessage): Promise<void> {
+    // No-op
+  }
+}