docs: update meta files for AgentPane UI redesign session
This commit is contained in:
Hibryda
parent
4674a4779d
commit
7bc4a70b06
7 changed files with 40 additions and 3 deletions
|
|
@ -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 `<details>` groups via `$derived.by` toolResultMap (cache-guarded by tool_result count). Hook messages collapsed into compact `<details>` 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).
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
|
|||
1
.gitignore
vendored
1
.gitignore
vendored
|
|
@ -8,3 +8,4 @@ plugins/
|
|||
projects/
|
||||
.playwright-mcp/
|
||||
v2/.audit/
|
||||
.tribunal/
|
||||
|
|
|
|||
|
|
@ -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 `<details>` 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)
|
||||
|
|
|
|||
|
|
@ -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) |
|
||||
|
|
|
|||
3
TODO.md
3
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
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue