@mndrk/agx 2.0.22 → 2.0.24

package/cloud-runtime/standalone/app/projects/[slug]/page.tsx

@@ -302,23 +302,23 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
     return (
         <div className="h-full flex flex-col">
             {/* Unified Header: Breadcrumbs + Tabs | Search + Create */}
-            <div className="flex-shrink-0 border-b border-slate-200 bg-white/80 backdrop-blur-md px-3 sm:px-6 py-2 sm:py-0 sm:h-14 flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4">
+            <div className="flex-shrink-0 border-b border-[var(--border)] bg-[var(--card-bg)] backdrop-blur-md px-3 sm:px-6 py-2 sm:py-0 sm:h-14 flex flex-col sm:flex-row sm:items-center justify-between gap-2 sm:gap-4">
                 {/* Left: Breadcrumbs + Tabs */}
-                <div className="flex items-center gap-3 sm:gap-4 text-sm text-slate-400 flex-shrink-0">
-                    <span className="font-semibold text-slate-900 truncate">{currentProject?.name || slug}</span>
+                <div className="flex items-center gap-3 sm:gap-4 text-sm text-[var(--app-shell-soft-text)] flex-shrink-0">
+                    <span className="font-semibold text-[var(--foreground)] truncate">{currentProject?.name || slug}</span>
 
                 </div>
 
                 {/* Right: Search + Migrate + Create */}
                 <div className="flex items-center gap-3 flex-1 sm:justify-end">
                     <div className="relative w-full sm:max-w-sm group">
-                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-indigo-500 transition-colors" size={14} />
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--app-shell-soft-text)] group-focus-within:text-indigo-500 transition-colors" size={14} />
                         <input
                             type="text"
                             placeholder="Search tasks..."
                             value={searchQuery}
                             onChange={(e) => setSearchQuery(e.target.value)}
-                            className="w-full bg-slate-50 border border-slate-200 rounded-full py-1.5 pl-9 pr-4 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all"
+                            className="w-full bg-[var(--secondary)] border border-[var(--border)] rounded-full py-1.5 pl-9 pr-4 text-xs focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition-all"
                         />
                     </div>
                     <button
@@ -326,7 +326,7 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                         onClick={() => setShowKnowledgePanel((value) => !value)}
                         className={`hidden sm:inline-flex px-3 py-1.5 rounded-full text-xs font-medium border transition-colors whitespace-nowrap ${showKnowledgePanel
                             ? "bg-indigo-50 border-indigo-200 text-indigo-700"
-                            : "bg-white border-slate-200 hover:border-indigo-300 hover:text-indigo-600"
+                            : "bg-[var(--card-bg)] border-[var(--border)] hover:border-indigo-300 hover:text-indigo-600"
                             }`}
                         title="Inspect and edit project-scoped knowledge"
                     >
@@ -337,7 +337,7 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                         onClick={() => setShowRepoPanel((value) => !value)}
                         className={`hidden sm:inline-flex px-3 py-1.5 rounded-full text-xs font-medium border transition-colors whitespace-nowrap ${showRepoPanel
                             ? "bg-emerald-50 border-emerald-200 text-emerald-700"
-                            : "bg-white border-slate-200 hover:border-emerald-300 hover:text-emerald-600"
+                            : "bg-[var(--card-bg)] border-[var(--border)] hover:border-emerald-300 hover:text-emerald-600"
                             }`}
                         title="Inspect and edit repo-scoped knowledge"
                     >
@@ -349,8 +349,8 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                             onClick={handleMigrateProjectToV2}
                             disabled={isMigratingToV2 || !currentProject?.id}
                             className={`hidden sm:inline-flex px-3 py-1.5 rounded-full text-xs font-medium border transition-colors whitespace-nowrap ${isMigratingToV2
-                                ? "bg-slate-100 border-slate-200 text-slate-400 cursor-wait"
-                                : "bg-white border-slate-200 hover:border-indigo-300 hover:text-indigo-600"
+                                ? "bg-[var(--secondary)] border-[var(--border)] text-[var(--app-shell-soft-text)] cursor-wait"
+                                : "bg-[var(--card-bg)] border-[var(--border)] hover:border-indigo-300 hover:text-indigo-600"
                                 }`}
                             title="Create v2 execution graphs for tasks in this project"
                         >
@@ -361,22 +361,22 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
             </div>
 
             {migrationNotice && (
-                <p className="text-xs text-slate-400 px-6 py-1">{migrationNotice}</p>
+                <p className="text-xs text-[var(--app-shell-soft-text)] px-6 py-1">{migrationNotice}</p>
             )}
 
             {showKnowledgePanel && currentProject && (
                 <div className="px-3 sm:px-6 py-3">
-                    <div className="rounded-3xl border border-slate-200 bg-white p-4 sm:p-6 shadow-sm">
+                    <div className="rounded-3xl border border-[var(--border)] bg-[var(--card-bg)] p-4 sm:p-6 shadow-sm">
                         <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-5">
                             <div>
-                                <h2 className="text-xs font-black text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2">
+                                <h2 className="text-xs font-black text-[var(--app-shell-soft-text)] uppercase tracking-[0.2em] flex items-center gap-2">
                                     <BrainCircuit className="w-4 h-4" /> Project Knowledge
                                 </h2>
-                                <p className="mt-2 text-sm text-slate-600 max-w-2xl">
+                                <p className="mt-2 text-sm text-[var(--muted-foreground)] max-w-2xl">
                                     Edit project-scoped knowledge here. This is situational context for this project, not portable agent knowledge and not durable repo truth.
                                 </p>
                             </div>
-                            <div className="text-xs text-slate-400">
+                            <div className="text-xs text-[var(--app-shell-soft-text)]">
                                 {projectSkills.length} references, {projectMemory.length} notes
                             </div>
                         </div>
@@ -384,10 +384,10 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                         <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
                             <section className="space-y-4">
                                 <div className="flex items-center gap-2">
-                                    <BrainCircuit className="w-4 h-4 text-slate-400" />
-                                    <h3 className="text-sm font-semibold text-slate-900">Human-Authored References</h3>
+                                    <BrainCircuit className="w-4 h-4 text-[var(--app-shell-soft-text)]" />
+                                    <h3 className="text-sm font-semibold text-[var(--foreground)]">Human-Authored References</h3>
                                 </div>
-                                <p className="text-xs text-slate-500">
+                                <p className="text-xs text-[var(--muted-foreground)]">
                                     File-backed project knowledge for project-specific instructions and references.
                                 </p>
                                 <div className="grid grid-cols-1 gap-2">
@@ -396,14 +396,14 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                                         value={newKnowledgeFile}
                                         onChange={(e) => setNewKnowledgeFile(e.target.value)}
                                         placeholder="path/to/project-knowledge.md"
-                                        className="w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500"
+                                        className="w-full rounded-xl border border-[var(--border)] bg-[var(--secondary)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500"
                                     />
                                     <input
                                         type="text"
                                         value={newKnowledgeCondition}
                                         onChange={(e) => setNewKnowledgeCondition(e.target.value)}
                                         placeholder="Optional condition"
-                                        className="w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500"
+                                        className="w-full rounded-xl border border-[var(--border)] bg-[var(--secondary)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500"
                                     />
                                     <button
                                         type="button"
@@ -414,7 +414,7 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                                             setNewKnowledgeFile("");
                                             setNewKnowledgeCondition("");
                                         }}
-                                        className="inline-flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-3 py-2 text-sm font-medium text-white hover:bg-slate-800 transition-colors"
+                                        className="inline-flex items-center justify-center gap-2 rounded-xl bg-[var(--foreground)] px-3 py-2 text-sm font-medium text-[var(--card-bg)] hover:opacity-90 transition-colors"
                                     >
                                         <Plus className="w-4 h-4" />
                                         Add reference
@@ -422,22 +422,22 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                                 </div>
                                 <div className="space-y-2">
                                     {projectSkills.length === 0 ? (
-                                        <div className="rounded-2xl border border-dashed border-slate-200 px-4 py-6 text-sm text-slate-400">
+                                        <div className="rounded-2xl border border-dashed border-[var(--border)] px-4 py-6 text-sm text-[var(--app-shell-soft-text)]">
                                             No project knowledge references yet.
                                         </div>
                                     ) : (
                                         projectSkills.map((skill) => (
-                                            <div key={skill.id} className="flex items-start justify-between gap-3 rounded-2xl border border-slate-100 bg-slate-50 p-3">
+                                            <div key={skill.id} className="flex items-start justify-between gap-3 rounded-2xl border border-[var(--border)] bg-[var(--secondary)] p-3">
                                                 <div className="min-w-0">
-                                                    <div className="font-mono text-xs text-slate-700 break-all">{skill.file}</div>
+                                                    <div className="font-mono text-xs text-[var(--secondary-foreground)] break-all">{skill.file}</div>
                                                     {skill.condition ? (
-                                                        <div className="mt-1 text-xs text-slate-500">Use when: {skill.condition}</div>
+                                                        <div className="mt-1 text-xs text-[var(--muted-foreground)]">Use when: {skill.condition}</div>
                                                     ) : null}
                                                 </div>
                                                 <button
                                                     type="button"
                                                     onClick={() => void removeSkill(skill.id)}
-                                                    className="rounded-lg p-2 text-slate-400 hover:bg-white hover:text-red-600 transition-colors"
+                                                    className="rounded-lg p-2 text-[var(--app-shell-soft-text)] hover:bg-[var(--card-bg)] hover:text-red-600 transition-colors"
                                                     aria-label="Remove knowledge reference"
                                                 >
                                                     <Trash2 className="w-4 h-4" />
@@ -450,10 +450,10 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
 
                             <section className="space-y-4">
                                 <div className="flex items-center gap-2">
-                                    <BookOpen className="w-4 h-4 text-slate-400" />
-                                    <h3 className="text-sm font-semibold text-slate-900">Human-Authored Notes</h3>
+                                    <BookOpen className="w-4 h-4 text-[var(--app-shell-soft-text)]" />
+                                    <h3 className="text-sm font-semibold text-[var(--foreground)]">Human-Authored Notes</h3>
                                 </div>
-                                <p className="text-xs text-slate-500">
+                                <p className="text-xs text-[var(--muted-foreground)]">
                                     Inline project notes for current decisions, assumptions, and temporary coordination context.
                                 </p>
                                 <div className="grid grid-cols-1 gap-2">
@@ -462,7 +462,7 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                                         onChange={(e) => setNewKnowledgeNote(e.target.value)}
                                         rows={4}
                                         placeholder="Current decision, assumption, or project-specific context..."
-                                        className="w-full rounded-xl border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500"
+                                        className="w-full rounded-xl border border-[var(--border)] bg-[var(--secondary)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500"
                                     />
                                     <button
                                         type="button"
@@ -472,7 +472,7 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                                             await addMemory(content, "human-authored");
                                             setNewKnowledgeNote("");
                                         }}
-                                        className="inline-flex items-center justify-center gap-2 rounded-xl bg-slate-900 px-3 py-2 text-sm font-medium text-white hover:bg-slate-800 transition-colors"
+                                        className="inline-flex items-center justify-center gap-2 rounded-xl bg-[var(--foreground)] px-3 py-2 text-sm font-medium text-[var(--card-bg)] hover:opacity-90 transition-colors"
                                     >
                                         <Plus className="w-4 h-4" />
                                         Add note
@@ -480,22 +480,22 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                                 </div>
                                 <div className="space-y-2">
                                     {projectMemory.length === 0 ? (
-                                        <div className="rounded-2xl border border-dashed border-slate-200 px-4 py-6 text-sm text-slate-400">
+                                        <div className="rounded-2xl border border-dashed border-[var(--border)] px-4 py-6 text-sm text-[var(--app-shell-soft-text)]">
                                             No project knowledge notes yet.
                                         </div>
                                     ) : (
                                         projectMemory.map((memory) => (
-                                            <div key={memory.id} className="flex items-start justify-between gap-3 rounded-2xl border border-slate-100 bg-slate-50 p-3">
+                                            <div key={memory.id} className="flex items-start justify-between gap-3 rounded-2xl border border-[var(--border)] bg-[var(--secondary)] p-3">
                                                 <div className="min-w-0">
-                                                    <div className="text-sm text-slate-700 leading-relaxed">{memory.content}</div>
-                                                    <div className="mt-1 text-[11px] text-slate-400">
+                                                    <div className="text-sm text-[var(--secondary-foreground)] leading-relaxed">{memory.content}</div>
+                                                    <div className="mt-1 text-[11px] text-[var(--app-shell-soft-text)]">
                                                         {memory.source || "project"} • {new Date(memory.created_at).toLocaleString()}
                                                     </div>
                                                 </div>
                                                 <button
                                                     type="button"
                                                     onClick={() => void deleteMemory(memory.id)}
-                                                    className="rounded-lg p-2 text-slate-400 hover:bg-white hover:text-red-600 transition-colors"
+                                                    className="rounded-lg p-2 text-[var(--app-shell-soft-text)] hover:bg-[var(--card-bg)] hover:text-red-600 transition-colors"
                                                     aria-label="Remove knowledge note"
                                                 >
                                                     <Trash2 className="w-4 h-4" />
@@ -507,21 +507,21 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                             </section>
                         </div>
 
-                        <div className="mt-6 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4">
-                            <div className="text-xs font-black uppercase tracking-[0.18em] text-slate-400">System-Generated Project Knowledge</div>
+                        <div className="mt-6 rounded-2xl border border-[var(--border)] bg-[var(--secondary)] px-4 py-4">
+                            <div className="text-xs font-black uppercase tracking-[0.18em] text-[var(--app-shell-soft-text)]">System-Generated Project Knowledge</div>
                             {projectKnowledgeCandidates.length > 0 ? (
                                 <div className="mt-3 space-y-2">
                                     {projectKnowledgeCandidates.map((candidate) => (
-                                        <div key={candidate.id} className="rounded-xl border border-slate-200 bg-white px-3 py-3">
-                                            <div className="text-sm text-slate-700 leading-relaxed">{candidate.content}</div>
-                                            <div className="mt-2 text-[11px] text-slate-400">
+                                        <div key={candidate.id} className="rounded-xl border border-[var(--border)] bg-[var(--card-bg)] px-3 py-3">
+                                            <div className="text-sm text-[var(--secondary-foreground)] leading-relaxed">{candidate.content}</div>
+                                            <div className="mt-2 text-[11px] text-[var(--app-shell-soft-text)]">
                                                 {candidate.source ? `${candidate.source} • ` : ""}{new Date(candidate.created_at).toLocaleString()}
                                             </div>
                                         </div>
                                     ))}
                                 </div>
                             ) : (
-                                <p className="mt-2 text-sm text-slate-500">
+                                <p className="mt-2 text-sm text-[var(--muted-foreground)]">
                                     No project-scoped system-generated knowledge candidates are surfaced yet.
                                 </p>
                             )}
@@ -532,36 +532,36 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
 
             {showRepoPanel && currentProject && (
                 <div className="px-3 sm:px-6 py-3">
-                    <div className="rounded-3xl border border-slate-200 bg-white p-4 sm:p-6 shadow-sm">
+                    <div className="rounded-3xl border border-[var(--border)] bg-[var(--card-bg)] p-4 sm:p-6 shadow-sm">
                         <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3 mb-5">
                             <div>
-                                <h2 className="text-xs font-black text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2">
+                                <h2 className="text-xs font-black text-[var(--app-shell-soft-text)] uppercase tracking-[0.2em] flex items-center gap-2">
                                     <BookOpen className="w-4 h-4" /> Repo Knowledge
                                 </h2>
-                                <p className="mt-2 text-sm text-slate-600 max-w-2xl">
+                                <p className="mt-2 text-sm text-[var(--muted-foreground)] max-w-2xl">
                                     Edit repo-scoped knowledge here. Use this for durable codebase facts, conventions, and workflows that belong to a specific repository.
                                 </p>
                             </div>
-                            <div className="text-xs text-slate-400">
+                            <div className="text-xs text-[var(--app-shell-soft-text)]">
                                 {currentProject.repos.length} repos
                             </div>
                         </div>
 
                         {currentProject.repos.length === 0 ? (
-                            <div className="rounded-2xl border border-dashed border-slate-200 px-4 py-6 text-sm text-slate-400">
+                            <div className="rounded-2xl border border-dashed border-[var(--border)] px-4 py-6 text-sm text-[var(--app-shell-soft-text)]">
                                 This project has no repos attached yet.
                             </div>
                         ) : (
                             <div className="space-y-4">
                                 {currentProject.repos.map((repo) => (
-                                    <section key={repo.id} className="rounded-2xl border border-slate-100 bg-slate-50 p-4">
+                                    <section key={repo.id} className="rounded-2xl border border-[var(--border)] bg-[var(--secondary)] p-4">
                                         <div className="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-3">
                                             <div className="min-w-0">
-                                                <h3 className="text-sm font-semibold text-slate-900">{repo.name}</h3>
-                                                <div className="mt-1 text-xs text-slate-500">
+                                                <h3 className="text-sm font-semibold text-[var(--foreground)]">{repo.name}</h3>
+                                                <div className="mt-1 text-xs text-[var(--muted-foreground)]">
                                                     {repo.path || "No path set"}
                                                 </div>
-                                                <div className="mt-2 text-[10px] font-black uppercase tracking-[0.16em] text-slate-400">
+                                                <div className="mt-2 text-[10px] font-black uppercase tracking-[0.16em] text-[var(--app-shell-soft-text)]">
                                                     Human-authored repo knowledge
                                                 </div>
                                             </div>
@@ -582,7 +582,7 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                                                         }
                                                     });
                                                 }}
-                                                className="inline-flex items-center justify-center rounded-xl bg-slate-900 px-3 py-2 text-xs font-medium text-white hover:bg-slate-800 transition-colors"
+                                                className="inline-flex items-center justify-center rounded-xl bg-[var(--foreground)] px-3 py-2 text-xs font-medium text-[var(--card-bg)] hover:opacity-90 transition-colors"
                                             >
                                                 Save repo knowledge
                                             </button>
@@ -592,23 +592,23 @@ export default function ProjectBoardPage({ params }: { params: Promise<{ slug: s
                                             onChange={(e) => setRepoDrafts((prev) => ({ ...prev, [repo.id]: e.target.value }))}
                                             rows={4}
                                             placeholder="Architecture facts, repo conventions, commands, or stable gotchas..."
-                                            className="mt-3 w-full rounded-xl border border-slate-200 bg-white px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500"
+                                            className="mt-3 w-full rounded-xl border border-[var(--border)] bg-[var(--card-bg)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500/20 focus:border-emerald-500"
                                         />
-                                        <div className="mt-4 rounded-xl border border-slate-200 bg-white px-3 py-3">
-                                            <div className="text-[10px] font-black uppercase tracking-[0.16em] text-slate-400">System-Generated Repo Knowledge</div>
+                                        <div className="mt-4 rounded-xl border border-[var(--border)] bg-[var(--card-bg)] px-3 py-3">
+                                            <div className="text-[10px] font-black uppercase tracking-[0.16em] text-[var(--app-shell-soft-text)]">System-Generated Repo Knowledge</div>
                                             {(repoKnowledgeCandidates[repo.id] ?? []).length > 0 ? (
                                                 <div className="mt-3 space-y-2">
                                                     {(repoKnowledgeCandidates[repo.id] ?? []).map((candidate) => (
-                                                        <div key={candidate.id} className="rounded-lg border border-slate-100 bg-slate-50 px-3 py-2">
-                                                            <div className="text-sm text-slate-700 leading-relaxed">{candidate.content}</div>
-                                                            <div className="mt-1 text-[11px] text-slate-400">
+                                                        <div key={candidate.id} className="rounded-lg border border-[var(--border)] bg-[var(--secondary)] px-3 py-2">
+                                                            <div className="text-sm text-[var(--secondary-foreground)] leading-relaxed">{candidate.content}</div>
+                                                            <div className="mt-1 text-[11px] text-[var(--app-shell-soft-text)]">
                                                                 {new Date(candidate.created_at).toLocaleString()}
                                                             </div>
                                                         </div>
                                                     ))}
                                                 </div>
                                             ) : (
-                                                <p className="mt-2 text-sm text-slate-500">
+                                                <p className="mt-2 text-sm text-[var(--muted-foreground)]">
                                                     No repo-scoped system-generated knowledge candidates yet.
                                                 </p>
                                             )}

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

@@ -25,7 +25,7 @@ const statusIcon = (status: ServiceStatus["status"]) => {
     case "error":
       return <XCircle className="w-3 h-3 text-red-400" />;
     case "unavailable":
-      return <AlertTriangle className="w-3 h-3 text-zinc-500" />;
+      return <AlertTriangle className="w-3 h-3 text-[var(--muted-foreground)]" />;
   }
 };
 
@@ -36,7 +36,7 @@ const statusLabel = (status: ServiceStatus["status"]) => {
     case "error":
       return <span className="text-red-400 text-xs font-medium">Error</span>;
     case "unavailable":
-      return <span className="text-zinc-500 text-xs font-medium">Unavailable</span>;
+      return <span className="text-[var(--muted-foreground)] text-xs font-medium">Unavailable</span>;
   }
 };
 
@@ -74,7 +74,7 @@ export default function StatusPage() {
         {/* Header */}
         <div className="flex items-center justify-between mb-8">
           <div className="flex items-center gap-3">
-            <Link href="/" className="text-zinc-500 hover:text-zinc-300 transition-colors">
+            <Link href="/" className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors">
               <ArrowLeft className="w-4 h-4" />
             </Link>
             <h1 className="text-lg font-semibold">System Status</h1>
@@ -93,7 +93,7 @@ export default function StatusPage() {
           <button
             onClick={refresh}
             disabled={loading}
-            className="text-zinc-500 hover:text-zinc-300 transition-colors disabled:opacity-50"
+            className="text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors disabled:opacity-50"
           >
             <RefreshCw className={`w-4 h-4 ${loading ? "animate-spin" : ""}`} />
           </button>
@@ -107,10 +107,10 @@ export default function StatusPage() {
 
         {/* Core Services */}
         <section className="mb-8">
-          <h2 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-3">
+          <h2 className="text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider mb-3">
             Services
           </h2>
-          <div className="rounded-lg border border-zinc-800 divide-y divide-zinc-800">
+          <div className="rounded-lg border border-[var(--border)] divide-y divide-[var(--border)]">
             {coreServices.map((s) => (
               <div key={s.name} className="flex items-center justify-between px-4 py-3">
                 <div className="flex items-center gap-3">
@@ -119,24 +119,24 @@ export default function StatusPage() {
                 </div>
                 <div className="flex items-center gap-3">
                   {s.latencyMs !== undefined && (
-                    <span className="text-xs text-zinc-500">{s.latencyMs}ms</span>
+                    <span className="text-xs text-[var(--muted-foreground)]">{s.latencyMs}ms</span>
                   )}
                   {statusLabel(s.status)}
                 </div>
               </div>
             ))}
             {coreServices.length === 0 && !loading && (
-              <div className="px-4 py-3 text-sm text-zinc-500">No services found</div>
+              <div className="px-4 py-3 text-sm text-[var(--muted-foreground)]">No services found</div>
             )}
           </div>
         </section>
 
         {/* CLI Providers */}
         <section className="mb-8">
-          <h2 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-3">
+          <h2 className="text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider mb-3">
             CLI Providers
           </h2>
-          <div className="rounded-lg border border-zinc-800 divide-y divide-zinc-800">
+          <div className="rounded-lg border border-[var(--border)] divide-y divide-[var(--border)]">
             {cliProviders.map((s) => (
               <div key={s.name} className="flex items-center justify-between px-4 py-3">
                 <div className="flex items-center gap-3">
@@ -144,7 +144,7 @@ export default function StatusPage() {
                   <span className="text-sm font-medium">{s.name.replace("cli:", "")}</span>
                 </div>
                 <div className="flex items-center gap-3">
-                  <span className="text-xs text-zinc-500">{s.detail}</span>
+                  <span className="text-xs text-[var(--muted-foreground)]">{s.detail}</span>
                   {statusLabel(s.status)}
                 </div>
               </div>
@@ -155,28 +155,28 @@ export default function StatusPage() {
         {/* Operational Limits */}
         {data?.limits && (
           <section className="mb-8">
-            <h2 className="text-xs font-medium text-zinc-500 uppercase tracking-wider mb-3">
+            <h2 className="text-xs font-medium text-[var(--muted-foreground)] uppercase tracking-wider mb-3">
               Operational Limits
             </h2>
-            <div className="rounded-lg border border-zinc-800 divide-y divide-zinc-800">
+            <div className="rounded-lg border border-[var(--border)] divide-y divide-[var(--border)]">
               <div className="flex items-center justify-between px-4 py-3">
                 <div className="flex items-center gap-3">
-                  <Circle className="w-3 h-3 fill-zinc-500 text-zinc-500" />
+                  <Circle className="w-3 h-3 fill-[var(--muted-foreground)] text-[var(--muted-foreground)]" />
                   <span className="text-sm font-medium">Max Workers</span>
                 </div>
-                <span className="text-xs text-zinc-400 font-mono">{data.limits.maxWorkers}</span>
+                <span className="text-xs text-[var(--app-shell-soft-text)] font-mono">{data.limits.maxWorkers}</span>
               </div>
               <div className="flex items-center justify-between px-4 py-3">
                 <div className="flex items-center gap-3">
-                  <Circle className="w-3 h-3 fill-zinc-500 text-zinc-500" />
+                  <Circle className="w-3 h-3 fill-[var(--muted-foreground)] text-[var(--muted-foreground)]" />
                   <span className="text-sm font-medium">Write QPS Ceiling</span>
                 </div>
-                <span className="text-xs text-zinc-400 font-mono">{data.limits.writeQpsCeiling}</span>
+                <span className="text-xs text-[var(--app-shell-soft-text)] font-mono">{data.limits.writeQpsCeiling}</span>
               </div>
               <div className="px-4 py-2">
-                <span className="text-[11px] text-zinc-600">
+                <span className="text-[11px] text-[var(--muted-foreground)]">
                   Single-coordinator / single-writer SQLite architecture.{" "}
-                  <a href="https://github.com/anthropics/agx-cloud/blob/main/docs/LIMITS.md" target="_blank" rel="noopener" className="underline hover:text-zinc-400">
+                  <a href="https://github.com/anthropics/agx-cloud/blob/main/docs/LIMITS.md" target="_blank" rel="noopener" className="underline hover:text-[var(--app-shell-soft-text)]">
                     See LIMITS.md
                   </a>
                 </span>
@@ -187,7 +187,7 @@ export default function StatusPage() {
 
         {/* Timestamp */}
         {data && (
-          <p className="text-xs text-zinc-600 text-center">
+          <p className="text-xs text-[var(--muted-foreground)] text-center">
             Last checked: {new Date(data.timestamp).toLocaleTimeString()}
           </p>
         )}

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

@@ -64,11 +64,11 @@ export default function WelcomePage() {
   }, [router]);
 
   return (
-    <div className="h-screen w-full flex flex-col bg-[#FAFAFA]">
+    <div className="h-screen w-full flex flex-col bg-[var(--secondary)]">
       {/* Identity line */}
       <div className="text-center pt-10 pb-2 px-4">
-        <h1 className="text-[15px] font-medium text-slate-400 tracking-wide">
-          Chat with a team of AI agents
+        <h1 className="text-[15px] font-medium text-[var(--app-shell-soft-text)] tracking-wide">
+          Chat with a team of AI agents across Claude, Gemini, Codex, Ollama, and Z.AI
         </h1>
       </div>
 
@@ -81,7 +81,7 @@ export default function WelcomePage() {
           type="button"
           onClick={handleJoin}
           disabled={readyState === "needs-setup"}
-          className="inline-flex items-center gap-2 px-8 py-3.5 bg-slate-900 text-white text-[15px] font-semibold rounded-xl hover:bg-slate-800 transition-all duration-200 shadow-lg shadow-slate-900/10 hover:-translate-y-0.5 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:translate-y-0"
+          className="inline-flex items-center gap-2 px-8 py-3.5 bg-[var(--foreground)] text-[var(--background)] text-[15px] font-semibold rounded-xl hover:opacity-90 transition-all duration-200 shadow-lg shadow-[var(--foreground)]/10 hover:-translate-y-0.5 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:translate-y-0"
         >
           Join the conversation
         </button>
@@ -89,7 +89,7 @@ export default function WelcomePage() {
         {/* Status line */}
         <div className="text-[13px] font-medium">
           {readyState === "checking" && (
-            <span className="text-slate-400">Checking system...</span>
+            <span className="text-[var(--app-shell-soft-text)]">Checking system...</span>
           )}
           {readyState === "ready" && (
             <span className="text-emerald-600 flex items-center gap-1.5">
@@ -100,13 +100,13 @@ export default function WelcomePage() {
           {readyState === "needs-setup" && (
             <div className="text-center">
               <div className="text-amber-600">⚠ Setup needed (2 min)</div>
-              <div className="mt-1 text-xs text-slate-500">
+              <div className="mt-1 text-xs text-[var(--muted-foreground)]">
                 Install a provider CLI:{" "}
                 <a
                   href="https://github.com/anthropics/claude-code"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="underline hover:text-slate-700 transition-colors"
+                  className="underline hover:text-[var(--secondary-foreground)] transition-colors"
                 >
                   Claude
                 </a>{" "}
@@ -115,7 +115,7 @@ export default function WelcomePage() {
                   href="https://ai.google.dev/gemini-api/docs/cli"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="underline hover:text-slate-700 transition-colors"
+                  className="underline hover:text-[var(--secondary-foreground)] transition-colors"
                 >
                   Gemini
                 </a>{" "}
@@ -124,7 +124,7 @@ export default function WelcomePage() {
                   href="https://ollama.com"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="underline hover:text-slate-700 transition-colors"
+                  className="underline hover:text-[var(--secondary-foreground)] transition-colors"
                 >
                   Ollama
                 </a>{" "}
@@ -133,19 +133,24 @@ export default function WelcomePage() {
                   href="https://github.com/openai/codex"
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="underline hover:text-slate-700 transition-colors"
+                  className="underline hover:text-[var(--secondary-foreground)] transition-colors"
                 >
                   Codex
                 </a>
-              </div>
-              <div className="mt-1 text-[11px] text-slate-400">
-                For Z.AI, use Claude CLI with <code className="font-mono">ZAI_API_KEY</code> (or{" "}
-                <code className="font-mono">ANTHROPIC_AUTH_TOKEN</code>).
+                {" · "}
+                <a
+                  href="https://z.ai/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline hover:text-[var(--secondary-foreground)] transition-colors"
+                >
+                  Z.AI
+                </a>
               </div>
             </div>
           )}
           {readyState === "error" && (
-            <span className="text-slate-400">Could not check system status</span>
+            <span className="text-[var(--app-shell-soft-text)]">Could not check system status</span>
           )}
         </div>
       </div>

package/cloud-runtime/standalone/components/AutomationsBoard.tsx

@@ -68,7 +68,7 @@ function Toggle({
       } ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`}
     >
       <span
-        className={`absolute top-[2px] left-[2px] w-4 h-4 bg-white rounded-full transition-transform duration-200 shadow-sm ${
+        className={`absolute top-[2px] left-[2px] w-4 h-4 bg-[var(--card-bg)] rounded-full transition-transform duration-200 shadow-sm ${
           on ? "translate-x-4" : "translate-x-0"
         }`}
       />

package/cloud-runtime/standalone/components/ClientOnly.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+import { useEffect, useState, type ReactNode } from "react";
+
+export default function ClientOnly({ children }: { children: ReactNode }) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return <>{children}</>;
+}

package/cloud-runtime/standalone/components/ConsentToggle/index.tsx

@@ -30,15 +30,15 @@ export const ConsentToggle: React.FC<ConsentToggleProps> = ({
           onChange={(e) => onChange(e.target.checked)}
           disabled={disabled}
           aria-describedby={descId}
-          className="mt-0.5 h-4 w-4 shrink-0 rounded border-slate-300 text-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:opacity-50 cursor-pointer"
+          className="mt-0.5 h-4 w-4 shrink-0 rounded border-[var(--border)] text-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500 disabled:opacity-50 cursor-pointer"
         />
-        <span className="text-sm font-medium text-slate-800">
+        <span className="text-sm font-medium text-[var(--foreground)]">
           Allow home directory search
         </span>
       </label>
       <p
         id={descId}
-        className="ml-7 text-xs text-slate-500 leading-relaxed"
+        className="ml-7 text-xs text-[var(--muted-foreground)] leading-relaxed"
       >
         When enabled, file suggestions may include files from your home
         directory&nbsp;(~). Only files matching your configured workspace roots