1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
|
<script module lang="ts">
import { registerBuiltinViews } from "./register-views";
// Register every built-in view ONCE per app load, BEFORE any tile renders.
// The composition root stays the only place store ports are wired: the
// wrappers receive them through `ports` (see `view-ports.ts`).
registerBuiltinViews();
</script>
<script lang="ts">
import type { LayoutTree } from "@dispatch/layout-contract";
import { untrack } from "svelte";
import { createCollapseStore, firstCollapsibleNodeId, TileRoot } from "../features/layout";
import { RunModal, type HeartbeatRunView } from "../features/heartbeat";
import { SystemPromptBuilder } from "../features/system-prompt";
import type { AppStore } from "./store.svelte";
import type { AppViewPorts, ChatViewportBridge } from "./view-ports";
import ErrorModal from "./ErrorModal.svelte";
let { store, onNavigate }: { store: AppStore; onNavigate: (path: string) => void } = $props();
// Modal chrome — app shell state, OUTSIDE the tree (layout-00 decision 2).
let systemPromptModalOpen = $state(false);
// The heartbeat run currently open in the fullscreen run-chat modal (null =
// closed). Holds a snapshot run view; the modal re-mounts per run (keyed).
let heartbeatRun = $state<HeartbeatRunView | null>(null);
// --- The layout tree (plan 02): the ACTIVE workspace's tile tree, served
// by the backend's layout provider plugin when one is active (probed on
// boot, on workspace switch, and on extensions-changed; `layout` WS pushes
// re-render live) and the built-in DEFAULT_LAYOUT otherwise (no-provider
// mode: edits are ephemeral, logged once, no error UI). The store owns the
// whole lifecycle; the shell just renders `tree` and forwards edits.
// `dispatch.sidebar.views` is RETIRED (D-L4): its only reader is the store's
// one-way §2.7 migration.
const tree = $derived(store.layout.tree);
function handleTreeChange(next: LayoutTree): void {
store.layout.onTreeChange(next);
}
// --- Sidebar collapse: renderer chrome state (per-node-id open/closed),
// persisted with the SAME key/semantics as today (`dispatch.sidebar.open`, a
// bare boolean, default open on wide screens). The toggle drives the tree's
// single collapsible node ("side" on the default tree; generically the first
// collapsible split child).
const collapse = createCollapseStore({
storage: untrack(() => store.storage),
viewportWidth: typeof window !== "undefined" ? window.innerWidth : undefined,
});
const collapseState = $derived($collapse);
const collapseKey = $derived(firstCollapsibleNodeId(tree));
const sidebarOpen = $derived(
collapseKey !== null ? (collapseState.openByNode[collapseKey] ?? collapseState.defaultOpen) : false,
);
function toggleSidebar(): void {
if (collapseKey !== null) collapse.toggle(collapseKey);
}
// --- The port bag every view wrapper receives. This is the ONE place the
// store's ports are wired (AGENTS.md: composition root). `store` is read
// through a getter so a swapped store prop stays reactive through it.
const chatViewport: ChatViewportBridge = { el: null };
const viewPorts: AppViewPorts = {
get store() {
return store;
},
chatViewport,
openSystemPromptBuilder: () => (systemPromptModalOpen = true),
openHeartbeatRun: (run) => (heartbeatRun = run),
};
// Top-bar title: the active tab's title, or "New Tab" when no tab is active
// (a fresh, unstarted draft — the conversation hasn't been sent yet, so no
// tab exists). Pure-derived from the (workspace-filtered) tab set + the
// active id; reflects whichever tab is selected in the sidebar's Tabs view.
const NEW_TAB_TITLE = "New Tab";
const topBarTitle = $derived.by(() => {
const id = store.activeConversationId;
if (id === null) return NEW_TAB_TITLE;
const tab = store.tabs.find((t) => t.conversationId === id);
return tab?.title ?? NEW_TAB_TITLE;
});
function handleInvokeHome(): void {
onNavigate("/");
}
</script>
<main class="h-app relative flex flex-col overflow-hidden">
<!-- Slim header: the tab bar moved into the sidebar (the "Tabs" view), so
the top row now shows the active tab's title on the left (or "New Tab"
for an unstarted draft), with the build version + sidebar toggle on
the right. CHROME — stays outside the tree (layout-00 decision 2).
`.app-navbar` (app.css): the Artix wiki's darkstrap navbar look. -->
<div class="app-navbar flex items-center justify-between gap-2 px-2 pt-[calc(0.5rem+5px)] pb-2">
<span
class="app-navbar-engraved min-w-0 flex-1 shrink truncate pl-2 text-sm font-semibold text-primary"
data-testid="top-bar-title"
title={topBarTitle}
aria-label="Active conversation title"
>
{topBarTitle}
</span>
<span
class="shrink-0 select-none px-1 font-mono text-[10px] leading-none text-primary/70"
title="Build version (git short hash)"
>
build: {__APP_VERSION__}
</span>
<a
href="/"
class="btn btn-ghost btn-sm shrink-0 px-2 text-primary"
aria-label="Back to dashboard"
title="Back to dashboard"
onclick={(e) => {
e.preventDefault();
handleInvokeHome();
}}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-4"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.5a.75.75 0 0 0 .75.75h4.5a.75.75 0 0 0 .75-.75V15a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75v5.25a.75.75 0 0 0 .75.75h4.5a.75.75 0 0 0 .75-.75V9.75M8.25 21h8.25"
/>
</svg>
</a>
{#if collapseKey !== null}
<button
class="btn btn-square btn-ghost btn-sm mx-1 shrink-0 text-primary"
aria-label={sidebarOpen ? "Close sidebar" : "Open sidebar"}
aria-expanded={sidebarOpen}
onclick={toggleSidebar}
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="2"
stroke="currentColor"
class="size-5"
aria-hidden="true"
>
{#if sidebarOpen}
<!-- Sidebar open → chevrons point right -->
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m11.25 4.5 7.5 7.5-7.5 7.5m-7.5-15 7.5 7.5-7.5 7.5"
/>
{:else}
<!-- Sidebar closed → chevrons point left -->
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5"
/>
{/if}
</svg>
</button>
{/if}
</div>
{#if store.lastError}
<div role="alert" class="alert alert-error mx-4 mt-2">
<strong>Error:</strong>
{store.lastError.message}
</div>
{/if}
{#if store.activeChat.error}
<div role="alert" class="alert alert-warning mx-4 mt-2">
<strong>Chat error:</strong>
{store.activeChat.error}
</div>
{/if}
<!-- THE TREE: the tile renderer owns the content region. Tile edits are
applied here and persisted to dispatch.sidebar.views (above). -->
<div class="min-h-0 min-w-0 flex-1">
<TileRoot {tree} {collapse} ports={viewPorts} onTreeChange={handleTreeChange} />
</div>
</main>
{#if store.fatalError}
<ErrorModal error={store.fatalError} onDismiss={() => store.clearFatalError()} />
{/if}
{#if systemPromptModalOpen}
<SystemPromptBuilder
loadPrompt={() => store.loadSystemPrompt()}
savePrompt={(template) => store.setSystemPrompt(template)}
loadVariables={() => store.loadSystemPromptVariables()}
onClose={() => (systemPromptModalOpen = false)}
/>
{/if}
{#if heartbeatRun !== null}
<!-- Keyed per run so switching runs (or re-opening) re-mounts the modal — a
fresh watch store lifecycle per run. The modal owns the live watch
(openChat/closeChat) and the Stop button. -->
{#key heartbeatRun.id}
<RunModal
run={heartbeatRun}
openChat={(conversationId) => store.watchConversation(conversationId)}
closeChat={(conversationId) => store.unwatchConversation(conversationId)}
stopRun={(runId) => store.stopHeartbeatRun(runId)}
onClose={() => (heartbeatRun = null)}
apiBaseUrl={store.httpBase}
/>
{/key}
{/if}
|
