@mndrk/agx 2.0.23 → 2.0.25

package/cloud-runtime/standalone/components/thread/WorkspaceSidebar.tsx

@@ -10,10 +10,10 @@ import {
   FolderGit2,
   PanelLeftClose,
   Pencil,
+  LayoutDashboard,
   Plus,
   Search,
   Trash2,
-  LayoutDashboard,
   X,
 } from "lucide-react";
 import Link from "next/link";
@@ -294,27 +294,11 @@ export function WorkspaceSidebar({
           <button
             type="button"
             onClick={onToggle}
-            className="workspace-sidebar__brand-icon p-0 bg-transparent hover:bg-transparent border-none outline-none"
+            className="workspace-sidebar__brand-icon border-none outline-none cursor-pointer"
             aria-label="Show threads"
             title="Show threads"
           >
-            <svg
-              width="52"
-              height="31"
-              viewBox="0 0 64 38"
-              fill="none"
-              xmlns="http://www.w3.org/2000/svg"
-              className="transition-transform hover:scale-105"
-            >
-              <rect width="64" height="38" rx="8" fill="black" />
-              <g stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-                <path d="M 14 27 C 17 16 19 10 20 8 C 21 12 23 20 25 27" />
-                <path d="M 16 20 C 19 19 21 21 23 20" />
-                <path d="M 40 13 C 35 10 30 13 30 19 C 30 25 34 28 38 27 C 40 26 40 22 40 20 L 36 20" />
-                <path d="M 46 11 C 48 16 51 22 54 27" />
-                <path d="M 54 11 C 52 16 49 22 46 27" />
-              </g>
-            </svg>
+            <span className="text-[10px]">AGX</span>
           </button>
         </div>
         <div className="mt-auto p-2">
@@ -345,23 +329,11 @@ export function WorkspaceSidebar({
       aria-busy={isLoading ? "true" : undefined}
     >
       <div className="workspace-sidebar__brand">
-        <div className="flex items-center justify-center mr-2" aria-hidden="true">
-          <svg
-            width="52"
-            height="31"
-            viewBox="0 0 64 38"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <rect width="64" height="38" rx="8" fill="black" />
-            <g stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M 14 27 C 17 16 19 10 20 8 C 21 12 23 20 25 27" />
-              <path d="M 16 20 C 19 19 21 21 23 20" />
-              <path d="M 40 13 C 35 10 30 13 30 19 C 30 25 34 28 38 27 C 40 26 40 22 40 20 L 36 20" />
-              <path d="M 46 11 C 48 16 51 22 54 27" />
-              <path d="M 54 11 C 52 16 49 22 46 27" />
-            </g>
-          </svg>
+        <div className="flex items-center gap-2 px-1">
+          <div className="workspace-sidebar__brand-icon" aria-hidden="true">
+            <span className="text-[10px]">AGX</span>
+          </div>
+          <span className="workspace-sidebar__brand-title">Workspace</span>
         </div>
         {onToggle && (
           <button
@@ -369,7 +341,7 @@ export function WorkspaceSidebar({
             onClick={onToggle}
             aria-label="Hide threads"
             title="Hide threads"
-            className="ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-slate-400 transition-all hover:bg-slate-100 hover:text-slate-600"
+            className="ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md text-[var(--app-shell-soft-text)] transition-all hover:bg-[var(--app-shell-subtle)] hover:text-[var(--foreground)]"
           >
             <PanelLeftClose className="h-4 w-4" strokeWidth={1.75} />
           </button>
@@ -382,21 +354,21 @@ export function WorkspaceSidebar({
             <button
               type="button"
               onClick={onSearch}
-              className="flex items-center gap-2 w-full h-8 px-2.5 rounded-lg border border-slate-200 bg-white text-slate-400 text-xs hover:border-slate-300 hover:text-slate-500 transition-all"
+              className="flex h-8 w-full items-center gap-2 rounded-lg border border-[var(--app-shell-border)] bg-[var(--app-shell-elevated)] px-2.5 text-xs text-[var(--app-shell-soft-text)] transition-all hover:border-[var(--app-shell-border-strong)] hover:text-[var(--app-shell-muted)]"
             >
               <Search className="h-3.5 w-3.5 shrink-0" strokeWidth={1.75} />
               <span>Search...</span>
-              <kbd className="ml-auto text-[10px] font-sans font-medium text-slate-300 bg-slate-50 border border-slate-200 rounded px-1 py-0.5">&#8984;K</kbd>
+              <kbd className="ml-auto rounded border border-[var(--app-shell-border)] bg-[var(--app-shell-subtle)] px-1 py-0.5 font-sans text-[10px] font-medium text-[var(--app-shell-soft-text)]">&#8984;K</kbd>
             </button>
           </div>
         )}
 
-        <nav className="workspace-sidebar__section" style={{ gap: 0, marginTop: '1.5rem' }}>
+        <nav className="workspace-sidebar__section" style={{ gap: 0 }}>
           <Link
             href="/agents"
-            className="workspace-sidebar__section-link"
+            className="workspace-sidebar__nav-item"
           >
-            <Bot size={13} className="flex-shrink-0" />
+            <Bot size={14} className="flex-shrink-0" />
             Manage Agents
           </Link>
         </nav>
@@ -432,11 +404,11 @@ export function WorkspaceSidebar({
                     }}
                   >
                     {projectIsExpanded ? (
-                      <ChevronDown size={14} className="flex-shrink-0 text-slate-400" onClick={(e) => { e.stopPropagation(); toggleProjectExpanded(project.id); }} />
+                      <ChevronDown size={14} className="flex-shrink-0 text-[var(--muted-foreground)]" onClick={(e) => { e.stopPropagation(); toggleProjectExpanded(project.id); }} />
                     ) : (
-                      <ChevronRight size={14} className="flex-shrink-0 text-slate-400" onClick={(e) => { e.stopPropagation(); toggleProjectExpanded(project.id); }} />
+                      <ChevronRight size={14} className="flex-shrink-0 text-[var(--muted-foreground)]" onClick={(e) => { e.stopPropagation(); toggleProjectExpanded(project.id); }} />
                     )}
-                    <Folder size={12} className="flex-shrink-0 text-slate-400" />
+                    <Folder size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
                     <span className="workspace-sidebar__workspace-title">{project.name}</span>
                   </button>
                   <div className="workspace-sidebar__workspace-actions">
@@ -461,7 +433,7 @@ export function WorkspaceSidebar({
                   </div>
                 </div>
                 {projectIsExpanded && (
-                  <div className="pl-4 py-0.5 flex flex-col gap-0.5">
+                  <div className="ml-4 my-1 flex flex-col gap-0.5 border-l border-[var(--app-shell-border)] pl-3">
                     <div className="workspace-sidebar__workspace-item">
                       {projectThreads[0] ? (
                         <button
@@ -470,7 +442,7 @@ export function WorkspaceSidebar({
                           onClick={() => onSelectThread(projectThreads[0].id)}
                           aria-current={projectThreads[0].id === activeThreadId ? "page" : undefined}
                         >
-                          <Hash size={12} className="flex-shrink-0 text-slate-400" />
+                          <Hash size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
                           <span className="workspace-sidebar__workspace-title text-xs">Thread</span>
                         </button>
                       ) : (
@@ -479,7 +451,7 @@ export function WorkspaceSidebar({
                           className="workspace-sidebar__nav-item"
                           onClick={handleCreateClick}
                         >
-                          <Hash size={12} className="flex-shrink-0 text-slate-400" />
+                          <Hash size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
                           <span className="workspace-sidebar__workspace-title text-xs">Thread</span>
                         </button>
                       )}
@@ -489,16 +461,16 @@ export function WorkspaceSidebar({
                         href={`/projects/${project.slug}`}
                         className="workspace-sidebar__nav-item"
                       >
-                        <LayoutDashboard size={12} className="flex-shrink-0 text-slate-400" />
+                        <LayoutDashboard size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
                         <span className="workspace-sidebar__workspace-title text-xs">Board</span>
                       </Link>
                     </div>
                     <div className="pt-1">
-                      <div className="group/repos-header flex items-center justify-between px-2 py-1">
-                        <p className="text-[10px] font-medium text-slate-400 uppercase tracking-wide">Repos</p>
+                      <div className="group/repos-header flex items-center justify-between px-3 py-1">
+                        <p className="text-[10px] font-medium text-[var(--muted-foreground)] uppercase tracking-wide">Repos</p>
                         <button
                           type="button"
-                          className="workspace-sidebar__action opacity-0 transition-opacity group-hover/repos-header:opacity-100 text-slate-300 hover:text-white"
+                          className="workspace-sidebar__action opacity-0 transition-opacity group-hover/repos-header:opacity-100 text-[var(--muted-foreground)] hover:text-white"
                           onClick={() => setRepoDetail({
                             projectId: project.id,
                             projectName: project.name,
@@ -523,7 +495,7 @@ export function WorkspaceSidebar({
                           <div key={`${project.id}:${repo.name}:${repo.path ?? ""}`} className="workspace-sidebar__workspace-item group/repo flex items-center">
                             <button
                               type="button"
-                              className="workspace-sidebar__nav-item ml-2 min-w-0 flex-1 text-left"
+                              className="workspace-sidebar__nav-item min-w-0 flex-1 text-left"
                               onClick={() => setRepoDetail({
                                 projectId: project.id,
                                 projectName: project.name,
@@ -538,14 +510,14 @@ export function WorkspaceSidebar({
                                 error: null,
                               })}
                             >
-                              <FolderGit2 size={12} className="flex-shrink-0 text-slate-400" />
+                              <FolderGit2 size={12} className="flex-shrink-0 text-[var(--muted-foreground)] ml-2" />
                               <span className="workspace-sidebar__workspace-title text-xs truncate">
                                 {repo.name}
                               </span>
                             </button>
                             <button
                               type="button"
-                              className="workspace-sidebar__action opacity-0 group-hover/repo:opacity-100 transition-opacity flex-shrink-0 text-slate-400 hover:text-red-400"
+                              className="workspace-sidebar__action opacity-0 group-hover/repo:opacity-100 transition-opacity flex-shrink-0 text-[var(--muted-foreground)] hover:text-red-400"
                               onClick={async (e) => {
                                 e.stopPropagation();
                                 const nextRepos = project.repos
@@ -567,16 +539,16 @@ export function WorkspaceSidebar({
                           </div>
                         ))
                       ) : (
-                        <p className="pl-4 py-1 text-[11px] text-slate-400">No repos</p>
+                        <p className="px-3 py-1 text-[11px] text-[var(--muted-foreground)]">No repos</p>
                       )}
                     </div>
                     <div className="pt-1">
-                      <div className="group/agents-header flex items-center justify-between px-2 py-1">
-                        <p className="text-[10px] font-medium text-slate-400 uppercase tracking-wide">Agents</p>
+                      <div className="group/agents-header flex items-center justify-between px-3 py-1">
+                        <p className="text-[10px] font-medium text-[var(--muted-foreground)] uppercase tracking-wide">Agents</p>
                         {project.agents.length > 0 && (
                           <button
                             type="button"
-                            className="workspace-sidebar__action opacity-0 transition-opacity group-hover/agents-header:opacity-100 text-slate-300 hover:text-white"
+                            className="workspace-sidebar__action opacity-0 transition-opacity group-hover/agents-header:opacity-100 text-[var(--muted-foreground)] hover:text-white"
                             onClick={() => handleAddAgentToProject(project.id)}
                             aria-label="Add agents"
                             title="Add agents"
@@ -619,14 +591,14 @@ export function WorkspaceSidebar({
                                   }
                                   setDragState(null);
                                 }}
-                                className={`flex items-center ${isDragOver ? "border-t-2 border-slate-400" : "border-t-2 border-transparent"} ${isDragging ? "opacity-40" : ""}`}
+                                className={`group/agent flex items-center ${isDragOver ? "border-t-2 border-[var(--border)]" : "border-t-2 border-transparent"} ${isDragging ? "opacity-40" : ""}`}
                               >
                                 <button
                                   type="button"
-                                  className="workspace-sidebar__nav-item ml-2 flex-1 min-w-0"
+                                  className="workspace-sidebar__nav-item flex-1 min-w-0 !py-1"
                                   onClick={() => setAgentDetailId(projectAgent.agent_id)}
                                 >
-                                  <span className="cursor-grab text-slate-300 hover:text-slate-500 flex-shrink-0 mr-0.5" title="Drag to reorder">⠿</span>
+                                  <span className={`cursor-grab text-[var(--muted-foreground)] hover:text-[var(--muted-foreground)] flex-shrink-0 mr-0.5 transition-opacity ${agentIndex === 0 ? "opacity-100" : "opacity-0 group-hover/agent:opacity-100"}`} title="Drag to reorder">⠿</span>
                                   <img
                                     src={agentAvatarUrl(projectAgent.agent_id, 16, agent?.color)}
                                     alt=""
@@ -636,7 +608,7 @@ export function WorkspaceSidebar({
                                     {agent?.name ?? projectAgent.agent_id}
                                   </span>
                                   {agentIndex === 0 && (
-                                    <span className="ml-auto text-[9px] text-slate-400 font-medium flex-shrink-0" title="Default responder (top agent responds first)">DEFAULT</span>
+                                    <span className="ml-auto text-[9px] text-[var(--muted-foreground)] font-medium flex-shrink-0" title="Default responder (top agent responds first)">DEFAULT</span>
                                   )}
                                 </button>
                               </div>
@@ -646,7 +618,7 @@ export function WorkspaceSidebar({
                       ) : (
                         <button
                           type="button"
-                          className="ml-4 inline-flex items-center gap-1 py-1 text-[11px] font-medium text-slate-500 transition-colors hover:text-slate-700"
+                          className="inline-flex items-center gap-1 px-3 py-1 text-[11px] font-medium text-[var(--muted-foreground)] transition-colors hover:text-[var(--foreground)]"
                           onClick={() => handleAddAgentToProject(project.id)}
                         >
                           <Plus size={10} />
@@ -661,7 +633,7 @@ export function WorkspaceSidebar({
           })}
           {unassignedThreads.length > 0 && (
             <div className="pt-3">
-              <p className="px-1 py-1 text-[10px] font-medium text-slate-400 uppercase tracking-wide">Unassigned Threads</p>
+              <p className="px-1 py-1 text-[10px] font-medium text-[var(--muted-foreground)] uppercase tracking-wide">Unassigned Threads</p>
               {unassignedThreads.map((thread) => {
                 const isActive = thread.id === activeThreadId;
                 const title = thread.title?.trim() || "Untitled thread";
@@ -673,7 +645,7 @@ export function WorkspaceSidebar({
                       onClick={() => onSelectThread(thread.id)}
                       aria-current={isActive ? "page" : undefined}
                     >
-                      <Hash size={12} className="flex-shrink-0 text-slate-400" />
+                      <Hash size={12} className="flex-shrink-0 text-[var(--muted-foreground)]" />
                       <span className="workspace-sidebar__workspace-title">{title}</span>
                     </button>
                   </div>
@@ -712,21 +684,21 @@ export function WorkspaceSidebar({
           }}
         >
           <div
-            className="w-full max-w-lg rounded-2xl border border-slate-200 bg-white shadow-2xl"
+            className="w-full max-w-lg rounded-2xl border border-[var(--border)] bg-[var(--card-bg)] shadow-2xl"
             onClick={(e) => e.stopPropagation()}
           >
-            <div className="flex items-start justify-between gap-4 border-b border-slate-100 px-5 py-4">
+            <div className="flex items-start justify-between gap-4 border-b border-[var(--border)] px-5 py-4">
               <div className="min-w-0">
-                <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
+                <p className="text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--muted-foreground)]">
                   {repoDetail.projectName}
                 </p>
-                <h3 className="truncate text-base font-semibold text-slate-900">
+                <h3 className="truncate text-base font-semibold text-[var(--foreground)]">
                   {repoDetail.repoId ? (repoDetail.name || "Repository") : "Add Repository"}
                 </h3>
               </div>
               <button
                 type="button"
-                className="rounded-md p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
+                className="rounded-md p-1 text-[var(--muted-foreground)] transition-colors hover:bg-[var(--muted)] hover:text-[var(--muted-foreground)]"
                 onClick={() => {
                   if (!repoDetail.isSaving) setRepoDetail(null);
                 }}
@@ -738,61 +710,61 @@ export function WorkspaceSidebar({
             </div>
             <div className="space-y-4 px-5 py-4">
               <div>
-                <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Name</p>
+                <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--muted-foreground)]">Name</p>
                 <input
                   value={repoDetail.name}
                   onChange={(e) => setRepoDetail((current) => current ? { ...current, name: e.target.value, error: null } : current)}
-                  className="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700"
+                  className="w-full rounded-lg border border-[var(--border)] bg-[var(--app-shell-subtle)] px-3 py-2 text-sm text-[var(--foreground)]"
                   disabled={repoDetail.isSaving}
                 />
               </div>
               <div>
-                <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Path</p>
+                <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--muted-foreground)]">Path</p>
                 <input
                   value={repoDetail.path}
                   onChange={(e) => setRepoDetail((current) => current ? { ...current, path: e.target.value, error: null } : current)}
-                  className="w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 font-mono text-xs text-slate-700"
+                  className="w-full rounded-lg border border-[var(--border)] bg-[var(--app-shell-subtle)] px-3 py-2 font-mono text-xs text-[var(--foreground)]"
                   disabled={repoDetail.isSaving}
                 />
               </div>
               <div>
-                <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Repo Notes</p>
+                <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--muted-foreground)]">Repo Notes</p>
                 <textarea
                   value={repoDetail.notes}
                   onChange={(e) => setRepoDetail((current) => current ? { ...current, notes: e.target.value, error: null } : current)}
-                  className="min-h-28 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-3 text-sm text-slate-700 whitespace-pre-wrap"
+                  className="min-h-28 w-full rounded-lg border border-[var(--border)] bg-[var(--app-shell-subtle)] px-3 py-3 text-sm text-[var(--foreground)] whitespace-pre-wrap"
                   disabled={repoDetail.isSaving}
                   placeholder="Repo-specific rules, notes, conventions, deployment constraints..."
                 />
               </div>
               {repoDetail.repoId ? (
                 <div>
-                  <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">System-Generated Repo Knowledge</p>
+                  <p className="mb-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-[var(--muted-foreground)]">System-Generated Repo Knowledge</p>
                   {repoDetail.isLoadingKnowledge ? (
-                    <p className="text-sm text-slate-400">Loading generated knowledge…</p>
+                    <p className="text-sm text-[var(--muted-foreground)]">Loading generated knowledge…</p>
                   ) : repoDetail.generatedKnowledge.length > 0 ? (
                     <div className="space-y-2">
                       {repoDetail.generatedKnowledge.slice(0, 5).map((item) => (
-                        <div key={item.id} className="rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700">
+                        <div key={item.id} className="rounded-lg border border-[var(--border)] bg-[var(--app-shell-subtle)] px-3 py-2 text-sm text-[var(--foreground)]">
                           <div>{item.content}</div>
                           {item.created_at ? (
-                            <div className="mt-1 text-[11px] text-slate-400">{new Date(item.created_at).toLocaleString()}</div>
+                            <div className="mt-1 text-[11px] text-[var(--muted-foreground)]">{new Date(item.created_at).toLocaleString()}</div>
                           ) : null}
                         </div>
                       ))}
                     </div>
                   ) : (
-                    <p className="text-sm text-slate-400">No generated repo knowledge yet.</p>
+                    <p className="text-sm text-[var(--muted-foreground)]">No generated repo knowledge yet.</p>
                   )}
                 </div>
               ) : null}
               {repoDetail.error ? (
                 <p className="text-xs text-red-600">{repoDetail.error}</p>
               ) : null}
-              <div className="flex justify-end gap-2 border-t border-slate-100 pt-4">
+              <div className="flex justify-end gap-2 border-t border-[var(--border)] pt-4">
                 <button
                   type="button"
-                  className="rounded-lg px-3 py-2 text-sm text-slate-600 transition-colors hover:bg-slate-100"
+                  className="rounded-lg px-3 py-2 text-sm text-[var(--muted-foreground)] transition-colors hover:bg-[var(--muted)]"
                   onClick={() => setRepoDetail(null)}
                   disabled={repoDetail.isSaving}
                 >
@@ -800,7 +772,7 @@ export function WorkspaceSidebar({
                 </button>
                 <button
                   type="button"
-                  className="rounded-lg bg-slate-900 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-slate-800 disabled:cursor-not-allowed disabled:opacity-60"
+                  className="rounded-lg bg-[var(--foreground)] px-3 py-2 text-sm font-medium text-[var(--card-bg)] transition-colors hover:bg-[var(--foreground)] disabled:cursor-not-allowed disabled:opacity-60"
                   disabled={repoDetail.isSaving || !onUpdateProject}
                   onClick={async () => {
                     const project = projectsProp.find((item) => item.id === repoDetail.projectId);
@@ -882,16 +854,16 @@ export function WorkspaceSidebar({
           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">
+            <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-slate-400 hover:text-slate-600"
+                className="text-[var(--muted-foreground)] hover:text-[var(--muted-foreground)]"
                 onClick={() => setAddAgentModal(null)}
               >
                 <X size={16} />
@@ -900,14 +872,14 @@ export function WorkspaceSidebar({
             <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(--foreground)] hover:bg-[var(--app-shell-subtle)] transition-colors border-b border-[var(--border)]"
                 onClick={() => setCreatingNewAgent(true)}
               >
-                <Plus size={14} className="text-slate-400" />
+                <Plus size={14} className="text-[var(--muted-foreground)]" />
                 <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">
+                <p className="px-4 py-6 text-xs text-[var(--muted-foreground)] text-center">
                   All agents are already in this project
                 </p>
               ) : (
@@ -917,7 +889,7 @@ export function WorkspaceSidebar({
                     <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(--muted)] text-[var(--foreground)]" : "text-[var(--foreground)] hover:bg-[var(--app-shell-subtle)]"}`}
                       onClick={() => {
                         setAddAgentSelection((prev) => {
                           const next = new Set(prev);
@@ -927,7 +899,7 @@ export function WorkspaceSidebar({
                         });
                       }}
                     >
-                      <div className={`w-4 h-4 rounded border flex-shrink-0 flex items-center justify-center ${selected ? "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 ${selected ? "bg-[var(--foreground)] border-[var(--foreground)]" : "border-[var(--border)]"}`}>
                         {selected && (
                           <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>
                         )}
@@ -939,7 +911,7 @@ export function WorkspaceSidebar({
                       />
                       <div className="min-w-0 flex-1 text-left">
                         <div className="truncate font-medium text-xs">{p.name}</div>
-                        <div className="truncate text-[11px] text-slate-400">{p.model}</div>
+                        <div className="truncate text-[11px] text-[var(--muted-foreground)]">{p.model}</div>
                       </div>
                     </button>
                   );
@@ -947,10 +919,10 @@ export function WorkspaceSidebar({
               )}
             </div>
             {addAgentModalAvailable.length > 0 && (
-              <div className="px-4 py-3 border-t border-slate-100 flex justify-end gap-2">
+              <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-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={() => setAddAgentModal(null)}
                 >
                   Cancel
@@ -958,7 +930,7 @@ export function WorkspaceSidebar({
                 <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-[var(--card-bg)] bg-[var(--foreground)] rounded-lg hover:bg-[var(--foreground)] disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
                   onClick={() => {
                     for (const agentId of addAgentSelection) {
                       void onAddAgentToProject?.(addAgentModal.projectId, agentId);
@@ -1024,14 +996,14 @@ export function WorkspaceSidebar({
           onClick={() => setInputModal(null)}
         >
           <div
-            className="bg-white rounded-xl shadow-xl border border-slate-200 w-80 flex flex-col"
+            className="bg-[var(--card-bg)] rounded-xl shadow-xl border border-[var(--border)] w-80 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">{inputModal.title}</h3>
+            <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)]">{inputModal.title}</h3>
               <button
                 type="button"
-                className="text-slate-400 hover:text-slate-600"
+                className="text-[var(--muted-foreground)] hover:text-[var(--muted-foreground)]"
                 onClick={() => setInputModal(null)}
               >
                 <X size={16} />
@@ -1054,19 +1026,19 @@ export function WorkspaceSidebar({
                 type="text"
                 defaultValue={inputModal.defaultValue}
                 placeholder={inputModal.placeholder}
-                className="w-full px-3 py-2 text-sm border border-slate-200 rounded-lg outline-none focus:border-slate-400 focus:ring-1 focus:ring-slate-200 transition-all"
+                className="w-full px-3 py-2 text-sm border border-[var(--border)] rounded-lg outline-none focus:border-[var(--border)] focus:ring-1 focus:ring-[var(--border)] transition-all"
               />
               <div className="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"
+                  className="px-3 py-1.5 text-xs text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
                   onClick={() => setInputModal(null)}
                 >
                   Cancel
                 </button>
                 <button
                   type="submit"
-                  className="px-3 py-1.5 text-xs font-medium text-white bg-slate-900 rounded-lg hover:bg-slate-800 transition-colors"
+                  className="px-3 py-1.5 text-xs font-medium text-[var(--card-bg)] bg-[var(--foreground)] rounded-lg hover:bg-[var(--foreground)] transition-colors"
                 >
                   {inputModal.defaultValue ? "Save" : "Create"}
                 </button>
@@ -1083,25 +1055,25 @@ export function WorkspaceSidebar({
           onClick={() => setConfirmModal(null)}
         >
           <div
-            className="bg-white rounded-xl shadow-xl border border-slate-200 w-80 flex flex-col"
+            className="bg-[var(--card-bg)] rounded-xl shadow-xl border border-[var(--border)] w-80 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">{confirmModal.title}</h3>
+            <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)]">{confirmModal.title}</h3>
               <button
                 type="button"
-                className="text-slate-400 hover:text-slate-600"
+                className="text-[var(--muted-foreground)] hover:text-[var(--muted-foreground)]"
                 onClick={() => setConfirmModal(null)}
               >
                 <X size={16} />
               </button>
             </div>
             <div className="px-4 py-4 flex flex-col gap-4">
-              <p className="text-sm text-slate-600">{confirmModal.message}</p>
+              <p className="text-sm text-[var(--muted-foreground)]">{confirmModal.message}</p>
               <div className="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"
+                  className="px-3 py-1.5 text-xs text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors"
                   onClick={() => setConfirmModal(null)}
                 >
                   Cancel

package/cloud-runtime/standalone/fix-primary.js

@@ -0,0 +1,30 @@
+const fs = require('fs');
+
+const filesToFix = [
+  'components/chat-ui/ThreadMentionPopover.tsx',
+  'components/chat-ui/CommandPopover.tsx',
+  'components/chat-ui/FileMentionPopoverItem.tsx'
+];
+
+for (const file of filesToFix) {
+  try {
+    let content = fs.readFileSync(file, 'utf8');
+    
+    content = content.replace(/\bbg-indigo-50\b/g, 'bg-[var(--primary-muted)]');
+    content = content.replace(/\bbg-indigo-100\b/g, 'bg-[var(--primary-muted)]');
+    content = content.replace(/\btext-indigo-600\b/g, 'text-[var(--primary)]');
+    content = content.replace(/\btext-indigo-900\b/g, 'text-[var(--primary)]');
+    
+    content = content.replace(/\bbg-blue-50\b/g, 'bg-[var(--primary-muted)]');
+    content = content.replace(/\bbg-blue-100\b/g, 'bg-[var(--primary-muted)]');
+    content = content.replace(/\btext-blue-600\b/g, 'text-[var(--primary)]');
+    content = content.replace(/\btext-blue-900\b/g, 'text-[var(--primary)]');
+    content = content.replace(/\btext-blue-500\b/g, 'text-[var(--primary)]');
+    
+    fs.writeFileSync(file, content, 'utf8');
+  } catch (err) {
+    console.error(`Error processing ${file}:`, err.message);
+  }
+}
+
+console.log("Updated popover selection states.");