diff --git a/apps/desktop/scripts/smoke-test.mjs b/apps/desktop/scripts/smoke-test.mjs
index b0bfde7afa161cbfd4e664b8e29ae1eececaf044..62884bcde3eed6134d9edfdb845671a2028b5a86 100644
--- a/apps/desktop/scripts/smoke-test.mjs
+++ b/apps/desktop/scripts/smoke-test.mjs
@@ -61,8 +61,8 @@ child.on("exit", () => {
   const fatalPatterns = [
     "Cannot find module",
     "MODULE_NOT_FOUND",
-    "Refused to execute",       // CSP blocking scripts
-    "can't detect preamble",    // @vitejs/plugin-react failure
+    "Refused to execute", // CSP blocking scripts
+    "can't detect preamble", // @vitejs/plugin-react failure
     "Uncaught Error",
     "Uncaught TypeError",
     "Uncaught ReferenceError",
diff --git a/apps/renderer/src/App.tsx b/apps/renderer/src/App.tsx
index 6654da9f809591e06161efe368a0cb427c461eba..a9700312e7ffd163e877dab4e28c96fec578e641 100644
--- a/apps/renderer/src/App.tsx
+++ b/apps/renderer/src/App.tsx
@@ -1,617 +1,60 @@
-import {
-  type FormEvent,
-  type MutableRefObject,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
+import { useEffect, useMemo, useRef } from "react";
 
-import type {
-  ProviderEvent,
-  ProviderKind,
-  ProviderSession,
-} from "@acme/contracts";
+import ChatView from "./components/ChatView";
+import DiffPanel from "./components/DiffPanel";
+import Sidebar from "./components/Sidebar";
+import { readNativeApi } from "./session-logic";
+import { StoreProvider, useStore } from "./store";
 
-type SessionPhase = "disconnected" | "connecting" | "ready" | "running";
-
-interface ChatMessage {
-  id: string;
-  role: "user" | "assistant";
-  text: string;
-  createdAt: string;
-  streaming: boolean;
-}
-
-const PROVIDER_OPTIONS: Array<{
-  value: ProviderKind;
-  label: string;
-  available: boolean;
-}> = [
-  { value: "codex", label: "Codex", available: true },
-  { value: "claudeCode", label: "Claude Code (soon)", available: false },
-];
-
-function readNativeApi() {
-  if (typeof window === "undefined") {
-    return undefined;
-  }
-
-  return window.nativeApi;
-}
-
-function asObject(value: unknown): Record<string, unknown> | undefined {
-  if (!value || typeof value !== "object") {
-    return undefined;
-  }
-
-  return value as Record<string, unknown>;
-}
-
-function asString(value: unknown): string | undefined {
-  return typeof value === "string" ? value : undefined;
-}
-
-function formatTimestamp(isoDate: string): string {
-  return new Intl.DateTimeFormat(undefined, {
-    hour: "numeric",
-    minute: "2-digit",
-    second: "2-digit",
-  }).format(new Date(isoDate));
-}
-
-function derivePhase(session: ProviderSession | null): SessionPhase {
-  if (!session || session.status === "closed") {
-    return "disconnected";
-  }
-
-  if (session.status === "connecting") {
-    return "connecting";
-  }
-
-  if (session.status === "running") {
-    return "running";
-  }
-
-  return "ready";
-}
-
-function evolveSession(
-  previous: ProviderSession,
-  event: ProviderEvent,
-): ProviderSession {
-  const payload = asObject(event.payload);
-
-  if (event.method === "thread/started") {
-    const thread = asObject(payload?.thread);
-    return {
-      ...previous,
-      threadId: asString(thread?.id) ?? event.threadId ?? previous.threadId,
-      updatedAt: event.createdAt,
-    };
-  }
-
-  if (event.method === "turn/started") {
-    const turn = asObject(payload?.turn);
-    return {
-      ...previous,
-      status: "running",
-      activeTurnId: asString(turn?.id) ?? event.turnId ?? previous.activeTurnId,
-      updatedAt: event.createdAt,
-    };
-  }
-
-  if (event.method === "turn/completed") {
-    const turn = asObject(payload?.turn);
-    const status = asString(turn?.status);
-    const turnError = asObject(turn?.error);
-    return {
-      ...previous,
-      status: status === "failed" ? "error" : "ready",
-      activeTurnId: undefined,
-      lastError: asString(turnError?.message) ?? previous.lastError,
-      updatedAt: event.createdAt,
-    };
-  }
-
-  if (event.kind === "error") {
-    return {
-      ...previous,
-      status: "error",
-      lastError: event.message ?? previous.lastError,
-      updatedAt: event.createdAt,
-    };
-  }
-
-  if (event.method === "session/closed" || event.method === "session/exited") {
-    return {
-      ...previous,
-      status: "closed",
-      activeTurnId: undefined,
-      lastError: event.message ?? previous.lastError,
-      updatedAt: event.createdAt,
-    };
-  }
-
-  return {
-    ...previous,
-    updatedAt: event.createdAt,
-  };
-}
-
-function applyEventToMessages(
-  previous: ChatMessage[],
-  event: ProviderEvent,
-  activeAssistantItemRef: MutableRefObject<string | null>,
-): ChatMessage[] {
-  const payload = asObject(event.payload);
-
-  if (event.method === "item/started") {
-    const item = asObject(payload?.item);
-    if (asString(item?.type) !== "agentMessage") {
-      return previous;
-    }
-
-    const itemId = asString(item?.id);
-    if (!itemId) {
-      return previous;
-    }
-
-    activeAssistantItemRef.current = itemId;
-    const seedText = asString(item?.text) ?? "";
-    const filtered = previous.filter((entry) => entry.id !== itemId);
-    return [
-      ...filtered,
-      {
-        id: itemId,
-        role: "assistant",
-        text: seedText,
-        createdAt: event.createdAt,
-        streaming: true,
-      },
-    ];
-  }
-
-  if (event.method === "item/agentMessage/delta") {
-    const itemId = event.itemId ?? asString(payload?.itemId);
-    const delta = event.textDelta ?? asString(payload?.delta) ?? "";
-    if (!itemId || !delta) {
-      return previous;
-    }
-
-    const existingIndex = previous.findIndex((entry) => entry.id === itemId);
-    if (existingIndex === -1) {
-      activeAssistantItemRef.current = itemId;
-      return [
-        ...previous,
-        {
-          id: itemId,
-          role: "assistant",
-          text: delta,
-          createdAt: event.createdAt,
-          streaming: true,
-        },
-      ];
-    }
-
-    const updated = [...previous];
-    const existing = updated[existingIndex];
-    if (!existing) {
-      return previous;
-    }
-    updated[existingIndex] = {
-      ...existing,
-      text: `${existing.text}${delta}`,
-      streaming: true,
-    };
-    return updated;
-  }
-
-  if (event.method === "item/completed") {
-    const item = asObject(payload?.item);
-    if (asString(item?.type) !== "agentMessage") {
-      return previous;
-    }
-
-    const itemId = asString(item?.id);
-    if (!itemId) {
-      return previous;
-    }
-
-    const fullText = asString(item?.text);
-    const existingIndex = previous.findIndex((entry) => entry.id === itemId);
-    if (existingIndex === -1) {
-      return [
-        ...previous,
-        {
-          id: itemId,
-          role: "assistant",
-          text: fullText ?? "",
-          createdAt: event.createdAt,
-          streaming: false,
-        },
-      ];
-    }
-
-    const updated = [...previous];
-    const existing = updated[existingIndex];
-    if (!existing) {
-      return previous;
-    }
-    updated[existingIndex] = {
-      ...existing,
-      text: fullText ?? existing.text,
-      streaming: false,
-    };
-
-    if (activeAssistantItemRef.current === itemId) {
-      activeAssistantItemRef.current = null;
-    }
-
-    return updated;
-  }
-
-  if (event.method === "turn/completed") {
-    return previous.map((entry) => ({ ...entry, streaming: false }));
-  }
-
-  return previous;
-}
-
-export default function App() {
+function EventRouter() {
   const api = useMemo(() => readNativeApi(), []);
-  const [provider, setProvider] = useState<ProviderKind>("codex");
-  const [cwd, setCwd] = useState("");
-  const [model, setModel] = useState("gpt-5.1-codex");
-  const [prompt, setPrompt] = useState("");
-  const [session, setSession] = useState<ProviderSession | null>(null);
-  const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [events, setEvents] = useState<ProviderEvent[]>([]);
-  const [isConnecting, setIsConnecting] = useState(false);
-  const [isSending, setIsSending] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const currentSessionIdRef = useRef<string | null>(null);
+  const { dispatch } = useStore();
   const activeAssistantItemRef = useRef<string | null>(null);
 
   useEffect(() => {
-    currentSessionIdRef.current = session?.sessionId ?? null;
-  }, [session?.sessionId]);
-
-  useEffect(() => {
-    if (!api) {
-      return;
-    }
-
+    if (!api) return;
     return api.providers.onEvent((event) => {
-      const currentSessionId = currentSessionIdRef.current;
-      if (!currentSessionId || currentSessionId !== event.sessionId) {
-        return;
-      }
-
-      setEvents((previous) => [event, ...previous].slice(0, 200));
-      setSession((previous) => {
-        if (!previous || previous.sessionId !== event.sessionId) {
-          return previous;
-        }
-        return evolveSession(previous, event);
+      dispatch({
+        type: "APPLY_EVENT",
+        event,
+        activeAssistantItemRef,
       });
-      setMessages((previous) =>
-        applyEventToMessages(previous, event, activeAssistantItemRef),
-      );
-
-      if (event.kind === "error" && event.message) {
-        setError(event.message);
-      }
     });
-  }, [api]);
-
-  const phase = derivePhase(session);
-
-  const onConnect = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!api || provider !== "codex" || isConnecting) {
-      return;
-    }
-
-    setError(null);
-    setIsConnecting(true);
-    try {
-      const nextSession = await api.providers.startSession({
-        provider,
-        cwd: cwd.trim() || undefined,
-        model: model.trim() || undefined,
-      });
-      currentSessionIdRef.current = nextSession.sessionId;
-      activeAssistantItemRef.current = null;
-      setSession(nextSession);
-      setMessages([]);
-      setEvents([]);
-    } catch (connectError) {
-      setError(
-        connectError instanceof Error
-          ? connectError.message
-          : "Unable to connect to Codex app-server.",
-      );
-    } finally {
-      setIsConnecting(false);
-    }
-  };
-
-  const onDisconnect = async () => {
-    if (!api || !session) {
-      return;
-    }
+  }, [api, dispatch]);
 
-    await api.providers.stopSession({ sessionId: session.sessionId });
-    currentSessionIdRef.current = null;
-    setSession((previous) =>
-      previous
-        ? {
-            ...previous,
-            status: "closed",
-            activeTurnId: undefined,
-            updatedAt: new Date().toISOString(),
-          }
-        : previous,
-    );
-  };
+  return null;
+}
 
-  const onSendPrompt = async (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    if (!api || !session || isSending) {
-      return;
-    }
-
-    const trimmed = prompt.trim();
-    if (!trimmed) {
-      return;
-    }
-
-    setError(null);
-    setMessages((previous) => [
-      ...previous,
-      {
-        id: crypto.randomUUID(),
-        role: "user",
-        text: trimmed,
-        createdAt: new Date().toISOString(),
-        streaming: false,
-      },
-    ]);
-    setPrompt("");
-    setIsSending(true);
-
-    try {
-      await api.providers.sendTurn({
-        sessionId: session.sessionId,
-        input: trimmed,
-      });
-    } catch (sendError) {
-      setError(
-        sendError instanceof Error
-          ? sendError.message
-          : "Failed to start a Codex turn.",
-      );
-    } finally {
-      setIsSending(false);
-    }
-  };
-
-  const onInterrupt = async () => {
-    if (!api || !session) {
-      return;
-    }
-
-    await api.providers.interruptTurn({
-      sessionId: session.sessionId,
-      turnId: session.activeTurnId,
-    });
-  };
+function Layout() {
+  const api = useMemo(() => readNativeApi(), []);
+  const { state } = useStore();
 
   if (!api) {
     return (
-      <main className="mx-auto flex min-h-screen w-full max-w-3xl items-center justify-center px-6 py-10">
-        <section className="surface-card w-full rounded-3xl p-8">
-          <p className="label-chip">CodeThing</p>
-          <h1 className="mt-3 text-3xl">Native bridge unavailable</h1>
-          <p className="mt-3 text-sm text-amber-100/80">
-            Launch the renderer through Electron so `window.nativeApi` is
-            exposed by preload.
+      <div className="flex h-screen items-center justify-center bg-[#0c0c0c] text-[#e0e0e0]">
+        <div className="text-center">
+          <p className="text-sm text-[#a0a0a0]/60">
+            Native bridge unavailable. Launch through Electron.
           </p>
-        </section>
-      </main>
+        </div>
+      </div>
     );
   }
 
   return (
-    <main className="mx-auto min-h-screen w-full max-w-7xl px-4 py-6 text-[#f3f0e9] sm:px-8">
-      <header className="surface-card relative overflow-hidden rounded-3xl px-6 py-7 sm:px-8">
-        <div className="grain absolute inset-0 pointer-events-none" />
-        <p className="label-chip relative">CodeThing / Provider Shell</p>
-        <h1 className="relative mt-3 text-4xl tracking-tight sm:text-5xl">
-          Codex-first workspace
-        </h1>
-        <p className="relative mt-3 max-w-3xl text-sm text-[#efe8d7]/82 sm:text-base">
-          Built on the Codex app-server protocol with a provider abstraction in
-          the IPC layer, so Claude Code can be added without reshaping the UI
-          contract.
-        </p>
-
-        <form
-          className="relative mt-6 grid gap-3 rounded-2xl border border-[#f6a40f]/30 bg-[#0f2034]/65 p-4 sm:grid-cols-6"
-          onSubmit={onConnect}
-        >
-          <label className="sm:col-span-2">
-            <span className="field-label">Provider</span>
-            <select
-              className="field-input"
-              value={provider}
-              onChange={(event) =>
-                setProvider(event.target.value as ProviderKind)
-              }
-              disabled={isConnecting || phase !== "disconnected"}
-            >
-              {PROVIDER_OPTIONS.map((option) => (
-                <option
-                  key={option.value}
-                  value={option.value}
-                  disabled={!option.available}
-                >
-                  {option.label}
-                </option>
-              ))}
-            </select>
-          </label>
-
-          <label className="sm:col-span-2">
-            <span className="field-label">Working directory</span>
-            <input
-              className="field-input font-mono text-xs sm:text-sm"
-              value={cwd}
-              onChange={(event) => setCwd(event.target.value)}
-              placeholder="/Users/theo/Code/Work/..."
-              disabled={isConnecting || phase !== "disconnected"}
-            />
-          </label>
-
-          <label className="sm:col-span-1">
-            <span className="field-label">Model</span>
-            <input
-              className="field-input font-mono text-xs sm:text-sm"
-              value={model}
-              onChange={(event) => setModel(event.target.value)}
-              placeholder="gpt-5.1-codex"
-              disabled={isConnecting || phase !== "disconnected"}
-            />
-          </label>
-
-          <div className="sm:col-span-1 flex items-end">
-            {phase === "disconnected" ? (
-              <button
-                type="submit"
-                className="action-button action-primary w-full"
-                disabled={provider !== "codex" || isConnecting}
-              >
-                {isConnecting ? "Connecting..." : "Connect"}
-              </button>
-            ) : (
-              <button
-                type="button"
-                className="action-button action-danger w-full"
-                onClick={() => void onDisconnect()}
-              >
-                Disconnect
-              </button>
-            )}
-          </div>
-        </form>
-
-        <div className="relative mt-4 flex flex-wrap gap-2 text-xs">
-          <span className="status-pill">
-            phase={phase} provider={session?.provider ?? "none"}
-          </span>
-          <span className="status-pill">
-            thread={session?.threadId ?? "none"}
-          </span>
-          <span className="status-pill">
-            turn={session?.activeTurnId ?? "none"}
-          </span>
-        </div>
-      </header>
-
-      {error ? (
-        <div className="mt-4 rounded-2xl border border-rose-300/35 bg-rose-900/35 px-4 py-3 text-sm text-rose-100">
-          {error}
-        </div>
-      ) : null}
-
-      <section className="mt-5 grid gap-4 lg:grid-cols-[2fr_1fr]">
-        <article className="surface-card rounded-3xl p-4 sm:p-5">
-          <h2 className="text-xl">Conversation</h2>
-          <div className="mt-4 max-h-[52vh] space-y-3 overflow-y-auto pr-1">
-            {messages.length === 0 ? (
-              <div className="rounded-2xl border border-dashed border-[#f6d79e]/30 bg-[#0d1827]/70 px-4 py-5 text-sm text-[#d8d0c3]/75">
-                No turns yet. Start a session, then send a prompt.
-              </div>
-            ) : null}
-
-            {messages.map((entry) => (
-              <div
-                key={entry.id}
-                className={`message-card ${
-                  entry.role === "user" ? "message-user" : "message-assistant"
-                }`}
-              >
-                <header className="mb-2 flex items-center justify-between text-[11px] uppercase tracking-[0.12em] text-[#d8d0c3]/68">
-                  <span>{entry.role === "user" ? "you" : "codex"}</span>
-                  <span>{formatTimestamp(entry.createdAt)}</span>
-                </header>
-                <pre className="whitespace-pre-wrap break-words font-mono text-sm leading-6">
-                  {entry.text || (entry.streaming ? "..." : "(empty response)")}
-                </pre>
-              </div>
-            ))}
-          </div>
-
-          <form className="mt-4 grid gap-3" onSubmit={onSendPrompt}>
-            <textarea
-              className="field-input min-h-28 resize-y font-mono text-sm leading-6"
-              value={prompt}
-              onChange={(event) => setPrompt(event.target.value)}
-              placeholder="Ask Codex to inspect, plan, or edit this project..."
-              disabled={phase === "disconnected" || isSending}
-            />
-            <div className="flex gap-2">
-              <button
-                type="submit"
-                className="action-button action-primary"
-                disabled={phase === "disconnected" || isSending}
-              >
-                {isSending ? "Starting turn..." : "Send"}
-              </button>
-              <button
-                type="button"
-                className="action-button action-muted"
-                disabled={phase !== "running"}
-                onClick={() => void onInterrupt()}
-              >
-                Interrupt
-              </button>
-            </div>
-          </form>
-        </article>
+    <div className="flex h-screen overflow-hidden bg-[#0c0c0c] text-[#e0e0e0]">
+      <EventRouter />
+      <Sidebar />
+      <ChatView />
+      {state.diffOpen && <DiffPanel />}
+    </div>
+  );
+}
 
-        <aside className="surface-card rounded-3xl p-4 sm:p-5">
-          <h2 className="text-xl">Protocol stream</h2>
-          <p className="mt-2 text-xs text-[#d8d0c3]/76">
-            Live notifications from the app-server (latest first).
-          </p>
-          <div className="mt-4 max-h-[58vh] space-y-2 overflow-y-auto pr-1">
-            {events.length === 0 ? (
-              <p className="rounded-xl border border-dashed border-[#f6d79e]/30 bg-[#0d1827]/70 px-3 py-4 text-xs text-[#d8d0c3]/76">
-                Waiting for events...
-              </p>
-            ) : null}
-            {events.map((entry) => (
-              <div key={entry.id} className="event-card">
-                <p className="font-mono text-[11px] uppercase tracking-[0.12em] text-[#f8ca64]">
-                  {entry.method}
-                </p>
-                {entry.message ? (
-                  <p className="mt-1 text-xs text-[#efe8d7]/88">
-                    {entry.message}
-                  </p>
-                ) : null}
-                <p className="mt-2 text-[11px] text-[#d8d0c3]/66">
-                  {formatTimestamp(entry.createdAt)}
-                  {entry.turnId ? ` · ${entry.turnId}` : ""}
-                </p>
-              </div>
-            ))}
-          </div>
-        </aside>
-      </section>
-    </main>
+export default function App() {
+  return (
+    <StoreProvider>
+      <Layout />
+    </StoreProvider>
   );
 }
diff --git a/apps/renderer/src/components/ChatView.tsx b/apps/renderer/src/components/ChatView.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..87611f9adc8f7b7c826c8918b3eaa6c8de34590e
--- /dev/null
+++ b/apps/renderer/src/components/ChatView.tsx
@@ -0,0 +1,302 @@
+import { type FormEvent, useEffect, useMemo, useRef, useState } from "react";
+
+import { derivePhase, formatTimestamp, readNativeApi } from "../session-logic";
+import { useStore } from "../store";
+
+export default function ChatView() {
+  const { state, dispatch } = useStore();
+  const api = useMemo(() => readNativeApi(), []);
+  const [prompt, setPrompt] = useState("");
+  const [isSending, setIsSending] = useState(false);
+  const [isConnecting, setIsConnecting] = useState(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  const activeThread = state.threads.find((t) => t.id === state.activeThreadId);
+  const activeProject = state.projects.find(
+    (p) => p.id === activeThread?.projectId,
+  );
+  const phase = derivePhase(activeThread?.session ?? null);
+
+  // Auto-scroll on new messages
+  const messageCount = activeThread?.messages.length ?? 0;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: trigger on message count change
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messageCount]);
+
+  // Auto-resize textarea
+  // biome-ignore lint/correctness/useExhaustiveDependencies: trigger on prompt change
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${Math.min(ta.scrollHeight, 200)}px`;
+  }, [prompt]);
+
+  const ensureSession = async (): Promise<boolean> => {
+    if (!api || !activeThread || !activeProject) return false;
+    if (activeThread.session && activeThread.session.status !== "closed")
+      return true;
+
+    setIsConnecting(true);
+    try {
+      const session = await api.providers.startSession({
+        provider: "codex",
+        cwd: activeProject.cwd || undefined,
+        model: activeProject.model || undefined,
+      });
+      dispatch({
+        type: "UPDATE_SESSION",
+        threadId: activeThread.id,
+        session,
+      });
+      return true;
+    } catch (err) {
+      dispatch({
+        type: "SET_ERROR",
+        threadId: activeThread.id,
+        error: err instanceof Error ? err.message : "Failed to connect.",
+      });
+      return false;
+    } finally {
+      setIsConnecting(false);
+    }
+  };
+
+  const onSend = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!api || !activeThread || isSending || isConnecting) return;
+    const trimmed = prompt.trim();
+    if (!trimmed) return;
+
+    // Auto-title from first message
+    if (activeThread.messages.length === 0) {
+      const title =
+        trimmed.length > 50 ? `${trimmed.slice(0, 50)}...` : trimmed;
+      dispatch({
+        type: "SET_THREAD_TITLE",
+        threadId: activeThread.id,
+        title,
+      });
+    }
+
+    dispatch({
+      type: "SET_ERROR",
+      threadId: activeThread.id,
+      error: null,
+    });
+    dispatch({
+      type: "PUSH_USER_MESSAGE",
+      threadId: activeThread.id,
+      id: crypto.randomUUID(),
+      text: trimmed,
+    });
+    setPrompt("");
+
+    const connected = await ensureSession();
+    if (!connected) return;
+
+    // Re-read thread to get session after potential connection
+    const updatedThread = state.threads.find((t) => t.id === activeThread.id);
+    const sessionId =
+      updatedThread?.session?.sessionId ?? activeThread.session?.sessionId;
+    if (!sessionId) return;
+
+    setIsSending(true);
+    try {
+      await api.providers.sendTurn({ sessionId, input: trimmed });
+    } catch (err) {
+      dispatch({
+        type: "SET_ERROR",
+        threadId: activeThread.id,
+        error: err instanceof Error ? err.message : "Failed to send message.",
+      });
+    } finally {
+      setIsSending(false);
+    }
+  };
+
+  const onInterrupt = async () => {
+    if (!api || !activeThread?.session) return;
+    await api.providers.interruptTurn({
+      sessionId: activeThread.session.sessionId,
+      turnId: activeThread.session.activeTurnId,
+    });
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      void onSend(e as unknown as FormEvent);
+    }
+  };
+
+  // Empty state: no active thread
+  if (!activeThread) {
+    return (
+      <div className="flex flex-1 flex-col items-center justify-center bg-[#0c0c0c] text-[#a0a0a0]/40">
+        <div className="text-center">
+          <div className="mb-3 text-4xl">&#x2728;</div>
+          <p className="text-sm">
+            Select a thread or create a new one to get started.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-1 flex-col bg-[#0c0c0c]">
+      {/* Top bar */}
+      <header className="flex items-center justify-between border-b border-white/[0.08] px-5 py-3">
+        <div className="flex items-center gap-3">
+          <h2 className="text-sm font-medium text-[#e0e0e0]">
+            {activeThread.title}
+          </h2>
+          {activeProject && (
+            <span className="rounded-full bg-white/[0.06] px-2 py-0.5 text-[10px] text-[#a0a0a0]/50">
+              {activeProject.name}
+            </span>
+          )}
+        </div>
+        <div className="flex items-center gap-3">
+          {/* Status indicator */}
+          <div className="flex items-center gap-1.5">
+            <div
+              className={`h-2 w-2 rounded-full ${
+                phase === "running"
+                  ? "animate-pulse bg-emerald-400"
+                  : phase === "ready"
+                    ? "bg-emerald-400"
+                    : phase === "connecting"
+                      ? "animate-pulse bg-amber-400"
+                      : "bg-[#a0a0a0]/30"
+              }`}
+            />
+            <span className="text-[10px] text-[#a0a0a0]/50">{phase}</span>
+          </div>
+          {/* Diff toggle */}
+          <button
+            type="button"
+            className={`rounded-md px-2 py-1 text-[10px] transition-colors duration-150 ${
+              state.diffOpen
+                ? "bg-white/10 text-white"
+                : "text-[#a0a0a0]/40 hover:text-[#a0a0a0]/60"
+            }`}
+            onClick={() => dispatch({ type: "TOGGLE_DIFF" })}
+          >
+            Diff
+          </button>
+        </div>
+      </header>
+
+      {/* Error banner */}
+      {activeThread.error && (
+        <div className="mx-4 mt-3 rounded-lg border border-rose-400/20 bg-rose-900/20 px-3 py-2 text-xs text-rose-200">
+          {activeThread.error}
+        </div>
+      )}
+
+      {/* Messages */}
+      <div className="flex-1 overflow-y-auto px-5 py-4">
+        {activeThread.messages.length === 0 ? (
+          <div className="flex h-full items-center justify-center">
+            <p className="text-sm text-[#a0a0a0]/30">
+              Send a message to start the conversation.
+            </p>
+          </div>
+        ) : (
+          <div className="mx-auto max-w-3xl space-y-4">
+            {activeThread.messages.map((msg) => (
+              <div key={msg.id}>
+                {msg.role === "user" ? (
+                  <div className="flex justify-end">
+                    <div className="max-w-[80%] rounded-2xl rounded-br-sm border border-white/[0.08] bg-white/[0.05] px-4 py-3">
+                      <pre className="whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-[#e0e0e0]">
+                        {msg.text}
+                      </pre>
+                      <p className="mt-1.5 text-right text-[10px] text-[#a0a0a0]/30">
+                        {formatTimestamp(msg.createdAt)}
+                      </p>
+                    </div>
+                  </div>
+                ) : (
+                  <div className="border-l-2 border-white/[0.15] pl-4">
+                    <pre className="whitespace-pre-wrap break-words font-mono text-sm leading-relaxed text-[#d0d0d0]">
+                      {msg.text || (msg.streaming ? "" : "(empty response)")}
+                    </pre>
+                    {msg.streaming && (
+                      <span className="inline-flex gap-1 pt-1">
+                        <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-white/50" />
+                        <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-white/50 [animation-delay:150ms]" />
+                        <span className="h-1.5 w-1.5 animate-pulse rounded-full bg-white/50 [animation-delay:300ms]" />
+                      </span>
+                    )}
+                    {!msg.streaming && (
+                      <p className="mt-1.5 text-[10px] text-[#a0a0a0]/30">
+                        {formatTimestamp(msg.createdAt)}
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
+            ))}
+            <div ref={messagesEndRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Input bar */}
+      <div className="border-t border-white/[0.08] px-5 py-3">
+        <form
+          onSubmit={onSend}
+          className="mx-auto flex max-w-3xl items-end gap-2"
+        >
+          <div className="relative flex-1">
+            <textarea
+              ref={textareaRef}
+              className="w-full resize-none rounded-xl border border-white/[0.1] bg-white/[0.04] px-4 py-3 pr-12 font-mono text-sm text-[#e0e0e0] placeholder:text-[#a0a0a0]/30 focus:border-white/20 focus:outline-none"
+              rows={1}
+              value={prompt}
+              onChange={(e) => setPrompt(e.target.value)}
+              onKeyDown={onKeyDown}
+              placeholder={
+                phase === "disconnected"
+                  ? "Type a message (session auto-connects)..."
+                  : "Type a message..."
+              }
+              disabled={isSending || isConnecting}
+            />
+            {activeProject && (
+              <span className="absolute right-3 bottom-2 text-[9px] text-[#a0a0a0]/25">
+                {activeProject.model}
+              </span>
+            )}
+          </div>
+          {phase === "running" ? (
+            <button
+              type="button"
+              className="shrink-0 rounded-xl bg-rose-600/80 px-4 py-3 text-xs font-medium text-white transition-colors duration-150 hover:bg-rose-600"
+              onClick={() => void onInterrupt()}
+            >
+              Stop
+            </button>
+          ) : (
+            <button
+              type="submit"
+              className="shrink-0 rounded-xl bg-white px-4 py-3 text-xs font-medium text-[#0c0c0c] transition-colors duration-150 hover:bg-white/90 disabled:opacity-40"
+              disabled={isSending || isConnecting || !prompt.trim()}
+            >
+              {isConnecting
+                ? "Connecting..."
+                : isSending
+                  ? "Sending..."
+                  : "Send"}
+            </button>
+          )}
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/renderer/src/components/DiffPanel.tsx b/apps/renderer/src/components/DiffPanel.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..56e18be9885ad4807b2bd8b7258cdbfe28d44a57
--- /dev/null
+++ b/apps/renderer/src/components/DiffPanel.tsx
@@ -0,0 +1,60 @@
+import { useStore } from "../store";
+
+export default function DiffPanel() {
+  const { dispatch } = useStore();
+
+  return (
+    <aside className="flex h-full w-[400px] shrink-0 flex-col border-l border-white/[0.08] bg-[#141414]">
+      {/* Header */}
+      <div className="flex items-center justify-between border-b border-white/[0.08] px-4 py-3">
+        <h3 className="text-xs font-medium text-[#e0e0e0]">
+          Uncommitted changes
+        </h3>
+        <button
+          type="button"
+          className="text-[#a0a0a0]/40 transition-colors duration-150 hover:text-[#a0a0a0]/70"
+          onClick={() => dispatch({ type: "TOGGLE_DIFF" })}
+        >
+          <span className="text-sm">&times;</span>
+        </button>
+      </div>
+
+      {/* Placeholder content */}
+      <div className="flex-1 overflow-y-auto p-4">
+        <div className="space-y-3">
+          <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+            <div className="mb-2 flex items-center gap-2">
+              <span className="rounded bg-emerald-500/20 px-1.5 py-0.5 text-[9px] font-medium text-emerald-400">
+                M
+              </span>
+              <span className="font-mono text-xs text-[#a0a0a0]/60">
+                src/App.tsx
+              </span>
+            </div>
+            <div className="space-y-0.5 font-mono text-[11px]">
+              <div className="text-red-400/60">- const oldValue = "hello";</div>
+              <div className="text-emerald-400/60">
+                + const newValue = "world";
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-lg border border-white/[0.06] bg-white/[0.02] p-3">
+            <div className="flex items-center gap-2">
+              <span className="rounded bg-blue-500/20 px-1.5 py-0.5 text-[9px] font-medium text-blue-400">
+                A
+              </span>
+              <span className="font-mono text-xs text-[#a0a0a0]/60">
+                src/utils.ts
+              </span>
+            </div>
+          </div>
+        </div>
+
+        <p className="mt-6 text-center text-[10px] text-[#a0a0a0]/25">
+          Diff integration coming soon
+        </p>
+      </div>
+    </aside>
+  );
+}
diff --git a/apps/renderer/src/components/Sidebar.tsx b/apps/renderer/src/components/Sidebar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..59405138be262a33c73b0bdc1039167b32b8631e
--- /dev/null
+++ b/apps/renderer/src/components/Sidebar.tsx
@@ -0,0 +1,222 @@
+import { useState } from "react";
+import { useStore } from "../store";
+import type { Project } from "../types";
+
+function formatRelativeTime(iso: string): string {
+  const diff = Date.now() - new Date(iso).getTime();
+  const minutes = Math.floor(diff / 60_000);
+  if (minutes < 1) return "just now";
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  return `${Math.floor(hours / 24)}d ago`;
+}
+
+export default function Sidebar() {
+  const { state, dispatch } = useStore();
+  const [addingProject, setAddingProject] = useState(false);
+  const [newCwd, setNewCwd] = useState("");
+  const [newModel, setNewModel] = useState("gpt-5.1-codex");
+
+  const handleAddProject = () => {
+    const cwd = newCwd.trim();
+    if (!cwd) return;
+    const name = cwd.split("/").filter(Boolean).pop() ?? "project";
+    const project: Project = {
+      id: crypto.randomUUID(),
+      name,
+      cwd,
+      model: newModel.trim() || "gpt-5.1-codex",
+      expanded: true,
+    };
+    dispatch({ type: "ADD_PROJECT", project });
+    setNewCwd("");
+    setNewModel("gpt-5.1-codex");
+    setAddingProject(false);
+  };
+
+  const handleNewThread = (projectId: string) => {
+    dispatch({
+      type: "ADD_THREAD",
+      thread: {
+        id: crypto.randomUUID(),
+        projectId,
+        title: "New thread",
+        session: null,
+        messages: [],
+        events: [],
+        error: null,
+        createdAt: new Date().toISOString(),
+      },
+    });
+  };
+
+  return (
+    <aside className="sidebar flex h-full w-[260px] shrink-0 flex-col border-r border-white/[0.08] bg-[#141414]">
+      {/* Branding */}
+      <div className="flex items-center gap-2 px-4 pt-5 pb-4">
+        <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-white text-xs font-bold text-[#0c0c0c]">
+          CT
+        </div>
+        <span className="text-sm font-semibold tracking-tight text-[#e0e0e0]">
+          CodeThing
+        </span>
+      </div>
+
+      {/* New thread (global) */}
+      <div className="px-3 pb-3">
+        <button
+          type="button"
+          className="flex w-full items-center gap-2 rounded-lg border border-white/[0.08] bg-white/[0.04] px-3 py-2 text-xs text-[#a0a0a0]/80 transition-colors duration-150 hover:bg-white/[0.07]"
+          onClick={() => {
+            if (state.projects.length === 0) {
+              setAddingProject(true);
+              return;
+            }
+            const firstProject = state.projects[0];
+            if (firstProject) handleNewThread(firstProject.id);
+          }}
+        >
+          <span className="text-white">+</span>
+          New thread
+        </button>
+      </div>
+
+      {/* Project list */}
+      <nav className="flex-1 overflow-y-auto px-2">
+        {state.projects.map((project) => {
+          const threads = state.threads.filter(
+            (t) => t.projectId === project.id,
+          );
+          return (
+            <div key={project.id} className="mb-1">
+              {/* Project header */}
+              <button
+                type="button"
+                className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-150 hover:bg-white/[0.05]"
+                onClick={() =>
+                  dispatch({ type: "TOGGLE_PROJECT", projectId: project.id })
+                }
+              >
+                <span className="text-[10px] text-[#a0a0a0]/50">
+                  {project.expanded ? "▼" : "▶"}
+                </span>
+                <span className="flex-1 truncate text-xs font-medium text-[#e0e0e0]/90">
+                  {project.name}
+                </span>
+                <span className="text-[10px] text-[#a0a0a0]/40">
+                  {threads.length}
+                </span>
+              </button>
+
+              {/* Threads */}
+              {project.expanded && (
+                <div className="ml-2 border-l border-white/[0.06] pl-2">
+                  {threads.map((thread) => {
+                    const isActive = state.activeThreadId === thread.id;
+                    return (
+                      <button
+                        key={thread.id}
+                        type="button"
+                        className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left transition-colors duration-150 ${
+                          isActive
+                            ? "bg-white/10 text-white"
+                            : "text-[#a0a0a0]/70 hover:bg-white/[0.04]"
+                        }`}
+                        onClick={() =>
+                          dispatch({
+                            type: "SET_ACTIVE_THREAD",
+                            threadId: thread.id,
+                          })
+                        }
+                      >
+                        <span className="flex-1 truncate text-xs">
+                          {thread.title}
+                        </span>
+                        <span className="shrink-0 text-[10px] text-[#a0a0a0]/30">
+                          {formatRelativeTime(thread.createdAt)}
+                        </span>
+                      </button>
+                    );
+                  })}
+
+                  {/* New thread within project */}
+                  <button
+                    type="button"
+                    className="flex w-full items-center gap-1 px-2 py-1 text-[10px] text-[#a0a0a0]/40 transition-colors duration-150 hover:text-[#a0a0a0]/60"
+                    onClick={() => handleNewThread(project.id)}
+                  >
+                    <span>+</span> New thread
+                  </button>
+                </div>
+              )}
+            </div>
+          );
+        })}
+
+        {state.projects.length === 0 && !addingProject && (
+          <div className="px-2 pt-4 text-center text-xs text-[#a0a0a0]/40">
+            No projects yet.
+            <br />
+            Add one to get started.
+          </div>
+        )}
+      </nav>
+
+      {/* Add project form */}
+      {addingProject ? (
+        <div className="border-t border-white/[0.08] p-3">
+          <p className="mb-2 text-[10px] font-medium uppercase tracking-wider text-[#a0a0a0]/50">
+            Add project
+          </p>
+          <input
+            className="mb-2 w-full rounded-md border border-white/[0.1] bg-white/[0.04] px-2 py-1.5 font-mono text-xs text-[#e0e0e0] placeholder:text-[#a0a0a0]/30 focus:border-white/30 focus:outline-none"
+            placeholder="/path/to/project"
+            value={newCwd}
+            onChange={(e) => setNewCwd(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleAddProject();
+              if (e.key === "Escape") setAddingProject(false);
+            }}
+          />
+          <input
+            className="mb-2 w-full rounded-md border border-white/[0.1] bg-white/[0.04] px-2 py-1.5 font-mono text-xs text-[#e0e0e0] placeholder:text-[#a0a0a0]/30 focus:border-white/30 focus:outline-none"
+            placeholder="model (default: gpt-5.1-codex)"
+            value={newModel}
+            onChange={(e) => setNewModel(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleAddProject();
+              if (e.key === "Escape") setAddingProject(false);
+            }}
+          />
+          <div className="flex gap-2">
+            <button
+              type="button"
+              className="flex-1 rounded-md bg-white px-2 py-1 text-xs font-medium text-[#0c0c0c] transition-colors duration-150 hover:bg-white/90"
+              onClick={handleAddProject}
+            >
+              Add
+            </button>
+            <button
+              type="button"
+              className="flex-1 rounded-md border border-white/[0.1] px-2 py-1 text-xs text-[#a0a0a0]/60 transition-colors duration-150 hover:bg-white/[0.04]"
+              onClick={() => setAddingProject(false)}
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="border-t border-white/[0.08] p-3">
+          <button
+            type="button"
+            className="flex w-full items-center justify-center gap-1 rounded-md border border-dashed border-white/[0.12] py-2 text-xs text-[#a0a0a0]/50 transition-colors duration-150 hover:border-white/[0.2] hover:text-[#a0a0a0]/70"
+            onClick={() => setAddingProject(true)}
+          >
+            + Add project
+          </button>
+        </div>
+      )}
+    </aside>
+  );
+}
diff --git a/apps/renderer/src/index.css b/apps/renderer/src/index.css
index ceb67ea2609a05c0de8dbba5ec2794e5dc8c9c96..e2338ccf24ac2b0ac03ff2ade5fed62bbe08ba48 100644
--- a/apps/renderer/src/index.css
+++ b/apps/renderer/src/index.css
@@ -1,165 +1,41 @@
-@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
 @import "tailwindcss";
 
-@theme {
-  --shadow-soft: 0 14px 38px -18px rgba(15, 23, 42, 0.35);
-}
-
 :root {
   color-scheme: dark;
 }
 
 body {
-  font-family: "Fraunces", "Iowan Old Style", serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Arial, sans-serif;
+  margin: 0;
+  padding: 0;
   min-height: 100vh;
-  color: #f3f0e9;
-  background: radial-gradient(circle at 8% 3%, #e69f15 0%, transparent 33%),
-    radial-gradient(circle at 92% 6%, #2d8ba8 0%, transparent 30%),
-    linear-gradient(160deg, #050913 0%, #091320 42%, #090f1a 100%);
+  color: #e0e0e0;
+  background: #0c0c0c;
 }
 
 pre,
 code,
 textarea,
-input,
-select {
-  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
+input {
+  font-family: "SF Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo,
+    monospace;
 }
 
-.surface-card {
-  border: 1px solid rgba(246, 215, 158, 0.24);
-  background: linear-gradient(
-      140deg,
-      rgba(11, 24, 40, 0.9),
-      rgba(9, 16, 29, 0.84)
-    ), radial-gradient(circle at top, rgba(245, 166, 35, 0.15), transparent 45%);
-  box-shadow: 0 28px 70px -45px rgba(0, 0, 0, 0.85), inset 0 1px 0
-    rgba(255, 255, 255, 0.08);
+/* Scrollbar styling */
+::-webkit-scrollbar {
+  width: 6px;
 }
 
-.grain {
-  opacity: 0.18;
-  mix-blend-mode: soft-light;
-  background-image: linear-gradient(
-    45deg,
-    rgba(255, 255, 255, 0.04) 25%,
-    transparent 25%,
-    transparent 50%,
-    rgba(255, 255, 255, 0.04) 50%,
-    rgba(255, 255, 255, 0.04) 75%,
-    transparent 75%,
-    transparent
-  );
-  background-size: 4px 4px;
+::-webkit-scrollbar-track {
+  background: transparent;
 }
 
-.label-chip {
-  display: inline-flex;
-  border-radius: 9999px;
-  border: 1px solid rgba(246, 215, 158, 0.44);
-  background: rgba(23, 38, 56, 0.55);
-  padding: 0.28rem 0.72rem;
-  font-size: 0.67rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: #f8ca64;
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
 }
 
-.field-label {
-  display: block;
-  margin-bottom: 0.32rem;
-  font-size: 0.67rem;
-  letter-spacing: 0.14em;
-  text-transform: uppercase;
-  color: rgba(246, 233, 201, 0.82);
-}
-
-.field-input {
-  width: 100%;
-  border-radius: 0.8rem;
-  border: 1px solid rgba(246, 215, 158, 0.3);
-  background: rgba(5, 12, 22, 0.85);
-  padding: 0.65rem 0.75rem;
-  color: #f7f1e6;
-  transition: border-color 140ms ease, box-shadow 140ms ease;
-}
-
-.field-input:focus {
-  outline: none;
-  border-color: rgba(250, 206, 99, 0.75);
-  box-shadow: 0 0 0 2px rgba(250, 206, 99, 0.18);
-}
-
-.action-button {
-  border-radius: 0.8rem;
-  padding: 0.62rem 0.9rem;
-  font-size: 0.8rem;
-  font-weight: 600;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  transition: filter 140ms ease, transform 140ms ease;
-}
-
-.action-button:disabled {
-  cursor: not-allowed;
-  opacity: 0.45;
-}
-
-.action-button:not(:disabled):hover {
-  filter: brightness(1.06);
-  transform: translateY(-1px);
-}
-
-.action-primary {
-  border: 1px solid rgba(250, 206, 99, 0.6);
-  background: linear-gradient(140deg, #f8c861, #e59f0d);
-  color: #1f2530;
-}
-
-.action-danger {
-  border: 1px solid rgba(252, 148, 124, 0.44);
-  background: linear-gradient(140deg, #8f2c2b, #bf4738);
-  color: #fff3ef;
-}
-
-.action-muted {
-  border: 1px solid rgba(149, 181, 205, 0.4);
-  background: rgba(13, 31, 49, 0.85);
-  color: #dfecfb;
-}
-
-.status-pill {
-  border-radius: 9999px;
-  border: 1px solid rgba(246, 215, 158, 0.29);
-  background: rgba(9, 20, 33, 0.9);
-  padding: 0.27rem 0.64rem;
-  font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
-  color: rgba(248, 235, 206, 0.86);
-}
-
-.message-card {
-  border-radius: 1rem;
-  border: 1px solid rgba(246, 215, 158, 0.25);
-  background: rgba(8, 16, 27, 0.82);
-  padding: 0.9rem;
-}
-
-.message-user {
-  border-color: rgba(111, 198, 238, 0.38);
-  background: linear-gradient(
-    160deg,
-    rgba(14, 44, 64, 0.92),
-    rgba(8, 21, 36, 0.92)
-  );
-}
-
-.message-assistant {
-  border-color: rgba(250, 206, 99, 0.34);
-}
-
-.event-card {
-  border-radius: 0.85rem;
-  border: 1px solid rgba(246, 215, 158, 0.2);
-  background: rgba(8, 16, 27, 0.76);
-  padding: 0.62rem 0.72rem;
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.18);
 }
diff --git a/apps/renderer/src/session-logic.ts b/apps/renderer/src/session-logic.ts
new file mode 100644
index 0000000000000000000000000000000000000000..acfdb2e9bf5d05dff6bcbe3cae2f781f29a69b0a
--- /dev/null
+++ b/apps/renderer/src/session-logic.ts
@@ -0,0 +1,206 @@
+import type {
+  ProviderEvent,
+  ProviderKind,
+  ProviderSession,
+} from "@acme/contracts";
+import type { ChatMessage, SessionPhase } from "./types";
+
+export const PROVIDER_OPTIONS: Array<{
+  value: ProviderKind;
+  label: string;
+  available: boolean;
+}> = [
+  { value: "codex", label: "Codex", available: true },
+  { value: "claudeCode", label: "Claude Code (soon)", available: false },
+];
+
+export function readNativeApi() {
+  if (typeof window === "undefined") return undefined;
+  return window.nativeApi;
+}
+
+export function asObject(value: unknown): Record<string, unknown> | undefined {
+  if (!value || typeof value !== "object") return undefined;
+  return value as Record<string, unknown>;
+}
+
+export function asString(value: unknown): string | undefined {
+  return typeof value === "string" ? value : undefined;
+}
+
+export function formatTimestamp(isoDate: string): string {
+  return new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+    second: "2-digit",
+  }).format(new Date(isoDate));
+}
+
+export function derivePhase(session: ProviderSession | null): SessionPhase {
+  if (!session || session.status === "closed") return "disconnected";
+  if (session.status === "connecting") return "connecting";
+  if (session.status === "running") return "running";
+  return "ready";
+}
+
+export function evolveSession(
+  previous: ProviderSession,
+  event: ProviderEvent,
+): ProviderSession {
+  const payload = asObject(event.payload);
+
+  if (event.method === "thread/started") {
+    const thread = asObject(payload?.thread);
+    return {
+      ...previous,
+      threadId: asString(thread?.id) ?? event.threadId ?? previous.threadId,
+      updatedAt: event.createdAt,
+    };
+  }
+
+  if (event.method === "turn/started") {
+    const turn = asObject(payload?.turn);
+    return {
+      ...previous,
+      status: "running",
+      activeTurnId: asString(turn?.id) ?? event.turnId ?? previous.activeTurnId,
+      updatedAt: event.createdAt,
+    };
+  }
+
+  if (event.method === "turn/completed") {
+    const turn = asObject(payload?.turn);
+    const status = asString(turn?.status);
+    const turnError = asObject(turn?.error);
+    return {
+      ...previous,
+      status: status === "failed" ? "error" : "ready",
+      activeTurnId: undefined,
+      lastError: asString(turnError?.message) ?? previous.lastError,
+      updatedAt: event.createdAt,
+    };
+  }
+
+  if (event.kind === "error") {
+    return {
+      ...previous,
+      status: "error",
+      lastError: event.message ?? previous.lastError,
+      updatedAt: event.createdAt,
+    };
+  }
+
+  if (event.method === "session/closed" || event.method === "session/exited") {
+    return {
+      ...previous,
+      status: "closed",
+      activeTurnId: undefined,
+      lastError: event.message ?? previous.lastError,
+      updatedAt: event.createdAt,
+    };
+  }
+
+  return { ...previous, updatedAt: event.createdAt };
+}
+
+export function applyEventToMessages(
+  previous: ChatMessage[],
+  event: ProviderEvent,
+  activeAssistantItemRef: { current: string | null },
+): ChatMessage[] {
+  const payload = asObject(event.payload);
+
+  if (event.method === "item/started") {
+    const item = asObject(payload?.item);
+    if (asString(item?.type) !== "agentMessage") return previous;
+    const itemId = asString(item?.id);
+    if (!itemId) return previous;
+
+    activeAssistantItemRef.current = itemId;
+    const seedText = asString(item?.text) ?? "";
+    const filtered = previous.filter((entry) => entry.id !== itemId);
+    return [
+      ...filtered,
+      {
+        id: itemId,
+        role: "assistant",
+        text: seedText,
+        createdAt: event.createdAt,
+        streaming: true,
+      },
+    ];
+  }
+
+  if (event.method === "item/agentMessage/delta") {
+    const itemId = event.itemId ?? asString(payload?.itemId);
+    const delta = event.textDelta ?? asString(payload?.delta) ?? "";
+    if (!itemId || !delta) return previous;
+
+    const existingIndex = previous.findIndex((entry) => entry.id === itemId);
+    if (existingIndex === -1) {
+      activeAssistantItemRef.current = itemId;
+      return [
+        ...previous,
+        {
+          id: itemId,
+          role: "assistant",
+          text: delta,
+          createdAt: event.createdAt,
+          streaming: true,
+        },
+      ];
+    }
+
+    const updated = [...previous];
+    const existing = updated[existingIndex];
+    if (!existing) return previous;
+    updated[existingIndex] = {
+      ...existing,
+      text: `${existing.text}${delta}`,
+      streaming: true,
+    };
+    return updated;
+  }
+
+  if (event.method === "item/completed") {
+    const item = asObject(payload?.item);
+    if (asString(item?.type) !== "agentMessage") return previous;
+    const itemId = asString(item?.id);
+    if (!itemId) return previous;
+
+    const fullText = asString(item?.text);
+    const existingIndex = previous.findIndex((entry) => entry.id === itemId);
+    if (existingIndex === -1) {
+      return [
+        ...previous,
+        {
+          id: itemId,
+          role: "assistant",
+          text: fullText ?? "",
+          createdAt: event.createdAt,
+          streaming: false,
+        },
+      ];
+    }
+
+    const updated = [...previous];
+    const existing = updated[existingIndex];
+    if (!existing) return previous;
+    updated[existingIndex] = {
+      ...existing,
+      text: fullText ?? existing.text,
+      streaming: false,
+    };
+
+    if (activeAssistantItemRef.current === itemId) {
+      activeAssistantItemRef.current = null;
+    }
+    return updated;
+  }
+
+  if (event.method === "turn/completed") {
+    return previous.map((entry) => ({ ...entry, streaming: false }));
+  }
+
+  return previous;
+}
diff --git a/apps/renderer/src/store.ts b/apps/renderer/src/store.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c9b7c0443b46cded9b8c1b88ffe01e687dd2bca4
--- /dev/null
+++ b/apps/renderer/src/store.ts
@@ -0,0 +1,186 @@
+import {
+  type Dispatch,
+  type ReactNode,
+  createContext,
+  createElement,
+  useContext,
+  useReducer,
+} from "react";
+
+import type { ProviderEvent, ProviderSession } from "@acme/contracts";
+import { applyEventToMessages, evolveSession } from "./session-logic";
+import type { Project, Thread } from "./types";
+
+// ── Actions ──────────────────────────────────────────────────────────
+
+type Action =
+  | { type: "ADD_PROJECT"; project: Project }
+  | { type: "TOGGLE_PROJECT"; projectId: string }
+  | { type: "ADD_THREAD"; thread: Thread }
+  | { type: "SET_ACTIVE_THREAD"; threadId: string }
+  | { type: "TOGGLE_DIFF" }
+  | {
+      type: "APPLY_EVENT";
+      event: ProviderEvent;
+      activeAssistantItemRef: { current: string | null };
+    }
+  | { type: "UPDATE_SESSION"; threadId: string; session: ProviderSession }
+  | { type: "PUSH_USER_MESSAGE"; threadId: string; id: string; text: string }
+  | { type: "SET_ERROR"; threadId: string; error: string | null }
+  | { type: "SET_THREAD_TITLE"; threadId: string; title: string };
+
+// ── State ────────────────────────────────────────────────────────────
+
+export interface AppState {
+  projects: Project[];
+  threads: Thread[];
+  activeThreadId: string | null;
+  diffOpen: boolean;
+}
+
+const initialState: AppState = {
+  projects: [],
+  threads: [],
+  activeThreadId: null,
+  diffOpen: false,
+};
+
+// ── Helpers ──────────────────────────────────────────────────────────
+
+function updateThread(
+  threads: Thread[],
+  threadId: string,
+  updater: (t: Thread) => Thread,
+): Thread[] {
+  return threads.map((t) => (t.id === threadId ? updater(t) : t));
+}
+
+function findThreadBySessionId(
+  threads: Thread[],
+  sessionId: string,
+): Thread | undefined {
+  return threads.find((t) => t.session?.sessionId === sessionId);
+}
+
+// ── Reducer ──────────────────────────────────────────────────────────
+
+function reducer(state: AppState, action: Action): AppState {
+  switch (action.type) {
+    case "ADD_PROJECT":
+      return { ...state, projects: [...state.projects, action.project] };
+
+    case "TOGGLE_PROJECT":
+      return {
+        ...state,
+        projects: state.projects.map((p) =>
+          p.id === action.projectId ? { ...p, expanded: !p.expanded } : p,
+        ),
+      };
+
+    case "ADD_THREAD":
+      return {
+        ...state,
+        threads: [...state.threads, action.thread],
+        activeThreadId: action.thread.id,
+      };
+
+    case "SET_ACTIVE_THREAD":
+      return { ...state, activeThreadId: action.threadId };
+
+    case "TOGGLE_DIFF":
+      return { ...state, diffOpen: !state.diffOpen };
+
+    case "APPLY_EVENT": {
+      const { event, activeAssistantItemRef } = action;
+      const target = findThreadBySessionId(state.threads, event.sessionId);
+      if (!target) return state;
+
+      return {
+        ...state,
+        threads: updateThread(state.threads, target.id, (t) => ({
+          ...t,
+          session: t.session ? evolveSession(t.session, event) : t.session,
+          messages: applyEventToMessages(
+            t.messages,
+            event,
+            activeAssistantItemRef,
+          ),
+          events: [event, ...t.events].slice(0, 200),
+          error:
+            event.kind === "error" && event.message ? event.message : t.error,
+        })),
+      };
+    }
+
+    case "UPDATE_SESSION":
+      return {
+        ...state,
+        threads: updateThread(state.threads, action.threadId, (t) => ({
+          ...t,
+          session: action.session,
+          messages: [],
+          events: [],
+          error: null,
+        })),
+      };
+
+    case "PUSH_USER_MESSAGE":
+      return {
+        ...state,
+        threads: updateThread(state.threads, action.threadId, (t) => ({
+          ...t,
+          messages: [
+            ...t.messages,
+            {
+              id: action.id,
+              role: "user" as const,
+              text: action.text,
+              createdAt: new Date().toISOString(),
+              streaming: false,
+            },
+          ],
+        })),
+      };
+
+    case "SET_ERROR":
+      return {
+        ...state,
+        threads: updateThread(state.threads, action.threadId, (t) => ({
+          ...t,
+          error: action.error,
+        })),
+      };
+
+    case "SET_THREAD_TITLE":
+      return {
+        ...state,
+        threads: updateThread(state.threads, action.threadId, (t) => ({
+          ...t,
+          title: action.title,
+        })),
+      };
+
+    default:
+      return state;
+  }
+}
+
+// ── Context ──────────────────────────────────────────────────────────
+
+const StoreContext = createContext<{
+  state: AppState;
+  dispatch: Dispatch<Action>;
+}>({ state: initialState, dispatch: () => {} });
+
+export function StoreProvider({ children }: { children: ReactNode }) {
+  const [state, dispatch] = useReducer(reducer, initialState);
+  return createElement(
+    StoreContext.Provider,
+    { value: { state, dispatch } },
+    children,
+  );
+}
+
+export function useStore() {
+  return useContext(StoreContext);
+}
diff --git a/apps/renderer/src/types.ts b/apps/renderer/src/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1d49ed567ac7b05b9586dfb3171d9d9ef8ba4cf6
--- /dev/null
+++ b/apps/renderer/src/types.ts
@@ -0,0 +1,30 @@
+import type { ProviderEvent, ProviderSession } from "@acme/contracts";
+
+export type SessionPhase = "disconnected" | "connecting" | "ready" | "running";
+
+export interface ChatMessage {
+  id: string;
+  role: "user" | "assistant";
+  text: string;
+  createdAt: string;
+  streaming: boolean;
+}
+
+export interface Project {
+  id: string;
+  name: string;
+  cwd: string;
+  model: string;
+  expanded: boolean;
+}
+
+export interface Thread {
+  id: string;
+  projectId: string;
+  title: string;
+  session: ProviderSession | null;
+  messages: ChatMessage[];
+  events: ProviderEvent[];
+  error: string | null;
+  createdAt: string;
+}