New-agent logo-button picker; new-group per-agent quantity cart

web/src/App.tsx

@@ -83,8 +83,14 @@ export default function App() {
     await refresh();
     setActiveRef(`s:${s.id}`);
   };
-  const newGroup = async (name: string) => {
+  const newGroup = async (name: string, cart?: { cli: string; count: number }[]) => {
     const g = await api.createGroup(name);
+    for (const { cli, count } of cart || []) {
+      const base = cliMap[cli]?.label || cli;
+      for (let i = 0; i < count; i++) {
+        await api.createSession(count > 1 ? `${base} ${i + 1}` : base, cli, g.id);
+      }
+    }
     await refresh();
     setActiveRef(`g:${g.id}`);
   };

web/src/components/NewSession.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import type { Cli } from '../types';
+import Logo from './Logo';
 
 export default function NewSession({
   clis, onCreate, onCancel,
@@ -9,30 +10,26 @@ export default function NewSession({
   onCancel?: () => void;
 }) {
   const [name, setName] = useState('');
-  const firstAvail = clis.find((c) => c.available)?.id || 'shell';
-  const [cli, setCli] = useState(firstAvail);
-  const submit = () => { onCreate(name.trim(), cli); setName(''); };
+  const pick = (c: Cli) => { onCreate(name.trim() || c.label, c.id); setName(''); };
 
   return (
     <div className="widget">
       <input
         autoFocus
-        placeholder="Agent name (e.g. refactor-api)"
+        placeholder="Agent name (optional)"
         value={name}
         onChange={(e) => setName(e.target.value)}
-        onKeyDown={(e) => { if (e.key === 'Enter') submit(); if (e.key === 'Escape') onCancel?.(); }}
+        onKeyDown={(e) => { if (e.key === 'Escape') onCancel?.(); }}
       />
-      <select value={cli} onChange={(e) => setCli(e.target.value)}>
-        {clis.map((c) => (
-          <option key={c.id} value={c.id} disabled={!c.available}>
-            {c.label}{c.available ? '' : ' — unavailable'}
-          </option>
+      <div className="agent-picks">
+        {clis.filter((c) => c.available).map((c) => (
+          <button key={c.id} className="agent-pick" title={`New ${c.label}`} onClick={() => pick(c)}>
+            <Logo cli={c.id} size={16} />
+            <span>{c.label}</span>
+          </button>
         ))}
-      </select>
-      <div className="widget-actions">
-        <button className="btn-primary" onClick={submit}>Create agent</button>
-        {onCancel && <button className="btn-ghost" onClick={onCancel}>Cancel</button>}
       </div>
+      {onCancel && <button className="btn-ghost" onClick={onCancel}>Cancel</button>}
     </div>
   );
 }

web/src/components/Sidebar.tsx

@@ -19,7 +19,7 @@ export default function Sidebar({
   onOpenSession: (sessionId: string, groupId?: string) => void;
   onOpenSettings: () => void;
   onNewSession: (name: string, cli: string) => void;
-  onNewGroup: (name: string) => void;
+  onNewGroup: (name: string, cart?: { cli: string; count: number }[]) => void;
   onRenameGroup: (id: string, name: string) => void;
   onRenameSession: (id: string, name: string) => void;
   onDeleteGroup: (id: string) => void;
@@ -31,6 +31,7 @@ export default function Sidebar({
 }) {
   const [panel, setPanel] = useState<'none' | 'session' | 'group'>('none');
   const [groupName, setGroupName] = useState('');
+  const [cart, setCart] = useState<Record<string, number>>({});
   const [editRef, setEditRef] = useState<string | null>(null);
   const [editName, setEditName] = useState('');
   const [collapsed, setCollapsed] = useState<Set<string>>(new Set());
@@ -41,7 +42,12 @@ export default function Sidebar({
   const groupById = useMemo(() => Object.fromEntries(tree.groups.map((g) => [g.id, g])), [tree.groups]);
 
   const clearDrag = () => { setDragRef(null); setDrop(null); };
-  const submitGroup = () => { onNewGroup(groupName.trim()); setGroupName(''); setPanel('none'); };
+  const bump = (id: string, d: number) => setCart((c) => ({ ...c, [id]: Math.max(0, (c[id] || 0) + d) }));
+  const submitGroup = () => {
+    const items = Object.entries(cart).filter(([, n]) => n > 0).map(([cli, count]) => ({ cli, count }));
+    onNewGroup(groupName.trim() || 'Group', items);
+    setGroupName(''); setCart({}); setPanel('none');
+  };
   const startEdit = (ref: string, name: string) => { setEditRef(ref); setEditName(name); };
   const commitEdit = () => {
     if (editRef) {
@@ -186,9 +192,25 @@ export default function Sidebar({
             <input autoFocus placeholder="Group name" value={groupName}
               onChange={(e) => setGroupName(e.target.value)}
               onKeyDown={(e) => { if (e.key === 'Enter') submitGroup(); if (e.key === 'Escape') setPanel('none'); }} />
+            <div className="cart">
+              {clis.filter((c) => c.available).map((c) => {
+                const n = cart[c.id] || 0;
+                return (
+                  <div key={c.id} className={`cart-row${n > 0 ? ' has' : ''}`}>
+                    <div className="stepper">
+                      <button onClick={() => bump(c.id, -1)} disabled={n === 0} aria-label="Fewer">−</button>
+                      <span className="stepper-n">{n}</span>
+                      <button onClick={() => bump(c.id, 1)} aria-label="More">+</button>
+                    </div>
+                    <Logo cli={c.id} size={16} />
+                    <span className="cart-name">{c.label}</span>
+                  </div>
+                );
+              })}
+            </div>
             <div className="widget-actions">
               <button className="btn-primary" onClick={submitGroup}>Create group</button>
-              <button className="btn-ghost" onClick={() => setPanel('none')}>Cancel</button>
+              <button className="btn-ghost" onClick={() => { setCart({}); setPanel('none'); }}>Cancel</button>
             </div>
           </div>
         )}

web/src/styles.css

@@ -93,6 +93,22 @@ body {
 .widget-actions { display: flex; gap: 8px; }
 .widget-actions .btn-primary { flex: 1; }
 
+/* new-agent: logo buttons */
+.agent-picks { display: flex; flex-direction: column; gap: 4px; }
+.agent-pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
+.agent-pick:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
+
+/* new-group: per-agent quantity cart */
+.cart { display: flex; flex-direction: column; gap: 4px; }
+.cart-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-radius: 8px; font-size: 13px; }
+.cart-row.has { background: color-mix(in srgb, var(--accent) 8%, transparent); }
+.cart-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex: none; background: var(--panel); }
+.stepper button { width: 24px; height: 24px; border: none; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
+.stepper button:hover:not(:disabled) { color: var(--text); background: var(--panel-2); }
+.stepper button:disabled { opacity: 0.35; cursor: not-allowed; }
+.stepper-n { min-width: 20px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; }
+
 /* tree */
 .tree { flex: 1; overflow-y: auto; padding: 6px 8px 10px; }
 .empty-hint { color: var(--muted); font-size: 12px; padding: 12px 10px; line-height: 1.5; }