@mndrk/agx 2.0.22 → 2.0.24

package/cloud-runtime/standalone/app/agents/[id]/page.tsx

@@ -163,16 +163,16 @@ export default function AgentProfilePage() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-[#F8FAFC] flex items-center justify-center">
-        <div className="animate-pulse text-slate-400 text-sm">Loading agent…</div>
+      <div className="min-h-screen bg-[var(--background)] flex items-center justify-center">
+        <div className="animate-pulse text-[var(--muted-foreground)] text-sm">Loading agent…</div>
       </div>
     );
   }
 
   if (!agent) {
     return (
-      <div className="min-h-screen bg-[#F8FAFC] flex flex-col items-center justify-center gap-4">
-        <p className="text-slate-500">Agent not found</p>
+      <div className="min-h-screen bg-[var(--background)] flex flex-col items-center justify-center gap-4">
+        <p className="text-[var(--muted-foreground)]">Agent not found</p>
         <Link href="/agents" className="text-sm text-blue-600 hover:underline">
           Back to agents
         </Link>
@@ -247,24 +247,24 @@ export default function AgentProfilePage() {
   ];
 
   return (
-    <div className="min-h-screen bg-[#F8FAFC] text-slate-900 font-sans selection:bg-amber-100">
+    <div className="min-h-screen bg-[var(--background)] text-[var(--foreground)] font-sans selection:bg-amber-100/30">
       {/* Top Nav */}
-      <nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-slate-200 px-4 md:px-8 h-14 flex items-center justify-between">
+      <nav className="sticky top-0 z-50 bg-[var(--card-bg)]/80 backdrop-blur-md border-b border-[var(--border)] px-4 md:px-8 h-14 flex items-center justify-between">
         <div className="flex items-center gap-4">
-          <Link href="/agents" className="p-2 hover:bg-slate-100 rounded-lg transition-colors group">
-            <ArrowLeft className="w-5 h-5 text-slate-500 group-hover:text-slate-900" />
+          <Link href="/agents" className="p-2 hover:bg-[var(--muted)] rounded-lg transition-colors group">
+            <ArrowLeft className="w-5 h-5 text-[var(--muted-foreground)] group-hover:text-[var(--foreground)]" />
           </Link>
-          <div className="h-4 w-[1px] bg-slate-200 hidden md:block" />
-          <div className="hidden md:flex items-center gap-2 text-sm font-medium text-slate-500">
+          <div className="h-4 w-[1px] bg-[var(--muted)] hidden md:block" />
+          <div className="hidden md:flex items-center gap-2 text-sm font-medium text-[var(--muted-foreground)]">
             <Users className="w-4 h-4" />
-            <Link href="/agents" className="hover:text-slate-700 transition-colors">Agents</Link>
-            <ChevronRight className="w-4 h-4 text-slate-300" />
-            <span className="text-slate-900 font-semibold">{agent.name}</span>
+            <Link href="/agents" className="hover:text-[var(--foreground)] transition-colors">Agents</Link>
+            <ChevronRight className="w-4 h-4 text-[var(--muted-foreground)]" />
+            <span className="text-[var(--foreground)] font-semibold">{agent.name}</span>
           </div>
         </div>
         <div className="flex items-center gap-3">
           {profile?.selfVersion && (
-            <span className="text-xs font-mono text-slate-400 bg-slate-100 px-2 py-1 rounded">
+            <span className="text-xs font-mono text-[var(--muted-foreground)] bg-[var(--muted)] px-2 py-1 rounded">
               v{profile.selfVersion}
             </span>
           )}
@@ -274,7 +274,7 @@ export default function AgentProfilePage() {
       <main className="max-w-7xl mx-auto p-4 md:p-8 grid grid-cols-1 lg:grid-cols-12 gap-8">
         {/* Left Column: Profile Card & Sidebar */}
         <div className="lg:col-span-4 space-y-6">
-          <div className="bg-white rounded-3xl border border-slate-200 shadow-xl shadow-slate-200/50 overflow-hidden">
+          <div className="bg-[var(--card-bg)] rounded-3xl border border-[var(--border)] shadow-xl shadow-black/5 overflow-hidden">
             {/* Cover */}
             <div
               className="h-32 w-full relative"
@@ -288,10 +288,10 @@ export default function AgentProfilePage() {
               <div className="inline-block relative">
                 <img
                   alt={agent.name}
-                  className="w-32 h-32 rounded-3xl bg-white p-2 border-4 border-white shadow-xl"
+                  className="w-32 h-32 rounded-3xl bg-[var(--card-bg)] p-2 border-4 border-[var(--card-bg)] shadow-xl"
                   src={agentAvatarUrl(agent.id, 128, agent.color)}
                 />
-                <div className="absolute bottom-2 right-2 w-6 h-6 bg-green-500 border-4 border-white rounded-full" />
+                <div className="absolute bottom-2 right-2 w-6 h-6 bg-green-500 border-4 border-[var(--card-bg)] rounded-full" />
               </div>
 
               <div className="mt-4 space-y-1">
@@ -304,16 +304,16 @@ export default function AgentProfilePage() {
                     {agent.provider}
                   </span>
                 </div>
-                <p className="text-slate-500 font-mono text-xs">{agent.model}</p>
+                <p className="text-[var(--muted-foreground)] font-mono text-xs">{agent.model}</p>
               </div>
 
               {/* Quick Tags */}
               <div className="flex flex-wrap justify-center gap-2 mt-6">
-                <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-slate-50 border border-slate-100 text-xs font-medium text-slate-600">
+                <div className="flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-[var(--app-shell-subtle)] border border-[var(--border)] text-xs font-medium text-[var(--muted-foreground)]">
                   <Cpu className="w-3.5 h-3.5" />
                   {agent.model}
                 </div>
-                <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium ${agentProcesses.length > 0 ? "bg-green-50 border-green-200 text-green-700" : "bg-slate-50 border-slate-100 text-slate-600"}`}>
+                <div className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full border text-xs font-medium ${agentProcesses.length > 0 ? "bg-green-50 border-green-200 text-green-700" : "bg-[var(--app-shell-subtle)] border-[var(--border)] text-[var(--muted-foreground)]"}`}>
                   <Activity className={`w-3.5 h-3.5 ${agentProcesses.length > 0 ? "animate-pulse" : ""}`} />
                   {agentProcesses.length > 0 ? "Working" : "Idle"}
                 </div>
@@ -324,11 +324,11 @@ export default function AgentProfilePage() {
                 {statCards.map((stat, i) => (
                   <div
                     key={i}
-                    className="bg-slate-50 p-3 rounded-2xl border border-slate-100 text-left hover:border-slate-300 transition-colors cursor-default"
+                    className="bg-[var(--app-shell-subtle)] p-3 rounded-2xl border border-[var(--border)] text-left hover:border-[var(--border)] transition-colors cursor-default"
                   >
-                    <stat.icon className="w-4 h-4 text-slate-400 mb-1" />
-                    <div className="text-lg font-bold text-slate-900">{stat.value}</div>
-                    <div className="text-[10px] uppercase font-bold text-slate-400 tracking-wider">{stat.label}</div>
+                    <stat.icon className="w-4 h-4 text-[var(--muted-foreground)] mb-1" />
+                    <div className="text-lg font-bold text-[var(--foreground)]">{stat.value}</div>
+                    <div className="text-[10px] uppercase font-bold text-[var(--muted-foreground)] tracking-wider">{stat.label}</div>
                   </div>
                 ))}
               </div>
@@ -337,15 +337,15 @@ export default function AgentProfilePage() {
 
           {/* Sidebar Modules */}
           <div className="space-y-4">
-            <div className="bg-white rounded-2xl border border-slate-200 p-5">
-              <h3 className="text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
+            <div className="bg-[var(--card-bg)] rounded-2xl border border-[var(--border)] p-5">
+              <h3 className="text-[11px] font-black text-[var(--muted-foreground)] uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
                 <Zap className="w-3.5 h-3.5" /> Actions
               </h3>
               <div className="flex gap-2">
                 <button
                   type="button"
                   onClick={() => setEditModal(true)}
-                  className="flex-1 flex items-center justify-center gap-2 px-3 py-2.5 text-sm font-medium text-slate-700 bg-slate-50 border border-slate-200 rounded-xl hover:bg-slate-100 hover:border-slate-300 transition-all"
+                  className="flex-1 flex items-center justify-center gap-2 px-3 py-2.5 text-sm font-medium text-[var(--foreground)] bg-[var(--app-shell-subtle)] border border-[var(--border)] rounded-xl hover:bg-[var(--muted)] hover:border-[var(--border)] transition-all"
                 >
                   <Pencil className="w-3.5 h-3.5" />
                   Edit
@@ -374,7 +374,7 @@ export default function AgentProfilePage() {
                     a.click();
                     URL.revokeObjectURL(url);
                   }}
-                  className="flex-1 flex items-center justify-center gap-2 px-3 py-2.5 text-sm font-medium text-slate-700 bg-slate-50 border border-slate-200 rounded-xl hover:bg-slate-100 hover:border-slate-300 transition-all"
+                  className="flex-1 flex items-center justify-center gap-2 px-3 py-2.5 text-sm font-medium text-[var(--foreground)] bg-[var(--app-shell-subtle)] border border-[var(--border)] rounded-xl hover:bg-[var(--muted)] hover:border-[var(--border)] transition-all"
                 >
                   <Download className="w-3.5 h-3.5" />
                   Export
@@ -383,7 +383,7 @@ export default function AgentProfilePage() {
             </div>
 
             {agentProcesses.length > 0 && (
-              <div className="bg-white rounded-2xl border border-green-200 ring-1 ring-green-100 p-5">
+              <div className="bg-[var(--card-bg)] rounded-2xl border border-green-200 ring-1 ring-green-100 p-5">
                 <h3 className="text-[11px] font-black text-green-600 uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
                   <Activity className="w-3.5 h-3.5 animate-pulse" /> Working Now
                 </h3>
@@ -398,19 +398,19 @@ export default function AgentProfilePage() {
                         <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
                       </div>
                       <div className="flex-1 min-w-0">
-                        <div className="text-xs font-medium text-slate-700 truncate">
+                        <div className="text-xs font-medium text-[var(--foreground)] truncate">
                           {p.threadId ? (
                             <span className="flex items-center gap-1">
-                              <Hash className="w-3 h-3 text-slate-400" />
+                              <Hash className="w-3 h-3 text-[var(--muted-foreground)]" />
                               <span className="truncate">{p.threadTitle || p.threadId.substring(0, 12) + "..."}</span>
                             </span>
                           ) : (
                             <span>Main thread</span>
                           )}
                         </div>
-                        <div className="text-[10px] text-slate-400 capitalize">{p.state}</div>
+                        <div className="text-[10px] text-[var(--muted-foreground)] capitalize">{p.state}</div>
                       </div>
-                      <ChevronRight className="w-3.5 h-3.5 text-slate-300 group-hover/work:text-slate-500" />
+                      <ChevronRight className="w-3.5 h-3.5 text-[var(--muted-foreground)] group-hover/work:text-[var(--muted-foreground)]" />
                     </Link>
                   ))}
                 </div>
@@ -418,19 +418,19 @@ export default function AgentProfilePage() {
             )}
 
             {agent.skills && agent.skills.length > 0 && (
-              <div className="bg-white rounded-2xl border border-slate-200 p-5">
-                <h3 className="text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
+              <div className="bg-[var(--card-bg)] rounded-2xl border border-[var(--border)] p-5">
+                <h3 className="text-[11px] font-black text-[var(--muted-foreground)] uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
                   <BrainCircuit className="w-3.5 h-3.5" /> Portable Knowledge
                 </h3>
                 <div className="flex flex-col gap-2">
                   {agent.skills.map((s, i) => (
-                    <div key={i} className="flex items-center gap-2 text-xs p-2 hover:bg-slate-50 rounded-lg transition-colors">
+                    <div key={i} className="flex items-center gap-2 text-xs p-2 hover:bg-[var(--app-shell-subtle)] rounded-lg transition-colors">
                       <Zap size={10} className="text-blue-500 shrink-0" />
                       <span className="text-blue-600 font-mono truncate" title={s.file}>
                         {s.file.split("/").pop()}
                       </span>
                       {s.condition && (
-                        <span className="text-slate-400 text-[10px] ml-auto shrink-0">
+                        <span className="text-[var(--muted-foreground)] text-[10px] ml-auto shrink-0">
                           {s.condition}
                         </span>
                       )}
@@ -440,34 +440,34 @@ export default function AgentProfilePage() {
               </div>
             )}
 
-            <div className="bg-white rounded-2xl border border-slate-200 p-5">
-              <h3 className="text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
+            <div className="bg-[var(--card-bg)] rounded-2xl border border-[var(--border)] p-5">
+              <h3 className="text-[11px] font-black text-[var(--muted-foreground)] uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
                 <ShieldCheck className="w-3.5 h-3.5" /> Details
               </h3>
               <div className="space-y-3 text-xs">
                 <div className="flex justify-between">
-                  <span className="text-slate-500">ID</span>
-                  <span className="font-mono bg-slate-50 px-1.5 py-0.5 rounded">{agent.id}</span>
+                  <span className="text-[var(--muted-foreground)]">ID</span>
+                  <span className="font-mono bg-[var(--app-shell-subtle)] px-1.5 py-0.5 rounded">{agent.id}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-slate-500">Provider</span>
+                  <span className="text-[var(--muted-foreground)]">Provider</span>
                   <span className="font-medium capitalize">{agent.provider}</span>
                 </div>
                 <div className="flex justify-between">
-                  <span className="text-slate-500">Model</span>
+                  <span className="text-[var(--muted-foreground)]">Model</span>
                   <span className="font-mono">{agent.model}</span>
                 </div>
                 {profile?.identity?.voice ? (
                   <div className="flex justify-between">
-                    <span className="text-slate-500">Voice</span>
+                    <span className="text-[var(--muted-foreground)]">Voice</span>
                     <span className="font-medium">{String(profile.identity.voice)}</span>
                   </div>
                 ) : null}
                 <div className="flex justify-between items-center">
-                  <span className="text-slate-500">Color</span>
+                  <span className="text-[var(--muted-foreground)]">Color</span>
                   <div className="flex items-center gap-1.5">
                     <div
-                      className="w-3 h-3 rounded-full border border-slate-200"
+                      className="w-3 h-3 rounded-full border border-[var(--border)]"
                       style={{ backgroundColor: agent.color }}
                     />
                     <span className="font-mono">{agent.color}</span>
@@ -475,28 +475,28 @@ export default function AgentProfilePage() {
                 </div>
                 {profile?.selfDerivedAt && (
                   <div className="flex justify-between">
-                    <span className="text-slate-500">Last Evolved</span>
-                    <span className="text-slate-600">{formatRelative(profile.selfDerivedAt)}</span>
+                    <span className="text-[var(--muted-foreground)]">Last Evolved</span>
+                    <span className="text-[var(--muted-foreground)]">{formatRelative(profile.selfDerivedAt)}</span>
                   </div>
                 )}
               </div>
             </div>
 
             {agentProjects.length > 0 && (
-              <div className="bg-white rounded-2xl border border-slate-200 p-5">
-                <h3 className="text-[11px] font-black text-slate-400 uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
+              <div className="bg-[var(--card-bg)] rounded-2xl border border-[var(--border)] p-5">
+                <h3 className="text-[11px] font-black text-[var(--muted-foreground)] uppercase tracking-[0.2em] mb-4 flex items-center gap-2">
                   <Users className="w-3.5 h-3.5" /> Active Projects
                 </h3>
                 <div className="space-y-2">
                   {agentProjects.map((project) => (
-                    <div key={project.id} className="flex items-center justify-between p-2 hover:bg-slate-50 rounded-lg transition-colors group cursor-pointer">
+                    <div key={project.id} className="flex items-center justify-between p-2 hover:bg-[var(--app-shell-subtle)] rounded-lg transition-colors group cursor-pointer">
                       <div className="flex items-center gap-3">
-                        <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center text-xs font-bold text-slate-500 group-hover:bg-white group-hover:shadow-sm">
+                        <div className="w-8 h-8 rounded-lg bg-[var(--muted)] flex items-center justify-center text-xs font-bold text-[var(--muted-foreground)] group-hover:bg-[var(--card-bg)] group-hover:shadow-sm">
                           {project.name[0]}
                         </div>
-                        <span className="text-sm font-medium text-slate-700">{project.name}</span>
+                        <span className="text-sm font-medium text-[var(--foreground)]">{project.name}</span>
                       </div>
-                      <span className="text-xs text-slate-400">
+                      <span className="text-xs text-[var(--muted-foreground)]">
                         {project.agents.length} agent{project.agents.length !== 1 ? "s" : ""}
                       </span>
                     </div>
@@ -510,7 +510,7 @@ export default function AgentProfilePage() {
         {/* Right Column: Main Content */}
         <div className="lg:col-span-8 space-y-6">
           {/* Tab Bar */}
-          <div className="bg-white p-1 rounded-2xl border border-slate-200 flex shadow-sm">
+          <div className="bg-[var(--card-bg)] p-1 rounded-2xl border border-[var(--border)] flex shadow-sm">
             {[
               { key: "inspect", label: "Inspect", icon: ShieldCheck },
               { key: "feed", label: "Feed", icon: MessageSquare },
@@ -521,8 +521,8 @@ export default function AgentProfilePage() {
                 onClick={() => setActiveTab(tab.key)}
                 className={`flex-1 flex items-center justify-center gap-2 py-3 rounded-xl text-sm font-bold transition-all ${
                   activeTab === tab.key
-                    ? "bg-slate-900 text-white shadow-lg shadow-slate-200"
-                    : "text-slate-500 hover:text-slate-800"
+                    ? "bg-[var(--foreground)] text-[var(--background)] shadow-lg shadow-black/5"
+                    : "text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
                 }`}
               >
                 <tab.icon className="w-4 h-4" />
@@ -536,34 +536,34 @@ export default function AgentProfilePage() {
             {activeTab === "inspect" && (
               <div className="space-y-4">
                 <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
-                  <section className="bg-white rounded-3xl border border-slate-200 p-6 shadow-sm">
+                  <section className="bg-[var(--card-bg)] rounded-3xl border border-[var(--border)] p-6 shadow-sm">
                     <div className="flex items-center justify-between mb-4">
-                      <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(--muted-foreground)] uppercase tracking-[0.2em] flex items-center gap-2">
                         <BookOpen className="w-4 h-4" /> Identity
                       </h2>
                       <span className="text-[10px] font-black uppercase px-2 py-0.5 rounded bg-emerald-50 text-emerald-700">
                         Human-authored
                       </span>
                     </div>
-                    <p className="text-sm text-slate-600 leading-relaxed">
+                    <p className="text-sm text-[var(--muted-foreground)] leading-relaxed">
                       Canonical self-definition. The system can read this, but should not edit it.
                     </p>
                     <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-3 text-xs">
-                      <div className="rounded-2xl bg-slate-50 border border-slate-100 p-3">
-                        <div className="text-[10px] font-black uppercase tracking-wider text-slate-400">Voice</div>
-                        <p className="mt-1 text-slate-700">{String(profile?.identity?.voice ?? "Not set")}</p>
+                      <div className="rounded-2xl bg-[var(--app-shell-subtle)] border border-[var(--border)] p-3">
+                        <div className="text-[10px] font-black uppercase tracking-wider text-[var(--muted-foreground)]">Voice</div>
+                        <p className="mt-1 text-[var(--foreground)]">{String(profile?.identity?.voice ?? "Not set")}</p>
                       </div>
-                      <div className="rounded-2xl bg-slate-50 border border-slate-100 p-3">
-                        <div className="text-[10px] font-black uppercase tracking-wider text-slate-400">Seed</div>
-                        <p className="mt-1 text-slate-700">{String(profile?.identity?.seed ?? "Not set")}</p>
+                      <div className="rounded-2xl bg-[var(--app-shell-subtle)] border border-[var(--border)] p-3">
+                        <div className="text-[10px] font-black uppercase tracking-wider text-[var(--muted-foreground)]">Seed</div>
+                        <p className="mt-1 text-[var(--foreground)]">{String(profile?.identity?.seed ?? "Not set")}</p>
                       </div>
                     </div>
                     {inspectability?.identity.sources?.length ? (
                       <div className="mt-4">
-                        <div className="text-[10px] font-black uppercase tracking-wider text-slate-400 mb-2">Sources</div>
+                        <div className="text-[10px] font-black uppercase tracking-wider text-[var(--muted-foreground)] mb-2">Sources</div>
                         <div className="flex flex-wrap gap-2">
                           {inspectability.identity.sources.map((source) => (
-                            <span key={source} className="px-2 py-1 rounded-full bg-slate-100 text-[11px] font-medium text-slate-600">
+                            <span key={source} className="px-2 py-1 rounded-full bg-[var(--muted)] text-[11px] font-medium text-[var(--muted-foreground)]">
                               {source}
                             </span>
                           ))}
@@ -572,24 +572,24 @@ export default function AgentProfilePage() {
                     ) : null}
                   </section>
 
-                  <section className="bg-white rounded-3xl border border-amber-100 ring-1 ring-amber-200 p-6 shadow-sm">
+                  <section className="bg-[var(--card-bg)] rounded-3xl border border-amber-100 ring-1 ring-amber-200 p-6 shadow-sm">
                     <div className="flex items-center justify-between mb-4">
-                      <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(--muted-foreground)] uppercase tracking-[0.2em] flex items-center gap-2">
                         <Sparkles className="w-4 h-4" /> Self-Model
                       </h2>
                       <span className="text-[10px] font-black uppercase px-2 py-0.5 rounded bg-amber-100 text-amber-700">
                         System-derived
                       </span>
                     </div>
-                    <p className="text-sm text-slate-600 leading-relaxed">
+                    <p className="text-sm text-[var(--muted-foreground)] leading-relaxed">
                       Reflective specialization model: how this agent currently understands its fit, strengths, and direction.
                     </p>
                     {selfModelClean ? (
-                      <div className="mt-4 text-sm text-slate-700 leading-relaxed prose prose-sm prose-slate max-w-none">
+                      <div className="mt-4 text-sm text-[var(--foreground)] leading-relaxed prose prose-sm prose-slate max-w-none">
                         <Markdown content={selfModelClean} />
                       </div>
                     ) : (
-                      <p className="mt-4 text-sm text-slate-400">No self-model yet.</p>
+                      <p className="mt-4 text-sm text-[var(--muted-foreground)]">No self-model yet.</p>
                     )}
                     <div className="mt-4 flex flex-wrap gap-2">
                       {profile?.selfVersion ? (
@@ -598,12 +598,12 @@ export default function AgentProfilePage() {
                         </span>
                       ) : null}
                       {profile?.selfDerivedAt ? (
-                        <span className="px-2 py-1 rounded-full bg-slate-100 text-[11px] font-medium text-slate-600">
+                        <span className="px-2 py-1 rounded-full bg-[var(--muted)] text-[11px] font-medium text-[var(--muted-foreground)]">
                           {formatRelative(profile.selfDerivedAt)}
                         </span>
                       ) : null}
                       {inspectability?.selfModel.sources?.map((source) => (
-                        <span key={source} className="px-2 py-1 rounded-full bg-slate-100 text-[11px] font-medium text-slate-600">
+                        <span key={source} className="px-2 py-1 rounded-full bg-[var(--muted)] text-[11px] font-medium text-[var(--muted-foreground)]">
                           {source}
                         </span>
                       ))}
@@ -611,35 +611,35 @@ export default function AgentProfilePage() {
                   </section>
                 </div>
 
-                <section className="bg-white rounded-3xl border border-slate-200 p-6 shadow-sm">
+                <section className="bg-[var(--card-bg)] rounded-3xl border border-[var(--border)] p-6 shadow-sm">
                   <div className="flex items-center justify-between mb-4">
-                    <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(--muted-foreground)] uppercase tracking-[0.2em] flex items-center gap-2">
                       <BrainCircuit className="w-4 h-4" /> Agent Knowledge
                     </h2>
-                    <span className="text-xs text-slate-400">
+                    <span className="text-xs text-[var(--muted-foreground)]">
                       {portableKnowledge.length + learnedKnowledge.length} items
                     </span>
                   </div>
                   <div className="grid grid-cols-1 xl:grid-cols-2 gap-6">
                     <div>
                       <div className="flex items-center justify-between mb-3">
-                        <div className="text-[10px] font-black uppercase tracking-wider text-slate-400">Portable Knowledge</div>
-                        <span className="text-[10px] text-slate-400">Human-authored</span>
+                        <div className="text-[10px] font-black uppercase tracking-wider text-[var(--muted-foreground)]">Portable Knowledge</div>
+                        <span className="text-[10px] text-[var(--muted-foreground)]">Human-authored</span>
                       </div>
                       {portableKnowledge.length === 0 ? (
-                        <p className="text-sm text-slate-400">No portable knowledge attached.</p>
+                        <p className="text-sm text-[var(--muted-foreground)]">No portable knowledge attached.</p>
                       ) : (
                         <div className="space-y-2">
                           {portableKnowledge.map((item) => (
-                            <div key={`${item.file}:${item.condition}`} className="rounded-2xl border border-slate-100 bg-slate-50 p-3">
+                            <div key={`${item.file}:${item.condition}`} className="rounded-2xl border border-[var(--border)] bg-[var(--app-shell-subtle)] p-3">
                               <div className="flex items-center justify-between gap-3">
-                                <span className="font-mono text-xs text-slate-700 truncate" title={item.file}>
+                                <span className="font-mono text-xs text-[var(--foreground)] truncate" title={item.file}>
                                   {item.file}
                                 </span>
-                                <span className="text-[10px] font-medium text-slate-400 shrink-0">{item.form}</span>
+                                <span className="text-[10px] font-medium text-[var(--muted-foreground)] shrink-0">{item.form}</span>
                               </div>
                               {item.condition ? (
-                                <p className="mt-2 text-xs text-slate-500">Use when: {item.condition}</p>
+                                <p className="mt-2 text-xs text-[var(--muted-foreground)]">Use when: {item.condition}</p>
                               ) : null}
                             </div>
                           ))}
@@ -648,21 +648,21 @@ export default function AgentProfilePage() {
                     </div>
                     <div>
                       <div className="flex items-center justify-between mb-3">
-                        <div className="text-[10px] font-black uppercase tracking-wider text-slate-400">Derived Knowledge Candidates</div>
-                        <span className="text-[10px] text-slate-400">System-derived</span>
+                        <div className="text-[10px] font-black uppercase tracking-wider text-[var(--muted-foreground)]">Derived Knowledge Candidates</div>
+                        <span className="text-[10px] text-[var(--muted-foreground)]">System-derived</span>
                       </div>
                       {learnedKnowledge.length === 0 ? (
-                        <p className="text-sm text-slate-400">No extracted learnings yet.</p>
+                        <p className="text-sm text-[var(--muted-foreground)]">No extracted learnings yet.</p>
                       ) : (
                         <div className="space-y-2">
                           {learnedKnowledge.map((item) => (
-                            <div key={item.id} className="rounded-2xl border border-slate-100 bg-slate-50 p-3">
+                            <div key={item.id} className="rounded-2xl border border-[var(--border)] bg-[var(--app-shell-subtle)] p-3">
                               <div className="flex items-center justify-between gap-3">
-                                <span className="text-[10px] font-black uppercase tracking-wider text-slate-400">{item.type}</span>
-                                <span className="text-[10px] text-slate-400">{formatRelative(item.createdAt)}</span>
+                                <span className="text-[10px] font-black uppercase tracking-wider text-[var(--muted-foreground)]">{item.type}</span>
+                                <span className="text-[10px] text-[var(--muted-foreground)]">{formatRelative(item.createdAt)}</span>
                               </div>
-                              <p className="mt-2 text-sm text-slate-700 leading-relaxed">{item.content}</p>
-                              <div className="mt-2 text-[10px] text-slate-400 font-mono">task {item.taskId}</div>
+                              <p className="mt-2 text-sm text-[var(--foreground)] leading-relaxed">{item.content}</p>
+                              <div className="mt-2 text-[10px] text-[var(--muted-foreground)] font-mono">task {item.taskId}</div>
                             </div>
                           ))}
                         </div>
@@ -671,16 +671,16 @@ export default function AgentProfilePage() {
                   </div>
                 </section>
 
-                <section className="bg-white rounded-3xl border border-slate-200 p-6 shadow-sm">
+                <section className="bg-[var(--card-bg)] rounded-3xl border border-[var(--border)] p-6 shadow-sm">
                   <div className="flex items-center justify-between mb-4">
-                    <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(--muted-foreground)] uppercase tracking-[0.2em] flex items-center gap-2">
                       <Activity className="w-4 h-4" /> Evidence
                     </h2>
-                    <span className="text-[10px] font-black uppercase px-2 py-0.5 rounded bg-slate-100 text-slate-600">
+                    <span className="text-[10px] font-black uppercase px-2 py-0.5 rounded bg-[var(--muted)] text-[var(--muted-foreground)]">
                       Non-canonical
                     </span>
                   </div>
-                  <p className="text-sm text-slate-600 leading-relaxed mb-4">
+                  <p className="text-sm text-[var(--muted-foreground)] leading-relaxed mb-4">
                     Raw and semi-structured traces that support reflection and learning. These should be inspectable, but not treated as canonical truth.
                   </p>
                   <div className="grid grid-cols-2 xl:grid-cols-4 gap-3">
@@ -690,9 +690,9 @@ export default function AgentProfilePage() {
                       { label: "Reactions", value: evidenceSummary?.reactions ?? 0 },
                       { label: "Comments", value: evidenceSummary?.comments ?? 0 },
                     ].map((item) => (
-                      <div key={item.label} className="rounded-2xl bg-slate-50 border border-slate-100 p-4">
-                        <div className="text-lg font-bold text-slate-900">{item.value}</div>
-                        <div className="text-[10px] font-black uppercase tracking-wider text-slate-400">{item.label}</div>
+                      <div key={item.label} className="rounded-2xl bg-[var(--app-shell-subtle)] border border-[var(--border)] p-4">
+                        <div className="text-lg font-bold text-[var(--foreground)]">{item.value}</div>
+                        <div className="text-[10px] font-black uppercase tracking-wider text-[var(--muted-foreground)]">{item.label}</div>
                       </div>
                     ))}
                   </div>
@@ -705,39 +705,39 @@ export default function AgentProfilePage() {
               <div className="space-y-4">
                 {/* Bio at top */}
                 {(selfModelClean || identityFallbackClean || profile?.identity?.seed) ? (
-                  <div className="bg-white rounded-3xl border border-slate-200 p-6 shadow-sm">
+                  <div className="bg-[var(--card-bg)] rounded-3xl border border-[var(--border)] p-6 shadow-sm">
                     {selfModelClean ? (
                       <div>
                         <div className="flex items-center justify-between mb-4">
-                          <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(--muted-foreground)] uppercase tracking-[0.2em] flex items-center gap-2">
                             <Target className="w-4 h-4" /> Self-Model
                           </h2>
                           {profile?.selfDerivedAt && (
-                            <span className="text-[10px] text-slate-400 flex items-center gap-1">
+                            <span className="text-[10px] text-[var(--muted-foreground)] flex items-center gap-1">
                               <RefreshCw className="w-3 h-3" />
                               v{profile.selfVersion} — {formatRelative(profile.selfDerivedAt)}
                             </span>
                           )}
                         </div>
-                        <div className="text-sm text-slate-700 leading-relaxed prose prose-sm prose-slate max-w-none">
+                        <div className="text-sm text-[var(--foreground)] leading-relaxed prose prose-sm prose-slate max-w-none">
                           <Markdown content={selfModelClean} />
                         </div>
                       </div>
                     ) : identityFallbackClean ? (
                       <div>
-                        <h2 className="text-xs font-black text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2 mb-4">
+                        <h2 className="text-xs font-black text-[var(--muted-foreground)] uppercase tracking-[0.2em] flex items-center gap-2 mb-4">
                           <Target className="w-4 h-4" /> Identity
                         </h2>
-                        <div className="text-sm text-slate-700 leading-relaxed prose prose-sm prose-slate max-w-none">
+                        <div className="text-sm text-[var(--foreground)] leading-relaxed prose prose-sm prose-slate max-w-none">
                           <Markdown content={identityFallbackClean} />
                         </div>
                       </div>
                     ) : profile?.identity?.seed ? (
                       <div>
-                        <h2 className="text-xs font-black text-slate-400 uppercase tracking-[0.2em] flex items-center gap-2 mb-4">
+                        <h2 className="text-xs font-black text-[var(--muted-foreground)] uppercase tracking-[0.2em] flex items-center gap-2 mb-4">
                           <Target className="w-4 h-4" /> Identity Seed
                         </h2>
-                        <p className="text-sm text-slate-600 italic border-l-4 pl-4" style={{ borderColor: themeColor }}>
+                        <p className="text-sm text-[var(--muted-foreground)] italic border-l-4 pl-4" style={{ borderColor: themeColor }}>
                           &ldquo;{String(profile.identity.seed)}&rdquo;
                         </p>
                       </div>
@@ -747,17 +747,17 @@ export default function AgentProfilePage() {
 
                 {/* Messages heading */}
                 <div className="flex items-center justify-between px-2">
-                  <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(--muted-foreground)] uppercase tracking-[0.2em] flex items-center gap-2">
                     <MessageSquare className="w-4 h-4" /> Messages
                   </h2>
-                  <span className="text-xs text-slate-400">{cleanMessages.length} messages</span>
+                  <span className="text-xs text-[var(--muted-foreground)]">{cleanMessages.length} messages</span>
                 </div>
 
                 {cleanMessages.length === 0 ? (
-                  <div className="bg-white rounded-3xl border border-slate-200 p-12 text-center">
-                    <MessageSquare size={32} className="mx-auto mb-3 text-slate-300" />
-                    <p className="text-sm text-slate-400">No messages yet</p>
-                    <p className="text-xs text-slate-400 mt-1">
+                  <div className="bg-[var(--card-bg)] rounded-3xl border border-[var(--border)] p-12 text-center">
+                    <MessageSquare size={32} className="mx-auto mb-3 text-[var(--muted-foreground)]" />
+                    <p className="text-sm text-[var(--muted-foreground)]">No messages yet</p>
+                    <p className="text-xs text-[var(--muted-foreground)] mt-1">
                       Messages will appear here as this agent participates in threads
                     </p>
                   </div>
@@ -771,7 +771,7 @@ export default function AgentProfilePage() {
                     return (
                       <article
                         key={m.id}
-                        className="bg-white rounded-3xl border border-slate-200 p-6 hover:shadow-xl hover:shadow-slate-200/50 transition-all group"
+                        className="bg-[var(--card-bg)] rounded-3xl border border-[var(--border)] p-6 hover:shadow-xl hover:shadow-black/5 transition-all group"
                       >
                         <div className="flex items-start gap-4">
                           <img
@@ -783,8 +783,8 @@ export default function AgentProfilePage() {
                             {/* Header: name + timestamp */}
                             <div className="flex items-center justify-between mb-1">
                               <div className="flex items-center gap-2">
-                                <span className="font-bold text-slate-900">{agent.name}</span>
-                                <span className="text-xs text-slate-400">• {formatRelative(m.timestamp)}</span>
+                                <span className="font-bold text-[var(--foreground)]">{agent.name}</span>
+                                <span className="text-xs text-[var(--muted-foreground)]">• {formatRelative(m.timestamp)}</span>
                               </div>
                             </div>
 
@@ -792,19 +792,19 @@ export default function AgentProfilePage() {
                             {m.rootMessageId && threadTitle && (
                               <Link
                                 href={`/thread/${m.threadId}`}
-                                className="inline-flex items-center gap-1.5 mb-3 px-2.5 py-1 rounded-lg bg-slate-50 border border-slate-100 hover:border-slate-300 hover:bg-slate-100 transition-colors text-[11px] font-medium text-slate-500 hover:text-slate-700 group/thread"
+                                className="inline-flex items-center gap-1.5 mb-3 px-2.5 py-1 rounded-lg bg-[var(--app-shell-subtle)] border border-[var(--border)] hover:border-[var(--border)] hover:bg-[var(--muted)] transition-colors text-[11px] font-medium text-[var(--muted-foreground)] hover:text-[var(--foreground)] group/thread"
                               >
-                                <Hash className="w-3 h-3 text-slate-400 group-hover/thread:text-slate-500" />
+                                <Hash className="w-3 h-3 text-[var(--muted-foreground)] group-hover/thread:text-[var(--muted-foreground)]" />
                                 <span className="truncate max-w-[300px]">{threadTitle}</span>
-                                <ChevronRight className="w-3 h-3 text-slate-300 group-hover/thread:text-slate-400" />
+                                <ChevronRight className="w-3 h-3 text-[var(--muted-foreground)] group-hover/thread:text-[var(--muted-foreground)]" />
                               </Link>
                             )}
 
                             {/* Responding to: previous message in thread */}
                             {prevClean && (
                               <div className="mb-3 flex items-start gap-2 pl-1">
-                                <CornerDownRight className="w-3.5 h-3.5 text-slate-300 shrink-0 mt-1" />
-                                <div className="flex-1 min-w-0 p-2.5 rounded-xl bg-slate-50 border border-slate-100">
+                                <CornerDownRight className="w-3.5 h-3.5 text-[var(--muted-foreground)] shrink-0 mt-1" />
+                                <div className="flex-1 min-w-0 p-2.5 rounded-xl bg-[var(--app-shell-subtle)] border border-[var(--border)]">
                                   <div className="flex items-center gap-1.5 mb-1">
                                     {m.prevParticipantId && (
                                       <img
@@ -817,7 +817,7 @@ export default function AgentProfilePage() {
                                       {prevName}
                                     </span>
                                   </div>
-                                  <p className="text-xs text-slate-500 leading-relaxed line-clamp-2">
+                                  <p className="text-xs text-[var(--muted-foreground)] leading-relaxed line-clamp-2">
                                     {prevClean}
                                   </p>
                                 </div>
@@ -825,12 +825,12 @@ export default function AgentProfilePage() {
                             )}
 
                             {/* Message content */}
-                            <div className="text-sm text-slate-700">
+                            <div className="text-sm text-[var(--foreground)]">
                               <Markdown content={m.content} />
                             </div>
 
                             {/* Footer */}
-                            <div className="mt-3 flex items-center gap-1.5 text-[10px] text-slate-400 font-medium">
+                            <div className="mt-3 flex items-center gap-1.5 text-[10px] text-[var(--muted-foreground)] font-medium">
                               <Clock className="w-3 h-3" />
                               {formatDate(m.timestamp)}
                             </div>
@@ -847,17 +847,17 @@ export default function AgentProfilePage() {
             {activeTab === "reflections" && (
               <div className="space-y-4">
                 <div className="flex items-center justify-between px-2">
-                  <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(--muted-foreground)] uppercase tracking-[0.2em] flex items-center gap-2">
                     <BookOpen className="w-4 h-4" /> Journal Reflections
                   </h2>
-                  <span className="text-xs text-slate-400">{reflections.length} reflections</span>
+                  <span className="text-xs text-[var(--muted-foreground)]">{reflections.length} reflections</span>
                 </div>
 
                 {reflections.length === 0 ? (
-                  <div className="bg-white rounded-3xl border border-slate-200 p-12 text-center">
-                    <Sparkles size={32} className="mx-auto mb-3 text-slate-300" />
-                    <p className="text-sm text-slate-400">No reflections yet</p>
-                    <p className="text-xs text-slate-400 mt-1">
+                  <div className="bg-[var(--card-bg)] rounded-3xl border border-[var(--border)] p-12 text-center">
+                    <Sparkles size={32} className="mx-auto mb-3 text-[var(--muted-foreground)]" />
+                    <p className="text-sm text-[var(--muted-foreground)]">No reflections yet</p>
+                    <p className="text-xs text-[var(--muted-foreground)] mt-1">
                       Reflections will appear as this agent evolves its self-model
                     </p>
                   </div>
@@ -867,7 +867,7 @@ export default function AgentProfilePage() {
                     return (
                       <article
                         key={entry.id ?? i}
-                        className="bg-white rounded-3xl border border-amber-100 ring-1 ring-amber-200 p-6 hover:shadow-xl hover:shadow-slate-200/50 transition-all group"
+                        className="bg-[var(--card-bg)] rounded-3xl border border-amber-100 ring-1 ring-amber-200 p-6 hover:shadow-xl hover:shadow-black/5 transition-all group"
                       >
                         <div className="flex items-start gap-4">
                           <div className="relative shrink-0">
@@ -877,7 +877,7 @@ export default function AgentProfilePage() {
                               src={agentAvatarUrl(agent.id, 40, agent.color)}
                             />
                             <div
-                              className="absolute -top-1 -right-1 w-4 h-4 rounded-full flex items-center justify-center border-2 border-white"
+                              className="absolute -top-1 -right-1 w-4 h-4 rounded-full flex items-center justify-center border-2 border-[var(--card-bg)]"
                               style={{ backgroundColor: themeColor }}
                             >
                               <Sparkles className="w-2 h-2 text-white" />
@@ -887,57 +887,57 @@ export default function AgentProfilePage() {
                           <div className="flex-1 min-w-0">
                             <div className="flex items-center justify-between mb-1">
                               <div className="flex items-center gap-2">
-                                <span className="font-bold text-slate-900">{agent.name}</span>
+                                <span className="font-bold text-[var(--foreground)]">{agent.name}</span>
                                 <span className="text-[10px] font-black uppercase px-2 py-0.5 rounded bg-amber-100 text-amber-700">
                                   reflection
                                 </span>
-                                <span className="text-xs text-slate-400">• {formatRelative(entry.t)}</span>
+                                <span className="text-xs text-[var(--muted-foreground)]">• {formatRelative(entry.t)}</span>
                               </div>
                               {entry.selfVersion && (
-                                <span className="text-[10px] text-slate-400 font-mono">v{entry.selfVersion}</span>
+                                <span className="text-[10px] text-[var(--muted-foreground)] font-mono">v{entry.selfVersion}</span>
                               )}
                             </div>
 
                             {entry.observation && (
-                              <p className="text-xs text-slate-500 mb-3">{entry.observation}</p>
+                              <p className="text-xs text-[var(--muted-foreground)] mb-3">{entry.observation}</p>
                             )}
 
                             {bodyContent && (
-                              <div className="text-sm text-slate-700 leading-relaxed prose prose-sm prose-slate max-w-none">
+                              <div className="text-sm text-[var(--foreground)] leading-relaxed prose prose-sm prose-slate max-w-none">
                                 <Markdown content={bodyContent} />
                               </div>
                             )}
 
                             {(entry.judgement || entry.delta || entry.intent) && (
-                              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4 pt-4 border-t border-slate-100 group-hover:border-slate-200 transition-colors">
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-4 pt-4 border-t border-[var(--border)] group-hover:border-[var(--border)] transition-colors">
                                 {entry.judgement && (
                                   <div className="space-y-1">
-                                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Judgment</div>
-                                    <p className="text-xs text-slate-500 leading-relaxed">{entry.judgement}</p>
+                                    <div className="text-[10px] font-black text-[var(--muted-foreground)] uppercase tracking-wider">Judgment</div>
+                                    <p className="text-xs text-[var(--muted-foreground)] leading-relaxed">{entry.judgement}</p>
                                   </div>
                                 )}
                                 {entry.delta && (
                                   <div className="space-y-1">
-                                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Delta</div>
-                                    <p className="text-xs text-slate-500 leading-relaxed">{entry.delta}</p>
+                                    <div className="text-[10px] font-black text-[var(--muted-foreground)] uppercase tracking-wider">Delta</div>
+                                    <p className="text-xs text-[var(--muted-foreground)] leading-relaxed">{entry.delta}</p>
                                   </div>
                                 )}
                                 {entry.intent && (
                                   <div className="space-y-1">
-                                    <div className="text-[10px] font-black text-slate-400 uppercase tracking-wider">Intent</div>
-                                    <p className="text-xs text-slate-500 leading-relaxed">{entry.intent}</p>
+                                    <div className="text-[10px] font-black text-[var(--muted-foreground)] uppercase tracking-wider">Intent</div>
+                                    <p className="text-xs text-[var(--muted-foreground)] leading-relaxed">{entry.intent}</p>
                                   </div>
                                 )}
                               </div>
                             )}
 
                             <div className="mt-4 flex items-center justify-between">
-                              <div className="flex items-center gap-1.5 text-[10px] text-slate-400 font-medium">
+                              <div className="flex items-center gap-1.5 text-[10px] text-[var(--muted-foreground)] font-medium">
                                 <Clock className="w-3 h-3" />
                                 {formatDate(entry.t)}
                               </div>
                               {entry.thread && (
-                                <span className="text-[10px] text-slate-400 font-mono flex items-center gap-1">
+                                <span className="text-[10px] text-[var(--muted-foreground)] font-mono flex items-center gap-1">
                                   <Hash className="w-3 h-3" />
                                   {entry.thread.substring(0, 12)}...
                                 </span>