driftdetect-vscode 0.8.2

package/src/views/patterns-tree-provider.ts

@@ -0,0 +1,179 @@
+/**
+ * PatternsTreeProvider - Pattern tree view
+ * 
+ * Single responsibility: Display patterns in a tree view.
+ */
+
+import * as vscode from 'vscode';
+
+import { BaseTreeProvider, type BaseTreeItem } from './base-tree-provider.js';
+
+import type { PatternData, CategoryData } from '../types/index.js';
+import type { LanguageClient } from 'vscode-languageclient/node';
+
+/**
+ * Tree item types
+ */
+type PatternTreeItemType = 'category' | 'pattern' | 'location';
+
+/**
+ * Pattern tree item
+ */
+export interface PatternTreeItem extends BaseTreeItem {
+  type: PatternTreeItemType;
+  data?: PatternData | CategoryData;
+}
+
+/**
+ * Patterns tree provider
+ */
+export class PatternsTreeProvider extends BaseTreeProvider<PatternTreeItem> {
+  constructor(client: LanguageClient | null) {
+    super(client);
+  }
+
+  async getChildren(element?: PatternTreeItem): Promise<PatternTreeItem[]> {
+    if (!this.client) {
+      return [];
+    }
+
+    const cacheKey = this.getCacheKey(element);
+    const cached = this.getCached(cacheKey);
+    if (cached) {
+      return cached;
+    }
+
+    let items: PatternTreeItem[];
+
+    if (!element) {
+      // Root level: show categories
+      items = await this.getCategories();
+    } else if (element.type === 'category') {
+      // Category level: show patterns
+      items = await this.getPatterns(element.label as string);
+    } else {
+      // Pattern level: no children for now
+      items = [];
+    }
+
+    this.setCache(cacheKey, items);
+    return items;
+  }
+
+  private async getCategories(): Promise<PatternTreeItem[]> {
+    try {
+      const response = await this.sendRequest<{ categories: CategoryData[] }>(
+        'drift/patterns/categories'
+      );
+
+      return response.categories.map((cat) => this.createCategoryItem(cat));
+    } catch {
+      return [];
+    }
+  }
+
+  private async getPatterns(category: string): Promise<PatternTreeItem[]> {
+    try {
+      const response = await this.sendRequest<{ patterns: PatternData[] }>(
+        'drift/patterns/list',
+        { categories: [category] }
+      );
+
+      return response.patterns.map((pattern) => this.createPatternItem(pattern));
+    } catch {
+      return [];
+    }
+  }
+
+  private createCategoryItem(category: CategoryData): PatternTreeItem {
+    const item: PatternTreeItem = {
+      type: 'category',
+      label: category.name,
+      description: `${category.count} patterns`,
+      iconPath: this.getCategoryIcon(category.name),
+      collapsibleState: vscode.TreeItemCollapsibleState.Collapsed,
+      contextValue: 'category',
+      data: category,
+    };
+    return item;
+  }
+
+  private createPatternItem(pattern: PatternData): PatternTreeItem {
+    const item: PatternTreeItem = {
+      type: 'pattern',
+      id: pattern.id,
+      label: pattern.name,
+      description: `${pattern.locationCount} locations • ${Math.round(pattern.confidence * 100)}%`,
+      iconPath: this.getStatusIcon(pattern.status),
+      collapsibleState: vscode.TreeItemCollapsibleState.None,
+      contextValue: 'pattern',
+      tooltip: this.createPatternTooltip(pattern),
+      command: {
+        command: 'drift.showPatternDetail',
+        title: 'Show Pattern Details',
+        arguments: [pattern.id],
+      },
+      data: pattern,
+    };
+    return item;
+  }
+
+  private getCategoryIcon(category: string): vscode.ThemeIcon {
+    const iconMap: Record<string, string> = {
+      api: 'globe',
+      auth: 'lock',
+      security: 'shield',
+      errors: 'error',
+      logging: 'output',
+      'data-access': 'database',
+      config: 'gear',
+      testing: 'beaker',
+      performance: 'dashboard',
+      components: 'symbol-class',
+      styling: 'paintcan',
+      structural: 'folder',
+      types: 'symbol-interface',
+      accessibility: 'accessibility',
+      documentation: 'book',
+    };
+
+    return new vscode.ThemeIcon(iconMap[category] || 'symbol-misc');
+  }
+
+  private getStatusIcon(status: string): vscode.ThemeIcon {
+    switch (status) {
+      case 'approved':
+        return new vscode.ThemeIcon('check', new vscode.ThemeColor('charts.green'));
+      case 'ignored':
+        return new vscode.ThemeIcon('x', new vscode.ThemeColor('charts.gray'));
+      default:
+        return new vscode.ThemeIcon('circle-outline');
+    }
+  }
+
+  private createPatternTooltip(pattern: PatternData): vscode.MarkdownString {
+    const md = new vscode.MarkdownString();
+    md.isTrusted = true;
+
+    md.appendMarkdown(`### ${pattern.name}\n\n`);
+    md.appendMarkdown(`**Category:** ${pattern.category}\n\n`);
+    md.appendMarkdown(`**Status:** ${pattern.status}\n\n`);
+    md.appendMarkdown(`**Confidence:** ${Math.round(pattern.confidence * 100)}%\n\n`);
+    md.appendMarkdown(`**Locations:** ${pattern.locationCount}\n\n`);
+
+    if (pattern.description) {
+      md.appendMarkdown(`---\n\n${pattern.description}\n`);
+    }
+
+    return md;
+  }
+}
+
+/**
+ * Factory function for creating patterns tree provider
+ */
+export function createPatternsTreeProvider(
+  client: LanguageClient | null
+): PatternsTreeProvider {
+  return new PatternsTreeProvider(client);
+}

package/src/views/violations-tree-provider.ts

@@ -0,0 +1,210 @@
+/**
+ * ViolationsTreeProvider - Violations tree view
+ * 
+ * Single responsibility: Display violations in a tree view.
+ */
+
+import * as vscode from 'vscode';
+
+import { BaseTreeProvider, type BaseTreeItem } from './base-tree-provider.js';
+
+import type { ViolationData, Severity } from '../types/index.js';
+import type { LanguageClient } from 'vscode-languageclient/node';
+
+/**
+ * Tree item types
+ */
+type ViolationTreeItemType = 'severity' | 'file' | 'violation';
+
+/**
+ * Violation tree item
+ */
+export interface ViolationTreeItem extends BaseTreeItem {
+  type: ViolationTreeItemType;
+  data?: ViolationData | { severity: Severity; count: number } | { file: string; count: number };
+}
+
+/**
+ * Violations tree provider
+ */
+export class ViolationsTreeProvider extends BaseTreeProvider<ViolationTreeItem> {
+  constructor(client: LanguageClient | null) {
+    super(client);
+  }
+
+  async getChildren(element?: ViolationTreeItem): Promise<ViolationTreeItem[]> {
+    if (!this.client) {
+      return [];
+    }
+
+    const cacheKey = this.getCacheKey(element);
+    const cached = this.getCached(cacheKey);
+    if (cached) {
+      return cached;
+    }
+
+    let items: ViolationTreeItem[];
+
+    if (!element) {
+      // Root level: show by severity
+      items = await this.getSeverityGroups();
+    } else if (element.type === 'severity') {
+      // Severity level: show files
+      items = await this.getFilesBySeverity(element.label as Severity);
+    } else if (element.type === 'file') {
+      // File level: show violations
+      const data = element.data as { file: string };
+      items = await this.getViolationsInFile(data.file);
+    } else {
+      items = [];
+    }
+
+    this.setCache(cacheKey, items);
+    return items;
+  }
+
+  private async getSeverityGroups(): Promise<ViolationTreeItem[]> {
+    try {
+      const response = await this.sendRequest<{
+        bySeverity: Record<Severity, number>;
+      }>('drift/violations/summary');
+
+      const severities: Severity[] = ['error', 'warning', 'info', 'hint'];
+      
+      return severities
+        .filter((s) => response.bySeverity[s] > 0)
+        .map((severity) =>
+          this.createSeverityItem(severity, response.bySeverity[severity])
+        );
+    } catch {
+      return [];
+    }
+  }
+
+  private async getFilesBySeverity(severity: Severity): Promise<ViolationTreeItem[]> {
+    try {
+      const response = await this.sendRequest<{
+        files: Array<{ file: string; count: number }>;
+      }>('drift/violations/byFile', { severity });
+
+      return response.files.map((f) => this.createFileItem(f.file, f.count));
+    } catch {
+      return [];
+    }
+  }
+
+  private async getViolationsInFile(file: string): Promise<ViolationTreeItem[]> {
+    try {
+      const response = await this.sendRequest<{ violations: ViolationData[] }>(
+        'drift/violations/list',
+        { file }
+      );
+
+      return response.violations.map((v) => this.createViolationItem(v));
+    } catch {
+      return [];
+    }
+  }
+
+  private createSeverityItem(severity: Severity, count: number): ViolationTreeItem {
+    return {
+      type: 'severity',
+      label: severity.charAt(0).toUpperCase() + severity.slice(1),
+      description: `${count} violation${count === 1 ? '' : 's'}`,
+      iconPath: this.getSeverityIcon(severity),
+      collapsibleState: vscode.TreeItemCollapsibleState.Collapsed,
+      contextValue: 'severity',
+      data: { severity, count },
+    };
+  }
+
+  private createFileItem(file: string, count: number): ViolationTreeItem {
+    const fileName = file.split('/').pop() || file;
+    
+    return {
+      type: 'file',
+      label: fileName,
+      description: `${count} violation${count === 1 ? '' : 's'}`,
+      iconPath: vscode.ThemeIcon.File,
+      collapsibleState: vscode.TreeItemCollapsibleState.Collapsed,
+      contextValue: 'file',
+      resourceUri: vscode.Uri.file(file),
+      data: { file, count },
+    };
+  }
+
+  private createViolationItem(violation: ViolationData): ViolationTreeItem {
+    const line = violation.range.start.line + 1;
+    
+    return {
+      type: 'violation',
+      id: violation.id,
+      label: violation.message,
+      description: `Line ${line}`,
+      iconPath: this.getSeverityIcon(violation.severity),
+      collapsibleState: vscode.TreeItemCollapsibleState.None,
+      contextValue: 'violation',
+      tooltip: this.createViolationTooltip(violation),
+      command: {
+        command: 'vscode.open',
+        title: 'Go to Violation',
+        arguments: [
+          vscode.Uri.file(violation.file),
+          {
+            selection: new vscode.Range(
+              violation.range.start.line,
+              violation.range.start.character,
+              violation.range.end.line,
+              violation.range.end.character
+            ),
+          },
+        ],
+      },
+      data: violation,
+    };
+  }
+
+  private getSeverityIcon(severity: Severity): vscode.ThemeIcon {
+    switch (severity) {
+      case 'error':
+        return new vscode.ThemeIcon('error', new vscode.ThemeColor('errorForeground'));
+      case 'warning':
+        return new vscode.ThemeIcon('warning', new vscode.ThemeColor('editorWarning.foreground'));
+      case 'info':
+        return new vscode.ThemeIcon('info', new vscode.ThemeColor('editorInfo.foreground'));
+      case 'hint':
+        return new vscode.ThemeIcon('lightbulb', new vscode.ThemeColor('editorHint.foreground'));
+    }
+  }
+
+  private createViolationTooltip(violation: ViolationData): vscode.MarkdownString {
+    const md = new vscode.MarkdownString();
+    md.isTrusted = true;
+
+    md.appendMarkdown(`### ${violation.message}\n\n`);
+    md.appendMarkdown(`**Pattern:** \`${violation.patternId}\`\n\n`);
+    md.appendMarkdown(`**Severity:** ${violation.severity}\n\n`);
+    md.appendMarkdown(`**File:** ${violation.file}\n\n`);
+    md.appendMarkdown(`**Line:** ${violation.range.start.line + 1}\n\n`);
+
+    md.appendMarkdown(`---\n\n`);
+    
+    if (violation.hasQuickFix) {
+      md.appendMarkdown(`$(lightbulb) Quick fix available\n\n`);
+    }
+    if (violation.aiExplainAvailable) {
+      md.appendMarkdown(`$(sparkle) AI explanation available\n\n`);
+    }
+
+    return md;
+  }
+}
+
+/**
+ * Factory function for creating violations tree provider
+ */
+export function createViolationsTreeProvider(
+  client: LanguageClient | null
+): ViolationsTreeProvider {
+  return new ViolationsTreeProvider(client);
+}

package/src/webview/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Webview module exports
+ * 
+ * Webview panels for rich UI experiences.
+ */
+
+export { WebviewManager, createWebviewManager } from './webview-manager.js';

package/src/webview/webview-manager.ts

@@ -0,0 +1,238 @@
+/**
+ * WebviewManager - Webview panel management
+ * 
+ * Single responsibility: Create and manage webview panels.
+ */
+
+import * as vscode from 'vscode';
+
+import type { Logger } from '../infrastructure/index.js';
+
+/**
+ * Webview panel configuration
+ */
+export interface WebviewPanelConfig {
+  viewType: string;
+  title: string;
+  localResourceRoots?: string[];
+  enableScripts?: boolean;
+  retainContextWhenHidden?: boolean;
+}
+
+/**
+ * Message handler type
+ */
+export type MessageHandler = (data: unknown) => Promise<unknown>;
+
+/**
+ * Webview manager for creating and managing panels
+ */
+export class WebviewManager implements vscode.Disposable {
+  private readonly panels = new Map<string, vscode.WebviewPanel>();
+  private readonly messageHandlers = new Map<string, Map<string, MessageHandler>>();
+  private readonly disposables: vscode.Disposable[] = [];
+
+  constructor(
+    private readonly context: vscode.ExtensionContext,
+    private readonly logger: Logger
+  ) {}
+
+  /**
+   * Show or create a webview panel
+   */
+  async showPanel(
+    config: WebviewPanelConfig,
+    handlers?: Record<string, MessageHandler>
+  ): Promise<vscode.WebviewPanel> {
+    // Reuse existing panel if available
+    const existing = this.panels.get(config.viewType);
+    if (existing) {
+      existing.reveal();
+      return existing;
+    }
+
+    // Create new panel
+    const panel = vscode.window.createWebviewPanel(
+      config.viewType,
+      config.title,
+      vscode.ViewColumn.Beside,
+      {
+        enableScripts: config.enableScripts ?? true,
+        retainContextWhenHidden: config.retainContextWhenHidden ?? false,
+        localResourceRoots: this.getLocalResourceRoots(config),
+      }
+    );
+
+    // Set up message handling
+    if (handlers) {
+      this.messageHandlers.set(config.viewType, new Map(Object.entries(handlers)));
+    }
+
+    panel.webview.onDidReceiveMessage(
+      (message) => this.handleMessage(config.viewType, panel, message),
+      undefined,
+      this.disposables
+    );
+
+    // Handle disposal
+    panel.onDidDispose(
+      () => {
+        this.panels.delete(config.viewType);
+        this.messageHandlers.delete(config.viewType);
+      },
+      undefined,
+      this.disposables
+    );
+
+    // Set content
+    panel.webview.html = await this.getWebviewContent(panel.webview, config);
+
+    this.panels.set(config.viewType, panel);
+    return panel;
+  }
+
+  /**
+   * Send a message to a webview
+   */
+  postMessage(viewType: string, message: unknown): boolean {
+    const panel = this.panels.get(viewType);
+    if (panel) {
+      panel.webview.postMessage(message);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Close a webview panel
+   */
+  closePanel(viewType: string): void {
+    const panel = this.panels.get(viewType);
+    if (panel) {
+      panel.dispose();
+    }
+  }
+
+  /**
+   * Dispose all panels
+   */
+  dispose(): void {
+    for (const panel of this.panels.values()) {
+      panel.dispose();
+    }
+    this.panels.clear();
+    this.messageHandlers.clear();
+
+    for (const d of this.disposables) {
+      d.dispose();
+    }
+  }
+
+  private getLocalResourceRoots(config: WebviewPanelConfig): vscode.Uri[] {
+    const roots = [
+      vscode.Uri.joinPath(this.context.extensionUri, 'dist', 'webview'),
+      vscode.Uri.joinPath(this.context.extensionUri, 'resources'),
+    ];
+
+    if (config.localResourceRoots) {
+      for (const root of config.localResourceRoots) {
+        roots.push(vscode.Uri.joinPath(this.context.extensionUri, root));
+      }
+    }
+
+    return roots;
+  }
+
+  private async handleMessage(
+    viewType: string,
+    panel: vscode.WebviewPanel,
+    message: { type: string; requestId?: string; data?: unknown }
+  ): Promise<void> {
+    const handlers = this.messageHandlers.get(viewType);
+    const handler = handlers?.get(message.type);
+
+    if (!handler) {
+      this.logger.warn(`No handler for message type: ${message.type}`);
+      return;
+    }
+
+    try {
+      const result = await handler(message.data);
+
+      if (message.requestId) {
+        panel.webview.postMessage({
+          type: `${message.type}:response`,
+          requestId: message.requestId,
+          data: result,
+        });
+      }
+    } catch (error) {
+      this.logger.error(`Error handling message ${message.type}:`, error);
+
+      if (message.requestId) {
+        panel.webview.postMessage({
+          type: `${message.type}:error`,
+          requestId: message.requestId,
+          error: error instanceof Error ? error.message : String(error),
+        });
+      }
+    }
+  }
+
+  private async getWebviewContent(
+    webview: vscode.Webview,
+    config: WebviewPanelConfig
+  ): Promise<string> {
+    const scriptUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this.context.extensionUri, 'dist', 'webview', `${config.viewType}.js`)
+    );
+    const styleUri = webview.asWebviewUri(
+      vscode.Uri.joinPath(this.context.extensionUri, 'dist', 'webview', `${config.viewType}.css`)
+    );
+
+    const nonce = this.generateNonce();
+
+    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';
+    style-src ${webview.cspSource} 'unsafe-inline';
+    script-src 'nonce-${nonce}';
+    img-src ${webview.cspSource} https: data:;
+    font-src ${webview.cspSource};
+  ">
+  <link href="${styleUri}" rel="stylesheet">
+  <title>${config.title}</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script nonce="${nonce}">
+    window.vscode = acquireVsCodeApi();
+  </script>
+  <script nonce="${nonce}" src="${scriptUri}"></script>
+</body>
+</html>`;
+  }
+
+  private generateNonce(): string {
+    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+    let nonce = '';
+    for (let i = 0; i < 32; i++) {
+      nonce += chars.charAt(Math.floor(Math.random() * chars.length));
+    }
+    return nonce;
+  }
+}
+
+/**
+ * Factory function for creating webview manager
+ */
+export function createWebviewManager(
+  context: vscode.ExtensionContext,
+  logger: Logger
+): WebviewManager {
+  return new WebviewManager(context, logger);
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2022",
+    "lib": ["ES2022"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "noEmit": false,
+    "verbatimModuleSyntax": false
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "**/*.test.ts"]
+}