Generation-first flow: diff cards, live preview by default, activity rows

- AI file changes now render per-file diff cards in chat: collapsed
  rows with +/− counts, expanding to a hunked unified diff (lib/diff.ts,
  LCS with prefix/suffix trim and a coarse fallback for huge files).
- The preview pane is open by default (persisted stores migrate once)
  and auto-reloads whenever the AI or a manual save writes files, via
  a monastery:files-written event.
- @read/@search context pulls and edit-recovery chatter render as slim
  activity rows instead of chat bubbles; only messages needing the
  user keep a bubble.
- Typography floor raised: all 9/10px text is now 11px minimum.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: jherforth

packages/web-ui/src/App.tsx

@@ -484,6 +484,8 @@ export default function App() {
       markTabSaved();
       // Keep the LLM context map in sync with the saved file.
       setAllFileContents(prev => ({ ...prev, [currentFile]: editorContent }));
+      // The live preview listens for this and reloads.
+      window.dispatchEvent(new CustomEvent('monastery:files-written'));
     } catch (e) {
       console.error('Save failed:', e);
     }

packages/web-ui/src/components/ChatPane.tsx

@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect } from 'react';
 import { Send, Paperclip, X, StopCircle, Copy, Check, RotateCcw, Brain, ChevronDown, ChevronRight, Bot, Loader2, Coins, MessageSquare, Plus, Trash2, SlidersHorizontal, Settings } from 'lucide-react';
 import { Message, Attachment, SessionInfo } from '../types';
+import { DiffCard } from './DiffCard';
 import { useAppStore } from '../store/useAppStore';
 import { useSnapshots } from '../hooks/useSnapshots';
 import { useAgents } from '../hooks/useAgents';
@@ -487,6 +488,17 @@ export function ChatPane({
           </div>
         ) : (
           messages.map((message) => {
+            // Activity chatter (context pulls, recovery steps) renders as a slim inline row,
+            // not a bubble — the conversation stays about the conversation.
+            if (message.kind === 'activity') {
+              return (
+                <div key={message.id} className="flex justify-start">
+                  <div className="px-2 py-0.5 text-[11px] text-monastery-text-muted leading-relaxed">
+                    {renderInline(message.content)}
+                  </div>
+                </div>
+              );
+            }
             // Compact timestamp: time-of-day for today's messages, date + time for older ones.
             // Hidden when the timestamp is missing/unparseable (e.g. a malformed session row).
             const ts = new Date(message.timestamp);
@@ -515,7 +527,7 @@ export function ChatPane({
                 {message.role === 'user' && message.agentLabels && message.agentLabels.length > 0 && (
                   <div className="flex flex-wrap gap-1 mb-1.5">
                     {message.agentLabels.map((label, i) => (
-                      <span key={i} className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] bg-white/15 font-medium">
+                      <span key={i} className="inline-flex items-center px-1.5 py-0.5 rounded text-[11px] bg-white/15 font-medium">
                         {label}
                       </span>
                     ))}
@@ -536,7 +548,7 @@ export function ChatPane({
                 )}
                 {/* Badge showing which backend answered (Hermes agent vs local LLM) */}
                 {message.role === 'assistant' && message.via === 'hermes' && (
-                  <span className="inline-flex items-center gap-1 mb-1.5 px-1.5 py-0.5 rounded text-[10px] font-medium bg-monastery-lantern/15 text-monastery-lantern">
+                  <span className="inline-flex items-center gap-1 mb-1.5 px-1.5 py-0.5 rounded text-[11px] font-medium bg-monastery-lantern/15 text-monastery-lantern">
                     <Bot size={10} /> via Hermes
                   </span>
                 )}
@@ -547,6 +559,10 @@ export function ChatPane({
                 <div className={`text-sm ${message.role === 'system' ? 'text-monastery-text-secondary' : ''}`}>
                   {renderContent(message.content)}
                 </div>
+                {/* Per-file diff cards on AI-change feedback messages */}
+                {message.fileChanges && message.fileChanges.map(change => (
+                  <DiffCard key={change.path} change={change} />
+                ))}
                 {/* Auto-continuation status + token usage (when the endpoint reports usage). */}
                 {message.role === 'assistant' && (message.continuing || (message.autoContinueCount ?? 0) > 0 || message.usage?.total_tokens) && (
                   <div className="mt-1.5 flex items-center flex-wrap gap-x-3 gap-y-1 text-[11px] text-monastery-text-muted">
@@ -617,7 +633,7 @@ export function ChatPane({
                 {/* Timestamp footer on every message */}
                 {timeLabel && (
                   <div
-                    className={`mt-1 text-[10px] leading-none ${
+                    className={`mt-1 text-[11px] leading-none ${
                       message.role === 'user'
                         ? 'text-white/50 text-right'
                         : message.role === 'system'

packages/web-ui/src/components/CommandPalette.tsx

@@ -119,7 +119,7 @@ export function CommandPalette({ commands, files = [], onOpenFile }: CommandPale
             placeholder="Type a command or file name…"
             className="flex-1 bg-transparent text-sm text-monastery-text-primary placeholder-monastery-text-muted focus:outline-none"
           />
-          <kbd className="text-[10px] text-monastery-text-muted border border-monastery-dark-border rounded px-1">Esc</kbd>
+          <kbd className="text-[11px] text-monastery-text-muted border border-monastery-dark-border rounded px-1">Esc</kbd>
         </div>
         <div ref={listRef} className="max-h-80 overflow-y-auto py-1">
           {matches.length === 0 && (
@@ -132,7 +132,7 @@ export function CommandPalette({ commands, files = [], onOpenFile }: CommandPale
             return (
               <div key={m.kind === 'command' ? m.item.id : `file-${m.path}`}>
                 {header && (
-                  <div className="px-3 pt-2 pb-1 text-[10px] font-medium uppercase tracking-wider text-monastery-text-muted">
+                  <div className="px-3 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wider text-monastery-text-muted">
                     {header}
                   </div>
                 )}
@@ -149,7 +149,7 @@ export function CommandPalette({ commands, files = [], onOpenFile }: CommandPale
                   {m.kind === 'file' && <FileCode size={13} className="text-monastery-text-muted shrink-0" />}
                   <span className="flex-1 truncate">{m.kind === 'command' ? m.item.label : m.path}</span>
                   {m.kind === 'command' && m.item.hint && (
-                    <span className="text-[10px] text-monastery-text-muted shrink-0">{m.item.hint}</span>
+                    <span className="text-[11px] text-monastery-text-muted shrink-0">{m.item.hint}</span>
                   )}
                   {i === selected && <CornerDownLeft size={12} className="text-monastery-text-muted shrink-0" />}
                 </button>

packages/web-ui/src/components/DiffCard.tsx

@@ -0,0 +1,60 @@
+import { useState, useMemo } from 'react';
+import { ChevronDown, ChevronRight, FilePlus2, FileDiff } from 'lucide-react';
+import { FileChange } from '../types';
+import { diffLines } from '../lib/diff';
+
+/**
+ * Collapsed: one row per changed file with +added/−removed counts.
+ * Expanded: a unified line diff (computed lazily on first expand).
+ */
+export function DiffCard({ change }: { change: FileChange }) {
+  const [open, setOpen] = useState(false);
+  const isNew = change.before === '';
+
+  // Counts are cheap enough to show collapsed; the hunked render happens in the same pass.
+  const diff = useMemo(() => diffLines(change.before, change.after), [change]);
+
+  return (
+    <div className="mt-1.5 rounded-lg border border-monastery-dark-border overflow-hidden text-left">
+      <button
+        onClick={() => setOpen(o => !o)}
+        className="w-full flex items-center gap-2 px-2.5 py-1.5 bg-monastery-dark-bg hover:bg-monastery-dark-tertiary transition-colors"
+        title={open ? 'Hide diff' : 'Show diff'}
+      >
+        {open ? <ChevronDown size={12} className="text-monastery-text-muted shrink-0" /> : <ChevronRight size={12} className="text-monastery-text-muted shrink-0" />}
+        {isNew
+          ? <FilePlus2 size={12} className="text-green-400 shrink-0" />
+          : <FileDiff size={12} className="text-monastery-lantern shrink-0" />}
+        <span className="text-xs font-mono text-monastery-text-primary truncate flex-1">{change.path}</span>
+        {isNew && <span className="text-[11px] text-green-400 shrink-0">new</span>}
+        {diff.added > 0 && <span className="text-[11px] text-green-400 shrink-0">+{diff.added}</span>}
+        {diff.removed > 0 && <span className="text-[11px] text-red-400 shrink-0">−{diff.removed}</span>}
+      </button>
+      {open && (
+        <pre className="max-h-72 overflow-auto bg-monastery-dark-bg border-t border-monastery-dark-border p-0 text-[11px] leading-relaxed font-mono">
+          <code className="block min-w-max">
+            {diff.lines.map((line, i) =>
+              line.type === 'skip' ? (
+                <span key={i} className="block px-2.5 text-monastery-text-muted select-none">⋯ {line.count} unchanged lines</span>
+              ) : (
+                <span
+                  key={i}
+                  className={`block px-2.5 whitespace-pre ${
+                    line.type === 'add' ? 'bg-green-400/10 text-green-300'
+                    : line.type === 'del' ? 'bg-red-400/10 text-red-300'
+                    : 'text-monastery-text-secondary'
+                  }`}
+                >
+                  {line.type === 'add' ? '+' : line.type === 'del' ? '−' : ' '} {line.text}
+                </span>
+              )
+            )}
+            {diff.truncated && (
+              <span className="block px-2.5 py-1 text-monastery-text-muted">⋯ diff truncated (large change)</span>
+            )}
+          </code>
+        </pre>
+      )}
+    </div>
+  );
+}

packages/web-ui/src/components/GitForgeSetup.tsx

@@ -731,7 +731,7 @@ function RepoBrowser({
                         >
                           {b.name}
                           {b.is_default && (
-                            <span className="ml-1 text-[10px] opacity-70">(default)</span>
+                            <span className="ml-1 text-[11px] opacity-70">(default)</span>
                           )}
                         </button>
                       ))}

packages/web-ui/src/components/PreviewPane.tsx

@@ -19,6 +19,14 @@ export function PreviewPane({ projectId }: PreviewPaneProps) {
     }
   }, [projectId]);
 
+  // Auto-refresh whenever the AI (or a manual save) writes files — generation-first flow:
+  // the running app updates as the code lands, no manual refresh needed.
+  useEffect(() => {
+    const handler = () => setPreviewKey(k => k + 1);
+    window.addEventListener('monastery:files-written', handler);
+    return () => window.removeEventListener('monastery:files-written', handler);
+  }, []);
+
   return (
     <div className="h-full flex flex-col bg-monastery-dark-bg">
       <div className="flex items-center justify-between px-3 py-2 border-b border-monastery-dark-border bg-monastery-dark-surface">

packages/web-ui/src/components/SelfHostWizard.tsx

@@ -229,7 +229,7 @@ export function SelfHostWizard({ isOpen, onClose, onFixBuildError }: SelfHostWiz
                   className={`flex items-center gap-1.5 px-2 py-1 rounded-md text-xs transition-colors ${
                     i === step ? 'bg-monastery-pine/20 text-monastery-pine font-medium' :
                     i < step ? 'text-monastery-text-muted hover:text-monastery-text-secondary' : 'text-monastery-text-muted/50'}`}>
-                  <span className={`w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold ${
+                  <span className={`w-5 h-5 rounded-full flex items-center justify-center text-[11px] font-bold ${
                     i === step ? 'bg-monastery-pine text-white' : i < step ? 'bg-green-400/20 text-green-400' : 'bg-monastery-dark-border text-monastery-text-muted'}`}>
                     {i < step ? '✓' : i + 1}</span>
                   <span className="hidden sm:inline">{label}</span>

packages/web-ui/src/components/SourceShipDrawer.tsx

@@ -197,14 +197,14 @@ export function SourceShipDrawer({ open, onClose, onCommitComplete, onRestoreCom
                   <div key={snap.id} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-monastery-dark-surface transition-colors text-sm text-monastery-text-secondary">
                     <div className="flex-1 min-w-0">
                       <div className="text-xs truncate">{snap.name}</div>
-                      <div className="text-[10px] text-monastery-text-muted">
+                      <div className="text-[11px] text-monastery-text-muted">
                         {new Date(snap.created_at).toLocaleString()} · {snap.files_count} files
                       </div>
                     </div>
                     <button
                       onClick={() => handleRestoreSnapshot(snap.id)}
                       disabled={restoringId === snap.id}
-                      className="px-2 py-0.5 text-[10px] bg-monastery-dark-tertiary hover:bg-monastery-lantern hover:text-monastery-dark-bg rounded transition-colors disabled:opacity-50 shrink-0"
+                      className="px-2 py-0.5 text-[11px] bg-monastery-dark-tertiary hover:bg-monastery-lantern hover:text-monastery-dark-bg rounded transition-colors disabled:opacity-50 shrink-0"
                       title="Revert project to this snapshot"
                     >
                       {restoringId === snap.id ? '...' : 'Revert'}

packages/web-ui/src/components/TaskDrawer.tsx

@@ -218,12 +218,12 @@ export function TaskDrawer({ open, onClose, projectId, workflow, onRunStage, onH
               </div>
 
               {verifyOut && (
-                <pre className="text-[10px] bg-monastery-dark-surface border border-monastery-dark-border rounded-lg p-2 max-h-48 overflow-auto whitespace-pre-wrap">{verifyOut}</pre>
+                <pre className="text-[11px] bg-monastery-dark-surface border border-monastery-dark-border rounded-lg p-2 max-h-48 overflow-auto whitespace-pre-wrap">{verifyOut}</pre>
               )}
 
               {/* Exit-state chain (chain of custody) */}
               {activeTask.exit_states.length > 0 && (
-                <div className="text-[10px] text-monastery-text-muted space-y-0.5">
+                <div className="text-[11px] text-monastery-text-muted space-y-0.5">
                   {activeTask.exit_states.map((e, i) => (
                     <div key={i} className="flex items-center gap-1">
                       <span className={e.status === 'failed' ? 'text-red-400' : 'text-green-400'}>{e.status === 'failed' ? '✗' : '✓'}</span>
@@ -233,7 +233,7 @@ export function TaskDrawer({ open, onClose, projectId, workflow, onRunStage, onH
                   ))}
                 </div>
               )}
-              <button onClick={() => refresh()} className="text-[10px] underline text-monastery-text-muted hover:text-monastery-text-primary">refresh</button>
+              <button onClick={() => refresh()} className="text-[11px] underline text-monastery-text-muted hover:text-monastery-text-primary">refresh</button>
             </>
           )}
 

packages/web-ui/src/components/ui/StatusBadge.tsx

@@ -12,7 +12,7 @@ const STYLES: Record<Variant, string> = {
 /** One vocabulary for connection/health status instead of ad-hoc emoji and color spans. */
 export function StatusBadge({ variant, children }: { variant: Variant; children: ReactNode }) {
   return (
-    <span className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[10px] font-medium ${STYLES[variant]}`}>
+    <span className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] font-medium ${STYLES[variant]}`}>
       <span className="w-1.5 h-1.5 rounded-full bg-current" />
       {children}
     </span>