Tighten dashboard UI: compact tool calls, collapsible search results, reduced panel padding

[Copilot]

The dashboard UI had excessive vertical spacing across tool call blocks, session detail side panels, and the chat context panel, making content harder to scan. Session search results in the activity panel showed full content immediately, making each card very tall.

CSS — reduced padding/sizing

• Tool calls: .tool-call-pill / .tool-call-parallel-pill min-height 30→22px, padding 6px 10px→4px 8px; .tool-call-name max-width 12rem→10rem + explicit font-size: 0.75rem; .tool-call-expand-inner padding 0.7/0.85/0.8rem→0.4/0.65/0.5rem; .tool-call-nested-list gap 0.35→0.2rem; .tool-call-panel-body max-height 200→160px
• Parallel group: summary padding 0.7rem 0.85rem→0.45rem 0.65rem; body padding 0 0.75rem 0.75rem→0 0.5rem 0.5rem
• Chat context: summary padding 0.9rem 1rem→0.55rem 0.75rem; body padding 0 1rem 1rem→0 0.75rem 0.6rem
• Context breakdown items: summary padding 0.55rem 0.75rem→0.38rem 0.6rem
• Session detail panels: .session-activity-panel padding 1rem→0.65rem + h3 capped at 0.85rem; .activity-item padding 0.7rem 0.8rem→0.5rem 0.65rem, margin-bottom 0.6→0.4rem; .session-files-list/.file-preview padding 1rem→0.65rem; .file-item padding 0.75→0.5rem, margin-bottom 0.6→0.4rem
• Session overview: padding 0.9rem 1rem→0.6rem 0.75rem; grid gap 0.75→0.5rem; item padding 0.65rem 0.75rem→0.45rem 0.55rem

JS + CSS — collapsible session search results

Replaced the flat renderRequestResultActivity call for session-search-events with a dedicated renderSessionSearchActivity function. Each result now renders as a <details class="session-search-result"> collapsed by default:

<details class="session-search-result">
  <summary>
    <span>query text</span>
    <span class="tool-call-chip">0.92</span>          <!-- score badge if present -->
    <span>Jan 1, 2025, 12:00 PM</span>
    <span>First 120 chars of result snippet…</span>
  </summary>
  <div class="session-search-result-body">full content</div>
</details>

New CSS classes added: .session-search-result, .session-search-result summary, .session-search-result-body (max-height 220px, scrollable, pre-wrap).

Original prompt

The dashboard UI needs several tightening improvements based on the current screenshot:

Issues to fix in templates/index.html

1. Tool Call Blocks — make them more compact

The .tool-call-block and .tool-call-pill rows are too tall and take up too much vertical space. Goals:

• Reduce .tool-call-pill min-height from 30px to 22px and padding from 6px 10px to 4px 8px
• Reduce .tool-call-name font-size and max-width tighter
• Reduce .tool-call-expand-inner padding (currently 0.7rem 0.85rem 0.8rem) to 0.4rem 0.65rem 0.5rem
• Reduce the gap between tool call blocks (currently 0.35rem) to 0.2rem
• Make .tool-call-panel-body max-height shorter: 160px instead of 200px
• Reduce .tool-call-parallel-pill min-height and padding similarly
• The parallel group block outer padding and inner padding should also be reduced

2. Session Search Events — collapsible results with preview-only first view

In the session-search-events panel inside session detail (rendered by JS in renderSessionSearchResults or similar), the search result cards currently show their full text content immediately, making each card very tall. Fix:

• Each session search result should render as a <details> element (collapsed by default)
• The <summary> should show: session ID (short, first 8 chars), a score/relevance badge, the session date, and the first ~120 characters of the result snippet — truncated with ellipsis
• When expanded (open), the full content should be shown in a scrollable pre/div with max-height: 220px
• Style the summary row tightly: display:flex; align-items:center; gap:0.5rem; padding:0.45rem 0.6rem; font-size:0.78rem; cursor:pointer
• The result text in expanded state: font-size:0.78rem; white-space:pre-wrap; word-break:break-word; line-height:1.45; padding:0.5rem 0.6rem; max-height:220px; overflow-y:auto
• Add a relevance score badge styled like .tool-call-chip if score is available
• Add CSS for .session-search-result, .session-search-result summary, .session-search-result-body to the stylesheet

3. Session detail side panels — reduce vertical padding and font sizes

The right-column panels in the session detail view (Files Touched, File Preview, Background Self-Improvement, Skill Changes, Session Search) have generous padding. Tighten:

• .session-activity-panel padding: reduce from 1rem to 0.65rem
• .activity-item padding: reduce from 0.7rem 0.8rem to 0.5rem 0.65rem, margin-bottom from 0.6rem to 0.4rem
• .session-files-list and .file-preview padding: reduce from 1rem to 0.65rem
• .file-item padding from 0.75rem to 0.5rem, margin-bottom from 0.6rem to 0.4rem
• Panel h3 font-size inside session activity: reduce from default to 0.85rem
• .session-overview padding from 0.9rem 1rem to 0.6rem 0.75rem
• .session-overview-grid gap from 0.75rem to 0.5rem
• .session-overview-item padding from 0.65rem 0.75rem to 0.45rem 0.55rem

4. Parallel group header in tool calls — make more compact

The .parallel-group summary padding is 0.7rem 0.85rem. Reduce to 0.45rem 0.65rem. The .parallel-group-body padding reduce from 0 0.75rem 0.75rem to 0 0.5rem 0.5rem.

5. Chat context panel — tighter

The .chat-context summary padding is 0.9rem 1rem. Reduce to 0.55rem 0.75rem. The .chat-context-body padding should reduce from 0 1rem 1rem to 0 0.75rem 0.6rem.

6. Context breakdown items — reduce

.context-breakdown-item summary padding from 0.55rem 0.75rem to 0.38rem 0.6rem.

All changes are CSS-only in the <style> section, plus the JS rendering change for session search results. Ensure the JS function that renders items into #session-search-events is updated to wrap each item in a <details class="session-search-result"> with a proper <summary> and collapsible body. Search for the function that populates session-search-events in the JS and update it accordingly.