update

src/renderer/components/organization/AgentCreator.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
 import { Robot } from "@phosphor-icons/react";
 import type { AgentRecord, ConnectorRecord, WorkspaceRecord } from "@shared/types";
 import { isConnectorExecutionReady } from "@shared/connector-policy";
@@ -65,11 +66,13 @@ export function AgentCreator({
     }
   }, [executionReadyConnectors, connectorId]);
 
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
   return (
     <div className="grid min-w-0 gap-4">
-      <Input label="Agent name" value={name} onChange={setName} placeholder="Agent name" />
-      <Input label="Role" value={role} onChange={setRole} placeholder="e.g. Engineer, PM, CEO" />
-      <Input label="Title" value={title} onChange={setTitle} placeholder="Title" />
+      <Input label="Agent name" value={name} onChange={setName} placeholder="Agent name" hint="Display name shown in org chart and messages" />
+      <Input label="Role" value={role} onChange={setRole} placeholder="e.g. Engineer, PM, CEO" hint="Determines which tasks the agent can handle" />
+      <Input label="Title" value={title} onChange={setTitle} placeholder="Title" hint="Job title shown under the name" />
       <Select
         label="Connector"
         value={connectorId}
@@ -77,7 +80,7 @@ export function AgentCreator({
         options={executionReadyConnectors.map((connector) => ({ value: connector.id, label: connector.id.startsWith("claude_compat") && connector.notes ? connector.notes : connector.label }))}
       />
       {executionReadyConnectors.length === 0 ? (
-        <p className="text-[12px] text-yellow-600 dark:text-yellow-400">
+        <p className="text-[12px] text-warning">
           No execution-ready connector is available. Fix connector health before requesting hires.
         </p>
       ) : null}
@@ -102,31 +105,42 @@ export function AgentCreator({
           ]}
         />
       ) : null}
-      <Select
-        label="Workspace"
-        value={workspaceId}
-        onChange={setWorkspaceId}
-        options={[
-          { value: "", label: "No workspace" },
-          ...workspaces.map((workspace) => ({ value: workspace.id, label: workspace.name })),
-        ]}
-      />
-      <Select
-        label="Reports to"
-        value={reportsTo}
-        onChange={setReportsTo}
-        options={[
-          { value: "", label: "No manager" },
-          ...agents.map((a) => ({ value: a.id, label: a.name })),
-        ]}
-      />
-      <Input label="Monthly budget (USD)" value={budget} onChange={setBudget} placeholder="120" type="number" />
-      <TextArea
-        label="Capabilities"
-        value={capabilities}
-        onChange={setCapabilities}
-        placeholder="What this agent does"
-      />
+      <button type="button" onClick={() => setShowAdvanced(!showAdvanced)} className="flex items-center gap-1.5 text-[12px] font-medium text-muted-foreground transition hover:text-foreground">
+        <svg width="10" height="10" viewBox="0 0 10 10" className={`transition-transform ${showAdvanced ? "rotate-90" : ""}`}><path d="M3 1l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" fill="none" /></svg>
+        Advanced settings
+      </button>
+      <AnimatePresence>
+      {showAdvanced ? (
+        <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: "auto", opacity: 1 }} exit={{ height: 0, opacity: 0 }} transition={{ duration: 0.25, ease: [0.16, 1, 0.3, 1] }} className="grid gap-4 overflow-hidden">
+          <Select
+            label="Workspace"
+            value={workspaceId}
+            onChange={setWorkspaceId}
+            options={[
+              { value: "", label: "No workspace" },
+              ...workspaces.map((workspace) => ({ value: workspace.id, label: workspace.name })),
+            ]}
+          />
+          <Select
+            label="Reports to"
+            value={reportsTo}
+            onChange={setReportsTo}
+            options={[
+              { value: "", label: "No manager" },
+              ...agents.map((a) => ({ value: a.id, label: a.name })),
+            ]}
+          />
+          <Input label="Monthly budget (USD)" value={budget} onChange={setBudget} placeholder="120" type="number" hint="Spending cap per month; agent pauses when exceeded" />
+          <TextArea
+            label="Capabilities"
+            value={capabilities}
+            onChange={setCapabilities}
+            placeholder="What this agent does"
+            hint="Skills and domain knowledge injected into the agent's system prompt"
+          />
+        </motion.div>
+      ) : null}
+      </AnimatePresence>
       <p className="text-[12px] text-muted-foreground">
         New agents enter the hiring pipeline first. Approval activates the agent and keeps onboarding, budgets, and org history linked to the same record.
       </p>

src/renderer/components/organization/AgentEditor.tsx

@@ -155,7 +155,7 @@ export function AgentEditor({
         options={connectorOptions}
       />
       {selectedConnectorIssue ? (
-        <p className="text-[12px] text-yellow-600 dark:text-yellow-400">
+        <p className="text-[12px] text-warning">
           {selectedConnectorIssue}
         </p>
       ) : null}

src/renderer/components/organization/OrgChart.tsx

@@ -76,7 +76,7 @@ export function OrgChart({ agents, connectors, onSelectAgent }: { agents: AgentR
     <div ref={containerRef} className="relative min-h-[400px] h-[clamp(400px,60vh,720px)] w-full overflow-hidden rounded-lg border border-border bg-background" style={{ cursor: dragging ? "grabbing" : "grab" }} onMouseDown={handleMouseDown} onMouseMove={handleMouseMove} onMouseUp={handleMouseUp} onMouseLeave={handleMouseUp} onWheel={handleWheel}>
       <div className="absolute right-3 top-3 z-10 flex flex-col gap-1">
         {[{ label: "+", ariaLabel: "Zoom in", action: zoomIn }, { label: "\u2212", ariaLabel: "Zoom out", action: zoomOut }, { label: "Fit", ariaLabel: "Fit chart to screen", action: fitToScreen }].map((btn) => (
-          <button key={btn.ariaLabel} className="flex h-7 w-7 items-center justify-center rounded-lg border border-border bg-card text-[12px] text-foreground transition hover:bg-muted" onClick={btn.action} aria-label={btn.ariaLabel}>{btn.label}</button>
+          <button key={btn.ariaLabel} className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-card text-[12px] text-foreground transition hover:bg-muted" onClick={btn.action} aria-label={btn.ariaLabel}>{btn.label}</button>
         ))}
       </div>
       <svg className="pointer-events-none absolute inset-0" style={{ width: "100%", height: "100%" }}>
@@ -103,11 +103,11 @@ export function OrgChart({ agents, connectors, onSelectAgent }: { agents: AgentR
           const isPending = node.agent.status === "pending_approval";
           const isCEO = node.children.length > 0 && !node.agent.reportsTo;
           return (
-            <div key={node.agent.id} data-org-card className={`absolute cursor-pointer select-none rounded-lg border bg-card shadow-sm transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 ${isRunning ? "border-[color:var(--primary)] shadow-[0_0_12px_rgba(74,222,128,0.15)]" : isError ? "border-[color:var(--destructive)] border-opacity-50" : isPending ? "border-[color:var(--destructive)] border-dashed" : "border-border hover:border-border"}`} style={{ left: node.x, top: node.y, width: CARD_W, minHeight: CARD_H }} onClick={() => onSelectAgent?.(node.agent.id)}>
-              <div className={`rounded-t-[7px] ${isCEO ? "h-[4px] bg-primary" : node.children.length > 0 ? "h-[3px] bg-yellow-600 dark:bg-yellow-400" : "h-[2px] bg-[color:var(--muted-foreground)] opacity-30"}`} />
+            <div key={node.agent.id} data-org-card role="button" tabIndex={0} aria-label={`${node.agent.name}, ${node.agent.title || node.agent.role}, ${node.agent.status}`} className={`absolute cursor-pointer select-none rounded-lg border bg-card shadow-sm transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${isRunning ? "border-[color:var(--primary)] shadow-[0_0_12px_rgba(74,222,128,0.15)]" : isError ? "border-[color:var(--destructive)] border-opacity-50" : isPending ? "border-[color:var(--destructive)] border-dashed" : "border-border hover:border-border"}`} style={{ left: node.x, top: node.y, width: CARD_W, minHeight: CARD_H }} onClick={() => onSelectAgent?.(node.agent.id)} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onSelectAgent?.(node.agent.id); } }}>
+              <div className={`rounded-t-[7px] ${isCEO ? "h-[4px] bg-primary" : node.children.length > 0 ? "h-[3px] bg-warning" : "h-[2px] bg-[color:var(--muted-foreground)] opacity-30"}`} />
               <div className="flex items-center gap-3 px-4 py-3">
                 <div className="relative shrink-0">
-                  <div className={`flex h-11 w-11 items-center justify-center rounded-full text-[13px] font-bold ${isActive ? "bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400" : isError ? "bg-red-100 dark:bg-red-900/50 text-destructive" : "bg-muted text-muted-foreground"}`}>{initials}</div>
+                  <div className={`flex h-11 w-11 items-center justify-center rounded-full text-[13px] font-bold ${isActive ? "bg-success-muted text-success" : isError ? "bg-destructive-muted text-destructive" : "bg-muted text-muted-foreground"}`}>{initials}</div>
                   {isRunning ? (
                     <span className="absolute -bottom-0.5 -right-0.5 flex h-3.5 w-3.5" aria-hidden="true">
                       <span className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-40" style={{ backgroundColor: dotColor, willChange: "transform" }} />
@@ -123,7 +123,7 @@ export function OrgChart({ agents, connectors, onSelectAgent }: { agents: AgentR
                   <span className="mt-0.5 text-[11px] leading-tight text-muted-foreground">{node.agent.title || node.agent.role}</span>
                   <div className="mt-1.5 flex items-center gap-2">
                     <span className="rounded bg-muted px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">{connectorLabel}</span>
-                    {node.agent.heartbeatEnabled ? <Heartbeat size={10} className="text-green-600 dark:text-green-400" /> : null}
+                    {node.agent.heartbeatEnabled ? <Heartbeat size={10} className="text-success" /> : null}
                   </div>
                 </div>
               </div>

src/renderer/components/organization/helpers.tsx

@@ -10,7 +10,7 @@ export function BudgetBar({ spent, budget }: { spent: number; budget: number })
     <div className="flex items-center gap-2">
       <div className="h-1.5 w-20 overflow-hidden rounded-full bg-[color:var(--border)]">
         <div
-          className={`h-full rounded-full transition-all ${overBudget ? "bg-destructive" : "bg-green-600 dark:bg-green-400"}`}
+          className={`h-full rounded-full transition-all ${overBudget ? "bg-destructive" : "bg-success"}`}
           style={{ width: `${pct}%` }}
         />
       </div>
@@ -31,7 +31,7 @@ export function ConfirmDelete({
   onCancel: () => void;
 }) {
   return (
-    <div className="flex items-center gap-3 rounded-lg border border-[color:var(--destructive)] bg-red-100 dark:bg-red-900/50 px-4 py-3">
+    <div className="flex items-center gap-3 rounded-lg border border-[color:var(--destructive)] bg-destructive-muted px-4 py-3">
       <span className="text-[13px] text-destructive">Delete {entityLabel}?</span>
       <ActionButton label="Yes, delete" tone="danger" onClick={onConfirm} icon={Trash} />
       <ActionButton label="Cancel" onClick={onCancel} icon={XCircle} />
@@ -118,7 +118,7 @@ export function HeartbeatSection({
           }
         />
         {persistedConnectorIssue ? (
-          <p className="mt-2 text-[12px] text-yellow-600 dark:text-yellow-400">
+          <p className="mt-2 text-[12px] text-warning">
             {persistedConnectorIssue} Save a ready connector before waking this agent again.
           </p>
         ) : null}