ompchamber 0.7.0 → 1.0.0

package/src/client/components/workspace/chat-timeline/tool-renderers/{ask-dialog → extension-dialog}/index.tsx

@@ -2,9 +2,9 @@
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { AlertCircle, CheckCircle2, FileText, HelpCircle, ListFilter, Terminal } from 'lucide-preact';
 import type { ExtensionUiDialogRequest } from '@/client/hooks/chat/omp';
-import { AskDialogHeader } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/Header';
-import { AskDialogSelectBody } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/SelectBody';
-import { AskDialogFooter } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-dialog/Footer';
+import { ExtensionDialogHeader } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/Header';
+import { ExtensionDialogSelectBody } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/SelectBody';
+import { ExtensionDialogFooter } from '@/client/components/workspace/chat-timeline/tool-renderers/extension-dialog/Footer';
 import { MarkdownRenderer } from '@/client/components/common/MarkdownRenderer';
 
 export type ExtensionDialogResponse =
@@ -12,12 +12,18 @@ export type ExtensionDialogResponse =
   | { confirmed: boolean }
   | { cancelled: true };
 
-interface AskDialogProps {
+interface ExtensionDialogProps {
   request: ExtensionUiDialogRequest;
   onRespond: (request: ExtensionUiDialogRequest, response: ExtensionDialogResponse) => void;
 }
 
-export function AskDialog({ request, onRespond }: AskDialogProps) {
+/**
+ * Blocking extension dialog that has no card of its own to render in: an
+ * approval gate under `always-ask`, or a picker an extension raised. The `ask`
+ * tool's own dialogs render inline on its tool card instead (see ask-panel) —
+ * a modal would only ever show the question currently in flight.
+ */
+export function ExtensionDialog({ request, onRespond }: ExtensionDialogProps) {
   const [value, setValue] = useState(request.method === 'editor' ? request.prefill ?? '' : '');
   const [selectedOption, setSelectedOption] = useState<string | null>(null);
   const [customValue, setCustomValue] = useState('');
@@ -202,7 +208,7 @@ export function AskDialog({ request, onRespond }: AskDialogProps) {
 
   return (
     <div
-      className="ask-dialog-backdrop fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
+      className="extension-dialog-backdrop fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6"
       style={{
         background: 'color-mix(in srgb, var(--theme-ink) 55%, transparent)',
         backdropFilter: 'blur(8px)',
@@ -217,12 +223,12 @@ export function AskDialog({ request, onRespond }: AskDialogProps) {
         aria-modal="true"
         aria-label={request.title || methodMeta.label}
         tabIndex={-1}
-        className="ask-dialog-panel w-full max-w-[560px] overflow-hidden rounded-2xl border border-ink/15 bg-paper shadow-2xl outline-none"
+        className="extension-dialog-panel w-full max-w-[560px] overflow-hidden rounded-2xl border border-ink/15 bg-paper shadow-2xl outline-none"
         style={{
           boxShadow: '0 24px 64px -8px color-mix(in srgb, var(--theme-ink) 28%, transparent)',
         }}
       >
-          <AskDialogHeader
+          <ExtensionDialogHeader
             title={request.title}
             methodLabel={methodMeta.label}
             badge={methodMeta.badge}
@@ -240,7 +246,7 @@ export function AskDialog({ request, onRespond }: AskDialogProps) {
 
             {/* Select Options */}
             {request.method === 'select' && (
-              <AskDialogSelectBody
+              <ExtensionDialogSelectBody
                 options={options}
                 optionDetails={optionDetails}
                 selectedOption={selectedOption}
@@ -307,7 +313,7 @@ export function AskDialog({ request, onRespond }: AskDialogProps) {
             )}
           </div>
 
-          <AskDialogFooter
+          <ExtensionDialogFooter
             method={request.method}
             optionsLength={options.length}
             selectedOption={selectedOption}

package/src/client/components/workspace/chat-timeline/tool-renderers/index.tsx

@@ -19,7 +19,7 @@ import { AstEdit } from '@/client/components/workspace/chat-timeline/tool-render
 import { Resolve } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Resolve';
 import { ManageSkill } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/ManageSkill';
 import { SearchFs } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/SearchFs';
-import { Ask } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Ask';
+import { AskPanel } from '@/client/components/workspace/chat-timeline/tool-renderers/ask-panel';
 import { Think } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Think';
 import { Read } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Read';
 import { Edit } from '@/client/components/workspace/chat-timeline/tool-renderers/panels/Edit';
@@ -142,7 +142,7 @@ export function ToolDetailsPanel({ tool }: { tool: ToolCallData }): ReactNode {
     return <Memory tool={tool} />;
   }
   if (key === 'goal' || key === 'yield') return <Goal tool={tool} />;
-  if (key === 'ask') return <Ask tool={tool} />;
+  if (key === 'ask') return <AskPanel tool={tool} />;
   if (key === 'think') return <Think tool={tool} />;
 
   // Dynamic MCP / custom tools — `mcp__<tool>` names and xd:// device writes

package/src/client/components/workspace/file-explorer/index.tsx

@@ -63,15 +63,28 @@ export function FileExplorer({ className = '', enabled = true, rootPath, onOpenF
     loadFiles();
   }, [refreshKey, rootPath, enabled, activeRepo, expandedPathsReady]);
 
-  // Auto refresh: re-read the directory tree on a cadence so external changes
-  // (terminal output, agent edits) surface without a manual refresh. Silent —
-  // the loading spinner stays reserved for the user's own refresh button.
-  usePanelRefresh(() => loadFiles({ silent: true }), enabled && expandedPathsReady);
+  // The listing and its git decorations describe the same working tree, so one
+  // refresh drives both. Re-reading only the tree left every folder dot stale:
+  // `useGitStatus` has no poll of its own in this panel, so a new/changed file
+  // appeared under a folder that still claimed a clean status until the user
+  // hit refresh or refocused the window.
+  const refreshListing = () => {
+    loadFiles({ silent: true });
+    refreshGitStatus();
+  };
+  // Auto refresh: re-read on a cadence so external changes (terminal output,
+  // agent edits) surface without a manual refresh. Silent — the loading
+  // spinner stays reserved for the user's own refresh button.
+  usePanelRefresh(refreshListing, enabled && expandedPathsReady);
   // AI edits land between poll ticks: re-read right after a file-mutating tool
   // (edit / write / ast_edit / bash) finishes, not up to 2s later.
-  useFileMutationRefresh(() => loadFiles({ silent: true }), enabled && expandedPathsReady);
+  useFileMutationRefresh(refreshListing, enabled && expandedPathsReady);
 
   const loadChildren = (path: string) => {
+    // Expanding IS a directory load: fetch the children AND re-read git status,
+    // so a freshly listed row never renders bare next to a status map that
+    // still predates its change (the panel poll alone can lag a fresh edit).
+    refreshGitStatus();
     return fetch(listUrl(path))
       .then(r => r.json())
       .then(data => {

package/src/client/components/workspace/git-panel/BranchToolbar.tsx

@@ -113,7 +113,7 @@ export function GitBranchToolbar({
         <button
           type="button"
           onClick={onSync}
-          disabled={isBusy || (syncCount.ahead === 0 && syncCount.behind === 0)}
+          disabled={isBusy}
           title={
             syncCount.ahead > 0 && syncCount.behind > 0
               ? `Pull ${syncCount.behind} then push ${syncCount.ahead} commit(s)`
@@ -121,7 +121,7 @@ export function GitBranchToolbar({
                 ? `Push ${syncCount.ahead} commit(s)`
                 : syncCount.behind > 0
                   ? `Pull ${syncCount.behind} commit(s)`
-                  : 'Up to date'
+                  : 'Up to date — sync anyway'
           }
           className="flex items-center gap-1 p-1 rounded hover:text-ink hover:bg-ink/5 cursor-pointer transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
         >

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

@@ -34,6 +34,10 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
     const params = new URLSearchParams();
     if (rootPath) params.set('root', rootPath);
     if (targetRepo && targetRepo !== '.') params.set('repo', targetRepo);
+    // The toolbar's ↑ahead ↓behind badge is what this asks for; it makes the
+    // loader refresh the branch's remote-tracking ref before counting, so the
+    // numbers describe origin rather than the last fetch.
+    params.set('sync', '1');
     params.set('t', String(Date.now()));
     fetcher.load(`/api/fs/git?${params.toString()}`);
   };
@@ -200,7 +204,7 @@ export function GitPanel({ className = '', enabled = true, rootPath, refreshKey
     if (!enabled || pollingRepos || rescanningRepos) return;
     setExtraRepos(repos);
     setRescanningRepos(true);
-    const params = new URLSearchParams({ rescan: '1' });
+    const params = new URLSearchParams({ rescan: '1', sync: '1' });
     if (rootPath) params.set('root', rootPath);
     if (activeRepo !== '.') params.set('repo', activeRepo);
     params.set('t', String(Date.now()));

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

@@ -1,23 +1,46 @@
-import { Loader2, Terminal } from 'lucide-preact';
+import { Loader2, RotateCw, Terminal } from 'lucide-preact';
 import { GitRepoDropdown } from '@/client/components/workspace/file-explorer/GitRepoDropdown';
+import type { TerminalStatus } from '@/client/hooks/workspace/terminal';
 
 interface TerminalHeaderProps {
-  isRunning: boolean;
+  status: TerminalStatus;
+  exitCode: number | null;
   rootPath?: string;
   activeRepo: string;
   onSelectRepo: (repo: string) => void;
-  bunVersion?: string;
-  nodeVersion?: string;
+  /** Working directory the shell actually runs in. */
+  cwd?: string;
+  shell?: string;
+  gitBranch?: string;
+  onRestart: () => void;
 }
 
+const STATUS_LABEL: Record<TerminalStatus, string> = {
+  connecting: 'CONNECTING',
+  running: 'LIVE',
+  exited: 'EXITED',
+  error: 'ERROR',
+};
+
+const STATUS_CLASS: Record<TerminalStatus, string> = {
+  connecting: 'bg-warning/10 text-warning border-warning/20',
+  running: 'bg-success/10 text-success border-success/20',
+  exited: 'bg-ink/5 text-ink/60 border-ink/15',
+  error: 'bg-error/10 text-error border-error/20',
+};
+
 export function TerminalHeader({
-  isRunning,
+  status,
+  exitCode,
   rootPath,
   activeRepo,
   onSelectRepo,
-  bunVersion,
-  nodeVersion,
+  cwd,
+  shell,
+  gitBranch,
+  onRestart,
 }: TerminalHeaderProps) {
+  const shellName = shell ? shell.split('/').pop() : '';
   return (
     <div className="h-10 px-3 border-b border-ink/10 bg-paper flex items-center justify-between flex-shrink-0 select-none">
       {/* Left cluster: Title, Status, Repo */}
@@ -29,22 +52,31 @@ export function TerminalHeader({
           </span>
         </div>
 
-        {isRunning && (
-          <span className="inline-flex items-center space-x-1 px-1.5 py-0.5 rounded text-[10px] font-mono bg-warning/10 text-warning border border-warning/20 animate-pulse">
-            <Loader2 size={10} className="animate-spin" />
-            <span className="hidden xs:inline">RUNNING</span>
-          </span>
-        )}
+        <span
+          className={`inline-flex items-center space-x-1 px-1.5 py-0.5 rounded text-[10px] font-mono border ${STATUS_CLASS[status]}`}
+          title={status === 'exited' && exitCode !== null ? `Shell exited with code ${exitCode}` : undefined}
+        >
+          {status === 'connecting' && <Loader2 size={10} className="animate-spin" />}
+          <span>{status === 'exited' && exitCode !== null ? `EXIT ${exitCode}` : STATUS_LABEL[status]}</span>
+        </span>
 
         <GitRepoDropdown rootPath={rootPath} activeRepo={activeRepo} onSelectRepo={onSelectRepo} />
+
+        <button
+          type="button"
+          onClick={onRestart}
+          title="Kill this shell and start a new one"
+          className="p-1 rounded text-ink/50 hover:text-ink hover:bg-ink/5 transition-colors cursor-pointer flex-shrink-0"
+        >
+          <RotateCw size={12} />
+        </button>
       </div>
 
-      {bunVersion && (
-        <span className="hidden sm:flex items-center space-x-2 text-[10px] font-mono text-ink/40 flex-shrink-0">
-          <span>Bun {bunVersion}</span>
-          {nodeVersion && <span>Node {nodeVersion}</span>}
-        </span>
-      )}
+      <span className="hidden sm:flex items-center space-x-2 text-[10px] font-mono text-ink/40 flex-shrink-0 min-w-0">
+        {cwd && <span className="truncate max-w-[280px]" title={cwd}>{cwd}</span>}
+        {gitBranch && <span>{gitBranch}</span>}
+        {shellName && <span>{shellName}</span>}
+      </span>
     </div>
   );
 }