WIP

client/src/lib/stores/sessions.ts

@@ -44,6 +44,14 @@ function createSessionsStore() {
 				update((s) => ({ ...s, error: (e as Error).message }));
 			}
 		},
+		async create(data: Partial<Session> = {}): Promise<Session> {
+			const session = await api.createSession(data);
+			update((s) => ({
+				...s,
+				sessions: [session, ...s.sessions]
+			}));
+			return session;
+		},
 		updateSession(id: string, data: Partial<Session>) {
 			update((s) => ({
 				...s,

client/src/routes/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { sessions, sortedSessions, runningSessions } from '$lib/stores/sessions';
 	import { api, type DiscoveredSession } from '$lib/api';
 	import SessionCard from '$lib/components/SessionCard.svelte';
@@ -6,11 +7,24 @@
 	let discovering = false;
 	let discoveredSessions: DiscoveredSession[] = [];
 	let showDiscovery = false;
+	let creating = false;
 
 	async function refresh() {
 		await sessions.load();
 	}
 
+	async function createNewSession() {
+		creating = true;
+		try {
+			const session = await sessions.create({ provider: 'claude' });
+			await goto(`/session/${session.id}`);
+		} catch (e) {
+			console.error('Failed to create session:', e);
+		} finally {
+			creating = false;
+		}
+	}
+
 	async function discoverSessions() {
 		discovering = true;
 		try {
@@ -50,6 +64,24 @@
 		</div>
 
 		<div class="flex items-center gap-2">
+			<button
+				on:click={createNewSession}
+				disabled={creating}
+				class="btn btn-primary p-2"
+				title="New Session"
+			>
+				{#if creating}
+					<svg class="h-5 w-5 animate-spin" fill="none" viewBox="0 0 24 24">
+						<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+						<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+					</svg>
+				{:else}
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+					</svg>
+				{/if}
+			</button>
+
 			<button
 				on:click={refresh}
 				disabled={$sessions.loading}
@@ -75,7 +107,7 @@
 			<button
 				on:click={discoverSessions}
 				disabled={discovering}
-				class="btn btn-primary"
+				class="btn btn-secondary"
 			>
 				{#if discovering}
 					<span class="animate-spin inline-block mr-2">
@@ -158,7 +190,7 @@
 				</svg>
 				<h2 class="text-lg font-medium text-zinc-300 mb-2">No sessions yet</h2>
 				<p class="text-sm mb-4">
-					Click "Discover" to find existing Claude Code or OpenCode sessions on your machine.
+					Click the + button to start a new chat, or "Discover" to find existing Claude Code sessions.
 				</p>
 			</div>
 		</div>

client/src/routes/session/[id]/+page.svelte

@@ -29,8 +29,9 @@
 	$: session = $activeSession.session;
 	$: externalId = session?.['external-id'] || session?.externalId || '';
 	$: workingDir = session?.['working-dir'] || session?.workingDir || '';
-	$: shortId = externalId.slice(0, 8);
+	$: shortId = externalId ? externalId.slice(0, 8) : session?.id?.slice(0, 8) || '';
 	$: projectName = workingDir.split('/').pop() || '';
+	$: isNewSession = !externalId && $activeSession.messages.length === 0;
 
 	const statusColors: Record<string, string> = {
 		idle: 'bg-zinc-600',