Clean up old stuff & fix ui errors

apps/next/src/components/agent-workspace/diff-viewer.tsx

@@ -4,6 +4,8 @@ import dynamic from 'next/dynamic';
 
 import { Button } from '@spoon/ui';
 
+import { extractFileDiff } from './diff-utils';
+
 const MonacoEditor = dynamic(async () => await import('@monaco-editor/react'), {
   ssr: false,
 });
@@ -22,34 +24,56 @@ const diffStats = (diff: string) => {
 
 export const DiffViewer = ({
   diff,
+  focusedPath,
   onRefresh,
+  onClearFocusedPath,
 }: {
   diff: string;
+  focusedPath?: string;
   onRefresh: () => Promise<void>;
+  onClearFocusedPath?: () => void;
 }) => {
-  const stats = diffStats(diff);
+  const focusedDiff = focusedPath ? extractFileDiff(diff, focusedPath) : '';
+  const visibleDiff = focusedPath ? focusedDiff : diff;
+  const stats = diffStats(visibleDiff);
   return (
     <div className='flex h-full min-h-0 flex-col'>
       <div className='border-border flex h-12 items-center justify-between gap-3 border-b px-3'>
         <div className='min-w-0'>
-          <p className='text-sm font-medium'>Workspace diff</p>
+          <p className='truncate text-sm font-medium'>
+            {focusedPath ? `Diff viewer: ${focusedPath}` : 'Diff viewer'}
+          </p>
           <p className='text-muted-foreground truncate text-xs'>
-            {diff.trim()
+            {visibleDiff.trim()
               ? `${stats.files} files, +${stats.additions} -${stats.removals}`
-              : 'Current git diff'}
+              : focusedPath
+                ? 'No diff for this file'
+                : 'Current git diff'}
           </p>
         </div>
-        <Button type='button' variant='outline' size='sm' onClick={onRefresh}>
-          Refresh
-        </Button>
+        <div className='flex flex-none items-center gap-2'>
+          {focusedPath ? (
+            <Button
+              type='button'
+              variant='ghost'
+              size='sm'
+              onClick={onClearFocusedPath}
+            >
+              Show all
+            </Button>
+          ) : null}
+          <Button type='button' variant='outline' size='sm' onClick={onRefresh}>
+            Refresh
+          </Button>
+        </div>
       </div>
-      {diff.trim() ? (
+      {visibleDiff.trim() ? (
         <MonacoEditor
           height='100%'
           width='100%'
           language='diff'
           theme='vs-dark'
-          value={diff}
+          value={visibleDiff}
           options={{
             readOnly: true,
             minimap: { enabled: false },
@@ -61,7 +85,9 @@ export const DiffViewer = ({
         />
       ) : (
         <div className='text-muted-foreground flex flex-1 items-center justify-center text-sm'>
-          No workspace diff yet.
+          {focusedPath
+            ? 'No diff is recorded for this file yet.'
+            : 'No workspace diff yet.'}
         </div>
       )}
     </div>