From e7d8cdbd68954034d2a4f6979a233b216212967b Mon Sep 17 00:00:00 2001
From: Adam Malczewski <github@tradam.dev>
Date: Thu, 25 Jun 2026 10:55:51 +0900
Subject: feat: workspaces shell + cwd-lsp rename + mcp/settings/system-prompt
 features + app wiring

- workspaces: URL-driven conversation grouping (home listing at /, routing,
  store, http adapter, WorkspaceCard) wired into the App.svelte shell
- rename features/workspace -> features/cwd-lsp (the cwd/lsp status feature)
- new features: mcp (status view), settings (chat-limit field), system-prompt
  (prompt builder), all rendered via the generic surface host
- chat: store + ChatView updates
- tabs: tabs-store updates
- app wiring: ErrorModal (full-screen error surface), app/App.svelte + store.svelte

This commit makes HEAD typecheck clean for the first time: the prior HEAD
(dfe1711) imported features/settings from app/App.svelte but never committed
the feature, so only the full working tree was green.
---
 src/features/system-prompt/index.ts                |  17 ++
 .../system-prompt/logic/view-model.test.ts         |  90 ++++++++
 src/features/system-prompt/logic/view-model.ts     | 106 +++++++++
 .../system-prompt/ui/SystemPromptBuilder.svelte    | 242 +++++++++++++++++++++
 4 files changed, 455 insertions(+)
 create mode 100644 src/features/system-prompt/index.ts
 create mode 100644 src/features/system-prompt/logic/view-model.test.ts
 create mode 100644 src/features/system-prompt/logic/view-model.ts
 create mode 100644 src/features/system-prompt/ui/SystemPromptBuilder.svelte

(limited to 'src/features/system-prompt')

diff --git a/src/features/system-prompt/index.ts b/src/features/system-prompt/index.ts
new file mode 100644
index 0000000..7c77675
--- /dev/null
+++ b/src/features/system-prompt/index.ts
@@ -0,0 +1,17 @@
+export type {
+	LoadSystemPrompt,
+	LoadSystemPromptVariables,
+	SaveSystemPrompt,
+	SystemPromptLoadResult,
+	SystemPromptSaveResult,
+	SystemPromptVariablesResult,
+	VariableGroup,
+} from "./logic/view-model";
+export { buildTag, groupVariables, insertTag } from "./logic/view-model";
+export { default as SystemPromptBuilder } from "./ui/SystemPromptBuilder.svelte";
+
+/** Public module manifest — aggregated by the shell's "Loaded Modules" view. */
+export const manifest = {
+	name: "system-prompt",
+	description: "Global system prompt template builder with variable placeholders",
+} as const;
diff --git a/src/features/system-prompt/logic/view-model.test.ts b/src/features/system-prompt/logic/view-model.test.ts
new file mode 100644
index 0000000..a0736cc
--- /dev/null
+++ b/src/features/system-prompt/logic/view-model.test.ts
@@ -0,0 +1,90 @@
+import type { SystemPromptVariable } from "@dispatch/transport-contract";
+import { describe, expect, it } from "vitest";
+import {
+	buildIfNotTag,
+	buildIfTag,
+	buildTag,
+	groupVariables,
+	insertTag,
+	isDynamicVariable,
+} from "./view-model";
+
+describe("system-prompt view-model", () => {
+	describe("buildTag", () => {
+		it("builds a variable placeholder", () => {
+			expect(buildTag("system", "time")).toBe("[system:time]");
+		});
+	});
+
+	describe("buildIfTag", () => {
+		it("builds an opening conditional tag", () => {
+			expect(buildIfTag("file", "AGENTS.md")).toBe("[if file:AGENTS.md]");
+		});
+	});
+
+	describe("buildIfNotTag", () => {
+		it("builds a negated opening conditional tag", () => {
+			expect(buildIfNotTag("prompt", "cwd")).toBe("[if !prompt:cwd]");
+		});
+	});
+
+	describe("insertTag", () => {
+		it("inserts a tag at the cursor position", () => {
+			expect(insertTag("Hello world", "[system:time]", 5, 5)).toEqual({
+				template: "Hello[system:time] world",
+				cursor: 18,
+			});
+		});
+
+		it("replaces the selected text", () => {
+			const tag = buildTag("file", "README.md");
+			expect(insertTag("Hello world", tag, 6, 11)).toEqual({
+				template: `Hello ${tag}`,
+				cursor: 6 + tag.length,
+			});
+		});
+
+		it("inserts at the end", () => {
+			const tag = buildTag("git", "branch");
+			expect(insertTag("", tag, 0, 0)).toEqual({
+				template: tag,
+				cursor: tag.length,
+			});
+		});
+	});
+
+	describe("groupVariables", () => {
+		it("groups by type in first-appearing order", () => {
+			const variables: SystemPromptVariable[] = [
+				{ type: "system", name: "time", description: "" },
+				{ type: "prompt", name: "cwd", description: "" },
+				{ type: "system", name: "date", description: "" },
+				{ type: "git", name: "branch", description: "" },
+			];
+			const groups = groupVariables(variables);
+			expect(groups.map((g) => g.type)).toEqual(["system", "prompt", "git"]);
+			expect(groups[0]?.variables.map((v) => v.name)).toEqual(["time", "date"]);
+			expect(groups[1]?.variables.map((v) => v.name)).toEqual(["cwd"]);
+			expect(groups[2]?.variables.map((v) => v.name)).toEqual(["branch"]);
+		});
+
+		it("returns an empty array when no variables", () => {
+			expect(groupVariables([])).toEqual([]);
+		});
+	});
+
+	describe("isDynamicVariable", () => {
+		it("returns true when dynamic is true", () => {
+			expect(
+				isDynamicVariable({ type: "file", name: "path", description: "", dynamic: true }),
+			).toBe(true);
+		});
+
+		it("returns false when dynamic is missing or false", () => {
+			expect(isDynamicVariable({ type: "system", name: "time", description: "" })).toBe(false);
+			expect(
+				isDynamicVariable({ type: "system", name: "time", description: "", dynamic: false }),
+			).toBe(false);
+		});
+	});
+});
diff --git a/src/features/system-prompt/logic/view-model.ts b/src/features/system-prompt/logic/view-model.ts
new file mode 100644
index 0000000..6924208
--- /dev/null
+++ b/src/features/system-prompt/logic/view-model.ts
@@ -0,0 +1,106 @@
+import type { SystemPromptVariable } from "@dispatch/transport-contract";
+
+/**
+ * Pure core for the system prompt builder — zero DOM, zero effects, zero Svelte.
+ *
+ * The system prompt is a global template, stored on the backend, resolved once
+ * per conversation at first turn (then persisted for prompt-cache safety). The
+ * frontend builder exposes the template text plus a palette of available
+ * variables; clicking a variable inserts `[type:name]` at the cursor. This module
+ * holds the pure logic: tag construction, insertion into a template, and
+ * grouping of variables. The HTTP edge is injected via the ports defined below.
+ */
+
+// ── Injected ports (composition root adapts the store to these shapes) ─────────
+
+export type SystemPromptLoadResult =
+	| { readonly ok: true; readonly template: string }
+	| { readonly ok: false; readonly error: string };
+
+export type LoadSystemPrompt = () => Promise<SystemPromptLoadResult>;
+
+export type SystemPromptSaveResult =
+	| { readonly ok: true; readonly template: string }
+	| { readonly ok: false; readonly error: string };
+
+export type SaveSystemPrompt = (template: string) => Promise<SystemPromptSaveResult>;
+
+export type SystemPromptVariablesResult =
+	| { readonly ok: true; readonly variables: readonly SystemPromptVariable[] }
+	| { readonly ok: false; readonly error: string };
+
+export type LoadSystemPromptVariables = () => Promise<SystemPromptVariablesResult>;
+
+// ── Template helpers ──────────────────────────────────────────────────────────
+
+/** Build the literal placeholder `[type:name]` for a variable. */
+export function buildTag(type: string, name: string): string {
+	return `[${type}:${name}]`;
+}
+
+/** Build the literal placeholder `[if type:name]` for a conditional block. */
+export function buildIfTag(type: string, name: string): string {
+	return `[if ${type}:${name}]`;
+}
+
+/** Build the literal placeholder `[if !type:name]` for a negated conditional block. */
+export function buildIfNotTag(type: string, name: string): string {
+	return `[if !${type}:${name}]`;
+}
+
+export interface Insertion {
+	/** Template text after insertion. */
+	template: string;
+	/** New cursor position (caret index) after insertion. */
+	cursor: number;
+}
+
+/**
+ * Insert `tag` into `template` at the current selection range. Replaces any
+ * selected text. Returns both the new template and the new cursor position so
+ * the caller can restore the caret after the inserted tag.
+ */
+export function insertTag(
+	template: string,
+	tag: string,
+	selectionStart: number,
+	selectionEnd: number,
+): Insertion {
+	const before = template.slice(0, selectionStart);
+	const after = template.slice(selectionEnd);
+	const next = before + tag + after;
+	return { template: next, cursor: selectionStart + tag.length };
+}
+
+// ── Variable grouping ─────────────────────────────────────────────────────────
+
+export interface VariableGroup {
+	/** Variable type (e.g. `"system"`, `"file"`, `"prompt"`, `"git"`). */
+	readonly type: string;
+	/** Variables of this type. */
+	readonly variables: readonly SystemPromptVariable[];
+}
+
+/**
+ * Group variables by type, preserving the order of first appearance within each
+ * group and the order of first-appearing types.
+ */
+export function groupVariables(
+	variables: readonly SystemPromptVariable[],
+): readonly VariableGroup[] {
+	const order: string[] = [];
+	const map = new Map<string, SystemPromptVariable[]>();
+	for (const v of variables) {
+		if (!map.has(v.type)) {
+			map.set(v.type, []);
+			order.push(v.type);
+		}
+		map.get(v.type)?.push(v);
+	}
+	return order.map((type) => ({ type, variables: map.get(type) ?? [] }));
+}
+
+/** Whether a variable is "dynamic" (any name is valid, e.g. `file:<path>`). */
+export function isDynamicVariable(variable: SystemPromptVariable): boolean {
+	return variable.dynamic === true;
+}
diff --git a/src/features/system-prompt/ui/SystemPromptBuilder.svelte b/src/features/system-prompt/ui/SystemPromptBuilder.svelte
new file mode 100644
index 0000000..4e07317
--- /dev/null
+++ b/src/features/system-prompt/ui/SystemPromptBuilder.svelte
@@ -0,0 +1,242 @@
+<script lang="ts">
+	import type { SystemPromptVariable } from "@dispatch/transport-contract";
+	import { tick, untrack } from "svelte";
+	import {
+		buildTag,
+		groupVariables,
+		insertTag,
+		isDynamicVariable,
+		type LoadSystemPrompt,
+		type LoadSystemPromptVariables,
+		type SaveSystemPrompt,
+	} from "../logic/view-model";
+
+	let {
+		loadPrompt,
+		savePrompt,
+		loadVariables,
+		onClose,
+	}: {
+		loadPrompt: LoadSystemPrompt;
+		savePrompt: SaveSystemPrompt;
+		loadVariables: LoadSystemPromptVariables;
+		onClose: () => void;
+	} = $props();
+
+	let value = $state("");
+	let loadedTemplate = $state("");
+	let loading = $state(false);
+	let saving = $state(false);
+	let error = $state<string | null>(null);
+	let justSaved = $state(false);
+	let variables = $state<readonly SystemPromptVariable[]>([]);
+	let filePath = $state("");
+	let textarea: HTMLTextAreaElement | null = null;
+
+	const groups = $derived(groupVariables(variables));
+	const hasChanges = $derived(value !== loadedTemplate);
+
+	async function load() {
+		untrack(() => {
+			loading = true;
+			error = null;
+		});
+
+		const [templateResult, variablesResult] = await Promise.all([loadPrompt(), loadVariables()]);
+
+		loading = false;
+
+		if (!templateResult.ok || !variablesResult.ok) {
+			const parts: string[] = [];
+			if (!templateResult.ok) parts.push(templateResult.error);
+			if (!variablesResult.ok) parts.push(variablesResult.error);
+			error = parts.join("; ");
+			return;
+		}
+
+		value = templateResult.template;
+		loadedTemplate = templateResult.template;
+		variables = variablesResult.variables;
+	}
+
+	async function save() {
+		if (saving || loading) return;
+		saving = true;
+		error = null;
+		justSaved = false;
+		const result = await savePrompt(value);
+		saving = false;
+		if (!result.ok) {
+			error = result.error;
+			return;
+		}
+		loadedTemplate = result.template;
+		value = result.template;
+		justSaved = true;
+	}
+
+	function reset() {
+		value = loadedTemplate;
+		error = null;
+		justSaved = false;
+	}
+
+	async function insertTagAtCursor(tag: string) {
+		if (textarea === null) return;
+		const start = textarea.selectionStart;
+		const end = textarea.selectionEnd;
+		const insertion = insertTag(value, tag, start, end);
+		value = insertion.template;
+		await tick();
+		textarea.focus();
+		textarea.setSelectionRange(insertion.cursor, insertion.cursor);
+	}
+
+	async function insertFileVariable(type: string) {
+		const path = filePath.trim();
+		if (path.length === 0) return;
+		await insertTagAtCursor(buildTag(type, path));
+		filePath = "";
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === "Escape") onClose();
+	}
+
+	// Load on mount once.
+	$effect(() => {
+		void load();
+	});
+</script>
+
+<svelte:window onkeydown={onKeydown} />
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+	role="dialog"
+	aria-modal="true"
+	aria-label="System prompt builder"
+	tabindex="-1"
+	onclick={onClose}
+	onkeydown={onKeydown}
+>
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+	<div
+		class="flex h-[85vh] w-full max-w-6xl flex-col overflow-hidden rounded-box bg-base-100 shadow-2xl"
+		onclick={(e) => e.stopPropagation()}
+	>
+		<!-- Header -->
+		<div class="flex shrink-0 items-center justify-between border-b border-base-300 px-4 py-3">
+			<div class="flex items-center gap-2">
+				<h2 class="text-sm font-semibold">System Prompt</h2>
+				{#if loading}
+					<span class="loading loading-spinner loading-xs"></span>
+				{/if}
+			</div>
+			<button
+				type="button"
+				class="btn btn-ghost btn-sm btn-square"
+				onclick={onClose}
+				aria-label="Close system prompt builder"
+			>
+				✕
+			</button>
+		</div>
+
+		<!-- Body: half editor / half variables -->
+		<div class="flex min-h-0 flex-1">
+			<!-- Left: template editor -->
+			<div class="flex w-1/2 min-w-0 flex-col gap-2 border-r border-base-300 p-4">
+				<textarea
+					bind:this={textarea}
+					bind:value
+					class="textarea textarea-bordered min-h-0 w-full flex-1 resize-none font-mono text-xs"
+					placeholder={loading ? "Loading template..." : "Edit the global system prompt template..."}
+					disabled={loading}
+					aria-label="System prompt template"
+				></textarea>
+
+				<div class="flex shrink-0 items-center gap-2">
+					<button
+						type="button"
+						class="btn btn-primary btn-sm"
+						disabled={loading || saving || !hasChanges}
+						onclick={save}
+					>
+						{#if saving}
+							<span class="loading loading-spinner loading-xs"></span>
+						{:else}
+							Save
+						{/if}
+					</button>
+					<button
+						type="button"
+						class="btn btn-ghost btn-sm"
+						disabled={loading || !hasChanges}
+						onclick={reset}
+					>
+						Reset
+					</button>
+					{#if justSaved && !hasChanges}
+						<span class="text-xs text-success">Saved.</span>
+					{:else if hasChanges}
+						<span class="text-xs opacity-60">Unsaved changes</span>
+					{/if}
+				</div>
+
+				{#if error}
+					<p class="shrink-0 text-xs text-error">{error}</p>
+				{/if}
+			</div>
+
+			<!-- Right: variable palette -->
+			<div class="flex w-1/2 min-w-0 flex-col overflow-y-auto p-4">
+				<h3 class="mb-2 shrink-0 text-xs font-semibold uppercase opacity-60">Variables</h3>
+				{#if groups.length === 0 && !loading}
+					<p class="text-xs opacity-60">No variables available.</p>
+				{/if}
+				<div class="flex flex-col gap-3">
+					{#each groups as group (group.type)}
+						<div class="rounded-box bg-base-200 p-3">
+							<span class="text-xs font-semibold uppercase opacity-70">{group.type}</span>
+							<div class="mt-2 flex flex-wrap gap-1">
+								{#each group.variables as variable (variable.type + variable.name)}
+									{#if isDynamicVariable(variable)}
+										<div class="flex items-center gap-1">
+											<input
+												type="text"
+												class="input input-bordered input-xs w-32 font-mono"
+												bind:value={filePath}
+												placeholder={variable.name}
+												onkeydown={(e) => {
+													if (e.key === "Enter") void insertFileVariable(variable.type);
+												}}
+											/>
+											<button
+												type="button"
+												class="btn btn-xs"
+												onclick={() => void insertFileVariable(variable.type)}
+											>
+												Insert
+											</button>
+										</div>
+									{:else}
+										<button
+											type="button"
+											class="btn btn-xs"
+											title={variable.description}
+											onclick={() => void insertTagAtCursor(buildTag(variable.type, variable.name))}
+										>
+											{variable.name}
+										</button>
+									{/if}
+								{/each}
+							</div>
+						</div>
+					{/each}
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
-- 
cgit v1.2.3