feat: phase 3-5 — workflow engine, background subagents, multi-modal, cache shape, inline diff

Phase 3: Dynamic Workflow Engine
- VM sandbox (node:vm) with agent/parallel/pipeline API, Claude Code compatible
- Workflow file discovery (.boocode/workflows/*.js + ~/.boocode/workflows/*.js)
- Workflow manager with session/chat creation and inference dispatch
- Built-in catalog: deep-research, review-code, find-issues
- Resumability cache: SHA-256 hash of agent spec, in-memory Map

Phase 4: Background Subagents
- background-task.ts service: spawn/poll/cancel lifecycle
- spawn_subagent, subagent_status, subagent_result tools in ALL_TOOLS

Phase 5: Multi-modal + Cache Shape
- Multi-modal stub with type defs and hook point in payload.ts
- CacheShapeBadge component in trace viewer (colored bar + %)

apps/web/src/components/DiffSnippet.tsx

@@ -0,0 +1,88 @@
+import { useMemo, useState } from 'react';
+import { ChevronDown, ChevronRight, FileCode } from 'lucide-react';
+
+interface Props {
+  diff: string;
+}
+
+const INITIAL_LINES = 10;
+
+export function DiffSnippet({ diff }: Props) {
+  const [expanded, setExpanded] = useState(false);
+
+  const lines = useMemo(() => diff.split('\n'), [diff]);
+  const totalLines = lines.length;
+
+  // Find the first and last content lines (skip leading ---/+++ headers)
+  const firstContentIdx = lines.findIndex(
+    (l) => l.startsWith('+') || l.startsWith('-') || l.startsWith(' '),
+  );
+
+  // Count content lines that are either +, -, or context lines
+  const contentLineCount = lines.filter(
+    (l) => l.startsWith('+') || l.startsWith('-') || l.startsWith(' '),
+  ).length;
+
+  // Show first N content lines, plus header lines
+  const displayLines = useMemo(() => {
+    const sliceEnd = expanded ? lines.length : Math.min(firstContentIdx + INITIAL_LINES + contentLineCount, lines.length);
+    return lines.slice(0, sliceEnd);
+  }, [lines, expanded, firstContentIdx, contentLineCount]);
+
+  const hasMore = totalLines > displayLines.length;
+
+  if (totalLines === 0) return null;
+
+  return (
+    <div className="mt-1 rounded border border-border/40 bg-muted/20 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setExpanded((v) => !v)}
+        className="flex items-center gap-1.5 w-full px-2 py-1 text-left hover:bg-muted/30 text-[10px] font-mono text-muted-foreground"
+      >
+        <FileCode className="size-3 shrink-0" />
+        <span className="font-medium">diff</span>
+        <span className="text-muted-foreground/60">
+          — {contentLineCount} line{contentLineCount === 1 ? '' : 's'} changed
+        </span>
+        <span className="ml-auto shrink-0">
+          {expanded ? <ChevronDown className="size-3" /> : <ChevronRight className="size-3" />}
+        </span>
+      </button>
+      <div className="px-0 pb-0.5">
+        {displayLines.map((line, i) => {
+          // Determine color class based on line prefix
+          let colorClass = 'text-muted-foreground/60';
+          if (line.startsWith('+')) colorClass = 'text-emerald-600 dark:text-emerald-400';
+          else if (line.startsWith('-')) colorClass = 'text-red-500 dark:text-red-400';
+          else if (line.startsWith('@@')) colorClass = 'text-muted-foreground';
+          else if (line.startsWith('---') || line.startsWith('+++')) colorClass = 'text-muted-foreground/50';
+
+          return (
+            <div
+              key={i}
+              className={`leading-[1.3] px-2 text-[10px] font-mono whitespace-pre ${colorClass} ${
+                line.startsWith('+')
+                  ? 'bg-emerald-500/5'
+                  : line.startsWith('-')
+                    ? 'bg-red-500/5'
+                    : ''
+              }`}
+            >
+              {line}
+            </div>
+          );
+        })}
+        {hasMore && !expanded && (
+          <button
+            type="button"
+            onClick={() => setExpanded(true)}
+            className="w-full text-left px-2 py-0.5 text-[10px] font-mono text-muted-foreground/60 hover:text-muted-foreground hover:bg-muted/30"
+          >
+            Show {totalLines - displayLines.length} more lines…
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}