From 7bc4a70b0621c5987f1b94b24e0c00d2623eaea4 Mon Sep 17 00:00:00 2001 From: Hibryda Date: Mon, 9 Mar 2026 02:31:08 +0100 Subject: [PATCH] docs: update meta files for AgentPane UI redesign session --- .claude/CLAUDE.md | 5 +++-- .claude/rules/06-testing.md | 15 +++++++++++++++ .gitignore | 1 + CHANGELOG.md | 5 +++++ CLAUDE.md | 2 +- TODO.md | 3 +++ docs/progress.md | 12 ++++++++++++ 7 files changed, 40 insertions(+), 3 deletions(-) diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md index cf3d1c3..0a35237 100644 --- a/.claude/CLAUDE.md +++ b/.claude/CLAUDE.md @@ -5,7 +5,7 @@ - v1 is a single-file Python app (`bterminal.py`). Changes are localized. - v2 docs are in `docs/`. Architecture decisions are in `docs/task_plan.md`. - v2 Phases 1-7 + multi-machine (A-D) + profiles/skills complete. Extras: SSH, ctx, themes, detached mode, auto-updater, shiki, copy/paste, session resume, drag-resize, session groups, Deno sidecar, Claude profiles, skill discovery. -- v3 Mission Control (All Phases 1-10 Complete): project groups, workspace store, 12 Workspace components, session continuity, workspace teardown, dead v2 component cleanup. 138 vitest + 34 cargo tests. +- v3 Mission Control (All Phases 1-10 Complete): project groups, workspace store, 12 Workspace components, session continuity, workspace teardown, dead v2 component cleanup. 139 vitest + 34 cargo tests. - v3 docs: `docs/v3-task_plan.md`, `docs/v3-findings.md`, `docs/v3-progress.md`. - Consult Memora (tag: `bterminal`) before making architectural changes. @@ -71,7 +71,8 @@ - v3 SQLite additions: agent_messages table (per-project message persistence), project_agent_state table (sdkSessionId, cost, status per project), sessions.project_id column. - v3 App.svelte: VSCode-style sidebar layout. Horizontal: left icon rail (GlobalTabBar, 2.75rem, single Settings gear icon) + expandable drawer panel (Settings only, content-driven width, max 50%) + main workspace (ProjectGrid always visible) + StatusBar. Sidebar has Settings only — Sessions/Docs/Context are project-specific (in ProjectBox tabs). Keyboard: Ctrl+B (toggle sidebar), Ctrl+, (settings), Escape (close). - v3 component tree: App -> GlobalTabBar (settings icon) + sidebar-panel? (SettingsTab) + workspace (ProjectGrid) + StatusBar. See `docs/v3-task_plan.md` for full tree. -- MarkdownPane reactively watches filePath changes via $effect (not onMount-only). Uses sans-serif font (--ui-font-family), all --ctp-* theme vars. Styled blockquotes with translucent backgrounds, table row hover, link hover underlines. +- MarkdownPane reactively watches filePath changes via $effect (not onMount-only). Uses sans-serif font (Inter, system-ui), all --ctp-* theme vars. Styled blockquotes with translucent backgrounds, table row hover, link hover underlines. Inner `.markdown-pane-scroll` wrapper with `container-type: inline-size` for responsive padding via `--bterminal-pane-padding-inline`. +- AgentPane UI (redesigned 2026-03-09): sans-serif root font (`system-ui, -apple-system, sans-serif`), monospace only on code/tool names. Tool calls paired with results in collapsible `
` groups via `$derived.by` toolResultMap (cache-guarded by tool_result count). Hook messages collapsed into compact `
` with gear icon. Context window meter inline in status strip. Cost bar minimal (no background, subtle border-top). Session summary with translucent surface background. Two-phase scroll anchoring (`$effect.pre` + `$effect`). Tool-aware output truncation (Bash 500 lines, Read/Write 50, Glob/Grep 20, default 30). Colors softened via `color-mix()`. Inner `.agent-pane-scroll` wrapper with `container-type: inline-size` for responsive padding via shared `--bterminal-pane-padding-inline` variable. - ProjectBox uses CSS `style:display` (flex/none) instead of `{#if}` for tab content panes — keeps ClaudeSession mounted across tab switches (prevents session ID reset and message loss). Terminal section also uses `style:display`. Grid rows: auto auto 1fr auto. - Svelte 5 event syntax: use `onclick` not `on:click`. Svelte 5 requires lowercase event handler attributes (no colon syntax). diff --git a/.claude/rules/06-testing.md b/.claude/rules/06-testing.md index 3b47254..3efe72e 100644 --- a/.claude/rules/06-testing.md +++ b/.claude/rules/06-testing.md @@ -18,6 +18,21 @@ Assume nothing about correctness — prove it with tests. - Critical user journeys only (~10% of suite). Test API endpoints with integration tests, not E2E. +## Browser Automation + +Choose the right tool for the job: + +| Tool | Use When | +|------|----------| +| **Claude in Chrome** | Authenticated sites, user's logged-in session needed | +| **Playwright MCP** | Cross-browser testing, E2E test suites, CI-style validation | +| **Puppeteer MCP** | Quick DOM scripting, page scraping, lightweight checks | +| **Chrome DevTools MCP** | Deep debugging (performance traces, network waterfall, memory) | + +- Prefer Playwright for repeatable E2E tests (deterministic, headless-capable). +- Use Claude in Chrome when the test requires an existing authenticated session. +- Use DevTools MCP for performance profiling and network analysis, not functional tests. + ## After Every Change - Run the test suite, report results, fix failures before continuing. diff --git a/.gitignore b/.gitignore index bad9375..6daa3a9 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,4 @@ plugins/ projects/ .playwright-mcp/ v2/.audit/ +.tribunal/ diff --git a/CHANGELOG.md b/CHANGELOG.md index 1a80fd3..27a2c90 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Security - `claude_read_skill` path traversal: added `canonicalize()` + `starts_with()` validation to prevent reading arbitrary files via crafted skill paths (lib.rs) +### Changed +- AgentPane UI redesign: sans-serif root font (system-ui), tool calls paired with results in collapsible `
` groups, hook messages collapsed into compact labels, context window usage meter in status strip, cost bar made minimal (no background), session summary with translucent background, two-phase scroll anchoring, tool-aware output truncation (Bash 500/Read 50/Glob 20 lines), colors softened via `color-mix()`, responsive margins via container queries (AgentPane.svelte) +- MarkdownPane: added inner scroll wrapper with `container-type: inline-size`, responsive padding via shared `--bterminal-pane-padding-inline` variable (MarkdownPane.svelte) +- Added `--bterminal-pane-padding-inline: clamp(0.75rem, 3.5cqi, 2rem)` shared CSS variable for responsive pane padding (catppuccin.css) + ### Fixed - ProjectBox tab switch destroys running agent sessions: changed `{#if activeTab}` conditional rendering to CSS `style:display` (flex/none) for all three content panes and terminal section — ClaudeSession now stays mounted across tab switches, preserving session ID, message history, and running agents (ProjectBox.svelte) - Sidecar env var stripping now whitelists `CLAUDE_CODE_EXPERIMENTAL_*` vars (both Rust sidecar.rs and JS agent-runner.ts) — previously all `CLAUDE*` vars were stripped, blocking feature flags like agent teams from reaching the SDK (sidecar.rs, agent-runner.ts) diff --git a/CLAUDE.md b/CLAUDE.md index e46e79f..6d6b89a 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -48,7 +48,7 @@ Terminal emulator with SSH and Claude Code session management. v1 (GTK3+VTE Pyth | `v2/src/lib/stores/agents.svelte.ts` | Agent session store (messages, cost, parent/child hierarchy) | | `v2/src/lib/components/Terminal/TerminalPane.svelte` | xterm.js terminal pane | | `v2/src/lib/components/Terminal/AgentPreviewPane.svelte` | Read-only xterm.js showing agent activity (Bash commands, tool results, errors) | -| `v2/src/lib/components/Agent/AgentPane.svelte` | Agent session pane (prompt, messages, cost, profile selector, skill autocomplete) | +| `v2/src/lib/components/Agent/AgentPane.svelte` | Agent session pane (sans-serif font, tool call/result pairing, hook collapsing, context meter, prompt, cost, profile selector, skill autocomplete) | | `v2/src/lib/adapters/pty-bridge.ts` | PTY IPC wrapper (Tauri invoke/listen) | | `v2/src/lib/adapters/agent-bridge.ts` | Agent IPC wrapper (Tauri invoke/listen) | | `v2/src/lib/adapters/sdk-messages.ts` | SDK message adapter (stream-json parser) | diff --git a/TODO.md b/TODO.md index 71a4182..26c1c93 100644 --- a/TODO.md +++ b/TODO.md @@ -8,6 +8,8 @@ - [ ] **Multi-machine TLS/certificate pinning** -- TLS support for bterminal-relay + certificate pinning in RemoteManager. - [ ] **Agent Teams real-world testing** -- Env var whitelist fix done. 3 test sessions ran ($1.10, $0.69, $1.70) but model didn't spawn subagents — needs complex multi-part prompts to trigger delegation. Test with CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1. +- [ ] **AgentPane visual verification** -- Redesigned UI not yet tested in dev mode. Launch `npm run tauri dev` and verify tool grouping, hook collapsing, context meter, scroll anchoring work correctly. + ## Completed - [x] **E2E testing — consolidated & expanded** -- Consolidated 4 spec files into single bterminal.test.ts (Tauri single-session requirement). 25 tests across 4 describe blocks: Smoke(6), Workspace(8), Settings(6), Keyboard(5). Fixed WebDriver clicks on Svelte components via browser.execute(), removed tauri-plugin-log (redundant with telemetry::init()). | Done: 2026-03-08 @@ -20,3 +22,4 @@ - [x] **ContextPane project-scoped redesign** -- Auto-registers project in ctx DB on mount. Removed project selector. | Done: 2026-03-08 - [x] **ctx init fix + UI init button** -- Fixed ctx CLI, added Initialize Database button in ContextPane. | Done: 2026-03-08 - [x] **Premium markdown typography** -- MarkdownPane CSS overhaul with Inter font, prose spacing, gradient HR. | Done: 2026-03-08 +- [x] **AgentPane + MarkdownPane UI redesign** -- AgentPane: sans-serif font, tool call/result pairing via $derived.by, hook message collapsing, context meter, muted colors via color-mix(), responsive margins via container queries. MarkdownPane: container query wrapper, shared responsive padding variable. Tribunal-elected design (S-3-R4, 88% confidence). 139/139 tests pass. | Done: 2026-03-09 diff --git a/docs/progress.md b/docs/progress.md index 21e0354..99014dd 100644 --- a/docs/progress.md +++ b/docs/progress.md @@ -2,6 +2,18 @@ > Earlier sessions (2026-03-05 to 2026-03-06 multi-machine): see [progress-archive.md](progress-archive.md) +### Session: 2026-03-09 — AgentPane + MarkdownPane UI Redesign + +#### Tribunal-Elected Design (S-3-R4, 88% confidence) +- [x] AgentPane full rewrite: sans-serif root font, tool call/result pairing via `$derived.by` toolResultMap, hook message collapsing, context window meter, cost bar minimized, session summary styling +- [x] Two-phase scroll anchoring (`$effect.pre` + `$effect`) +- [x] Tool-aware output truncation (Bash 500, Read/Write 50, Glob/Grep 20, default 30 lines) +- [x] Colors softened via `color-mix(in srgb, var(--ctp-*) 65%, var(--ctp-surface1) 35%)` +- [x] MarkdownPane: container query wrapper, shared responsive padding variable +- [x] catppuccin.css: `--bterminal-pane-padding-inline: clamp(0.75rem, 3.5cqi, 2rem)` +- [x] 139/139 vitest passing, 0 new TypeScript errors +- [ ] Visual verification in dev mode (pending) + ### Session: 2026-03-06 (continued) — Sidecar Env Var Bug Fix #### CLAUDE* Environment Variable Leak (critical fix)