From a02f49e794dc97967da4505a077c41fcd63ef95c Mon Sep 17 00:00:00 2001
From: Uniskela <104075208+uniskela@users.noreply.github.com>
Date: Wed, 7 Oct 2026 11:00:23 +0000
Subject: [PATCH 1/2] feat: add stack history and change indicators

Expose stack-scoped Git history in the UI and surface draft counts on the Changes tab and stack header so outstanding work is easy to find.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/UX.md                                    |   7 +-
 docs/getting-started.md                       |   3 +-
 docs/index.md                                 |   3 +-
 src/app/styles/source.css                     |  93 ++++++
 .../stacks/[stackId]/history/page.tsx         |  18 ++
 .../[workspaceId]/stacks/[stackId]/layout.tsx |  15 +-
 src/ui/source/changes-view.tsx                |  45 +--
 src/ui/source/history-view.tsx                | 301 ++++++++++++++++++
 src/ui/source/stack-tabs.tsx                  |  47 ++-
 src/ui/source/unified-diff.tsx                |  58 ++++
 tests/e2e/source.spec.ts                      | 137 +++++++-
 11 files changed, 673 insertions(+), 54 deletions(-)
 create mode 100644 src/app/w/[workspaceId]/stacks/[stackId]/history/page.tsx
 create mode 100644 src/ui/source/history-view.tsx
 create mode 100644 src/ui/source/unified-diff.tsx

diff --git a/docs/UX.md b/docs/UX.md
index a2f9545..130e46e 100644
--- a/docs/UX.md
+++ b/docs/UX.md
@@ -27,15 +27,16 @@ Signed-in operators work inside a workspace. Primary sidebar navigation (desktop
 
 **Header:** stack name + optional runtime strip (health, container count, image, last refresh)
 
-**Tabs:** Compose | Files | Docs | Environment | Secrets | Changes | Deployments
+**Tabs:** Editor | Docs | Environment | Changes | History | Settings (Secrets and Deployments arrive later)
 
 No primary nav items for Containers / Images / Networks / Volumes.
 
 Repository pages have **Overview**, **Files**, **Docs** and **Changes** tabs: the same editor, docs and review
 views scoped to the whole repository, for files outside any stack (root README, `docs/`, shared `.env.example`).
 
-Implemented in PR #3: **Editor** (explorer, tabs, problems, status bar), **Docs**, **Environment**, **Changes** and
-**Settings** tabs. Secrets and Deployments arrive with PR #6 and PR #5.
+Implemented: **Editor**, **Docs**, **Environment**, **Changes**, **History** (stack-scoped commits at the
+fetched snapshot) and **Settings**. Draft counts appear on the Changes tab and stack header when work is outstanding.
+Secrets and Deployments arrive with PR #6 and PR #5.
 
 ## Desktop
 
diff --git a/docs/getting-started.md b/docs/getting-started.md
index 1042ad9..17cd789 100644
--- a/docs/getting-started.md
+++ b/docs/getting-started.md
@@ -91,7 +91,8 @@ can't be opened or edited.
 Drafts are stored in stack-manager's database and never leave the server. If the file changes in Git after you start a
 draft, the editor warns you, so you don't overwrite someone else's change unknowingly.
 
-Committing drafts, safe push and Git history ship in v0.5.0; see the [roadmap](plans/MVP_PLAN.md).
+The **History** tab lists commits that touched the stack at the last fetched snapshot. Committing drafts and safe push
+ship in v0.5.0; see the [roadmap](plans/MVP_PLAN.md).
 
 ## 5. Files outside stacks
 
diff --git a/docs/index.md b/docs/index.md
index e905147..701ba79 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -35,7 +35,8 @@ stack-manager looks after the Git source they are deployed from.
 stack-manager is in early development (0.x). Available today: sign-in, workspaces, encrypted credentials, repository
 connections, stacks, dashboard and settings, the editor with drafts, docs, the environment inventory and change review.
 
-Coming in v0.5.0: committing drafts, safe push and Git history. After that on the [roadmap](plans/MVP_PLAN.md):
+Stack-scoped Git history is available on each stack's History tab. Coming in v0.5.0: committing drafts and safe push.
+After that on the [roadmap](plans/MVP_PLAN.md):
 deploying only the stacks a commit changed (through Portainer and others), then optional read-only runtime feedback.
 
 ## Documentation
diff --git a/src/app/styles/source.css b/src/app/styles/source.css
index 97ec3d4..781107c 100644
--- a/src/app/styles/source.css
+++ b/src/app/styles/source.css
@@ -1161,6 +1161,99 @@ select.compact-select {
   font-size: var(--text-xs);
   font-weight: 600;
   white-space: nowrap;
+  text-decoration: none;
+}
+
+.page-title-row .draft-badge {
+  margin-left: 0;
+}
+
+/* ---------- Stack history ---------- */
+.history-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: var(--space-3);
+}
+
+.history-item {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--surface);
+  overflow: hidden;
+}
+
+.history-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  width: 100%;
+  padding: var(--space-3) var(--space-4);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.history-row:hover,
+.history-row:focus-visible {
+  background: var(--surface-2);
+}
+
+.history-row-main {
+  display: grid;
+  gap: var(--space-1);
+  min-width: 0;
+  flex: 1;
+}
+
+.history-subject {
+  font-weight: 600;
+  overflow-wrap: anywhere;
+}
+
+.history-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0 0.25rem;
+}
+
+.history-files,
+.history-files-empty {
+  margin: 0;
+  padding: 0 var(--space-4) var(--space-3);
+  padding-left: calc(var(--space-4) + 1.5rem);
+  list-style: none;
+  display: grid;
+  gap: var(--space-1);
+  font-size: var(--text-sm);
+}
+
+.history-files li {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.history-files .mono {
+  overflow-wrap: anywhere;
+}
+
+.history-detail {
+  border-top: 1px solid var(--border);
+}
+
+.history-detail-title {
+  margin: 0;
+  font-size: var(--text-md);
+}
+
+.history-file-diff + .history-file-diff {
+  border-top: 1px solid var(--border);
 }
 
 /* Flat lists (grouped by repository only, or not at all) have no folder labels above their first row. */
diff --git a/src/app/w/[workspaceId]/stacks/[stackId]/history/page.tsx b/src/app/w/[workspaceId]/stacks/[stackId]/history/page.tsx
new file mode 100644
index 0000000..da011b1
--- /dev/null
+++ b/src/app/w/[workspaceId]/stacks/[stackId]/history/page.tsx
@@ -0,0 +1,18 @@
+import type { Metadata } from 'next';
+import { getContainer } from '@/server/container';
+import { HistoryView } from '@/ui/source/history-view';
+
+export const metadata: Metadata = { title: 'History' };
+
+export default async function StackHistoryPage({
+  params,
+}: {
+  params: Promise<{ workspaceId: string; stackId: string }>;
+}) {
+  const { workspaceId, stackId } = await params;
+  const { stacks } = getContainer();
+  const stack = await stacks.get(workspaceId, stackId);
+  return (
+    <HistoryView apiBase={`/api/workspaces/${workspaceId}/stacks/${stackId}`} rootPath={stack.rootPath} />
+  );
+}
diff --git a/src/app/w/[workspaceId]/stacks/[stackId]/layout.tsx b/src/app/w/[workspaceId]/stacks/[stackId]/layout.tsx
index 480123e..7a67ea4 100644
--- a/src/app/w/[workspaceId]/stacks/[stackId]/layout.tsx
+++ b/src/app/w/[workspaceId]/stacks/[stackId]/layout.tsx
@@ -1,4 +1,4 @@
-import { Folder, FolderGit2, GitBranch, GitCommitHorizontal, Hourglass } from 'lucide-react';
+import { Folder, FolderGit2, GitBranch, GitCommitHorizontal, Hourglass, PencilLine } from 'lucide-react';
 import Link from 'next/link';
 import { getContainer } from '@/server/container';
 import { EmptyState } from '@/ui/primitives/empty-state';
@@ -24,6 +24,7 @@ export default async function StackLayout({
     stacks.listForRepository(workspaceId, stack.repository.id),
   ]);
   const base = `/w/${workspaceId}/stacks/${stackId}`;
+  const draftLabel = `${drafts} draft${drafts === 1 ? '' : 's'}`;
 
   return (
     <div className="wide-page">
@@ -37,6 +38,18 @@ export default async function StackLayout({
             />
           }
           title={stack.name}
+          status={
+            drafts > 0 ? (
+              <Link
+                href={`${base}/changes`}
+                className="draft-badge"
+                aria-label={`${draftLabel}, open Changes`}
+              >
+                <PencilLine className="icon" aria-hidden="true" />
+                {draftLabel}
+              </Link>
+            ) : null
+          }
           actions={
             <StackSwitcher
               workspaceId={workspaceId}
diff --git a/src/ui/source/changes-view.tsx b/src/ui/source/changes-view.tsx
index 38dc69d..3ae0cc1 100644
--- a/src/ui/source/changes-view.tsx
+++ b/src/ui/source/changes-view.tsx
@@ -12,52 +12,11 @@ import { LocalTime } from '../local-time';
 import { Alert } from '../primitives/alert';
 import { ConfirmButton } from '../primitives/confirm-button';
 import { EmptyState } from '../primitives/empty-state';
+import { UnifiedDiff } from './unified-diff';
 
 function Diff({ before, after }: { before: string; after: string }) {
   const patch = structuredPatch('before', 'after', before, after, '', '', { context: 3 });
-  if (patch.hunks.length === 0) return <p className="fine-print change-head">No textual changes.</p>;
-  return (
-    <div className="diff" role="table" aria-label="Line changes">
-      {patch.hunks.map((hunk, h) => {
-        let oldLine = hunk.oldStart;
-        let newLine = hunk.newStart;
-        return (
-          <div key={h} role="rowgroup">
-            <div className="diff-hunk" role="row">
-              <span role="cell">
-                @@ -{hunk.oldStart},{hunk.oldLines} +{hunk.newStart},{hunk.newLines} @@
-              </span>
-            </div>
-            {hunk.lines.map((line, i) => {
-              const sign = line[0];
-              if (sign === '\\') return null;
-              const kind = sign === '+' ? 'add' : sign === '-' ? 'remove' : 'same';
-              const oldNo = kind === 'add' ? '' : oldLine++;
-              const newNo = kind === 'remove' ? '' : newLine++;
-              return (
-                <div key={i} className={`diff-line ${kind}`} role="row">
-                  <span className="ln" role="cell">
-                    {oldNo}
-                  </span>
-                  <span className="ln" role="cell">
-                    {newNo}
-                  </span>
-                  <span
-                    className="sign"
-                    role="cell"
-                    aria-label={kind === 'same' ? undefined : kind === 'add' ? 'added' : 'removed'}
-                  >
-                    {kind === 'same' ? ' ' : sign}
-                  </span>
-                  <span role="cell">{line.slice(1)}</span>
-                </div>
-              );
-            })}
-          </div>
-        );
-      })}
-    </div>
-  );
+  return <UnifiedDiff hunks={patch.hunks} />;
 }
 
 /** Review of draft changes in a stack, as unified diffs against the version each draft started from. */
diff --git a/src/ui/source/history-view.tsx b/src/ui/source/history-view.tsx
new file mode 100644
index 0000000..5297b1c
--- /dev/null
+++ b/src/ui/source/history-view.tsx
@@ -0,0 +1,301 @@
+'use client';
+
+import { GitCommitHorizontal, History } from 'lucide-react';
+import { useEffect, useId, useState } from 'react';
+import type { HistoryCommit, HistoryDetail, HistoryPage } from '@/shared/git-history';
+import { relativeTo } from '@/shared/source/paths';
+import { api, ApiError } from '../api';
+import { LocalTime } from '../local-time';
+import { Alert } from '../primitives/alert';
+import { Button } from '../primitives/button';
+import { EmptyState } from '../primitives/empty-state';
+import { UnifiedDiff } from './unified-diff';
+
+const FILE_STATUS: Record<HistoryCommit['files'][number]['status'], string> = {
+  added: 'Added',
+  modified: 'Modified',
+  deleted: 'Deleted',
+  type_changed: 'Type changed',
+};
+
+const LOCKED_REASON: Record<NonNullable<HistoryDetail['commit']['files'][number]['locked']>, string> = {
+  secret: 'Secret file — contents are not shown.',
+  symlink: 'Symlink — contents are not shown.',
+  submodule: 'Submodule — contents are not shown.',
+  binary: 'Binary file — contents are not shown.',
+  too_large: 'File is too large to show a diff.',
+  diff_limit: 'Diff exceeded size limits.',
+  unsupported_path: 'This path cannot be shown in the editor.',
+};
+
+const PREVIEW_FILES = 8;
+
+function fileLabel(rootPath: string, path: string) {
+  return relativeTo(rootPath, path) || path;
+}
+
+async function fetchPage(apiBase: string, cursor: string | null): Promise<HistoryPage> {
+  const q = new URLSearchParams({ limit: '20' });
+  if (cursor) q.set('cursor', cursor);
+  return api<HistoryPage>(`${apiBase}/history?${q}`);
+}
+
+function FileList({
+  rootPath,
+  files,
+  truncated,
+}: {
+  rootPath: string;
+  files: HistoryCommit['files'];
+  truncated: boolean;
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const visible = expanded ? files : files.slice(0, PREVIEW_FILES);
+  const hidden = files.length - visible.length;
+  return (
+    <ul className="history-files">
+      {visible.map((f) => (
+        <li key={f.path}>
+          <span className="mono">{fileLabel(rootPath, f.path)}</span>{' '}
+          <span className="pill">{FILE_STATUS[f.status]}</span>
+        </li>
+      ))}
+      {hidden > 0 || truncated ? (
+        <li>
+          {hidden > 0 ? (
+            <Button variant="ghost" size="sm" onClick={() => setExpanded(true)}>
+              Show {hidden} more file{hidden === 1 ? '' : 's'}
+            </Button>
+          ) : null}
+          {truncated ? <span className="fine-print">File list truncated by the server.</span> : null}
+        </li>
+      ) : null}
+    </ul>
+  );
+}
+
+function CommitDetail({
+  apiBase,
+  rootPath,
+  sha,
+  onClose,
+}: {
+  apiBase: string;
+  rootPath: string;
+  sha: string;
+  onClose: () => void;
+}) {
+  const [detail, setDetail] = useState<HistoryDetail | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    let cancelled = false;
+    void api<HistoryDetail>(`${apiBase}/history/${sha}`)
+      .then((d) => {
+        if (cancelled) return;
+        setDetail(d);
+        setLoading(false);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err instanceof ApiError ? err.message : 'Could not load this commit.');
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBase, sha]);
+
+  return (
+    <section className="card flush history-detail" aria-label="Commit details">
+      <div className="change-head">
+        <div>
+          <h3 className="history-detail-title">Commit detail</h3>
+          <p className="fine-print mono">{sha}</p>
+        </div>
+        <Button variant="ghost" size="sm" onClick={onClose} aria-label="Close commit details">
+          Close
+        </Button>
+      </div>
+      {loading ? <p className="fine-print change-head">Loading changes…</p> : null}
+      {error ? (
+        <Alert tone="error" role="alert">
+          {error}
+        </Alert>
+      ) : null}
+      {detail
+        ? detail.commit.files.map((f) => {
+            const rel = fileLabel(rootPath, f.path);
+            return (
+              <div key={f.path} className="history-file-diff">
+                <div className="change-head">
+                  <div>
+                    <span className="mono">{rel}</span> <span className="pill">{FILE_STATUS[f.status]}</span>
+                  </div>
+                </div>
+                {f.locked ? (
+                  <p className="fine-print change-head">{LOCKED_REASON[f.locked]}</p>
+                ) : f.hunks === null ? (
+                  <p className="fine-print change-head">Diff unavailable.</p>
+                ) : (
+                  <UnifiedDiff hunks={f.hunks} label={`Changes in ${rel}`} />
+                )}
+              </div>
+            );
+          })
+        : null}
+      {detail && detail.commit.files.length === 0 ? (
+        <p className="fine-print change-head">No files changed in this stack scope.</p>
+      ) : null}
+      {detail?.commit.filesTruncated ? (
+        <p className="fine-print change-head">File list truncated by the server.</p>
+      ) : null}
+    </section>
+  );
+}
+
+/** Stack-scoped Git history at the last fetched snapshot, with optional commit detail. */
+export function HistoryView({ apiBase, rootPath }: { apiBase: string; rootPath: string }) {
+  const listId = useId();
+  const [commits, setCommits] = useState<HistoryCommit[]>([]);
+  const [nextCursor, setNextCursor] = useState<string | null>(null);
+  const [limitReached, setLimitReached] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [reloadToken, setReloadToken] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    void fetchPage(apiBase, null)
+      .then((page) => {
+        if (cancelled) return;
+        setCommits(page.commits);
+        setNextCursor(page.nextCursor);
+        setLimitReached(page.historyLimitReached);
+        setError(null);
+        setLoading(false);
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(err instanceof ApiError ? err.message : 'Could not load history.');
+        setCommits([]);
+        setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [apiBase, reloadToken]);
+
+  const loadMore = async () => {
+    if (!nextCursor) return;
+    setLoadingMore(true);
+    setError(null);
+    try {
+      const page = await fetchPage(apiBase, nextCursor);
+      setCommits((prev) => [...prev, ...page.commits]);
+      setNextCursor(page.nextCursor);
+      setLimitReached(page.historyLimitReached);
+    } catch (err) {
+      setError(err instanceof ApiError ? err.message : 'Could not load history.');
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <p className="muted" role="status">
+        Loading history…
+      </p>
+    );
+  }
+
+  if (error && commits.length === 0) {
+    return (
+      <div className="stack">
+        <Alert tone="error" role="alert">
+          {error}
+        </Alert>
+        <Button
+          onClick={() => {
+            setLoading(true);
+            setReloadToken((n) => n + 1);
+          }}
+        >
+          Try again
+        </Button>
+      </div>
+    );
+  }
+
+  if (commits.length === 0) {
+    return (
+      <EmptyState icon={History} title="No commits for this stack">
+        No commits touching this stack were found.
+      </EmptyState>
+    );
+  }
+
+  return (
+    <div className="stack history-view">
+      {error ? (
+        <Alert tone="error" role="alert">
+          {error}
+        </Alert>
+      ) : null}
+      <ul className="history-list" id={listId} aria-label="Stack history">
+        {commits.map((c) => {
+          const open = selected === c.sha;
+          return (
+            <li key={c.sha} className="history-item">
+              <button
+                type="button"
+                className="history-row"
+                aria-expanded={open}
+                aria-controls={open ? `commit-${c.sha}` : undefined}
+                onClick={() => setSelected(open ? null : c.sha)}
+              >
+                <GitCommitHorizontal className="icon muted" aria-hidden="true" />
+                <span className="history-row-main">
+                  <span className="history-subject">{c.subject}</span>
+                  <span className="fine-print history-meta">
+                    <span className="mono">{c.shortSha}</span>
+                    <span aria-hidden="true"> · </span>
+                    <span>{c.author.name}</span>
+                    <span aria-hidden="true"> · </span>
+                    <LocalTime iso={c.authoredAt} />
+                  </span>
+                </span>
+              </button>
+              {c.files.length > 0 ? (
+                <FileList rootPath={rootPath} files={c.files} truncated={c.filesTruncated} />
+              ) : (
+                <p className="fine-print history-files-empty">No files in this stack scope</p>
+              )}
+              {open ? (
+                <div id={`commit-${c.sha}`}>
+                  <CommitDetail
+                    key={c.sha}
+                    apiBase={apiBase}
+                    rootPath={rootPath}
+                    sha={c.sha}
+                    onClose={() => setSelected(null)}
+                  />
+                </div>
+              ) : null}
+            </li>
+          );
+        })}
+      </ul>
+      {nextCursor ? (
+        <Button loading={loadingMore} onClick={() => void loadMore()}>
+          Load more
+        </Button>
+      ) : null}
+      {limitReached ? <p className="fine-print">History pagination limit reached for this fetch.</p> : null}
+    </div>
+  );
+}
diff --git a/src/ui/source/stack-tabs.tsx b/src/ui/source/stack-tabs.tsx
index 4e056ec..35bb22a 100644
--- a/src/ui/source/stack-tabs.tsx
+++ b/src/ui/source/stack-tabs.tsx
@@ -1,19 +1,62 @@
 'use client';
 
-import { BookOpen, Code2, GitCompareArrows, Settings2, Variable } from 'lucide-react';
+import { BookOpen, Code2, GitCompareArrows, History, Settings2, Variable } from 'lucide-react';
 import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
 
 /** Stack page sections (docs/UX.md). Deployments, runtime and secrets join in later phases. */
 export function StackTabs({ base, drafts }: { base: string; drafts: number }) {
   const pathname = usePathname();
+  const router = useRouter();
   const items = [
     { href: base, label: 'Editor', Icon: Code2, exact: true },
     { href: `${base}/docs`, label: 'Docs', Icon: BookOpen },
     { href: `${base}/environment`, label: 'Environment', Icon: Variable },
     { href: `${base}/changes`, label: 'Changes', Icon: GitCompareArrows, count: drafts },
+    { href: `${base}/history`, label: 'History', Icon: History },
     { href: `${base}/settings`, label: 'Settings', Icon: Settings2 },
   ];
+
+  // ponytail: chord only; full shortcut sheet / command palette stays on the UI plan.
+  useEffect(() => {
+    let pendingG = false;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const onKey = (e: KeyboardEvent) => {
+      const target = e.target as HTMLElement | null;
+      if (
+        target &&
+        (target.isContentEditable ||
+          target.tagName === 'INPUT' ||
+          target.tagName === 'TEXTAREA' ||
+          target.tagName === 'SELECT')
+      ) {
+        pendingG = false;
+        return;
+      }
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      const key = e.key.toLowerCase();
+      if (pendingG && key === 'c') {
+        e.preventDefault();
+        pendingG = false;
+        router.push(`${base}/changes`);
+        return;
+      }
+      pendingG = key === 'g';
+      clearTimeout(timer);
+      if (pendingG) {
+        timer = setTimeout(() => {
+          pendingG = false;
+        }, 1000);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => {
+      window.removeEventListener('keydown', onKey);
+      clearTimeout(timer);
+    };
+  }, [base, router]);
+
   return (
     <nav className="tabs" aria-label="Stack">
       {items.map(({ href, label, Icon, exact, count }) => {
diff --git a/src/ui/source/unified-diff.tsx b/src/ui/source/unified-diff.tsx
new file mode 100644
index 0000000..1d328ba
--- /dev/null
+++ b/src/ui/source/unified-diff.tsx
@@ -0,0 +1,58 @@
+/** Renders structured unified-diff hunks with the shared `.diff` visual language. */
+export function UnifiedDiff({
+  hunks,
+  label = 'Line changes',
+}: {
+  hunks: Array<{
+    oldStart: number;
+    oldLines: number;
+    newStart: number;
+    newLines: number;
+    lines: string[];
+  }>;
+  label?: string;
+}) {
+  if (hunks.length === 0) return <p className="fine-print change-head">No textual changes.</p>;
+  return (
+    <div className="diff" role="table" aria-label={label}>
+      {hunks.map((hunk, h) => {
+        let oldLine = hunk.oldStart;
+        let newLine = hunk.newStart;
+        return (
+          <div key={h} role="rowgroup">
+            <div className="diff-hunk" role="row">
+              <span role="cell">
+                @@ -{hunk.oldStart},{hunk.oldLines} +{hunk.newStart},{hunk.newLines} @@
+              </span>
+            </div>
+            {hunk.lines.map((line, i) => {
+              const sign = line[0];
+              if (sign === '\\') return null;
+              const kind = sign === '+' ? 'add' : sign === '-' ? 'remove' : 'same';
+              const oldNo = kind === 'add' ? '' : oldLine++;
+              const newNo = kind === 'remove' ? '' : newLine++;
+              return (
+                <div key={i} className={`diff-line ${kind}`} role="row">
+                  <span className="ln" role="cell">
+                    {oldNo}
+                  </span>
+                  <span className="ln" role="cell">
+                    {newNo}
+                  </span>
+                  <span
+                    className="sign"
+                    role="cell"
+                    aria-label={kind === 'same' ? undefined : kind === 'add' ? 'added' : 'removed'}
+                  >
+                    {kind === 'same' ? ' ' : sign}
+                  </span>
+                  <span role="cell">{line.slice(1)}</span>
+                </div>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/tests/e2e/source.spec.ts b/tests/e2e/source.spec.ts
index 93f9668..e88d865 100644
--- a/tests/e2e/source.spec.ts
+++ b/tests/e2e/source.spec.ts
@@ -24,7 +24,7 @@ test('stack pages render and are accessible', async ({ page }) => {
   await expect(page.getByRole('navigation', { name: 'Stack' })).toBeVisible();
   await expectAccessible(page);
 
-  for (const tab of ['Docs', 'Environment', 'Changes', 'Settings']) {
+  for (const tab of ['Docs', 'Environment', 'Changes', 'History', 'Settings']) {
     await page
       .getByRole('navigation', { name: 'Stack' })
       .getByRole('link', { name: new RegExp(tab) })
@@ -184,16 +184,147 @@ test('edit, save a draft, review and discard it', async ({ page }) => {
   await page.keyboard.press('ControlOrMeta+s');
   await expect(page.locator('.editor-toolbar').getByText('Draft', { exact: true })).toBeVisible();
 
+  await expect(page.getByRole('link', { name: /drafts?, open Changes/ })).toBeVisible();
+  await expect(
+    page.getByRole('navigation', { name: 'Stack' }).getByRole('link', { name: /Changes/ }),
+  ).toContainText(/1/);
+
+  // Leave the editor so the g c chord is not swallowed by CodeMirror.
   await page
     .getByRole('navigation', { name: 'Stack' })
-    .getByRole('link', { name: /Changes/ })
-    .click();
+    .getByRole('link', { name: /History/ })
+    .focus();
+  await page.keyboard.press('g');
+  await page.keyboard.press('c');
+  await expect(page).toHaveURL(/\/changes$/);
   await expect(page.locator('.diff')).toContainText('# edited by e2e');
   await expectAccessible(page);
 
   await page.getByRole('button', { name: 'Discard…' }).click();
   await page.getByRole('button', { name: 'Discard draft' }).click();
   await expect(page.getByRole('heading', { name: 'No draft changes' })).toBeVisible();
+  await expect(page.getByRole('link', { name: /drafts?, open Changes/ })).toHaveCount(0);
+  await expect(
+    page.getByRole('navigation', { name: 'Stack' }).getByRole('link', { name: /^Changes$/ }),
+  ).toBeVisible();
+});
+
+test('stack history lists commits, opens detail, and handles empty/load-more', async ({ page }) => {
+  const { workspaceId, stackId } = sample();
+  const historyPath = `/api/workspaces/${workspaceId}/stacks/${stackId}/history`;
+  const filePath = SAMPLE_ROOT ? `${SAMPLE_ROOT}/compose.yaml` : 'compose.yaml';
+  const headSha = 'a'.repeat(40);
+  const commit = (sha: string, subject: string, authoredAt: string) => ({
+    sha,
+    shortSha: sha.slice(0, 7),
+    parents: [] as string[],
+    subject,
+    message: `${subject}\n`,
+    author: { name: 'Operator', email: 'op@example.invalid' },
+    authoredAt,
+    committedAt: authoredAt,
+    files: [{ path: filePath, status: 'modified' as const }],
+    filesTruncated: false,
+  });
+
+  const historyRoute = (url: URL) => url.pathname === historyPath || url.pathname.startsWith(`${historyPath}/`);
+
+  await page.route(historyRoute, async (route) => {
+    const url = new URL(route.request().url());
+    const sha = url.pathname.slice(historyPath.length + 1);
+    if (sha.length === 40) {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          repositoryId: 'repo',
+          rootPath: SAMPLE_ROOT,
+          headSha,
+          commit: {
+            ...commit(sha, 'First page commit', '2026-10-02T12:00:00+00:00'),
+            diffBaseSha: null,
+            files: [
+              {
+                path: filePath,
+                status: 'modified',
+                locked: null,
+                hunks: [
+                  {
+                    oldStart: 1,
+                    oldLines: 1,
+                    newStart: 1,
+                    newLines: 1,
+                    lines: ['-image: old', '+image: new'],
+                  },
+                ],
+              },
+            ],
+          },
+        }),
+      });
+      return;
+    }
+    if (url.searchParams.get('cursor')) {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          repositoryId: 'repo',
+          rootPath: SAMPLE_ROOT,
+          headSha,
+          commits: [commit('b'.repeat(40), 'Second page commit', '2026-10-01T12:00:00+00:00')],
+          nextCursor: null,
+          historyLimitReached: false,
+        }),
+      });
+      return;
+    }
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        repositoryId: 'repo',
+        rootPath: SAMPLE_ROOT,
+        headSha,
+        commits: [commit(headSha, 'First page commit', '2026-10-02T12:00:00+00:00')],
+        nextCursor: 'cursor-page-2',
+        historyLimitReached: false,
+      }),
+    });
+  });
+
+  await page.goto(`${stackUrl()}/history`);
+  const list = page.getByRole('list', { name: 'Stack history' });
+  await expect(list.getByRole('button', { name: /First page commit/ })).toBeVisible();
+  await expectAccessible(page);
+
+  await list.getByRole('button', { name: /First page commit/ }).click();
+  await expect(page.getByRole('region', { name: 'Commit details' })).toBeVisible();
+  await expect(page.locator('.diff')).toContainText('image: new');
+  await expectAccessible(page);
+
+  await page.getByRole('button', { name: 'Load more' }).click();
+  await expect(list.getByRole('button', { name: /Second page commit/ })).toBeVisible();
+
+  await page.unroute(historyRoute);
+  await page.route(historyRoute, async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: 'application/json',
+      body: JSON.stringify({
+        repositoryId: 'repo',
+        rootPath: SAMPLE_ROOT,
+        headSha,
+        commits: [],
+        nextCursor: null,
+        historyLimitReached: false,
+      }),
+    });
+  });
+  await page.goto(`${stackUrl()}/history`);
+  await expect(page.getByRole('heading', { name: 'No commits for this stack' })).toBeVisible();
+  await expect(page.getByText('No commits touching this stack were found.')).toBeVisible();
+  await expectAccessible(page);
 });
 
 test('mobile: the explorer opens as an overlay', async ({ page }) => {

From 1261298d3bcca999b7311b54cf41fc5f40b826b6 Mon Sep 17 00:00:00 2001
From: Uniskela <104075208+uniskela@users.noreply.github.com>
Date: Wed, 7 Oct 2026 11:22:58 +0000
Subject: [PATCH 2/2] style: format source e2e after main merge

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 tests/e2e/source.spec.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/tests/e2e/source.spec.ts b/tests/e2e/source.spec.ts
index eb54db2..c6ec2be 100644
--- a/tests/e2e/source.spec.ts
+++ b/tests/e2e/source.spec.ts
@@ -227,7 +227,8 @@ test('stack history lists commits, opens detail, and handles empty/load-more', a
     filesTruncated: false,
   });
 
-  const historyRoute = (url: URL) => url.pathname === historyPath || url.pathname.startsWith(`${historyPath}/`);
+  const historyRoute = (url: URL) =>
+    url.pathname === historyPath || url.pathname.startsWith(`${historyPath}/`);
 
   await page.route(historyRoute, async (route) => {
     const url = new URL(route.request().url());