sdlc-agent-4-enterprise-server 1.0.0

package/extension/src/webview/input/InputAreaIntegration.ts

@@ -0,0 +1,408 @@
+/**
+ * InputAreaIntegration — Wires context menu + spinner + options + slash menu into the existing input field
+ * KSA-252: Context Menu
+ * KSA-254: Slash Command Menu
+ * KSA-255: Spinner + Working Indicator
+ * KSA-259: Interactive Options
+ */
+
+import { ContextMenuController } from '../context-menu/ContextMenuController';
+import { SlashMenuController } from '../slash-menu/SlashMenuController';
+import { SpinnerController } from '../spinner/SpinnerController';
+import { SpinnerView } from '../spinner/SpinnerView';
+import { OptionsController } from '../options/OptionsController';
+import { OptionsView } from '../options/OptionsView';
+import { BadgeRenderer } from '../badges/BadgeRenderer';
+import { MessageBridge } from '../bridge/MessageBridge';
+import type { ContextTagBadge, ChatOptionsSignal } from '../protocol';
+import type { SlashSteeringRule } from '../slash-menu/types';
+import type { VsCodeApi } from '../bridge/types';
+
+export interface InputAreaIntegrationOptions {
+  inputElement: HTMLElement;
+  containerElement: HTMLElement;
+  badgeContainer: HTMLElement;
+  vscodeApi: VsCodeApi;
+}
+
+export class InputAreaIntegration {
+  private controller: ContextMenuController;
+  private slashController: SlashMenuController;
+  private spinnerController: SpinnerController;
+  private spinnerView: SpinnerView;
+  private optionsController: OptionsController;
+  private optionsView: OptionsView;
+  private badgeContainer: HTMLElement;
+  private inputElement: HTMLElement;
+  private hashDetectionEnabled = true;
+  private vscodeApi: VsCodeApi;
+
+  constructor(options: InputAreaIntegrationOptions) {
+    this.inputElement = options.inputElement;
+    this.badgeContainer = options.badgeContainer;
+    this.vscodeApi = options.vscodeApi;
+
+    const bridge = new MessageBridge(options.vscodeApi);
+
+    // Context Menu (KSA-252)
+    this.controller = new ContextMenuController(
+      {
+        container: options.containerElement,
+        inputElement: options.inputElement,
+        onBadgeInsert: (badge) => this.renderBadge(badge),
+        onClose: () => this.onMenuClose(),
+      },
+      bridge
+    );
+
+    // Spinner (KSA-255)
+    this.spinnerView = new SpinnerView(options.containerElement, options.inputElement);
+    this.spinnerController = new SpinnerController(this.spinnerView, () => {
+      this.showTimeoutNotification();
+    });
+
+    // Slash Menu (KSA-254)
+    this.slashController = new SlashMenuController({
+      container: options.containerElement,
+      inputElement: options.inputElement,
+      onAgentSelect: (agentName) => this.onAgentSelected(agentName),
+      onSteeringSelect: (rule) => this.onSteeringSelected(rule),
+      onClose: () => this.onMenuClose(),
+    });
+
+    // Options (KSA-259)
+    this.optionsView = new OptionsView(options.containerElement, options.inputElement);
+    this.optionsController = new OptionsController({
+      view: this.optionsView,
+      onSelect: (text, source) => this.handleOptionSelect(text, source),
+      isSpinnerActive: () => this.spinnerController.isProcessing(),
+    });
+
+    this.setupListeners();
+    this.setupProcessingListener();
+    this.setupOptionsListener();
+    this.setupSteeringListener();
+  }
+
+  private setupListeners(): void {
+    // Detect "#" or "/" typed in input
+    this.inputElement.addEventListener('input', (e) => {
+      const event = e as InputEvent;
+      const text = this.inputElement.textContent || '';
+
+      // KSA-254: Detect '/' trigger (BR-01, BR-02, BR-04)
+      if (event.data === '/' && !this.slashController.isOpen() && !this.controller.isOpen()) {
+        const slashPos = text.lastIndexOf('/');
+        if (slashPos >= 0 && this.slashController.isValidTrigger(text, slashPos)) {
+          this.slashController.open(slashPos);
+          return;
+        }
+      } else if (this.slashController.isOpen()) {
+        this.updateSlashFilter();
+        return;
+      }
+
+      // KSA-252: Detect '#' trigger
+      if (!this.hashDetectionEnabled) return;
+      if (event.data === '#' && !this.controller.isOpen()) {
+        this.controller.open();
+      } else if (this.controller.isOpen()) {
+        this.updateFilter();
+      }
+    });
+
+    // Key events for menu navigation + options navigation
+    this.inputElement.addEventListener('keydown', (e) => {
+      const ke = e as KeyboardEvent;
+
+      // Options keyboard handling first (KSA-259)
+      if (this.optionsController.isVisible()) {
+        const handled = this.optionsController.handleKeyDown(ke);
+        if (handled) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+      }
+
+      // KSA-254: Slash menu keyboard handling
+      if (this.slashController.isOpen()) {
+        const handled = this.slashController.handleKeyDown(ke);
+        if (handled) {
+          e.preventDefault();
+          e.stopPropagation();
+          return;
+        }
+      }
+
+      // Context menu keyboard handling (KSA-252)
+      if (this.controller.isOpen()) {
+        const handled = this.controller.handleKeyDown(ke);
+        if (handled) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+      }
+    });
+
+    // Outside click detection
+    document.addEventListener('mousedown', (e) => {
+      const target = e.target as HTMLElement;
+      // KSA-254: Close slash menu on outside click
+      if (this.slashController.isOpen()) {
+        if (!target.closest('.slash-menu')) {
+          this.slashController.close();
+        }
+      }
+      // KSA-252: Close context menu on outside click
+      if (this.controller.isOpen()) {
+        if (!target.closest('.context-menu') && !target.closest('.picker-panel')) {
+          this.controller.close();
+        }
+      }
+    });
+
+    // Badge backspace removal
+    this.inputElement.addEventListener('keydown', (e) => {
+      if ((e as KeyboardEvent).key === 'Backspace' && !this.controller.isOpen() && !this.slashController.isOpen()) {
+        this.handleBadgeBackspace();
+      }
+    });
+  }
+
+  /**
+   * KSA-255: Listen for processing signals from Extension Host.
+   * Handles BOTH protocols:
+   * - chat:processing (original KSA-255 spec: { state: 'start'|'stop', reason })
+   * - chat:workingStatus (actual backend emission: { working: true|false })
+   */
+  private setupProcessingListener(): void {
+    window.addEventListener('message', (event) => {
+      const message = event.data;
+
+      // Handle chat:processing (original protocol from KSA-255 spec)
+      if (message && message.type === 'chat:processing') {
+        if (message.state === 'start') {
+          this.spinnerController.startProcessing();
+          // KSA-259: Auto-dismiss options when processing starts
+          if (this.optionsController.isVisible()) {
+            this.optionsController.dismiss('auto-dismiss');
+          }
+        } else if (message.state === 'stop') {
+          this.spinnerController.stopProcessing(message.reason ?? 'complete');
+          // KSA-259: Show pending options after spinner stops
+          this.optionsController.processPendingOptions();
+        }
+      }
+
+      // Handle chat:workingStatus (actual protocol from backend message-handler)
+      if (message && message.type === 'chat:workingStatus') {
+        if (message.working) {
+          this.spinnerController.startProcessing();
+          // KSA-259: Auto-dismiss options when processing starts
+          if (this.optionsController.isVisible()) {
+            this.optionsController.dismiss('auto-dismiss');
+          }
+        } else {
+          this.spinnerController.stopProcessing('complete');
+          // KSA-259: Show pending options after spinner stops
+          this.optionsController.processPendingOptions();
+        }
+      }
+    });
+  }
+
+  /**
+   * KSA-259: Listen for chat:options signals from Extension Host
+   */
+  private setupOptionsListener(): void {
+    window.addEventListener('message', (event) => {
+      const message = event.data as ChatOptionsSignal;
+      if (message && message.type === 'chat:options') {
+        this.optionsController.showOptions(message);
+      }
+    });
+  }
+
+  /**
+   * KSA-254: Listen for chat:steeringLoaded signal from Extension Host
+   */
+  private setupSteeringListener(): void {
+    window.addEventListener('message', (event) => {
+      const message = event.data;
+      if (message && message.type === 'chat:steeringLoaded' && Array.isArray(message.rules)) {
+        this.slashController.setSteeringRules(message.rules);
+      }
+    });
+  }
+
+  /**
+   * KSA-254: Agent selected — insert /agent-name prefix into textarea (BR-24, BR-25)
+   */
+  private onAgentSelected(agentName: string): void {
+    const text = this.inputElement.textContent || '';
+    const triggerIndex = this.slashController.getTriggerIndex();
+    const before = text.substring(0, triggerIndex);
+    const cursorPos = (window.getSelection()?.anchorOffset) ?? text.length;
+    const after = text.substring(cursorPos);
+    const prefix = `/${agentName} `;
+    this.inputElement.textContent = before + prefix + after;
+    // Move cursor after prefix
+    this.setCursorPosition(before.length + prefix.length);
+  }
+
+  /**
+   * KSA-254: Steering rule selected — add context chip (BR-28, BR-29)
+   */
+  private onSteeringSelected(rule: SlashSteeringRule): void {
+    const text = this.inputElement.textContent || '';
+    const triggerIndex = this.slashController.getTriggerIndex();
+    const before = text.substring(0, triggerIndex);
+    const cursorPos = (window.getSelection()?.anchorOffset) ?? text.length;
+    const after = text.substring(cursorPos);
+    this.inputElement.textContent = before + after;
+    this.setCursorPosition(before.length);
+    // Add as context chip via badge system
+    const badge: ContextTagBadge = {
+      id: `slash-steering-${Date.now()}`,
+      type: 'steering',
+      label: rule.name,
+      icon: rule.icon,
+      metadata: { steeringFile: `.kiro/steering/${rule.file}` },
+    };
+    this.renderBadge(badge);
+  }
+
+  /**
+   * KSA-254: Update slash menu filter based on text after trigger position
+   */
+  private updateSlashFilter(): void {
+    const text = this.inputElement.textContent || '';
+    const triggerIndex = this.slashController.getTriggerIndex();
+    if (triggerIndex < 0) return;
+    // Extract filter text: everything between '/' trigger and cursor
+    const filterText = text.substring(triggerIndex + 1);
+    // BR-17: If user backspaced past the '/' position, close
+    if (!text.includes('/') || text.length <= triggerIndex) {
+      this.slashController.close();
+      return;
+    }
+    this.slashController.filter(filterText);
+  }
+
+  private setCursorPosition(pos: number): void {
+    const range = document.createRange();
+    const sel = window.getSelection();
+    const textNode = this.inputElement.firstChild;
+    if (textNode) {
+      const safePos = Math.min(pos, textNode.textContent?.length ?? 0);
+      range.setStart(textNode, safePos);
+      range.collapse(true);
+      sel?.removeAllRanges();
+      sel?.addRange(range);
+    }
+  }
+
+  /**
+   * KSA-259: Handle option selection — send response to Extension Host
+   */
+  private handleOptionSelect(text: string, source: 'option-click' | 'text-input'): void {
+    this.vscodeApi.postMessage({
+      type: 'chat:response',
+      text,
+      source,
+    });
+  }
+
+  /**
+   * KSA-259: Called when user submits text from textarea
+   * Dismisses options if visible
+   */
+  handleTextSubmit(): void {
+    if (this.optionsController.isVisible()) {
+      this.optionsController.submitCustom();
+    }
+  }
+
+  /**
+   * KSA-255: Handle Stop button click — optimistic reset (BR-04)
+   */
+  handleStopClick(): void {
+    this.spinnerController.stopProcessing('cancelled');
+    this.vscodeApi.postMessage({ type: 'chat:cancel' });
+  }
+
+  /**
+   * KSA-255: Timeout notification
+   */
+  private showTimeoutNotification(): void {
+    this.vscodeApi.postMessage({ type: 'chat:timeout-notification' });
+  }
+
+  private updateFilter(): void {
+    const text = this.inputElement.textContent || '';
+    const lastHash = text.lastIndexOf('#');
+    if (lastHash >= 0) {
+      const filterText = text.substring(lastHash + 1);
+      this.controller.filter(filterText);
+    }
+  }
+
+  private renderBadge(badge: ContextTagBadge): void {
+    const renderer = this.controller.getBadgeRenderer();
+    const el = renderer.createBadgeElement(badge);
+    this.badgeContainer.appendChild(el);
+    this.removeHashText();
+  }
+
+  private removeHashText(): void {
+    const text = this.inputElement.textContent || '';
+    const lastHash = text.lastIndexOf('#');
+    if (lastHash >= 0) {
+      this.inputElement.textContent = text.substring(0, lastHash);
+    }
+  }
+
+  private handleBadgeBackspace(): void {
+    const badges = this.controller.getBadgeManager().getAll();
+    if (badges.length > 0) {
+      const selection = window.getSelection();
+      if (selection && selection.anchorOffset === 0) {
+        const lastBadge = badges[badges.length - 1];
+        this.controller.getBadgeManager().remove(lastBadge.id);
+        BadgeRenderer.removeBadgeElement(this.badgeContainer, lastBadge.id);
+      }
+    }
+  }
+
+  private onMenuClose(): void {
+    this.inputElement.focus();
+  }
+
+  getController(): ContextMenuController {
+    return this.controller;
+  }
+
+  getSpinnerController(): SpinnerController {
+    return this.spinnerController;
+  }
+
+  getOptionsController(): OptionsController {
+    return this.optionsController;
+  }
+
+  getSlashController(): SlashMenuController {
+    return this.slashController;
+  }
+
+  async getResolvedContexts() {
+    return this.controller.getBadgeManager().resolveAll();
+  }
+
+  dispose(): void {
+    this.controller.dispose();
+    this.slashController.dispose();
+    this.spinnerController.dispose();
+    this.optionsController.dispose();
+  }
+}

package/extension/src/webview/options/OptionsController.ts

@@ -0,0 +1,203 @@
+/**
+ * OptionsController — State management + event coordination for Interactive Options
+ * KSA-259
+ *
+ * Pattern: Mirrors SpinnerController (KSA-255) — state machine with guard clauses.
+ * States: IDLE <-> OPTIONS_VISIBLE
+ * Observer: subscribes to SpinnerController state for auto-dismiss.
+ */
+
+import type { ChatOptionsSignal } from '../protocol';
+import type { OptionsState, OptionsControllerOptions } from './types';
+import { INITIAL_OPTIONS_STATE, OPTIONS_CONFIG } from './types';
+import type { OptionsView } from './OptionsView';
+
+export class OptionsController {
+  private state: OptionsState;
+  private view: OptionsView;
+  private onSelectCallback: (text: string, source: 'option-click' | 'text-input') => void;
+  private isSpinnerActive: () => boolean;
+  private pendingSignal: ChatOptionsSignal | null = null;
+
+  constructor(options: OptionsControllerOptions) {
+    this.state = { ...INITIAL_OPTIONS_STATE };
+    this.view = options.view;
+    this.onSelectCallback = options.onSelect;
+    this.isSpinnerActive = options.isSpinnerActive;
+
+    // Wire view selection callback
+    this.view.onSelect((text) => this.selectOption(text));
+  }
+
+  /**
+   * Handle incoming chat:options signal from Extension Host.
+   * Guards: ignore empty options, ignore during PROCESSING state (queue instead).
+   */
+  showOptions(signal: ChatOptionsSignal): void {
+    // Guard: empty or invalid options
+    if (!signal.options || signal.options.length === 0) return;
+
+    // Guard: spinner active -> queue for later (BR-08)
+    if (this.isSpinnerActive()) {
+      this.pendingSignal = signal;
+      return;
+    }
+
+    // If options already visible, replace them (AF-02)
+    if (this.state.displayState === 'OPTIONS_VISIBLE') {
+      this.view.hide();
+    }
+
+    // Cap options at MAX_OPTIONS, filter empty strings
+    const validOptions = signal.options
+      .filter((opt) => typeof opt === 'string' && opt.trim().length > 0)
+      .slice(0, OPTIONS_CONFIG.MAX_OPTIONS);
+
+    if (validOptions.length === 0) return;
+
+    // Transition: IDLE -> OPTIONS_VISIBLE
+    this.state = {
+      displayState: 'OPTIONS_VISIBLE',
+      options: validOptions,
+      question: signal.question ?? null,
+    };
+
+    // Render buttons
+    this.view.render(validOptions, signal.question);
+  }
+
+  /**
+   * Handle option button click — send response and hide.
+   */
+  selectOption(text: string): void {
+    // Guard: not visible -> no-op (idempotent)
+    if (this.state.displayState !== 'OPTIONS_VISIBLE') return;
+
+    // Send response to Extension Host
+    this.onSelectCallback(text, 'option-click');
+
+    // Hide options
+    this.hideOptions();
+  }
+
+  /**
+   * Handle custom text submit (Enter in textarea while options visible).
+   * Called by InputAreaIntegration when user submits text.
+   */
+  submitCustom(): void {
+    // No-op if not visible
+    if (this.state.displayState !== 'OPTIONS_VISIBLE') return;
+
+    // Hide options (response sending handled by InputAreaIntegration)
+    this.hideOptions();
+  }
+
+  /**
+   * Dismiss options (Escape, auto-dismiss from spinner, etc.)
+   */
+  dismiss(reason?: string): void {
+    if (this.state.displayState !== 'OPTIONS_VISIBLE') return;
+    this.hideOptions();
+  }
+
+  /**
+   * Process pending options (called when spinner stops).
+   * If options were queued during PROCESSING, show them now.
+   */
+  processPendingOptions(): void {
+    if (this.pendingSignal) {
+      const signal = this.pendingSignal;
+      this.pendingSignal = null;
+      this.showOptions(signal);
+    }
+  }
+
+  /**
+   * Keyboard event handler.
+   * Returns true if the event was handled (should preventDefault + stopPropagation).
+   */
+  handleKeyDown(event: KeyboardEvent): boolean {
+    if (this.state.displayState !== 'OPTIONS_VISIBLE') return false;
+
+    switch (event.key) {
+      case 'Escape':
+        this.dismiss('keyboard');
+        this.view.focusTextarea();
+        return true;
+
+      case 'Tab': {
+        // Move focus between buttons
+        const buttons = this.view.getButtons();
+        if (buttons.length === 0) return false;
+
+        const active = document.activeElement as HTMLElement;
+        const currentIndex = buttons.indexOf(active as HTMLButtonElement);
+
+        if (event.shiftKey) {
+          // Shift+Tab: move backward or back to textarea
+          if (currentIndex <= 0) {
+            this.view.focusTextarea();
+            return true;
+          }
+          buttons[currentIndex - 1].focus();
+        } else {
+          // Tab: move forward or wrap to textarea
+          if (currentIndex === buttons.length - 1 || currentIndex === -1) {
+            // If not on a button or on last button, move to first or textarea
+            if (currentIndex === -1) {
+              buttons[0].focus();
+            } else {
+              this.view.focusTextarea();
+            }
+            return true;
+          }
+          buttons[currentIndex + 1].focus();
+        }
+        return true;
+      }
+
+      case 'Enter': {
+        // Select focused button
+        const active = document.activeElement as HTMLElement;
+        if (active && active.classList.contains('option-btn')) {
+          const text = active.textContent || '';
+          if (text) {
+            this.selectOption(text);
+          }
+          return true;
+        }
+        return false;
+      }
+
+      default:
+        return false;
+    }
+  }
+
+  /**
+   * Check if options are currently visible.
+   */
+  isVisible(): boolean {
+    return this.state.displayState === 'OPTIONS_VISIBLE';
+  }
+
+  /**
+   * Get current state (for testing).
+   */
+  getState(): OptionsState {
+    return { ...this.state };
+  }
+
+  /**
+   * Internal: hide options and reset state.
+   */
+  private hideOptions(): void {
+    this.state = { ...INITIAL_OPTIONS_STATE };
+    this.view.hide();
+  }
+
+  dispose(): void {
+    this.hideOptions();
+    this.pendingSignal = null;
+  }
+}