@@ -359,6 +369,11 @@
.leaf.droptarget {
box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 65%, transparent);
}
+ /* Focused leaf: the tab bar's hairline warms up — engine actions (model,
+ approvals, palette commands) target this pane's chat session. */
+ .leaf.focus .lbar {
+ border-bottom-color: color-mix(in oklab, var(--accent) 40%, var(--hairline));
+ }
.lbar {
position: relative;
display: flex;
diff --git a/src/lib/workbench/canvas.test.ts b/src/lib/workbench/canvas.test.ts
new file mode 100644
index 0000000..98fe48d
--- /dev/null
+++ b/src/lib/workbench/canvas.test.ts
@@ -0,0 +1,110 @@
+import { describe, it, expect } from 'vitest';
+import {
+ chatPanel,
+ chatSessionOf,
+ chatSessionsIn,
+ chatTab,
+ openChatTab,
+ reconcileLayout,
+ CHAT_SEED_RATIO
+} from './canvas';
+import {
+ activateTab,
+ leavesOf,
+ serializeLayout,
+ singleLeafLayout,
+ splitLeaf,
+ toggleMaximize,
+ type LeafNode,
+ type SplitNode,
+ type TileTab
+} from './tiles';
+
+const panelTab = (id: string, panel = id): TileTab => ({ id, panel });
+
+/** A persisted dock-only layout: [plan, git] | [term] — no chat tiles. */
+function dockOnlyLayout() {
+ const base = singleLeafLayout([panelTab('t1', 'plan'), panelTab('t2', 'git')], 't2');
+ const first = leavesOf(base.root)[0];
+ return splitLeaf(base, first.id, 'right', panelTab('t3', 'term')).layout;
+}
+
+describe('chat tab naming', () => {
+ it('round-trips a session id through the panel kind', () => {
+ expect(chatSessionOf(chatPanel('s1-abc'))).toBe('s1-abc');
+ });
+
+ it('returns null for tool panels, tui tabs and a bare prefix', () => {
+ expect(chatSessionOf('git')).toBeNull();
+ expect(chatSessionOf('tui:codex')).toBeNull();
+ expect(chatSessionOf('chat:')).toBeNull();
+ });
+
+ it('uses the panel kind as the tab id (one tile per session)', () => {
+ expect(chatTab('s9')).toEqual({ id: 'chat:s9', panel: 'chat:s9' });
+ });
+});
+
+describe('openChatTab', () => {
+ it('opens the chat tile in the requested leaf and activates it', () => {
+ const layout = dockOnlyLayout();
+ const target = leavesOf(layout.root)[1];
+ const next = openChatTab(layout, target.id, 's1');
+ const leaf = leavesOf(next.root)[1];
+ expect(leaf.tabs.map((t) => t.panel)).toEqual(['term', 'chat:s1']);
+ expect(leaf.active).toBe('chat:s1');
+ });
+
+ it('re-activates an existing tile instead of duplicating it', () => {
+ const layout = openChatTab(dockOnlyLayout(), null, 's1');
+ const other = leavesOf(layout.root)[1];
+ const next = openChatTab(activateTab(layout, 't1'), other.id, 's1');
+ expect(chatSessionsIn(next)).toEqual(['s1']);
+ });
+});
+
+describe('reconcileLayout', () => {
+ it('migrates a dock-only layout into the canvas by grafting one chat leaf on the left', () => {
+ const saved = serializeLayout(dockOnlyLayout());
+ const next = reconcileLayout(saved, ['s1'], 's1');
+ const root = next.root as SplitNode;
+ expect(root.kind).toBe('split');
+ expect(root.dir).toBe('row');
+ expect(root.ratio).toBe(CHAT_SEED_RATIO);
+ expect((root.a as LeafNode).tabs.map((t) => t.panel)).toEqual(['chat:s1']);
+ // The old panel arrangement survives untouched on the other side.
+ const panels = leavesOf(root.b).flatMap((l) => l.tabs.map((t) => t.panel));
+ expect(panels).toEqual(['plan', 'git', 'term']);
+ });
+
+ it('drops chat tiles for dead sessions and keeps live ones', () => {
+ const layout = openChatTab(openChatTab(dockOnlyLayout(), null, 'dead'), null, 'live');
+ const next = reconcileLayout(serializeLayout(layout), ['live'], 'live');
+ expect(chatSessionsIn(next)).toEqual(['live']);
+ });
+
+ it('re-seeds one chat leaf when every persisted chat session is dead', () => {
+ const layout = openChatTab(dockOnlyLayout(), null, 'old-run');
+ const next = reconcileLayout(serializeLayout(layout), ['fresh'], 'fresh');
+ expect(chatSessionsIn(next)).toEqual(['fresh']);
+ });
+
+ it('falls back to a single chat leaf for garbage or absent layouts', () => {
+ for (const raw of [null, 'junk', { version: 99 }]) {
+ const next = reconcileLayout(raw, ['s1'], 's1');
+ expect(next.root?.kind).toBe('leaf');
+ expect((next.root as LeafNode).tabs.map((t) => t.panel)).toEqual(['chat:s1']);
+ }
+ });
+
+ it('yields an empty canvas when there is no session to seed', () => {
+ expect(reconcileLayout(null, [], null).root).toBeNull();
+ });
+
+ it('keeps a valid layout (chat tile alive) byte-identical, maximize included', () => {
+ const base = openChatTab(dockOnlyLayout(), null, 's1');
+ const maxed = toggleMaximize(base, leavesOf(base.root)[0].id);
+ const next = reconcileLayout(JSON.parse(JSON.stringify(serializeLayout(maxed))), ['s1'], 's1');
+ expect(next).toEqual(maxed);
+ });
+});
diff --git a/src/lib/workbench/canvas.ts b/src/lib/workbench/canvas.ts
new file mode 100644
index 0000000..f497802
--- /dev/null
+++ b/src/lib/workbench/canvas.ts
@@ -0,0 +1,84 @@
+// Unified canvas tabs: everything right of the navigator is ONE mosaic whose
+// tabs are chat sessions (`chat:
`), tool panels (plan / git / term
+// / …), native TUI tabs (`tui:`) and the audit pane. Pure data —
+// layout transforms come from tiles.ts, this module only adds the chat-tab
+// naming plus the reconcile/migration step run when a workspace loads.
+
+import {
+ closeTab,
+ deserializeLayout,
+ emptyLayout,
+ leavesOf,
+ openTab,
+ singleLeafLayout,
+ wrapRoot,
+ type TileLayout,
+ type TileTab
+} from './tiles';
+
+export const CHAT_PREFIX = 'chat:';
+
+/** A chat tile's share of the canvas when grafted beside an old dock layout. */
+export const CHAT_SEED_RATIO = 0.58;
+
+/** Panel kind (and tab id) of a session's chat tile — one tile per session,
+ * so the id can be derived from the session id. */
+export function chatPanel(sessionId: string): string {
+ return `${CHAT_PREFIX}${sessionId}`;
+}
+
+/** The session id a `chat:*` panel kind renders, or null for any other kind. */
+export function chatSessionOf(panel: string): string | null {
+ return panel.startsWith(CHAT_PREFIX) && panel.length > CHAT_PREFIX.length
+ ? panel.slice(CHAT_PREFIX.length)
+ : null;
+}
+
+export function chatTab(sessionId: string): TileTab {
+ return { id: chatPanel(sessionId), panel: chatPanel(sessionId) };
+}
+
+/** Session ids of every chat tile in the layout (DFS / visual order). */
+export function chatSessionsIn(layout: TileLayout): string[] {
+ return leavesOf(layout.root)
+ .flatMap((l) => l.tabs)
+ .map((t) => chatSessionOf(t.panel))
+ .filter((s): s is string => s !== null);
+}
+
+/** Open (or re-activate) the chat tile for `sessionId`, landing in `leafId`. */
+export function openChatTab(
+ layout: TileLayout,
+ leafId: string | null,
+ sessionId: string
+): TileLayout {
+ return openTab(layout, leafId, chatTab(sessionId));
+}
+
+/**
+ * Build the canvas from a persisted layout blob when a workspace loads:
+ * - chat tiles whose session no longer exists this run are dropped (session
+ * ids are minted per run, so most restarts land here);
+ * - a layout left without any chat tile gets one seeded for `seedSessionId` —
+ * an old dock-only layout keeps its panel arrangement and gains a chat leaf
+ * on the left (the pre-canvas shape, chat | panels);
+ * - garbage / absent input falls back to a single chat leaf (or an empty
+ * canvas when there is no session to seed).
+ */
+export function reconcileLayout(
+ raw: unknown,
+ liveSessionIds: string[],
+ seedSessionId: string | null
+): TileLayout {
+ let layout = deserializeLayout(raw) ?? emptyLayout();
+ const live = new Set(liveSessionIds);
+ for (const leaf of leavesOf(layout.root)) {
+ for (const tab of leaf.tabs) {
+ const sid = chatSessionOf(tab.panel);
+ if (sid && !live.has(sid)) layout = closeTab(layout, tab.id);
+ }
+ }
+ if (!seedSessionId || chatSessionsIn(layout).length) return layout;
+ if (!layout.root) return singleLeafLayout([chatTab(seedSessionId)]);
+ return wrapRoot(layout, 'left', chatTab(seedSessionId), CHAT_SEED_RATIO);
+}
diff --git a/src/lib/workbench/tiles.test.ts b/src/lib/workbench/tiles.test.ts
index 6e87b38..7097dbf 100644
--- a/src/lib/workbench/tiles.test.ts
+++ b/src/lib/workbench/tiles.test.ts
@@ -14,6 +14,7 @@ import {
singleLeafLayout,
splitLeaf,
toggleMaximize,
+ wrapRoot,
LAYOUT_VERSION,
RATIO_MAX,
RATIO_MIN,
@@ -181,6 +182,34 @@ describe('move', () => {
});
});
+describe('wrapRoot', () => {
+ it('grafts a fresh leaf before the whole tree for left/top', () => {
+ const { layout } = twoLeaves('right');
+ const next = wrapRoot(layout, 'left', tab('z'), 0.6);
+ const root = next.root as SplitNode;
+ expect(root.kind).toBe('split');
+ expect(root.dir).toBe('row');
+ expect(root.ratio).toBe(0.6);
+ expect((root.a as LeafNode).tabs.map((t) => t.id)).toEqual(['z']);
+ expect(root.b).toBe(layout.root); // untouched subtree keeps identity
+ });
+
+ it('puts the fresh leaf after the tree for right/bottom, ratio still its share', () => {
+ const layout = singleLeafLayout([tab('a')]);
+ const next = wrapRoot(layout, 'bottom', tab('z'), 0.3);
+ const root = next.root as SplitNode;
+ expect(root.dir).toBe('col');
+ expect(root.ratio).toBeCloseTo(0.7);
+ expect((root.b as LeafNode).tabs.map((t) => t.id)).toEqual(['z']);
+ });
+
+ it('turns an empty tree into a single leaf', () => {
+ const next = wrapRoot(emptyLayout(), 'left', tab('z'));
+ expect(next.root?.kind).toBe('leaf');
+ expect((next.root as LeafNode).tabs.map((t) => t.id)).toEqual(['z']);
+ });
+});
+
describe('resize', () => {
it('sets the split ratio', () => {
const { layout } = twoLeaves('right');
diff --git a/src/lib/workbench/tiles.ts b/src/lib/workbench/tiles.ts
index 75a7d17..ea2252b 100644
--- a/src/lib/workbench/tiles.ts
+++ b/src/lib/workbench/tiles.ts
@@ -198,6 +198,31 @@ export function splitLeaf(
};
}
+/** Split the whole tree against a fresh leaf holding `tab` (left/top puts the
+ * new leaf first); `ratio` is the fresh leaf's share. Used to graft a primary
+ * pane onto a restored layout (e.g. a chat leaf beside an old dock-only
+ * arrangement). An empty tree just becomes that single leaf. */
+export function wrapRoot(
+ layout: TileLayout,
+ zone: Exclude,
+ tab: TileTab,
+ ratio = 0.5
+): TileLayout {
+ if (!layout.root) return { root: makeLeaf([tab]), maximized: null };
+ const fresh = makeLeaf([tab]);
+ const dir: SplitDir = zone === 'left' || zone === 'right' ? 'row' : 'col';
+ const first = zone === 'left' || zone === 'top';
+ const split: SplitNode = {
+ kind: 'split',
+ id: newId('s'),
+ dir,
+ ratio: clampRatio(first ? ratio : 1 - ratio),
+ a: first ? fresh : layout.root,
+ b: first ? layout.root : fresh
+ };
+ return { root: split, maximized: layout.maximized };
+}
+
/**
* Move `tabId` onto `targetLeafId`: 'center' joins that stack (or moves the tab
* to the stack's end when it is already there), an edge zone splits the target
diff --git a/src/lib/workbench/workspaces.ts b/src/lib/workbench/workspaces.ts
index 23e7de7..bd0eb62 100644
--- a/src/lib/workbench/workspaces.ts
+++ b/src/lib/workbench/workspaces.ts
@@ -1,7 +1,8 @@
// Workspace model + on-disk format. A workspace owns a set of projects (the
-// existing SavedProject shape, unchanged) plus its dock tile layout; the file
-// holds every workspace and which one is active. Pure data + pure transforms —
-// the reactive store and the Tauri IO live in workspaceStore.svelte.ts.
+// existing SavedProject shape, unchanged) plus its canvas tile layout; the
+// file holds every workspace and which one is active. Pure data + pure
+// transforms — the reactive store and the Tauri IO live in
+// workspaceStore.svelte.ts.
import type { SavedProject } from '$lib/session.svelte';
import { serializeLayout, singleLeafLayout, type SerializedLayout, type TileTab } from './tiles';
@@ -15,7 +16,7 @@ export const LEGACY_PROJECTS_KEY = 'jucode-projects';
export const LEGACY_DOCK_TABS_KEY = 'jucode-dock-tabs';
export const LEGACY_DOCK_ACTIVE_KEY = 'jucode-dock-active';
-/** Dock panel kinds a tile tab may reference (RightDock keeps the icons). */
+/** Tool panel kinds a tile tab may reference (besides chat:/tui: tabs). */
export const DOCK_PANELS = ['plan', 'goal', 'changes', 'turns', 'files', 'git', 'term', 'browser', 'diag'] as const;
export interface WorkspaceEntry {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b256194..b2cfb8f 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,8 +1,8 @@
-
+
-
+
(store.activeId = id)}
onNewProject={addProject}
onNewTask={newTask}
- onNewSession={(p) => newSessionFlow(p)}
+ onNewSession={(p) => store.addSession(p)}
onCloseSession={(id) => store.removeSession(id)}
onCloseProject={removeProject}
onArchiveSession={(id) => store.archiveSession(id)}
@@ -1286,160 +795,69 @@
/>
-
-
- {#if chat}
-
-
- {#if Object.keys(chat.subagents).length}
-
- {#each Object.entries(chat.subagents) as [path, info] (path)}
- {path} · {agentStatus(info.status)}
- {/each}
-
- {/if}
-
- {#if showFind}
-
- {/if}
-
-
-
-
-
- {#if chat.booting && chat.engineState !== 'exited'}
-
-
-
{t('shell.spawning')}
-
-
{t('shell.welcomeTip')}
-
- / {t('shell.hintCommand')}
- @ {t('shell.hintRef')}
- ⌘K {t('shell.hintPalette')}
- {t('shell.hintImage')}
-
-
- {#if !atBottom}
-
- {/if}
-
-
- {#if chat.engineState === 'exited'}
-
-
- {t('shell.engineDown')}
-
-
-
- {/if}
- {#if chat.pendingApproval}
-
- {#key chat.pendingApproval.callId}
-
- {/key}
+
+
+
+
+
+ {#if store.loaded && projects.length === 0}
+
+
JuCode
+
{t('shell.noChat')}
+
+ {:else}
+
+ {#snippet panel(tab)}
+ {@const sid = chatSessionOf(tab.panel)}
+ {@const tui = tuiBackendOf(tab.panel)}
+ {#if sid}
+ {@const sess = sessionMap.get(sid)}
+ {#if sess}
+
+ {:else}
+ {t('shell.chatGone')}
+ {/if}
+ {:else if tab.panel === 'plan'}
+ {:else if tab.panel === 'goal'}
+ {:else if tab.panel === 'changes'} chat && (chat.changedFiles = chat.changedFiles.filter((x) => x !== p))} />
+ {:else if tab.panel === 'turns'}
+ {:else if tab.panel === 'files'}
+ {:else if tab.panel === 'git'} openTaskProject(path, meta)} onTaskRemoved={closeTaskProject} />
+ {:else if tab.panel === 'term'}
+ {:else if tab.panel === 'browser'}
+ {:else if tab.panel === 'diag'}
+ {:else if tab.panel === 'audit'}
+ {:else if tui} { settingsInitial = 'behavior'; showSettings = true; }} />
+ {/if}
+ {/snippet}
+
{/if}
-
- {#if chat.rateLimit}
-
(chat.rateLimit = null)} />
- {/if}
-
-
-
- send({ op: 'steer' })}
- onPick={pickFiles}
- onScreenshot={screenshot}
- onRecord={toggleRecord}
- onModel={openModelPicker}
- onModelSelect={selectRow}
- onModelEffort={setEffort}
- onModelClose={() => chat?.closePicker()}
- modelRows={filteredRows}
- modelActive={activeModel}
- modelTitle={pickerTitle}
- modelSearch={showPickerSearch}
- {backendLocked}
- onBackend={(b, acpAgent) => store.switchBackend(activeId, b, acpAgent)}
- bind:pickerQuery
- bind:pickerSelIdx={selIdx}
- onEffort={chooseEffort}
- onApproval={setApprovalMode}
- />
-
- {:else}
-
-
JuCode
-
{t('shell.noChat')}
-
-
- {/if}
-
-
-
- {#if editorStore.visible}
-
-
- {/if}
-
-
-
-
+
{#if showSettings}
{ showSettings = false; showMarket = true; }} onClose={() => { showSettings = false; settingsInitial = 'overview'; loadProviders(); }} />
@@ -1464,54 +882,6 @@
/>
{/if}
- {#if chat?.trustPrompt}
-
-
-
{t('shell.trustQuestion')}
-
-
{t('shell.trustBody')}
-
{chat.trustPrompt.repoRoot ?? chat.trustPrompt.cwd}
-
-
-
- {#if chat.trustPrompt.repoRoot}{/if}
-
-
-
-
e.target === e.currentTarget && chat && (chat.pendingRewind = null)}>
-
-
{t('shell.rewindQuestion')}
-
-
{@html t('shell.rewindBody')}
-
{chat.pendingRewind.text.slice(0, 120)}
-
-
-
-
-
-
-