ompchamber 2.0.2 → 3.0.0

package/src/client/components/workspace/diff-panel/Toolbar.tsx

@@ -2,17 +2,21 @@ import { AlignJustify, Check, Code2, Columns, Copy, Minus, Plus, RefreshCw, Spac
 import { FileIcon } from '@/client/components/common/file-icon';
 import { getGitStatusInfo } from '@/shared/lib/fs/git-status';
 
+export type DiffViewMode = 'unified' | 'split';
+
 interface DiffToolbarProps {
   filePath: string;
   status: string;
   isStaged: boolean;
-  viewMode: 'unified' | 'split';
+  viewMode: DiffViewMode;
   ignoreWhitespace: boolean;
   additions: number;
   deletions: number;
   isLoading: boolean;
   isCopied: boolean;
-  onToggleViewMode: () => void;
+  /** A stage/unstage/discard write is in flight; the toolbar locks its actions. */
+  isBusy?: boolean;
+  onSetViewMode: (mode: DiffViewMode) => void;
   onToggleWhitespace: () => void;
   onStageUnstage: () => void;
   onDiscard: () => void;
@@ -21,6 +25,9 @@ interface DiffToolbarProps {
   onCopyDiff: () => void;
 }
 
+const ACTION_CLASS =
+  'flex items-center justify-center p-1.5 rounded transition-colors cursor-pointer disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent disabled:hover:text-ink/50';
+
 export function DiffToolbar({
   filePath,
   status,
@@ -31,7 +38,8 @@ export function DiffToolbar({
   deletions,
   isLoading,
   isCopied,
-  onToggleViewMode,
+  isBusy = false,
+  onSetViewMode,
   onToggleWhitespace,
   onStageUnstage,
   onDiscard,
@@ -41,56 +49,72 @@ export function DiffToolbar({
 }: DiffToolbarProps) {
   const fileName = filePath.split('/').pop() || filePath;
   const statusInfo = getGitStatusInfo(status, isStaged);
+  // Only the actions that write to git lock while one is in flight. Copying the
+  // diff is a local read of what is already on screen, so it stays available.
+  const locked = isLoading || isBusy;
 
   return (
-    <div className="flex items-center justify-between px-3 py-1.5 bg-paper border-b border-ink/10 text-xs font-sans select-none flex-shrink-0 overflow-x-auto no-scrollbar">
-      {/* Left: File name, status badge, additions/deletions. Hidden on phone
-          widths: the mobile diff header already carries the file identity, and
-          dropping it keeps the actions reachable without a sideways scroll. */}
-      <div className="hidden md:flex items-center space-x-2 min-w-0 pr-2">
+    // `@container` so the labels below can hide on a NARROW PANEL rather than a
+    // narrow viewport: the editor panel is 320px wide on a 1440px screen, and
+    // `sm:` (viewport-keyed) kept every label on, overflowing the toolbar.
+    <div className="@container flex items-center justify-between px-3 py-1.5 bg-paper border-b border-ink/10 text-xs font-sans select-none flex-shrink-0 gap-2 min-w-0">
+      {/* Left: File name and status badge. Hidden when the panel is narrow —
+          the editor tab already carries the name and the status character, and
+          the mobile diff header carries both. */}
+      <div className="hidden @[560px]:flex items-center space-x-2 min-w-0 pr-2">
         <FileIcon name={fileName} size={14} className="flex-shrink-0" />
         <span className="font-mono text-ink font-medium truncate" title={filePath}>
           {fileName}
         </span>
-        
+
         <span className={`px-1.5 py-0.5 text-[10px] font-mono font-semibold rounded border ${statusInfo.badgeBgClass} flex-shrink-0`}>
           {statusInfo.charStatus} {statusInfo.label}
         </span>
+      </div>
 
+      {/* Right: Controls & actions. `ml-auto` keeps them right-aligned where the
+          identity block is hidden. This strip scrolls on its own when the panel
+          is too narrow, so no action is ever clipped out of reach. Each segment
+          sets its OWN mode — toggling meant clicking the already-active segment
+          flipped the view to the other one. */}
+      <div className="flex items-center space-x-0.5 @[440px]:space-x-1 text-ink/70 ml-auto min-w-0 overflow-x-auto no-scrollbar">
+        {/* Change counts live here, not in the identity block: the editor tab
+            carries the file name but never the counts, so this is the one piece
+            of the header that must survive a narrow panel. */}
         {(additions > 0 || deletions > 0) && (
-          <div className="flex items-center space-x-1.5 text-[11px] font-mono flex-shrink-0 ml-1">
+          <div className="flex items-center space-x-1.5 text-[11px] font-mono flex-shrink-0 pr-1.5 mr-0.5 @[440px]:mr-1 border-r border-ink/10">
             {additions > 0 && <span className="text-success font-semibold">+{additions}</span>}
             {deletions > 0 && <span className="text-error font-semibold">-{deletions}</span>}
           </div>
         )}
-      </div>
 
-      {/* Right: Controls & actions. `ml-auto` keeps them right-aligned on phone
-          widths, where the identity block above is hidden. */}
-      <div className="flex items-center space-x-1 text-ink/70 flex-shrink-0 ml-auto">
         {/* View mode toggle (Unified vs Split) */}
-        <div className="flex items-center bg-canvas rounded border border-ink/15 p-0.5 mr-1">
+        <div className="flex items-center bg-canvas rounded border border-ink/15 p-0.5 mr-0.5 @[440px]:mr-1 flex-shrink-0">
           <button
             type="button"
-            onClick={onToggleViewMode}
-            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors ${
+            onClick={() => onSetViewMode('split')}
+            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors cursor-pointer flex-shrink-0 ${
               viewMode === 'split' ? 'bg-paper text-ink shadow-xs' : 'text-ink/60 hover:text-ink'
             }`}
-            title="Split (side-by-side) Diff"
+            title="Split (side-by-side) diff"
+            aria-label="Split (side-by-side) diff"
+            aria-pressed={viewMode === 'split'}
           >
             <Columns size={12} />
-            <span className="hidden sm:inline">Split</span>
+            <span className="hidden @[420px]:inline">Split</span>
           </button>
           <button
             type="button"
-            onClick={onToggleViewMode}
-            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors ${
+            onClick={() => onSetViewMode('unified')}
+            className={`px-2 py-0.5 rounded text-[11px] font-medium flex items-center space-x-1 transition-colors cursor-pointer flex-shrink-0 ${
               viewMode === 'unified' ? 'bg-paper text-ink shadow-xs' : 'text-ink/60 hover:text-ink'
             }`}
-            title="Unified Diff"
+            title="Unified diff"
+            aria-label="Unified diff"
+            aria-pressed={viewMode === 'unified'}
           >
             <AlignJustify size={12} />
-            <span className="hidden sm:inline">Unified</span>
+            <span className="hidden @[420px]:inline">Unified</span>
           </button>
         </div>
 
@@ -98,10 +122,12 @@ export function DiffToolbar({
         <button
           type="button"
           onClick={onToggleWhitespace}
-          className={`p-1.5 rounded transition-colors ${
+          className={`p-1.5 rounded transition-colors cursor-pointer flex-shrink-0 ${
             ignoreWhitespace ? 'bg-ink/10 text-ink' : 'text-ink/50 hover:text-ink hover:bg-ink/5'
           }`}
-          title={ignoreWhitespace ? 'Whitespace ignored' : 'Ignore whitespace'}
+          title={ignoreWhitespace ? 'Whitespace changes hidden' : 'Hide whitespace changes'}
+          aria-label={ignoreWhitespace ? 'Whitespace changes hidden' : 'Hide whitespace changes'}
+          aria-pressed={ignoreWhitespace}
         >
           <Space size={13} />
         </button>
@@ -110,19 +136,21 @@ export function DiffToolbar({
         <button
           type="button"
           onClick={onRefresh}
-          className="p-1.5 text-ink/50 hover:text-ink hover:bg-ink/5 rounded transition-colors"
-          title="Refresh Diff"
-          disabled={isLoading}
+          className={`${ACTION_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5 flex-shrink-0`}
+          title="Reload this diff"
+          aria-label="Reload this diff"
+          disabled={locked}
         >
           <RefreshCw size={13} className={isLoading ? 'animate-spin' : ''} />
         </button>
 
-        {/* Copy diff */}
+        {/* Copy diff — never disabled: it reads the buffer already on screen. */}
         <button
           type="button"
           onClick={onCopyDiff}
-          className="p-1.5 text-ink/50 hover:text-ink hover:bg-ink/5 rounded transition-colors"
-          title="Copy Diff Text"
+          className={`${ACTION_CLASS} text-ink/50 hover:text-ink hover:bg-ink/5 flex-shrink-0`}
+          title={isCopied ? 'Copied' : 'Copy diff text'}
+          aria-label={isCopied ? 'Copied' : 'Copy diff text'}
         >
           {isCopied ? <Check size={13} className="text-success" /> : <Copy size={13} />}
         </button>
@@ -132,8 +160,10 @@ export function DiffToolbar({
           <button
             type="button"
             onClick={onDiscard}
-            className="p-1.5 text-ink/50 hover:text-error hover:bg-error/10 rounded transition-colors"
+            className={`${ACTION_CLASS} text-ink/50 hover:text-error hover:bg-error/10 flex-shrink-0`}
             title="Discard changes in this file"
+            aria-label="Discard changes in this file"
+            disabled={locked}
           >
             <Undo2 size={13} />
           </button>
@@ -143,18 +173,20 @@ export function DiffToolbar({
         <button
           type="button"
           onClick={onStageUnstage}
-          className="px-2 py-1 text-[11px] font-medium rounded border border-ink/15 hover:bg-ink/5 flex items-center space-x-1 transition-colors text-ink"
+          className="px-2 py-1 text-[11px] font-medium rounded border border-ink/15 hover:bg-ink/5 flex items-center space-x-1 transition-colors text-ink cursor-pointer disabled:cursor-default disabled:opacity-40 disabled:hover:bg-transparent flex-shrink-0"
           title={isStaged ? 'Unstage file' : 'Stage file'}
+          aria-label={isStaged ? 'Unstage file' : 'Stage file'}
+          disabled={locked}
         >
           {isStaged ? (
             <>
               <Minus size={12} />
-              <span>Unstage</span>
+              <span className="hidden @[360px]:inline">Unstage</span>
             </>
           ) : (
             <>
               <Plus size={12} />
-              <span>Stage</span>
+              <span className="hidden @[360px]:inline">Stage</span>
             </>
           )}
         </button>
@@ -164,11 +196,12 @@ export function DiffToolbar({
           <button
             type="button"
             onClick={onOpenInEditor}
-            className="px-2 py-1 text-[11px] font-medium rounded bg-ink text-canvas hover:bg-ink/90 flex items-center space-x-1 transition-colors shadow-xs ml-1"
-            title="Open in Code Editor"
+            className="px-2 py-1 text-[11px] font-medium rounded bg-ink text-canvas hover:bg-ink/90 flex items-center space-x-1 transition-colors shadow-xs ml-1 cursor-pointer flex-shrink-0"
+            title="Open in code editor"
+            aria-label="Open in code editor"
           >
             <Code2 size={12} />
-            <span className="hidden sm:inline">Edit File</span>
+            <span className="hidden @[360px]:inline">Edit File</span>
           </button>
         )}
       </div>

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

@@ -1,9 +1,8 @@
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { useFetcher } from '@/client/lib/router/fetcher';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { useSessionUiState } from '@/client/hooks/workspace/session-state';
 import { parseUnifiedDiff } from '@/shared/lib/fs/diff-parser';
 import { getLanguageFromPath } from '@/shared/lib/code/syntax-highlight';
-import { DiffToolbar } from '@/client/components/workspace/diff-panel/Toolbar';
+import { DiffToolbar, type DiffViewMode } from '@/client/components/workspace/diff-panel/Toolbar';
 import { UnifiedView } from '@/client/components/workspace/diff-panel/UnifiedView';
 import { SplitView } from '@/client/components/workspace/diff-panel/SplitView';
 import { AlertCircle, RefreshCw } from 'lucide-preact';
@@ -30,62 +29,94 @@ export function DiffPanel({
   className = '',
 }: DiffPanelProps) {
   // Read and persist view mode & whitespace preference in session_ui_state
-  const [viewMode, setViewMode] = useSessionUiState<'unified' | 'split'>('diff.viewMode', 'unified');
+  const [viewMode, setViewMode] = useSessionUiState<DiffViewMode>('diff.viewMode', 'unified');
   const [ignoreWhitespace, setIgnoreWhitespace] = useSessionUiState<boolean>('diff.ignoreWhitespace', false);
 
   const [rawDiff, setRawDiff] = useState<string>('');
   const [currentStatus, setCurrentStatus] = useState<string>(status);
   const [currentStaged, setCurrentStaged] = useState<boolean>(isStaged);
   const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isBusy, setIsBusy] = useState<boolean>(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
   const [isCopied, setIsCopied] = useState<boolean>(false);
   const [showDiscardConfirm, setShowDiscardConfirm] = useState<boolean>(false);
 
-  const fetcher = useFetcher();
+  /**
+   * The staged flag / status the next fetch must ask for. The state copies lag
+   * a click by a render, and keeping them in `fetchDiff`'s dependency list made
+   * every response re-key the callback and fire another fetch. Refs keep the
+   * callback stable and always read the post-action value.
+   */
+  const stagedRef = useRef<boolean>(isStaged);
+  const statusRef = useRef<string>(status);
+  const fetchSeqRef = useRef(0);
 
-  const fetchDiff = useCallback(async () => {
+  const fetchDiff = useCallback(async (overrides: { staged?: boolean; status?: string } = {}) => {
     if (!filePath) return;
+    const seq = ++fetchSeqRef.current;
     setIsLoading(true);
     setErrorMessage(null);
     try {
+      const staged = overrides.staged ?? stagedRef.current;
+      const statusForFetch = overrides.status ?? statusRef.current;
       const params = new URLSearchParams({
         fileDiff: '1',
         file: filePath,
-        staged: currentStaged ? '1' : '0',
+        staged: staged ? '1' : '0',
         repo: repo || '.',
       });
-      if (status || currentStatus) params.set('status', status || currentStatus);
+      if (statusForFetch) params.set('status', statusForFetch);
       if (root) params.set('root', root);
 
       const res = await fetch(`/api/fs/git?${params.toString()}`);
-      const data = await res.json();
-      if (data.success) {
+      const data = (await res.json().catch(() => null)) as {
+        success?: boolean;
+        diff?: string;
+        status?: string;
+        staged?: boolean;
+        error?: string;
+      } | null;
+      // A slower earlier read must not overwrite a newer one (the action path
+      // fires a fetch of its own while the initial one is still in flight).
+      if (seq !== fetchSeqRef.current) return;
+      if (data?.success) {
         setRawDiff(data.diff || '');
-        if (data.status) setCurrentStatus(data.status);
+        if (data.status) {
+          statusRef.current = data.status;
+          setCurrentStatus(data.status);
+        }
+        if (typeof data.staged === 'boolean') {
+          stagedRef.current = data.staged;
+          setCurrentStaged(data.staged);
+        }
       } else {
-        setErrorMessage(data.error || 'Failed to load file diff');
+        setErrorMessage(data?.error || `Failed to load file diff (HTTP ${res.status})`);
       }
-    } catch (err: any) {
-      setErrorMessage(err.message || 'Error fetching diff');
+    } catch (err: unknown) {
+      if (seq !== fetchSeqRef.current) return;
+      setErrorMessage(err instanceof Error ? err.message : 'Error fetching diff');
     } finally {
-      setIsLoading(false);
+      if (seq === fetchSeqRef.current) setIsLoading(false);
     }
-  }, [filePath, currentStaged, repo, root]);
+  }, [filePath, repo, root]);
 
   useEffect(() => {
     setCurrentStatus(status);
     setCurrentStaged(isStaged);
+    stagedRef.current = isStaged;
+    statusRef.current = status;
   }, [status, isStaged, filePath]);
 
   useEffect(() => {
-    fetchDiff();
+    void fetchDiff();
   }, [fetchDiff]);
 
   const parsed = parseUnifiedDiff(rawDiff, ignoreWhitespace);
   const language = getLanguageFromPath(filePath);
 
-  const handleToggleViewMode = () => {
-    setViewMode(viewMode === 'unified' ? 'split' : 'unified');
+  const handleSetViewMode = (mode: DiffViewMode) => {
+    setViewMode(mode);
   };
 
   const handleToggleWhitespace = () => {
@@ -94,44 +125,82 @@ export function DiffPanel({
 
   const handleCopyDiff = () => {
     if (!rawDiff) return;
-    navigator.clipboard.writeText(rawDiff);
-    setIsCopied(true);
-    setTimeout(() => setIsCopied(false), 2000);
+    void navigator.clipboard.writeText(rawDiff).then(
+      () => {
+        setIsCopied(true);
+        setTimeout(() => setIsCopied(false), 2000);
+      },
+      () => setActionError('Clipboard write was refused by the browser'),
+    );
   };
 
-  const handleStageUnstage = () => {
-    const actionType = currentStaged ? 'unstage' : 'stage';
-    const fd = new FormData();
-    fd.set('actionType', actionType);
-    fd.set('file', filePath);
-    fd.set('repo', repo || '.');
-    if (root) fd.set('root', root);
-
-    fetcher.submit(fd, { method: 'POST', action: '/api/fs/git' });
-    setCurrentStaged(!currentStaged);
-    setTimeout(() => {
-      fetchDiff();
+  /**
+   * POST one git action and report whether it landed. The panel used to fire
+   * and forget (`fetcher.submit` + an optimistic flip + a 300ms timer), which
+   * made a rejected action indistinguishable from a successful one: the badge
+   * flipped and the diff silently stayed put.
+   */
+  const runGitAction = useCallback(
+    async (fields: Record<string, string>): Promise<boolean> => {
+      const fd = new FormData();
+      for (const [key, value] of Object.entries(fields)) fd.set(key, value);
+      fd.set('repo', repo || '.');
+      if (root) fd.set('root', root);
+      try {
+        const res = await fetch('/api/fs/git', { method: 'POST', body: fd });
+        const data = (await res.json().catch(() => null)) as { success?: boolean; error?: string } | null;
+        if (!res.ok || !data?.success) {
+          setActionError(data?.error || `Request failed (HTTP ${res.status})`);
+          return false;
+        }
+        setActionError(null);
+        return true;
+      } catch (err: unknown) {
+        setActionError(err instanceof Error ? err.message : 'Request failed');
+        return false;
+      }
+    },
+    [repo, root],
+  );
+
+  const handleStageUnstage = async () => {
+    if (isBusy) return;
+    const nextStaged = !currentStaged;
+    setIsBusy(true);
+    try {
+      const ok = await runGitAction({
+        actionType: currentStaged ? 'unstage' : 'stage',
+        file: filePath,
+      });
+      if (!ok) return;
+      stagedRef.current = nextStaged;
+      setCurrentStaged(nextStaged);
       onFileSaved?.();
-    }, 300);
+      await fetchDiff({ staged: nextStaged });
+    } finally {
+      setIsBusy(false);
+    }
   };
 
   const handleDiscard = () => {
     setShowDiscardConfirm(true);
   };
 
-  const confirmDiscard = () => {
+  const confirmDiscard = async () => {
     setShowDiscardConfirm(false);
-    const fd = new FormData();
-    fd.set('actionType', 'discard');
-    fd.set('file', filePath);
-    fd.set('repo', repo || '.');
-    if (root) fd.set('root', root);
-
-    fetcher.submit(fd, { method: 'POST', action: '/api/fs/git' });
-    setTimeout(() => {
-      fetchDiff();
+    setIsBusy(true);
+    try {
+      // `revert` is the server's own name for "restore this file from the index",
+      // and it is the one that handles the untracked case (there the file is
+      // removed). Sending `discard` — which no handler matched — returned
+      // `{success:true}` for doing nothing at all.
+      const ok = await runGitAction({ actionType: 'revert', file: filePath });
+      if (!ok) return;
       onFileSaved?.();
-    }, 300);
+      await fetchDiff();
+    } finally {
+      setIsBusy(false);
+    }
   };
 
   return (
@@ -154,15 +223,32 @@ export function DiffPanel({
         deletions={parsed.deletions}
         isLoading={isLoading}
         isCopied={isCopied}
-        onToggleViewMode={handleToggleViewMode}
+        isBusy={isBusy}
+        onSetViewMode={handleSetViewMode}
         onToggleWhitespace={handleToggleWhitespace}
         onStageUnstage={handleStageUnstage}
         onDiscard={handleDiscard}
         onOpenInEditor={onOpenInEditor}
-        onRefresh={fetchDiff}
+        onRefresh={() => void fetchDiff()}
         onCopyDiff={handleCopyDiff}
       />
 
+      {actionError && (
+        <div className="flex items-center gap-2 border-b border-error/25 bg-error/10 px-3 py-1.5 text-[11px] text-error flex-shrink-0">
+          <AlertCircle size={13} className="flex-shrink-0" />
+          <span className="min-w-0 flex-1 truncate" title={actionError}>{actionError}</span>
+          <button
+            type="button"
+            onClick={() => setActionError(null)}
+            className="px-1.5 rounded hover:bg-error/15 cursor-pointer"
+            title="Dismiss"
+            aria-label="Dismiss"
+          >
+            ✕
+          </button>
+        </div>
+      )}
+
       {/* Main Diff Content Area */}
       <div className="flex-1 overflow-hidden relative flex flex-col bg-paper">
         {isLoading ? (
@@ -175,8 +261,8 @@ export function DiffPanel({
             <AlertCircle size={20} className="text-error" />
             <p className="text-xs text-error font-medium">{errorMessage}</p>
             <button
-              onClick={fetchDiff}
-              className="px-3 py-1 text-xs bg-ink/10 hover:bg-ink/15 text-ink rounded font-sans transition-colors"
+              onClick={() => void fetchDiff()}
+              className="px-3 py-1 text-xs bg-ink/10 hover:bg-ink/15 text-ink rounded font-sans transition-colors cursor-pointer"
             >
               Retry
             </button>
@@ -200,14 +286,14 @@ export function DiffPanel({
               <button
                 type="button"
                 onClick={() => setShowDiscardConfirm(false)}
-                className="px-3 py-1.5 text-xs text-ink hover:bg-ink/5 rounded transition-colors"
+                className="px-3 py-1.5 text-xs text-ink hover:bg-ink/5 rounded transition-colors cursor-pointer"
               >
                 Cancel
               </button>
               <button
                 type="button"
-                onClick={confirmDiscard}
-                className="px-3 py-1.5 text-xs bg-error text-white rounded hover:bg-error/90 font-medium transition-colors"
+                onClick={() => void confirmDiscard()}
+                className="px-3 py-1.5 text-xs bg-error text-white rounded hover:bg-error/90 font-medium transition-colors cursor-pointer"
               >
                 Discard Changes
               </button>

package/src/client/components/workspace/editor/Tabs.tsx

@@ -74,7 +74,7 @@ export function EditorTabs({ openedFiles, activeFileId, onSelectFile, onCloseFil
               title={file.path}
             >
               {isDiff ? (
-                <GitCompare size={14} className={isActive ? 'text-blue-600 dark:text-blue-400 flex-shrink-0' : 'opacity-60 flex-shrink-0'} />
+                <GitCompare size={14} className={isActive ? 'text-info flex-shrink-0' : 'text-info/70 flex-shrink-0'} />
               ) : (
                 <FileIcon name={file.name} size={14} className={isActive ? 'flex-shrink-0' : 'opacity-60 flex-shrink-0'} />
               )}
@@ -123,7 +123,7 @@ export function EditorTabs({ openedFiles, activeFileId, onSelectFile, onCloseFil
                   className="flex items-center space-x-2 px-3 py-1.5 hover:bg-ink/5 cursor-pointer group"
                 >
                   {file.isDiff ? (
-                    <GitCompare size={14} className="text-blue-600 opacity-70" />
+                    <GitCompare size={14} className="text-info/80" />
                   ) : (
                     <FileIcon name={file.name} size={14} className="opacity-60" />
                   )}