feat(web): resizable panels via svelte-splitpanes + Claude-style composer
Some checks failed
ci / build-test (push) Has been cancelled
ci / docker-build (push) Has been cancelled
ci / web (push) Has been cancelled
Desktop App / Build Linux (amd64) (push) Has been cancelled
Desktop App / Attach to Release (push) Has been cancelled

Replace hand-rolled pointer-resize logic (TaskContextPanel's 3-way vertical
split, SessionChatWindow's rail, ChatThread's message/input split) with
svelte-splitpanes, themed onto the app's existing border/primary tokens.

- TaskContextPanel: Scope/Plan/Event-log sections collapse to a fixed header
  height and restore their last size on reopen.
- ChatThread: input area is now a separate resizable pane, clamped to a
  measured one-line minimum and a 45% max, instead of a fixed max-h textarea.
- Send button restyled to sit inside the input's corner (Claude-style),
  swapping the up-arrow for a corner-down-left return icon.
- Adds a $app/environment shim + optimizeDeps exclude, since
  svelte-splitpanes assumes SvelteKit and this is a plain Vite app.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-20 10:32:54 +02:00
parent aed068de12
commit 58a11ca872
8 changed files with 268 additions and 212 deletions

View File

@@ -289,3 +289,32 @@ a {
a:hover {
text-decoration: underline;
}
/* svelte-splitpanes theming (TaskContextPanel, SessionChatWindow rail) —
mapped onto the app's border/primary tokens instead of the library's
default-theme, so splitters follow the terracotta/dark theme toggle. */
.splitpanes.oikos-theme .splitpanes__pane {
background: transparent;
}
.splitpanes.oikos-theme .splitpanes__splitter {
background-color: transparent;
transition: background-color 0.15s;
}
.splitpanes.oikos-theme .splitpanes__splitter:hover,
.splitpanes.oikos-theme .splitpanes__splitter.splitpanes__splitter__active {
background-color: color-mix(in oklab, var(--primary) 30%, transparent);
}
.oikos-theme.splitpanes--horizontal > .splitpanes__splitter {
height: 6px;
border-bottom: 1px solid var(--border);
cursor: row-resize;
}
.oikos-theme.splitpanes--vertical > .splitpanes__splitter {
width: 6px;
border-left: 1px solid var(--border);
cursor: col-resize;
}