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

@@ -3,6 +3,7 @@ import type { ProxyOptions } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import tailwindcss from '@tailwindcss/vite'
import { readFileSync, existsSync } from 'fs'
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
// In Docker, VERSION is copied into the build WORKDIR (/build/web/VERSION).
@@ -45,12 +46,27 @@ export default defineConfig({
__OIKOS_DEV_TOKEN__: JSON.stringify(process.env.OIKOS_API_TOKEN ?? ''),
},
resolve: {
alias: { $lib: '/src/lib' }
alias: {
$lib: '/src/lib',
// svelte-splitpanes imports SvelteKit's browser-detection module; this
// isn't a SvelteKit app, so point it at a plain shim (see the file).
// Needs a real filesystem path (not the /src/... shorthand $lib uses)
// so esbuild's dependency pre-bundler can resolve it too.
'$app/environment': fileURLToPath(new URL('./src/lib/shims/app-environment.ts', import.meta.url))
}
},
build: {
outDir: 'dist',
emptyOutDir: true
},
optimizeDeps: {
// svelte-splitpanes imports SvelteKit's $app/environment (aliased above
// to a shim), but esbuild's dependency pre-bundler resolves that
// differently and fails before the dev server even starts — skip
// pre-bundling it so it goes through Vite's normal (alias-aware)
// transform pipeline instead.
exclude: ['svelte-splitpanes']
},
server: {
proxy: {
'/api': authProxy('http://localhost:8090'),