@aion0/forge 0.10.53 → 0.10.55

package/app/chat/page.tsx

@@ -45,6 +45,10 @@ interface ChatSession extends Session {
 
 export default function ChatPage() {
   const [sessions, setSessions] = useState<ChatSession[]>([]);
+  // Inline rename state — only one row edits at a time. editingId is the
+  // session being renamed, editingTitle is the current input value.
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingTitle, setEditingTitle] = useState('');
   const [activeId, setActiveId] = useState<string>('');
   const [messages, setMessages] = useState<Message[]>([]);
   // Background-watch progress chips (watch_id → {text, ts}). Ambient,
@@ -52,6 +56,9 @@ export default function ChatPage() {
   const [watchChips, setWatchChips] = useState<Record<string, { text: string; ts: number }>>({});
   const [input, setInput] = useState('');
   const [streaming, setStreaming] = useState(false);
+  // True from Stop-click → next iteration boundary on the backend. Drives
+  // an immediate banner so Stop feels responsive when a tool call is mid-flight.
+  const [stopRequested, setStopRequested] = useState(false);
   const [partial, setPartial] = useState('');
   const [memory, setMemory] = useState<MemoryStatus | null>(null);
   const [memoryOpen, setMemoryOpen] = useState(false);
@@ -130,6 +137,7 @@ export default function ChatPage() {
         });
       } else if (type === 'turn_done') {
         setStreaming(false);
+        setStopRequested(false);
         setPartial('');
         loadMessages(activeId);
         refreshSessions();
@@ -147,6 +155,7 @@ export default function ChatPage() {
         }
       } else if (type === 'error') {
         setStreaming(false);
+        setStopRequested(false);
         setError(String(data.error || 'unknown error'));
       }
     };
@@ -186,10 +195,10 @@ export default function ChatPage() {
   }, [input]);
 
   // ─── Actions ──────────────────────────────────────────────
-  async function send() {
-    const text = input.trim();
+  async function send(textArg?: string) {
+    const text = (textArg ?? input).trim();
     if (!text || !activeId || streaming) return;
-    setInput('');
+    if (textArg === undefined) setInput('');
     setStreaming(true);
     setError('');
     setPartial('');
@@ -209,12 +218,72 @@ export default function ChatPage() {
     }
   }
 
+  // Stop the in-flight tool-call loop. The backend breaks at the next
+  // iteration boundary and persists a "⏹ Stopped" message; the turn_done
+  // SSE event flips `streaming` off here.
+  async function stop() {
+    if (!activeId) return;
+    // Flip the banner instantly so the user sees feedback. The backend
+    // returns immediately but the loop only checks the flag between
+    // iterations, so the actual "⏹ Stopped" sentinel can lag a long-
+    // running tool call by tens of seconds. turn_done clears this.
+    setStopRequested(true);
+    try {
+      await fetch(`${PROXY}/sessions/${activeId}/abort`, { method: 'POST' });
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }
+
+  // Inject supplementary info into the RUNNING turn — the agent picks it
+  // up on its next iteration. If the turn just ended (409), fall back to
+  // sending it as a normal new message so the text is never lost.
+  async function addNote() {
+    const text = input.trim();
+    if (!text || !activeId) return;
+    setInput('');
+    // Optimistic display: the server only persists the note on the next
+    // iteration (after the current tool call finishes), which can take
+    // tens of seconds. Show the user's message in the thread NOW so
+    // sending feels responsive — turn_done reloads from DB and the real
+    // persisted version replaces this entry.
+    const optimisticId = `optimistic-note-${Date.now()}`;
+    setMessages((ms) => [...ms, {
+      id: optimisticId,
+      session_id: activeId,
+      role: 'user',
+      blocks: [{ type: 'text', text } as ContentBlock],
+      ts: Date.now(),
+    } as Message]);
+    try {
+      const r = await fetch(`${PROXY}/sessions/${activeId}/note`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ text }),
+      });
+      if (r.ok) return; // the loop surfaces the note as a user message
+      if (r.status === 409) { await send(text); return; } // turn ended → normal send
+      const j = await r.json().catch(() => ({}));
+      throw new Error(j.error || `HTTP ${r.status}`);
+    } catch (e) {
+      // Roll back the optimistic on failure
+      setMessages((ms) => ms.filter((m) => m.id !== optimisticId));
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }
+
   async function newSession() {
+    // Optional title via prompt — leave blank for the default
+    // "Temp · <id>" label. The user can also rename later by clicking
+    // the pencil icon on the sidebar row (or double-clicking the row).
+    const raw = window.prompt('Name this conversation (leave blank for default):', '');
+    if (raw === null) return; // user hit Cancel
+    const title = raw.trim() || undefined;
     try {
       const r = await fetch(`${PROXY}/sessions`, {
         method: 'POST',
         headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ meta: { kind: 'temp' } }),
+        body: JSON.stringify({ meta: { kind: 'temp' }, ...(title ? { title } : {}) }),
       });
       const j = (await r.json()) as { session?: ChatSession };
       if (j?.session?.id) {
@@ -226,6 +295,31 @@ export default function ChatPage() {
     }
   }
 
+  // PATCH /sessions/:id with a new title. Used by both the sidebar's
+  // pencil-icon inline editor and the double-click handler. Empty input
+  // is a no-op (cancel) — the backend's updateSession uses ?? semantics
+  // so passing null doesn't clear, and the "Main conversation" / "Temp
+  // · xxx" defaults are computed from null title at render time anyway.
+  async function renameSession(id: string, title: string) {
+    const clean = title.trim();
+    if (!clean) return;
+    try {
+      const r = await fetch(`${PROXY}/sessions/${id}`, {
+        method: 'PATCH',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ title: clean }),
+      });
+      if (!r.ok) {
+        const j = await r.json().catch(() => ({}));
+        setError(j.error || `rename failed (HTTP ${r.status})`);
+        return;
+      }
+      await refreshSessions();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }
+
   async function clearMessages() {
     if (!activeId) return;
     if (!confirm('Clear all messages in this session?')) return;
@@ -282,32 +376,76 @@ export default function ChatPage() {
           {sessions.map((s) => {
             const isMain = s.meta?.kind === 'main';
             const isActive = s.id === activeId;
+            const isEditing = editingId === s.id;
+            const displayTitle = s.title || (isMain ? 'Main conversation' : `Temp · ${s.id.slice(0, 6)}`);
+            const beginEdit = () => {
+              setEditingId(s.id);
+              setEditingTitle(s.title || '');
+            };
+            const commitEdit = async () => {
+              const next = editingTitle.trim();
+              setEditingId(null);
+              if (next && next !== (s.title || '')) {
+                await renameSession(s.id, next);
+              }
+            };
+            const cancelEdit = () => {
+              setEditingId(null);
+              setEditingTitle('');
+            };
             return (
               <div
                 key={s.id}
-                className={`group flex items-center gap-2 px-3 py-2 rounded-md text-sm cursor-pointer mb-1 transition-colors ${
+                className={`group flex items-center gap-2 px-3 py-2 rounded-md text-sm mb-1 transition-colors ${
                   isActive
                     ? 'bg-[var(--accent)]/15 text-[var(--text-primary)]'
                     : 'text-[var(--text-secondary)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--text-primary)]'
-                }`}
-                onClick={() => setActiveId(s.id)}
+                } ${isEditing ? '' : 'cursor-pointer'}`}
+                onClick={() => { if (!isEditing) setActiveId(s.id); }}
+                onDoubleClick={(e) => { e.stopPropagation(); if (!isEditing) beginEdit(); }}
               >
                 <span
                   className={`inline-block w-2 h-2 rounded-full shrink-0 ${
                     isMain ? 'bg-[var(--accent)]' : 'bg-[var(--text-secondary)]/40'
                   }`}
                 />
-                <div className="truncate flex-1">
-                  {s.title || (isMain ? 'Main conversation' : `Temp · ${s.id.slice(0, 6)}`)}
-                </div>
-                {!isMain && (
-                  <button
-                    onClick={(e) => { e.stopPropagation(); deleteSession(s.id); }}
-                    className="opacity-0 group-hover:opacity-100 text-[var(--text-secondary)] hover:text-red-400 text-base leading-none px-1"
-                    title="Delete session"
-                  >
-                    ×
-                  </button>
+                {isEditing ? (
+                  <input
+                    autoFocus
+                    type="text"
+                    value={editingTitle}
+                    onChange={(e) => setEditingTitle(e.target.value)}
+                    onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') { e.preventDefault(); commitEdit(); }
+                      else if (e.key === 'Escape') { e.preventDefault(); cancelEdit(); }
+                    }}
+                    onBlur={commitEdit}
+                    placeholder={displayTitle}
+                    className="flex-1 min-w-0 bg-[var(--bg-primary)] border border-[var(--accent)] rounded px-1.5 py-0.5 text-sm text-[var(--text-primary)] focus:outline-none"
+                  />
+                ) : (
+                  <>
+                    <div className="truncate flex-1" title="Double-click to rename">
+                      {displayTitle}
+                    </div>
+                    <button
+                      onClick={(e) => { e.stopPropagation(); beginEdit(); }}
+                      className="opacity-0 group-hover:opacity-100 text-[var(--text-secondary)] hover:text-[var(--accent)] text-xs leading-none px-1"
+                      title="Rename"
+                    >
+                      ✎
+                    </button>
+                    {!isMain && (
+                      <button
+                        onClick={(e) => { e.stopPropagation(); deleteSession(s.id); }}
+                        className="opacity-0 group-hover:opacity-100 text-[var(--text-secondary)] hover:text-red-400 text-base leading-none px-1"
+                        title="Delete session"
+                      >
+                        ×
+                      </button>
+                    )}
+                  </>
                 )}
               </div>
             );
@@ -420,9 +558,15 @@ export default function ChatPage() {
           </div>
         )}
 
+        {stopRequested && (
+          <div className="border-t border-amber-500/40 bg-amber-500/10 text-amber-300 px-6 py-2 text-xs">
+            ⏳ Stop requested — waiting for the current step to finish, then aborting…
+          </div>
+        )}
+
         <form
           className="border-t border-[var(--border)] px-6 py-4"
-          onSubmit={(e) => { e.preventDefault(); send(); }}
+          onSubmit={(e) => { e.preventDefault(); if (streaming) addNote(); else send(); }}
         >
           <div className="max-w-3xl mx-auto flex items-end gap-3">
             <textarea
@@ -435,23 +579,50 @@ export default function ChatPage() {
                 // isComposing covers modern browsers; keyCode===229 is the
                 // legacy fallback some IMEs still emit.
                 if (e.nativeEvent.isComposing || e.keyCode === 229) return;
-                if (e.key === 'Enter' && !e.shiftKey) {
-                  e.preventDefault();
-                  send();
-                }
+                if (e.key !== 'Enter') return;
+                // Shift+Enter → newline (let the textarea handle it; never Send/Stop).
+                if (e.shiftKey) return;
+                // Plain Enter → Send. During streaming this routes the text
+                // into the running turn (note). Either way, Enter NEVER stops.
+                e.preventDefault();
+                if (streaming) addNote(); else send();
               }}
-              disabled={!activeId || streaming}
-              placeholder={activeId ? 'Message…  (Enter to send · Shift+Enter for newline)' : 'Pick or create a session'}
+              disabled={!activeId}
+              placeholder={
+                !activeId
+                  ? 'Pick or create a session'
+                  : streaming
+                    ? 'Message…  (lands on the running task’s next step)'
+                    : 'Message…  (Enter to send · Shift+Enter for newline)'
+              }
               rows={1}
               style={{ fontFamily: SANS_FONT }}
               className="flex-1 resize-none bg-[var(--bg-tertiary)] border border-[var(--border)] rounded-lg px-4 py-3 text-sm text-[var(--text-primary)] leading-relaxed focus:outline-none focus:border-[var(--accent)] focus:ring-1 focus:ring-[var(--accent)]/40 disabled:opacity-50"
             />
+            {/* Stop sits next to Send (mirrors the extension layout).
+                While a turn is running, Send routes the text into THAT
+                turn (a normal POST would spawn a second concurrent loop
+                on the same session). Stop is type="button" so Enter on
+                the textarea NEVER triggers it — only an explicit click
+                here aborts. */}
+            {streaming && (
+              <button
+                type="button"
+                onClick={stop}
+                disabled={!activeId || stopRequested}
+                title={stopRequested ? 'Stop pending — waiting for current step to finish' : 'Stop the running turn'}
+                className="px-4 py-2.5 text-sm font-medium border border-red-500/60 text-red-400 rounded-lg hover:bg-red-500/10 transition-colors disabled:opacity-40 disabled:cursor-not-allowed"
+              >
+                ■ Stop
+              </button>
+            )}
             <button
               type="submit"
-              disabled={!input.trim() || !activeId || streaming}
+              disabled={!input.trim() || !activeId}
+              title={streaming ? 'Send — the running task reads it on its next step' : undefined}
               className="px-4 py-2.5 text-sm font-medium bg-[var(--accent)] text-white rounded-lg hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed transition-opacity"
             >
-              {streaming ? '…' : 'Send'}
+              Send
             </button>
           </div>
         </form>
@@ -472,23 +643,52 @@ function fmtTs(ts?: number): string {
   return sameDay ? time : `${d.toLocaleDateString([], { month: 'short', day: 'numeric' })} ${time}`;
 }
 
-function RoleBlock({ role, ts, children }: { role: 'user' | 'assistant'; ts?: number; children: React.ReactNode }) {
+function RoleBlock({ role, ts, pending, children }: { role: 'user' | 'assistant'; ts?: number; pending?: boolean; children: React.ReactNode }) {
   const isUser = role === 'user';
+  // User → right-aligned with bubble; assistant → left-aligned (avatar +
+  // expanded content for markdown / tool cards). Pending optimistic notes
+  // get a pink wash that clears the moment the server's persisted version
+  // replaces them on the loop's next iteration.
+  if (isUser) {
+    return (
+      <div className="flex justify-end">
+        <div className="max-w-[80%]">
+          <div className="flex items-baseline gap-2 mb-1 justify-end">
+            {pending ? (
+              <span className="text-[10px] uppercase tracking-wide" style={{ color: '#f472b6' }}>pending</span>
+            ) : null}
+            {ts ? <span className="text-[10px] text-[var(--text-secondary)] opacity-60">{fmtTs(ts)}</span> : null}
+            <span className="text-[11px] uppercase tracking-wide text-[var(--text-secondary)]">you</span>
+          </div>
+          <div
+            className="space-y-2 rounded-lg px-3 py-2 border"
+            style={
+              // Pending: subtle pink tint over the dark theme bg + a
+              // visible pink border. Text stays var(--text-primary) so
+              // markdown rendering is readable. The tint vanishes once
+              // the server-persisted message replaces the optimistic.
+              pending
+                ? { background: 'rgba(236, 72, 153, 0.10)', borderColor: 'rgba(236, 72, 153, 0.55)' }
+                : { background: 'var(--bg-tertiary)', borderColor: 'var(--border)' }
+            }
+          >
+            {children}
+          </div>
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="flex gap-4">
       <div
-        className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold ${
-          isUser
-            ? 'bg-[var(--accent)] text-white'
-            : 'bg-[var(--bg-tertiary)] text-[var(--text-secondary)] border border-[var(--border)]'
-        }`}
+        className="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold bg-[var(--bg-tertiary)] text-[var(--text-secondary)] border border-[var(--border)]"
         aria-hidden
       >
-        {isUser ? 'U' : 'AI'}
+        AI
       </div>
       <div className="flex-1 min-w-0">
         <div className="flex items-baseline gap-2 mb-1">
-          <span className="text-[11px] uppercase tracking-wide text-[var(--text-secondary)]">{role}</span>
+          <span className="text-[11px] uppercase tracking-wide text-[var(--text-secondary)]">assistant</span>
           {ts ? <span className="text-[10px] text-[var(--text-secondary)] opacity-60">{fmtTs(ts)}</span> : null}
         </div>
         <div className="space-y-2">{children}</div>
@@ -501,8 +701,9 @@ function RoleBlock({ role, ts, children }: { role: 'user' | 'assistant'; ts?: nu
 // memo every prior message re-runs its markdown parse → typing in a long
 // chat became visibly laggy.
 const MessageView = memo(function MessageView({ m }: { m: Message }) {
+  const pending = typeof m.id === 'string' && m.id.startsWith('optimistic-note-');
   return (
-    <RoleBlock role={m.role} ts={m.ts}>
+    <RoleBlock role={m.role} ts={m.ts} pending={pending}>
       {m.blocks.map((b, i) => (
         <BlockView key={i} b={b} role={m.role} />
       ))}

package/app/files/[...path]/page.tsx

@@ -0,0 +1,22 @@
+/**
+ * /files/<path...> — in-browser viewer for any file under <dataDir>/.
+ *
+ * Backed by /api/files (dataDir-wide, sensitive blacklist applied).
+ * Reuses ScratchViewer with apiBase overridden — same markdown render
+ * + image/pdf inline + download button, just rooted at <dataDir>/.
+ *
+ * Pairs with the chat link-pattern that turns `tmp/foo.md` into
+ * `/files/tmp/foo.md` so users click straight through.
+ */
+
+import ScratchViewer from '@/components/ScratchViewer';
+
+export default async function FilesPage({
+  params,
+}: {
+  params: Promise<{ path: string[] }>;
+}) {
+  const { path } = await params;
+  const joined = (path || []).map(encodeURIComponent).join('/');
+  return <ScratchViewer path={joined} apiBase="/api/files" topLabel="file" />;
+}

package/components/Dashboard.tsx

@@ -176,16 +176,18 @@ export default function Dashboard({ user }: { user: any }) {
   const [expandedNotif, setExpandedNotif] = useState<string | null>(null);
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [theme, setTheme] = useState<'dark' | 'light'>('dark');
-  const [cacheInfo, setCacheInfo] = useState<{ entries: { name: string; bytes: number }[]; total_bytes: number } | null>(null);
+  const [cacheInfo, setCacheInfo] = useState<{ entries: { name: string; bytes: number; category?: 'cloned-projects' | 'tmp' | 'scratch' }[]; total_bytes: number } | null>(null);
   const [showCacheMenu, setShowCacheMenu] = useState(false);
   const [cacheBusy, setCacheBusy] = useState(false);
   const [displayName, setDisplayName] = useState(user?.name || 'Forge');
   const [profileDept, setProfileDept] = useState('');
   const terminalRef = useRef<WebTerminalHandle>(null);
 
-  // Cache (forge-managed cloned-projects) load + clear helpers. Used by the
-  // user-menu "Cache" entry to show on-disk size and let the user wipe it
-  // without dropping to the terminal. Lazy — only fetched on menu open.
+  // Cache load + clear helpers. Two categories live under the same
+  // endpoint: `cloned-projects` (pipeline git clones) and `tmp` (chat's
+  // save_tmp_file output). Entries arrive flat with a `category` field;
+  // the UI groups them visually and offers per-category Clear in
+  // addition to the catch-all Clear All.
   const loadCacheInfo = async () => {
     try {
       const r = await fetch('/api/cache');
@@ -201,13 +203,32 @@ export default function Dashboard({ user }: { user: any }) {
     if (n < 1024 ** 3) return `${(n / 1024 ** 2).toFixed(1)} MB`;
     return `${(n / 1024 ** 3).toFixed(2)} GB`;
   };
-  const clearCache = async (name?: string) => {
+  // name + category together identify an entry (cloned-projects/<name>
+  // and tmp/<name> are distinct files). Omit both → wipe all. Omit name
+  // but pass category → wipe that whole category.
+  const clearCache = async (name?: string, category?: 'cloned-projects' | 'tmp' | 'scratch') => {
     if (cacheBusy) return;
-    const ok = confirm(name ? `Delete cached repo "${name}"?` : 'Delete ALL cached repos? They will be re-cloned on next pipeline run.');
-    if (!ok) return;
+    const labelFor = (cat?: string) =>
+      cat === 'tmp' ? 'tmp file'
+      : cat === 'scratch' ? 'legacy scratch file'
+      : cat === 'cloned-projects' ? 'cached repo'
+      : 'cache entry';
+    const prompt = name
+      ? `Delete ${labelFor(category)} "${name}"?`
+      : category === 'tmp'
+        ? 'Delete ALL chat-saved tmp/ files? They are ephemeral by design.'
+        : category === 'scratch'
+          ? 'Delete ALL legacy files at scratch/ root? (Task workdirs and CLAUDE.md marker are NOT touched.)'
+          : category === 'cloned-projects'
+            ? 'Delete ALL cached repos? They will be re-cloned on next pipeline run.'
+            : 'Delete ALL cached files (cloned repos + tmp/ + scratch/ root)? Cloned repos will be re-cloned; tmp/ and scratch/ files are gone for good.';
+    if (!confirm(prompt)) return;
     setCacheBusy(true);
     try {
-      const q = name ? `?name=${encodeURIComponent(name)}` : '';
+      const params = new URLSearchParams();
+      if (name) params.set('name', name);
+      if (category) params.set('category', category);
+      const q = params.toString() ? `?${params}` : '';
       const r = await fetch(`/api/cache${q}`, { method: 'DELETE' });
       const data = await r.json();
       if (data?.ok) {
@@ -783,10 +804,10 @@ export default function Dashboard({ user }: { user: any }) {
                       )}
                     </div>
                   )}
-                  {/* Cache — show on-disk size of auto-cloned gitlab repos
-                      under <dataDir>/cloned-projects/, with a click-to-clear
-                      sub-menu listing each entry. Same backend as
-                      `forge clean cache` CLI. */}
+                  {/* Cache — two on-disk pools: cloned-projects (auto-cloned
+                      gitlab repos for pipelines) + tmp (chat's save_tmp_file
+                      output). Groups visually + offers per-category Clear
+                      plus Clear All. Same backend as `forge clean cache`. */}
                   <button
                     onClick={() => setShowCacheMenu(v => !v)}
                     className="w-full text-left text-[11px] px-3 py-1.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2"
@@ -806,18 +827,49 @@ export default function Dashboard({ user }: { user: any }) {
                       {cacheInfo && cacheInfo.entries.length === 0 && (
                         <div className="text-[10px] text-[var(--text-secondary)] py-1 px-2">Empty.</div>
                       )}
-                      {cacheInfo?.entries.map((e) => (
-                        <button
-                          key={e.name}
-                          disabled={cacheBusy}
-                          onClick={() => clearCache(e.name)}
-                          className="w-full text-left px-2 py-1 text-[10px] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2 disabled:opacity-50"
-                          title={`Click to delete ${e.name}`}
-                        >
-                          <span className="flex-1 truncate">{e.name}</span>
-                          <span className="text-[9px] text-[var(--text-secondary)] flex-shrink-0">{humanBytes(e.bytes)}</span>
-                        </button>
-                      ))}
+                      {/* Render entries grouped by category (cloned-projects
+                          then tmp) with a category header row + per-category
+                          "Clear category" link. Entries without an explicit
+                          category (older API responses) fall under cloned-
+                          projects for back-compat. */}
+                      {cacheInfo && cacheInfo.entries.length > 0 && (() => {
+                        const groups: { key: 'cloned-projects' | 'tmp' | 'scratch'; label: string; entries: typeof cacheInfo.entries }[] = [
+                          { key: 'cloned-projects', label: 'Cloned repos', entries: cacheInfo.entries.filter(e => (e.category || 'cloned-projects') === 'cloned-projects') },
+                          { key: 'tmp', label: 'Chat tmp/', entries: cacheInfo.entries.filter(e => e.category === 'tmp') },
+                          { key: 'scratch', label: 'Legacy scratch/', entries: cacheInfo.entries.filter(e => e.category === 'scratch') },
+                        ];
+                        return groups.filter(g => g.entries.length > 0).map((g) => {
+                          const groupBytes = g.entries.reduce((s, e) => s + e.bytes, 0);
+                          return (
+                            <div key={g.key} className="mb-1">
+                              <div className="flex items-center gap-2 px-2 py-0.5 text-[9px] uppercase tracking-wide text-[var(--text-secondary)] border-b border-[var(--border)]">
+                                <span className="flex-1">{g.label}</span>
+                                <span>{humanBytes(groupBytes)}</span>
+                                <button
+                                  disabled={cacheBusy}
+                                  onClick={() => clearCache(undefined, g.key)}
+                                  className="text-[9px] text-red-400 hover:underline disabled:opacity-50"
+                                  title={`Clear all ${g.label.toLowerCase()}`}
+                                >
+                                  clear
+                                </button>
+                              </div>
+                              {g.entries.map((e) => (
+                                <button
+                                  key={`${g.key}/${e.name}`}
+                                  disabled={cacheBusy}
+                                  onClick={() => clearCache(e.name, g.key)}
+                                  className="w-full text-left px-2 py-1 text-[10px] text-[var(--text-primary)] hover:bg-[var(--bg-tertiary)] flex items-center gap-2 disabled:opacity-50"
+                                  title={`Click to delete ${g.key}/${e.name}`}
+                                >
+                                  <span className="flex-1 truncate">{e.name}</span>
+                                  <span className="text-[9px] text-[var(--text-secondary)] flex-shrink-0">{humanBytes(e.bytes)}</span>
+                                </button>
+                              ))}
+                            </div>
+                          );
+                        });
+                      })()}
                       {cacheInfo && cacheInfo.entries.length > 0 && (
                         <button
                           disabled={cacheBusy}

package/components/ScratchViewer.tsx

@@ -16,7 +16,18 @@ function extOf(p: string): string {
   return m ? m[1].toLowerCase() : '';
 }
 
-export default function ScratchViewer({ path }: { path: string }) {
+export default function ScratchViewer({
+  path,
+  apiBase = '/api/scratch',
+  topLabel = 'scratch',
+}: {
+  path: string;
+  /** API route prefix. /api/scratch resolves under <dataDir>/scratch/;
+   *  /api/files resolves dataDir-wide. Default scratch for back-compat. */
+  apiBase?: string;
+  /** Tiny header tag shown next to the file path (e.g. "scratch", "file"). */
+  topLabel?: string;
+}) {
   const decoded = (() => {
     try {
       return decodeURIComponent(path);
@@ -25,7 +36,7 @@ export default function ScratchViewer({ path }: { path: string }) {
     }
   })();
   const ext = extOf(decoded);
-  const rawUrl = `/api/scratch/${path}`;
+  const rawUrl = `${apiBase}/${path}`;
   const downloadUrl = `${rawUrl}?download=1`;
 
   const [text, setText] = useState<string | null>(null);
@@ -67,7 +78,7 @@ export default function ScratchViewer({ path }: { path: string }) {
     <div className="min-h-screen bg-[var(--bg-primary)] text-[var(--text-primary)]">
       <header className="sticky top-0 z-10 flex items-center justify-between gap-2 px-4 py-2 border-b border-[var(--border)] bg-[var(--bg-secondary)]">
         <div className="flex items-center gap-2 min-w-0">
-          <span className="text-[10px] uppercase tracking-wide text-[var(--text-secondary)]">scratch</span>
+          <span className="text-[10px] uppercase tracking-wide text-[var(--text-secondary)]">{topLabel}</span>
           <span className="text-xs font-mono truncate" title={decoded}>
             {decoded}
           </span>