feat(tui): collapsible sections in startup banner (skills, system prompt, MCP)

The TUI SessionPanel banner now uses collapsible \u25b8/\u25be toggle
sections matching the existing Chevron convention used for runtime
agent details. Skills, system prompt, and MCP server lists are
collapsed by default; tools remain expanded as the most actionable
info.

- tui_gateway/server.py: _session_info() now passes agent._cached_system_prompt
  through to the TUI frontend
- ui-tui/src/types.ts: added system_prompt?: string to SessionInfo
- ui-tui/src/components/branding.tsx: rewrote SessionPanel with
  CollapseToggle helper + per-section useState toggles

Default states: tools=open, skills=collapsed, system=collapsed,
mcp=collapsed. Clicking any \u25b8/\u25be header toggles that section.

tui_gateway/server.py

@@ -1413,6 +1413,10 @@ def _session_info(agent) -> dict:
         info["mcp_servers"] = get_mcp_status()
     except Exception:
         info["mcp_servers"] = []
+    try:
+        info["system_prompt"] = getattr(agent, "_cached_system_prompt", "") or ""
+    except Exception:
+        pass
     try:
         from hermes_cli.banner import get_update_result
         from hermes_cli.config import recommended_update_command

ui-tui/src/components/branding.tsx

@@ -58,6 +58,44 @@ export function Banner({ t }: { t: Theme }) {
   )
 }
 
+// ── Collapsible helpers ──────────────────────────────────────────────
+
+function CollapseToggle({
+  count,
+  open,
+  suffix,
+  t,
+  title,
+  onToggle
+}: {
+  count?: number
+  open: boolean
+  suffix?: string
+  t: Theme
+  title: string
+  onToggle: () => void
+}) {
+  return (
+    <Box onClick={onToggle}>
+      <Text color={t.color.accent}>{open ? '▾ ' : '▸ '}</Text>
+      <Text bold color={t.color.accent}>
+        {title}
+      </Text>
+      {typeof count === 'number' ? (
+        <Text color={t.color.muted}> ({count})</Text>
+      ) : null}
+      {suffix ? (
+        <Text color={t.color.muted}> {suffix}</Text>
+      ) : null}
+    </Box>
+  )
+}
+
+// ── SessionPanel ─────────────────────────────────────────────────────
+
+const SKILLS_MAX = 8
+const TOOLSETS_MAX = 8
+
 export function SessionPanel({ info, sid, t }: SessionPanelProps) {
   const cols = useStdout().stdout?.columns ?? 100
   const heroLines = caduceus(t.color, t.bannerHero || undefined)
@@ -67,6 +105,12 @@ export function SessionPanel({ info, sid, t }: SessionPanelProps) {
   const lineBudget = Math.max(12, w - 2)
   const strip = (s: string) => (s.endsWith('_tools') ? s.slice(0, -6) : s)
 
+  // ── Local collapse state for each section ──
+  const [toolsOpen, setToolsOpen] = useState(true)
+  const [skillsOpen, setSkillsOpen] = useState(false)
+  const [systemOpen, setSystemOpen] = useState(false)
+  const [mcpOpen, setMcpOpen] = useState(false)
+
   const truncLine = (pfx: string, items: string[]) => {
     let line = ''
     let shown = 0
@@ -85,35 +129,89 @@ export function SessionPanel({ info, sid, t }: SessionPanelProps) {
     return line
   }
 
-  const section = (title: string, data: Record<string, string[]>, max = 8, overflowLabel = 'more…') => {
+  // ── Collapsible skills section ──
-    const entries = Object.entries(data).sort()
+  const skillEntries = Object.entries(info.skills).sort()
-    const shown = entries.slice(0, max)
+  const skillsTotal = flat(info.skills).length
-    const overflow = entries.length - max
+  const skillsCatCount = skillEntries.length
-    const skeleton = info.lazy && entries.length === 0
+
+  const skillsBody = () => {
+    if (info.lazy && skillEntries.length === 0) {
+      return <InlineLoader label="scanning skills" t={t} />
+    }
+
+    const shown = skillEntries.slice(0, SKILLS_MAX)
+    const overflow = skillEntries.length - SKILLS_MAX
 
     return (
-      <Box flexDirection="column" marginTop={1}>
+      <>
-        <Text bold color={t.color.accent}>
+        {shown.map(([k, vs]) => (
-          Available {title}
+          <Text key={k} wrap="truncate">
-        </Text>
+            <Text color={t.color.muted}>{strip(k)}: </Text>
-
+            <Text color={t.color.text}>{truncLine(strip(k) + ': ', vs)}</Text>
-        {skeleton ? (
-          <InlineLoader label={title === 'Tools' ? 'discovering tools' : 'scanning skills'} t={t} />
-        ) : (
-          shown.map(([k, vs]) => (
-            <Text key={k} wrap="truncate">
-              <Text color={t.color.muted}>{strip(k)}: </Text>
-              <Text color={t.color.text}>{truncLine(strip(k) + ': ', vs)}</Text>
-            </Text>
-          ))
-        )}
-
-        {overflow > 0 && (
-          <Text color={t.color.muted}>
-            (and {overflow} {overflowLabel})
           </Text>
+        ))}
+        {overflow > 0 && (
+          <Text color={t.color.muted}>(and {overflow} more categories…)</Text>
         )}
-      </Box>
+      </>
+    )
+  }
+
+  // ── Collapsible tools section ──
+  const toolEntries = Object.entries(info.tools).sort()
+  const toolsTotal = flat(info.tools).length
+
+  const toolsBody = () => {
+    const shown = toolEntries.slice(0, TOOLSETS_MAX)
+    const overflow = toolEntries.length - TOOLSETS_MAX
+
+    return (
+      <>
+        {shown.map(([k, vs]) => (
+          <Text key={k} wrap="truncate">
+            <Text color={t.color.muted}>{strip(k)}: </Text>
+            <Text color={t.color.text}>{truncLine(strip(k) + ': ', vs)}</Text>
+          </Text>
+        ))}
+        {overflow > 0 && (
+          <Text color={t.color.muted}>(and {overflow} more toolsets…)</Text>
+        )}
+      </>
+    )
+  }
+
+  // ── Collapsible MCP section ──
+  const mcpBody = () => (
+    <>
+      {(info.mcp_servers ?? []).map(s => (
+        <Text key={s.name} wrap="truncate">
+          <Text color={t.color.muted}>{`  ${s.name} `}</Text>
+          <Text color={t.color.muted}>{`[${s.transport}]`}</Text>
+          <Text color={t.color.muted}>: </Text>
+          {s.connected ? (
+            <Text color={t.color.text}>
+              {s.tools} tool{s.tools === 1 ? '' : 's'}
+            </Text>
+          ) : (
+            <Text color={t.color.error}>failed</Text>
+          )}
+        </Text>
+      ))}
+    </>
+  )
+
+  // ── System prompt body ──
+  const sysPromptLen = (info.system_prompt ?? '').length
+
+  const systemBody = () => {
+    if (sysPromptLen === 0) {
+      return <Text color={t.color.muted}>No system prompt loaded.</Text>
+    }
+
+    return (
+      <Text color={t.color.muted}>
+        {info.system_prompt}
+      </Text>
     )
   }
 
@@ -151,37 +249,64 @@ export function SessionPanel({ info, sid, t }: SessionPanelProps) {
           </Text>
         </Box>
 
-        {section('Tools', info.tools, 8, 'more toolsets…')}
+        {/* ── Tools (expanded by default) ── */}
-        {section('Skills', info.skills)}
+        <Box flexDirection="column" marginTop={1}>
+          <CollapseToggle
+            onToggle={() => setToolsOpen(v => !v)}
+            open={toolsOpen}
+            t={t}
+            title="Available Tools"
+          />
+          {toolsOpen && toolsBody()}
+        </Box>
 
+        {/* ── Skills (collapsed by default) ── */}
+        <Box flexDirection="column" marginTop={1}>
+          <CollapseToggle
+            count={skillsTotal}
+            onToggle={() => setSkillsOpen(v => !v)}
+            open={skillsOpen}
+            suffix={skillsCatCount > 0 ? `in ${skillsCatCount} categor${skillsCatCount === 1 ? 'y' : 'ies'}` : undefined}
+            t={t}
+            title="Available Skills"
+          />
+          {skillsOpen && skillsBody()}
+        </Box>
+
+        {/* ── System Prompt (collapsed by default) ── */}
+        {sysPromptLen > 0 && (
+          <Box flexDirection="column" marginTop={1}>
+            <CollapseToggle
+              onToggle={() => setSystemOpen(v => !v)}
+              open={systemOpen}
+              suffix={`— ${sysPromptLen.toLocaleString()} chars`}
+              t={t}
+              title="System Prompt"
+            />
+            {systemOpen && systemBody()}
+          </Box>
+        )}
+
+        {/* ── MCP Servers (collapsed by default) ── */}
         {info.mcp_servers && info.mcp_servers.length > 0 && (
           <Box flexDirection="column" marginTop={1}>
-            <Text bold color={t.color.accent}>
+            <CollapseToggle
-              MCP Servers
+              count={info.mcp_servers.length}
-            </Text>
+              onToggle={() => setMcpOpen(v => !v)}
-
+              open={mcpOpen}
-            {info.mcp_servers.map(s => (
+              suffix="connected"
-              <Text key={s.name} wrap="truncate">
+              t={t}
-                <Text color={t.color.muted}>{`  ${s.name} `}</Text>
+              title="MCP Servers"
-                <Text color={t.color.muted}>{`[${s.transport}]`}</Text>
+            />
-                <Text color={t.color.muted}>: </Text>
+            {mcpOpen && mcpBody()}
-                {s.connected ? (
-                  <Text color={t.color.text}>
-                    {s.tools} tool{s.tools === 1 ? '' : 's'}
-                  </Text>
-                ) : (
-                  <Text color={t.color.error}>failed</Text>
-                )}
-              </Text>
-            ))}
           </Box>
         )}
 
         <Text />
 
         <Text color={t.color.text}>
-          {flat(info.tools).length} tools{' · '}
+          {toolsTotal} tools{' · '}
-          {flat(info.skills).length} skills
+          {skillsTotal} skills
           {info.mcp_servers?.length ? ` · ${info.mcp_servers.length} MCP` : ''}
           {' · '}
           <Text color={t.color.muted}>/help for commands</Text>

ui-tui/src/types.ts

@@ -150,6 +150,7 @@ export interface SessionInfo {
   release_date?: string
   service_tier?: string
   skills: Record<string, string[]>
+  system_prompt?: string
   tools: Record<string, string[]>
   update_behind?: number | null
   update_command?: string