ompchamber 0.3.0

package/src/client/components/workspace/terminal-panel/RealtimeXtermView.tsx

@@ -0,0 +1,340 @@
+import { useEffect, useRef, useState, useImperativeHandle, useCallback } from 'preact/hooks';
+import { forwardRef } from 'preact/compat';
+import { ArrowDown } from 'lucide-preact';
+import type { Terminal } from '@xterm/xterm';
+import type { FitAddon } from '@xterm/addon-fit';
+import { useTheme } from '@/client/hooks/ui/theme';
+import { useTerminalOutputSync } from '@/client/hooks/workspace/terminal-output';
+import {
+  getXtermTheme,
+  XTERM_FONT_FAMILY,
+  safePatchFitAddon,
+  safePatchRenderService,
+  getTerminalSessionOutput,
+  type XtermCore,
+  type XtermModule,
+} from '@/client/data/theme/terminal';
+
+export interface RealtimeXtermHandle {
+  write: (data: string) => void;
+  writeln: (line: string) => void;
+  clear: () => void;
+  focus: () => void;
+  scrollToBottom: () => void;
+  scrollToTop: () => void;
+  scrollLines: (amount: number) => void;
+}
+
+interface RealtimeXtermViewProps {
+  onCommandSubmit?: (cmd: string, options?: { fromXterm?: boolean }) => void;
+  cwd: string;
+}
+
+function handleKeyNavigation(term: Terminal, event: globalThis.KeyboardEvent): boolean {
+  if (event.type !== 'keydown') return true;
+  if (event.shiftKey) {
+    if (event.key === 'PageUp') { term.scrollPages(-1); return false; }
+    if (event.key === 'PageDown') { term.scrollPages(1); return false; }
+    if (event.key === 'Home') { term.scrollToTop(); return false; }
+    if (event.key === 'End') { term.scrollToBottom(); return false; }
+    if (event.key === 'ArrowUp') { term.scrollLines(-1); return false; }
+    if (event.key === 'ArrowDown') { term.scrollLines(1); return false; }
+  }
+  return true;
+}
+
+export const RealtimeXtermView = forwardRef<RealtimeXtermHandle, RealtimeXtermViewProps>(
+  ({ onCommandSubmit, cwd: _cwd }, ref) => {
+    const { isDark } = useTheme();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const terminalRef = useRef<Terminal | null>(null);
+    const fitAddonRef = useRef<FitAddon | null>(null);
+    const inputBufferRef = useRef<string>('');
+    const pendingWritesRef = useRef<string[]>([]);
+    const [isScrolledUp, setIsScrolledUp] = useState(false);
+    const onCommandSubmitRef = useRef(onCommandSubmit);
+    const { recordOutput, clearOutput } = useTerminalOutputSync(terminalRef);
+
+    useEffect(() => {
+      if (terminalRef.current) {
+        terminalRef.current.options.theme = getXtermTheme(isDark);
+        terminalRef.current.refresh(0, terminalRef.current.rows - 1);
+      }
+    }, [isDark]);
+
+    useEffect(() => {
+      onCommandSubmitRef.current = onCommandSubmit;
+    }, [onCommandSubmit]);
+
+    const scrollToBottom = useCallback(() => {
+      if (terminalRef.current) {
+        terminalRef.current.scrollToBottom();
+        setIsScrolledUp(false);
+      }
+    }, []);
+
+    const scrollToTop = useCallback(() => {
+      terminalRef.current?.scrollToTop();
+    }, []);
+
+    const scrollLines = useCallback((amount: number) => {
+      terminalRef.current?.scrollLines(amount);
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      write: (data: string) => {
+        recordOutput(data);
+        if (terminalRef.current) {
+          const term = terminalRef.current;
+          const wasAtBottom = term.buffer.active.viewportY === term.buffer.active.baseY;
+          term.write(data, () => {
+            if (wasAtBottom) term.scrollToBottom();
+          });
+        } else {
+          pendingWritesRef.current.push(data);
+        }
+      },
+      writeln: (line: string) => {
+        recordOutput(line + '\r\n');
+        if (terminalRef.current) {
+          const term = terminalRef.current;
+          const wasAtBottom = term.buffer.active.viewportY === term.buffer.active.baseY;
+          term.writeln(line, () => {
+            if (wasAtBottom) term.scrollToBottom();
+          });
+        } else {
+          pendingWritesRef.current.push(line + '\r\n');
+        }
+      },
+      clear: () => {
+        clearOutput();
+        if (terminalRef.current) {
+          terminalRef.current.clear();
+          terminalRef.current.write('\r\x1b[33m$\x1b[0m ');
+          recordOutput('\r\x1b[33m$\x1b[0m ');
+          setIsScrolledUp(false);
+        } else {
+          pendingWritesRef.current = [];
+        }
+      },
+      focus: () => {
+        terminalRef.current?.focus();
+      },
+      scrollToBottom,
+      scrollToTop,
+      scrollLines,
+    }));
+
+    useEffect(() => {
+      let isMounted = true;
+      let termInstance: Terminal | null = null;
+      let fitAddonInstance: FitAddon | null = null;
+      let resizeObserver: ResizeObserver | null = null;
+      let dataDisposable: { dispose: () => void } | null = null;
+      let scrollDisposable: { dispose: () => void } | null = null;
+      let fitTimeout: ReturnType<typeof setTimeout> | null = null;
+      let rafId: number | null = null;
+      let cleanupTouch: (() => void) | null = null;
+
+      const safeFit = () => {
+        if (!isMounted || !termInstance || !fitAddonInstance || !containerRef.current) return;
+        const el = containerRef.current;
+        if (el.clientWidth <= 0 || el.clientHeight <= 0) return;
+        try {
+          const core = (termInstance as unknown as XtermCore)._core;
+          const renderService = core?._renderService;
+          if (!renderService) return;
+          const dims = renderService.dimensions;
+          if (!dims?.css?.cell?.width || !dims?.css?.cell?.height) return;
+          fitAddonInstance.fit();
+        } catch {}
+      };
+
+      async function initXterm() {
+        if (!containerRef.current || !isMounted) return;
+
+        const xtermModule = (await import('@xterm/xterm')) as unknown as XtermModule<typeof Terminal>;
+        const fitModule = (await import('@xterm/addon-fit')) as unknown as XtermModule<typeof FitAddon>;
+
+        const TerminalClass =
+          xtermModule.Terminal ||
+          xtermModule.default?.Terminal ||
+          xtermModule.default;
+
+        const FitAddonClass =
+          fitModule.FitAddon ||
+          fitModule.default?.FitAddon ||
+          fitModule.default;
+
+        if (!TerminalClass || !FitAddonClass || !containerRef.current || !isMounted) return;
+
+        safePatchFitAddon(FitAddonClass);
+
+        const term = new TerminalClass({
+          cursorBlink: true,
+          cursorStyle: 'block',
+          fontSize: 12,
+          lineHeight: 1.25,
+          fontFamily: XTERM_FONT_FAMILY,
+          theme: getXtermTheme(isDark),
+          convertEol: true,
+          scrollback: 10000,
+          scrollSensitivity: 1.5,
+          fastScrollSensitivity: 5,
+          smoothScrollDuration: 0,
+          allowProposedApi: true,
+        }) as Terminal;
+
+        term.open(containerRef.current);
+        safePatchRenderService(term);
+
+        const fitAddon = new FitAddonClass() as FitAddon;
+        term.loadAddon(fitAddon);
+
+        termInstance = term;
+        fitAddonInstance = fitAddon;
+        terminalRef.current = term;
+        fitAddonRef.current = fitAddon;
+
+        rafId = requestAnimationFrame(() => {
+          if (isMounted) safeFit();
+        });
+
+        term.attachCustomKeyEventHandler((event: globalThis.KeyboardEvent) => handleKeyNavigation(term, event));
+
+        scrollDisposable = term.onScroll(() => {
+          const buffer = term.buffer.active;
+          setIsScrolledUp(buffer.viewportY < buffer.baseY);
+        });
+
+        const savedOutput = getTerminalSessionOutput();
+        if (savedOutput) {
+          term.write(savedOutput);
+        } else {
+          const welcome = '\x1b[1;33m[OMPChamber Realtime Terminal]\x1b[0m\r\n\x1b[90mStream connected. Live xterm canvas active.\x1b[0m\r\n\r\n\x1b[33m$\x1b[0m ';
+          term.write(welcome);
+          recordOutput(welcome);
+        }
+
+        if (pendingWritesRef.current.length > 0) {
+          for (const chunk of pendingWritesRef.current) {
+            term.write(chunk);
+          }
+          pendingWritesRef.current = [];
+          term.scrollToBottom();
+        }
+
+        dataDisposable = term.onData((data: string) => {
+          if (data === '\r') {
+            const cmd = inputBufferRef.current.trim();
+            term.write('\r\n');
+            inputBufferRef.current = '';
+            if (cmd && onCommandSubmitRef.current) {
+              recordOutput(cmd + '\r\n');
+              onCommandSubmitRef.current(cmd, { fromXterm: true });
+            } else {
+              term.write('\x1b[33m$\x1b[0m ');
+              recordOutput('\r\n\x1b[33m$\x1b[0m ');
+            }
+          } else if (data === '\x7f' || data === '\b') {
+            if (inputBufferRef.current.length > 0) {
+              inputBufferRef.current = inputBufferRef.current.slice(0, -1);
+              term.write('\b \b');
+            }
+          } else if (data === '\x03') {
+            inputBufferRef.current = '';
+            term.write('^C\r\n\x1b[33m$\x1b[0m ');
+            recordOutput('^C\r\n\x1b[33m$\x1b[0m ');
+          } else if (data === '\x0c') {
+            clearOutput();
+            term.clear();
+            term.write('\x1b[33m$\x1b[0m ');
+            recordOutput('\x1b[33m$\x1b[0m ');
+          } else if (data >= ' ') {
+            inputBufferRef.current += data;
+            term.write(data);
+          }
+        });
+
+        let touchStartY = 0;
+        const containerEl = containerRef.current;
+        const handleTouchStart = (e: globalThis.TouchEvent) => {
+          if (e.touches.length === 1) touchStartY = e.touches[0].clientY;
+        };
+        const handleTouchMove = (e: globalThis.TouchEvent) => {
+          if (e.touches.length === 1) {
+            const deltaY = touchStartY - e.touches[0].clientY;
+            if (Math.abs(deltaY) >= 16) {
+              term.scrollLines(Math.trunc(deltaY / 16));
+              touchStartY = e.touches[0].clientY;
+            }
+          }
+        };
+
+        if (containerEl) {
+          containerEl.addEventListener('touchstart', handleTouchStart, { passive: true });
+          containerEl.addEventListener('touchmove', handleTouchMove, { passive: true });
+          cleanupTouch = () => {
+            containerEl.removeEventListener('touchstart', handleTouchStart);
+            containerEl.removeEventListener('touchmove', handleTouchMove);
+          };
+        }
+
+        resizeObserver = new ResizeObserver(() => {
+          if (fitTimeout) clearTimeout(fitTimeout);
+          fitTimeout = setTimeout(() => {
+            safeFit();
+          }, 35);
+        });
+
+        if (containerEl) {
+          resizeObserver.observe(containerEl);
+        }
+      }
+
+      initXterm();
+
+      return () => {
+        isMounted = false;
+        if (rafId !== null) cancelAnimationFrame(rafId);
+        if (fitTimeout !== null) clearTimeout(fitTimeout);
+        cleanupTouch?.();
+        dataDisposable?.dispose();
+        scrollDisposable?.dispose();
+        resizeObserver?.disconnect();
+        try {
+          fitAddonInstance?.dispose();
+        } catch {}
+        try {
+          termInstance?.dispose();
+        } catch {}
+        terminalRef.current = null;
+        fitAddonRef.current = null;
+      };
+    }, []);
+
+    return (
+      <div className="relative flex-1 w-full h-full bg-canvas overflow-hidden">
+        <div
+          ref={containerRef}
+          className="w-full h-full cursor-text p-1.5"
+          style={{ height: '100%', width: '100%' }}
+        />
+
+        {isScrolledUp && (
+          <button
+            type="button"
+            onClick={scrollToBottom}
+            className="absolute bottom-3 right-4 z-20 flex items-center space-x-1.5 px-2.5 py-1 bg-paper hover:bg-canvas text-ink border border-ink/20 rounded-full shadow-lg text-[11px] font-mono transition-all animate-fade-in cursor-pointer active:scale-95"
+            title="Scroll to latest output (Shift+End)"
+          >
+            <ArrowDown size={12} className="text-warning" />
+            <span>Latest</span>
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+RealtimeXtermView.displayName = 'RealtimeXtermView';

package/src/client/components/workspace/terminal-panel/index.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useRef } from 'preact/hooks';
+import { useTerminal } from '@/client/hooks/workspace/terminal';
+import { useSessionState } from '@/client/hooks/workspace/session-state';
+import { TerminalHeader } from '@/client/components/workspace/terminal-panel/Header';
+import { TerminalQuickActions } from '@/client/components/workspace/terminal-panel/QuickActions';
+import { TerminalInputBar } from '@/client/components/workspace/terminal-panel/InputBar';
+import { RealtimeXtermView, type RealtimeXtermHandle } from '@/client/components/workspace/terminal-panel/RealtimeXtermView';
+
+interface TerminalPanelProps {
+  className?: string;
+  enabled?: boolean;
+  rootPath?: string;
+  showHeader?: boolean;
+}
+
+export function TerminalPanel({ className = '', enabled = true, rootPath, showHeader = true }: TerminalPanelProps) {
+  const xtermRef = useRef<RealtimeXtermHandle>(null);
+  const [activeRepo, setActiveRepo] = useSessionState<string>('terminal.activeRepo', '.');
+
+  const handleStreamChunk = useCallback((text: string) => {
+    xtermRef.current?.write(text);
+  }, []);
+
+  const handleCommandStart = useCallback((cmd: string, options?: { fromXterm?: boolean }) => {
+    if (!options?.fromXterm) {
+      xtermRef.current?.write(`\r\x1b[K\x1b[33m$\x1b[0m \x1b[1m${cmd}\x1b[0m\r\n`);
+    }
+  }, []);
+
+  const handleCommandEnd = useCallback((exitCode: number, _cwd: string) => {
+    if (exitCode !== 0 && exitCode !== 130) {
+      xtermRef.current?.write(`\x1b[31m[exit ${exitCode}]\x1b[0m\r\n`);
+    }
+    xtermRef.current?.write(`\x1b[33m$\x1b[0m `);
+  }, []);
+
+  const handleXtermClear = useCallback(() => {
+    xtermRef.current?.clear();
+  }, []);
+
+  const {
+    terminalInput,
+    setTerminalInput,
+    isRunning,
+    cwd,
+    systemInfo,
+    executeCommand,
+    cancelRunningCommand,
+    handleKeyDown,
+  } = useTerminal({
+    onStreamChunk: handleStreamChunk,
+    onCommandStart: handleCommandStart,
+    onCommandEnd: handleCommandEnd,
+    onClear: handleXtermClear,
+    root: enabled ? rootPath : undefined,
+    repo: activeRepo,
+  });
+
+  const handleCommandSubmit = useCallback((cmd: string, options?: { fromXterm?: boolean }) => {
+    executeCommand(cmd, options);
+  }, [executeCommand]);
+
+  if (!enabled) {
+    return (
+      <div className={`flex flex-col h-full bg-paper items-center justify-center text-ink/40 ${className}`}>
+        <span className="text-xs font-mono">No session selected</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={`flex flex-col h-full w-full bg-paper text-ink overflow-hidden ${className}`}>
+      {showHeader && (
+        <TerminalHeader
+          isRunning={isRunning}
+          rootPath={rootPath}
+          activeRepo={activeRepo}
+          onSelectRepo={setActiveRepo}
+          bunVersion={systemInfo.bunVersion}
+          nodeVersion={systemInfo.nodeVersion}
+        />
+      )}
+
+      {/* Preset Command Shortcuts */}
+      <TerminalQuickActions
+        onSelectCommand={executeCommand}
+        disabled={isRunning}
+      />
+
+      {/* Real-time Xterm Terminal Canvas */}
+      <div className="flex-1 w-full min-h-0 bg-canvas overflow-hidden">
+        <RealtimeXtermView
+          ref={xtermRef}
+          cwd={cwd}
+          onCommandSubmit={handleCommandSubmit}
+        />
+      </div>
+
+      {/* Input Bar with History and Cancel controls */}
+      <TerminalInputBar
+        value={terminalInput}
+        onChange={setTerminalInput}
+        onSubmit={() => executeCommand()}
+        onKeyDown={handleKeyDown}
+        onCancel={cancelRunningCommand}
+        isRunning={isRunning}
+      />
+    </div>
+  );
+}

package/src/client/components/workspace/usage-panel/ProviderSelect.tsx

@@ -0,0 +1,208 @@
+import { useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import type { KeyboardEvent as ReactKeyboardEvent } from 'preact/compat';
+import { Check, ChevronDown, Search } from 'lucide-preact';
+import { statusLabel, type ProviderEntry, type UsageProviderId } from '@/client/components/settings/categories/usage-settings/providers';
+import { useOnClickOutside } from '@/client/hooks/ui/on-click-outside';
+
+interface ProviderSelectProps {
+  providers: ProviderEntry[];
+  value: UsageProviderId;
+  onChange: (id: UsageProviderId) => void;
+}
+
+const LISTBOX_ID = 'usage-provider-listbox';
+
+/**
+ * Custom provider picker for the right Usage panel. Mirrors the nested git
+ * project dropdown (compact trigger, search row, check mark, outside-click
+ * close) but is driven by the in-memory ProviderEntry[] and exposes listbox
+ * keyboard semantics instead of touching any git API.
+ */
+export function ProviderSelect({ providers, value, onChange }: ProviderSelectProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const [activeIndex, setActiveIndex] = useState(0);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const optionRefs = useRef<Array<HTMLButtonElement | null>>([]);
+
+  const selected = providers.find((provider) => provider.id === value) ?? providers[0];
+  const filtered = useMemo(() => {
+    const needle = query.trim().toLowerCase();
+    if (!needle) return providers;
+    return providers.filter((provider) =>
+      `${provider.name} ${statusLabel(provider)} ${provider.hint}`.toLowerCase().includes(needle),
+    );
+  }, [providers, query]);
+
+  const openMenu = () => {
+    const index = Math.max(0, providers.findIndex((provider) => provider.id === value));
+    setQuery('');
+    setActiveIndex(index);
+    setOpen(true);
+  };
+
+  const closeMenu = (restoreFocus = false) => {
+    setOpen(false);
+    setQuery('');
+    if (restoreFocus) triggerRef.current?.focus();
+  };
+
+  const commit = (id: UsageProviderId) => {
+    onChange(id);
+    closeMenu(true);
+  };
+
+  useEffect(() => {
+    if (!open) return;
+    optionRefs.current[activeIndex]?.scrollIntoView({ block: 'nearest' });
+  }, [open, activeIndex]);
+
+  useOnClickOutside(rootRef, () => setOpen(false));
+
+  const handleKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    const isSearchInput = event.target === inputRef.current;
+
+    if (!open) {
+      if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        openMenu();
+      }
+      return;
+    }
+
+    switch (event.key) {
+      case 'Escape':
+        event.preventDefault();
+        closeMenu(true);
+        break;
+      case 'ArrowDown':
+        event.preventDefault();
+        setActiveIndex((index) => Math.max(0, Math.min(filtered.length - 1, index + 1)));
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        setActiveIndex((index) => Math.max(0, index - 1));
+        break;
+      case 'Home':
+        event.preventDefault();
+        setActiveIndex(0);
+        break;
+      case 'End':
+        event.preventDefault();
+        setActiveIndex(Math.max(0, filtered.length - 1));
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (filtered[activeIndex]) commit(filtered[activeIndex].id);
+        break;
+      case ' ':
+        // Space types in the search field; only commits when focus is elsewhere.
+        if (isSearchInput) return;
+        event.preventDefault();
+        if (filtered[activeIndex]) commit(filtered[activeIndex].id);
+        break;
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div className="relative min-w-0" ref={rootRef} onKeyDown={handleKeyDown}>
+      <button
+        ref={triggerRef}
+        type="button"
+        onClick={() => (open ? closeMenu() : openMenu())}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-controls={LISTBOX_ID}
+        title="Select usage provider"
+        className="flex w-full min-w-0 items-center justify-between gap-2 bg-paper border border-ink/15 rounded-lg px-3 py-1.5 text-xs text-ink hover:bg-ink/5 transition-colors"
+      >
+        <span className="flex min-w-0 items-baseline gap-2">
+          <span className="truncate font-medium">{selected?.name ?? 'Select provider'}</span>
+          {selected && (
+            <span className="truncate text-[10px] text-ink/50">{statusLabel(selected)}</span>
+          )}
+        </span>
+        <ChevronDown
+          size={12}
+          className={`flex-shrink-0 text-ink/40 transition-transform ${open ? 'rotate-180' : ''}`}
+        />
+      </button>
+
+      {open && (
+        <div className="absolute top-full left-0 mt-1 w-52 bg-paper border border-ink/20 rounded-md shadow-lg z-50 flex flex-col overflow-hidden text-xs">
+          <div className="px-2 py-1.5 border-b border-ink/10 flex items-center gap-1.5">
+            <Search size={11} className="text-ink/40 flex-shrink-0" />
+            <input
+              ref={inputRef}
+              type="text"
+              value={query}
+              onChange={(event) => {
+                setQuery(event.currentTarget.value);
+                setActiveIndex(0);
+              }}
+              placeholder="Search providers..."
+              title="Search providers"
+              className="w-full min-w-0 bg-transparent outline-none text-xs text-ink placeholder-ink/40"
+              autoFocus
+            />
+            {query && (
+              <button
+                type="button"
+                onClick={() => {
+                  setQuery('');
+                  setActiveIndex(0);
+                  inputRef.current?.focus();
+                }}
+                title="Clear search"
+                className="text-ink/40 hover:text-ink flex-shrink-0"
+              >
+                ×
+              </button>
+            )}
+          </div>
+
+          <div
+            id={LISTBOX_ID}
+            role="listbox"
+            aria-label="Usage providers"
+            className="max-h-48 scrollbar-overlay-container scrollbar-overlay-static py-1"
+          >
+            {filtered.length === 0 ? (
+              <div className="px-3 py-2 text-ink/40 italic">No providers found</div>
+            ) : (
+              filtered.map((provider, index) => (
+                <button
+                  key={provider.id}
+                  ref={(node) => {
+                    optionRefs.current[index] = node;
+                  }}
+                  type="button"
+                  role="option"
+                  aria-selected={provider.id === value}
+                  onClick={() => commit(provider.id)}
+                  onMouseEnter={() => setActiveIndex(index)}
+                  title={provider.hint}
+                  className={`w-full text-left px-3 py-2 flex items-center justify-between gap-2 transition-colors ${
+                    index === activeIndex ? 'bg-ink/5' : 'hover:bg-ink/5'
+                  }`}
+                >
+                  <span className="min-w-0">
+                    <span className="block truncate font-medium text-ink">{provider.name}</span>
+                    <span className="block truncate text-[10px] text-ink/50">
+                      {statusLabel(provider)} · {provider.hint}
+                    </span>
+                  </span>
+                  {provider.id === value && <Check size={12} className="flex-shrink-0 text-ink" />}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}