|
| 1 | +# Plan: Sidebar Section Reordering and Collapsible Sections |
| 2 | + |
| 3 | +**Created:** 2025-12-26 |
| 4 | +**Status:** Completed |
| 5 | +**Estimated Effort:** Small (1-2 hours) |
| 6 | + |
| 7 | +## Overview |
| 8 | + |
| 9 | +Reorganize the sidebar sections in the TUI session view and make all sections consistently collapsible. Currently, some sections have collapsible behavior while others do not, and the order doesn't match the desired hierarchy. |
| 10 | + |
| 11 | +## Current State Analysis |
| 12 | + |
| 13 | +### File Location |
| 14 | +- **Primary file:** `packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx` |
| 15 | + |
| 16 | +### Current Section Order (lines 118-372) |
| 17 | +1. Session title (line 110-117) |
| 18 | +2. **Context** (lines 118-125) |
| 19 | +3. **MCP** (lines 126-186) - Has collapsible behavior |
| 20 | +4. **LSP** (lines 187-228) - Has collapsible behavior (threshold: >2 items) |
| 21 | +5. **Subagents** (lines 230-309) - Has collapsible behavior (threshold: >2 items) |
| 22 | +6. **Todo** (lines 310-328) - Has collapsible behavior (threshold: >2 items) |
| 23 | +7. **Modified Files** (lines 329-372) - Has collapsible behavior (threshold: >2 items) |
| 24 | + |
| 25 | +### Desired Section Order |
| 26 | +1. Session title |
| 27 | +2. **Context** - Make collapsible (new) |
| 28 | +3. **Subagents** - Move up |
| 29 | +4. **MCP** - Already collapsible |
| 30 | +5. **LSP** - Already collapsible |
| 31 | +6. **Modified Files** - Already collapsible (rename from "Modified Files" to "Changed Files" if desired) |
| 32 | + |
| 33 | +**Note:** Todo section appears to be omitted from the desired order. Clarify with user if Todo should be removed or repositioned. |
| 34 | + |
| 35 | +### Current Collapsible Implementation Pattern |
| 36 | +Each collapsible section follows this pattern: |
| 37 | +1. State tracked in `expanded` store (line 26-32) |
| 38 | +2. Header with click handler to toggle (e.g., line 131) |
| 39 | +3. Conditional arrow indicator `▼`/`▶` (e.g., line 134) |
| 40 | +4. Show/hide content based on `expanded` state (e.g., line 147) |
| 41 | +5. Threshold logic: only shows collapse controls when items > 2 |
| 42 | + |
| 43 | +## Technical Specifications |
| 44 | + |
| 45 | +### Expanded Store (line 26-32) |
| 46 | +```typescript |
| 47 | +const [expanded, setExpanded] = createStore({ |
| 48 | + mcp: true, |
| 49 | + diff: true, |
| 50 | + todo: true, |
| 51 | + lsp: true, |
| 52 | + subagents: true, |
| 53 | + context: true, // NEW: Add context to expanded store |
| 54 | +}) |
| 55 | +``` |
| 56 | + |
| 57 | +### Context Section - Current (lines 118-125) |
| 58 | +```tsx |
| 59 | +<box> |
| 60 | + <text fg={theme.text}> |
| 61 | + <b>Context</b> |
| 62 | + </text> |
| 63 | + <text fg={theme.textMuted}>{context()?.tokens ?? 0} tokens</text> |
| 64 | + <text fg={theme.textMuted}>{context()?.percentage ?? 0}% used</text> |
| 65 | + <text fg={theme.textMuted}>{cost()} spent</text> |
| 66 | +</box> |
| 67 | +``` |
| 68 | + |
| 69 | +### Collapsible Section Template (based on MCP pattern) |
| 70 | +```tsx |
| 71 | +<box> |
| 72 | + <box |
| 73 | + flexDirection="row" |
| 74 | + gap={1} |
| 75 | + onMouseDown={() => setExpanded("context", !expanded.context)} |
| 76 | + > |
| 77 | + <text fg={theme.text}>{expanded.context ? "▼" : "▶"}</text> |
| 78 | + <text fg={theme.text}> |
| 79 | + <b>Context</b> |
| 80 | + <Show when={!expanded.context}> |
| 81 | + <span style={{ fg: theme.textMuted }}> |
| 82 | + {" "}({context()?.tokens ?? 0} tokens) |
| 83 | + </span> |
| 84 | + </Show> |
| 85 | + </text> |
| 86 | + </box> |
| 87 | + <Show when={expanded.context}> |
| 88 | + <text fg={theme.textMuted}>{context()?.tokens ?? 0} tokens</text> |
| 89 | + <text fg={theme.textMuted}>{context()?.percentage ?? 0}% used</text> |
| 90 | + <text fg={theme.textMuted}>{cost()} spent</text> |
| 91 | + </Show> |
| 92 | +</box> |
| 93 | +``` |
| 94 | + |
| 95 | +## Implementation Tasks |
| 96 | + |
| 97 | +### Phase 1: Add Context to Collapsible State |
| 98 | +- [x] Add `context: true` to the `expanded` store initialization (line 31) |
| 99 | + |
| 100 | +### Phase 2: Make Context Section Collapsible |
| 101 | +- [x] Wrap Context header in a clickable `<box>` with `onMouseDown` handler |
| 102 | +- [x] Add `▼`/`▶` indicator based on `expanded.context` state |
| 103 | +- [x] Add collapsed summary showing token count in header |
| 104 | +- [x] Wrap content in `<Show when={expanded.context}>` conditional |
| 105 | + |
| 106 | +### Phase 3: Reorder Sections |
| 107 | +Move sections in JSX to match desired order: |
| 108 | +- [x] Keep Session title first (lines 110-117) |
| 109 | +- [x] Keep Context section second (lines 118-125) - now collapsible |
| 110 | +- [x] Move Subagents section (lines 230-309) to third position |
| 111 | +- [x] Keep MCP section fourth (lines 126-186) |
| 112 | +- [x] Keep LSP section fifth (lines 187-228) |
| 113 | +- [x] Move Modified Files section to last (lines 329-372) |
| 114 | + |
| 115 | +### Phase 4: Handle Todo Section |
| 116 | +- [x] **Decision:** Todo section removed per user requirements (only Context, Subagents, MCP, LSP, Changed Files specified) |
| 117 | + |
| 118 | +### Phase 5: Verify Collapsible Behavior Consistency |
| 119 | +- [x] Ensure all sections use same collapsible pattern |
| 120 | +- [x] Context: Always show collapse control (no threshold, always has data) |
| 121 | +- [x] All sections: Removed threshold logic for showing arrows - all sections now always show ▼/▶ |
| 122 | + |
| 123 | +### Phase 6: Testing |
| 124 | +- [x] TypeScript compilation passes |
| 125 | +- [ ] Test collapse/expand for Context section (manual verification needed) |
| 126 | +- [ ] Verify section order displays correctly (manual verification needed) |
| 127 | +- [ ] Test click handlers work for all sections (manual verification needed) |
| 128 | +- [ ] Verify collapsed state summary displays correctly (manual verification needed) |
| 129 | +- [ ] Test with empty sessions (no subagents, no MCP, etc.) (manual verification needed) |
| 130 | + |
| 131 | +## Code References |
| 132 | + |
| 133 | +### Internal Files |
| 134 | +| File | Description | |
| 135 | +|------|-------------| |
| 136 | +| `packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx` | Main sidebar component (426 lines) | |
| 137 | +| `packages/opencode/src/cli/cmd/tui/context/theme.tsx` | Theme context for styling | |
| 138 | +| `packages/opencode/src/cli/cmd/tui/ui/toast.tsx` | Toast notifications | |
| 139 | + |
| 140 | +### Key Line References (UPDATED after implementation) |
| 141 | +| Line(s) | Description | |
| 142 | +|---------|-------------| |
| 143 | +| 26-33 | `expanded` store initialization (now includes `context`) | |
| 144 | +| 110-117 | Session title section | |
| 145 | +| 119-135 | Context section (now collapsible) | |
| 146 | +| 137-214 | Subagents section (moved up) | |
| 147 | +| 216-271 | MCP section | |
| 148 | +| 273-313 | LSP section | |
| 149 | +| 315-356 | Changed Files section (renamed from Modified Files) | |
| 150 | + |
| 151 | +## Validation Criteria |
| 152 | + |
| 153 | +### Functional Requirements |
| 154 | +- [x] Context section collapses/expands on click |
| 155 | +- [x] Collapsed Context shows token count in header |
| 156 | +- [x] All sections appear in correct order: Context, Subagents, MCP, LSP, Changed Files |
| 157 | +- [x] All collapsible sections show `▼` when expanded, `▶` when collapsed |
| 158 | +- [x] State persists during session (store-based) |
| 159 | + |
| 160 | +### Visual Requirements |
| 161 | +- [x] Collapse indicators align consistently across all sections |
| 162 | +- [x] Collapsed headers show relevant summary info |
| 163 | +- [ ] No layout shifts when toggling sections (manual verification needed) |
| 164 | + |
| 165 | +### Edge Cases |
| 166 | +- [x] Empty subagents list doesn't show Subagents section (kept existing `<Show when={...}>` logic) |
| 167 | +- [x] No MCP servers connected doesn't show MCP section (kept existing `<Show when={...}>` logic) |
| 168 | +- [x] Zero tokens shows "0 tokens" correctly |
| 169 | + |
| 170 | +## Implementation Summary |
| 171 | + |
| 172 | +### Changes Made: |
| 173 | +1. Added `context: true` to the expanded store |
| 174 | +2. Made Context section fully collapsible with click handler and ▼/▶ indicator |
| 175 | +3. Reordered sections to: Context → Subagents → MCP → LSP → Changed Files |
| 176 | +4. Removed Todo section (not in user requirements) |
| 177 | +5. Renamed "Modified Files" to "Changed Files" |
| 178 | +6. Made all sections consistently collapsible (removed threshold logic for showing arrows) |
| 179 | +7. Added collapsed state summaries: |
| 180 | + - Context: shows token count |
| 181 | + - Subagents: shows number of agent types |
| 182 | + - MCP: shows active count and error count |
| 183 | + - LSP: shows active count |
| 184 | + - Changed Files: shows file count |
| 185 | + |
| 186 | +## Dependencies |
| 187 | + |
| 188 | +None - this is a self-contained UI change with no external dependencies. |
| 189 | + |
| 190 | +## Rollback Plan |
| 191 | + |
| 192 | +If issues arise, revert the single file change: |
| 193 | +```bash |
| 194 | +git checkout HEAD -- packages/opencode/src/cli/cmd/tui/routes/session/sidebar.tsx |
| 195 | +``` |
0 commit comments