feat(workspace): a Changes tab reading the project's working tree

The workspace panel gains a third tab between Status and Browser: the
project's changed files with status, rename pairs and +/- counts, each row
expanding to its unified diff (one open at a time) with paired line numbers
in the diff tokens the edit cards already use. Binary and oversized files
say so instead of showing a diff; every row keeps its open-in-editor action.
Git is only read while the tab is visible, like the Status tab. Untracked
counts come from the patch itself, client-side. Locales updated in all ten
languages.

Author: devswha

src/components/workspace/hooks/useProjectChanges.ts

@@ -0,0 +1,109 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { api } from '../../../utils/api';
+
+export type ProjectChange = {
+  path: string;
+  oldPath: string | null;
+  status: 'added' | 'modified' | 'deleted' | 'renamed' | 'untracked';
+  staged: boolean;
+  additions: number;
+  deletions: number;
+  patch: string | null;
+  binary: boolean;
+  tooLarge: boolean;
+};
+
+export type ProjectChanges = {
+  branch: string | null;
+  hasCommits: boolean;
+  files: ProjectChange[];
+};
+
+export type ProjectChangesState =
+  | { kind: 'idle' }
+  | { kind: 'loading' }
+  | { kind: 'ready'; changes: ProjectChanges }
+  | { kind: 'not-a-repository' }
+  | { kind: 'unavailable' };
+
+function readChanges(body: Record<string, unknown>): ProjectChanges {
+  const branch = typeof body.branch === 'string' && body.branch.trim() ? body.branch.trim() : null;
+  const files = Array.isArray(body.files) ? body.files.flatMap((value): ProjectChange[] => {
+    if (!value || typeof value !== 'object') {
+      return [];
+    }
+    const file = value as Record<string, unknown>;
+    const status = file.status;
+    if (
+      typeof file.path !== 'string'
+      || !['added', 'modified', 'deleted', 'renamed', 'untracked'].includes(String(status))
+    ) {
+      return [];
+    }
+    // The server counts a tracked file's lines with numstat but has no cheap
+    // count for an untracked one; its patch is the whole file, countable here.
+    const patch = typeof file.patch === 'string' ? file.patch : null;
+    const counted = status === 'untracked' && patch
+      ? {
+          additions: patch.split('\n').filter((line) => line.startsWith('+') && !line.startsWith('+++')).length,
+          deletions: patch.split('\n').filter((line) => line.startsWith('-') && !line.startsWith('---')).length,
+        }
+      : {};
+    return [{
+      path: file.path,
+      oldPath: typeof file.oldPath === 'string' ? file.oldPath : null,
+      status: status as ProjectChange['status'],
+      staged: file.staged === true,
+      additions: typeof file.additions === 'number' ? file.additions : 0,
+      deletions: typeof file.deletions === 'number' ? file.deletions : 0,
+      ...counted,
+      patch,
+      binary: file.binary === true,
+      tooLarge: file.tooLarge === true,
+    }];
+  }) : [];
+
+  return { branch, hasCommits: body.hasCommits !== false, files };
+}
+
+export function useProjectChanges(projectId: string | undefined, enabled: boolean) {
+  const [state, setState] = useState<ProjectChangesState>({ kind: 'idle' });
+  const requestRef = useRef(0);
+
+  const load = useCallback(async () => {
+    if (!projectId) {
+      setState({ kind: 'idle' });
+      return;
+    }
+
+    const requestId = ++requestRef.current;
+    const publish = (next: ProjectChangesState) => {
+      if (requestId === requestRef.current) {
+        setState(next);
+      }
+    };
+
+    publish({ kind: 'loading' });
+    try {
+      const response = await api.get(`/git/diff?project=${encodeURIComponent(projectId)}`);
+      const body = await response.json() as Record<string, unknown>;
+      if (typeof body.error === 'string') {
+        publish(/not a git repository/i.test(body.error) ? { kind: 'not-a-repository' } : { kind: 'unavailable' });
+        return;
+      }
+      publish({ kind: 'ready', changes: readChanges(body) });
+    } catch {
+      publish({ kind: 'unavailable' });
+    }
+  }, [projectId]);
+
+  useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    void load();
+  }, [enabled, load]);
+
+  return { state, refresh: load };
+}

src/components/workspace/utils/unifiedDiff.test.ts

@@ -0,0 +1,36 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import { parseUnifiedDiff } from './unifiedDiff';
+
+test('parses hunk headers and assigns paired old and new line numbers', () => {
+  const rows = parseUnifiedDiff([
+    'diff --git a/example.ts b/example.ts',
+    'index 1111111..2222222 100644',
+    '--- a/example.ts',
+    '+++ b/example.ts',
+    '@@ -2,2 +2,3 @@ function example() {',
+    ' unchanged();',
+    '-old();',
+    '+new();',
+    '+another();',
+  ].join('\n'));
+
+  assert.deepEqual(rows, [
+    { kind: 'hunk', content: '@@ -2,2 +2,3 @@ function example() {' },
+    { kind: 'context', content: 'unchanged();', oldLine: 2, newLine: 2 },
+    { kind: 'removed', content: 'old();', oldLine: 3, newLine: null },
+    { kind: 'added', content: 'new();', oldLine: null, newLine: 3 },
+    { kind: 'added', content: 'another();', oldLine: null, newLine: 4 },
+  ]);
+});
+
+test('drops rename preambles and returns no rows for an empty patch', () => {
+  assert.deepEqual(parseUnifiedDiff([
+    'diff --git a/old-name.ts b/new-name.ts',
+    'similarity index 100%',
+    'rename from old-name.ts',
+    'rename to new-name.ts',
+  ].join('\n')), []);
+  assert.deepEqual(parseUnifiedDiff(''), []);
+});

src/components/workspace/utils/unifiedDiff.ts

@@ -0,0 +1,40 @@
+export type UnifiedDiffRow =
+  | { kind: 'hunk'; content: string }
+  | { kind: 'context' | 'added' | 'removed'; content: string; oldLine: number | null; newLine: number | null };
+
+const HUNK_HEADER = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@/;
+
+/** Parses the displayable portion of a unified diff without interpreting file contents. */
+export function parseUnifiedDiff(patch: string): UnifiedDiffRow[] {
+  const rows: UnifiedDiffRow[] = [];
+  let oldLine = 0;
+  let newLine = 0;
+  let inHunk = false;
+
+  for (const line of patch.split('\n')) {
+    const header = HUNK_HEADER.exec(line);
+    if (header) {
+      oldLine = Number(header[1]);
+      newLine = Number(header[3]);
+      inHunk = true;
+      rows.push({ kind: 'hunk', content: line });
+      continue;
+    }
+    if (!inHunk || line === '\\ No newline at end of file') {
+      continue;
+    }
+    if (line.startsWith('+')) {
+      rows.push({ kind: 'added', content: line.slice(1), oldLine: null, newLine });
+      newLine += 1;
+    } else if (line.startsWith('-')) {
+      rows.push({ kind: 'removed', content: line.slice(1), oldLine, newLine: null });
+      oldLine += 1;
+    } else if (line.startsWith(' ')) {
+      rows.push({ kind: 'context', content: line.slice(1), oldLine, newLine });
+      oldLine += 1;
+      newLine += 1;
+    }
+  }
+
+  return rows;
+}

src/components/workspace/view/UnifiedDiff.tsx

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+
+import { parseUnifiedDiff } from '../utils/unifiedDiff';
+
+export type UnifiedDiffProps = {
+  patch: string;
+};
+
+export default function UnifiedDiff({ patch }: UnifiedDiffProps) {
+  const rows = useMemo(() => parseUnifiedDiff(patch), [patch]);
+
+  return (
+    <div className="overflow-x-auto border-t border-border/60 font-mono text-xs leading-[18px]">
+      {rows.map((row, index) => {
+        if (row.kind === 'hunk') {
+          return <div key={index} className="px-2 text-muted-foreground">{row.content}</div>;
+        }
+        const appearance = row.kind === 'added'
+          ? { className: 'bg-diff-added text-diff-added-foreground', marker: '+' }
+          : row.kind === 'removed'
+            ? { className: 'bg-diff-removed text-diff-removed-foreground', marker: '-' }
+            : { className: 'text-muted-foreground', marker: ' ' };
+        return (
+          <div key={index} className={`flex min-w-0 ${appearance.className}`}>
+            <span className="w-6 shrink-0 text-center select-none">{appearance.marker}</span>
+            <span className="w-10 shrink-0 px-1 text-right text-muted-foreground/70 select-none">{row.oldLine ?? ''}</span>
+            <span className="w-10 shrink-0 px-1 text-right text-muted-foreground/70 select-none">{row.newLine ?? ''}</span>
+            <span className="min-w-0 flex-1 px-2 break-all whitespace-pre-wrap">{row.content}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/components/workspace/view/WorkspaceChangesTab.test.tsx

@@ -0,0 +1,56 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+
+import { createElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+import type { ProjectChange } from '../hooks/useProjectChanges';
+
+import WorkspaceChangesTab, { ChangeRow, type WorkspaceChangesTabProps } from './WorkspaceChangesTab';
+
+const t = (key: string) => key;
+const changedFile: ProjectChange = {
+  path: 'src/new-name.ts',
+  oldPath: 'src/old-name.ts',
+  status: 'renamed',
+  staged: false,
+  additions: 2,
+  deletions: 1,
+  patch: '@@ -1 +1,2 @@\n-old\n+new\n+another',
+  binary: false,
+  tooLarge: false,
+};
+
+function render(overrides: Partial<WorkspaceChangesTabProps> = {}): string {
+  return renderToStaticMarkup(createElement(WorkspaceChangesTab, {
+    projectId: 'project-alpha',
+    projectPath: '/work/alpha',
+    projectName: 'Alpha Workspace',
+    active: true,
+    ...overrides,
+  }));
+}
+
+test('renders the loading state and refresh control before a static render can load changes', () => {
+  const html = render();
+
+  assert.match(html, /workspace\.changes\.loading/);
+  assert.match(html, /aria-label="workspace\.changes\.refreshLabel"/);
+});
+
+test('renders a file row with counts, rename, and expanded unified diff', () => {
+  const html = renderToStaticMarkup(createElement(ChangeRow, {
+    file: changedFile,
+    expanded: true,
+    onToggle: () => {},
+    onOpenInEditor: () => {},
+    t,
+  }));
+
+  assert.match(html, /src\/old-name\.ts/);
+  assert.match(html, /src\/new-name\.ts/);
+  assert.match(html, /\+2/);
+  assert.match(html, /-1/);
+  assert.match(html, /old/);
+  assert.match(html, /another/);
+});