groove-dev 0.17.8 → 0.18.2

package/packages/gui/src/App.jsx

@@ -1,7 +1,7 @@
 // GROOVE GUI — App Root
 // FSL-1.1-Apache-2.0 — see LICENSE
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import { useGrooveStore } from './stores/groove';
 import AgentTree from './views/AgentTree';
 import AgentPanel from './components/AgentPanel';
@@ -16,18 +16,41 @@ import IntegrationsStore from './views/IntegrationsStore';
 import ScheduleManager from './views/ScheduleManager';
 import FileEditor from './views/FileEditor';
 
-const TABS = [
+const MAIN_TABS = [
   { id: 'agents', label: 'Agents' },
   { id: 'editor', label: 'Editor' },
-  { id: 'integrations', label: 'Integrations' },
-  { id: 'skills', label: 'Skills' },
   { id: 'stats', label: 'Stats' },
-  { id: 'schedules', label: 'Schedules' },
   { id: 'teams', label: 'Teams' },
   { id: 'approvals', label: 'Approvals' },
 ];
 
-export default function App() {
+const DROPDOWN_TABS = [
+  { id: 'journalist', label: 'Journalist' },
+  { id: 'integrations', label: 'Integrations' },
+  { id: 'skills', label: 'Skills' },
+  { id: 'schedules', label: 'Schedules' },
+];
+
+const DROPDOWN_IDS = new Set(DROPDOWN_TABS.map((t) => t.id));
+
+class ErrorBoundary extends React.Component {
+  constructor(props) { super(props); this.state = { error: null }; }
+  static getDerivedStateFromError(error) { return { error }; }
+  render() {
+    if (this.state.error) {
+      return React.createElement('div', {
+        style: { padding: 40, color: '#e06c75', fontFamily: 'monospace', fontSize: 13, background: '#1e2127', height: '100vh' }
+      },
+        React.createElement('h2', { style: { color: '#e6e6e6' } }, 'GROOVE — Render Error'),
+        React.createElement('pre', { style: { whiteSpace: 'pre-wrap', marginTop: 16, color: '#e06c75' } }, this.state.error.message),
+        React.createElement('pre', { style: { whiteSpace: 'pre-wrap', marginTop: 8, color: '#7a8394', fontSize: 11 } }, this.state.error.stack),
+      );
+    }
+    return this.props.children;
+  }
+}
+
+function AppInner() {
   const agents = useGrooveStore((s) => s.agents);
   const connected = useGrooveStore((s) => s.connected);
   const activeTab = useGrooveStore((s) => s.activeTab);
@@ -40,72 +63,99 @@ export default function App() {
   const openDetail = useGrooveStore((s) => s.openDetail);
   const closeDetail = useGrooveStore((s) => s.closeDetail);
 
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const moreBtnRef = useRef(null);
+
   useEffect(() => { connect(); }, [connect]);
 
-  const runningCount = agents.filter((a) => a.status === 'running').length;
+  useEffect(() => {
+    if (!dropdownOpen) return;
+    const handler = (e) => {
+      if (dropdownRef.current?.contains(e.target)) return;
+      if (moreBtnRef.current?.contains(e.target)) return;
+      setDropdownOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [dropdownOpen]);
+
   const hasAgents = agents.length > 0;
+  const moreActive = DROPDOWN_IDS.has(activeTab);
 
   return (
     <div style={styles.root}>
       {/* Header */}
       <header style={styles.header}>
-        <div style={styles.headerLeft}>
-          <img src="/groove-logo-short.png" alt="GROOVE" style={{ height: 18, marginTop: 3, opacity: 0.85 }} />
-          {daemonHost && (
-            <span style={styles.hostBadge}>{daemonHost}</span>
-          )}
-        </div>
+        <img src="/groove-logo-short.png" alt="GROOVE" style={{ height: 18, marginTop: 3, opacity: 0.85 }} />
+        {daemonHost && (
+          <span style={styles.hostBadge}>{daemonHost}</span>
+        )}
 
+        <div style={{ flex: 1 }} />
 
-        <div style={styles.headerCenter}>
-          {connected && TABS.map((tab) => (
+        {connected && MAIN_TABS.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id)}
+            style={{
+              ...styles.tabBtn,
+              color: activeTab === tab.id ? 'var(--text-bright)' : 'var(--text-dim)',
+            }}
+          >
+            {tab.label}
+          </button>
+        ))}
+
+        {connected && (
+          <div style={{ position: 'relative' }}>
             <button
-              key={tab.id}
-              onClick={() => setActiveTab(tab.id)}
+              ref={moreBtnRef}
+              onClick={() => setDropdownOpen((o) => !o)}
               style={{
                 ...styles.tabBtn,
-                color: activeTab === tab.id ? 'var(--text-bright)' : 'var(--text-primary)',
-                borderBottom: activeTab === tab.id ? '2px solid var(--accent)' : '2px solid transparent',
-                background: activeTab === tab.id ? 'var(--bg-active)' : 'transparent',
+                color: moreActive || dropdownOpen ? 'var(--text-bright)' : 'var(--text-dim)',
               }}
             >
-              {tab.label}
+              More {'\u25BE'}
             </button>
-          ))}
-        </div>
+            {dropdownOpen && (
+              <div ref={dropdownRef} style={styles.dropdown}>
+                {DROPDOWN_TABS.map((tab) => (
+                  <button
+                    key={tab.id}
+                    onClick={() => {
+                      if (tab.id === 'journalist') {
+                        detailPanel?.type === 'journalist' ? closeDetail() : openDetail({ type: 'journalist' });
+                      } else {
+                        setActiveTab(tab.id);
+                      }
+                      setDropdownOpen(false);
+                    }}
+                    style={{
+                      ...styles.dropdownItem,
+                      color: (tab.id === 'journalist' ? detailPanel?.type === 'journalist' : activeTab === tab.id) ? 'var(--text-bright)' : 'var(--text-primary)',
+                    }}
+                  >
+                    {tab.label}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+        )}
 
-        <div style={styles.headerRight}>
-          {statusMessage && (
-            <span style={styles.statusText}>{statusMessage}</span>
-          )}
-          <span style={styles.agentCount}>
-            {runningCount > 0
-              ? `${runningCount} running`
-              : agents.length > 0
-                ? `${agents.length} agent${agents.length !== 1 ? 's' : ''}`
-                : ''}
-          </span>
-          {connected && (
-            <>
-              <button
-                onClick={() => detailPanel?.type === 'journalist' ? closeDetail() : openDetail({ type: 'journalist' })}
-                style={{
-                  ...styles.tabBtn,
-                  color: detailPanel?.type === 'journalist' ? 'var(--text-bright)' : 'var(--text-primary)',
-                  borderBottom: detailPanel?.type === 'journalist' ? '2px solid var(--purple)' : '2px solid transparent',
-                }}
-              >
-                Journalist
-              </button>
-              <button
-                onClick={() => openDetail({ type: 'spawn' })}
-                style={styles.spawnBtn}
-              >
-                + Spawn
-              </button>
-            </>
-          )}
-        </div>
+        {statusMessage && (
+          <span style={styles.statusText}>{statusMessage}</span>
+        )}
+        {connected && (
+          <button
+            onClick={() => openDetail({ type: 'spawn' })}
+            style={styles.spawnBtn}
+          >
+            + Spawn
+          </button>
+        )}
       </header>
 
       {/* Status pill — bottom left */}
@@ -155,23 +205,29 @@ export default function App() {
           {activeTab === 'approvals' && <ApprovalQueue />}
         </main>
 
-        {/* Detail panel — in document flow */}
-        {detailPanel && (
+        {/* Detail panel — sidebar for agent/journalist */}
+        {detailPanel && detailPanel.type !== 'spawn' && (
           <aside style={{
             ...styles.detailPanel,
             width: detailPanel.type === 'agent' ? '45%' : 320,
           }}>
             <button onClick={closeDetail} style={styles.closeBtn}>x</button>
             {detailPanel.type === 'agent' && <AgentPanel />}
-            {detailPanel.type === 'spawn' && <SpawnPanel />}
             {detailPanel.type === 'journalist' && <JournalistFeed />}
           </aside>
         )}
+
+        {/* Spawn panel — full-screen overlay */}
+        {detailPanel?.type === 'spawn' && <SpawnPanel />}
       </div>
     </div>
   );
 }
 
+export default function App() {
+  return React.createElement(ErrorBoundary, null, React.createElement(AppInner));
+}
+
 const styles = {
   root: {
     width: '100%', height: '100%',
@@ -182,51 +238,68 @@ const styles = {
     height: 40,
     padding: '0 16px',
     borderBottom: '1px solid var(--border)',
-    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+    display: 'flex', alignItems: 'center', gap: 2,
     background: 'var(--bg-chrome)',
     flexShrink: 0,
     position: 'relative',
   },
-  headerLeft: {
-    display: 'flex', alignItems: 'center', gap: 8,
-  },
   hostBadge: {
     fontSize: 9, fontWeight: 600, letterSpacing: 0.5,
     color: 'var(--text-dim)', background: 'var(--bg-active)',
     padding: '2px 6px', borderRadius: 3,
     border: '1px solid var(--border)',
     fontFamily: 'var(--font)',
-  },
-  logo: {
-    fontSize: 13, fontWeight: 600, letterSpacing: 1.5,
-    color: 'var(--text-bright)',
-  },
-  headerCenter: {
-    display: 'flex', alignItems: 'center', gap: 0,
-  },
-  headerRight: {
-    display: 'flex', alignItems: 'center', gap: 10,
+    marginRight: 4,
   },
   tabBtn: {
-    padding: '10px 14px',
+    padding: '0 10px',
     background: 'transparent',
     border: 'none',
     borderBottom: '2px solid transparent',
-    fontSize: 12, fontWeight: 500,
+    fontSize: 11, fontWeight: 500,
     fontFamily: 'var(--font)',
     cursor: 'pointer',
     transition: 'color 0.1s',
+    alignSelf: 'stretch',
+    display: 'flex',
+    alignItems: 'center',
+    marginTop: 2,
+  },
+  dropdown: {
+    position: 'absolute',
+    top: '100%',
+    left: 0,
+    background: '#1e2228',
+    border: '1px solid var(--border)',
+    borderRadius: 6,
+    padding: '4px 0',
+    zIndex: 100,
+    minWidth: 160,
+    boxShadow: '0 4px 16px rgba(0,0,0,0.4)',
+  },
+  dropdownItem: {
+    display: 'block',
+    width: '100%',
+    padding: '8px 16px',
+    background: 'transparent',
+    border: 'none',
+    fontSize: 11,
+    fontWeight: 500,
+    fontFamily: 'var(--font)',
+    color: 'var(--text-primary)',
+    cursor: 'pointer',
+    textAlign: 'left',
   },
   spawnBtn: {
     padding: '4px 12px',
     background: 'transparent',
     border: '1px solid var(--accent)',
     borderRadius: 2,
-    color: 'var(--accent)', fontSize: 12, fontWeight: 600,
+    color: 'var(--accent)', fontSize: 11, fontWeight: 600,
     fontFamily: 'var(--font)',
     cursor: 'pointer',
+    marginLeft: 12,
   },
-  agentCount: { fontSize: 11, color: 'var(--text-dim)' },
   statusText: { fontSize: 11, color: 'var(--text-dim)', fontStyle: 'italic' },
   mainRow: {
     flex: 1, display: 'flex', overflow: 'hidden',

package/packages/gui/src/components/AgentActions.jsx

@@ -3,6 +3,49 @@
 
 import React, { useState, useEffect } from 'react';
 import { useGrooveStore } from '../stores/groove';
+// System directory browser — browses absolute paths, not limited to project dir
+function SystemDirPicker({ initial, onSelect, onClose }) {
+  const [currentPath, setCurrentPath] = useState(initial || '');
+  const [dirs, setDirs] = useState([]);
+  const [parentPath, setParentPath] = useState(null);
+
+  useEffect(() => {
+    fetch(`/api/browse-system?path=${encodeURIComponent(currentPath || '')}`)
+      .then((r) => r.json())
+      .then((data) => {
+        setDirs(data.dirs || []);
+        setParentPath(data.parent);
+        if (data.current) setCurrentPath(data.current);
+      })
+      .catch(() => {});
+  }, [currentPath]);
+
+  return (
+    <div style={{ border: '1px solid var(--border)', borderRadius: 4, background: 'var(--bg-base)', marginTop: 6, maxHeight: 200, display: 'flex', flexDirection: 'column' }}>
+      <div style={{ padding: '4px 8px', borderBottom: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
+        <span style={{ fontSize: 10, color: 'var(--text-dim)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{currentPath}</span>
+        <button onClick={onClose} style={{ background: 'none', border: 'none', color: 'var(--text-dim)', cursor: 'pointer', fontSize: 12, fontFamily: 'var(--font)' }}>&times;</button>
+      </div>
+      <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+        {parentPath !== null && (
+          <button onClick={() => setCurrentPath(parentPath)} style={{ width: '100%', padding: '4px 8px', background: 'none', border: 'none', borderBottom: '1px solid var(--border)', textAlign: 'left', cursor: 'pointer', fontFamily: 'var(--font)', fontSize: 11, color: 'var(--text-muted)' }}>
+            ..
+          </button>
+        )}
+        {dirs.map((d) => (
+          <button key={d.path} onClick={() => setCurrentPath(d.path)} style={{ width: '100%', padding: '4px 8px', background: 'none', border: 'none', borderBottom: '1px solid var(--border)', textAlign: 'left', cursor: 'pointer', fontFamily: 'var(--font)', fontSize: 11, color: 'var(--text-primary)' }}>
+            {d.name}{d.hasChildren ? '/' : ''}
+          </button>
+        ))}
+      </div>
+      <div style={{ padding: '4px 8px', borderTop: '1px solid var(--border)', flexShrink: 0 }}>
+        <button onClick={() => { onSelect(currentPath); onClose(); }} style={{ width: '100%', padding: '4px 8px', background: 'var(--accent)', color: 'var(--bg-base)', border: 'none', borderRadius: 3, fontSize: 11, fontWeight: 600, cursor: 'pointer', fontFamily: 'var(--font)' }}>
+          Select This Directory
+        </button>
+      </div>
+    </div>
+  );
+}
 
 export default function AgentActions({ agent }) {
   const killAgent = useGrooveStore((s) => s.killAgent);
@@ -17,6 +60,9 @@ export default function AgentActions({ agent }) {
   const [editPrompt, setEditPrompt] = useState('');
   const [editingPrompt, setEditingPrompt] = useState(false);
   const [selectedModel, setSelectedModel] = useState(agent.model || '');
+  const [editingDir, setEditingDir] = useState(false);
+  const [dirInput, setDirInput] = useState(agent.workingDir || '');
+  const [showDirPicker, setShowDirPicker] = useState(false);
   const [providerList, setProviderList] = useState([]);
   const [installedSkills, setInstalledSkills] = useState([]);
   const [showSkillPicker, setShowSkillPicker] = useState(false);
@@ -149,10 +195,40 @@ export default function AgentActions({ agent }) {
     }
   }
 
+  const [editingName, setEditingName] = useState(false);
+  const [nameInput, setNameInput] = useState(agent.name || '');
+
   return (
     <div style={styles.container}>
+      {/* Agent Name */}
+      <div style={styles.sectionLabel}>NAME</div>
+      {!editingName ? (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <span style={{ flex: 1, fontSize: 13, fontWeight: 600, color: 'var(--text-bright)' }}>{agent.name}</span>
+          <button onClick={() => { setEditingName(true); setNameInput(agent.name || ''); }} style={styles.editBtn}>Rename</button>
+        </div>
+      ) : (
+        <div>
+          <input style={styles.textarea} value={nameInput} onChange={(e) => setNameInput(e.target.value)}
+            placeholder="Agent name..." autoFocus
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && nameInput.trim()) {
+                fetch(`/api/agents/${agent.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: nameInput.trim() }) });
+                showStatus('renamed'); setEditingName(false);
+              }
+            }} />
+          <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
+            <button onClick={() => {
+              fetch(`/api/agents/${agent.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: nameInput.trim() }) });
+              showStatus('renamed'); setEditingName(false);
+            }} style={styles.saveBtn} disabled={!nameInput.trim()}>Save</button>
+            <button onClick={() => setEditingName(false)} style={styles.cancelBtn}>Cancel</button>
+          </div>
+        </div>
+      )}
+
       {/* Lifecycle controls */}
-      <div style={styles.sectionLabel}>LIFECYCLE</div>
+      <div style={{ ...styles.sectionLabel, marginTop: 20 }}>LIFECYCLE</div>
 
       <div style={styles.btnGrid}>
         {isAlive && (
@@ -216,6 +292,59 @@ export default function AgentActions({ agent }) {
       </select>
       <div style={styles.fieldHint}>Changes take effect on next rotation</div>
 
+      {/* Working directory */}
+      <div style={{ ...styles.sectionLabel, marginTop: 20 }}>DIRECTORY</div>
+      {!editingDir ? (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <div style={{ flex: 1, fontSize: 11, color: agent.workingDir ? 'var(--text-primary)' : 'var(--text-muted)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+            {agent.workingDir || 'project root'}
+          </div>
+          <button onClick={() => { setEditingDir(true); setDirInput(agent.workingDir || ''); }} style={styles.editBtn}>
+            Change
+          </button>
+        </div>
+      ) : (
+        <div>
+          <div style={{ display: 'flex', gap: 6 }}>
+            <input
+              style={{ ...styles.textarea, flex: 1 }}
+              value={dirInput}
+              onChange={(e) => setDirInput(e.target.value)}
+              placeholder="/absolute/path/to/project"
+              autoFocus
+            />
+            <button onClick={() => setShowDirPicker(true)} style={{ ...styles.editBtn, flexShrink: 0, marginTop: 0 }}>
+              Browse
+            </button>
+          </div>
+          {showDirPicker && (
+            <SystemDirPicker
+              initial={dirInput}
+              onSelect={(path) => { setDirInput(path); setShowDirPicker(false); }}
+              onClose={() => setShowDirPicker(false)}
+            />
+          )}
+          <div style={{ display: 'flex', gap: 6, marginTop: 6 }}>
+            <button onClick={async () => {
+              try {
+                await fetch(`/api/agents/${agent.id}`, {
+                  method: 'PATCH', headers: { 'Content-Type': 'application/json' },
+                  body: JSON.stringify({ workingDir: dirInput.trim() || null }),
+                });
+                showStatus(`directory set — takes effect on next rotation/restart`);
+                setEditingDir(false);
+              } catch (err) { showStatus(`failed: ${err.message}`); }
+            }} style={styles.saveBtn}>
+              Save
+            </button>
+            <button onClick={() => { setEditingDir(false); setShowDirPicker(false); }} style={styles.cancelBtn}>
+              Cancel
+            </button>
+          </div>
+          <div style={styles.fieldHint}>Takes effect on next rotation or restart</div>
+        </div>
+      )}
+
       {/* Prompt modification */}
       <div style={{ ...styles.sectionLabel, marginTop: 20 }}>PROMPT</div>
       {agent.prompt && !editingPrompt && (

package/packages/gui/src/components/AgentChat.jsx

@@ -111,7 +111,7 @@ export default function AgentChat({ agent }) {
       </div>
 
       {/* Launch Team button — shown when planner completes */}
-      {agent.role === 'planner' && agent.status === 'completed' && (
+      {agent.role === 'planner' && (agent.status === 'completed' || agent.status === 'crashed' || agent.status === 'stopped') && (
         <LaunchTeamButton showStatus={showStatus} />
       )}
 
@@ -137,6 +137,25 @@ export default function AgentChat({ agent }) {
         >
           Send
         </button>
+        <button
+          type="button"
+          onClick={() => {
+            const { chatHistory, activityLog } = useGrooveStore.getState();
+            const newChat = { ...chatHistory }; delete newChat[agent.id];
+            const newLog = { ...activityLog }; delete newLog[agent.id];
+            useGrooveStore.setState({ chatHistory: newChat, activityLog: newLog });
+            try { localStorage.setItem('groove:chatHistory', JSON.stringify(newChat)); } catch {}
+            try { localStorage.setItem('groove:activityLog', JSON.stringify(newLog)); } catch {}
+          }}
+          title="Clear chat history"
+          style={{
+            background: 'none', border: 'none', color: 'var(--text-muted)',
+            fontSize: 11, cursor: 'pointer', fontFamily: 'var(--font)',
+            padding: '4px 6px', flexShrink: 0,
+          }}
+        >
+          Clear
+        </button>
       </div>
     </div>
   );
@@ -183,10 +202,14 @@ function LaunchTeamButton({ showStatus }) {
   const [launched, setLaunched] = useState(false);
 
   useEffect(() => {
-    fetch('/api/recommended-team')
+    const load = () => fetch('/api/recommended-team')
       .then((r) => r.json())
-      .then((d) => { if (d.exists && d.agents.length > 0) setTeam(d.agents); })
+      .then((d) => { setTeam(d.exists && d.agents.length > 0 ? d.agents : null); })
       .catch(() => {});
+    load();
+    // Re-check every 5s in case planner just finished writing a new team
+    const interval = setInterval(load, 5000);
+    return () => clearInterval(interval);
   }, []);
 
   async function handleLaunch() {
@@ -208,16 +231,27 @@ function LaunchTeamButton({ showStatus }) {
 
   if (!team || launched) return null;
 
+  const phase1 = team.filter((a) => !a.phase || a.phase === 1);
+  const phase2 = team.filter((a) => a.phase === 2);
+
   return (
     <div style={styles.launchBox}>
-      <div style={styles.launchHeader}>Recommended Team ({team.length} agents)</div>
+      <div style={styles.launchHeader}>Recommended Team</div>
       <div style={styles.launchList}>
-        {team.map((a, i) => (
-          <div key={i} style={styles.launchAgent}>
+        {phase1.map((a, i) => (
+          <div key={`p1-${i}`} style={styles.launchAgent}>
+            <span style={styles.launchPhase}>1</span>
             <span style={styles.launchRole}>{a.role}</span>
             <span style={styles.launchPrompt}>{(a.prompt || '').slice(0, 80)}{(a.prompt || '').length > 80 ? '...' : ''}</span>
           </div>
         ))}
+        {phase2.map((a, i) => (
+          <div key={`p2-${i}`} style={{ ...styles.launchAgent, opacity: 0.7 }}>
+            <span style={{ ...styles.launchPhase, background: 'var(--bg-active)', color: 'var(--text-dim)' }}>2</span>
+            <span style={styles.launchRole}>{a.role} <span style={{ fontWeight: 400, color: 'var(--text-dim)', fontSize: 9 }}>auto after phase 1</span></span>
+            <span style={styles.launchPrompt}>{(a.prompt || '').slice(0, 80)}{(a.prompt || '').length > 80 ? '...' : ''}</span>
+          </div>
+        ))}
       </div>
       <button
         type="button"
@@ -233,7 +267,7 @@ function LaunchTeamButton({ showStatus }) {
 
 // ── FORMATTED TEXT — renders markdown-like agent output cleanly ──
 
-function FormattedText({ text }) {
+export function FormattedText({ text }) {
   if (!text) return null;
   const lines = text.split('\n');
 
@@ -464,6 +498,12 @@ const styles = {
     display: 'flex', alignItems: 'baseline', gap: 6,
     fontSize: 10, padding: '2px 0',
   },
+  launchPhase: {
+    width: 16, height: 16, borderRadius: 3, flexShrink: 0,
+    display: 'flex', alignItems: 'center', justifyContent: 'center',
+    fontSize: 9, fontWeight: 700,
+    background: 'rgba(51, 175, 188, 0.15)', color: 'var(--accent)',
+  },
   launchRole: {
     fontWeight: 600, color: 'var(--accent)', minWidth: 60,
   },