groove-dev 0.27.7 → 0.27.11

package/packages/gui/src/components/agents/agent-config.jsx

@@ -5,7 +5,7 @@ import {
   Gauge, FolderSearch, Key, Check, Eye, EyeOff,
   AlertCircle, Layers, Activity,
   RotateCw, Skull, Copy, Trash2,
-  Sparkles, Calendar, Plug,
+  Sparkles, Calendar, Plug, MessageCircle, Save, GitBranch,
 } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { Badge } from '../ui/badge';
@@ -156,15 +156,21 @@ export function AgentConfig({ agent }) {
   const [expandedProvider, setExpandedProvider] = useState(null);
   const [routingMode, setRoutingMode] = useState(agent.routingMode || 'auto');
   const [installedSkills, setInstalledSkills] = useState([]);
+  const [importedRepos, setImportedRepos] = useState([]);
   const [scheduleUnit, setScheduleUnit] = useState('hr');
   const [scheduleCount, setScheduleCount] = useState('1');
   const [scheduling, setScheduling] = useState(false);
+  const [personalityContent, setPersonalityContent] = useState('');
+  const [personalityLoaded, setPersonalityLoaded] = useState(false);
+  const [personalities, setPersonalities] = useState([]);
+  const [savingPersonality, setSavingPersonality] = useState(false);
 
   const isAlive = agent.status === 'running' || agent.status === 'starting';
 
   useEffect(() => {
     loadProviders();
     api.get('/skills/installed').then((data) => setInstalledSkills(Array.isArray(data) ? data : data.skills || [])).catch(() => {});
+    api.get('/repos/imported').then((data) => setImportedRepos((Array.isArray(data) ? data : []).filter((r) => r.status === 'active'))).catch(() => {});
     function onChanged() { loadProviders(); }
     window.addEventListener('groove:providers-changed', onChanged);
     return () => window.removeEventListener('groove:providers-changed', onChanged);
@@ -181,6 +187,20 @@ export function AgentConfig({ agent }) {
     }).catch(() => {});
   }, [agent.id, agent.model]);
 
+  useEffect(() => {
+    setPersonalityLoaded(false);
+    api.get(`/personalities/${agent.name}`).then((data) => {
+      setPersonalityContent(data?.content || '');
+      setPersonalityLoaded(true);
+    }).catch(() => {
+      setPersonalityContent('');
+      setPersonalityLoaded(true);
+    });
+    api.get('/personalities').then((data) => {
+      setPersonalities(Array.isArray(data) ? data : data.personalities || []);
+    }).catch(() => {});
+  }, [agent.id, agent.name]);
+
   const currentProvider = providers.find((p) => p.id === agent.provider);
 
   async function handleModelSwap(providerId, modelId) {
@@ -612,6 +632,60 @@ export function AgentConfig({ agent }) {
         </div>
       </ConfigSection>
 
+      {/* ── Repos ─────────────────────────────────────────── */}
+      {importedRepos.length > 0 && (
+        <ConfigSection label="Repos" icon={GitBranch} description="Attach imported repos so this agent knows where they are.">
+          <div className="flex flex-wrap gap-1.5">
+            {(agent.repos || []).map((importId) => {
+              const repo = importedRepos.find((r) => r.id === importId);
+              return (
+                <Badge key={importId} variant="accent" className="font-mono text-xs gap-1.5 px-2.5 py-1">
+                  {repo?.name || importId}
+                  <button
+                    onClick={async () => {
+                      try {
+                        await api.delete(`/agents/${agent.id}/repos/${importId}`);
+                        addToast('success', `Detached ${repo?.name || importId}`);
+                      } catch (err) { addToast('error', 'Detach failed', err.message); }
+                    }}
+                    className="hover:text-danger cursor-pointer"
+                  >
+                    <X size={10} />
+                  </button>
+                </Badge>
+              );
+            })}
+            {importedRepos.filter((r) => !(agent.repos || []).includes(r.id)).length > 0 && (
+              <div className="relative group">
+                <button className="w-7 h-7 flex items-center justify-center rounded-md bg-surface-4 border border-border-subtle text-text-3 hover:text-accent cursor-pointer transition-colors">
+                  <Plus size={12} />
+                </button>
+                <div className="absolute top-full left-0 mt-1 z-20 hidden group-hover:block bg-surface-2 border border-border-subtle rounded-lg shadow-xl py-1 min-w-[200px]">
+                  {importedRepos.filter((r) => !(agent.repos || []).includes(r.id)).map((repo) => (
+                    <button
+                      key={repo.id}
+                      onClick={async () => {
+                        try {
+                          await api.post(`/agents/${agent.id}/repos/${repo.id}`);
+                          addToast('success', `Attached ${repo.name || repo.id}`);
+                        } catch (err) { addToast('error', 'Attach failed', err.message); }
+                      }}
+                      className="w-full text-left px-3 py-1.5 text-xs font-sans text-text-1 hover:bg-surface-4 cursor-pointer transition-colors"
+                    >
+                      <div className="font-semibold">{repo.name || repo.repo}</div>
+                      <div className="text-2xs text-text-4 font-mono truncate">{repo.clonedTo}</div>
+                    </button>
+                  ))}
+                </div>
+              </div>
+            )}
+            {(agent.repos || []).length === 0 && (
+              <span className="text-2xs text-text-4 font-sans">No repos attached — import one from the Marketplace</span>
+            )}
+          </div>
+        </ConfigSection>
+      )}
+
       {/* ── Schedule ──────────────────────────────────────── */}
       <ConfigSection label="Schedule" icon={Calendar} description="Run this agent on a recurring schedule.">
         <div className="flex items-center gap-2">
@@ -686,6 +760,61 @@ export function AgentConfig({ agent }) {
         </div>
       </ConfigSection>
 
+      {/* ── Personality ──────────────────────────────────── */}
+      <ConfigSection label="Personality" icon={MessageCircle} description="Injected into every prompt. Changes apply on next spawn or rotation.">
+        <textarea
+          value={personalityContent}
+          onChange={(e) => setPersonalityContent(e.target.value)}
+          placeholder={personalityLoaded ? 'Describe this agent\'s personality, tone, and behavior...' : 'Loading...'}
+          rows={4}
+          className="w-full min-h-[4rem] max-h-[10rem] resize-y bg-surface-0 border border-border-subtle rounded-md p-2 text-xs font-mono text-text-1 placeholder:text-text-4 focus:outline-none focus:ring-1 focus:ring-accent"
+        />
+        <div className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            size="sm"
+            disabled={savingPersonality}
+            onClick={async () => {
+              setSavingPersonality(true);
+              try {
+                await api.put(`/personalities/${agent.name}`, { content: personalityContent });
+                addToast('success', 'Personality saved');
+              } catch (err) {
+                addToast('error', 'Save failed', err.message);
+              }
+              setSavingPersonality(false);
+            }}
+            className="h-7 px-3 text-2xs gap-1"
+          >
+            <Save size={10} />
+            {savingPersonality ? 'Saving...' : 'Save'}
+          </Button>
+          {personalities.length > 0 && (
+            <div className="relative">
+              <select
+                value=""
+                onChange={(e) => {
+                  if (!e.target.value) return;
+                  const p = personalities.find((x) => (x.name || x) === e.target.value);
+                  if (p) {
+                    api.get(`/personalities/${p.name || p}`).then((data) => {
+                      if (data?.content) setPersonalityContent(data.content);
+                    }).catch(() => {});
+                  }
+                }}
+                className="h-7 px-2 pr-7 text-2xs rounded-md bg-surface-1 border border-border-subtle text-text-2 font-sans appearance-none cursor-pointer focus:outline-none focus:ring-1 focus:ring-accent"
+              >
+                <option value="">Clone from...</option>
+                {personalities.filter((p) => (p.name || p) !== agent.name).map((p) => (
+                  <option key={p.name || p} value={p.name || p}>{p.name || p}</option>
+                ))}
+              </select>
+              <ChevronDown size={10} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-4 pointer-events-none" />
+            </div>
+          )}
+        </div>
+      </ConfigSection>
+
       {/* ── Original Prompt ────────────────────────────────── */}
       {agent.prompt && (
         <ConfigSection label="Original Prompt" icon={Activity}>

package/packages/gui/src/components/agents/agent-feed.jsx

@@ -369,9 +369,9 @@ function StreamingBar({ agent }) {
       <div className="flex items-center gap-3 flex-shrink-0">
         <span className="text-[10px] text-text-4 font-mono">{fmtTokens(agent.tokensUsed)}</span>
         <div className="flex items-center gap-1.5">
-          <div className="w-14 h-1 rounded-full bg-surface-4 overflow-hidden">
+          <div className="w-14 h-0.5 rounded-sm bg-surface-4 overflow-hidden">
             <div
-              className="h-full rounded-full transition-all duration-500"
+              className="h-full rounded-sm transition-all duration-500"
               style={{
                 width: `${ctxPct}%`,
                 background: ctxPct >= 75 ? 'var(--color-danger)' : ctxPct >= 50 ? 'var(--color-warning)' : 'var(--color-accent)',

package/packages/gui/src/components/agents/agent-mdfiles.jsx

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import { api } from '../../lib/api';
 import { useGrooveStore } from '../../stores/groove';
 import { cn } from '../../lib/cn';
-import { FileText, Save, X, RefreshCw, ChevronLeft } from 'lucide-react';
+import { FileText, Save, X, RefreshCw, ChevronLeft, Plus } from 'lucide-react';
 
 export function AgentMdFiles({ agent }) {
   const addToast = useGrooveStore((s) => s.addToast);
@@ -13,6 +13,8 @@ export function AgentMdFiles({ agent }) {
   const [content, setContent] = useState('');
   const [original, setOriginal] = useState('');
   const [saving, setSaving] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [newFileName, setNewFileName] = useState('');
 
   async function fetchFiles() {
     try {
@@ -48,6 +50,20 @@ export function AgentMdFiles({ agent }) {
     setSaving(false);
   }
 
+  async function createFile() {
+    const name = newFileName.trim();
+    if (!name) return;
+    try {
+      await api.post(`/agents/${agent.id}/mdfiles/create`, { name });
+      setNewFileName('');
+      setCreating(false);
+      addToast('success', `Created ${name}.md`);
+      fetchFiles();
+    } catch (err) {
+      addToast('error', 'Create failed', err.message);
+    }
+  }
+
   const isDirty = content !== original;
 
   // File list view
@@ -57,6 +73,9 @@ export function AgentMdFiles({ agent }) {
         <div className="flex items-center gap-2 px-4 py-2.5 border-b border-border-subtle">
           <FileText size={12} className="text-text-3" />
           <span className="text-2xs font-semibold text-text-2 font-sans uppercase tracking-wider flex-1">Markdown Files</span>
+          <button onClick={() => setCreating(true)} className="p-1 text-text-4 hover:text-accent cursor-pointer" title="Create file">
+            <Plus size={12} />
+          </button>
           <button onClick={fetchFiles} className="p-1 text-text-4 hover:text-text-1 cursor-pointer">
             <RefreshCw size={11} />
           </button>
@@ -68,6 +87,23 @@ export function AgentMdFiles({ agent }) {
           </div>
         )}
 
+        {creating && (
+          <div className="flex items-center gap-1.5 px-4 py-2 border-b border-border-subtle bg-surface-0">
+            <FileText size={11} className="text-accent flex-shrink-0" />
+            <input
+              autoFocus
+              value={newFileName}
+              onChange={(e) => setNewFileName(e.target.value)}
+              onKeyDown={(e) => { if (e.key === 'Enter') createFile(); if (e.key === 'Escape') { setCreating(false); setNewFileName(''); } }}
+              placeholder="filename"
+              className="flex-1 bg-transparent text-xs text-text-0 font-mono outline-none placeholder:text-text-4"
+            />
+            <span className="text-[10px] text-text-4 font-mono">.md</span>
+            <button onClick={createFile} className="p-0.5 text-accent hover:text-accent/80 cursor-pointer"><Save size={11} /></button>
+            <button onClick={() => { setCreating(false); setNewFileName(''); }} className="p-0.5 text-text-4 hover:text-text-1 cursor-pointer"><X size={11} /></button>
+          </div>
+        )}
+
         <div className="flex-1 overflow-y-auto">
           {files.length === 0 ? (
             <div className="flex flex-col items-center justify-center h-full text-center px-4">
@@ -91,6 +127,12 @@ export function AgentMdFiles({ agent }) {
                   <span className="text-[10px] text-text-4 font-mono flex-shrink-0">
                     {f.size > 1024 ? `${(f.size / 1024).toFixed(1)}K` : `${f.size}B`}
                   </span>
+                  {f.source === 'personality' && (
+                    <span className="text-[9px] font-mono text-purple bg-purple/10 px-1 py-px rounded flex-shrink-0">personality</span>
+                  )}
+                  {f.source === 'user' && (
+                    <span className="text-[9px] font-mono text-accent bg-accent/10 px-1 py-px rounded flex-shrink-0">custom</span>
+                  )}
                 </button>
               ))}
             </div>

package/packages/gui/src/components/agents/agent-node.jsx

@@ -1,6 +1,7 @@
 // FSL-1.1-Apache-2.0 — see LICENSE
-import { memo, useState, useMemo, useRef, useEffect } from 'react';
+import { memo, useMemo, useRef, useEffect } from 'react';
 import { Handle, Position } from '@xyflow/react';
+import { Maximize2, X } from 'lucide-react';
 import { useGrooveStore } from '../../stores/groove';
 import { statusColor } from '../../lib/status';
 import { fmtNum, fmtDollar, fmtUptime } from '../../lib/format';
@@ -58,13 +59,14 @@ const AgentNode = memo(({ data, selected }) => {
   const contextPct = Math.round((agent.contextUsage || 0) * 100);
   const sColor = statusColor(agent.status);
   const tokens = agent.tokensUsed || 0;
-  const [hovered, setHovered] = useState(false);
   const nodeRef = useRef(null);
+  const expanded = useGrooveStore((s) => !!s.expandedNodes[agent.id]);
+  const toggleExpanded = useGrooveStore((s) => s.toggleNodeExpanded);
 
   useEffect(() => {
     const rfNode = nodeRef.current?.closest('.react-flow__node');
-    if (rfNode) rfNode.style.zIndex = hovered ? '1000' : '';
-  }, [hovered]);
+    if (rfNode) rfNode.style.zIndex = expanded ? '1000' : '';
+  }, [expanded]);
 
   const activityLog = useGrooveStore((s) => s.activityLog[agent.id]) || EMPTY;
   const tokenTimeline = useGrooveStore((s) => s.tokenTimeline[agent.id]) || EMPTY;
@@ -84,18 +86,9 @@ const AgentNode = memo(({ data, selected }) => {
     : 0;
 
   return (
-    <div
-      ref={nodeRef}
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
+    <div ref={nodeRef}>
       <div
-        className="w-[220px] overflow-hidden transition-all duration-200 ease-out"
-        style={{
-          background: hovered ? '#141720' : '#1c1f26',
-          border: `1px solid ${hovered ? '#2e3640' : selected ? '#2e323a' : '#262a32'}`,
-          borderRadius: 4,
-        }}
+        className={`w-[220px] overflow-hidden rounded-[4px] transition-all duration-200 ease-out bg-[#1c1f26] hover:bg-[#141720] border border-solid ${selected ? 'border-[#2e323a]' : 'border-[#262a32]'} hover:border-[#2e3640]`}
       >
         {/* Handles */}
         <Handle id="top" type="target" position={Position.Top} className="!w-1 !h-1 !bg-transparent !border-0" />
@@ -137,6 +130,12 @@ const AgentNode = memo(({ data, selected }) => {
             >
               {STATUS_SHORT[agent.status] || agent.status}
             </span>
+            <button
+              className="text-[#505862] hover:text-[#8b929e] cursor-pointer transition-colors flex-shrink-0"
+              onClick={(e) => { e.stopPropagation(); toggleExpanded(agent.id); }}
+            >
+              {expanded ? <X size={10} /> : <Maximize2 size={10} />}
+            </button>
           </div>
 
           <div className="flex items-center gap-1.5 mt-1.5">
@@ -169,10 +168,10 @@ const AgentNode = memo(({ data, selected }) => {
           </div>
         </div>
 
-        {/* ── Expanded stats (morphs on hover) ────────── */}
+        {/* ── Expanded stats (click-to-open) ─────────── */}
         <div
           className="grid transition-[grid-template-rows] duration-200 ease-out"
-          style={{ gridTemplateRows: hovered ? '1fr' : '0fr' }}
+          style={{ gridTemplateRows: expanded ? '1fr' : '0fr' }}
         >
           <div className="overflow-hidden">
             <div className="mx-3 border-t border-white/[0.04]" />

package/packages/gui/src/components/agents/spawn-wizard.jsx

@@ -11,7 +11,7 @@ import {
   Server, Monitor, Code2, TestTube, Cloud, FileText,
   Shield, Database, Megaphone, Calculator, UserCheck,
   Headphones, BarChart3, Rocket, ChevronDown, Pen, Presentation,
-  Sparkles, X, Search, AlertTriangle, Plug,
+  Sparkles, X, Search, AlertTriangle, Plug, MessageCircle, GitBranch,
 } from 'lucide-react';
 import { api } from '../../lib/api';
 import { Dialog, DialogContent } from '../ui/dialog';
@@ -53,6 +53,7 @@ const INTEGRATION_LOGOS = {
 };
 
 const ROLE_PRESETS = [
+  { id: 'chat',      label: 'Chat',       desc: 'Companion, assistant, conversation', icon: MessageCircle, tier: 'Medium' },
   { id: 'planner',   label: 'Planner',    desc: 'Plans the team and tasks',       icon: Rocket,     tier: 'Heavy' },
   { id: 'backend',   label: 'Backend',    desc: 'APIs, services, databases',       icon: Server,     tier: 'Medium' },
   { id: 'frontend',  label: 'Frontend',   desc: 'UI, components, styling',         icon: Monitor,    tier: 'Medium' },
@@ -103,6 +104,13 @@ export function SpawnWizard() {
   const [integrationModalOpen, setIntegrationModalOpen] = useState(false);
   const [integrationSearch, setIntegrationSearch] = useState('');
   const [integrationApproval, setIntegrationApproval] = useState('manual');
+  const [importedRepos, setImportedRepos] = useState([]);
+  const [selectedRepos, setSelectedRepos] = useState([]);
+  const [repoModalOpen, setRepoModalOpen] = useState(false);
+  const [repoSearch, setRepoSearch] = useState('');
+  const [personalities, setPersonalities] = useState([]);
+  const [selectedPersonality, setSelectedPersonality] = useState('');
+  const [showAdvanced, setShowAdvanced] = useState(false);
   const [spawning, setSpawning] = useState(false);
 
   useEffect(() => {
@@ -124,10 +132,19 @@ export function SpawnWizard() {
       api.get('/integrations/installed').then((data) => {
         setInstalledIntegrations(Array.isArray(data) ? data : []);
       }).catch(() => {});
+      api.get('/repos/imported').then((data) => {
+        setImportedRepos((Array.isArray(data) ? data : []).filter((r) => r.status === 'active'));
+      }).catch(() => {});
+      api.get('/personalities').then((data) => {
+        setPersonalities(Array.isArray(data) ? data : data.personalities || []);
+      }).catch(() => {});
       setRole(''); setCustomRole(''); setName(''); setProvider(''); setModel(''); setPrompt('');
       setSelectedSkills([]);
       setSelectedIntegrations([]);
       setIntegrationApproval('manual');
+      setSelectedRepos([]);
+      setSelectedPersonality('');
+      setShowAdvanced(false);
     }
   }, [open, fetchProviders]);
 
@@ -149,6 +166,8 @@ export function SpawnWizard() {
         ...(selectedSkills.length > 0 && { skills: selectedSkills }),
         ...(selectedIntegrations.length > 0 && { integrations: selectedIntegrations }),
         ...(selectedIntegrations.length > 0 && { integrationApproval }),
+        ...(selectedRepos.length > 0 && { repos: selectedRepos }),
+        ...(selectedPersonality && { personality: selectedPersonality }),
       };
       await spawnAgent(config);
       closeDetail();
@@ -539,6 +558,127 @@ export function SpawnWizard() {
                   </div>
                 )}
 
+                {/* Repos */}
+                {importedRepos.length > 0 && (
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-text-2 font-sans">Repos</label>
+                    <div className="flex flex-wrap items-center gap-1.5">
+                      {selectedRepos.map((importId) => {
+                        const repo = importedRepos.find((r) => r.id === importId);
+                        return (
+                          <span
+                            key={importId}
+                            className="inline-flex items-center gap-1 px-2 py-1 rounded bg-accent/12 text-accent border border-accent/25 text-2xs font-sans"
+                          >
+                            <GitBranch size={9} />
+                            {repo?.name || importId}
+                            <button
+                              onClick={() => setSelectedRepos((prev) => prev.filter((r) => r !== importId))}
+                              className="ml-0.5 hover:text-text-0 cursor-pointer"
+                            >
+                              <X size={9} />
+                            </button>
+                          </span>
+                        );
+                      })}
+                      <button
+                        onClick={() => { setRepoModalOpen(true); setRepoSearch(''); }}
+                        className={cn(
+                          'inline-flex items-center gap-1.5 px-2.5 py-1 rounded text-2xs font-sans transition-colors cursor-pointer',
+                          'bg-surface-0 text-text-2 border border-border-subtle hover:border-border hover:text-text-0',
+                        )}
+                      >
+                        <GitBranch size={10} />
+                        {selectedRepos.length > 0 ? 'Add repo' : 'Attach repo'}
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {/* Repo picker modal */}
+                <Dialog open={repoModalOpen} onOpenChange={setRepoModalOpen}>
+                  <DialogContent title="Select Repository" className="max-w-sm">
+                    <div className="space-y-3 p-4">
+                      {importedRepos.length > 1 && (
+                        <div className="relative">
+                          <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-text-4" />
+                          <input
+                            value={repoSearch}
+                            onChange={(e) => setRepoSearch(e.target.value)}
+                            placeholder="Search repos..."
+                            autoFocus
+                            className="w-full h-8 pl-8 pr-3 text-xs rounded-md bg-surface-0 border border-border text-text-0 font-sans focus:outline-none focus:ring-1 focus:ring-accent"
+                          />
+                        </div>
+                      )}
+                      <div className="max-h-64 overflow-y-auto space-y-1">
+                        {importedRepos
+                          .filter((r) => {
+                            if (!repoSearch) return true;
+                            const q = repoSearch.toLowerCase();
+                            return (r.name || r.repo || r.id).toLowerCase().includes(q);
+                          })
+                          .map((repo) => {
+                            const active = selectedRepos.includes(repo.id);
+                            return (
+                              <button
+                                key={repo.id}
+                                onClick={() => {
+                                  setSelectedRepos((prev) =>
+                                    active ? prev.filter((r) => r !== repo.id) : [...prev, repo.id]
+                                  );
+                                }}
+                                className={cn(
+                                  'w-full flex items-center gap-2.5 px-3 py-2 rounded-md text-left transition-colors cursor-pointer',
+                                  active
+                                    ? 'bg-accent/10 border border-accent/25'
+                                    : 'hover:bg-surface-3 border border-transparent',
+                                )}
+                              >
+                                <GitBranch size={12} className={active ? 'text-accent' : 'text-text-3'} />
+                                <div className="flex-1 min-w-0">
+                                  <div className="text-xs font-semibold text-text-0 font-sans truncate">{repo.name || repo.repo}</div>
+                                  <div className="text-2xs text-text-4 font-mono truncate">{repo.clonedTo}</div>
+                                </div>
+                                {active && <CheckMark />}
+                              </button>
+                            );
+                          })}
+                      </div>
+                    </div>
+                  </DialogContent>
+                </Dialog>
+
+                {/* Personality — shown for chat role, or via Advanced toggle for others */}
+                {(role === 'chat' || showAdvanced) && (
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-medium text-text-2 font-sans">Personality</label>
+                    <div className="relative">
+                      <select
+                        value={selectedPersonality}
+                        onChange={(e) => setSelectedPersonality(e.target.value)}
+                        className="w-full h-8 px-3 pr-8 text-sm rounded-md bg-surface-1 border border-border text-text-0 font-sans appearance-none cursor-pointer focus:outline-none focus:ring-1 focus:ring-accent"
+                      >
+                        <option value="">None (blank)</option>
+                        {personalities.map((p) => (
+                          <option key={p.name || p} value={p.name || p}>{p.name || p}</option>
+                        ))}
+                      </select>
+                      <ChevronDown size={14} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-3 pointer-events-none" />
+                    </div>
+                    <p className="text-2xs text-text-4 font-sans">Personality is injected into every prompt for this agent.</p>
+                  </div>
+                )}
+
+                {role !== 'chat' && !showAdvanced && (
+                  <button
+                    onClick={() => setShowAdvanced(true)}
+                    className="text-2xs text-text-3 hover:text-accent font-sans transition-colors cursor-pointer"
+                  >
+                    + Advanced options
+                  </button>
+                )}
+
               </div>
             )}
           </div>

package/packages/gui/src/components/dashboard/fleet-panel.jsx

@@ -94,16 +94,16 @@ const AgentRow = memo(function AgentRow({ agent, isRotating }) {
       {/* Context bar */}
       <div className="flex items-center gap-2">
         <div
-          className="relative flex-1 h-[4px] rounded-full overflow-visible"
+          className="relative flex-1 h-0.5 rounded-sm overflow-visible"
           style={{ background: hexAlpha(HEX.accent, 0.12) }}
         >
           <div
-            className="absolute inset-y-0 left-0 rounded-full transition-all duration-700"
+            className="absolute inset-y-0 left-0 rounded-sm transition-all duration-700"
             style={{ width: `${Math.max(contextPct, 1)}%`, background: barColor }}
           />
           {thresholdPct && (
             <div
-              className="absolute top-[-2px] w-px h-[8px]"
+              className="absolute top-[-1px] w-px h-[4px]"
               style={{ left: `${thresholdPct}%`, background: HEX.purple }}
               title={`Rotation at ${thresholdPct}%`}
             />

package/packages/gui/src/components/dashboard/intel-panel.jsx

@@ -61,8 +61,8 @@ function QualityBar({ score }) {
   const pct = Math.max(0, Math.min(100, score || 0));
   const color = qualityColor(score);
   return (
-    <div className="h-1 rounded-full overflow-hidden flex-1" style={{ background: 'rgba(51,175,188,0.08)' }}>
-      <div className="h-full rounded-full transition-all duration-700" style={{ width: `${pct}%`, background: color }} />
+    <div className="h-0.5 rounded-sm overflow-hidden flex-1" style={{ background: 'rgba(51,175,188,0.08)' }}>
+      <div className="h-full rounded-sm transition-all duration-700" style={{ width: `${pct}%`, background: color }} />
     </div>
   );
 }
@@ -81,9 +81,9 @@ function ProgressBar({ label, value, total, color }) {
           <span className="text-2xs font-mono text-text-3 tabular-nums w-10 text-right">{fmtNum(value)}</span>
         </div>
       </div>
-      <div className="h-[7px] rounded-full overflow-hidden" style={{ background: 'rgba(51,175,188,0.08)' }}>
+      <div className="h-0.5 rounded-sm overflow-hidden" style={{ background: 'rgba(51,175,188,0.08)' }}>
         <div
-          className="h-full rounded-full transition-all duration-500"
+          className="h-full rounded-sm transition-all duration-500"
           style={{ width: `${Math.min(pct, 100)}%`, background: color }}
         />
       </div>
@@ -118,7 +118,7 @@ function HealthTab({ tokens, rotation, agentBreakdown }) {
             Quality
             <InfoTip text="Average session quality score (0-100). Based on error rate, tool failures, repetitions, and file churn. Below 40 triggers auto-rotation to prevent wasted tokens." />
           </div>
-          <div className="text-2xl font-mono font-bold tabular-nums leading-none" style={{ color: qualityColor(avgQuality) }}>
+          <div className="text-base font-mono font-bold text-text-1 tabular-nums leading-none">
             {avgQuality ?? '—'}
           </div>
         </div>
@@ -127,7 +127,7 @@ function HealthTab({ tokens, rotation, agentBreakdown }) {
             Rotations
             <InfoTip text="Context rotations: quality-based (q), context threshold (c), and natural compactions (n) from provider-managed context resets. Each rotation preserves progress via a journalist handoff brief." />
           </div>
-          <div className="text-2xl font-mono font-bold text-text-0 tabular-nums leading-none">
+          <div className="text-base font-mono font-bold text-text-1 tabular-nums leading-none">
             {rotation?.totalRotations || 0}
           </div>
           {(rotation?.qualityRotations > 0 || rotation?.contextRotations > 0 || rotation?.naturalCompactions > 0) && (
@@ -141,7 +141,7 @@ function HealthTab({ tokens, rotation, agentBreakdown }) {
             Cache
             <InfoTip text="Prompt cache hit rate. Cache reads are ~90% cheaper than regular input tokens. Managed by your AI provider — GROOVE tracks it, doesn't control it." />
           </div>
-          <div className="text-2xl font-mono font-bold tabular-nums leading-none" style={{ color: HEX.accent }}>
+          <div className="text-base font-mono font-bold text-text-1 tabular-nums leading-none">
             {fmtPct((tokens?.cacheHitRate || 0) * 100)}
           </div>
         </div>
@@ -150,7 +150,7 @@ function HealthTab({ tokens, rotation, agentBreakdown }) {
             Success
             <InfoTip text="Agent completion rate. Completed agents vs. crashed agents. High success rate means agents are finishing tasks without errors." />
           </div>
-          <div className="text-2xl font-mono font-bold tabular-nums leading-none" style={{ color: completionRate >= 90 ? '#4ae168' : '#e5c07b' }}>
+          <div className="text-base font-mono font-bold text-text-1 tabular-nums leading-none">
             {completionRate}%
           </div>
         </div>

package/packages/gui/src/components/dashboard/routing-chart.jsx

@@ -34,7 +34,7 @@ const RoutingChart = memo(function RoutingChart({ routing, agentBreakdown }) {
             <span className="text-2xs font-mono text-text-4 ml-auto tabular-nums">{fmtNum(total)} decisions</span>
           </div>
           {/* Stacked horizontal bar */}
-          <div className="h-[6px] bg-surface-4 rounded-full overflow-hidden flex">
+          <div className="h-0.5 bg-surface-2 rounded-sm overflow-hidden flex">
             {tiers.map((tier) => {
               const count = byTier[tier] || 0;
               if (count === 0) return null;
@@ -86,9 +86,9 @@ const RoutingChart = memo(function RoutingChart({ routing, agentBreakdown }) {
                     <span className="text-2xs font-mono text-text-3 tabular-nums">{usage.agents} agent{usage.agents !== 1 ? 's' : ''}</span>
                     <span className="text-xs font-mono text-text-1 tabular-nums">{fmtNum(usage.tokens)}</span>
                   </div>
-                  <div className="h-[3px] bg-surface-4 rounded-full overflow-hidden">
+                  <div className="h-0.5 bg-surface-4 rounded-sm overflow-hidden">
                     <div
-                      className="h-full rounded-full transition-all duration-500"
+                      className="h-full rounded-sm transition-all duration-500"
                       style={{ width: `${Math.max(barPct, 2)}%`, background: HEX.accent }}
                     />
                   </div>

package/packages/gui/src/components/dashboard/team-burn-panel.jsx

@@ -18,7 +18,7 @@ export const TeamBurnPanel = memo(function TeamBurnPanel({ teams = [] }) {
         {teams.length === 0 ? (
           <div className="px-3 py-6 text-center text-xs text-text-3 font-mono">No team activity yet</div>
         ) : (
-          <div className="px-3 pb-2 space-y-1.5">
+          <div className="px-3 py-3 space-y-3">
             {teams.map((t) => {
               const pct = maxTokens > 0 ? (t.totalTokens / maxTokens) * 100 : 0;
               return (