@mndrk/agx 2.0.22 → 2.0.24

package/cloud-runtime/standalone/components/chat-ui/ProjectPicker.tsx

@@ -51,16 +51,16 @@ export function ProjectPicker({ onSelect, onClose }: Props) {
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm">
-      <div className="bg-white rounded-2xl shadow-xl border border-slate-200 w-full max-w-sm mx-4 overflow-hidden">
-        <div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
+      <div className="bg-[var(--app-shell-elevated)] rounded-2xl shadow-xl border border-[var(--app-shell-border)] w-full max-w-sm mx-4 overflow-hidden">
+        <div className="flex items-center justify-between px-5 py-4 border-b border-[var(--app-shell-border)]">
           <div className="flex items-center gap-2">
-            <FolderOpen className="w-4 h-4 text-slate-500" />
-            <h3 className="text-sm font-bold text-slate-900">Select Project</h3>
+            <FolderOpen className="w-4 h-4 text-[var(--app-shell-muted)]" />
+            <h3 className="text-sm font-bold text-[var(--foreground)]">Select Project</h3>
           </div>
           <button
             type="button"
             onClick={onClose}
-            className="p-1 text-slate-400 hover:text-slate-600 rounded-md hover:bg-slate-100"
+            className="p-1 text-[var(--app-shell-muted)] hover:text-[var(--foreground)] rounded-md hover:bg-[var(--app-shell-subtle)]"
           >
             <X className="w-4 h-4" />
           </button>
@@ -69,7 +69,7 @@ export function ProjectPicker({ onSelect, onClose }: Props) {
         <div className="p-4 max-h-64 overflow-y-auto">
           {loading && (
             <div className="flex items-center justify-center py-8">
-              <Loader2 className="w-5 h-5 text-slate-400 animate-spin" />
+              <Loader2 className="w-5 h-5 text-[var(--app-shell-muted)] animate-spin" />
             </div>
           )}
 
@@ -81,7 +81,7 @@ export function ProjectPicker({ onSelect, onClose }: Props) {
           )}
 
           {!loading && !error && projects.length === 0 && (
-            <p className="text-xs text-slate-500 text-center py-4">
+            <p className="text-xs text-[var(--app-shell-muted)] text-center py-4">
               No projects found. Create one below.
             </p>
           )}
@@ -92,17 +92,17 @@ export function ProjectPicker({ onSelect, onClose }: Props) {
                 key={p.id}
                 type="button"
                 onClick={() => onSelect(p.id, p.name)}
-                className="w-full text-left px-3 py-2.5 rounded-lg hover:bg-slate-50 transition-colors flex items-center gap-3 group"
+                className="w-full text-left px-3 py-2.5 rounded-lg hover:bg-[var(--app-shell-subtle)] transition-colors flex items-center gap-3 group"
               >
-                <div className="w-8 h-8 rounded-lg bg-slate-100 flex items-center justify-center shrink-0">
-                  <FolderOpen className="w-4 h-4 text-slate-400 group-hover:text-slate-600" />
+                <div className="w-8 h-8 rounded-lg bg-[var(--app-shell-subtle)] flex items-center justify-center shrink-0">
+                  <FolderOpen className="w-4 h-4 text-[var(--app-shell-muted)] group-hover:text-[var(--foreground)]" />
                 </div>
                 <div className="min-w-0">
-                  <div className="text-sm font-semibold text-slate-800 truncate">
+                  <div className="text-sm font-semibold text-[var(--foreground)] truncate">
                     {p.name}
                   </div>
                   {p.description && (
-                    <div className="text-[11px] text-slate-500 truncate">
+                    <div className="text-[11px] text-[var(--app-shell-muted)] truncate">
                       {p.description}
                     </div>
                   )}
@@ -111,7 +111,7 @@ export function ProjectPicker({ onSelect, onClose }: Props) {
             ))}
         </div>
 
-        <div className="px-4 pb-4 pt-2 border-t border-slate-100">
+        <div className="px-4 pb-4 pt-2 border-t border-[var(--app-shell-border)]">
           {showCreateForm ? (
             <div className="flex items-center gap-2">
               <input
@@ -121,20 +121,20 @@ export function ProjectPicker({ onSelect, onClose }: Props) {
                 onKeyDown={(e) => e.key === "Enter" && handleCreate()}
                 placeholder="Project name"
                 autoFocus
-                className="flex-1 h-8 px-3 text-sm border border-slate-200 rounded-lg outline-none focus:ring-1 focus:ring-slate-300"
+                className="flex-1 h-8 px-3 text-sm bg-[var(--input)] border border-[var(--app-shell-border)] rounded-lg outline-none focus:ring-1 focus:ring-[var(--ring)] text-[var(--foreground)]"
               />
               <button
                 type="button"
                 onClick={handleCreate}
                 disabled={creating || !newProjectName.trim()}
-                className="h-8 px-3 text-xs font-bold text-white bg-slate-900 hover:bg-slate-800 rounded-lg disabled:opacity-40"
+                className="h-8 px-3 text-xs font-bold text-[var(--primary-foreground)] bg-[var(--primary)] hover:bg-[var(--primary-hover)] rounded-lg disabled:opacity-40"
               >
                 {creating ? "…" : "Create"}
               </button>
               <button
                 type="button"
                 onClick={() => setShowCreateForm(false)}
-                className="h-8 px-2 text-slate-400 hover:text-slate-600"
+                className="h-8 px-2 text-[var(--app-shell-muted)] hover:text-[var(--foreground)]"
               >
                 <X className="w-3.5 h-3.5" />
               </button>
@@ -143,7 +143,7 @@ export function ProjectPicker({ onSelect, onClose }: Props) {
             <button
               type="button"
               onClick={() => setShowCreateForm(true)}
-              className="flex items-center gap-1.5 text-xs font-bold text-slate-500 hover:text-slate-700"
+              className="flex items-center gap-1.5 text-xs font-bold text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
             >
               <Plus className="w-3.5 h-3.5" />
               Create new project

package/cloud-runtime/standalone/components/chat-ui/ReactionChip.tsx

@@ -24,7 +24,7 @@ export function ReactionChip({ type, count, participantIds }: Props) {
   return (
     <span
       title={title}
-      className="inline-flex items-center gap-1 rounded-full border border-zinc-300 bg-zinc-50 px-2 py-0.5 text-xs text-zinc-700"
+      className="inline-flex items-center gap-1 rounded-full border border-[var(--app-shell-border)] bg-[var(--app-shell-surface)] px-2 py-0.5 text-xs text-[var(--foreground)]"
     >
       <span aria-hidden>{meta.symbol}</span>
       <span className="tabular-nums">{count}</span>

package/cloud-runtime/standalone/components/chat-ui/SearchResults.tsx

@@ -73,22 +73,22 @@ export function SearchResults({
     <div className="chat-scrollbar flex-1 overflow-y-auto p-4">
       <div className="max-w-3xl mx-auto">
         {headerSlot ? (
-          <div className="sticky top-0 z-20 bg-slate-50/70 backdrop-blur-md pt-4 pb-6 px-4 -mx-4 border-b border-transparent transition-colors">
+          <div className="sticky top-0 z-20 bg-[var(--app-shell-subtle)]/70 backdrop-blur-md pt-4 pb-6 px-4 -mx-4 border-b border-transparent transition-colors">
             <div className="max-w-2xl mx-auto">
               {headerSlot}
             </div>
           </div>
         ) : null}
-        <div className="mb-4 rounded-xl border border-slate-200 bg-white px-4 py-3">
-          <div className="text-sm font-semibold text-slate-700">Search results</div>
-          <div className="mt-1 text-sm text-slate-500">
+        <div className="mb-4 rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)] px-4 py-3">
+          <div className="text-sm font-semibold text-[var(--foreground)]">Search results</div>
+          <div className="mt-1 text-sm text-[var(--muted-foreground)]">
             {isLoading ? "Searching…" : `${total} result${total === 1 ? "" : "s"} for "${query}"`}
           </div>
           {error ? <div className="mt-2 text-sm text-rose-600">{error}</div> : null}
         </div>
 
         {!isLoading && !error && results.length === 0 ? (
-          <div className="mt-20 flex flex-col items-center justify-center space-y-2 text-slate-400">
+          <div className="mt-20 flex flex-col items-center justify-center space-y-2 text-[var(--app-shell-muted)]">
             <SearchX className="h-6 w-6" strokeWidth={1.5} />
             <p className="text-sm font-medium">No matching messages</p>
           </div>
@@ -105,13 +105,13 @@ export function SearchResults({
                 key={`${result.threadId}-${result.messageId}`}
                 type="button"
                 onClick={() => onSelectResult(result)}
-                className="w-full rounded-xl border border-slate-200 bg-white p-4 text-left transition hover:border-slate-300 hover:shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400"
+                className="w-full rounded-xl border border-[var(--border)] bg-[var(--card-bg)] p-4 text-left transition hover:border-[var(--border)] hover:shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400"
               >
                 <div className="mb-3 flex items-center justify-between gap-3">
                   <div className="flex min-w-0 items-center gap-2">
-                    <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-slate-100">
+                    <div className="flex h-8 w-8 items-center justify-center overflow-hidden rounded-full bg-[var(--muted)]">
                       {result.role === "user" ? (
-                        <User className="h-4 w-4 text-slate-700" />
+                        <User className="h-4 w-4 text-[var(--foreground)]" />
                       ) : participant ? (
                         <Link href={`/agents/${participant.id}`} onClick={(e) => e.stopPropagation()} className="h-full w-full hover:ring-2 hover:ring-blue-300 rounded-full transition-shadow">
                           <img
@@ -121,21 +121,21 @@ export function SearchResults({
                           />
                         </Link>
                       ) : (
-                        <Bot className="h-4 w-4 text-slate-700" />
+                        <Bot className="h-4 w-4 text-[var(--foreground)]" />
                       )}
                     </div>
                     <div className="min-w-0">
                       {result.role !== "user" && participant ? (
-                        <Link href={`/agents/${participant.id}`} onClick={(e) => e.stopPropagation()} className="truncate text-sm font-semibold text-slate-800 hover:underline block">{authorName}</Link>
+                        <Link href={`/agents/${participant.id}`} onClick={(e) => e.stopPropagation()} className="truncate text-sm font-semibold text-[var(--foreground)] hover:underline block">{authorName}</Link>
                       ) : (
-                        <p className="truncate text-sm font-semibold text-slate-800">{authorName}</p>
+                        <p className="truncate text-sm font-semibold text-[var(--foreground)]">{authorName}</p>
                       )}
-                      <p className="truncate text-xs text-slate-500">{threadTitle}</p>
+                      <p className="truncate text-xs text-[var(--muted-foreground)]">{threadTitle}</p>
                     </div>
                   </div>
-                  <span className="shrink-0 text-xs text-slate-400">{formatTimestamp(result.timestamp)}</span>
+                  <span className="shrink-0 text-xs text-[var(--muted-foreground)]">{formatTimestamp(result.timestamp)}</span>
                 </div>
-                <p className="text-sm leading-relaxed text-slate-700">{renderSnippet(result.snippet)}</p>
+                <p className="text-sm leading-relaxed text-[var(--foreground)]">{renderSnippet(result.snippet)}</p>
               </button>
             );
           })}

package/cloud-runtime/standalone/components/chat-ui/StatusIndicator.tsx

@@ -49,7 +49,7 @@ export function StatusIndicator() {
       ? "bg-emerald-400"
       : status === "degraded"
         ? "bg-amber-400"
-        : "bg-slate-300";
+        : "bg-[var(--app-shell-muted)]";
 
   const pulseColor =
     status === "degraded" ? "animate-pulse" : "";
@@ -62,26 +62,26 @@ export function StatusIndicator() {
     >
       <Link
         href="/status"
-        className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-slate-200 bg-white hover:bg-slate-50 transition-all focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-400"
+        className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] transition-all hover:bg-[var(--app-shell-subtle)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ring)]"
         title="System status"
       >
         <span className={`h-2.5 w-2.5 rounded-full ${dotColor} ${pulseColor}`} />
       </Link>
 
       {showTooltip && (
-        <div className="absolute top-full right-0 mt-1.5 w-52 rounded-lg border border-slate-200 bg-white p-3 shadow-lg z-50 text-xs">
+        <div className="absolute top-full right-0 z-50 mt-1.5 w-52 rounded-lg border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] p-3 text-xs shadow-lg">
           {services.length > 0 ? (
             <ul className="space-y-1.5">
               {services.map((s) => (
                 <li key={s.name} className="flex items-center justify-between">
-                  <span className="text-slate-700 font-medium">{s.name}</span>
+                  <span className="font-medium text-[var(--foreground)]">{s.name}</span>
                   <span
                     className={
                       s.status === "ok"
                         ? "text-emerald-600"
                         : s.status === "error"
                           ? "text-red-500"
-                          : "text-slate-400"
+                          : "text-[var(--muted-foreground)]"
                     }
                   >
                     {s.status === "ok" ? "Healthy" : s.status === "error" ? s.detail || "Error" : "Unavailable"}
@@ -90,10 +90,10 @@ export function StatusIndicator() {
               ))}
             </ul>
           ) : (
-            <p className="text-slate-400">Checking...</p>
+            <p className="text-[var(--app-shell-soft-text)]">Checking...</p>
           )}
           {lastCheck && (
-            <p className="text-slate-400 mt-2 pt-1.5 border-t border-slate-100">
+            <p className="mt-2 border-t border-[var(--app-shell-border)] pt-1.5 text-[var(--app-shell-soft-text)]">
               Last check: {lastCheck}
             </p>
           )}

package/cloud-runtime/standalone/components/chat-ui/TaskDraftCard.tsx

@@ -79,23 +79,23 @@ export function TaskDraftCard({ draft, onUpdate, onBuild, building }: Props) {
   const isEditable = draft.buildStatus === "idle" || !draft.buildStatus;
 
   return (
-    <div className="mt-6 p-4 bg-slate-50/80 rounded-2xl border border-slate-100 shadow-sm">
+    <div className="mt-6 p-4 bg-[var(--app-shell-subtle)]/80 rounded-2xl border border-[var(--border)] shadow-sm">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2">
           <Zap className="w-3.5 h-3.5 text-amber-500 fill-amber-500" />
-          <span className="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">
+          <span className="text-[10px] font-extrabold uppercase tracking-widest text-[var(--muted-foreground)]">
             Tasks
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-[11px] font-bold text-slate-500">
+          <span className="text-[11px] font-bold text-[var(--muted-foreground)]">
             {draft.tasks.length} task{draft.tasks.length !== 1 ? "s" : ""}
           </span>
           {draft.tasks.length > 0 && (
             <button
               type="button"
               onClick={copyAsMarkdown}
-              className="text-slate-400 hover:text-slate-600 transition-colors"
+              className="text-[var(--muted-foreground)] hover:text-[var(--muted-foreground)] transition-colors"
               title="Copy as markdown"
             >
               {copied ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
@@ -109,14 +109,14 @@ export function TaskDraftCard({ draft, onUpdate, onBuild, building }: Props) {
           const isExpanded = expandedId === task.id;
           return (
             <div key={task.id} className="group">
-              <div className="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-white/60 transition-colors">
+              <div className="flex items-center gap-2 py-1.5 px-2 rounded-lg hover:bg-[var(--app-shell-subtle)] transition-colors">
                 {isEditable && (
-                  <GripVertical className="w-3.5 h-3.5 text-slate-300 opacity-0 group-hover:opacity-100 cursor-grab shrink-0" />
+                  <GripVertical className="w-3.5 h-3.5 text-[var(--app-shell-soft-text)] opacity-0 group-hover:opacity-100 cursor-grab shrink-0" />
                 )}
                 <button
                   type="button"
                   onClick={() => setExpandedId(isExpanded ? null : task.id)}
-                  className="shrink-0 text-slate-400 hover:text-slate-600"
+                  className="shrink-0 text-[var(--app-shell-muted)] hover:text-[var(--foreground)]"
                 >
                   {isExpanded ? (
                     <ChevronDown className="w-3.5 h-3.5" />
@@ -129,10 +129,10 @@ export function TaskDraftCard({ draft, onUpdate, onBuild, building }: Props) {
                     type="text"
                     value={task.title}
                     onChange={(e) => updateTask(task.id, { title: e.target.value })}
-                    className="flex-1 text-xs font-semibold text-slate-700 bg-transparent border-none outline-none focus:ring-0 p-0"
+                    className="flex-1 text-xs font-semibold text-[var(--foreground)] bg-transparent border-none outline-none focus:ring-0 p-0"
                   />
                 ) : (
-                  <span className="flex-1 text-xs font-semibold text-slate-700">
+                  <span className="flex-1 text-xs font-semibold text-[var(--foreground)]">
                     {task.title}
                   </span>
                 )}
@@ -140,7 +140,7 @@ export function TaskDraftCard({ draft, onUpdate, onBuild, building }: Props) {
                   <button
                     type="button"
                     onClick={() => removeTask(task.id)}
-                    className="shrink-0 text-slate-300 hover:text-rose-500 opacity-0 group-hover:opacity-100 transition-all"
+                    className="shrink-0 text-[var(--app-shell-soft-text)] hover:text-rose-500 opacity-0 group-hover:opacity-100 transition-all"
                   >
                     <X className="w-3.5 h-3.5" />
                   </button>
@@ -155,10 +155,10 @@ export function TaskDraftCard({ draft, onUpdate, onBuild, building }: Props) {
                         updateTask(task.id, { description: e.target.value })
                       }
                       rows={4}
-                      className="w-full text-xs text-slate-500 bg-white/80 border border-slate-200 rounded-lg p-2 outline-none focus:ring-1 focus:ring-slate-300 resize-y"
+                      className="w-full text-xs text-[var(--muted-foreground)] bg-[var(--input)] border border-[var(--app-shell-border)] rounded-lg p-2 outline-none focus:ring-1 focus:ring-[var(--ring)] resize-y"
                     />
                   ) : (
-                    <p className="text-xs text-slate-500 whitespace-pre-wrap">
+                    <p className="text-xs text-[var(--muted-foreground)] whitespace-pre-wrap">
                       {task.description}
                     </p>
                   )}
@@ -174,7 +174,7 @@ export function TaskDraftCard({ draft, onUpdate, onBuild, building }: Props) {
           <button
             type="button"
             onClick={addTask}
-            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold text-slate-500 hover:text-slate-700 rounded-full border border-dashed border-slate-300 hover:border-slate-400 transition-all"
+            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-bold text-[var(--app-shell-muted)] hover:text-[var(--foreground)] rounded-full border border-dashed border-[var(--app-shell-border)] hover:border-[var(--app-shell-border-strong)] transition-all"
           >
             <Plus className="w-3 h-3" />
             Add task
@@ -186,7 +186,7 @@ export function TaskDraftCard({ draft, onUpdate, onBuild, building }: Props) {
             type="button"
             onClick={handleBuildClick}
             disabled={building || draft.tasks.length === 0}
-            className="flex items-center gap-1.5 px-4 py-1.5 text-xs font-bold text-white bg-slate-900 hover:bg-slate-800 rounded-full shadow-sm transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            className="flex items-center gap-1.5 px-4 py-1.5 text-xs font-bold text-[var(--primary-foreground)] bg-[var(--primary)] hover:bg-[var(--primary-hover)] rounded-full shadow-sm transition-all disabled:opacity-40 disabled:cursor-not-allowed"
           >
             <ArrowUpRight className="w-3 h-3" />
             {building ? "Pushing…" : "Push to agx"}

package/cloud-runtime/standalone/components/chat-ui/TaskStatusCard.tsx

@@ -14,8 +14,8 @@ interface Props {
 }
 
 const STATUS_ICON: Record<string, React.ReactNode> = {
-  queued: <Circle className="w-4 h-4 text-slate-300" />,
-  pending: <Circle className="w-4 h-4 text-slate-300" />,
+  queued: <Circle className="w-4 h-4 text-[var(--muted-foreground)]" />,
+  pending: <Circle className="w-4 h-4 text-[var(--muted-foreground)]" />,
   in_progress: <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />,
   running: <Loader2 className="w-4 h-4 text-blue-500 animate-spin" />,
   blocked: <Ban className="w-4 h-4 text-amber-500" />,
@@ -82,28 +82,28 @@ export function TaskStatusCard({ draft, onPush, pushing }: Props) {
   });
 
   return (
-    <div className="mt-6 p-4 bg-slate-50/80 rounded-2xl border border-slate-100 shadow-sm">
+    <div className="mt-6 p-4 bg-[var(--app-shell-subtle)]/80 rounded-2xl border border-[var(--border)] shadow-sm">
       <div className="flex items-center justify-between mb-4">
         <div className="flex items-center gap-2">
           <Zap className="w-3.5 h-3.5 text-amber-500 fill-amber-500" />
-          <span className="text-[10px] font-extrabold uppercase tracking-widest text-slate-400">
+          <span className="text-[10px] font-extrabold uppercase tracking-widest text-[var(--muted-foreground)]">
             Tasks
           </span>
           {draft.projectName && (
-            <span className="text-[10px] font-semibold text-slate-400">
+            <span className="text-[10px] font-semibold text-[var(--muted-foreground)]">
               · {draft.projectName}
             </span>
           )}
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-[11px] font-bold text-slate-600">
+          <span className="text-[11px] font-bold text-[var(--muted-foreground)]">
             {completedCount}/{draft.tasks.length} Complete
           </span>
           {draft.tasks.length > 0 && (
             <button
               type="button"
               onClick={copyAsMarkdown}
-              className="text-slate-400 hover:text-slate-600 transition-colors"
+              className="text-[var(--muted-foreground)] hover:text-[var(--muted-foreground)] transition-colors"
               title="Copy as markdown"
             >
               {copied ? <Check className="w-3.5 h-3.5 text-emerald-500" /> : <Copy className="w-3.5 h-3.5" />}
@@ -123,7 +123,7 @@ export function TaskStatusCard({ draft, onPush, pushing }: Props) {
             <div key={task.id} className="flex items-center gap-3">
               {icon}
               <span
-                className={`text-xs font-semibold ${isComplete ? "text-slate-600" : "text-slate-500"}`}
+                className={`text-xs font-semibold ${isComplete ? "text-[var(--muted-foreground)]" : "text-[var(--muted-foreground)]"}`}
               >
                 {task.title}
               </span>
@@ -132,7 +132,7 @@ export function TaskStatusCard({ draft, onPush, pushing }: Props) {
         })}
       </div>
 
-      <div className="h-1.5 w-full bg-slate-200 rounded-full overflow-hidden">
+      <div className="h-1.5 w-full bg-[var(--muted)] rounded-full overflow-hidden">
         <div
           className="h-full bg-emerald-500 rounded-full shadow-[0_0_8px_rgba(16,185,129,0.4)] transition-all duration-500"
           style={{ width: `${Math.round(progress * 100)}%` }}
@@ -151,7 +151,7 @@ export function TaskStatusCard({ draft, onPush, pushing }: Props) {
             type="button"
             onClick={handlePushClick}
             disabled={pushing}
-            className="flex items-center gap-1.5 px-4 py-1.5 text-xs font-bold text-white bg-slate-900 hover:bg-slate-800 rounded-full shadow-sm transition-all disabled:opacity-40 disabled:cursor-not-allowed"
+            className="flex items-center gap-1.5 px-4 py-1.5 text-xs font-bold text-[var(--primary-foreground)] bg-[var(--primary)] hover:bg-[var(--primary-hover)] rounded-full shadow-sm transition-all disabled:opacity-40 disabled:cursor-not-allowed"
           >
             <ArrowUpRight className="w-3 h-3" />
             {pushing ? "Pushing…" : "Push to agx"}

package/cloud-runtime/standalone/components/chat-ui/ThreadMentionPopover.tsx

@@ -22,11 +22,11 @@ export function ThreadMentionPopover({
 
   return (
     <div
-      className="absolute bottom-full left-0 mb-2 w-80 bg-white rounded-xl shadow-xl border border-slate-200 overflow-hidden z-50 animate-in fade-in zoom-in-95 duration-100"
+      className="absolute bottom-full left-0 mb-2 w-80 bg-[var(--app-shell-elevated)] rounded-xl shadow-xl border border-[var(--app-shell-border)] overflow-hidden z-50 animate-in fade-in zoom-in-95 duration-100"
       role="listbox"
       id={listboxId}
     >
-      <div className="px-3 py-2 bg-slate-50 border-b border-slate-100 text-[11px] font-bold text-slate-500 uppercase tracking-wider">
+      <div className="px-3 py-2 bg-[var(--app-shell-subtle)] border-b border-[var(--app-shell-border)] text-[11px] font-bold text-[var(--app-shell-muted)] uppercase tracking-wider">
         Reference Discussion
       </div>
       <div className="max-h-64 overflow-y-auto p-1">
@@ -40,22 +40,22 @@ export function ThreadMentionPopover({
               aria-selected={isActive}
               onClick={() => onSelect(discussion)}
               className={`w-full text-left px-3 py-2.5 rounded-lg flex items-start gap-3 transition-colors ${
-                isActive ? "bg-indigo-50" : "hover:bg-slate-50"
+                isActive ? "bg-[var(--primary-muted)]" : "hover:bg-[var(--app-shell-subtle)]"
               }`}
             >
-              <div className={`mt-0.5 p-1.5 rounded-md ${isActive ? "bg-indigo-100 text-indigo-600" : "bg-slate-100 text-slate-500"}`}>
+              <div className={`mt-0.5 p-1.5 rounded-md ${isActive ? "bg-[var(--primary-muted)] text-[var(--primary)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"}`}>
                 <MessageSquare size={14} strokeWidth={2.5} />
               </div>
               <div className="min-w-0 flex-1">
-                <div className={`text-sm font-semibold truncate ${isActive ? "text-indigo-900" : "text-slate-900"}`}>
+                <div className={`text-sm font-semibold truncate ${isActive ? "text-[var(--primary)]" : "text-[var(--foreground)]"}`}>
                   {discussion.title}
                 </div>
                 <div className="flex items-center gap-2 mt-0.5">
-                  <span className={`text-xs ${isActive ? "text-indigo-600" : "text-slate-500"}`}>
+                  <span className={`text-xs ${isActive ? "text-[var(--primary)]" : "text-[var(--muted-foreground)]"}`}>
                     {discussion.replies.length} replies
                   </span>
-                  <span className="text-slate-300">•</span>
-                  <span className="text-[10px] text-slate-400 flex items-center gap-1">
+                  <span className="text-[var(--muted-foreground)]">•</span>
+                  <span className="text-[10px] text-[var(--muted-foreground)] flex items-center gap-1">
                     <Clock size={10} />
                     {getTimeAgo(discussion.lastActivityAt)}
                   </span>