From f349f3bb141980c5881b79641b8400d8fb53c6f5 Mon Sep 17 00:00:00 2001 From: Hibryda Date: Fri, 6 Mar 2026 15:10:32 +0100 Subject: [PATCH] =?UTF-8?q?docs:=20update=20all=20docs=20for=20polish=20se?= =?UTF-8?q?ssion=20=E2=80=94=20copy/paste,=20theme=20hot-swap,=20tests,=20?= =?UTF-8?q?drag-resize?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - progress.md: add session log for copy/paste, theme hot-swap, tree enhancements, session resume, drag-resize, testing, CI, Deno PoC - phases.md: mark completed items (copy/paste, drag-resize, tree click, subtree cost, session resume, CI signing) - task_plan.md: update theme decision (hot-swap works), add new decisions - CLAUDE.md: add test paths, test commands, vitest dep - .claude/CLAUDE.md: fix stale deferred items and theme limitation - README.md: update feature summary - TODO.md: move 7 completed items, update active list - CHANGELOG.md: add session entries under [Unreleased] --- .claude/CLAUDE.md | 4 ++-- CHANGELOG.md | 19 ++++++++++++++++++ CLAUDE.md | 9 ++++++++- README.md | 2 +- TODO.md | 32 +++++++++++++---------------- docs/phases.md | 18 +++++++++++------ docs/progress.md | 51 +++++++++++++++++++++++++++++++++++++++++++---- docs/task_plan.md | 5 ++++- v2/README.md | 47 +++++++++++++++++++++++++++++++++++++++++++ 9 files changed, 154 insertions(+), 33 deletions(-) create mode 100644 v2/README.md diff --git a/.claude/CLAUDE.md b/.claude/CLAUDE.md index 6f4831e..2f57128 100644 --- a/.claude/CLAUDE.md +++ b/.claude/CLAUDE.md @@ -4,7 +4,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`. -- All 6 phases complete + extras (SSH management, ctx integration, theme flavors, detached mode, auto-updater, shiki highlighting). Phase 5 minor deferred: tree node click-to-focus, subtree cost display. +- All 6 phases complete + extras (SSH, ctx, themes, detached mode, auto-updater, shiki, copy/paste, session resume, drag-resize, testing). - Consult Memora (tag: `bterminal`) before making architectural changes. ## Documentation References @@ -39,7 +39,7 @@ - Agent tree (AgentTree.svelte) uses SVG with recursive layout. Tree data built by `agent-tree.ts` utility from agent messages. - ctx integration opens `~/.claude-context/context.db` as SQLITE_OPEN_READ_ONLY — never writes. CtxDb uses Option for graceful absence if DB doesn't exist. - SSH sessions spawn TerminalPane with shell=/usr/bin/ssh and args array. No SSH library needed — PTY handles it natively. -- Theme flavors (Latte/Frappe/Macchiato/Mocha) override CSS variables at runtime. Existing open terminals don't hot-swap; new terminals pick up the active theme. +- Theme flavors (Latte/Frappe/Macchiato/Mocha) override CSS variables at runtime. Open terminals hot-swap via onThemeChange() callback registry in theme.svelte.ts. - Detached pane mode: App.svelte checks URL param `?detached=1` and renders a single pane without sidebar/grid chrome. Used for pop-out windows. - Shiki syntax highlighting uses lazy singleton pattern (avoid repeated WASM init). 13 languages preloaded. Used in MarkdownPane and AgentPane text messages. diff --git a/CHANGELOG.md b/CHANGELOG.md index 9a5262a..807a0b6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,6 +8,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] ### Added +- Terminal copy/paste: Ctrl+Shift+C copies selection, Ctrl+Shift+V pastes from clipboard to PTY (TerminalPane.svelte) +- Terminal theme hot-swap: onThemeChange() callback registry in theme.svelte.ts, open terminals update immediately when flavor changes +- Agent tree node click: clicking a tree node scrolls to the corresponding message in the agent pane (scrollIntoView smooth) +- Agent tree subtree cost: cumulative cost displayed in yellow below each tree node label (subtreeCost utility) +- Agent session resume: follow-up prompt input after session completes or errors, passes resume_session_id to SDK +- Pane drag-resize handles: splitter overlays in TilingGrid with mouse drag, supports 2-col/3-col/2-row layouts with 10-90% ratio clamping +- Auto-update CI workflow: release.yml generates latest.json with version, platform URL, and signature from .sig file; uploads as release artifact +- Deno sidecar proof-of-concept: agent-runner-deno.ts with same NDJSON protocol, compiles to single binary via deno compile +- Vitest test suite: sdk-messages.test.ts (SDK message adapter) and agent-tree.test.ts (tree builder/cost), vite.config.ts test config, npm run test script +- Cargo test suite: session.rs tests (SessionDb CRUD for sessions, SSH sessions, settings, layout) and ctx.rs tests (CtxDb error handling with missing database) +- tempfile dev dependency for Rust test isolation + +### Changed +- Agent tree NODE_H increased from 32 to 40 to accommodate subtree cost display +- release.yml build step now passes TAURI_SIGNING_PRIVATE_KEY and PASSWORD env vars from secrets +- release.yml uploads latest.json alongside .deb and .AppImage artifacts +- vitest ^4.0.18 added as npm dev dependency + +### Previously Added - SSH session management: SshSession CRUD in SQLite, SshDialog create/edit modal, SshSessionList grouped by folder with color dots, SSH pane type routing to TerminalPane with shell=/usr/bin/ssh (Phase 5) - ctx context database integration: read-only CtxDb (Rust, SQLITE_OPEN_READ_ONLY), ContextPane with project selector, tabs for entries/summaries/search, ctx-bridge adapter (Phase 5) - Catppuccin theme flavors: all 4 palettes (Latte/Frappe/Macchiato/Mocha) selectable via Settings dialog, theme.svelte.ts reactive store with SQLite persistence, TerminalPane theme-aware (Phase 5) diff --git a/CLAUDE.md b/CLAUDE.md index 641925a..a034e49 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -60,6 +60,9 @@ Terminal emulator with SSH and Claude Code session management. v1 (GTK3+VTE Pyth | `v2/src/lib/adapters/session-bridge.ts` | Session/layout persistence IPC wrapper | | `v2/src/lib/components/Markdown/MarkdownPane.svelte` | Markdown file viewer (marked.js + shiki, live reload) | | `v2/sidecar/agent-runner.ts` | Node.js sidecar (spawns claude CLI) | +| `v2/sidecar/agent-runner-deno.ts` | Deno sidecar proof-of-concept (experimental) | +| `v2/src/lib/adapters/sdk-messages.test.ts` | Vitest tests for SDK message adapter | +| `v2/src/lib/utils/agent-tree.test.ts` | Vitest tests for agent tree builder | ## v1 Stack @@ -78,7 +81,7 @@ Terminal emulator with SSH and Claude Code session management. v1 (GTK3+VTE Pyth - SQLite session persistence (rusqlite, WAL mode) + layout restore on startup - File watcher (notify crate) for live markdown viewer - Rust deps: tauri, portable-pty, rusqlite (bundled), dirs, notify, uuid, serde, tokio, tauri-plugin-updater -- npm deps: @xterm/xterm, @xterm/addon-canvas, @xterm/addon-fit, @tauri-apps/api, @tauri-apps/plugin-updater, marked, shiki +- npm deps: @xterm/xterm, @xterm/addon-canvas, @xterm/addon-fit, @tauri-apps/api, @tauri-apps/plugin-updater, marked, shiki, vitest (dev) - Source: `v2/` directory ## Build / Run @@ -95,6 +98,10 @@ sudo apt install python3-gi gir1.2-gtk-3.0 gir1.2-vte-2.91 cd v2 && npm install && npm run tauri dev # Dev mode cd v2 && npm run tauri build # Release build +# v2 tests +cd v2 && npm run test # Vitest (frontend) +cd v2/src-tauri && cargo test # Cargo tests (backend) + # v2 install from source (builds + installs to ~/.local/bin/bterminal-v2) ./install-v2.sh ``` diff --git a/README.md b/README.md index ef3ed4c..ab10e0f 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ Terminal with session panel (MobaXterm-style), built with GTK 3 + VTE. Catppuccin Mocha theme. -> **v2 all phases complete + extras:** Multi-session Claude agent dashboard using Tauri 2.x + Svelte 5. Features: multi-pane terminal with PTY backend, agent panes with structured output and tree visualization, SSH session management, ctx context database viewer, SQLite session persistence with layout restore, live markdown file viewer with Shiki syntax highlighting, global status bar with cost tracking, toast notifications, settings dialog with theme flavors (Catppuccin Latte/Frappe/Macchiato/Mocha), detached pane mode (pop-out windows), auto-updater plugin, CSS Grid tiling, .deb + AppImage packaging, and GitHub Actions CI. Branch `v2-mission-control`. See [docs/task_plan.md](docs/task_plan.md) for architecture and [docs/phases.md](docs/phases.md) for implementation plan. +> **v2 all phases complete + extras:** Multi-session Claude agent dashboard using Tauri 2.x + Svelte 5. Features: multi-pane terminal with PTY backend and copy/paste, agent panes with structured output, tree visualization with subtree cost, and session resume, SSH session management, ctx context database viewer, SQLite session persistence with layout restore, live markdown file viewer with Shiki syntax highlighting, global status bar with cost tracking, toast notifications, settings dialog with theme flavors (Catppuccin Latte/Frappe/Macchiato/Mocha) and live hot-swap, detached pane mode (pop-out windows), pane drag-resize handles, auto-updater plugin with CI signing support, CSS Grid tiling, .deb + AppImage packaging, GitHub Actions CI, vitest + cargo test suites. Branch `v2-mission-control`. See [docs/task_plan.md](docs/task_plan.md) for architecture and [docs/phases.md](docs/phases.md) for implementation plan. ![BTerminal](screenshot.png) diff --git a/TODO.md b/TODO.md index 13235c1..2429f01 100644 --- a/TODO.md +++ b/TODO.md @@ -2,24 +2,20 @@ ## Active -- [ ] **Phase 5 remaining** -- Click tree node -> focus agent pane (onNodeClick wiring), subtree cost display in tree. -- [ ] **Testing** -- vitest for sdk-messages adapter, cargo test for sidecar/session/watcher, Playwright for e2e. -- [ ] **Pane drag-resize handles** -- Deferred from Phase 2, current presets sufficient for MVP. -- [ ] **Copy/paste (Ctrl+Shift+C/V)** -- Deferred from Phase 2. -- [ ] **Session resume (SDK resumeSessionId)** -- Allow resuming previous agent sessions. -- [ ] **Evaluate Deno as sidecar runtime** -- Single binary, better packaging than Node.js. Test SDK compatibility. -- [ ] **Auto-update signing key + update server** -- Plugin integrated, needs signing infrastructure for full auto-update flow. -- [ ] **Terminal theme hot-swap** -- Existing open terminals don't update when theme flavor changes; only new terminals pick up the new theme. +- [ ] **Auto-update signing key** -- Generate TAURI_SIGNING_PRIVATE_KEY, set as GitHub repo secret. CI workflow ready (latest.json + signing). +- [ ] **Deno sidecar integration** -- Proof-of-concept done (agent-runner-deno.ts). Needs real claude CLI testing, benchmark vs Node.js, sidecar.rs integration. +- [ ] **E2E testing (Playwright)** -- No e2e tests yet. Test: open terminal, run command, open agent, verify output. +- [ ] **Session groups/folders** -- Organize sessions in sidebar by folder (deferred from Phase 4). ## Completed -- [x] **SSH session management** -- CRUD in SQLite, SshDialog/SshSessionList components, SSH pane type routing to TerminalPane with ssh args. | Done: 2026-03-06 -- [x] **ctx integration** -- Read-only CtxDb in Rust (ctx.rs), ContextPane with project selector/tabs/search, ctx-bridge adapter. | Done: 2026-03-06 -- [x] **Catppuccin theme flavors** -- Latte/Frappe/Macchiato/Mocha selectable, themes.ts + theme.svelte.ts store, SettingsDialog dropdown. | Done: 2026-03-06 -- [x] **Detached pane mode** -- Pop-out windows via URL params (?detached=1), detach.ts utility, App.svelte conditional rendering. | Done: 2026-03-06 -- [x] **Syntax highlighting** -- Shiki with catppuccin-mocha theme, lazy singleton highlighter, 13 preloaded languages. Integrated in MarkdownPane and AgentPane. | Done: 2026-03-06 -- [x] **Tauri auto-updater plugin** -- tauri-plugin-updater (Rust + npm) + updater.ts utility integrated. | Done: 2026-03-06 -- [x] **Markdown rendering in agent messages** -- AgentPane text messages rendered as markdown with Shiki highlighting. | Done: 2026-03-06 -- [x] **Phase 6: Packaging + Distribution** -- install-v2.sh, tauri.conf.json bundle config (deb+appimage), icon regeneration, GitHub Actions release workflow. | Done: 2026-03-06 -- [x] **Phase 5 partial: Agent Tree + Polish** -- Agent tree SVG, status bar, toast notifications, settings dialog + SQLite backend, keyboard shortcuts. | Done: 2026-03-06 -- [x] **Phase 4: Session Management + Markdown Viewer** -- SQLite persistence, session CRUD, layout restore, file watcher, MarkdownPane. | Done: 2026-03-06 +- [x] **Copy/paste (Ctrl+Shift+C/V)** -- TerminalPane attachCustomKeyEventHandler, C copies selection, V writes clipboard to PTY. | Done: 2026-03-06 +- [x] **Terminal theme hot-swap** -- onThemeChange callback registry in theme.svelte.ts, TerminalPane subscribes. All open terminals update. | Done: 2026-03-06 +- [x] **Tree node click -> scroll to message** -- handleTreeNodeClick in AgentPane, scrollIntoView smooth. | Done: 2026-03-06 +- [x] **Subtree cost display** -- Yellow cost text below each tree node (subtreeCost util, NODE_H 32->40). | Done: 2026-03-06 +- [x] **Session resume** -- Follow-up prompt in AgentPane, resume_session_id passed to SDK. | Done: 2026-03-06 +- [x] **Pane drag-resize handles** -- Splitter overlays in TilingGrid with mouse drag, 10-90% clamping. | Done: 2026-03-06 +- [x] **Vitest + cargo tests** -- sdk-messages.test.ts, agent-tree.test.ts, session.rs tests, ctx.rs tests. | Done: 2026-03-06 +- [x] **Auto-update CI workflow** -- latest.json generation, signing env vars, artifact upload. | Done: 2026-03-06 +- [x] **Deno sidecar PoC** -- agent-runner-deno.ts proof-of-concept with same NDJSON protocol. | Done: 2026-03-06 +- [x] **Phase 6: Packaging + Distribution** -- install-v2.sh, bundle config, GitHub Actions release. | Done: 2026-03-06 diff --git a/docs/phases.md b/docs/phases.md index cb331da..97dc7d5 100644 --- a/docs/phases.md +++ b/docs/phases.md @@ -109,7 +109,7 @@ bterminal-v2/ - [x] CSS Grid layout with sidebar + main area + optional right panel - [x] Responsive breakpoints (ultrawide / standard / narrow) -- [ ] Pane resize via drag handles (deferred — current presets sufficient for MVP) +- [x] Pane resize via drag handles (splitter overlays in TilingGrid with mouse drag, min/max 10%/90%) - [x] Layout presets: 1-col, 2-col, 3-col, 2x2, master+stack - [ ] Save/restore layout to SQLite (Phase 4) - [x] Keyboard: Ctrl+1-4 focus pane, Ctrl+N new terminal @@ -119,7 +119,7 @@ bterminal-v2/ - [x] Catppuccin Mocha theme for xterm.js - [x] PTY spawn from Rust (portable-pty), stream to frontend via Tauri events - [x] Terminal resize -> PTY resize (100ms debounce) -- [ ] Copy/paste (Ctrl+Shift+C/V) — deferred +- [x] Copy/paste (Ctrl+Shift+C/V) — via attachCustomKeyEventHandler - [x] SSH session: spawn `ssh` command in PTY (via shell args) - [x] Local shell: spawn user's $SHELL - [x] Claude Code CLI: spawn `claude` in PTY (via shell args) @@ -154,7 +154,7 @@ bterminal-v2/ - [x] Agent status indicator (starting/running/done/error) - [x] Start/stop agent from UI (prompt form + stop button) - [x] Auto-scroll with scroll-lock on user scroll-up -- [ ] Session resume (SDK `resume: sessionId`) +- [x] Session resume (follow-up prompt in AgentPane, resume_session_id passed to SDK) - [x] Keyboard: Ctrl+Shift+N new agent - [x] Sidebar: agent session button @@ -187,8 +187,12 @@ bterminal-v2/ ## Phase 5: Agent Tree + Polish [status: complete] — Post-MVP - [x] Agent tree visualization (SVG, compact horizontal layout) — AgentTree.svelte + agent-tree.ts utility -- [ ] Click tree node -> focus agent pane (onNodeClick prop exists, not wired) -- [ ] Aggregate cost per subtree (subtreeCost util exists, not displayed in UI) +- [x] Click tree node -> scroll to message (handleTreeNodeClick in AgentPane, scrollIntoView smooth) +- [x] Aggregate cost per subtree (subtreeCost displayed in yellow below each tree node label) +- [x] Terminal copy/paste (Ctrl+Shift+C/V via attachCustomKeyEventHandler) +- [x] Terminal theme hot-swap (onThemeChange callback registry in theme.svelte.ts, TerminalPane subscribes) +- [x] Pane drag-resize handles (splitter overlays in TilingGrid with mouse drag) +- [x] Session resume (follow-up prompt, resume_session_id to SDK) - [x] Global status bar (terminal/agent counts, active agents pulse, token/cost totals) — StatusBar.svelte - [x] Notification system (toast: success/error/warning/info, auto-dismiss 4s, max 5) — notifications.svelte.ts + ToastContainer.svelte - [x] Agent dispatcher toast integration (agent complete, error, sidecar crash notifications) @@ -220,7 +224,9 @@ bterminal-v2/ - Builds .deb + AppImage, uploads as GitHub Release artifacts - [x] Build verified: .deb (4.3 MB), AppImage (103 MB) - [x] Auto-updater plugin integrated (tauri-plugin-updater Rust + @tauri-apps/plugin-updater npm + updater.ts) -- [ ] Auto-update signing key + update server setup (needed for full auto-update flow) +- [x] Auto-update latest.json generation in CI (version, platform URL, signature from .sig file) +- [x] release.yml: TAURI_SIGNING_PRIVATE_KEY env vars passed to build step +- [ ] Auto-update signing key generation + TAURI_SIGNING_PRIVATE_KEY secret in GitHub repo ### System Requirements - Node.js 20+ (for Agent SDK sidecar) diff --git a/docs/progress.md b/docs/progress.md index 22d2048..f627743 100644 --- a/docs/progress.md +++ b/docs/progress.md @@ -135,8 +135,51 @@ Architecture decision: Uses `claude` CLI with `--output-format stream-json` inst - [x] New npm dependencies: shiki, @tauri-apps/plugin-updater - [x] New Rust dependency: tauri-plugin-updater +### Session: 2026-03-06 (continued) — Polish, Testing, Extras + +#### Terminal Copy/Paste + Theme Hot-Swap +- [x] Copy/paste in TerminalPane via Ctrl+Shift+C/V (attachCustomKeyEventHandler: C copies selection, V reads clipboard and writes to PTY) +- [x] Theme hot-swap: onThemeChange() callback registry in theme.svelte.ts, TerminalPane subscribes and updates term.options.theme on flavor change +- [x] All open terminals now update immediately when theme flavor changes + +#### Agent Tree Enhancements +- [x] Click tree node -> scroll to corresponding message (handleTreeNodeClick in AgentPane, scrollIntoView with smooth behavior) +- [x] Subtree cost display: yellow cost text below each tree node label (subtreeCost from agent-tree.ts, NODE_H increased from 32 to 40) +- [x] Each message div has id="msg-{msg.id}" for scroll targeting + +#### Session Resume +- [x] Follow-up prompt input appears after session completes or errors (if sdkSessionId exists) +- [x] startQuery(text, resume=true) passes resume_session_id to SDK via agent_query +- [x] Styled .follow-up input + button in done-bar and error-bar sections + +#### Pane Drag-Resize Handles +- [x] Splitter overlays in TilingGrid (positioned with fixed CSS, outside grid to avoid layout interference) +- [x] Column splitters: vertical bars between grid columns with mousemove drag +- [x] Row splitters: horizontal bars between grid rows with mousemove drag +- [x] customColumns/customRows $state override preset grid-template; reset on preset change +- [x] Supports 2-col, 3-col, and 2-row layouts with min 10% / max 90% ratio clamping +- [x] .dragging class disables user-select during drag; splitter hover shows accent color at 40% opacity + +#### Auto-Update Workflow Enhancement +- [x] release.yml: TAURI_SIGNING_PRIVATE_KEY + PASSWORD env vars passed to build step +- [x] Generates latest.json for auto-updater (version, pub_date, platform URL, signature from .sig file) +- [x] Uploads latest.json alongside .deb and .AppImage as release artifacts + +#### Deno Sidecar Evaluation +- [x] Created agent-runner-deno.ts proof-of-concept (Deno.Command for claude CLI, TextLineStream for NDJSON) +- [x] Same NDJSON protocol as Node.js version; compiles to single binary with deno compile +- [ ] Not yet integrated with Rust SidecarManager; needs real-world testing + +#### Testing Infrastructure +- [x] Vitest added: vitest ^4.0.18 dev dependency, vite.config.ts test config, npm run test script +- [x] sdk-messages.test.ts: tests for adaptSDKMessage() — init, text, thinking, tool_use, tool_result, cost, unknown types +- [x] agent-tree.test.ts: tests for buildAgentTree(), countTreeNodes(), subtreeCost() +- [x] Cargo: tempfile 3 dev dependency added +- [x] session.rs tests: SessionDb CRUD (sessions, SSH sessions, settings, layout), uses tempfile::tempdir() +- [x] ctx.rs tests: CtxDb error handling with missing database (conn=None) + ### Next Steps -- [ ] Testing: vitest for sdk-messages adapter, cargo test for sidecar -- [ ] Phase 5 remaining: click tree node -> focus pane, subtree cost display -- [ ] Auto-update signing key + update server setup -- [ ] Session resume (SDK resumeSessionId) +- [ ] Auto-update signing key generation + TAURI_SIGNING_PRIVATE_KEY secret in GitHub repo +- [ ] Deno sidecar: test with real claude CLI, benchmark vs Node.js, integrate with sidecar.rs +- [ ] E2E testing with Playwright +- [ ] Session groups/folders in sidebar diff --git a/docs/task_plan.md b/docs/task_plan.md index 66f296e..f143fab 100644 --- a/docs/task_plan.md +++ b/docs/task_plan.md @@ -130,9 +130,12 @@ See [phases.md](phases.md) for the full phased implementation plan (Phases 1-6). | Build-from-source installer over pre-built binaries | install-v2.sh checks deps and builds locally. Pre-built binaries via GitHub Actions CI (.deb + AppImage on v* tags). Auto-update deferred until signing key infrastructure is set up. | 2026-03-06 | | ctx read-only access from Rust | Open ~/.claude-context/context.db with SQLITE_OPEN_READ_ONLY. Never write — ctx CLI owns the schema. Separate CtxDb struct in ctx.rs with Option for graceful absence. | 2026-03-06 | | SSH via PTY shell args | SSH sessions spawn TerminalPane with shell=/usr/bin/ssh and args=[-p, port, [-i, keyfile], user@host]. No special SSH library — PTY handles it natively. | 2026-03-06 | -| Catppuccin 4 flavors at runtime | CSS variables overridden at runtime for non-Mocha flavors. Existing terminals don't hot-swap (limitation accepted); new terminals pick up the active theme. | 2026-03-06 | +| Catppuccin 4 flavors at runtime | CSS variables overridden at runtime. onThemeChange() callback registry in theme.svelte.ts allows open terminals to hot-swap themes. | 2026-03-06 | | Detached pane via URL params | Pop-out windows use ?detached=1&type=terminal URL params. App.svelte conditionally renders single pane without sidebar/grid chrome. Simple, no IPC needed. | 2026-03-06 | | Shiki over highlight.js | Shiki provides VS Code-grade syntax highlighting with Catppuccin theme. Lazy singleton pattern avoids repeated WASM init. 13 languages preloaded. | 2026-03-06 | +| Vitest for frontend tests | Vitest over Jest — zero-config with Vite, same transform pipeline, faster. Test config in vite.config.ts. | 2026-03-06 | +| Deno sidecar evaluation | Proof-of-concept agent-runner-deno.ts created. Deno compiles to single binary (better packaging). Same NDJSON protocol. Not yet integrated. | 2026-03-06 | +| Splitter overlays for pane resize | Fixed-position divs outside CSS Grid (avoids layout interference). Mouse drag updates customColumns/customRows state. Resets on preset change. | 2026-03-06 | ## Open Questions diff --git a/v2/README.md b/v2/README.md new file mode 100644 index 0000000..e6cd94f --- /dev/null +++ b/v2/README.md @@ -0,0 +1,47 @@ +# Svelte + TS + Vite + +This template should help get you started developing with Svelte and TypeScript in Vite. + +## Recommended IDE Setup + +[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). + +## Need an official Svelte framework? + +Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more. + +## Technical considerations + +**Why use this over SvelteKit?** + +- It brings its own routing solution which might not be preferable for some users. +- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app. + +This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project. + +Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate. + +**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?** + +Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information. + +**Why include `.vscode/extensions.json`?** + +Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project. + +**Why enable `allowJs` in the TS template?** + +While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds: not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant. + +**Why is HMR not preserving my local component state?** + +HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/rixo/svelte-hmr#svelte-hmr). + +If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR. + +```ts +// store.ts +// An extremely simple external store +import { writable } from 'svelte/store' +export default writable(0) +```