groove-dev 0.27.140 → 0.27.142

package/packages/gui/src/views/agents.jsx

@@ -10,7 +10,7 @@ import { RootNode } from '../components/agents/root-node';
 import { cn } from '../lib/cn';
 import { Button } from '../components/ui/button';
 import { Badge } from '../components/ui/badge';
-import { Plus, Users, UserPlus, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, Layers, Box, HardDrive, LayoutGrid } from 'lucide-react';
+import { Plus, Users, UserPlus, Zap, X, Check, Rocket, Server, Monitor, Code2, TestTube, Shield, Pencil, Copy, Trash2, ChevronDown, ChevronLeft, ChevronRight, FolderOpen, Eye, Settings2, Search, GripVertical, Cloud, FileText, Database, Megaphone, Calculator, UserCheck, Headphones, BarChart3, Pen, Presentation, Globe, MessageCircle, Save, Layers, LayoutGrid, Activity, Gauge, Cpu } from 'lucide-react';
 import { PreviewWorkspace } from '../components/preview/preview-workspace';
 import { WorkspaceMode } from '../components/agents/workspace-mode';
 import { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuSeparator } from '../components/ui/context-menu';
@@ -1258,7 +1258,7 @@ function RecommendedTeamCard() {
   const [tsModel, setTsModel] = useState(teamLaunchConfig?.model || '');
   const [tsReasoning, setTsReasoning] = useState(teamLaunchConfig?.reasoningEffort ?? 50);
   const [tsTemp, setTsTemp] = useState(teamLaunchConfig?.temperature ?? 0.5);
-  const [tsMode, setTsMode] = useState(teamLaunchConfig?.mode || 'sandbox');
+  const [expandedAgent, setExpandedAgent] = useState(null);
 
   useEffect(() => {
     fetchProviders().then((list) => {
@@ -1283,6 +1283,15 @@ function RecommendedTeamCard() {
     setEditedAgents(next);
   }
 
+  function handleAgentField(i, updates) {
+    if (typeof updates === 'string') {
+      const [field, value] = [updates, arguments[2]];
+      setEditedAgents((prev) => (prev ?? agentEdits).map((a, idx) => idx === i ? { ...a, [field]: value } : a));
+    } else {
+      setEditedAgents((prev) => (prev ?? agentEdits).map((a, idx) => idx === i ? { ...a, ...updates } : a));
+    }
+  }
+
   function handleTsProviderChange(id) {
     setTsProvider(id);
     const p = providers.find((x) => x.id === id);
@@ -1298,7 +1307,6 @@ function RecommendedTeamCard() {
         ...(tsProvider && { provider: tsProvider, model: tsModel }),
         reasoningEffort: tsReasoning,
         ...(showTemp && { temperature: tsTemp }),
-        mode: tsMode,
       },
     });
     try {
@@ -1376,41 +1384,6 @@ function RecommendedTeamCard() {
                   formatValue={(v) => v.toFixed(2)}
                 />
               )}
-              {/* Build Mode */}
-              <div className="space-y-1">
-                <label className="text-2xs text-text-3 font-sans">Build Mode</label>
-                <div className="flex rounded-md bg-surface-4 border border-border-subtle p-0.5">
-                  <button
-                    onClick={() => setTsMode('sandbox')}
-                    className={cn(
-                      'flex-1 flex items-center justify-center gap-1.5 rounded px-2 py-1.5 text-xs font-sans transition-all cursor-pointer',
-                      tsMode === 'sandbox'
-                        ? 'bg-surface-2 text-text-0 font-semibold shadow-sm'
-                        : 'text-text-3 hover:text-text-1',
-                    )}
-                  >
-                    <Box size={11} />
-                    Sandbox
-                  </button>
-                  <button
-                    onClick={() => setTsMode('production')}
-                    className={cn(
-                      'flex-1 flex items-center justify-center gap-1.5 rounded px-2 py-1.5 text-xs font-sans transition-all cursor-pointer',
-                      tsMode === 'production'
-                        ? 'bg-surface-2 text-text-0 font-semibold shadow-sm'
-                        : 'text-text-3 hover:text-text-1',
-                    )}
-                  >
-                    <HardDrive size={11} />
-                    Production
-                  </button>
-                </div>
-                <p className="text-2xs text-text-4 font-sans">
-                  {tsMode === 'sandbox'
-                    ? 'Files live in a team directory, removable with the team'
-                    : 'Files live in the project directory, persist forever'}
-                </p>
-              </div>
             </div>
           )}
         </div>
@@ -1419,31 +1392,116 @@ function RecommendedTeamCard() {
           {agentEdits.map((a, i) => {
             const Icon = ROLE_ICONS[a.role] || Code2;
             const nameValid = !a.name || NAME_RE.test(a.name);
+            const isExpanded = expandedAgent === i;
+            const agentProvider = providers.find((p) => p.id === (a.provider || tsProvider));
+            const agentModels = (agentProvider?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
             return (
-              <div key={i} className="flex items-center gap-2 px-2.5 py-1.5 rounded-md bg-surface-4 border border-border-subtle">
-                <Icon size={12} className="text-text-2 shrink-0" />
-                <input
-                  type="text"
-                  value={a.name}
-                  onChange={(e) => handleNameChange(i, e.target.value)}
-                  placeholder={a.role}
-                  className={cn(
-                    'flex-1 min-w-0 bg-transparent text-xs font-mono text-text-0 outline-none placeholder:text-text-4',
-                    !nameValid && 'text-red-400',
+              <div key={i} className="rounded-md bg-surface-4 border border-border-subtle overflow-hidden">
+                <div
+                  className="flex items-center gap-2 px-2.5 py-1.5 cursor-pointer hover:bg-surface-5/50 transition-colors"
+                  onClick={() => setExpandedAgent(isExpanded ? null : i)}
+                >
+                  <Icon size={12} className="text-text-2 shrink-0" />
+                  <input
+                    type="text"
+                    value={a.name}
+                    onChange={(e) => handleNameChange(i, e.target.value)}
+                    onClick={(e) => e.stopPropagation()}
+                    placeholder={a.role}
+                    className={cn(
+                      'flex-1 min-w-0 bg-transparent text-xs font-mono text-text-0 outline-none placeholder:text-text-4',
+                      !nameValid && 'text-red-400',
+                    )}
+                    maxLength={64}
+                    spellCheck={false}
+                  />
+                  {a.provider && a.provider !== tsProvider && (
+                    <span className="text-2xs text-accent font-mono shrink-0">{a.provider}</span>
                   )}
-                  maxLength={64}
-                  spellCheck={false}
-                />
-                {a.scope?.length > 0 && (
-                  <span className="text-2xs text-text-4 font-mono shrink-0 truncate max-w-[120px]">
-                    {a.scope[0]}{a.scope.length > 1 ? ` +${a.scope.length - 1}` : ''}
-                  </span>
+                  {a.scope?.length > 0 && (
+                    <span className="text-2xs text-text-4 font-mono shrink-0 truncate max-w-[120px]">
+                      {a.scope[0]}{a.scope.length > 1 ? ` +${a.scope.length - 1}` : ''}
+                    </span>
+                  )}
+                  <ChevronDown size={10} className={cn('text-text-4 shrink-0 transition-transform duration-200', !isExpanded && '-rotate-90')} />
+                </div>
+                {isExpanded && (
+                  <div className="px-2.5 pb-2.5 pt-1 space-y-2.5 border-t border-border-subtle">
+                    <div className="flex gap-2">
+                      <div className="flex-1 space-y-1">
+                        <label className="flex items-center gap-1 text-2xs text-text-3 font-sans"><Cpu size={10} />Provider</label>
+                        <Select value={a.provider || ''} onValueChange={(id) => {
+                          const p = providers.find((x) => x.id === id);
+                          const pModels = (p?.models || []).filter((m) => m.type !== 'image' && !m.disabled);
+                          handleAgentField(i, { provider: id, model: pModels[0]?.id || '' });
+                        }}>
+                          <SelectTrigger placeholder="Team default" className="bg-surface-3 h-7 text-xs" />
+                          <SelectContent>
+                            <SelectItem value="">Team default</SelectItem>
+                            {providers.map((p) => (
+                              <SelectItem key={p.id} value={p.id}>{p.displayName || p.name || p.id}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="flex-1 space-y-1">
+                        <label className="text-2xs text-text-3 font-sans">Model</label>
+                        <Select value={a.model || ''} onValueChange={(v) => handleAgentField(i, 'model', v)}>
+                          <SelectTrigger placeholder="Auto" className="bg-surface-3 h-7 text-xs" />
+                          <SelectContent>
+                            <SelectItem value="">Auto</SelectItem>
+                            {agentModels.map((m) => (
+                              <SelectItem key={m.id} value={m.id}>{m.name || m.id}</SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="flex items-center gap-1 text-2xs text-text-3 font-sans"><Activity size={10} />Model Routing</label>
+                      <div className="flex bg-surface-3 rounded-md p-0.5 border border-border-subtle">
+                        {[{ value: 'fixed', label: 'Fixed' }, { value: 'auto', label: 'Auto' }, { value: 'auto-floor', label: 'Auto + Floor' }].map((opt) => (
+                          <button
+                            key={opt.value}
+                            onClick={() => handleAgentField(i, 'routingMode', opt.value)}
+                            className={cn(
+                              'flex-1 px-2 py-1 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
+                              (a.routingMode || 'auto') === opt.value
+                                ? 'bg-accent/15 text-accent shadow-sm'
+                                : 'text-text-3 hover:text-text-1',
+                            )}
+                          >
+                            {opt.label}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <label className="flex items-center gap-1 text-2xs text-text-3 font-sans"><Gauge size={10} />Effort Level</label>
+                      <div className="flex bg-surface-3 rounded-md p-0.5 border border-border-subtle">
+                        {[{ value: 'min', label: 'Min' }, { value: 'low', label: 'Low' }, { value: 'default', label: 'Default' }, { value: 'high', label: 'High' }, { value: 'max', label: 'Max' }].map((opt) => (
+                          <button
+                            key={opt.value}
+                            onClick={() => handleAgentField(i, 'effort', opt.value)}
+                            className={cn(
+                              'flex-1 px-1.5 py-1 text-2xs font-semibold font-sans rounded transition-all cursor-pointer',
+                              (a.effort || 'default') === opt.value
+                                ? 'bg-accent/15 text-accent shadow-sm'
+                                : 'text-text-3 hover:text-text-1',
+                            )}
+                          >
+                            {opt.label}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
                 )}
               </div>
             );
           })}
 
-          {recommendedTeam.projectDir && tsMode === 'sandbox' && (
+          {recommendedTeam.projectDir && (
             <div className="flex items-center gap-1.5 text-2xs text-text-2 font-mono pt-0.5">
               <span className="text-text-4">Project:</span>
               <span className="text-accent">{recommendedTeam.projectDir}/</span>

package/packages/gui/src/views/dashboard.jsx

@@ -4,6 +4,7 @@ import { useGrooveStore } from '../stores/groove';
 import { DashboardHeader } from '../components/dashboard/header-bar';
 import { KpiStrip } from '../components/dashboard/kpi-card';
 import { FleetPanel } from '../components/dashboard/fleet-panel';
+import { ContextGauges } from '../components/dashboard/context-gauges';
 import { TokenChart } from '../components/dashboard/token-chart';
 import { CacheRing } from '../components/dashboard/cache-ring';
 import { RoutingChart } from '../components/dashboard/routing-chart';
@@ -142,6 +143,7 @@ export default function DashboardView() {
             <div className="px-3 pt-2.5 pb-1 flex-shrink-0">
               <span className="text-2xs font-mono text-text-3 uppercase tracking-widest">Agent Fleet</span>
             </div>
+            <ContextGauges agentBreakdown={agentBreakdown} />
             <FleetPanel agentBreakdown={agentBreakdown} rotating={rotating} teams={teams} />
           </div>
 

package/packages/gui/src/views/marketplace.jsx

@@ -4,15 +4,13 @@ import { ScrollArea } from '../components/ui/scroll-area';
 import { Badge } from '../components/ui/badge';
 import { Button } from '../components/ui/button';
 import { Skeleton } from '../components/ui/skeleton';
-import { SkillCard, SkillCardSkeleton } from '../components/marketplace/skill-card';
+import { SkillCardSkeleton } from '../components/marketplace/skill-card';
 import { MarketplaceCard } from '../components/marketplace/marketplace-card';
 import { SearchBar } from '../components/marketplace/search-bar';
-import { CategoryBar } from '../components/marketplace/category-bar';
 import { MarketplaceBadge } from '../components/marketplace/marketplace-badge';
 import { StarRating } from '../components/marketplace/star-rating';
 import { PriceBadge } from '../components/marketplace/price-badge';
 import { VerifiedShield } from '../components/marketplace/verified-shield';
-import { markFavorites } from '../components/marketplace/favorites';
 import { api } from '../lib/api';
 import { useToast } from '../lib/hooks/use-toast';
 import { fmtNum, timeAgo } from '../lib/format';
@@ -22,7 +20,7 @@ import { RepoImport } from '../components/marketplace/repo-import';
 import { RepoCard } from '../components/marketplace/repo-card';
 import { RepoNukeDialog } from '../components/marketplace/repo-nuke-dialog';
 import {
-  ChevronLeft, ChevronDown, Sparkles, Plug, LogIn,
+  ChevronLeft, Plug, LogIn,
   Upload, Package, Download, ShoppingBag, RefreshCw, Trash2,
   GitBranch,
 } from 'lucide-react';
@@ -214,70 +212,6 @@ function SkillDetail({ skill, onBack }) {
 }
 
 // ── Skills Browse ────────────────────────────────────────
-function SkillsBrowse() {
-  const [skills, setSkills] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [search, setSearch] = useState('');
-  const [category, setCategory] = useState('');
-  const [sort, setSort] = useState('popular');
-  const [selectedSkill, setSelectedSkill] = useState(null);
-
-  useEffect(() => {
-    setLoading(true);
-    const params = new URLSearchParams();
-    if (search) params.set('search', search);
-    if (category) params.set('category', category);
-    if (sort) params.set('sort', sort);
-    api.get(`/skills/registry?${params}`)
-      .then((d) => setSkills(markFavorites(d.skills || d.items || (Array.isArray(d) ? d : []))))
-      .catch(() => setSkills([]))
-      .finally(() => setLoading(false));
-  }, [search, category, sort]);
-
-  if (selectedSkill) {
-    return <SkillDetail skill={selectedSkill} onBack={() => setSelectedSkill(null)} />;
-  }
-
-  return (
-    <ScrollArea className="h-full">
-      <div className="px-5 py-4">
-        <div className="flex items-center gap-3">
-          <div className="w-72">
-            <SearchBar value={search} onChange={setSearch} />
-          </div>
-          <CategoryBar selected={category} onSelect={setCategory} />
-          <div className="flex-1" />
-          <div className="relative flex-shrink-0">
-            <select
-              value={sort}
-              onChange={(e) => setSort(e.target.value)}
-              className="appearance-none font-sans cursor-pointer pr-7 py-2 pl-3 text-xs bg-surface-0 border border-border-subtle rounded text-text-1 focus:outline-none"
-            >
-              <option value="popular">Popular</option>
-              <option value="rating">Top Rated</option>
-              <option value="newest">Newest</option>
-              <option value="name">A-Z</option>
-            </select>
-            <ChevronDown size={12} className="absolute right-2 top-1/2 -translate-y-1/2 text-text-4 pointer-events-none" />
-          </div>
-          <span className="text-2xs text-text-4 font-mono flex-shrink-0">{skills.length}</span>
-        </div>
-
-        <div className="mt-4 grid gap-3" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))' }}>
-          {loading
-            ? Array.from({ length: 8 }).map((_, i) => <SkillCardSkeleton key={i} />)
-            : skills.map((s) => <SkillCard key={s.id} skill={s} onClick={setSelectedSkill} />)
-          }
-        </div>
-
-        {!loading && skills.length === 0 && (
-          <div className="text-center py-16 text-text-4 font-sans text-sm">No skills found.</div>
-        )}
-      </div>
-    </ScrollArea>
-  );
-}
-
 // ── Integrations Browse ──────────────────────────────────
 const GOOGLE_IDS = new Set(['gmail', 'google-calendar', 'google-drive', 'google-docs', 'google-sheets', 'google-slides']);
 
@@ -666,10 +600,9 @@ function GitHubBrowse() {
 
 // ── Main ─────────────────────────────────────────────────
 export default function MarketplaceView() {
-  const [tab, setTab] = useState('skills');
+  const [tab, setTab] = useState('integrations');
 
   const tabs = [
-    { id: 'skills', label: 'Skills', icon: Sparkles },
     { id: 'integrations', label: 'Integrations', icon: Plug },
     { id: 'github', label: 'GitHub', icon: GitBranch },
     { id: 'library', label: 'My Library', icon: Package },
@@ -701,7 +634,6 @@ export default function MarketplaceView() {
 
       {/* Content */}
       <div className="flex-1 min-h-0">
-        {tab === 'skills' && <SkillsBrowse />}
         {tab === 'integrations' && <IntegrationsBrowse />}
         {tab === 'github' && <GitHubBrowse />}
         {tab === 'library' && <MyLibrary />}

package/packages/gui/src/views/memory.jsx

@@ -7,15 +7,15 @@ import { Dialog, DialogContent } from '../components/ui/dialog';
 import { BookOpen, Plus, Search, Trash2, Pencil, ChevronRight, Hash, FolderOpen, Clock, Save, Link2, FileText, Sparkles, HelpCircle } from 'lucide-react';
 
 const COMMANDS = [
-  { cmd: '[save]',     args: '#tag',                desc: 'Save the current message as a tagged memory' },
-  { cmd: '[append]',   args: '#tag',                desc: 'Add to an existing memory without overwriting' },
-  { cmd: '[update]',   args: '#tag',                desc: 'Open the editor to modify a memory in place' },
-  { cmd: '[delete]',   args: '#tag',                desc: 'Remove a memory permanently' },
-  { cmd: '[view]',     args: '#tag',                desc: 'Read a memory in the viewer' },
-  { cmd: '[read]',     args: '#tag1 #tag2 ...',     desc: 'Send memory content to the agent — agent reads it, chat stays clean' },
-  { cmd: '[doc]',      args: '#tag',                desc: 'AI synthesizes the full conversation into a document' },
-  { cmd: '[link]',     args: '#tag path/to/doc',    desc: 'Link a memory to a NORTHSTAR or external document' },
-  { cmd: '[instruct]', args: '',                    desc: 'Show this command reference' },
+  { cmd: 'save',     args: '#tag',                desc: 'Save the message and send it to the agent' },
+  { cmd: 'append',   args: '#tag',                desc: 'Add to an existing memory and send to agent' },
+  { cmd: 'update',   args: '#tag',                desc: 'Open the editor to modify a memory in place' },
+  { cmd: 'delete',   args: '#tag',                desc: 'Remove a memory permanently' },
+  { cmd: 'view',     args: '#tag',                desc: 'Read a memory in the viewer' },
+  { cmd: 'read',     args: '#tag1 #tag2 ...',     desc: 'Send memory content to the agent — chat stays clean' },
+  { cmd: 'doc',      args: '#tag',                desc: 'AI synthesizes the full conversation into a document' },
+  { cmd: 'link',     args: '#tag path/to/doc',    desc: 'Link a memory to a NORTHSTAR or external document' },
+  { cmd: '[instruct]', args: '',                  desc: 'Show this command reference' },
 ];
 
 function formatRelative(iso) {

package/packages/gui/src/views/model-lab.jsx

@@ -171,17 +171,12 @@ export default function ModelLabView() {
               <PanelToggle collapsed={false} onClick={() => setLeftCollapsed(true)} side="left" />
             </div>
             <ScrollArea className="flex-1 min-h-0">
-              <div className="px-4 pb-4 space-y-5">
+              <div className="px-4 pb-4 space-y-5 divide-y divide-border-subtle [&>*]:pt-5 [&>*:first-child]:pt-0">
                 <LaunchModel />
-                <div className="h-px bg-border-subtle" />
                 <RuntimeConfig />
-                <div className="h-px bg-border-subtle" />
                 <ModelSelector />
-                <div className="h-px bg-border-subtle" />
                 <ParameterPanel />
-                <div className="h-px bg-border-subtle" />
                 <PresetManager />
-                <div className="h-px bg-border-subtle" />
                 <SystemPromptEditor />
               </div>
             </ScrollArea>