@mndrk/agx 2.0.22 → 2.0.24

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,32 +354,32 @@ 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>
 
         <nav className="workspace-sidebar__section">
-          <div className="workspace-sidebar__section-header">
+          <div className="workspace-sidebar__section-header group/projects-header">
             <p className="workspace-sidebar__section-label">Projects</p>
             <div className="workspace-sidebar__header-actions">
               <button
                 type="button"
-                className="workspace-sidebar__action"
+                className="workspace-sidebar__action opacity-0 transition-opacity group-hover/projects-header:opacity-100"
                 onClick={() => handleCreateProject()}
                 aria-label="Create project"
                 title="Create project"
@@ -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,44 +461,41 @@ 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="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="flex items-center gap-2">
-                          <span className="text-[10px] text-slate-300">{project.repos.length}</span>
-                          <button
-                            type="button"
-                            className="workspace-sidebar__action text-slate-300 hover:text-white"
-                            onClick={() => setRepoDetail({
-                              projectId: project.id,
-                              projectName: project.name,
-                              repoId: null,
-                              name: "",
-                              path: "",
-                              gitUrl: "",
-                              notes: "",
-                              generatedKnowledge: [],
-                              isLoadingKnowledge: false,
-                              isSaving: false,
-                              error: null,
-                            })}
-                            aria-label="Add repo"
-                            title="Add repo"
-                          >
-                            <Plus size={12} />
-                          </button>
-                        </div>
+                      <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-[var(--muted-foreground)] hover:text-white"
+                          onClick={() => setRepoDetail({
+                            projectId: project.id,
+                            projectName: project.name,
+                            repoId: null,
+                            name: "",
+                            path: "",
+                            gitUrl: "",
+                            notes: "",
+                            generatedKnowledge: [],
+                            isLoadingKnowledge: false,
+                            isSaving: false,
+                            error: null,
+                          })}
+                          aria-label="Add repo"
+                          title="Add repo"
+                        >
+                          <Plus size={12} />
+                        </button>
                       </div>
                       {project.repos.length > 0 ? (
                         project.repos.map((repo) => (
                           <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,
@@ -541,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
@@ -570,80 +539,91 @@ 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="flex items-center justify-between px-2 py-1">
-                        <p className="text-[10px] font-medium text-slate-400 uppercase tracking-wide">Agents</p>
-                        <button
-                          type="button"
-                          className="workspace-sidebar__action opacity-0 group-hover:opacity-100 transition-opacity"
-                          onClick={() => handleAddAgentToProject(project.id)}
-                          aria-label="Add agent"
-                          title="Add agent"
-                        >
-                          <Plus size={12} />
-                        </button>
+                      <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-[var(--muted-foreground)] hover:text-white"
+                            onClick={() => handleAddAgentToProject(project.id)}
+                            aria-label="Add agents"
+                            title="Add agents"
+                          >
+                            <Plus size={12} />
+                          </button>
+                        )}
                       </div>
                       {project.agents.length > 0 ? (
-                        project.agents.map((projectAgent, agentIndex) => {
-                          const agent = participants.find((participant) => participant.id === projectAgent.agent_id);
-                          const isDragging = dragState?.projectId === project.id && dragState?.agentId === projectAgent.agent_id;
-                          const isDragOver = dragState?.projectId === project.id && dragState?.overIndex === agentIndex && !isDragging;
-                          return (
-                            <div
-                              key={projectAgent.agent_id}
-                              draggable
-                              onDragStart={(e) => {
-                                e.dataTransfer.effectAllowed = "move";
-                                setDragState({ projectId: project.id, agentId: projectAgent.agent_id, overIndex: agentIndex });
-                              }}
-                              onDragOver={(e) => {
-                                e.preventDefault();
-                                if (dragState && dragState.projectId === project.id) {
-                                  setDragState((prev) => prev ? { ...prev, overIndex: agentIndex } : null);
-                                }
-                              }}
-                              onDragEnd={() => {
-                                if (dragState && dragState.projectId === project.id && onReorderProjectAgents) {
-                                  const currentIds = project.agents.map((a) => a.agent_id);
-                                  const fromIndex = currentIds.indexOf(dragState.agentId);
-                                  const toIndex = dragState.overIndex;
-                                  if (fromIndex !== -1 && fromIndex !== toIndex) {
-                                    const reordered = [...currentIds];
-                                    const [moved] = reordered.splice(fromIndex, 1);
-                                    reordered.splice(toIndex, 0, moved);
-                                    void onReorderProjectAgents(project.id, reordered);
+                        <>
+                          {project.agents.map((projectAgent, agentIndex) => {
+                            const agent = participants.find((participant) => participant.id === projectAgent.agent_id);
+                            const isDragging = dragState?.projectId === project.id && dragState?.agentId === projectAgent.agent_id;
+                            const isDragOver = dragState?.projectId === project.id && dragState?.overIndex === agentIndex && !isDragging;
+                            return (
+                              <div
+                                key={projectAgent.agent_id}
+                                draggable
+                                onDragStart={(e) => {
+                                  e.dataTransfer.effectAllowed = "move";
+                                  setDragState({ projectId: project.id, agentId: projectAgent.agent_id, overIndex: agentIndex });
+                                }}
+                                onDragOver={(e) => {
+                                  e.preventDefault();
+                                  if (dragState && dragState.projectId === project.id) {
+                                    setDragState((prev) => prev ? { ...prev, overIndex: agentIndex } : null);
                                   }
-                                }
-                                setDragState(null);
-                              }}
-                              className={`flex items-center ${isDragOver ? "border-t-2 border-slate-400" : "border-t-2 border-transparent"} ${isDragging ? "opacity-40" : ""}`}
-                            >
-                              <button
-                                type="button"
-                                className="workspace-sidebar__nav-item ml-2 flex-1 min-w-0"
-                                onClick={() => setAgentDetailId(projectAgent.agent_id)}
+                                }}
+                                onDragEnd={() => {
+                                  if (dragState && dragState.projectId === project.id && onReorderProjectAgents) {
+                                    const currentIds = project.agents.map((a) => a.agent_id);
+                                    const fromIndex = currentIds.indexOf(dragState.agentId);
+                                    const toIndex = dragState.overIndex;
+                                    if (fromIndex !== -1 && fromIndex !== toIndex) {
+                                      const reordered = [...currentIds];
+                                      const [moved] = reordered.splice(fromIndex, 1);
+                                      reordered.splice(toIndex, 0, moved);
+                                      void onReorderProjectAgents(project.id, reordered);
+                                    }
+                                  }
+                                  setDragState(null);
+                                }}
+                                className={`group/agent flex items-center ${isDragOver ? "border-t-2 border-[var(--border)]" : "border-t-2 border-transparent"} ${isDragging ? "opacity-40" : ""}`}
                               >
-                                <span className="cursor-grab text-slate-300 hover:text-slate-500 flex-shrink-0 mr-0.5" title="Drag to reorder">⠿</span>
-                                <img
-                                  src={agentAvatarUrl(projectAgent.agent_id, 16, agent?.color)}
-                                  alt=""
-                                  className="w-4 h-4 rounded-full flex-shrink-0"
-                                />
-                                <span className="workspace-sidebar__workspace-title text-xs truncate">
-                                  {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>
-                                )}
-                              </button>
-                            </div>
-                          );
-                        })
+                                <button
+                                  type="button"
+                                  className="workspace-sidebar__nav-item flex-1 min-w-0 !py-1"
+                                  onClick={() => setAgentDetailId(projectAgent.agent_id)}
+                                >
+                                  <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=""
+                                    className="w-4 h-4 rounded-full flex-shrink-0"
+                                  />
+                                  <span className="workspace-sidebar__workspace-title text-xs truncate">
+                                    {agent?.name ?? projectAgent.agent_id}
+                                  </span>
+                                  {agentIndex === 0 && (
+                                    <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>
+                            );
+                          })}
+                        </>
                       ) : (
-                        <p className="pl-4 py-1 text-[11px] text-slate-400">No agents</p>
+                        <button
+                          type="button"
+                          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} />
+                          <span>Add agents</span>
+                        </button>
                       )}
                     </div>
                   </div>
@@ -653,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";
@@ -665,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>
@@ -704,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);
                 }}
@@ -730,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}
                 >
@@ -792,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);
@@ -874,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} />
@@ -892,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>
               ) : (
@@ -909,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);
@@ -919,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>
                         )}
@@ -931,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>
                   );
@@ -939,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
@@ -950,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);
@@ -1016,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} />
@@ -1046,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>
@@ -1075,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