@mndrk/agx 2.0.55 → 2.0.56

package/cloud-runtime/standalone/apps/local/components/projects/ProjectSearchBar.tsx

@@ -19,6 +19,7 @@ import type {
   ProjectSearchResultKind,
   ProjectSearchSection,
 } from "@/lib/project-search";
+import { useInputCapabilities } from "@/hooks/useInputCapabilities";
 
 interface ProjectSearchBarProps {
   projectId: string;
@@ -77,6 +78,7 @@ function iconForKind(kind: ProjectSearchResultKind) {
 }
 
 export function ProjectSearchBar({ projectId }: ProjectSearchBarProps) {
+  const { isTouchLayout } = useInputCapabilities();
   const router = useRouter();
   const pathname = usePathname();
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -318,11 +320,11 @@ export function ProjectSearchBar({ projectId }: ProjectSearchBarProps) {
               <X className="h-3.5 w-3.5" />
             </button>
           </div>
-        ) : (
+        ) : !isTouchLayout ? (
           <kbd className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 rounded-md border border-[var(--app-shell-border)] bg-[var(--app-shell-subtle)] px-1.5 py-0.5 font-sans text-[10px] font-bold text-[var(--app-shell-soft-text)]">
             ⌘K
           </kbd>
-        )}
+        ) : null}
       </div>
 
       {showPanel ? (

package/cloud-runtime/standalone/apps/local/components/projects/ScheduledTasksSummaryCard.tsx

@@ -205,19 +205,19 @@ export function ScheduledTasksSummaryCard({
   };
 
   return (
-    <div className="rounded-2xl border border-zinc-800 bg-zinc-900/50 p-4">
+    <div className="rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] p-4">
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
-          <Clock className="w-4 h-4 text-zinc-400" />
-          <span className="text-sm font-medium text-zinc-200">Scheduled Tasks</span>
+          <Clock className="h-4 w-4 text-[var(--muted-foreground)]" />
+          <span className="text-sm font-medium text-[var(--foreground)]">Scheduled Tasks</span>
           {!loading && scheduledCount > 0 && (
-            <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400">
+            <span className="rounded-full bg-[var(--secondary)] px-2 py-0.5 text-xs text-[var(--muted-foreground)]">
               {scheduledCount}
             </span>
           )}
         </div>
         {onViewAll && (
-          <button onClick={onViewAll} className="flex items-center gap-1 text-xs text-zinc-500 hover:text-zinc-300">
+          <button onClick={onViewAll} className="flex items-center gap-1 text-xs text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]">
             View all <ArrowRight className="w-3 h-3" />
           </button>
         )}
@@ -226,20 +226,20 @@ export function ScheduledTasksSummaryCard({
       {loading ? (
         <div className="space-y-2">
           {[1, 2, 3].map((i) => (
-            <div key={i} className="h-5 rounded bg-zinc-800 animate-pulse" />
+            <div key={i} className="h-5 animate-pulse rounded bg-[var(--muted)]" />
           ))}
         </div>
       ) : scheduledCount === 0 ? (
-        <p className="text-sm text-zinc-500">No scheduled tasks</p>
+        <p className="text-sm text-[var(--muted-foreground)]">No scheduled tasks</p>
       ) : (
         <div className="space-y-4">
           <div className="space-y-2">
-            <div className="flex items-center justify-between text-xs uppercase tracking-wide text-zinc-500">
+            <div className="flex items-center justify-between text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
               <span>Currently running</span>
               <span>{runningEntries.length}</span>
             </div>
             {runningEntries.length === 0 ? (
-              <p className="text-sm text-zinc-500">Nothing running right now</p>
+              <p className="text-sm text-[var(--muted-foreground)]">Nothing running right now</p>
             ) : (
               <div className="space-y-2">
                 {runningEntries.slice(0, 3).map((entry) => (
@@ -250,13 +250,13 @@ export function ScheduledTasksSummaryCard({
                     disabled={entry.kind !== "prompt" || !projectSlug}
                     className={`flex w-full items-center gap-2 rounded-md px-1 py-1 text-left text-sm transition-colors ${
                       entry.kind === "prompt" && projectSlug
-                        ? "cursor-pointer hover:bg-zinc-800/70"
+                        ? "cursor-pointer hover:bg-[var(--secondary)]"
                         : "cursor-default"
                     }`}
                   >
                     <span className="h-2 w-2 shrink-0 rounded-full bg-emerald-400" />
-                    <span className="truncate text-zinc-300">{entry.title}</span>
-                    <span className="ml-auto shrink-0 text-xs text-emerald-400">running</span>
+                    <span className="truncate text-[var(--foreground)]">{entry.title}</span>
+                    <span className="ml-auto shrink-0 text-xs text-[var(--status-completed-text)]">running</span>
                   </button>
                 ))}
               </div>
@@ -264,12 +264,12 @@ export function ScheduledTasksSummaryCard({
           </div>
 
           <div className="space-y-2">
-            <div className="flex items-center justify-between text-xs uppercase tracking-wide text-zinc-500">
+            <div className="flex items-center justify-between text-xs uppercase tracking-wide text-[var(--muted-foreground)]">
               <span>Upcoming runs</span>
               <span>{upcomingEntries.length}</span>
             </div>
             {upcomingEntries.length === 0 ? (
-              <p className="text-sm text-zinc-500">No upcoming runs</p>
+              <p className="text-sm text-[var(--muted-foreground)]">No upcoming runs</p>
             ) : (
               <div className="space-y-2">
                 {upcomingEntries.slice(0, 3).map((entry) => (
@@ -280,16 +280,16 @@ export function ScheduledTasksSummaryCard({
                     disabled={entry.kind !== "prompt" || !projectSlug}
                     className={`flex w-full items-center gap-2 rounded-md px-1 py-1 text-left text-sm transition-colors ${
                       entry.kind === "prompt" && projectSlug
-                        ? "cursor-pointer hover:bg-zinc-800/70"
+                        ? "cursor-pointer hover:bg-[var(--secondary)]"
                         : "cursor-default"
                     }`}
                   >
-                    <Clock className="h-3.5 w-3.5 shrink-0 text-zinc-500" />
+                    <Clock className="h-3.5 w-3.5 shrink-0 text-[var(--muted-foreground)]" />
                     <div className="min-w-0 flex-1">
-                      <div className="truncate text-zinc-300">{entry.title}</div>
-                      <div className="text-xs text-zinc-500">
+                      <div className="truncate text-[var(--foreground)]">{entry.title}</div>
+                      <div className="text-xs text-[var(--muted-foreground)]">
                         {formatNextRun(entry.nextRunAt)}{" "}
-                        <span className="text-zinc-400">• {formatCountdown(entry.nextRunAt)}</span>
+                        <span className="text-[var(--app-shell-soft-text)]">• {formatCountdown(entry.nextRunAt)}</span>
                       </div>
                     </div>
                   </button>

package/cloud-runtime/standalone/apps/local/components/projects/TeamsSummaryCard.tsx

@@ -27,19 +27,19 @@ export function TeamsSummaryCard({ projectId, onViewAll }: TeamsSummaryCardProps
   }, [projectId]);
 
   return (
-    <div className="rounded-2xl border border-zinc-800 bg-zinc-900/50 p-4">
+    <div className="rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] p-4">
       <div className="flex items-center justify-between mb-3">
         <div className="flex items-center gap-2">
-          <Users className="w-4 h-4 text-zinc-400" />
-          <span className="text-sm font-medium text-zinc-200">Teams</span>
+          <Users className="h-4 w-4 text-[var(--muted-foreground)]" />
+          <span className="text-sm font-medium text-[var(--foreground)]">Teams</span>
           {!loading && teams.length > 0 && (
-            <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400">
+            <span className="rounded-full bg-[var(--secondary)] px-2 py-0.5 text-xs text-[var(--muted-foreground)]">
               {teams.length}
             </span>
           )}
         </div>
         {onViewAll && (
-          <button onClick={onViewAll} className="flex items-center gap-1 text-xs text-zinc-500 hover:text-zinc-300">
+          <button onClick={onViewAll} className="flex items-center gap-1 text-xs text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]">
             View all <ArrowRight className="w-3 h-3" />
           </button>
         )}
@@ -48,18 +48,18 @@ export function TeamsSummaryCard({ projectId, onViewAll }: TeamsSummaryCardProps
       {loading ? (
         <div className="space-y-2">
           {[1, 2, 3].map((i) => (
-            <div key={i} className="h-5 rounded bg-zinc-800 animate-pulse" />
+            <div key={i} className="h-5 animate-pulse rounded bg-[var(--muted)]" />
           ))}
         </div>
       ) : teams.length === 0 ? (
-        <p className="text-sm text-zinc-500">No teams yet</p>
+        <p className="text-sm text-[var(--muted-foreground)]">No teams yet</p>
       ) : (
         <div className="space-y-2">
           {teams.slice(0, 5).map((team) => (
             <div key={team.id} className="flex items-center gap-2 text-sm">
-              <Users className="w-4 h-4 text-zinc-500" />
-              <span className="text-zinc-300">{team.name}</span>
-              <span className="text-zinc-500">{team.agents.length} agents</span>
+              <Users className="h-4 w-4 text-[var(--muted-foreground)]" />
+              <span className="text-[var(--foreground)]">{team.name}</span>
+              <span className="text-[var(--muted-foreground)]">{team.agents.length} agents</span>
             </div>
           ))}
         </div>

package/cloud-runtime/standalone/apps/local/components/projects/TeamsView.tsx

@@ -187,7 +187,7 @@ export function TeamsView({
   // --- Loading ---
   if (loading) {
     return (
-      <div className="flex items-center justify-center p-12 text-zinc-400">
+      <div className="flex items-center justify-center p-12 text-[var(--muted-foreground)]">
         <Loader2 className="w-5 h-5 animate-spin mr-2" />
         Loading teams...
       </div>
@@ -197,12 +197,12 @@ export function TeamsView({
   // --- Error ---
   if (error) {
     return (
-      <div className="flex flex-col items-center justify-center p-12 gap-2 text-zinc-400">
-        <AlertTriangle className="w-5 h-5 text-red-400" />
-        <p className="text-sm text-red-400">{error}</p>
+      <div className="flex flex-col items-center justify-center gap-2 p-12 text-[var(--muted-foreground)]">
+        <AlertTriangle className="h-5 w-5 text-[var(--destructive)]" />
+        <p className="text-sm text-[var(--destructive)]">{error}</p>
         <button
           onClick={fetchTeams}
-          className="text-xs text-zinc-500 hover:text-zinc-300 underline"
+          className="text-xs text-[var(--muted-foreground)] underline transition-colors hover:text-[var(--foreground)]"
         >
           Retry
         </button>
@@ -216,11 +216,11 @@ export function TeamsView({
       {/* Header */}
       <div className="flex items-center justify-between gap-4">
         <div className="min-w-0">
-          <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-zinc-500">
+          <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-[var(--muted-foreground)]">
             <Activity className="h-3.5 w-3.5" />
             Live Team Activity
           </div>
-          <p className="mt-1 text-sm text-zinc-400">
+          <p className="mt-1 text-sm text-[var(--muted-foreground)]">
             {activeAgentCount > 0
               ? `${activeAgentCount} active ${activeAgentCount === 1 ? "agent" : "agents"} across ${activeTeamCount} ${activeTeamCount === 1 ? "team" : "teams"}`
               : "No agents are active right now."}
@@ -237,10 +237,10 @@ export function TeamsView({
 
       {/* Team cards */}
       {teams.length === 0 ? (
-        <div className="rounded-2xl border border-zinc-800 bg-zinc-900/50 p-8 text-center">
-          <Users className="w-8 h-8 text-zinc-600 mx-auto mb-3" />
-          <p className="text-sm text-zinc-400 mb-1">No teams yet</p>
-          <p className="text-xs text-zinc-500">
+        <div className="rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] p-8 text-center">
+          <Users className="mx-auto mb-3 h-8 w-8 text-[var(--app-shell-soft-text)]" />
+          <p className="mb-1 text-sm text-[var(--muted-foreground)]">No teams yet</p>
+          <p className="text-xs text-[var(--app-shell-soft-text)]">
             Add a team to organize your agents into specialized roles.
           </p>
         </div>
@@ -256,37 +256,37 @@ export function TeamsView({
                 key={team.id}
                 className={`rounded-2xl border p-4 flex flex-col gap-3 cursor-pointer transition-colors group ${
                   teamActiveProcesses.length > 0
-                    ? "border-emerald-700/70 bg-emerald-950/20 shadow-[0_0_0_1px_rgba(16,185,129,0.12)] hover:border-emerald-600"
-                    : "border-zinc-800 bg-zinc-900/50 hover:border-zinc-700"
+                    ? "border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] shadow-[0_0_0_1px_var(--status-completed-border)] hover:border-[var(--status-completed)]"
+                    : "border-[var(--card-border)] bg-[var(--card-bg)] hover:border-[var(--card-hover-border)] hover:bg-[var(--secondary)]"
                 }`}
                 onClick={() => router.push(`/projects/${projectSlug}/teams/${team.id}`)}
               >
                 {/* Team header */}
                 <div className="flex items-start justify-between">
                   <div className="flex items-center gap-2 min-w-0">
-                    <Users className={`w-4 h-4 shrink-0 ${teamActiveProcesses.length > 0 ? "text-emerald-400" : "text-zinc-400"}`} />
-                    <span className="text-sm font-medium text-zinc-100 truncate">
+                    <Users className={`h-4 w-4 shrink-0 ${teamActiveProcesses.length > 0 ? "text-[var(--status-completed)]" : "text-[var(--muted-foreground)]"}`} />
+                    <span className="truncate text-sm font-medium text-[var(--foreground)]">
                       {team.name}
                     </span>
                   </div>
                   <div className="flex items-center gap-2 shrink-0">
                     {liveAgentCount > 0 && (
-                      <span className="inline-flex items-center gap-1 rounded-full border border-emerald-700/60 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-emerald-300">
+                      <span className="inline-flex items-center gap-1 rounded-full border border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[var(--status-completed-text)]">
                         <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
                         {liveAgentCount} live
                       </span>
                     )}
                     {team.template_id && (
-                      <span className="text-[10px] font-medium uppercase tracking-wider px-2 py-0.5 rounded-full bg-zinc-800 text-zinc-400 border border-zinc-700">
+                      <span className="rounded-full border border-[var(--tone-neutral-border)] bg-[var(--tone-neutral-bg)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[var(--tone-neutral)]">
                         {team.template_id}
                       </span>
                     )}
-                    <ChevronRight className="w-4 h-4 text-zinc-600 opacity-0 group-hover:opacity-100 transition-opacity" />
+                    <ChevronRight className="h-4 w-4 text-[var(--app-shell-soft-text)] opacity-0 transition-opacity group-hover:opacity-100" />
                   </div>
                 </div>
 
                 {/* Agent count */}
-                <p className="text-xs text-zinc-500">
+                <p className="text-xs text-[var(--muted-foreground)]">
                   {team.agents.length} agent{team.agents.length !== 1 ? "s" : ""}
                   {liveAgentCount > 0 ? ` · ${liveAgentCount} active now` : ""}
                 </p>
@@ -304,11 +304,11 @@ export function TeamsView({
                             title={`${agentName(agent.agent_id)} (${agent.role_key})`}
                             className={`inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full border ${
                               isActive
-                                ? "bg-emerald-500/10 text-emerald-200 border-emerald-700/60"
-                                : "bg-zinc-800 text-zinc-300 border-zinc-700"
+                                ? "border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] text-[var(--status-completed-text)]"
+                                : "border-[var(--border)] bg-[var(--secondary)] text-[var(--foreground)]"
                             }`}
                           >
-                            <span className={`w-1.5 h-1.5 rounded-full shrink-0 ${isActive ? "bg-emerald-400" : "bg-zinc-500"}`} />
+                            <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${isActive ? "bg-emerald-400" : "bg-[var(--muted-foreground)]"}`} />
                             {agentName(agent.agent_id)}
                           </span>
                         );
@@ -323,25 +323,25 @@ export function TeamsView({
       )}
 
       {teamActivityRows.length > 0 && (
-        <section className="rounded-2xl border border-zinc-800 bg-zinc-900/50 overflow-hidden">
-          <div className="flex items-center justify-between gap-3 border-b border-zinc-800 px-4 py-3">
+        <section className="overflow-hidden rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)]">
+          <div className="flex items-center justify-between gap-3 border-b border-[var(--border)] px-4 py-3">
             <div>
-              <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-zinc-500">
+              <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-[var(--muted-foreground)]">
                 <Activity className="h-3.5 w-3.5" />
                 Working Now
               </div>
-              <p className="mt-1 text-xs text-zinc-500">
+              <p className="mt-1 text-xs text-[var(--muted-foreground)]">
                 Live activity across all teams.
               </p>
             </div>
-            <span className="rounded-full border border-emerald-700/60 bg-emerald-500/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-wider text-emerald-300">
+            <span className="rounded-full border border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] px-2.5 py-1 text-[10px] font-medium uppercase tracking-wider text-[var(--status-completed-text)]">
               {teamActivityRows.length} live {teamActivityRows.length === 1 ? "entry" : "entries"}
             </span>
           </div>
           <div className="overflow-x-auto">
             <table className="min-w-full text-sm">
-              <thead className="bg-zinc-950/40">
-                <tr className="text-left text-[11px] uppercase tracking-[0.18em] text-zinc-500">
+              <thead className="bg-[var(--secondary)]">
+                <tr className="text-left text-[11px] uppercase tracking-[0.18em] text-[var(--muted-foreground)]">
                   <th className="px-4 py-3 font-medium">Team</th>
                   <th className="px-4 py-3 font-medium">Agent</th>
                   <th className="px-4 py-3 font-medium">Status</th>
@@ -353,7 +353,7 @@ export function TeamsView({
                 {teamActivityRows.map((row) => (
                   <tr
                     key={row.key}
-                    className="cursor-pointer border-t border-zinc-800/80 text-zinc-300 transition-colors hover:bg-zinc-800/30"
+                    className="cursor-pointer border-t border-[var(--border)] text-[var(--foreground)] transition-colors hover:bg-[var(--secondary)]"
                     onClick={() =>
                       router.push(
                         row.linearIssueId && row.linearRunId
@@ -368,22 +368,22 @@ export function TeamsView({
                           event.stopPropagation();
                           router.push(`/projects/${projectSlug}/teams/${row.teamId}`);
                         }}
-                        className="text-left font-medium text-zinc-100 hover:text-white"
+                        className="text-left font-medium text-[var(--foreground)] transition-colors hover:text-[var(--primary)]"
                       >
                         {row.teamName}
                       </button>
                     </td>
-                    <td className="px-4 py-3 text-zinc-200">{row.agentName}</td>
+                    <td className="px-4 py-3 text-[var(--foreground)]">{row.agentName}</td>
                     <td className="px-4 py-3">
-                      <span className="inline-flex items-center gap-1.5 rounded-full border border-emerald-700/60 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-300">
+                      <span className="inline-flex items-center gap-1.5 rounded-full border border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] px-2 py-0.5 text-[11px] font-medium text-[var(--status-completed-text)]">
                         <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
                         {row.state === "spawning" ? "Starting" : "Working"}
                       </span>
                     </td>
-                    <td className="max-w-[24rem] px-4 py-3 text-zinc-400">
+                    <td className="max-w-[24rem] px-4 py-3 text-[var(--muted-foreground)]">
                       <span className="block truncate">{row.threadLabel}</span>
                     </td>
-                    <td className="px-4 py-3 text-zinc-500">{row.lastActiveLabel}</td>
+                    <td className="px-4 py-3 text-[var(--muted-foreground)]">{row.lastActiveLabel}</td>
                   </tr>
                 ))}
               </tbody>
@@ -394,23 +394,23 @@ export function TeamsView({
 
       {/* Unassigned agents */}
       {unassignedAgents.length > 0 && (
-        <div className="rounded-2xl border border-amber-800/50 bg-amber-900/10 p-4 flex flex-col gap-3">
+        <div className="flex flex-col gap-3 rounded-2xl border border-[var(--status-blocked-border)] bg-[var(--status-blocked-bg)] p-4">
           <div className="flex items-center gap-2">
-            <AlertTriangle className="w-4 h-4 text-amber-500 shrink-0" />
-            <span className="text-sm font-medium text-zinc-200">
+            <AlertTriangle className="h-4 w-4 shrink-0 text-[var(--status-blocked)]" />
+            <span className="text-sm font-medium text-[var(--foreground)]">
               Unassigned Agents
             </span>
-            <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400">
+            <span className="rounded-full bg-[var(--secondary)] px-2 py-0.5 text-xs text-[var(--muted-foreground)]">
               {unassignedAgents.length}
             </span>
             {unassignedActiveAgentCount > 0 && (
-              <span className="inline-flex items-center gap-1 rounded-full border border-emerald-700/60 bg-emerald-500/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-emerald-300">
+              <span className="inline-flex items-center gap-1 rounded-full border border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[var(--status-completed-text)]">
                 <span className="h-1.5 w-1.5 rounded-full bg-emerald-400 animate-pulse" />
                 {unassignedActiveAgentCount} live
               </span>
             )}
           </div>
-          <p className="text-xs text-zinc-500">
+          <p className="text-xs text-[var(--muted-foreground)]">
             These agents are in the project but not assigned to any team.
           </p>
           <div className="flex flex-wrap gap-1.5">
@@ -419,13 +419,13 @@ export function TeamsView({
                 key={agent.agent_id}
                 className={`inline-flex items-center gap-1 text-[11px] px-2 py-0.5 rounded-full border ${
                   activeAgentIds.has(agent.agent_id)
-                    ? "bg-emerald-500/10 text-emerald-200 border-emerald-700/60"
-                    : "bg-zinc-800 text-zinc-300 border-zinc-700"
+                    ? "border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] text-[var(--status-completed-text)]"
+                    : "border-[var(--border)] bg-[var(--secondary)] text-[var(--foreground)]"
                 }`}
               >
                 <span
                   className={`w-1.5 h-1.5 rounded-full shrink-0 ${
-                    activeAgentIds.has(agent.agent_id) ? "bg-emerald-400" : "bg-zinc-500"
+                    activeAgentIds.has(agent.agent_id) ? "bg-emerald-400" : "bg-[var(--muted-foreground)]"
                   }`}
                 />
                 {agentName(agent.agent_id)}
@@ -433,8 +433,8 @@ export function TeamsView({
             ))}
           </div>
           {unassignedActiveProcesses.length > 0 && (
-            <div className="rounded-xl border border-emerald-800/40 bg-emerald-900/10 p-3 flex flex-col gap-2">
-              <div className="flex items-center gap-2 text-[10px] font-medium uppercase tracking-[0.18em] text-emerald-300">
+            <div className="flex flex-col gap-2 rounded-xl border border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] p-3">
+              <div className="flex items-center gap-2 text-[10px] font-medium uppercase tracking-[0.18em] text-[var(--status-completed-text)]">
                 <Activity className="h-3.5 w-3.5" />
                 Unassigned Activity
               </div>
@@ -442,11 +442,11 @@ export function TeamsView({
                 <div key={`unassigned-${process.workspaceId}-${process.threadId}-${process.agentId}`} className="flex items-start gap-2">
                   <span className="mt-1 h-1.5 w-1.5 rounded-full bg-emerald-400 shrink-0" />
                   <div className="min-w-0">
-                    <p className="text-xs text-zinc-200 truncate">
+                    <p className="truncate text-xs text-[var(--foreground)]">
                       <span className="font-medium">{agentName(process.agentId)}</span>{" "}
                       {process.state === "spawning" ? "is starting up" : "is working"}
                     </p>
-                    <p className="text-[11px] text-zinc-500 truncate">
+                    <p className="truncate text-[11px] text-[var(--muted-foreground)]">
                       {formatActivityThread(process)}
                     </p>
                   </div>
@@ -456,13 +456,13 @@ export function TeamsView({
           )}
           <div className="flex items-center gap-2 pt-1">
             <button
-              className="text-xs px-3 py-1 rounded-lg border border-zinc-700 text-zinc-400 hover:text-zinc-200 hover:border-zinc-600 transition-colors"
+              className="rounded-lg border border-[var(--border)] px-3 py-1 text-xs text-[var(--muted-foreground)] transition-colors hover:border-[var(--card-hover-border)] hover:text-[var(--foreground)]"
               onClick={() => router.push(`/projects/${projectSlug}/teams/adopt`)}
             >
               Adopt into team
             </button>
             <button
-              className="text-xs px-3 py-1 rounded-lg border border-zinc-700 text-zinc-400 hover:text-zinc-200 hover:border-zinc-600 transition-colors"
+              className="rounded-lg border border-[var(--border)] px-3 py-1 text-xs text-[var(--muted-foreground)] transition-colors hover:border-[var(--card-hover-border)] hover:text-[var(--foreground)]"
               onClick={() => router.push(`/projects/${projectSlug}/teams/replace`)}
             >
               Replace with preset

package/cloud-runtime/standalone/apps/local/components/projects/WorkingNowCard.tsx

@@ -156,34 +156,34 @@ export function WorkingNowCard({
   const totalActivities = activeProcesses.length;
 
   return (
-    <section className="col-span-full rounded-2xl border border-zinc-800 bg-zinc-900/50 overflow-hidden">
-      <div className="flex items-center justify-between gap-3 border-b border-zinc-800 px-4 py-3">
+    <section className="col-span-full overflow-hidden rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)]">
+      <div className="flex items-center justify-between gap-3 border-b border-[var(--border)] px-4 py-3">
         <div>
-          <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-zinc-500">
+          <div className="flex items-center gap-2 text-xs uppercase tracking-[0.18em] text-[var(--muted-foreground)]">
             <Activity className="h-3.5 w-3.5" />
             Working Now
           </div>
-          <p className="mt-1 text-xs text-zinc-500">
+          <p className="mt-1 text-xs text-[var(--muted-foreground)]">
             {agentGroups.length} {agentGroups.length === 1 ? "agent" : "agents"} active across{" "}
             {totalActivities} {totalActivities === 1 ? "thread" : "threads"}.
           </p>
         </div>
-        <span className="rounded-full border border-emerald-700/60 bg-emerald-500/10 px-2.5 py-1 text-[10px] font-medium uppercase tracking-wider text-emerald-300">
+        <span className="rounded-full border border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] px-2.5 py-1 text-[10px] font-medium uppercase tracking-wider text-[var(--status-completed-text)]">
           {totalActivities} live {totalActivities === 1 ? "entry" : "entries"}
         </span>
       </div>
 
-      <div className="divide-y divide-zinc-800/80">
+      <div className="divide-y divide-[var(--border)]">
         {agentGroups.map((group) => (
           <div key={group.agentId} className="px-4 py-3">
             {/* Agent header */}
             <div className="flex items-center gap-2 mb-2">
-              <span className="inline-flex items-center gap-1.5 text-sm font-medium text-zinc-100">
+              <span className="inline-flex items-center gap-1.5 text-sm font-medium text-[var(--foreground)]">
                 <span className="h-2 w-2 rounded-full bg-emerald-400 animate-pulse" />
                 {group.agentName}
               </span>
               {group.activities.length > 1 && (
-                <span className="rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] text-zinc-400">
+                <span className="rounded-full bg-[var(--secondary)] px-2 py-0.5 text-[10px] text-[var(--muted-foreground)]">
                   {group.activities.length} threads
                 </span>
               )}
@@ -194,7 +194,7 @@ export function WorkingNowCard({
               {group.activities.map((activity) => (
                 <div
                   key={activity.key}
-                  className="flex items-center gap-3 rounded-lg px-2 py-1.5 -mx-2 cursor-pointer text-sm transition-colors hover:bg-zinc-800/40"
+                  className="mx-[-0.5rem] flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-[var(--secondary)]"
                   onClick={() =>
                     router.push(
                       activity.linearIssueId && activity.linearRunId
@@ -203,14 +203,14 @@ export function WorkingNowCard({
                     )
                   }
                 >
-                  <span className="inline-flex items-center gap-1.5 shrink-0 rounded-full border border-emerald-700/60 bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-300">
+                  <span className="inline-flex shrink-0 items-center gap-1.5 rounded-full border border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] px-2 py-0.5 text-[11px] font-medium text-[var(--status-completed-text)]">
                     <span className="h-1.5 w-1.5 rounded-full bg-emerald-400" />
                     {activity.state === "spawning" ? "Starting" : "Working"}
                   </span>
-                  <span className="text-zinc-400 truncate min-w-0 flex-1">
+                  <span className="min-w-0 flex-1 truncate text-[var(--foreground)]">
                     {activity.threadLabel}
                   </span>
-                  <span className="text-zinc-500 text-xs shrink-0">
+                  <span className="shrink-0 text-xs text-[var(--muted-foreground)]">
                     {activity.lastActiveLabel}
                   </span>
                 </div>

package/cloud-runtime/standalone/apps/local/components/projects/home/ObjectiveCard.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Target } from "lucide-react";
+import { AlertTriangle, Target } from "lucide-react";
 import type { ProjectObjective, ProjectObjectiveHealth } from "@/lib/project-objectives";
 
 interface ObjectiveCardProps {
@@ -10,10 +10,10 @@ interface ObjectiveCardProps {
 }
 
 const HEALTH_CONFIG: Record<ProjectObjectiveHealth, { label: string; dot: string; badge: string }> = {
-  on_track: { label: "On Track", dot: "bg-emerald-400", badge: "text-emerald-400 border-emerald-700/60 bg-emerald-500/10" },
-  at_risk: { label: "At Risk", dot: "bg-amber-400", badge: "text-amber-400 border-amber-700/60 bg-amber-500/10" },
-  off_track: { label: "Off Track", dot: "bg-red-400", badge: "text-red-400 border-red-700/60 bg-red-500/10" },
-  done: { label: "Done", dot: "bg-zinc-400", badge: "text-zinc-400 border-zinc-700/60 bg-zinc-500/10" },
+  on_track: { label: "On Track", dot: "bg-[var(--status-completed)]", badge: "border-[var(--status-completed-border)] bg-[var(--status-completed-bg)] text-[var(--status-completed-text)]" },
+  at_risk: { label: "At Risk", dot: "bg-[var(--status-blocked)]", badge: "border-[var(--status-blocked-border)] bg-[var(--status-blocked-bg)] text-[var(--status-blocked-text)]" },
+  off_track: { label: "Off Track", dot: "bg-[var(--status-failed)]", badge: "border-[var(--status-failed-border)] bg-[var(--status-failed-bg)] text-[var(--status-failed-text)]" },
+  done: { label: "Done", dot: "bg-[var(--muted-foreground)]", badge: "border-[var(--border)] bg-[var(--secondary)] text-[var(--muted-foreground)]" },
 };
 
 export function ObjectiveCard({ objective, teamName, onClick }: ObjectiveCardProps) {
@@ -24,12 +24,12 @@ export function ObjectiveCard({ objective, teamName, onClick }: ObjectiveCardPro
     <button
       type="button"
       onClick={onClick}
-      className={`w-full text-left rounded-2xl border border-zinc-800 bg-zinc-900/50 p-4 transition-colors hover:bg-zinc-800/50 ${isDone ? "opacity-60" : ""}`}
+      className={`w-full rounded-2xl border border-[var(--card-border)] bg-[var(--card-bg)] p-4 text-left transition-colors hover:bg-[var(--secondary)] ${isDone ? "opacity-60" : ""}`}
     >
       <div className="flex items-start justify-between gap-2 mb-3">
         <div className="flex items-center gap-2 min-w-0">
           <span className={`h-2 w-2 shrink-0 rounded-full ${health.dot}`} />
-          <span className="text-sm font-medium text-zinc-200 truncate">{objective.title}</span>
+          <span className="truncate text-sm font-medium text-[var(--foreground)]">{objective.title}</span>
         </div>
         <span className={`shrink-0 rounded-full border px-2 py-0.5 text-[11px] font-medium ${health.badge}`}>
           {health.label}
@@ -37,7 +37,7 @@ export function ObjectiveCard({ objective, teamName, onClick }: ObjectiveCardPro
       </div>
 
       <div className="mb-2">
-        <div className="h-1.5 rounded-full bg-zinc-800 overflow-hidden">
+        <div className="h-1.5 overflow-hidden rounded-full bg-[var(--muted)]">
           <div
             className="h-full rounded-full bg-emerald-500/70 transition-all"
             style={{ width: `${Math.min(objective.progress, 100)}%` }}
@@ -45,8 +45,11 @@ export function ObjectiveCard({ objective, teamName, onClick }: ObjectiveCardPro
         </div>
       </div>
 
-      <div className="flex items-center justify-between text-xs text-zinc-500">
-        <span>{teamName ?? "No team"}</span>
+      <div className="flex items-center justify-between text-xs text-[var(--muted-foreground)]">
+        <span className={teamName ? "" : "flex items-center gap-1 text-[var(--status-blocked-text)]"}>
+          {!teamName && <AlertTriangle className="h-3 w-3" />}
+          {teamName ?? "No team"}
+        </span>
         <span>{objective.progress}%</span>
       </div>
     </button>