@mndrk/agx 2.0.23 → 2.0.25

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

@@ -351,7 +351,7 @@ export default function AgentLibraryPage() {
   // ── Checkbox helper ─────────────────────────────────────────────────────
 
   const Checkbox = ({ checked }: { checked: boolean }) => (
-    <div className={`w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ${checked ? "bg-slate-900 border-slate-900" : "border-slate-300"}`}>
+    <div className={`w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ${checked ? "bg-[var(--foreground)] border-[var(--foreground)]" : "border-[var(--app-shell-soft-text)]"}`}>
       {checked && (
         <svg width="10" height="10" viewBox="0 0 10 10" fill="none"><path d="M2 5l2 2 4-4" stroke="white" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
       )}
@@ -359,21 +359,21 @@ export default function AgentLibraryPage() {
   );
 
   return (
-    <div className="min-h-screen bg-slate-50 p-6">
+    <div className="min-h-screen bg-[var(--secondary)] p-6">
       <div className="max-w-6xl mx-auto">
         <div className="flex items-center gap-3 mb-6">
           <Link
             href="/"
-            className="inline-flex items-center gap-1 text-sm text-slate-500 hover:text-slate-700 transition-colors"
+            className="inline-flex items-center gap-1 text-sm text-[var(--muted-foreground)] hover:text-[var(--secondary-foreground)] transition-colors"
           >
             <ArrowLeft size={16} />
             Back
           </Link>
-          <h1 className="text-2xl font-semibold text-slate-900">Manage Agents</h1>
+          <h1 className="text-2xl font-semibold text-[var(--foreground)]">Manage Agents</h1>
           <div className="ml-auto flex items-center gap-2">
             <button
               type="button"
-              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-800 transition-colors"
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-white bg-[var(--foreground)] rounded-lg hover:opacity-90 transition-colors"
               onClick={() => setCreatingNewAgent(true)}
             >
               <Plus size={13} />
@@ -415,23 +415,23 @@ export default function AgentLibraryPage() {
 
         {/* Agent Grid */}
         {participants.length === 0 ? (
-          <p className="text-slate-500 text-sm">No agents configured yet.</p>
+          <p className="text-[var(--muted-foreground)] text-sm">No agents configured yet.</p>
         ) : (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
             {participants.map((p) => (
               <div
                 key={p.id}
-                className="bg-white rounded-xl border border-slate-200 p-4 hover:shadow-md transition-shadow text-left group"
+                className="bg-[var(--card-bg)] rounded-xl border border-[var(--border)] p-4 hover:shadow-md transition-shadow text-left group"
               >
                 <div className="flex items-start gap-3 mb-3">
                   <img
                     src={agentAvatarUrl(p.id, 48, p.color)}
                     alt={p.name}
-                    className="w-12 h-12 rounded-full bg-slate-100"
+                    className="w-12 h-12 rounded-full bg-[var(--secondary)]"
                   />
                   <div className="min-w-0 flex-1">
-                    <h3 className="font-medium text-slate-900 truncate">{p.name}</h3>
-                    <p className="text-xs text-slate-400 truncate mt-0.5">{p.model}</p>
+                    <h3 className="font-medium text-[var(--foreground)] truncate">{p.name}</h3>
+                    <p className="text-xs text-[var(--app-shell-soft-text)] truncate mt-0.5">{p.model}</p>
                     {workingAgents.has(p.id) && (
                       <span className="inline-flex items-center gap-1 mt-1 text-[10px] font-medium text-emerald-600">
                         <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
@@ -452,15 +452,15 @@ export default function AgentLibraryPage() {
                       </span>
                     ))}
                     {p.skills.length > 3 && (
-                      <span className="text-[10px] px-1.5 py-0.5 rounded bg-slate-50 text-slate-400">
+                      <span className="text-[10px] px-1.5 py-0.5 rounded bg-[var(--secondary)] text-[var(--app-shell-soft-text)]">
                         +{p.skills.length - 3}
                       </span>
                     )}
                   </div>
                 )}
 
-                <div className="flex items-center justify-between pt-2 border-t border-slate-100">
-                  <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-slate-100 text-slate-600 uppercase tracking-wide">
+                <div className="flex items-center justify-between pt-2 border-t border-[var(--border)]">
+                  <span className="text-[10px] font-medium px-1.5 py-0.5 rounded-full bg-[var(--secondary)] text-[var(--muted-foreground)] uppercase tracking-wide">
                     {p.provider}
                   </span>
                   <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
@@ -468,14 +468,14 @@ export default function AgentLibraryPage() {
                       type="button"
                       title="Edit"
                       onClick={() => setEditAgent(p)}
-                      className="p-1.5 text-slate-400 hover:text-slate-600 rounded hover:bg-slate-50 transition-colors"
+                      className="p-1.5 text-[var(--app-shell-soft-text)] hover:text-[var(--muted-foreground)] rounded hover:bg-[var(--item-hover-bg)] transition-colors"
                     >
                       <Pencil size={13} />
                     </button>
                     <Link
                       href={`/agents/${p.id}`}
                       title="View profile"
-                      className="p-1.5 text-slate-400 hover:text-slate-600 rounded hover:bg-slate-50 transition-colors"
+                      className="p-1.5 text-[var(--app-shell-soft-text)] hover:text-[var(--muted-foreground)] rounded hover:bg-[var(--item-hover-bg)] transition-colors"
                     >
                       <Eye size={13} />
                     </Link>
@@ -489,14 +489,14 @@ export default function AgentLibraryPage() {
         {/* Projects Section */}
         <div className="mt-10">
           <div className="mb-4">
-            <h2 className="text-lg font-semibold text-slate-900">Project assignments</h2>
-            <p className="mt-1 text-sm text-slate-400">Assign agents to existing projects.</p>
+            <h2 className="text-lg font-semibold text-[var(--foreground)]">Project assignments</h2>
+            <p className="mt-1 text-sm text-[var(--app-shell-soft-text)]">Assign agents to existing projects.</p>
           </div>
 
           {nonDefaultProjects.length === 0 ? (
-            <p className="text-sm text-slate-400">No projects available for assignment.</p>
+            <p className="text-sm text-[var(--app-shell-soft-text)]">No projects available for assignment.</p>
           ) : (
-            <div className="bg-white rounded-xl border border-slate-200 divide-y divide-slate-100">
+            <div className="bg-[var(--card-bg)] rounded-xl border border-[var(--border)] divide-y divide-[var(--border)]">
               {nonDefaultProjects.map((project) => {
                 const isExpanded = expandedProjects.has(project.id);
                 const threadNames = (project.thread_ids ?? [])
@@ -512,13 +512,13 @@ export default function AgentLibraryPage() {
                         onClick={() => toggleProject(project.id)}
                       >
                         {isExpanded ? (
-                          <ChevronDown size={16} className="text-slate-400 flex-shrink-0" />
+                          <ChevronDown size={16} className="text-[var(--app-shell-soft-text)] flex-shrink-0" />
                         ) : (
-                          <ChevronRight size={16} className="text-slate-400 flex-shrink-0" />
+                          <ChevronRight size={16} className="text-[var(--app-shell-soft-text)] flex-shrink-0" />
                         )}
-                        <Users size={16} className="text-slate-400 flex-shrink-0" />
-                        <span className="font-medium text-slate-800 text-sm">{project.name}</span>
-                        <span className="text-xs text-slate-400">
+                        <Users size={16} className="text-[var(--app-shell-soft-text)] flex-shrink-0" />
+                        <span className="font-medium text-[var(--foreground)] text-sm">{project.name}</span>
+                        <span className="text-xs text-[var(--app-shell-soft-text)]">
                           {project.agents.length} {project.agents.length === 1 ? "agent" : "agents"}
                           {threadNames.length > 0 && ` · ${threadNames.length} ${threadNames.length === 1 ? "thread" : "threads"}`}
                         </span>
@@ -526,7 +526,7 @@ export default function AgentLibraryPage() {
                       <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                         <button
                           type="button"
-                          className="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs font-medium text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900"
+                          className="inline-flex items-center gap-1.5 rounded-lg border border-[var(--border)] px-2.5 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--item-hover-bg)] hover:text-[var(--foreground)]"
                           title="Add agents"
                           onClick={() => {
                             setAddAgentSelection(new Set());
@@ -542,7 +542,7 @@ export default function AgentLibraryPage() {
                     {isExpanded && (
                       <div className="px-5 pb-4 pt-1 ml-9 flex flex-col gap-1">
                         {project.agents.length === 0 && (
-                          <p className="text-xs text-slate-400 py-1">No agents in this project.</p>
+                          <p className="text-xs text-[var(--app-shell-soft-text)] py-1">No agents in this project.</p>
                         )}
                         {project.agents.map((ta) => {
                           const agent = participants.find((p) => p.id === ta.agent_id);
@@ -556,13 +556,13 @@ export default function AgentLibraryPage() {
                                 alt=""
                                 className="w-6 h-6 rounded-full flex-shrink-0"
                               />
-                              <span className="text-sm text-slate-700 truncate flex-1">
+                              <span className="text-sm text-[var(--secondary-foreground)] truncate flex-1">
                                 {agent?.name ?? ta.agent_id}
                               </span>
-                              <span className="text-[10px] text-slate-400">{agent?.model}</span>
+                              <span className="text-[10px] text-[var(--app-shell-soft-text)]">{agent?.model}</span>
                               <button
                                 type="button"
-                                className="opacity-0 group-hover/agent:opacity-100 text-slate-400 hover:text-red-500 transition-opacity"
+                                className="opacity-0 group-hover/agent:opacity-100 text-[var(--app-shell-soft-text)] hover:text-red-500 transition-opacity"
                                 onClick={() => void removeAgentFromProject(project.id, ta.agent_id)}
                                 title="Remove from project"
                               >
@@ -574,7 +574,7 @@ export default function AgentLibraryPage() {
 
                         <button
                           type="button"
-                          className="mt-2 inline-flex items-center gap-1.5 self-start rounded-lg border border-slate-200 px-2.5 py-1.5 text-xs font-medium text-slate-600 transition-colors hover:bg-slate-50 hover:text-slate-900"
+                          className="mt-2 inline-flex items-center gap-1.5 self-start rounded-lg border border-[var(--border)] px-2.5 py-1.5 text-xs font-medium text-[var(--muted-foreground)] transition-colors hover:bg-[var(--item-hover-bg)] hover:text-[var(--foreground)]"
                           onClick={() => {
                             setAddAgentSelection(new Set());
                             setAddAgentModal({ projectId: project.id });
@@ -585,8 +585,8 @@ export default function AgentLibraryPage() {
                         </button>
 
                         {threadNames.length > 0 && (
-                          <div className="mt-2 pt-2 border-t border-slate-100">
-                            <p className="text-[10px] font-medium text-slate-400 uppercase tracking-wide mb-1">Threads</p>
+                          <div className="mt-2 pt-2 border-t border-[var(--border)]">
+                            <p className="text-[10px] font-medium text-[var(--app-shell-soft-text)] uppercase tracking-wide mb-1">Threads</p>
                             <div className="flex flex-wrap gap-1.5">
                               {threadNames.map((name, i) => (
                                 <span
@@ -617,12 +617,12 @@ export default function AgentLibraryPage() {
           onClick={() => setOutboundModal(false)}
         >
           <div
-            className="bg-white rounded-xl shadow-xl border border-slate-200 w-[440px] max-h-[80vh] flex flex-col"
+            className="bg-[var(--card-bg)] rounded-xl shadow-xl border border-[var(--border)] w-[440px] max-h-[80vh] flex flex-col"
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="flex items-center justify-between px-5 py-3.5 border-b border-slate-100">
-              <h3 className="text-sm font-medium text-slate-900">Share Agents</h3>
-              <button type="button" className="text-slate-400 hover:text-slate-600" onClick={() => setOutboundModal(false)}>
+            <div className="flex items-center justify-between px-5 py-3.5 border-b border-[var(--border)]">
+              <h3 className="text-sm font-medium text-[var(--foreground)]">Share Agents</h3>
+              <button type="button" className="text-[var(--app-shell-soft-text)] hover:text-[var(--muted-foreground)]" onClick={() => setOutboundModal(false)}>
                 <X size={16} />
               </button>
             </div>
@@ -630,20 +630,20 @@ export default function AgentLibraryPage() {
             {shareCode ? (
               <div className="px-5 py-6 flex flex-col items-center gap-4">
                 <div className="text-center">
-                  <p className="text-sm text-slate-600 mb-3">Share this code with the recipient:</p>
+                  <p className="text-sm text-[var(--muted-foreground)] mb-3">Share this code with the recipient:</p>
                   <div className="flex items-center justify-center gap-3">
-                    <span className="text-3xl font-mono font-bold tracking-[0.3em] text-slate-900">{shareCode}</span>
-                    <button type="button" className="p-2 text-slate-400 hover:text-slate-600 transition-colors" onClick={copyCode}>
+                    <span className="text-3xl font-mono font-bold tracking-[0.3em] text-[var(--foreground)]">{shareCode}</span>
+                    <button type="button" className="p-2 text-[var(--app-shell-soft-text)] hover:text-[var(--muted-foreground)] transition-colors" onClick={copyCode}>
                       {codeCopied ? <Check size={18} className="text-green-500" /> : <Copy size={18} />}
                     </button>
                   </div>
                 </div>
                 {shareExpiresAt && (
-                  <p className="text-[11px] text-slate-400">Expires {new Date(shareExpiresAt).toLocaleTimeString()}</p>
+                  <p className="text-[11px] text-[var(--app-shell-soft-text)]">Expires {new Date(shareExpiresAt).toLocaleTimeString()}</p>
                 )}
                 <button
                   type="button"
-                  className="px-4 py-2 text-xs font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors"
+                  className="px-4 py-2 text-xs font-medium text-[var(--muted-foreground)] bg-[var(--secondary)] rounded-lg hover:bg-[var(--item-hover-bg)] transition-colors"
                   onClick={() => setOutboundModal(false)}
                 >
                   Done
@@ -654,8 +654,8 @@ export default function AgentLibraryPage() {
                 <div className="overflow-y-auto flex-1">
                   {/* Projects as quick-select presets */}
                   {nonDefaultProjects.length > 0 && (
-                    <div className="border-b border-slate-100 px-5 py-3">
-                      <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide mb-2">Select by project</p>
+                    <div className="border-b border-[var(--border)] px-5 py-3">
+                      <p className="text-[11px] font-medium text-[var(--app-shell-soft-text)] uppercase tracking-wide mb-2">Select by project</p>
                       <div className="flex flex-wrap gap-1.5">
                         {nonDefaultProjects.map((t) => {
                           const projectAgentIds = t.agents.map((a) => a.agent_id);
@@ -667,10 +667,10 @@ export default function AgentLibraryPage() {
                               type="button"
                               className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium transition-colors ${
                                 allSelected
-                                  ? "bg-slate-900 text-white"
+                                  ? "bg-[var(--foreground)] text-white"
                                   : someSelected
-                                    ? "bg-slate-300 text-slate-700"
-                                    : "bg-slate-100 text-slate-600 hover:bg-slate-200"
+                                    ? "bg-[var(--app-shell-soft-text)] text-[var(--secondary-foreground)]"
+                                    : "bg-[var(--secondary)] text-[var(--muted-foreground)] hover:bg-[var(--item-hover-bg)]"
                               }`}
                               onClick={() => {
                                 setOutboundAgents((prev) => {
@@ -687,7 +687,7 @@ export default function AgentLibraryPage() {
                             >
                               <Users size={10} />
                               {t.name}
-                              <span className={`text-[10px] ${allSelected ? "text-slate-300" : "text-slate-400"}`}>
+                              <span className={`text-[10px] ${allSelected ? "text-[var(--app-shell-soft-text)]" : "text-[var(--app-shell-soft-text)]"}`}>
                                 {t.agents.length}
                               </span>
                             </button>
@@ -698,12 +698,12 @@ export default function AgentLibraryPage() {
                   )}
 
                   {/* Agents selection */}
-                  <div className="border-b border-slate-100">
+                  <div className="border-b border-[var(--border)]">
                     <div className="px-5 pt-3 pb-1 flex items-center justify-between">
-                      <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide">Agents</p>
+                      <p className="text-[11px] font-medium text-[var(--app-shell-soft-text)] uppercase tracking-wide">Agents</p>
                       <button
                         type="button"
-                        className="text-[11px] text-slate-400 hover:text-slate-600"
+                        className="text-[11px] text-[var(--app-shell-soft-text)] hover:text-[var(--muted-foreground)]"
                         onClick={() => {
                           if (outboundAgents.size === participants.length) setOutboundAgents(new Set());
                           else setOutboundAgents(new Set(participants.map((p) => p.id)));
@@ -718,7 +718,7 @@ export default function AgentLibraryPage() {
                         <button
                           key={p.id}
                           type="button"
-                          className={`w-full flex items-center gap-3 px-5 py-2 text-sm transition-colors ${selected ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
+                          className={`w-full flex items-center gap-3 px-5 py-2 text-sm transition-colors ${selected ? "bg-[var(--secondary)] text-[var(--foreground)]" : "text-[var(--muted-foreground)] hover:bg-[var(--item-hover-bg)]"}`}
                           onClick={() => {
                             setOutboundAgents((prev) => {
                               const next = new Set(prev);
@@ -731,7 +731,7 @@ export default function AgentLibraryPage() {
                           <Checkbox checked={selected} />
                           <img src={agentAvatarUrl(p.id, 24, p.color)} alt="" className="w-6 h-6 rounded-full flex-shrink-0" />
                           <span className="truncate text-xs font-medium flex-1">{p.name}</span>
-                          <span className="text-[10px] text-slate-400">{p.provider}</span>
+                          <span className="text-[10px] text-[var(--app-shell-soft-text)]">{p.provider}</span>
                         </button>
                       );
                     })}
@@ -741,7 +741,7 @@ export default function AgentLibraryPage() {
                   <div className="px-5 py-3">
                     <button
                       type="button"
-                      className={`flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm transition-colors ${outboundIncludeSelf ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
+                      className={`flex items-center gap-3 w-full px-3 py-2 rounded-lg text-sm transition-colors ${outboundIncludeSelf ? "bg-[var(--secondary)] text-[var(--foreground)]" : "text-[var(--muted-foreground)] hover:bg-[var(--item-hover-bg)]"}`}
                       onClick={() => setOutboundIncludeSelf(!outboundIncludeSelf)}
                     >
                       <Checkbox checked={outboundIncludeSelf} />
@@ -750,15 +750,15 @@ export default function AgentLibraryPage() {
                   </div>
                 </div>
 
-                <div className="px-5 py-3 border-t border-slate-100 flex items-center justify-between">
-                  <span className="text-[11px] text-slate-400">
+                <div className="px-5 py-3 border-t border-[var(--border)] flex items-center justify-between">
+                  <span className="text-[11px] text-[var(--app-shell-soft-text)]">
                     {outboundAgents.size} {outboundAgents.size === 1 ? "agent" : "agents"}
                   </span>
                   <div className="flex gap-2">
                     <button
                       type="button"
                       disabled={outboundAgents.size === 0 || outboundBusy}
-                      className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-slate-600 bg-white border border-slate-200 rounded-lg hover:bg-slate-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                      className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-[var(--muted-foreground)] bg-[var(--card-bg)] border border-[var(--border)] rounded-lg hover:bg-[var(--item-hover-bg)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                       onClick={() => void handleExportToFile()}
                     >
                       <Download size={12} />
@@ -775,7 +775,7 @@ export default function AgentLibraryPage() {
                     </button>
                     <button
                       type="button"
-                      className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors"
+                      className="px-3 py-1.5 text-xs text-[var(--muted-foreground)] hover:text-[var(--secondary-foreground)] transition-colors"
                       onClick={() => setOutboundModal(false)}
                     >
                       Cancel
@@ -795,24 +795,24 @@ export default function AgentLibraryPage() {
           onClick={() => setAddAgentModal(null)}
         >
           <div
-            className="bg-white rounded-xl shadow-xl border border-slate-200 w-80 max-h-[70vh] flex flex-col"
+            className="bg-[var(--card-bg)] rounded-xl shadow-xl border border-[var(--border)] w-80 max-h-[70vh] flex flex-col"
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="flex items-center justify-between px-4 py-3 border-b border-slate-100">
-              <h3 className="text-sm font-medium text-slate-900">Add to {addAgentModalProject?.name ?? "project"}</h3>
-              <button type="button" className="text-slate-400 hover:text-slate-600" onClick={() => setAddAgentModal(null)}><X size={16} /></button>
+            <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--border)]">
+              <h3 className="text-sm font-medium text-[var(--foreground)]">Add to {addAgentModalProject?.name ?? "project"}</h3>
+              <button type="button" className="text-[var(--app-shell-soft-text)] hover:text-[var(--muted-foreground)]" onClick={() => setAddAgentModal(null)}><X size={16} /></button>
             </div>
             <div className="overflow-y-auto py-1 flex-1">
               <button
                 type="button"
-                className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-slate-700 hover:bg-slate-50 transition-colors border-b border-slate-100"
+                className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-[var(--secondary-foreground)] hover:bg-[var(--item-hover-bg)] transition-colors border-b border-[var(--border)]"
                 onClick={() => setCreatingNewAgent(true)}
               >
-                <Plus size={14} className="text-slate-400" />
+                <Plus size={14} className="text-[var(--app-shell-soft-text)]" />
                 <span className="text-xs font-medium">Create new agent</span>
               </button>
               {addAgentModalAvailable.length === 0 ? (
-                <p className="px-4 py-6 text-xs text-slate-400 text-center">All agents are already in this project</p>
+                <p className="px-4 py-6 text-xs text-[var(--app-shell-soft-text)] text-center">All agents are already in this project</p>
               ) : (
                 addAgentModalAvailable.map((p) => {
                   const selected = addAgentSelection.has(p.id);
@@ -820,7 +820,7 @@ export default function AgentLibraryPage() {
                     <button
                       key={p.id}
                       type="button"
-                      className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${selected ? "bg-slate-100 text-slate-900" : "text-slate-700 hover:bg-slate-50"}`}
+                      className={`w-full flex items-center gap-3 px-4 py-2.5 text-sm transition-colors ${selected ? "bg-[var(--secondary)] text-[var(--foreground)]" : "text-[var(--secondary-foreground)] hover:bg-[var(--item-hover-bg)]"}`}
                       onClick={() => {
                         setAddAgentSelection((prev) => {
                           const next = new Set(prev);
@@ -841,12 +841,12 @@ export default function AgentLibraryPage() {
               )}
             </div>
             {addAgentModalAvailable.length > 0 && (
-              <div className="px-4 py-3 border-t border-slate-100 flex justify-end gap-2">
-                <button type="button" className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors" onClick={() => setAddAgentModal(null)}>Cancel</button>
+              <div className="px-4 py-3 border-t border-[var(--border)] flex justify-end gap-2">
+                <button type="button" className="px-3 py-1.5 text-xs text-[var(--muted-foreground)] hover:text-[var(--secondary-foreground)] transition-colors" onClick={() => setAddAgentModal(null)}>Cancel</button>
                 <button
                   type="button"
                   disabled={addAgentSelection.size === 0}
-                  className="px-3 py-1.5 text-xs font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-800 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                  className="px-3 py-1.5 text-xs font-medium text-white bg-[var(--foreground)] rounded-lg hover:opacity-90 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                   onClick={() => {
                     for (const agentId of addAgentSelection) {
                       void addAgentToProject(addAgentModal.projectId, agentId);
@@ -958,12 +958,12 @@ export default function AgentLibraryPage() {
           onClick={() => setInboundModal(false)}
         >
           <div
-            className="bg-white rounded-xl shadow-xl border border-slate-200 w-[440px] max-h-[80vh] flex flex-col"
+            className="bg-[var(--card-bg)] rounded-xl shadow-xl border border-[var(--border)] w-[440px] max-h-[80vh] flex flex-col"
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="flex items-center justify-between px-5 py-3.5 border-b border-slate-100">
-              <h3 className="text-sm font-medium text-slate-900">Import Agents</h3>
-              <button type="button" className="text-slate-400 hover:text-slate-600" onClick={() => setInboundModal(false)}>
+            <div className="flex items-center justify-between px-5 py-3.5 border-b border-[var(--border)]">
+              <h3 className="text-sm font-medium text-[var(--foreground)]">Import Agents</h3>
+              <button type="button" className="text-[var(--app-shell-soft-text)] hover:text-[var(--muted-foreground)]" onClick={() => setInboundModal(false)}>
                 <X size={16} />
               </button>
             </div>
@@ -973,31 +973,31 @@ export default function AgentLibraryPage() {
               <div className="px-5 py-6 flex flex-col gap-3">
                 <button
                   type="button"
-                  className="flex items-center gap-3 px-4 py-3.5 rounded-lg border border-slate-200 hover:border-violet-300 hover:bg-violet-50 transition-colors text-left"
+                  className="flex items-center gap-3 px-4 py-3.5 rounded-lg border border-[var(--border)] hover:border-violet-300 hover:bg-violet-50 transition-colors text-left"
                   onClick={() => setInboundMode("pull")}
                 >
                   <div className="w-9 h-9 rounded-lg bg-violet-100 flex items-center justify-center flex-shrink-0">
                     <Download size={16} className="text-violet-600" />
                   </div>
                   <div>
-                    <p className="text-sm font-medium text-slate-900">Pull from Hub</p>
-                    <p className="text-[11px] text-slate-400">Enter a share code to import agents</p>
+                    <p className="text-sm font-medium text-[var(--foreground)]">Pull from Hub</p>
+                    <p className="text-[11px] text-[var(--app-shell-soft-text)]">Enter a share code to import agents</p>
                   </div>
                 </button>
                 <button
                   type="button"
-                  className="flex items-center gap-3 px-4 py-3.5 rounded-lg border border-slate-200 hover:border-slate-300 hover:bg-slate-50 transition-colors text-left"
+                  className="flex items-center gap-3 px-4 py-3.5 rounded-lg border border-[var(--border)] hover:border-[var(--border)] hover:bg-[var(--item-hover-bg)] transition-colors text-left"
                   onClick={() => {
                     setInboundMode("file");
                     setTimeout(() => fileInputRef.current?.click(), 100);
                   }}
                 >
-                  <div className="w-9 h-9 rounded-lg bg-slate-100 flex items-center justify-center flex-shrink-0">
-                    <Upload size={16} className="text-slate-600" />
+                  <div className="w-9 h-9 rounded-lg bg-[var(--secondary)] flex items-center justify-center flex-shrink-0">
+                    <Upload size={16} className="text-[var(--muted-foreground)]" />
                   </div>
                   <div>
-                    <p className="text-sm font-medium text-slate-900">Upload File</p>
-                    <p className="text-[11px] text-slate-400">Import from a .agent.json bundle</p>
+                    <p className="text-sm font-medium text-[var(--foreground)]">Upload File</p>
+                    <p className="text-[11px] text-[var(--app-shell-soft-text)]">Import from a .agent.json bundle</p>
                   </div>
                 </button>
               </div>
@@ -1006,7 +1006,7 @@ export default function AgentLibraryPage() {
             {inboundMode === "pull" && !inboundBundle && (
               /* ── Enter code ── */
               <div className="px-5 py-5 flex flex-col gap-3">
-                <label className="text-sm text-slate-600">Enter share code:</label>
+                <label className="text-sm text-[var(--muted-foreground)]">Enter share code:</label>
                 <input
                   autoFocus
                   type="text"
@@ -1014,14 +1014,14 @@ export default function AgentLibraryPage() {
                   onChange={(e) => setPullCode(e.target.value.toUpperCase())}
                   placeholder="e.g. A3X9K2"
                   maxLength={6}
-                  className="w-full px-3 py-2.5 text-center text-2xl font-mono font-bold tracking-[0.3em] border border-slate-200 rounded-lg outline-none focus:border-violet-400 focus:ring-1 focus:ring-violet-200 transition-all"
+                  className="w-full px-3 py-2.5 text-center text-2xl font-mono font-bold tracking-[0.3em] border border-[var(--border)] rounded-lg outline-none focus:border-violet-400 focus:ring-1 focus:ring-violet-200 transition-all bg-[var(--card-bg)] text-[var(--foreground)]"
                   onKeyDown={(e) => { if (e.key === "Enter") void handlePullFetch(); }}
                 />
                 {inboundError && (
                   <p className="text-xs text-red-500">{inboundError}</p>
                 )}
                 <div className="flex justify-end gap-2 mt-1">
-                  <button type="button" className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors" onClick={() => { setInboundMode("choice"); setInboundError(null); }}>
+                  <button type="button" className="px-3 py-1.5 text-xs text-[var(--muted-foreground)] hover:text-[var(--secondary-foreground)] transition-colors" onClick={() => { setInboundMode("choice"); setInboundError(null); }}>
                     Back
                   </button>
                   <button
@@ -1039,10 +1039,10 @@ export default function AgentLibraryPage() {
             {inboundMode === "file" && !inboundBundle && (
               /* ── Waiting for file ── */
               <div className="px-5 py-6 flex flex-col items-center gap-3">
-                <p className="text-sm text-slate-500">Select a .agent.json file to import</p>
+                <p className="text-sm text-[var(--muted-foreground)]">Select a .agent.json file to import</p>
                 <button
                   type="button"
-                  className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-slate-600 bg-slate-100 rounded-lg hover:bg-slate-200 transition-colors"
+                  className="inline-flex items-center gap-1.5 px-4 py-2 text-xs font-medium text-[var(--muted-foreground)] bg-[var(--secondary)] rounded-lg hover:bg-[var(--item-hover-bg)] transition-colors"
                   onClick={() => fileInputRef.current?.click()}
                 >
                   <Upload size={13} />
@@ -1051,7 +1051,7 @@ export default function AgentLibraryPage() {
                 {inboundError && (
                   <p className="text-xs text-red-500">{inboundError}</p>
                 )}
-                <button type="button" className="text-xs text-slate-400 hover:text-slate-600 mt-1" onClick={() => { setInboundMode("choice"); setInboundError(null); }}>
+                <button type="button" className="text-xs text-[var(--app-shell-soft-text)] hover:text-[var(--muted-foreground)] mt-1" onClick={() => { setInboundMode("choice"); setInboundError(null); }}>
                   Back
                 </button>
               </div>
@@ -1063,22 +1063,22 @@ export default function AgentLibraryPage() {
                 <div className="overflow-y-auto flex-1">
                   {/* Bundle info */}
                   {inboundBundle.exportedAt && (
-                    <div className="px-5 py-3 border-b border-slate-100 bg-slate-50">
-                      <p className="text-[11px] text-slate-400">
+                    <div className="px-5 py-3 border-b border-[var(--border)] bg-[var(--secondary)]">
+                      <p className="text-[11px] text-[var(--app-shell-soft-text)]">
                         Exported {new Date(inboundBundle.exportedAt).toLocaleDateString()} · {inboundBundle.agents.length} agents{getBundleProjects(inboundBundle).length > 0 ? `, ${getBundleProjects(inboundBundle).length} projects` : ""}
                       </p>
                     </div>
                   )}
 
                   {/* Agents */}
-                  <div className="border-b border-slate-100">
+                  <div className="border-b border-[var(--border)]">
                     <div className="px-5 pt-3 pb-1 flex items-center justify-between">
-                      <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide">
+                      <p className="text-[11px] font-medium text-[var(--app-shell-soft-text)] uppercase tracking-wide">
                         {inboundBundle.agents.length} agent{inboundBundle.agents.length === 1 ? "" : "s"} found
                       </p>
                       <button
                         type="button"
-                        className="text-[11px] text-slate-400 hover:text-slate-600"
+                        className="text-[11px] text-[var(--app-shell-soft-text)] hover:text-[var(--muted-foreground)]"
                         onClick={() => {
                           if (inboundAgents.size === inboundBundle.agents.length) setInboundAgents(new Set());
                           else setInboundAgents(new Set(inboundBundle.agents.map((a) => a.id)));
@@ -1094,7 +1094,7 @@ export default function AgentLibraryPage() {
                         <button
                           key={a.id}
                           type="button"
-                          className={`w-full flex items-center gap-3 px-5 py-2.5 text-sm transition-colors ${selected ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
+                          className={`w-full flex items-center gap-3 px-5 py-2.5 text-sm transition-colors ${selected ? "bg-[var(--secondary)] text-[var(--foreground)]" : "text-[var(--muted-foreground)] hover:bg-[var(--item-hover-bg)]"}`}
                           onClick={() => {
                             setInboundAgents((prev) => {
                               const next = new Set(prev);
@@ -1108,7 +1108,7 @@ export default function AgentLibraryPage() {
                           <img src={agentAvatarUrl(a.id, 24, a.color)} alt="" className="w-6 h-6 rounded-full flex-shrink-0" />
                           <div className="min-w-0 flex-1 text-left">
                             <div className="truncate text-xs font-medium">{a.name}</div>
-                            <div className="truncate text-[10px] text-slate-400">{a.provider}{a.model ? ` · ${a.model}` : ""}</div>
+                            <div className="truncate text-[10px] text-[var(--app-shell-soft-text)]">{a.provider}{a.model ? ` · ${a.model}` : ""}</div>
                           </div>
                           {existing && (
                             <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-50 text-amber-600 flex-shrink-0">
@@ -1121,7 +1121,7 @@ export default function AgentLibraryPage() {
                             </span>
                           )}
                           {a.self && (
-                            <span className="text-[10px] text-slate-400 flex-shrink-0">+ self.md</span>
+                            <span className="text-[10px] text-[var(--muted-foreground)] flex-shrink-0">+ self.md</span>
                           )}
                         </button>
                       );
@@ -1132,7 +1132,7 @@ export default function AgentLibraryPage() {
                   {getBundleProjects(inboundBundle).length > 0 && (
                     <div>
                       <div className="px-5 pt-3 pb-1">
-                        <p className="text-[11px] font-medium text-slate-400 uppercase tracking-wide">Projects</p>
+                        <p className="text-[11px] font-medium text-[var(--muted-foreground)] uppercase tracking-wide">Projects</p>
                       </div>
                       {getBundleProjects(inboundBundle).map((project) => {
                         const selected = inboundProjects.has(project.name);
@@ -1140,7 +1140,7 @@ export default function AgentLibraryPage() {
                           <button
                             key={project.name}
                             type="button"
-                            className={`w-full flex items-center gap-3 px-5 py-2 text-sm transition-colors ${selected ? "bg-slate-50 text-slate-900" : "text-slate-600 hover:bg-slate-50"}`}
+                            className={`w-full flex items-center gap-3 px-5 py-2 text-sm transition-colors ${selected ? "bg-[var(--app-shell-subtle)] text-[var(--foreground)]" : "text-[var(--muted-foreground)] hover:bg-[var(--app-shell-subtle)]"}`}
                             onClick={() => {
                               setInboundProjects((prev) => {
                                 const next = new Set(prev);
@@ -1151,9 +1151,9 @@ export default function AgentLibraryPage() {
                             }}
                           >
                             <Checkbox checked={selected} />
-                            <Users size={14} className="text-slate-400 flex-shrink-0" />
+                            <Users size={14} className="text-[var(--muted-foreground)] flex-shrink-0" />
                             <span className="truncate text-xs font-medium flex-1">{project.name}</span>
-                            <span className="text-[10px] text-slate-400">{project.agentIds.length} agents</span>
+                            <span className="text-[10px] text-[var(--muted-foreground)]">{project.agentIds.length} agents</span>
                           </button>
                         );
                       })}
@@ -1167,14 +1167,14 @@ export default function AgentLibraryPage() {
                   </div>
                 )}
 
-                <div className="px-5 py-3 border-t border-slate-100 flex items-center justify-between">
-                  <span className="text-[11px] text-slate-400">
+                <div className="px-5 py-3 border-t border-[var(--border)] flex items-center justify-between">
+                  <span className="text-[11px] text-[var(--muted-foreground)]">
                     {inboundAgents.size} {inboundAgents.size === 1 ? "agent" : "agents"}{inboundProjects.size > 0 ? `, ${inboundProjects.size} ${inboundProjects.size === 1 ? "project" : "projects"}` : ""}
                   </span>
                   <div className="flex gap-2">
                     <button
                       type="button"
-                      className="px-3 py-1.5 text-xs text-slate-500 hover:text-slate-700 transition-colors"
+                      className="px-3 py-1.5 text-xs text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
                       onClick={() => { setInboundBundle(null); setInboundAgents(new Set()); setInboundProjects(new Set()); }}
                     >
                       Back