@mndrk/agx 2.0.22 → 2.0.24

package/cloud-runtime/standalone/app/api/filesystem/browse/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from "next/server";
+import fs from "node:fs";
+import path from "node:path";
+import os from "node:os";
+
+export async function GET(req: NextRequest) {
+  const rawPath = req.nextUrl.searchParams.get("path");
+  const target = rawPath?.trim() || os.homedir();
+
+  try {
+    const resolved = path.resolve(target);
+    const stat = fs.statSync(resolved);
+    if (!stat.isDirectory()) {
+      return NextResponse.json({ error: "Not a directory" }, { status: 400 });
+    }
+
+    const entries = fs.readdirSync(resolved, { withFileTypes: true });
+    const dirs = entries
+      .filter((e) => e.isDirectory() && !e.name.startsWith("."))
+      .map((e) => ({
+        name: e.name,
+        path: path.join(resolved, e.name),
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    const parent = path.dirname(resolved);
+
+    return NextResponse.json({
+      current: resolved,
+      parent: parent !== resolved ? parent : null,
+      dirs,
+    });
+  } catch {
+    return NextResponse.json(
+      { error: "Cannot read directory", current: target, parent: null, dirs: [] },
+      { status: 400 }
+    );
+  }
+}

package/cloud-runtime/standalone/app/api/status/route.ts

@@ -65,7 +65,7 @@ export async function GET() {
     { id: "ollama", bin: "ollama", label: "Installed" },
     { id: "gemini", bin: "gemini", label: "Installed" },
     { id: "codex", bin: "codex", label: "Installed" },
-    { id: "zai", bin: "claude", label: "Via Claude CLI + z.ai API key" },
+    { id: "zai", bin: "claude", label: "Via Claude CLI + Z.AI API key" },
   ] as const;
   for (const tool of cliTools) {
     const exists = commandExists(tool.bin);

package/cloud-runtime/standalone/app/api/threads/route.ts

@@ -9,12 +9,11 @@ const DEFAULT_LIMIT = 20;
 const MAX_LIMIT = 100;
 
 const VALID_STATUSES = new Set<ThreadStatus>([
-  "thinking",
-  "converged",
-  "resolved",
+  "active",
+  "paused",
   "in-review",
+  "done",
   "archived",
-  "paused",
 ]);
 
 function parseBoundedInt(value: string | null, fallback: number): number {
@@ -156,7 +155,7 @@ export async function GET(request: NextRequest) {
       id: r.id,
       threadId: r.thread_id,
       title: titleFromContent(r.content),
-      status: r.thread_status ?? "thinking",
+      status: r.thread_status ?? "active",
       replyCount: r.reply_count,
       createdAt: r.timestamp,
       lastActivity: r.last_activity,

package/cloud-runtime/standalone/app/automations/page.tsx

@@ -25,7 +25,7 @@ export default function AutomationsPage() {
   };
 
   return (
-    <div className="flex h-screen bg-white text-zinc-900">
+    <div className="flex h-screen bg-[var(--card-bg)] text-[var(--foreground)]">
       <WorkspaceSidebar
         threads={[]}
         activeThreadId={null}

package/cloud-runtime/standalone/app/execution-graph/page.tsx

@@ -98,7 +98,7 @@ const NodeIcon = ({ status, className, size = 16 }: { status: string, className?
         case 'passed': return <CheckCircle2 size={size} className={`${className} text-green-500`} />;
         case 'running': return <RotateCcw size={size} className={`${className} text-blue-500 animate-spin`} />;
         case 'failed': return <XCircle size={size} className={`${className} text-red-500`} />;
-        case 'pending': return <Pause size={size} className={`${className} text-slate-400`} />;
+        case 'pending': return <Pause size={size} className={`${className} text-[var(--app-shell-soft-text)]`} />;
         case 'blocked': return <Construction size={size} className={`${className} text-orange-500`} />;
         default: return null;
     }
@@ -108,11 +108,11 @@ const BudgetBar = ({ label, current, total, colorClass }: { label: string, curre
     const percentage = (current / total) * 100;
     return (
         <div className="mb-4">
-            <div className="flex justify-between text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-1">
+            <div className="flex justify-between text-[10px] font-bold text-[var(--app-shell-soft-text)] uppercase tracking-wider mb-1">
                 <span>{label}</span>
                 <span>{current}/{total}</span>
             </div>
-            <div className="w-full h-2 bg-slate-100 rounded-full overflow-hidden border border-slate-200/50">
+            <div className="w-full h-2 bg-[var(--secondary)] rounded-full overflow-hidden border border-[var(--border)]/50">
                 <div
                     className={`h-full transition-all duration-700 ease-out ${colorClass}`}
                     style={{ width: `${percentage}%` }}
@@ -125,27 +125,27 @@ const BudgetBar = ({ label, current, total, colorClass }: { label: string, curre
 const TaskCard = ({ task, onClick }: { task: any, onClick: (task: any) => void }) => (
     <div
         onClick={() => onClick(task)}
-        className="bg-white border border-slate-200 rounded-xl p-4 shadow-sm hover:shadow-lg hover:border-blue-200 transition-all cursor-pointer group"
+        className="bg-[var(--card-bg)] border border-[var(--border)] rounded-xl p-4 shadow-sm hover:shadow-lg hover:border-blue-200 transition-all cursor-pointer group"
     >
         <div className="flex justify-between items-start mb-2">
-            <h4 className="font-bold text-slate-800 group-hover:text-blue-600 transition-colors">{task.title}</h4>
-            <span className={`text-[9px] px-1.5 py-0.5 rounded font-black uppercase tracking-widest ${task.mode === 'SIMPLE' ? 'bg-slate-100 text-slate-500' : 'bg-blue-100 text-blue-600'}`}>
+            <h4 className="font-bold text-[var(--foreground)] group-hover:text-blue-600 transition-colors">{task.title}</h4>
+            <span className={`text-[9px] px-1.5 py-0.5 rounded font-black uppercase tracking-widest ${task.mode === 'SIMPLE' ? 'bg-[var(--secondary)] text-[var(--muted-foreground)]' : 'bg-blue-100 text-blue-600'}`}>
                 {task.mode}
             </span>
         </div>
 
-        <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 mb-4">
+        <div className="flex items-center gap-2 text-[10px] font-bold text-[var(--app-shell-soft-text)] mb-4">
             <Network size={12} />
             <span>{task.nodesCount} nodes</span>
-            <span className="text-slate-200">•</span>
+            <span className="text-[var(--border)]">•</span>
             <span>{task.version}</span>
         </div>
 
         <div className="mb-4">
             <div className="flex justify-between items-center mb-1.5">
-                <span className="text-[10px] font-black text-slate-500">{task.progress}%</span>
+                <span className="text-[10px] font-black text-[var(--muted-foreground)]">{task.progress}%</span>
             </div>
-            <div className="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
+            <div className="w-full h-1.5 bg-[var(--secondary)] rounded-full overflow-hidden">
                 <div
                     className={`h-full transition-all duration-1000 ${task.status === 'DONE' ? 'bg-green-500' : 'bg-blue-500'}`}
                     style={{ width: `${task.progress}%` }}
@@ -162,7 +162,7 @@ const TaskCard = ({ task, onClick }: { task: any, onClick: (task: any) => void }
         )}
 
         {task.status === 'INTAKE' && (
-            <div className="flex items-center gap-2 text-[10px] font-bold text-slate-400 px-2 py-1.5 bg-slate-50 rounded-lg border border-slate-100 italic animate-pulse">
+            <div className="flex items-center gap-2 text-[10px] font-bold text-[var(--app-shell-soft-text)] px-2 py-1.5 bg-[var(--secondary)] rounded-lg border border-[var(--border)] italic animate-pulse">
                 <Terminal size={12} />
                 <span>{task.blockingReason}</span>
             </div>
@@ -178,7 +178,7 @@ const GraphNode = ({ node, isSelected, onClick }: { node: any, isSelected: boole
         done: 'border-green-500 bg-green-50 text-green-700',
         passed: 'border-green-500 bg-green-50 text-green-700',
         running: 'border-blue-500 bg-blue-50 shadow-blue-100 shadow-xl ring-4 ring-blue-50',
-        pending: 'border-slate-200 bg-white text-slate-400',
+        pending: 'border-[var(--border)] bg-[var(--card-bg)] text-[var(--app-shell-soft-text)]',
         failed: 'border-red-500 bg-red-50 text-red-700',
         blocked: 'border-orange-500 bg-orange-50 text-orange-700',
     };
@@ -259,8 +259,8 @@ export default function ExecutionGraphPage() {
     };
 
     const renderBoard = () => (
-        <div className="flex flex-col h-screen bg-slate-50 font-sans text-slate-900 overflow-hidden">
-            <header className="flex items-center justify-between px-8 py-5 bg-white border-b border-slate-200">
+        <div className="flex flex-col h-screen bg-[var(--secondary)] font-sans text-[var(--foreground)] overflow-hidden">
+            <header className="flex items-center justify-between px-8 py-5 bg-[var(--card-bg)] border-b border-[var(--border)]">
                 <div className="flex items-center gap-4">
                     <div className="w-12 h-12 bg-blue-600 rounded-xl flex items-center justify-center text-white font-black text-2xl shadow-xl shadow-blue-200 transform -rotate-3 hover:rotate-0 transition-transform cursor-pointer">
                         ag
@@ -269,11 +269,11 @@ export default function ExecutionGraphPage() {
                         <h1 className="text-2xl font-black tracking-tight flex items-center gap-2">
                             agx <span className="text-blue-600">v2</span>
                         </h1>
-                        <p className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Execution Graph Engine</p>
+                        <p className="text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-[0.2em]">Execution Graph Engine</p>
                     </div>
                 </div>
                 <div className="flex gap-4">
-                    <div className="flex items-center gap-2 px-4 py-2 bg-slate-100 rounded-lg text-slate-500 font-bold text-xs border border-slate-200">
+                    <div className="flex items-center gap-2 px-4 py-2 bg-[var(--secondary)] rounded-lg text-[var(--muted-foreground)] font-bold text-xs border border-[var(--border)]">
                         <Clock size={14} /> System Time: 21:50
                     </div>
                     <button className="flex items-center gap-2 px-5 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-bold transition-all shadow-lg shadow-blue-200 active:scale-95">
@@ -295,7 +295,7 @@ export default function ExecutionGraphPage() {
                                 <div className={`flex items-center gap-2 font-black text-sm uppercase tracking-widest text-${col.color}-500`}>
                                     {col.icon} {col.label}
                                 </div>
-                                <span className="text-[10px] font-black bg-white border border-slate-200 text-slate-400 px-3 py-1 rounded-full shadow-sm">
+                                <span className="text-[10px] font-black bg-[var(--card-bg)] border border-[var(--border)] text-[var(--app-shell-soft-text)] px-3 py-1 rounded-full shadow-sm">
                                     {tasks.filter(t => t.status === col.id).length}
                                 </span>
                             </div>
@@ -315,11 +315,11 @@ export default function ExecutionGraphPage() {
         const isProject = selectedTask.mode === 'PROJECT';
 
         return (
-            <div className="flex flex-col h-screen bg-white font-sans text-slate-900 overflow-hidden">
-                <header className="flex items-center px-6 py-4 border-b border-slate-200 bg-white z-50 shadow-sm">
+            <div className="flex flex-col h-screen bg-[var(--card-bg)] font-sans text-[var(--foreground)] overflow-hidden">
+                <header className="flex items-center px-6 py-4 border-b border-[var(--border)] bg-[var(--card-bg)] z-50 shadow-sm">
                     <button
                         onClick={closeTask}
-                        className="p-2.5 hover:bg-slate-100 rounded-xl transition-colors mr-4 text-slate-400 hover:text-slate-900"
+                        className="p-2.5 hover:bg-[var(--item-hover-bg)] rounded-xl transition-colors mr-4 text-[var(--app-shell-soft-text)] hover:text-[var(--foreground)]"
                     >
                         <ChevronLeft size={24} strokeWidth={2.5} />
                     </button>
@@ -330,23 +330,23 @@ export default function ExecutionGraphPage() {
                                 <span className="px-2 py-0.5 bg-blue-600 text-white text-[9px] font-black rounded uppercase tracking-widest">
                                     v{graphVersion}
                                 </span>
-                                <span className="px-2 py-0.5 bg-slate-100 text-slate-500 border border-slate-200 text-[9px] font-black rounded uppercase tracking-widest">
+                                <span className="px-2 py-0.5 bg-[var(--secondary)] text-[var(--muted-foreground)] border border-[var(--border)] text-[9px] font-black rounded uppercase tracking-widest">
                                     {selectedTask.progress}% Complete
                                 </span>
                             </div>
                         </div>
                         <div className="flex gap-4 mt-0.5">
-                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-tight">ID: {selectedTask.id}</p>
-                            <p className="text-[10px] text-slate-400 font-bold uppercase tracking-tight">• Phase: Implementation</p>
+                            <p className="text-[10px] text-[var(--app-shell-soft-text)] font-bold uppercase tracking-tight">ID: {selectedTask.id}</p>
+                            <p className="text-[10px] text-[var(--app-shell-soft-text)] font-bold uppercase tracking-tight">• Phase: Implementation</p>
                         </div>
                     </div>
                     <div className="flex items-center gap-3">
-                        <button className="flex items-center gap-2 px-4 py-2 text-slate-500 hover:text-slate-900 font-bold text-xs bg-slate-50 border border-slate-200 rounded-lg transition-all active:scale-95">
+                        <button className="flex items-center gap-2 px-4 py-2 text-[var(--muted-foreground)] hover:text-[var(--foreground)] font-bold text-xs bg-[var(--secondary)] border border-[var(--border)] rounded-lg transition-all active:scale-95">
                             <Settings2 size={16} /> Configure
                         </button>
                         <button
                             onClick={triggerReplan}
-                            className="flex items-center gap-2 px-4 py-2 bg-slate-900 hover:bg-black text-white rounded-lg font-bold text-xs transition-all shadow-md active:scale-95"
+                            className="flex items-center gap-2 px-4 py-2 bg-[var(--foreground)] hover:bg-black text-white rounded-lg font-bold text-xs transition-all shadow-md active:scale-95"
                         >
                             <GitBranch size={16} /> Trigger Replan
                         </button>
@@ -358,22 +358,22 @@ export default function ExecutionGraphPage() {
 
                 <div className="flex flex-1 overflow-hidden">
                     <div
-                        className="flex-1 flex flex-col relative overflow-hidden bg-slate-50"
+                        className="flex-1 flex flex-col relative overflow-hidden bg-[var(--secondary)]"
                         onClick={() => setSelectedNode(null)}
                     >
                         {/* Graph Legend Overlay */}
                         <div className="absolute top-6 left-6 z-10">
-                            <div className="bg-white/90 backdrop-blur-md border border-slate-200 p-3 rounded-xl shadow-xl">
-                                <h3 className="text-[9px] font-black text-slate-400 uppercase mb-3 px-1 tracking-[0.2em]">Visual Language</h3>
+                            <div className="bg-[var(--card-bg)] backdrop-blur-md border border-[var(--border)] p-3 rounded-xl shadow-xl">
+                                <h3 className="text-[9px] font-black text-[var(--app-shell-soft-text)] uppercase mb-3 px-1 tracking-[0.2em]">Visual Language</h3>
                                 <div className="flex flex-col gap-2.5">
-                                    <div className="flex items-center gap-3 text-[10px] font-bold text-slate-600">
-                                        <div className="w-5 h-3 rounded bg-slate-100 border border-slate-300" /> Work Node
+                                    <div className="flex items-center gap-3 text-[10px] font-bold text-[var(--muted-foreground)]">
+                                        <div className="w-5 h-3 rounded bg-[var(--secondary)] border border-[var(--border)]" /> Work Node
                                     </div>
-                                    <div className="flex items-center gap-3 text-[10px] font-bold text-slate-600">
-                                        <div className="w-4 h-4 rotate-45 bg-slate-100 border border-slate-300" /> Gate Node
+                                    <div className="flex items-center gap-3 text-[10px] font-bold text-[var(--muted-foreground)]">
+                                        <div className="w-4 h-4 rotate-45 bg-[var(--secondary)] border border-[var(--border)]" /> Gate Node
                                     </div>
-                                    <div className="flex items-center gap-3 text-[10px] font-bold text-slate-600">
-                                        <div className="w-4 h-4 rounded-full bg-slate-100 border border-slate-300" /> Control Node
+                                    <div className="flex items-center gap-3 text-[10px] font-bold text-[var(--muted-foreground)]">
+                                        <div className="w-4 h-4 rounded-full bg-[var(--secondary)] border border-[var(--border)]" /> Control Node
                                     </div>
                                 </div>
                             </div>
@@ -381,9 +381,9 @@ export default function ExecutionGraphPage() {
 
                         {/* Viewport Actions */}
                         <div className="absolute bottom-6 left-6 z-10 flex gap-2">
-                            <button className="p-2 bg-white border border-slate-200 rounded-lg shadow hover:bg-slate-50 text-slate-400"><Plus size={16} /></button>
-                            <button className="p-2 bg-white border border-slate-200 rounded-lg shadow hover:bg-slate-50 text-slate-400"><ArrowRightLeft size={16} className="rotate-90" /></button>
-                            <button className="px-3 py-2 bg-white border border-slate-200 rounded-lg shadow hover:bg-slate-50 text-[10px] font-black text-slate-500 uppercase tracking-widest">Fit to Screen</button>
+                            <button className="p-2 bg-[var(--card-bg)] border border-[var(--border)] rounded-lg shadow hover:bg-[var(--item-hover-bg)] text-[var(--app-shell-soft-text)]"><Plus size={16} /></button>
+                            <button className="p-2 bg-[var(--card-bg)] border border-[var(--border)] rounded-lg shadow hover:bg-[var(--item-hover-bg)] text-[var(--app-shell-soft-text)]"><ArrowRightLeft size={16} className="rotate-90" /></button>
+                            <button className="px-3 py-2 bg-[var(--card-bg)] border border-[var(--border)] rounded-lg shadow hover:bg-[var(--item-hover-bg)] text-[10px] font-black text-[var(--muted-foreground)] uppercase tracking-widest">Fit to Screen</button>
                         </div>
 
                         {/* The Graph Canvas */}
@@ -393,7 +393,7 @@ export default function ExecutionGraphPage() {
                                     <svg className="absolute inset-0 w-full h-full pointer-events-none" style={{ overflow: 'visible' }}>
                                         <defs>
                                             <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orientation="auto">
-                                                <polygon points="0 0, 10 3.5, 0 7" fill="#94a3b8" />
+                                                <polygon points="0 0, 10 3.5, 0 7" fill="var(--app-shell-soft-text)" />
                                             </marker>
                                         </defs>
                                         {AUTH_EDGES.map((edge, i) => {
@@ -404,7 +404,7 @@ export default function ExecutionGraphPage() {
                                                 <line
                                                     key={i}
                                                     x1={from.x} y1={from.y} x2={to.x} y2={to.y}
-                                                    stroke="#cbd5e1"
+                                                    stroke="var(--border)"
                                                     strokeWidth="2.5"
                                                     markerEnd="url(#arrowhead)"
                                                     strokeDasharray={from.type === 'work' && from.status === 'running' ? "5,5" : "none"}
@@ -424,20 +424,20 @@ export default function ExecutionGraphPage() {
                                     ))}
                                 </div>
                             ) : (
-                                <div className="flex flex-col items-center justify-center text-slate-400 bg-white p-16 rounded-[2.5rem] border-2 border-dashed border-slate-200 max-w-md text-center shadow-inner">
-                                    <div className="w-20 h-20 bg-slate-50 rounded-3xl flex items-center justify-center mb-6 border border-slate-100 shadow-sm">
+                                <div className="flex flex-col items-center justify-center text-[var(--app-shell-soft-text)] bg-[var(--card-bg)] p-16 rounded-[2.5rem] border-2 border-dashed border-[var(--border)] max-w-md text-center shadow-inner">
+                                    <div className="w-20 h-20 bg-[var(--secondary)] rounded-3xl flex items-center justify-center mb-6 border border-[var(--border)] shadow-sm">
                                         <Terminal size={40} className="opacity-30" />
                                     </div>
-                                    <h3 className="font-black text-xl text-slate-700 mb-3 tracking-tight">Linear Task Logic</h3>
-                                    <p className="text-sm text-slate-400 font-medium leading-relaxed">This task has been classified as SIMPLE. Execution runs through a predefined serial sequence without branching overhead.</p>
+                                    <h3 className="font-black text-xl text-[var(--secondary-foreground)] mb-3 tracking-tight">Linear Task Logic</h3>
+                                    <p className="text-sm text-[var(--app-shell-soft-text)] font-medium leading-relaxed">This task has been classified as SIMPLE. Execution runs through a predefined serial sequence without branching overhead.</p>
                                 </div>
                             )}
                         </div>
 
                         {/* Version Timeline */}
-                        <div className="h-28 bg-white border-t border-slate-200 px-8 py-4 flex flex-col gap-4">
+                        <div className="h-28 bg-[var(--card-bg)] border-t border-[var(--border)] px-8 py-4 flex flex-col gap-4">
                             <div className="flex items-center justify-between">
-                                <span className="text-[10px] font-black text-slate-400 uppercase tracking-[0.2em]">Execution History Timeline</span>
+                                <span className="text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-[0.2em]">Execution History Timeline</span>
                                 <div className="flex gap-4">
                                     <button className="text-[10px] font-black text-blue-600 hover:text-blue-700 uppercase tracking-widest flex items-center gap-1.5">
                                         <History size={12} /> View Full Logs
@@ -445,20 +445,20 @@ export default function ExecutionGraphPage() {
                                 </div>
                             </div>
                             <div className="flex items-center relative gap-24 h-full">
-                                <div className="absolute top-1/2 left-0 w-full h-0.5 bg-slate-100 -translate-y-1/2" />
+                                <div className="absolute top-1/2 left-0 w-full h-0.5 bg-[var(--secondary)] -translate-y-1/2" />
 
                                 {selectedTask.history.slice().reverse().map((ev: any, i: number) => (
                                     <div key={ev.id} className="relative z-10 flex flex-col items-center group cursor-pointer">
-                                        <div className={`w-3.5 h-3.5 rounded-full border-2 border-white ring-4 ring-offset-2 transition-all group-hover:scale-125 ${i === selectedTask.history.length - 1 ? 'bg-blue-600 ring-blue-100 scale-110' : 'bg-slate-300 ring-transparent opacity-60'}`} />
-                                        <span className={`text-[10px] font-black mt-2 uppercase tracking-tighter ${i === selectedTask.history.length - 1 ? 'text-blue-600' : 'text-slate-400'}`}>
+                                        <div className={`w-3.5 h-3.5 rounded-full border-2 border-[var(--card-bg)] ring-4 ring-offset-2 transition-all group-hover:scale-125 ${i === selectedTask.history.length - 1 ? 'bg-blue-600 ring-blue-100 scale-110' : 'bg-[var(--app-shell-soft-text)] ring-transparent opacity-60'}`} />
+                                        <span className={`text-[10px] font-black mt-2 uppercase tracking-tighter ${i === selectedTask.history.length - 1 ? 'text-blue-600' : 'text-[var(--app-shell-soft-text)]'}`}>
                                             {ev.from ? `${ev.from} → ${ev.to}` : ev.event}
                                         </span>
-                                        <span className="text-[8px] font-bold text-slate-300 whitespace-nowrap">{ev.time}</span>
+                                        <span className="text-[8px] font-bold text-[var(--app-shell-soft-text)] whitespace-nowrap">{ev.time}</span>
                                     </div>
                                 ))}
 
                                 <div className="ml-auto relative z-10 flex flex-col items-end">
-                                    <div className="px-4 py-1.5 bg-slate-50 border border-slate-200 rounded-lg text-[9px] font-black text-slate-400 italic tracking-widest uppercase shadow-sm">
+                                    <div className="px-4 py-1.5 bg-[var(--secondary)] border border-[var(--border)] rounded-lg text-[9px] font-black text-[var(--app-shell-soft-text)] italic tracking-widest uppercase shadow-sm">
                                         Next Checkpoint: v{graphVersion + 1}
                                     </div>
                                 </div>
@@ -467,15 +467,15 @@ export default function ExecutionGraphPage() {
                     </div>
 
                     {/* Dynamic Inspector Sidebar */}
-                    <aside className="w-90 border-l border-slate-200 p-8 flex flex-col gap-8 overflow-y-auto bg-white">
+                    <aside className="w-90 border-l border-[var(--border)] p-8 flex flex-col gap-8 overflow-y-auto bg-[var(--card-bg)]">
                         {!selectedNode ? (
                             <>
                                 <section>
-                                    <h3 className="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-6">
+                                    <h3 className="flex items-center gap-2 text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-widest mb-6">
                                         <AlertCircle size={14} /> Execution Overview
                                     </h3>
 
-                                    <div className="bg-slate-900 p-5 rounded-2xl text-white shadow-xl shadow-slate-200">
+                                    <div className="bg-[var(--foreground)] p-5 rounded-2xl text-white shadow-xl shadow-[var(--border)]">
                                         <div className="flex justify-between items-start mb-4">
                                             <div>
                                                 <p className="text-[9px] font-black text-blue-400 uppercase tracking-widest mb-1">Active Worker</p>
@@ -483,14 +483,14 @@ export default function ExecutionGraphPage() {
                                                     write-tests <div className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
                                                 </h4>
                                             </div>
-                                            <RotateCcw size={20} className="text-slate-600 animate-[spin_3s_linear_infinite]" />
+                                            <RotateCcw size={20} className="text-[var(--muted-foreground)] animate-[spin_3s_linear_infinite]" />
                                         </div>
                                         <div className="space-y-3">
-                                            <div className="flex justify-between text-[10px] font-bold text-slate-400 uppercase">
+                                            <div className="flex justify-between text-[10px] font-bold text-[var(--app-shell-soft-text)] uppercase">
                                                 <span>Current Attempt</span>
                                                 <span className="text-white">2 / 3</span>
                                             </div>
-                                            <div className="flex justify-between text-[10px] font-bold text-slate-400 uppercase">
+                                            <div className="flex justify-between text-[10px] font-bold text-[var(--app-shell-soft-text)] uppercase">
                                                 <span>Time Elapsed</span>
                                                 <span className="text-white font-mono">15m 22s</span>
                                             </div>
@@ -499,7 +499,7 @@ export default function ExecutionGraphPage() {
                                 </section>
 
                                 <section>
-                                    <h3 className="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-6">
+                                    <h3 className="flex items-center gap-2 text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-widest mb-6">
                                         <Database size={14} /> Resource Budgets
                                     </h3>
                                     {selectedTask.policy ? (
@@ -518,14 +518,14 @@ export default function ExecutionGraphPage() {
                                             />
                                         </div>
                                     ) : (
-                                        <div className="p-4 bg-slate-50 rounded-xl border border-slate-100 text-[10px] font-bold text-slate-400 uppercase text-center tracking-widest">
+                                        <div className="p-4 bg-[var(--secondary)] rounded-xl border border-[var(--border)] text-[10px] font-bold text-[var(--app-shell-soft-text)] uppercase text-center tracking-widest">
                                             Standard Policy Applied
                                         </div>
                                     )}
                                 </section>
 
                                 <section>
-                                    <h3 className="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-6">
+                                    <h3 className="flex items-center gap-2 text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-widest mb-6">
                                         <Construction size={14} /> Gate Verification
                                     </h3>
                                     <div className="space-y-5">
@@ -534,17 +534,17 @@ export default function ExecutionGraphPage() {
                                                 <Pause size={12} strokeWidth={3} />
                                             </div>
                                             <div>
-                                                <h5 className="text-xs font-black text-slate-700 uppercase tracking-tight">quality-gate</h5>
-                                                <p className="text-[10px] text-slate-400 font-medium leading-relaxed mt-1">Pending: Coverage metrics must meet 80% threshold before proceeding.</p>
+                                                <h5 className="text-xs font-black text-[var(--secondary-foreground)] uppercase tracking-tight">quality-gate</h5>
+                                                <p className="text-[10px] text-[var(--app-shell-soft-text)] font-medium leading-relaxed mt-1">Pending: Coverage metrics must meet 80% threshold before proceeding.</p>
                                             </div>
                                         </div>
                                         <div className="flex items-start gap-4 opacity-40">
-                                            <div className="mt-1 flex items-center justify-center w-6 h-6 rounded-full bg-slate-100 text-slate-400 border border-slate-200">
+                                            <div className="mt-1 flex items-center justify-center w-6 h-6 rounded-full bg-[var(--secondary)] text-[var(--app-shell-soft-text)] border border-[var(--border)]">
                                                 <Lock size={12} strokeWidth={3} />
                                             </div>
                                             <div>
-                                                <h5 className="text-xs font-black text-slate-700 uppercase tracking-tight">handoff-gate</h5>
-                                                <p className="text-[10px] text-slate-400 font-medium leading-relaxed mt-1">Blocked: Human architecture review required after quality gate pass.</p>
+                                                <h5 className="text-xs font-black text-[var(--secondary-foreground)] uppercase tracking-tight">handoff-gate</h5>
+                                                <p className="text-[10px] text-[var(--app-shell-soft-text)] font-medium leading-relaxed mt-1">Blocked: Human architecture review required after quality gate pass.</p>
                                             </div>
                                         </div>
                                     </div>
@@ -565,31 +565,31 @@ export default function ExecutionGraphPage() {
                                         {selectedNode.type === 'work' ? <Zap size={24} /> : selectedNode.type === 'gate' ? <ShieldCheck size={24} /> : <GitBranch size={24} />}
                                     </div>
                                     <div>
-                                        <p className="text-[10px] font-black text-slate-400 uppercase tracking-widest">{selectedNode.type} Node</p>
+                                        <p className="text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-widest">{selectedNode.type} Node</p>
                                         <h3 className="text-xl font-black tracking-tight">{selectedNode.title}</h3>
                                     </div>
                                 </div>
 
                                 <div className="space-y-8">
                                     <section>
-                                        <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Current Status</h4>
-                                        <div className="flex items-center gap-3 px-4 py-3 bg-slate-50 rounded-xl border border-slate-200">
+                                        <h4 className="text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-widest mb-4">Current Status</h4>
+                                        <div className="flex items-center gap-3 px-4 py-3 bg-[var(--secondary)] rounded-xl border border-[var(--border)]">
                                             <NodeIcon status={selectedNode.status} size={20} />
-                                            <span className="text-xs font-black uppercase tracking-widest text-slate-700">{selectedNode.status}</span>
+                                            <span className="text-xs font-black uppercase tracking-widest text-[var(--secondary-foreground)]">{selectedNode.status}</span>
                                         </div>
                                     </section>
 
                                     {selectedNode.type === 'work' && (
                                         <section>
-                                            <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Performance Metrics</h4>
+                                            <h4 className="text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-widest mb-4">Performance Metrics</h4>
                                             <div className="grid grid-cols-2 gap-3">
-                                                <div className="p-4 bg-white border border-slate-200 rounded-xl">
-                                                    <p className="text-[9px] font-bold text-slate-400 uppercase mb-1">Latency</p>
-                                                    <p className="text-sm font-black text-slate-800">{selectedNode.metrics?.latency || '32m 14s'}</p>
+                                                <div className="p-4 bg-[var(--card-bg)] border border-[var(--border)] rounded-xl">
+                                                    <p className="text-[9px] font-bold text-[var(--app-shell-soft-text)] uppercase mb-1">Latency</p>
+                                                    <p className="text-sm font-black text-[var(--foreground)]">{selectedNode.metrics?.latency || '32m 14s'}</p>
                                                 </div>
-                                                <div className="p-4 bg-white border border-slate-200 rounded-xl">
-                                                    <p className="text-[9px] font-bold text-slate-400 uppercase mb-1">Compute</p>
-                                                    <p className="text-sm font-black text-slate-800">{selectedNode.metrics?.tokens || '14.2k tokens'}</p>
+                                                <div className="p-4 bg-[var(--card-bg)] border border-[var(--border)] rounded-xl">
+                                                    <p className="text-[9px] font-bold text-[var(--app-shell-soft-text)] uppercase mb-1">Compute</p>
+                                                    <p className="text-sm font-black text-[var(--foreground)]">{selectedNode.metrics?.tokens || '14.2k tokens'}</p>
                                                 </div>
                                             </div>
                                         </section>
@@ -597,7 +597,7 @@ export default function ExecutionGraphPage() {
 
                                     {selectedNode.type === 'gate' && (
                                         <section>
-                                            <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Gate Requirements</h4>
+                                            <h4 className="text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-widest mb-4">Gate Requirements</h4>
                                             <div className="space-y-3">
                                                 {[
                                                     { label: 'Unit Tests', status: 'pass' },
@@ -605,8 +605,8 @@ export default function ExecutionGraphPage() {
                                                     { label: 'Type Safety', status: 'pass' },
                                                     { label: 'Coverage (>80%)', status: 'fail' }
                                                 ].map((check, i) => (
-                                                    <div key={i} className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-xl">
-                                                        <span className="text-[11px] font-bold text-slate-600">{check.label}</span>
+                                                    <div key={i} className="flex items-center justify-between p-3 bg-[var(--card-bg)] border border-[var(--border)] rounded-xl">
+                                                        <span className="text-[11px] font-bold text-[var(--muted-foreground)]">{check.label}</span>
                                                         {check.status === 'pass' ? <CheckCircle2 size={16} className="text-green-500" /> : <AlertCircle size={16} className="text-red-500" />}
                                                     </div>
                                                 ))}
@@ -621,15 +621,15 @@ export default function ExecutionGraphPage() {
                                     )}
 
                                     <section>
-                                        <h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Node Dependencies</h4>
+                                        <h4 className="text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-widest mb-4">Node Dependencies</h4>
                                         <div className="flex flex-wrap gap-2">
                                             {AUTH_EDGES.filter(e => e.to === selectedNode.id).map((e, i) => (
-                                                <div key={i} className="px-3 py-1.5 bg-slate-100 text-slate-500 text-[10px] font-bold rounded-lg border border-slate-200">
+                                                <div key={i} className="px-3 py-1.5 bg-[var(--secondary)] text-[var(--muted-foreground)] text-[10px] font-bold rounded-lg border border-[var(--border)]">
                                                     Source: {e.from}
                                                 </div>
                                             ))}
                                             {AUTH_EDGES.filter(e => e.to === selectedNode.id).length === 0 && (
-                                                <span className="text-[10px] font-bold text-slate-300 italic uppercase">Graph Start Node</span>
+                                                <span className="text-[10px] font-bold text-[var(--app-shell-soft-text)] italic uppercase">Graph Start Node</span>
                                             )}
                                         </div>
                                     </section>
@@ -637,17 +637,17 @@ export default function ExecutionGraphPage() {
                             </div>
                         )}
 
-                        <section className="mt-auto pt-8 border-t border-slate-100">
-                            <h3 className="flex items-center gap-2 text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">
+                        <section className="mt-auto pt-8 border-t border-[var(--border)]">
+                            <h3 className="flex items-center gap-2 text-[10px] font-black text-[var(--app-shell-soft-text)] uppercase tracking-widest mb-4">
                                 <Layout size={14} /> Global Policy
                             </h3>
                             <div className="flex flex-col gap-2">
                                 <div className="flex justify-between text-[10px] font-bold">
-                                    <span className="text-slate-400 uppercase">Concurrency Limit</span>
-                                    <span className="text-slate-700">3 WorkNodes</span>
+                                    <span className="text-[var(--app-shell-soft-text)] uppercase">Concurrency Limit</span>
+                                    <span className="text-[var(--secondary-foreground)]">3 WorkNodes</span>
                                 </div>
                                 <div className="flex justify-between text-[10px] font-bold">
-                                    <span className="text-slate-400 uppercase">Mode</span>
+                                    <span className="text-[var(--app-shell-soft-text)] uppercase">Mode</span>
                                     <span className="text-blue-600 uppercase">Project / DAG</span>
                                 </div>
                             </div>

package/cloud-runtime/standalone/app/global-error.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  // This must be a client component to avoid SSR issues
+  return (
+    <html lang="en">
+      <body style={{
+        margin: 0,
+        padding: 0,
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "var(--background, #f3f4f6)",
+        color: "var(--foreground, #111827)",
+        fontFamily: "system-ui, sans-serif",
+      }}>
+        <div style={{
+          textAlign: "center",
+          padding: "2rem",
+          maxWidth: "400px",
+        }}>
+          <h1 style={{ fontSize: "1.5rem", fontWeight: 600, marginBottom: "1rem" }}>
+            Something went wrong
+          </h1>
+          <p style={{ color: "var(--muted-foreground, #667085)", marginBottom: "1.5rem" }}>
+            An unexpected error occurred. Please try refreshing the page.
+          </p>
+          <button
+            onClick={() => reset()}
+            style={{
+              padding: "0.5rem 1rem",
+              borderRadius: "0.375rem",
+              border: "1px solid var(--border, rgba(15, 23, 42, 0.1))",
+              background: "var(--primary, #2563EB)",
+              color: "white",
+              fontSize: "0.875rem",
+              fontWeight: 500,
+              cursor: "pointer",
+            }}
+          >
+            Try again
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}