diff --git a/AGENTS.md b/AGENTS.md
index 0731b9a..c5455dc 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -26,8 +26,8 @@ of the product.
   the behavior implied by its name; do not move unrelated actions into it to hide
   coordination. An optional feature must be removable by deleting its import and
   composition node without breaking sibling capabilities.
-- Express UI variants with focused components and early returns. Do not accumulate
-  JSX in mutable variables or turn one component into a dispatcher for unrelated UI.
+- Mutable JSX variables are an antipattern. Compose focused components with early
+  returns instead of assigning JSX to `let` variables.
 - Keep one source of truth and derive the rest. Model state with one explicit status,
   not overlapping booleans or synchronization effects.
 - Keep logic above JSX. Avoid ternaries and boolean chains in markup. Use
diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md
index 9f97e10..003fd56 100644
--- a/ARCHITECTURE.md
+++ b/ARCHITECTURE.md
@@ -226,11 +226,17 @@ lib/            lowest-level reusable modules and extractable feature packages
   chat-voice-input/
                 self-contained voice input package
 components/
+  app-header.tsx
+                shared route header and optional workspace/preview actions
+  app-sidebar.tsx
+                responsive application navigation and session management
+  session-list-item.tsx
+                session navigation row, rename, and row actions
   ui/           generic visual primitives
-  composer/     message input, optional controls, and submit composition
-  code/         Pierre-backed source and diff facades
-  session/      conversation, activity, navigation, and preview control
-  workspace/    file navigation, tree, queries, and panel
+  chat/         reusable chat layout, actions, scrolling, and composition
+  code/         lazy Pierre-backed diff facade
+  session/      session lifecycle, messages, activity, and preview control
+  workspace/    file navigation, tree, queries, source viewer, and panel
 app/            routes, pages, providers, and top-level wiring
 tests/          pure contract and runtime tests
 vercel.json     Vite web service plus Eve service
diff --git a/app/app.tsx b/app/app.tsx
index dc359b2..d60a74d 100644
--- a/app/app.tsx
+++ b/app/app.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { href, Outlet, useMatch, useNavigate } from "react-router";
 
-import { SessionSidebar } from "@/components/session/sidebar";
+import { AppSidebar } from "@/components/app-sidebar";
 import { useComposerStore } from "@/lib/composer-store";
 
 function useMediaQuery(query: string): boolean {
@@ -44,7 +44,7 @@ export function App() {
 
   return (
     <div className="flex h-dvh overflow-hidden bg-background text-foreground">
-      <SessionSidebar
+      <AppSidebar
         isCollapsed={isSidebarCollapsed && !isMobile}
         isOpen={isSidebarOpen}
         onClose={() => setSidebarOpen(false)}
diff --git a/app/home-page.tsx b/app/home-page.tsx
index 2eb0b6a..9ec3e1a 100644
--- a/app/home-page.tsx
+++ b/app/home-page.tsx
@@ -1,7 +1,7 @@
 import { useConvexMutation } from "@convex-dev/react-query";
 import { href, useNavigate } from "react-router";
 
-import { PageHeader } from "@/components/session/page-header";
+import { AppHeader } from "@/components/app-header";
 import { SessionStart } from "@/components/session/session-start";
 import { api } from "@/convex/_generated/api";
 import type { GitRepository } from "@/lib/github";
@@ -37,7 +37,7 @@ export function HomePage() {
 
   return (
     <main className="flex min-w-0 flex-1 flex-col bg-background">
-      <PageHeader title="New session" />
+      <AppHeader title="New session" />
       <SessionStart onImport={importRepository} onStart={startSession} />
     </main>
   );
diff --git a/biome.json b/biome.json
index 48f07f1..41279a5 100644
--- a/biome.json
+++ b/biome.json
@@ -41,7 +41,6 @@
     {
       "includes": [
         "components/code/diff-renderer.tsx",
-        "components/code/file-viewer.tsx",
         "components/workspace/use-workspace-tree.ts",
         "components/workspace/workspace-browser.tsx",
         "components/workspace/workspace-panel.tsx",
diff --git a/components/app-header.tsx b/components/app-header.tsx
new file mode 100644
index 0000000..98bb40f
--- /dev/null
+++ b/components/app-header.tsx
@@ -0,0 +1,182 @@
+import { Download, GitFork, PanelLeft, PanelRight, SquarePen, X } from "lucide-react";
+import { useOutletContext } from "react-router";
+
+import { PreviewControl } from "@/components/session/preview-control";
+import { Button } from "@/components/ui/button";
+import { MenuItem } from "@/components/ui/menu";
+import type { Preview } from "@/lib/preview";
+import { getWorkspaceUrl } from "@/lib/workspace";
+
+type AppHeaderProps = {
+  readonly branch?: string;
+  readonly isWorkspaceOpen?: boolean;
+  readonly onToggleWorkspace?: () => void;
+  readonly preview?: Preview;
+  readonly repository?: string;
+  readonly title: string;
+  readonly workspaceSessionId?: string;
+};
+
+type SidebarContext = {
+  readonly isSidebarExpanded: boolean;
+  readonly openNewSession: () => void;
+  readonly toggleSidebar: () => void;
+};
+
+function WorkspaceToggleIcon({ isOpen }: { readonly isOpen: boolean }) {
+  if (!isOpen) return <PanelRight aria-hidden="true" />;
+
+  return (
+    <>
+      <X aria-hidden="true" className="md:hidden" />
+      <PanelRight aria-hidden="true" className="hidden md:block" />
+    </>
+  );
+}
+
+function WorkspaceToggle({
+  isOpen,
+  onToggle,
+}: {
+  readonly isOpen?: boolean;
+  readonly onToggle?: () => void;
+}) {
+  if (!onToggle) return null;
+  const label = isOpen ? "Close files" : "Open files";
+
+  return (
+    <Button
+      aria-controls="workspace-panel"
+      aria-expanded={Boolean(isOpen)}
+      aria-label={label}
+      onClick={onToggle}
+      size="icon"
+      variant="ghost"
+    >
+      <WorkspaceToggleIcon isOpen={Boolean(isOpen)} />
+    </Button>
+  );
+}
+
+function CollapsedSidebarActions({
+  isExpanded,
+  onNewSession,
+  onToggle,
+}: {
+  readonly isExpanded: boolean;
+  readonly onNewSession: () => void;
+  readonly onToggle: () => void;
+}) {
+  if (isExpanded) return null;
+
+  return (
+    <>
+      <Button
+        aria-controls="session-sidebar"
+        aria-expanded="false"
+        aria-label="Expand sessions"
+        onClick={onToggle}
+        size="icon"
+        variant="ghost"
+      >
+        <PanelLeft aria-hidden="true" />
+      </Button>
+      <Button aria-label="New session" onClick={onNewSession} size="icon" variant="ghost">
+        <SquarePen aria-hidden="true" />
+      </Button>
+      <span aria-hidden="true" className="mx-1 h-5 w-px bg-border" />
+    </>
+  );
+}
+
+function BranchLabel({ branch }: { readonly branch?: string }) {
+  if (!branch) return null;
+  return <span className="shrink-0 font-mono text-xs">{branch}</span>;
+}
+
+function GitLabel({
+  branch,
+  repository,
+}: {
+  readonly branch?: string;
+  readonly repository?: string;
+}) {
+  if (!repository && !branch) return null;
+
+  return (
+    <span className="flex min-w-0 items-center gap-1 text-sm text-muted-foreground">
+      <GitFork aria-hidden="true" className="size-4 shrink-0" />
+      <span className="truncate">{repository ?? "Git repository"}</span>
+      <BranchLabel branch={branch} />
+    </span>
+  );
+}
+
+function WorkspaceDownloadAction({
+  menuId,
+  sessionId,
+}: {
+  readonly menuId: string;
+  readonly sessionId?: string;
+}) {
+  function onDownload(): void {
+    if (!sessionId) return;
+    window.location.assign(`${getWorkspaceUrl(sessionId)}/download`);
+  }
+
+  return (
+    <MenuItem className="text-sm" disabled={!sessionId} onClick={onDownload} popoverTarget={menuId}>
+      <Download aria-hidden="true" className="size-3.5" />
+      Download
+    </MenuItem>
+  );
+}
+
+function HeaderPreview({
+  preview,
+  sessionId,
+}: {
+  readonly preview?: Preview;
+  readonly sessionId?: string;
+}) {
+  if (!preview) return null;
+  const menuId = `sandbox-info-${preview.sandboxId}`;
+
+  return (
+    <PreviewControl
+      actions={<WorkspaceDownloadAction menuId={menuId} sessionId={sessionId} />}
+      menuId={menuId}
+      preview={preview}
+    />
+  );
+}
+
+export function AppHeader({
+  branch,
+  isWorkspaceOpen,
+  onToggleWorkspace,
+  preview,
+  repository,
+  title,
+  workspaceSessionId,
+}: AppHeaderProps) {
+  const { isSidebarExpanded, openNewSession, toggleSidebar } = useOutletContext<SidebarContext>();
+
+  return (
+    <header className="flex h-12 shrink-0 items-center gap-2 border-b px-3 sm:px-4">
+      <CollapsedSidebarActions
+        isExpanded={isSidebarExpanded}
+        onNewSession={openNewSession}
+        onToggle={toggleSidebar}
+      />
+      <div className="flex min-w-0 flex-1 items-center gap-2">
+        <h1 className="truncate font-medium">{title}</h1>
+        <GitLabel branch={branch} repository={repository} />
+      </div>
+      <div className="flex shrink-0 items-center gap-2">
+        <HeaderPreview preview={preview} sessionId={workspaceSessionId} />
+        <WorkspaceToggle isOpen={isWorkspaceOpen} onToggle={onToggleWorkspace} />
+      </div>
+    </header>
+  );
+}
diff --git a/components/session/sidebar.tsx b/components/app-sidebar.tsx
similarity index 64%
rename from components/session/sidebar.tsx
rename to components/app-sidebar.tsx
index 0a50456..96fc3d5 100644
--- a/components/session/sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -1,15 +1,75 @@
-import { useConvexPaginatedQuery } from "@convex-dev/react-query";
+import { useConvexMutation, useConvexPaginatedQuery } from "@convex-dev/react-query";
+import { useMutation } from "@tanstack/react-query";
 import { AlignLeft, PanelLeft, SquarePen, X } from "lucide-react";
 import { useState } from "react";
 import { href, useNavigate } from "react-router";
 
-import { DeleteSessionDialog } from "@/components/session/delete-dialog";
-import { SessionSidebarItem, type SessionSummary } from "@/components/session/sidebar-item";
+import { SessionListItem, type SessionSummary } from "@/components/session-list-item";
+import { Alert } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { api } from "@/convex/_generated/api";
+import { clearSessionRuntime } from "@/lib/session-runtime";
 import { cn } from "@/lib/utils";
 
-type SessionSidebarProps = {
+type DeleteSessionDialogProps = {
+  readonly onClose: () => void;
+  readonly onDeleted: (sessionId: string) => void;
+  readonly target?: SessionSummary;
+};
+
+function DeleteSessionDialog({ onClose, onDeleted, target }: DeleteSessionDialogProps) {
+  const removeSession = useMutation({ mutationFn: useConvexMutation(api.sessions.remove) });
+
+  function remove(): void {
+    if (!target) return;
+    removeSession.mutate(
+      { sessionId: target.sessionId },
+      {
+        onSuccess: () => {
+          clearSessionRuntime(target.sessionId);
+          onDeleted(target.sessionId);
+          document.querySelector<HTMLDialogElement>("#delete-session-dialog")?.close();
+        },
+      },
+    );
+  }
+
+  return (
+    <dialog
+      aria-describedby="delete-session-description"
+      aria-labelledby="delete-session-title"
+      className="m-auto w-[min(28rem,calc(100%-2rem))] rounded-xl border bg-card p-5 text-card-foreground shadow-2xl backdrop:bg-black/70"
+      id="delete-session-dialog"
+      onCancel={(event) => removeSession.isPending && event.preventDefault()}
+      onClose={() => {
+        removeSession.reset();
+        onClose();
+      }}
+    >
+      <h2 className="font-medium" id="delete-session-title">
+        Delete session permanently?
+      </h2>
+      <p className="mt-2 text-muted-foreground" id="delete-session-description">
+        “{target?.name}” and its history cannot be recovered.
+      </p>
+      {removeSession.isError && (
+        <Alert className="mt-4" variant="destructive">
+          Could not delete this session.
+        </Alert>
+      )}
+      <form className="mt-5 flex justify-end gap-2" method="dialog">
+        <Button disabled={removeSession.isPending} type="submit" variant="outline">
+          Cancel
+        </Button>
+        <Button disabled={removeSession.isPending} onClick={remove} variant="destructive">
+          Delete
+        </Button>
+      </form>
+    </dialog>
+  );
+}
+
+type AppSidebarProps = {
   readonly isCollapsed: boolean;
   readonly isOpen: boolean;
   readonly onClose: () => void;
@@ -18,14 +78,14 @@ type SessionSidebarProps = {
   readonly selectedSessionId: string | null;
 };
 
-export function SessionSidebar({
+export function AppSidebar({
   isCollapsed,
   isOpen,
   onClose,
   onNewSession,
   onToggle,
   selectedSessionId,
-}: SessionSidebarProps) {
+}: AppSidebarProps) {
   const {
     loadMore,
     results: sessions,
@@ -106,7 +166,7 @@ export function SessionSidebar({
         >
           <p className="px-2 pb-1.5 text-sm font-medium text-muted-foreground">Sessions</p>
           {sessions.map((session) => (
-            <SessionSidebarItem
+            <SessionListItem
               isSelected={selectedSessionId === session.sessionId}
               key={session.sessionId}
               onDelete={openDelete}
diff --git a/components/chat/composer.tsx b/components/chat/composer.tsx
new file mode 100644
index 0000000..af3031f
--- /dev/null
+++ b/components/chat/composer.tsx
@@ -0,0 +1,113 @@
+import { ArrowUp, Square } from "lucide-react";
+import { type KeyboardEvent, type SubmitEvent, useEffect, useRef } from "react";
+
+import { Button } from "@/components/ui/button";
+import ChatVoiceInput from "@/lib/chat-voice-input";
+import { useComposerStore } from "@/lib/composer-store";
+
+type ComposerProps = {
+  readonly disabled: boolean;
+  readonly isGenerating: boolean;
+  readonly onSend: (message: string) => void;
+  readonly onStop?: () => void;
+};
+
+type TextInputProps = {
+  readonly disabled: boolean;
+  readonly onValueChange: (value: string) => void;
+  readonly value: string;
+};
+
+type SubmitButtonProps = Pick<ComposerProps, "disabled" | "isGenerating" | "onStop">;
+
+function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>): void {
+  if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
+
+  event.preventDefault();
+  event.currentTarget.form?.requestSubmit();
+}
+
+function TextInput({ disabled, onValueChange, value }: TextInputProps) {
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (!disabled) textareaRef.current?.focus();
+  }, [disabled]);
+
+  return (
+    <>
+      <label className="sr-only" htmlFor="message-input">
+        Do anything
+      </label>
+      <textarea
+        id="message-input"
+        className="max-h-48 min-h-16 w-full resize-none overflow-y-auto bg-transparent px-2 py-1 outline-none [field-sizing:content] placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
+        autoComplete="off"
+        disabled={disabled}
+        onChange={(event) => onValueChange(event.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Do anything"
+        ref={textareaRef}
+        rows={1}
+        value={value}
+      />
+    </>
+  );
+}
+
+function SubmitButton({ disabled, isGenerating, onStop }: SubmitButtonProps) {
+  if (isGenerating) {
+    return (
+      <Button
+        aria-label="Stop generating"
+        className="size-8 rounded-full"
+        disabled={!onStop}
+        onClick={onStop}
+        size="icon-sm"
+      >
+        <Square aria-hidden="true" className="fill-current" />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      aria-label="Send message"
+      className="size-8 rounded-full"
+      disabled={disabled}
+      size="icon-sm"
+      type="submit"
+    >
+      <ArrowUp aria-hidden="true" className="size-[18px]" />
+    </Button>
+  );
+}
+
+export function Composer({ disabled, isGenerating, onSend, onStop }: ComposerProps) {
+  const value = useComposerStore((state) => state.draft);
+  const onValueChange = useComposerStore((state) => state.setDraft);
+
+  function handleSubmit(event: SubmitEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    const message = value.trim();
+    if (!message || disabled || isGenerating) return;
+    onValueChange("");
+    onSend(message);
+  }
+
+  const audioDisabled = disabled || isGenerating;
+  const submitDisabled = disabled || !value.trim();
+
+  return (
+    <form
+      className="mx-auto max-w-3xl rounded-2xl border border-border/40 bg-muted p-2 transition-colors focus-within:border-ring/50"
+      onSubmit={handleSubmit}
+    >
+      <TextInput disabled={disabled} onValueChange={onValueChange} value={value} />
+      <div className="flex min-w-0 items-center justify-end gap-1 pt-1">
+        <ChatVoiceInput disabled={audioDisabled} onValueChange={onValueChange} value={value} />
+        <SubmitButton disabled={submitDisabled} isGenerating={isGenerating} onStop={onStop} />
+      </div>
+    </form>
+  );
+}
diff --git a/components/chat/message.tsx b/components/chat/message.tsx
new file mode 100644
index 0000000..fbd335d
--- /dev/null
+++ b/components/chat/message.tsx
@@ -0,0 +1,95 @@
+import { Check, Copy } from "lucide-react";
+import { type ComponentProps, type ReactNode, useEffect, useState } from "react";
+
+import { ThreadMessage } from "@/components/chat/thread";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type MessageProps = {
+  readonly actions?: ReactNode;
+  readonly children: ReactNode;
+  readonly messageId: string;
+};
+
+const timeFormatter = new Intl.DateTimeFormat(undefined, {
+  hour: "numeric",
+  minute: "2-digit",
+});
+
+type MessageActionsProps = ComponentProps<"div"> & {
+  readonly createdAt?: number;
+  readonly text: string;
+};
+
+export function MessageActions({ className, createdAt, text, ...props }: MessageActionsProps) {
+  const [isCopied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!isCopied) return;
+    const timeout = window.setTimeout(() => setCopied(false), 1_200);
+    return () => window.clearTimeout(timeout);
+  }, [isCopied]);
+
+  async function copy(): Promise<void> {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex h-6 items-center gap-1 text-muted-foreground sm:opacity-0 sm:transition-opacity sm:group-hover/message:opacity-100 sm:group-focus-within/message:opacity-100",
+        className,
+      )}
+      {...props}
+    >
+      {createdAt !== undefined && (
+        <time className="text-sm" dateTime={new Date(createdAt).toISOString()}>
+          {timeFormatter.format(createdAt)}
+        </time>
+      )}
+      <Button
+        aria-label={isCopied ? "Copied" : "Copy message"}
+        className="text-muted-foreground"
+        onClick={copy}
+        size="icon-sm"
+        title="Copy"
+        variant="ghost"
+      >
+        {isCopied && <Check aria-hidden="true" className="fade" />}
+        {!isCopied && <Copy aria-hidden="true" />}
+      </Button>
+    </div>
+  );
+}
+
+export function UserMessage({ actions, children, messageId }: MessageProps) {
+  return (
+    <ThreadMessage messageId={messageId}>
+      <article
+        aria-label="You"
+        className="group/message relative flex flex-col items-end pt-3 pb-10"
+      >
+        <div className="max-w-[85%] wrap-anywhere whitespace-pre-wrap rounded-xl bg-muted px-4 py-2 leading-chat sm:max-w-[75%]">
+          {children}
+        </div>
+        {actions && <div className="absolute right-0 bottom-3">{actions}</div>}
+      </article>
+    </ThreadMessage>
+  );
+}
+
+export function AssistantMessage({ actions, children, messageId }: MessageProps) {
+  const className = actions
+    ? "group/message relative pt-3 pb-12"
+    : "group/message relative pt-3 pb-5";
+
+  return (
+    <ThreadMessage messageId={messageId}>
+      <article aria-label="Assistant" className={className}>
+        <div>{children}</div>
+        {actions && <div className="absolute bottom-5 left-0">{actions}</div>}
+      </article>
+    </ThreadMessage>
+  );
+}
diff --git a/components/chat/thread.tsx b/components/chat/thread.tsx
new file mode 100644
index 0000000..6451468
--- /dev/null
+++ b/components/chat/thread.tsx
@@ -0,0 +1,38 @@
+import { MessageScroller } from "@shadcn/react/message-scroller";
+import { ArrowDown } from "lucide-react";
+import type { ComponentProps, PropsWithChildren } from "react";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+function Thread({ children }: PropsWithChildren) {
+  return (
+    <MessageScroller.Provider autoScroll>
+      <MessageScroller.Root className="relative min-h-0 flex-1 overflow-hidden">
+        <MessageScroller.Viewport className="app-scrollbar scroll-fade size-full overflow-y-auto overscroll-contain scrollbar-gutter-stable">
+          <MessageScroller.Content className="flex h-max min-h-full flex-col px-4 py-5 sm:px-6">
+            {children}
+          </MessageScroller.Content>
+        </MessageScroller.Viewport>
+        <MessageScroller.Button
+          className="absolute bottom-3 left-1/2 z-10 size-8 -translate-x-1/2 rounded-full bg-background shadow-md transition-[opacity,scale] data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0"
+          render={<Button size="icon-sm" variant="outline" />}
+        >
+          <ArrowDown aria-hidden="true" />
+          <span className="sr-only">Jump to latest</span>
+        </MessageScroller.Button>
+      </MessageScroller.Root>
+    </MessageScroller.Provider>
+  );
+}
+
+function ThreadMessage({ className, ...props }: ComponentProps<typeof MessageScroller.Item>) {
+  return (
+    <MessageScroller.Item
+      className={cn("mx-auto w-full max-w-3xl min-w-0 shrink-0", className)}
+      {...props}
+    />
+  );
+}
+
+export { Thread, ThreadMessage };
diff --git a/components/code/file-viewer.tsx b/components/code/file-viewer.tsx
deleted file mode 100644
index f62953c..0000000
--- a/components/code/file-viewer.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { File } from "@pierre/diffs/react";
-
-const fileOptions = {
-  disableFileHeader: true,
-  theme: "pierre-dark-soft",
-  themeType: "dark",
-  unsafeCSS: "pre { --diffs-bg: var(--background) !important; }",
-} as const;
-
-export default function FileViewer({
-  contents,
-  path,
-}: {
-  readonly contents: string;
-  readonly path: string;
-}) {
-  const file = { contents, name: path };
-  return <File className="app-scrollbar workspace-file" file={file} options={fileOptions} />;
-}
diff --git a/components/composer/composer.tsx b/components/composer/composer.tsx
deleted file mode 100644
index b771b93..0000000
--- a/components/composer/composer.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { ArrowUp, Square } from "lucide-react";
-import { type FormEvent, type KeyboardEvent, useEffect, useRef } from "react";
-
-import { Button } from "@/components/ui/button";
-import ChatVoiceInput from "@/lib/chat-voice-input";
-import { useComposerStore } from "@/lib/composer-store";
-
-type ComposerProps = {
-  readonly disabled?: boolean;
-  readonly isGenerating?: boolean;
-  readonly onSend: (message: string) => void;
-  readonly onStop?: () => void;
-};
-
-function SubmitButton({
-  disabled,
-  isGenerating,
-  onStop,
-}: {
-  readonly disabled: boolean;
-  readonly isGenerating: boolean;
-  readonly onStop?: () => void;
-}) {
-  if (isGenerating) {
-    return (
-      <Button
-        aria-label="Stop generating"
-        className="size-8 rounded-full"
-        disabled={!onStop}
-        onClick={onStop}
-        size="icon-sm"
-      >
-        <Square aria-hidden="true" className="fill-current" />
-      </Button>
-    );
-  }
-
-  return (
-    <Button
-      aria-label="Send message"
-      className="size-8 rounded-full"
-      disabled={disabled}
-      size="icon-sm"
-      type="submit"
-    >
-      <ArrowUp aria-hidden="true" className="size-[18px]" />
-    </Button>
-  );
-}
-
-function handleKeyDown(event: KeyboardEvent<HTMLTextAreaElement>): void {
-  if (event.key !== "Enter" || event.shiftKey || event.nativeEvent.isComposing) return;
-
-  event.preventDefault();
-  event.currentTarget.form?.requestSubmit();
-}
-
-export function Composer({
-  disabled = false,
-  isGenerating = false,
-  onSend,
-  onStop,
-}: ComposerProps) {
-  const value = useComposerStore((state) => state.draft);
-  const onChange = useComposerStore((state) => state.setDraft);
-  const textareaRef = useRef<HTMLTextAreaElement>(null);
-
-  useEffect(() => {
-    if (!disabled) textareaRef.current?.focus();
-  }, [disabled]);
-
-  function handleSubmit(event: FormEvent<HTMLFormElement>): void {
-    event.preventDefault();
-    const message = value.trim();
-    if (!message || disabled || isGenerating) return;
-    onChange("");
-    onSend(message);
-  }
-
-  const audioDisabled = disabled || isGenerating;
-  const submitDisabled = disabled || !value.trim();
-
-  return (
-    <div className="shrink-0 px-4 pb-[max(1.5rem,env(safe-area-inset-bottom))] sm:px-6">
-      <form
-        className="mx-auto max-w-3xl rounded-2xl border border-border/40 bg-muted p-2 transition-colors focus-within:border-ring/50"
-        onSubmit={handleSubmit}
-      >
-        <label className="sr-only" htmlFor="message-input">
-          Message eve-code
-        </label>
-        <textarea
-          autoComplete="off"
-          className="max-h-48 min-h-16 w-full resize-none overflow-y-auto bg-transparent px-2 py-1 outline-none [field-sizing:content] placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50"
-          disabled={disabled}
-          id="message-input"
-          onChange={(event) => onChange(event.target.value)}
-          onKeyDown={handleKeyDown}
-          placeholder="Message eve-code"
-          ref={textareaRef}
-          rows={1}
-          value={value}
-        />
-        <div className="flex min-w-0 items-center justify-end gap-1 pt-1">
-          <ChatVoiceInput disabled={audioDisabled} onValueChange={onChange} value={value} />
-          <SubmitButton disabled={submitDisabled} isGenerating={isGenerating} onStop={onStop} />
-        </div>
-      </form>
-    </div>
-  );
-}
diff --git a/components/session/sidebar-item.tsx b/components/session-list-item.tsx
similarity index 59%
rename from components/session/sidebar-item.tsx
rename to components/session-list-item.tsx
index 074671f..c015dc4 100644
--- a/components/session/sidebar-item.tsx
+++ b/components/session-list-item.tsx
@@ -1,9 +1,12 @@
 import { useConvexMutation } from "@convex-dev/react-query";
 import { useMutation } from "@tanstack/react-query";
-import { type FormEvent, type KeyboardEvent, useEffect, useRef, useState } from "react";
+import { EllipsisVertical, LoaderCircle, Pencil, Trash2 } from "lucide-react";
+import { type KeyboardEvent, type SubmitEvent, useEffect, useRef, useState } from "react";
 import { href, Link } from "react-router";
-import { SessionSidebarActions } from "@/components/session/sidebar-actions";
+
 import type { SessionStatus } from "@/components/session/use-session";
+import { Button } from "@/components/ui/button";
+import { getMenuAnchorStyle, MenuContent, MenuItem } from "@/components/ui/menu";
 import { api } from "@/convex/_generated/api";
 import { cn } from "@/lib/utils";
 
@@ -13,7 +16,67 @@ export type SessionSummary = {
   readonly status: SessionStatus;
 };
 
-export function SessionSidebarItem({
+type SessionListActionsProps = {
+  readonly name: string;
+  readonly onDelete: () => void;
+  readonly onRename: () => void;
+  readonly sessionId: string;
+  readonly status: SessionStatus;
+};
+
+function SessionListActions({
+  name,
+  onDelete,
+  onRename,
+  sessionId,
+  status,
+}: SessionListActionsProps) {
+  const id = `session-actions-${sessionId}`;
+  const isActive = status === "running" || status === "stopping";
+
+  return (
+    <div className="relative mr-0.5 grid size-6 shrink-0 place-items-center">
+      {isActive && (
+        <LoaderCircle
+          aria-label={`${name} is working`}
+          className="hidden size-4 animate-spin text-muted-foreground md:block md:group-hover:opacity-0 md:group-focus-within:opacity-0"
+          role="status"
+        />
+      )}
+      <Button
+        aria-label={`More options for ${name}`}
+        className="absolute inset-0 text-muted-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+        popoverTarget={id}
+        size="icon-sm"
+        style={getMenuAnchorStyle(id)}
+        variant="ghost"
+      >
+        <EllipsisVertical aria-hidden="true" />
+      </Button>
+      <MenuContent
+        className="w-40 [position-area:bottom_span-left] [position-try-fallbacks:flip-block]"
+        id={id}
+        side="bottom"
+      >
+        <MenuItem onClick={onRename} popoverTarget={id}>
+          <Pencil aria-hidden="true" />
+          Rename
+        </MenuItem>
+        <MenuItem
+          className="text-destructive"
+          disabled={isActive}
+          onClick={onDelete}
+          popoverTarget={id}
+        >
+          <Trash2 aria-hidden="true" />
+          Delete
+        </MenuItem>
+      </MenuContent>
+    </div>
+  );
+}
+
+export function SessionListItem({
   isSelected,
   onDelete,
   onNavigate,
@@ -47,7 +110,7 @@ export function SessionSidebarItem({
     renameSession.mutate({ name, sessionId: session.sessionId });
   }
 
-  function submit(event: FormEvent<HTMLFormElement>): void {
+  function submit(event: SubmitEvent<HTMLFormElement>): void {
     event.preventDefault();
     inputRef.current?.blur();
   }
@@ -92,7 +155,7 @@ export function SessionSidebarItem({
         </Link>
       )}
       {!isEditing && (
-        <SessionSidebarActions
+        <SessionListActions
           name={session.name}
           onDelete={() => onDelete(session)}
           onRename={() => {
diff --git a/components/session/conversation.tsx b/components/session/conversation.tsx
deleted file mode 100644
index 1c49a00..0000000
--- a/components/session/conversation.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Brain } from "lucide-react";
-
-import { Message } from "@/components/session/message";
-import { ModelActivity } from "@/components/session/model-activity";
-import type { useSession } from "@/components/session/use-session";
-import { MessageScrollerItem } from "@/components/ui/message-scroller";
-
-type ConversationProps = {
-  readonly view: ReturnType<typeof useSession>;
-};
-
-export function Conversation({ view }: ConversationProps) {
-  return (
-    <>
-      {view.messages.map((message) => (
-        <Message
-          canAnswer={!view.isGenerating && !view.isStopping}
-          createdAt={message.createdAt}
-          isActive={view.isGenerating && message.metadata?.status === "streaming"}
-          key={message.id}
-          message={message}
-          onAnswer={view.answerQuestion}
-          pendingRequestId={view.pendingInput?.requestId}
-          timings={view.timings}
-        />
-      ))}
-      {view.activityLabel && (
-        <MessageScrollerItem>
-          <div className="pt-3 pb-8">
-            <ModelActivity icon={Brain} isAnimated label={view.activityLabel} />
-          </div>
-        </MessageScrollerItem>
-      )}
-    </>
-  );
-}
diff --git a/components/session/delete-dialog.tsx b/components/session/delete-dialog.tsx
deleted file mode 100644
index 3a6e0e3..0000000
--- a/components/session/delete-dialog.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { useConvexMutation } from "@convex-dev/react-query";
-import { useMutation } from "@tanstack/react-query";
-
-import type { SessionSummary } from "@/components/session/sidebar-item";
-import { Alert } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { api } from "@/convex/_generated/api";
-import { clearSessionRuntime } from "@/lib/session-runtime";
-
-type DeleteSessionDialogProps = {
-  readonly onClose: () => void;
-  readonly onDeleted: (sessionId: string) => void;
-  readonly target?: SessionSummary;
-};
-
-export function DeleteSessionDialog({ onClose, onDeleted, target }: DeleteSessionDialogProps) {
-  const removeSession = useMutation({ mutationFn: useConvexMutation(api.sessions.remove) });
-
-  function remove(): void {
-    if (!target) return;
-    removeSession.mutate(
-      { sessionId: target.sessionId },
-      {
-        onSuccess: () => {
-          clearSessionRuntime(target.sessionId);
-          onDeleted(target.sessionId);
-          document.querySelector<HTMLDialogElement>("#delete-session-dialog")?.close();
-        },
-      },
-    );
-  }
-
-  return (
-    <dialog
-      aria-describedby="delete-session-description"
-      aria-labelledby="delete-session-title"
-      className="m-auto w-[min(28rem,calc(100%-2rem))] rounded-xl border bg-card p-5 text-card-foreground shadow-2xl backdrop:bg-black/70"
-      id="delete-session-dialog"
-      onCancel={(event) => removeSession.isPending && event.preventDefault()}
-      onClose={() => {
-        removeSession.reset();
-        onClose();
-      }}
-    >
-      <h2 className="font-medium" id="delete-session-title">
-        Delete session permanently?
-      </h2>
-      <p className="mt-2 text-muted-foreground" id="delete-session-description">
-        “{target?.name}” and its history cannot be recovered.
-      </p>
-      {removeSession.isError && (
-        <Alert className="mt-4" variant="destructive">
-          Could not delete this session.
-        </Alert>
-      )}
-      <form className="mt-5 flex justify-end gap-2" method="dialog">
-        <Button disabled={removeSession.isPending} type="submit" variant="outline">
-          Cancel
-        </Button>
-        <Button disabled={removeSession.isPending} onClick={remove} variant="destructive">
-          Delete
-        </Button>
-      </form>
-    </dialog>
-  );
-}
diff --git a/components/session/input-request.tsx b/components/session/input-request.tsx
index c825692..c768084 100644
--- a/components/session/input-request.tsx
+++ b/components/session/input-request.tsx
@@ -28,8 +28,8 @@ export function InputRequest({ disabled, onSelect, request, response }: InputReq
         <div className="mt-3 flex w-full flex-wrap gap-2">
           {options.map((option) => {
             const selected = response?.optionId === option.id;
-            let variant: "default" | "outline" = "outline";
-            if (selected || (!answered && option.style === "primary")) variant = "default";
+            const variant =
+              selected || (!answered && option.style === "primary") ? "default" : "outline";
             return (
               <Button
                 aria-pressed={selected}
diff --git a/components/session/markdown-message.tsx b/components/session/markdown-message.tsx
deleted file mode 100644
index 55ec659..0000000
--- a/components/session/markdown-message.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { Streamdown } from "streamdown";
-
-import "streamdown/styles.css";
-
-type MarkdownMessageProps = {
-  readonly isAnimating: boolean;
-  readonly text: string;
-};
-
-const CONTROLS = { table: false } as const;
-
-export default function MarkdownMessage({ isAnimating, text }: MarkdownMessageProps) {
-  return (
-    <Streamdown
-      className="model-response my-1 wrap-anywhere space-y-2 first:mt-0 last:mb-0 [&_li]:py-0 [&_p]:leading-chat"
-      controls={CONTROLS}
-      isAnimating={isAnimating}
-    >
-      {text}
-    </Streamdown>
-  );
-}
diff --git a/components/session/message.tsx b/components/session/messages.tsx
similarity index 58%
rename from components/session/message.tsx
rename to components/session/messages.tsx
index 9764687..b38cf1a 100644
--- a/components/session/message.tsx
+++ b/components/session/messages.tsx
@@ -1,28 +1,26 @@
 import type { EveMessage, EveMessagePart } from "eve/client";
 import { Brain } from "lucide-react";
+import { Streamdown } from "streamdown";
 
+import { AssistantMessage, MessageActions, UserMessage } from "@/components/chat/message";
+import { ThreadMessage } from "@/components/chat/thread";
 import { InputRequest } from "@/components/session/input-request";
-import MarkdownMessage from "@/components/session/markdown-message";
-import { ModelActivity } from "@/components/session/model-activity";
+import { ModelActivity, useElapsed } from "@/components/session/model-activity";
 import { ToolActivity } from "@/components/session/tool-activity";
-import { useElapsed } from "@/components/session/use-elapsed";
-import { CopyButton } from "@/components/ui/copy-button";
-import { MessageScrollerItem } from "@/components/ui/message-scroller";
+import type { useSession } from "@/components/session/use-session";
 import { type ActivityTiming, getReasoningTimingKey, getToolTimingKey } from "@/lib/eve-events";
 
-type Timings = ReadonlyMap<string, ActivityTiming>;
+import "streamdown/styles.css";
+
+const messageControls = { table: false } as const;
 
-const timeFormatter = new Intl.DateTimeFormat(undefined, {
-  hour: "numeric",
-  minute: "2-digit",
-});
+type Timings = ReadonlyMap<string, ActivityTiming>;
 
 function isRenderedPart(part: EveMessagePart): boolean {
-  if (part.type === "dynamic-tool" && part.toolName === "ask_question") {
-    return part.toolMetadata?.eve?.inputRequest !== undefined;
-  }
-  if (part.type === "dynamic-tool") return true;
   if (part.type === "text" || part.type === "reasoning") return part.text.trim().length > 0;
+  if (part.type === "dynamic-tool") {
+    return part.toolName !== "ask_question" || part.toolMetadata?.eve?.inputRequest !== undefined;
+  }
   return false;
 }
 
@@ -34,22 +32,15 @@ function getPartKey(part: EveMessagePart, index: number): string {
   return `${part.type}:${index}`;
 }
 
-function MessageActions({
-  createdAt,
-  text,
-}: {
-  readonly createdAt?: number;
-  readonly text: string;
-}) {
+function MarkdownMessage({ isAnimating, text }: { isAnimating: boolean; text: string }) {
   return (
-    <div className="mt-1 flex h-6 items-center gap-1 text-muted-foreground sm:opacity-0 sm:transition-opacity sm:group-hover/message:opacity-100 sm:group-focus-within/message:opacity-100">
-      {createdAt !== undefined && (
-        <time className="text-sm" dateTime={new Date(createdAt).toISOString()}>
-          {timeFormatter.format(createdAt)}
-        </time>
-      )}
-      <CopyButton value={text} />
-    </div>
+    <Streamdown
+      className="model-response my-1 wrap-anywhere space-y-2 first:mt-0 last:mb-0 [&_li]:py-0 [&_p]:leading-chat"
+      controls={messageControls}
+      isAnimating={isAnimating}
+    >
+      {text}
+    </Streamdown>
   );
 }
 
@@ -117,7 +108,7 @@ function AssistantPart({
   return null;
 }
 
-type MessageProps = {
+type SessionMessageProps = {
   readonly canAnswer: boolean;
   readonly createdAt?: number;
   readonly isActive: boolean;
@@ -127,7 +118,7 @@ type MessageProps = {
   readonly timings: Timings;
 };
 
-export function Message({
+function SessionMessage({
   canAnswer,
   createdAt,
   isActive,
@@ -135,47 +126,73 @@ export function Message({
   onAnswer,
   pendingRequestId,
   timings,
-}: MessageProps) {
+}: SessionMessageProps) {
   const textParts = message.parts.filter((part) => part.type === "text");
   const text = textParts.map((part) => part.text).join("\n\n");
 
   if (message.role === "user") {
     if (!text.trim()) return null;
     return (
-      <MessageScrollerItem messageId={message.id}>
-        <article aria-label="You" className="group/message flex flex-col items-end py-3">
-          <p className="max-w-[85%] wrap-anywhere whitespace-pre-wrap rounded-xl bg-muted px-4 py-2 leading-chat sm:max-w-[75%]">
-            {text}
-          </p>
-          <MessageActions createdAt={createdAt} text={text} />
-        </article>
-      </MessageScrollerItem>
+      <UserMessage
+        actions={<MessageActions createdAt={createdAt} text={text} />}
+        messageId={message.id}
+      >
+        {text}
+      </UserMessage>
     );
   }
 
   const parts = message.parts.filter(isRenderedPart);
   if (parts.length === 0) return null;
-  const showActions = Boolean(text) && !isActive;
+  const actions = text ? (
+    <MessageActions
+      aria-hidden={isActive}
+      className={isActive ? "invisible" : undefined}
+      createdAt={createdAt}
+      text={text}
+    />
+  ) : undefined;
+
+  return (
+    <AssistantMessage actions={actions} messageId={message.id}>
+      {parts.map((part, index) => (
+        <AssistantPart
+          canAnswer={canAnswer}
+          isActive={isActive}
+          key={getPartKey(part, index)}
+          message={message}
+          onAnswer={onAnswer}
+          part={part}
+          pendingRequestId={pendingRequestId}
+          timings={timings}
+        />
+      ))}
+    </AssistantMessage>
+  );
+}
 
+export function SessionMessages({ view }: { readonly view: ReturnType<typeof useSession> }) {
   return (
-    <MessageScrollerItem messageId={message.id}>
-      <article aria-label="eve-code" className="group/message pt-3 pb-5">
-        <div>
-          {parts.map((part, index) => (
-            <AssistantPart
-              canAnswer={canAnswer}
-              isActive={isActive}
-              key={getPartKey(part, index)}
-              message={message}
-              onAnswer={onAnswer}
-              part={part}
-              pendingRequestId={pendingRequestId}
-              timings={timings}
-            />
-          ))}
-        </div>
-        {showActions && <MessageActions createdAt={createdAt} text={text} />}
-      </article>
-    </MessageScrollerItem>
+    <>
+      {view.messages.map((message) => (
+        <SessionMessage
+          canAnswer={!view.isGenerating && !view.isStopping}
+          createdAt={message.createdAt}
+          isActive={view.isGenerating && message.metadata?.status === "streaming"}
+          key={message.id}
+          message={message}
+          onAnswer={view.answerQuestion}
+          pendingRequestId={view.pendingInput?.requestId}
+          timings={view.timings}
+        />
+      ))}
+      {view.activityLabel && (
+        <ThreadMessage>
+          <div className="pt-3 pb-8">
+            <ModelActivity icon={Brain} isAnimated label={view.activityLabel} />
+          </div>
+        </ThreadMessage>
+      )}
+    </>
   );
 }
diff --git a/components/session/model-activity.tsx b/components/session/model-activity.tsx
index 004b369..5047c03 100644
--- a/components/session/model-activity.tsx
+++ b/components/session/model-activity.tsx
@@ -1,5 +1,35 @@
 import { ChevronRight, type LucideIcon } from "lucide-react";
-import type { ReactNode } from "react";
+import { type ReactNode, useEffect, useState } from "react";
+
+import type { ActivityTiming } from "@/lib/eve-events";
+
+function formatElapsed(milliseconds: number): string {
+  const seconds = Math.max(Math.round(milliseconds / 1000), 1);
+  if (seconds < 60) return `${seconds}s`;
+  const minutes = Math.floor(seconds / 60);
+  if (minutes < 60) return `${minutes}m ${seconds % 60}s`;
+  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
+}
+
+export function useElapsed(
+  timing: ActivityTiming | undefined,
+  isRunning: boolean,
+): string | undefined {
+  const isTicking = isRunning && timing?.startedAt !== undefined && timing.endedAt === undefined;
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!isTicking) return;
+    setNow(Date.now());
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, [isTicking]);
+
+  if (timing?.startedAt === undefined) return;
+  const endedAt = timing.endedAt ?? (isTicking ? now : undefined);
+  if (endedAt === undefined) return;
+  return formatElapsed(endedAt - timing.startedAt);
+}
 
 type ModelActivityProps = {
   readonly children?: ReactNode;
@@ -11,15 +41,16 @@ type ModelActivityProps = {
   readonly meta?: ReactNode;
 };
 
-function ActivitySummary({
+export function ModelActivity({
+  children,
   detail,
   elapsed,
   icon: Icon,
   isAnimated,
   label,
   meta,
-}: Omit<ModelActivityProps, "children">) {
-  return (
+}: ModelActivityProps) {
+  const summary = (
     <>
       <Icon aria-hidden="true" className="shrink-0 self-center" />
       <span className="min-w-0 truncate">
@@ -30,27 +61,6 @@ function ActivitySummary({
       {meta}
     </>
   );
-}
-
-export function ModelActivity({
-  children,
-  detail,
-  elapsed,
-  icon,
-  isAnimated,
-  label,
-  meta,
-}: ModelActivityProps) {
-  const summary = (
-    <ActivitySummary
-      detail={detail}
-      elapsed={elapsed}
-      icon={icon}
-      isAnimated={isAnimated}
-      label={label}
-      meta={meta}
-    />
-  );
 
   if (!children) {
     return (
diff --git a/components/session/page-header.tsx b/components/session/page-header.tsx
deleted file mode 100644
index f9b6d11..0000000
--- a/components/session/page-header.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { GitFork, PanelLeft, PanelRight, SquarePen, X } from "lucide-react";
-import { useOutletContext } from "react-router";
-
-import { SandboxControl } from "@/components/session/sandbox-control";
-import { Button } from "@/components/ui/button";
-import type { Preview } from "@/lib/preview";
-
-type PageHeaderProps = {
-  readonly branch?: string;
-  readonly isWorkspaceOpen?: boolean;
-  readonly onToggleWorkspace?: () => void;
-  readonly preview?: Preview;
-  readonly repository?: string;
-  readonly title: string;
-  readonly workspaceSessionId?: string;
-};
-
-type SidebarContext = {
-  readonly isSidebarExpanded: boolean;
-  readonly openNewSession: () => void;
-  readonly toggleSidebar: () => void;
-};
-
-function WorkspaceToggle({
-  isOpen,
-  onToggle,
-}: {
-  readonly isOpen?: boolean;
-  readonly onToggle?: () => void;
-}) {
-  if (!onToggle) return null;
-  const label = isOpen ? "Close files" : "Open files";
-  let icon = <PanelRight aria-hidden="true" />;
-  if (isOpen) {
-    icon = (
-      <>
-        <X aria-hidden="true" className="md:hidden" />
-        <PanelRight aria-hidden="true" className="hidden md:block" />
-      </>
-    );
-  }
-  return (
-    <Button
-      aria-controls="workspace-panel"
-      aria-expanded={Boolean(isOpen)}
-      aria-label={label}
-      onClick={onToggle}
-      size="icon"
-      variant="ghost"
-    >
-      {icon}
-    </Button>
-  );
-}
-
-export function PageHeader({
-  branch,
-  isWorkspaceOpen,
-  onToggleWorkspace,
-  preview,
-  repository,
-  title,
-  workspaceSessionId,
-}: PageHeaderProps) {
-  const { isSidebarExpanded, openNewSession, toggleSidebar } = useOutletContext<SidebarContext>();
-  const sandboxControl = preview ? (
-    <SandboxControl preview={preview} sessionId={workspaceSessionId} />
-  ) : null;
-  const sidebarActions = isSidebarExpanded ? null : (
-    <>
-      <Button
-        aria-controls="session-sidebar"
-        aria-expanded="false"
-        aria-label="Expand sessions"
-        onClick={toggleSidebar}
-        size="icon"
-        variant="ghost"
-      >
-        <PanelLeft aria-hidden="true" />
-      </Button>
-      <Button aria-label="New session" onClick={openNewSession} size="icon" variant="ghost">
-        <SquarePen aria-hidden="true" />
-      </Button>
-      <span aria-hidden="true" className="mx-1 h-5 w-px bg-border" />
-    </>
-  );
-  const gitName = repository ?? "Git repository";
-  const branchLabel = branch ? <span className="shrink-0 font-mono text-xs">{branch}</span> : null;
-  const hasGit = Boolean(repository || branch);
-  const gitLabel = hasGit ? (
-    <span className="flex min-w-0 items-center gap-1 text-sm text-muted-foreground">
-      <GitFork aria-hidden="true" className="size-4 shrink-0" />
-      <span className="truncate">{gitName}</span>
-      {branchLabel}
-    </span>
-  ) : null;
-
-  return (
-    <header className="flex h-12 shrink-0 items-center gap-2 border-b px-3 sm:px-4">
-      {sidebarActions}
-      <div className="flex min-w-0 flex-1 items-center gap-2">
-        <h1 className="truncate font-medium">{title}</h1>
-        {gitLabel}
-      </div>
-      <div className="flex shrink-0 items-center gap-2">
-        {sandboxControl}
-        <WorkspaceToggle isOpen={isWorkspaceOpen} onToggle={onToggleWorkspace} />
-      </div>
-    </header>
-  );
-}
diff --git a/components/session/sandbox-control.tsx b/components/session/preview-control.tsx
similarity index 83%
rename from components/session/sandbox-control.tsx
rename to components/session/preview-control.tsx
index 02f4dfb..64d4e60 100644
--- a/components/session/sandbox-control.tsx
+++ b/components/session/preview-control.tsx
@@ -1,12 +1,11 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { ChevronDown, Download, ExternalLink, LoaderCircle, Play, Power } from "lucide-react";
+import { ChevronDown, ExternalLink, LoaderCircle, Play, Power } from "lucide-react";
 import type { ReactNode } from "react";
 import { z } from "zod";
 
 import { Button } from "@/components/ui/button";
 import { getMenuAnchorStyle, MenuContent, MenuItem } from "@/components/ui/menu";
 import type { Preview } from "@/lib/preview";
-import { getWorkspaceUrl } from "@/lib/workspace";
 
 const sandboxSchema = z.object({
   status: z.enum([
@@ -78,13 +77,29 @@ function PreviewIcon({ action }: { readonly action: PreviewAction }) {
   return <Play aria-hidden="true" />;
 }
 
-function PreviewControl({
+function PreviewStopAction({
+  menuId,
+  onStop,
+}: {
+  readonly menuId: string;
+  readonly onStop?: () => void;
+}) {
+  if (!onStop) return null;
+
+  return (
+    <MenuItem className="text-sm text-destructive" onClick={onStop} popoverTarget={menuId}>
+      <Power aria-hidden="true" className="size-3.5" />
+      Stop preview
+    </MenuItem>
+  );
+}
+
+function PreviewButtons({
   action,
+  actions,
   disabled,
-  isDownloadDisabled,
   label,
   menuId,
-  onDownload,
   onPreview,
   onStop,
   preview,
@@ -92,26 +107,16 @@ function PreviewControl({
   title,
 }: {
   readonly action: PreviewAction;
+  readonly actions?: ReactNode;
   readonly disabled: boolean;
-  readonly isDownloadDisabled: boolean;
   readonly label: string;
   readonly menuId: string;
-  readonly onDownload: () => void;
   readonly onPreview: () => void;
   readonly onStop?: () => void;
   readonly preview: Preview;
   readonly status: VisibleStatus;
   readonly title?: string;
 }) {
-  let stopAction: ReactNode;
-  if (onStop) {
-    stopAction = (
-      <MenuItem className="text-sm text-destructive" onClick={onStop} popoverTarget={menuId}>
-        <Power aria-hidden="true" className="size-3.5" />
-        Stop preview
-      </MenuItem>
-    );
-  }
   return (
     <div className="ml-auto flex">
       <Button
@@ -150,16 +155,8 @@ function PreviewControl({
           </span>
         </div>
         <div className="mt-1 border-t pt-1">
-          <MenuItem
-            className="text-sm"
-            disabled={isDownloadDisabled}
-            onClick={onDownload}
-            popoverTarget={menuId}
-          >
-            <Download aria-hidden="true" className="size-3.5" />
-            Download
-          </MenuItem>
-          {stopAction}
+          {actions}
+          <PreviewStopAction menuId={menuId} onStop={onStop} />
         </div>
       </MenuContent>
     </div>
@@ -195,7 +192,15 @@ function getControlState(status: VisibleStatus, hasError: boolean): ControlState
   return { action: "run", disabled: false, label: "Preview" };
 }
 
-export function SandboxControl({ preview, sessionId }: { preview: Preview; sessionId?: string }) {
+export function PreviewControl({
+  actions,
+  menuId,
+  preview,
+}: {
+  readonly actions?: ReactNode;
+  readonly menuId: string;
+  readonly preview: Preview;
+}) {
   const queryClient = useQueryClient();
   const queryKey = ["sandbox", preview.sandboxId, preview.port] as const;
   const sandbox = useQuery({
@@ -222,11 +227,6 @@ export function SandboxControl({ preview, sessionId }: { preview: Preview; sessi
     action.mutate("stop");
   }
 
-  function onDownload(): void {
-    if (!sessionId) return;
-    window.location.assign(`${getWorkspaceUrl(sessionId)}/download`);
-  }
-
   function onPreview(): void {
     if (control.action === "open") {
       openPreviewTab(url);
@@ -243,18 +243,15 @@ export function SandboxControl({ preview, sessionId }: { preview: Preview; sessi
     });
   }
 
-  let stopPreview: (() => void) | undefined;
-  if (status === "running") stopPreview = onStop;
-  const isDownloadDisabled = !sessionId;
+  const stopPreview = status === "running" ? onStop : undefined;
 
   return (
-    <PreviewControl
+    <PreviewButtons
       action={control.action}
+      actions={actions}
       disabled={control.disabled}
-      isDownloadDisabled={isDownloadDisabled}
       label={control.label}
-      menuId={`sandbox-info-${preview.sandboxId}`}
-      onDownload={onDownload}
+      menuId={menuId}
       onPreview={onPreview}
       onStop={stopPreview}
       preview={preview}
diff --git a/components/session/session-start.tsx b/components/session/session-start.tsx
index 1c4579c..3282b71 100644
--- a/components/session/session-start.tsx
+++ b/components/session/session-start.tsx
@@ -1,7 +1,7 @@
 import { ArrowLeft, ArrowRight, FilePlus2, GitFork, type LucideIcon } from "lucide-react";
-import { type FormEvent, type ReactNode, useRef, useState } from "react";
+import { type InputEvent, type PropsWithChildren, type SubmitEvent, useRef, useState } from "react";
 
-import { Composer } from "@/components/composer/composer";
+import { Composer } from "@/components/chat/composer";
 import { Button } from "@/components/ui/button";
 import { type GitRepository, parseGitHubRepository } from "@/lib/github";
 
@@ -47,6 +47,14 @@ function StartBack({ onClick }: { readonly onClick: () => void }) {
   );
 }
 
+function StartContent({ children }: PropsWithChildren) {
+  return (
+    <div className="flex min-h-0 flex-1 items-center justify-center p-6 text-center">
+      {children}
+    </div>
+  );
+}
+
 function StartChoice({
   onEmpty,
   onGitHub,
@@ -85,7 +93,7 @@ function GitHubStart({
 }) {
   const inputRef = useRef<HTMLInputElement>(null);
 
-  function submit(event: FormEvent<HTMLFormElement>): void {
+  function submit(event: SubmitEvent<HTMLFormElement>): void {
     event.preventDefault();
     const input = inputRef.current;
     if (!input) return;
@@ -98,7 +106,7 @@ function GitHubStart({
     onImport(repository);
   }
 
-  function clearError(event: FormEvent<HTMLInputElement>): void {
+  function clearError(event: InputEvent<HTMLInputElement>): void {
     event.currentTarget.setCustomValidity("");
   }
 
@@ -139,32 +147,46 @@ function GitHubStart({
   );
 }
 
+function EmptyStart({
+  onBack,
+  onStart,
+}: {
+  readonly onBack: () => void;
+  readonly onStart: (message: string) => void;
+}) {
+  return (
+    <>
+      <StartContent>
+        <div className="flex flex-col">
+          <StartBack onClick={onBack} />
+          <h2 className="text-2xl font-medium tracking-tight">What should we build?</h2>
+        </div>
+      </StartContent>
+      <div className="shrink-0 px-4 pb-[max(1.5rem,env(safe-area-inset-bottom))] sm:px-6">
+        <Composer disabled={false} isGenerating={false} onSend={onStart} />
+      </div>
+    </>
+  );
+}
+
 export function SessionStart({ onImport, onStart }: SessionStartProps) {
   const [mode, setMode] = useState<StartMode>("choose");
-  let content: ReactNode = (
-    <StartChoice onEmpty={() => setMode("empty")} onGitHub={() => setMode("github")} />
-  );
-  let composer: ReactNode;
 
   if (mode === "empty") {
-    content = (
-      <div className="flex flex-col">
-        <StartBack onClick={() => setMode("choose")} />
-        <h2 className="text-2xl font-medium tracking-tight">What should we build?</h2>
-      </div>
-    );
-    composer = <Composer onSend={onStart} />;
+    return <EmptyStart onBack={() => setMode("choose")} onStart={onStart} />;
   }
+
   if (mode === "github") {
-    content = <GitHubStart onBack={() => setMode("choose")} onImport={onImport} />;
+    return (
+      <StartContent>
+        <GitHubStart onBack={() => setMode("choose")} onImport={onImport} />
+      </StartContent>
+    );
   }
 
   return (
-    <>
-      <div className="flex min-h-0 flex-1 items-center justify-center p-6 text-center">
-        {content}
-      </div>
-      {composer}
-    </>
+    <StartContent>
+      <StartChoice onEmpty={() => setMode("empty")} onGitHub={() => setMode("github")} />
+    </StartContent>
   );
 }
diff --git a/components/session/session-view.tsx b/components/session/session-view.tsx
index afd9e11..40f5d26 100644
--- a/components/session/session-view.tsx
+++ b/components/session/session-view.tsx
@@ -1,12 +1,12 @@
-import { Activity, lazy, type ReactNode, Suspense, useCallback, useState } from "react";
+import { Activity, lazy, Suspense, useCallback, useState } from "react";
 
-import { Composer } from "@/components/composer/composer";
+import { AppHeader } from "@/components/app-header";
+import { Composer } from "@/components/chat/composer";
+import { Thread, ThreadMessage } from "@/components/chat/thread";
 import { CommandLogsProvider } from "@/components/session/command-logs";
-import { Conversation } from "@/components/session/conversation";
-import { PageHeader } from "@/components/session/page-header";
+import { SessionMessages } from "@/components/session/messages";
 import { type StoredSession, useSession } from "@/components/session/use-session";
 import { Alert } from "@/components/ui/alert";
-import { MessageScroller, MessageScrollerItem } from "@/components/ui/message-scroller";
 import {
   type WorkspaceFileRequest,
   WorkspaceNavigationProvider,
@@ -23,6 +23,49 @@ type SessionViewProps = {
   readonly title: string;
 };
 
+function getConversationClass(isWorkspaceOpen: boolean): string {
+  if (isWorkspaceOpen) {
+    return "hidden min-w-0 flex-1 flex-col md:flex md:w-1/2 md:flex-none";
+  }
+  return "flex min-w-0 flex-1 flex-col";
+}
+
+function SessionWorkspace({
+  isOpen,
+  isOpened,
+  requestedFile,
+  revision,
+  sessionId,
+}: {
+  readonly isOpen: boolean;
+  readonly isOpened: boolean;
+  readonly requestedFile: WorkspaceFileRequest;
+  readonly revision: number;
+  readonly sessionId: string;
+}) {
+  if (!isOpened) return null;
+
+  const mode = isOpen ? "visible" : "hidden";
+
+  return (
+    <Activity mode={mode}>
+      <Suspense
+        fallback={
+          <aside
+            aria-label="Workspace files"
+            className="flex min-h-0 w-full items-center justify-center text-sm text-muted-foreground md:w-1/2 md:border-l"
+            id="workspace-panel"
+          >
+            Loading files…
+          </aside>
+        }
+      >
+        <WorkspacePanel requestedFile={requestedFile} revision={revision} sessionId={sessionId} />
+      </Suspense>
+    </Activity>
+  );
+}
+
 export function SessionView({ checkpointEvents, session, sessionId, title }: SessionViewProps) {
   const [workspaceState, setWorkspaceState] = useState<"closed" | "open" | "unopened">("unopened");
   const [workspaceFile, setWorkspaceFile] = useState<WorkspaceFileRequest>({ id: 0, path: "" });
@@ -35,34 +78,7 @@ export function SessionView({ checkpointEvents, session, sessionId, title }: Ses
   const hasNotices = Boolean(view.error);
   const isWorkspaceOpen = workspaceState === "open";
   const toggleWorkspace = session?.eveSessionId ? onToggleWorkspace : undefined;
-  let conversationClass = "flex min-w-0 flex-1 flex-col";
-  if (isWorkspaceOpen) {
-    conversationClass = "hidden min-w-0 flex-1 flex-col md:flex md:w-1/2 md:flex-none";
-  }
-  let workspace: ReactNode;
-  if (workspaceState !== "unopened") {
-    workspace = (
-      <Activity mode={isWorkspaceOpen ? "visible" : "hidden"}>
-        <Suspense
-          fallback={
-            <aside
-              aria-label="Workspace files"
-              className="flex min-h-0 w-full items-center justify-center text-sm text-muted-foreground md:w-1/2 md:border-l"
-              id="workspace-panel"
-            >
-              Loading files…
-            </aside>
-          }
-        >
-          <WorkspacePanel
-            requestedFile={workspaceFile}
-            revision={session?.streamIndex ?? 0}
-            sessionId={session?.eveSessionId ?? ""}
-          />
-        </Suspense>
-      </Activity>
-    );
-  }
+  const conversationClass = getConversationClass(isWorkspaceOpen);
 
   function onToggleWorkspace(): void {
     setWorkspaceState((state) => (state === "open" ? "closed" : "open"));
@@ -77,7 +93,7 @@ export function SessionView({ checkpointEvents, session, sessionId, title }: Ses
     <WorkspaceNavigationProvider openFile={openWorkspaceFile}>
       <CommandLogsProvider sessionId={session?.eveSessionId ?? ""}>
         <main className="flex min-w-0 flex-1 flex-col bg-background">
-          <PageHeader
+          <AppHeader
             branch={session?.branch}
             isWorkspaceOpen={isWorkspaceOpen}
             onToggleWorkspace={toggleWorkspace}
@@ -88,26 +104,34 @@ export function SessionView({ checkpointEvents, session, sessionId, title }: Ses
           />
           <div className="flex min-h-0 flex-1">
             <section className={conversationClass}>
-              <MessageScroller>
-                <Conversation view={view} />
+              <Thread>
+                <SessionMessages view={view} />
                 {hasNotices && (
-                  <MessageScrollerItem>
+                  <ThreadMessage>
                     {view.error && (
                       <Alert className="my-4 px-4 py-2" variant="destructive">
                         {view.error}
                       </Alert>
                     )}
-                  </MessageScrollerItem>
+                  </ThreadMessage>
                 )}
-              </MessageScroller>
-              <Composer
-                disabled={view.disabled}
-                isGenerating={view.isGenerating}
-                onSend={view.sendMessage}
-                onStop={view.stop}
-              />
+              </Thread>
+              <div className="shrink-0 px-4 pb-[max(1.5rem,env(safe-area-inset-bottom))] sm:px-6">
+                <Composer
+                  disabled={view.disabled}
+                  isGenerating={view.isGenerating}
+                  onSend={view.sendMessage}
+                  onStop={view.stop}
+                />
+              </div>
             </section>
-            {workspace}
+            <SessionWorkspace
+              isOpen={isWorkspaceOpen}
+              isOpened={workspaceState !== "unopened"}
+              requestedFile={workspaceFile}
+              revision={session?.streamIndex ?? 0}
+              sessionId={session?.eveSessionId ?? ""}
+            />
           </div>
         </main>
       </CommandLogsProvider>
diff --git a/components/session/sidebar-actions.tsx b/components/session/sidebar-actions.tsx
deleted file mode 100644
index de05e7c..0000000
--- a/components/session/sidebar-actions.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { EllipsisVertical, LoaderCircle, Pencil, Trash2 } from "lucide-react";
-
-import type { SessionStatus } from "@/components/session/use-session";
-import { Button } from "@/components/ui/button";
-import { getMenuAnchorStyle, MenuContent, MenuItem } from "@/components/ui/menu";
-
-type SessionSidebarActionsProps = {
-  readonly name: string;
-  readonly onDelete: () => void;
-  readonly onRename: () => void;
-  readonly sessionId: string;
-  readonly status: SessionStatus;
-};
-
-export function SessionSidebarActions({
-  name,
-  onDelete,
-  onRename,
-  sessionId,
-  status,
-}: SessionSidebarActionsProps) {
-  const id = `session-actions-${sessionId}`;
-  const isActive = status === "running" || status === "stopping";
-
-  return (
-    <div className="relative mr-0.5 grid size-6 shrink-0 place-items-center">
-      {isActive && (
-        <LoaderCircle
-          aria-label={`${name} is working`}
-          className="hidden size-4 animate-spin text-muted-foreground md:block md:group-hover:opacity-0 md:group-focus-within:opacity-0"
-          role="status"
-        />
-      )}
-      <Button
-        aria-label={`More options for ${name}`}
-        className="absolute inset-0 text-muted-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
-        popoverTarget={id}
-        size="icon-sm"
-        style={getMenuAnchorStyle(id)}
-        variant="ghost"
-      >
-        <EllipsisVertical aria-hidden="true" />
-      </Button>
-      <MenuContent
-        className="w-40 [position-area:bottom_span-left] [position-try-fallbacks:flip-block]"
-        id={id}
-        side="bottom"
-      >
-        <MenuItem onClick={onRename} popoverTarget={id}>
-          <Pencil aria-hidden="true" />
-          Rename
-        </MenuItem>
-        <MenuItem
-          className="text-destructive"
-          disabled={isActive}
-          onClick={onDelete}
-          popoverTarget={id}
-        >
-          <Trash2 aria-hidden="true" />
-          Delete
-        </MenuItem>
-      </MenuContent>
-    </div>
-  );
-}
diff --git a/components/session/tool-activity.tsx b/components/session/tool-activity.tsx
index 77be0dd..b2f67bf 100644
--- a/components/session/tool-activity.tsx
+++ b/components/session/tool-activity.tsx
@@ -15,8 +15,7 @@ import { type MouseEvent, type ReactNode, useMemo } from "react";
 
 import Diff from "@/components/code/diff";
 import { CommandLogs } from "@/components/session/command-logs";
-import { ModelActivity } from "@/components/session/model-activity";
-import { useElapsed } from "@/components/session/use-elapsed";
+import { ModelActivity, useElapsed } from "@/components/session/model-activity";
 import { CodeBlock } from "@/components/ui/code-block";
 import { useOpenWorkspaceFile } from "@/components/workspace/workspace-navigation";
 import type { ActivityTiming } from "@/lib/eve-events";
@@ -157,6 +156,26 @@ function getFileDiff(part: EveDynamicToolPart): FileDiff | undefined {
   return fileDiffSchema.safeParse(part.output).data;
 }
 
+function getActivityContent(
+  part: EveDynamicToolPart,
+  definition: ToolDefinition,
+  fileDiff: FileDiff | undefined,
+  isRunning: boolean,
+): ReactNode {
+  const content = getContent(part, definition, fileDiff);
+  if (content) return content;
+  if (isRunning && definition.hasCommandLogs) return <CommandLogs />;
+  return null;
+}
+
+function getActivityDetail(path: string | undefined, definition: ToolDefinition): ReactNode {
+  if (!path) return null;
+  if (definition.input === "filePath") {
+    return <WorkspaceFileLink path={path} />;
+  }
+  return path;
+}
+
 type ToolActivityProps = {
   readonly isActive: boolean;
   readonly part: EveDynamicToolPart;
@@ -169,11 +188,9 @@ export function ToolActivity({ isActive, part, timing }: ToolActivityProps) {
   const definition = getToolDefinition(part.toolName);
   const label = getLabel(part, definition, isRunning);
   const fileDiff = getFileDiff(part);
-  let content = getContent(part, definition, fileDiff);
-  if (!content && isRunning && definition.hasCommandLogs) content = <CommandLogs />;
   const path = getToolDetail(part, definition);
-  let detail: ReactNode = path;
-  if (path && definition.input === "filePath") detail = <WorkspaceFileLink path={path} />;
+  const content = getActivityContent(part, definition, fileDiff, isRunning);
+  const detail = getActivityDetail(path, definition);
 
   return (
     <ModelActivity
diff --git a/components/session/use-elapsed.ts b/components/session/use-elapsed.ts
deleted file mode 100644
index ae5e56a..0000000
--- a/components/session/use-elapsed.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useEffect, useState } from "react";
-
-import type { ActivityTiming } from "@/lib/eve-events";
-
-function formatElapsed(milliseconds: number): string {
-  const seconds = Math.max(Math.round(milliseconds / 1000), 1);
-  if (seconds < 60) return `${seconds}s`;
-  const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m ${seconds % 60}s`;
-  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`;
-}
-
-export function useElapsed(
-  timing: ActivityTiming | undefined,
-  isRunning: boolean,
-): string | undefined {
-  const isTicking = isRunning && timing?.startedAt !== undefined && timing.endedAt === undefined;
-  const [now, setNow] = useState(() => Date.now());
-
-  useEffect(() => {
-    if (!isTicking) return;
-    setNow(Date.now());
-    const timer = setInterval(() => setNow(Date.now()), 1000);
-    return () => clearInterval(timer);
-  }, [isTicking]);
-
-  if (timing?.startedAt === undefined) return;
-  const endedAt = timing.endedAt ?? (isTicking ? now : undefined);
-  if (endedAt === undefined) return;
-  return formatElapsed(endedAt - timing.startedAt);
-}
diff --git a/components/ui/copy-button.tsx b/components/ui/copy-button.tsx
deleted file mode 100644
index 86e8853..0000000
--- a/components/ui/copy-button.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Check, Copy } from "lucide-react";
-import { useEffect, useState } from "react";
-
-import { Button } from "@/components/ui/button";
-
-export function CopyButton({ value }: { readonly value: string }) {
-  const [isCopied, setCopied] = useState(false);
-
-  useEffect(() => {
-    if (!isCopied) return;
-    const timeout = window.setTimeout(() => setCopied(false), 1_200);
-    return () => window.clearTimeout(timeout);
-  }, [isCopied]);
-
-  async function copy(): Promise<void> {
-    await navigator.clipboard.writeText(value);
-    setCopied(true);
-  }
-
-  return (
-    <>
-      <Button
-        aria-label="Copy message"
-        className="text-muted-foreground"
-        onClick={copy}
-        size="icon-sm"
-        title="Copy"
-        variant="ghost"
-      >
-        {isCopied && <Check aria-hidden="true" className="fade" />}
-        {!isCopied && <Copy aria-hidden="true" />}
-      </Button>
-      {isCopied && (
-        <span className="sr-only" role="status">
-          Copied
-        </span>
-      )}
-    </>
-  );
-}
diff --git a/components/ui/message-scroller.tsx b/components/ui/message-scroller.tsx
deleted file mode 100644
index 62ab18d..0000000
--- a/components/ui/message-scroller.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { MessageScroller as MessageScrollerPrimitive } from "@shadcn/react/message-scroller";
-import { ArrowDown } from "lucide-react";
-import type { ComponentProps, PropsWithChildren } from "react";
-
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-
-function MessageScroller({ children }: PropsWithChildren) {
-  return (
-    <MessageScrollerPrimitive.Provider autoScroll>
-      <MessageScrollerPrimitive.Root className="relative min-h-0 flex-1 overflow-hidden">
-        <MessageScrollerPrimitive.Viewport className="app-scrollbar scroll-fade size-full overflow-y-auto overscroll-contain scrollbar-gutter-stable">
-          <MessageScrollerPrimitive.Content className="flex h-max min-h-full flex-col px-4 py-5 sm:px-6">
-            {children}
-          </MessageScrollerPrimitive.Content>
-        </MessageScrollerPrimitive.Viewport>
-        <MessageScrollerPrimitive.Button
-          className="absolute bottom-3 left-1/2 z-10 size-8 -translate-x-1/2 rounded-full bg-background shadow-md transition-[opacity,scale] data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0"
-          render={<Button size="icon-sm" variant="outline" />}
-        >
-          <ArrowDown aria-hidden="true" />
-          <span className="sr-only">Jump to latest</span>
-        </MessageScrollerPrimitive.Button>
-      </MessageScrollerPrimitive.Root>
-    </MessageScrollerPrimitive.Provider>
-  );
-}
-
-function MessageScrollerItem({
-  className,
-  ...props
-}: ComponentProps<typeof MessageScrollerPrimitive.Item>) {
-  return (
-    <MessageScrollerPrimitive.Item
-      className={cn("mx-auto w-full max-w-3xl min-w-0 shrink-0", className)}
-      {...props}
-    />
-  );
-}
-
-export { MessageScroller, MessageScrollerItem };
diff --git a/components/workspace/workspace-browser.tsx b/components/workspace/workspace-browser.tsx
index d665a5f..ffbcc81 100644
--- a/components/workspace/workspace-browser.tsx
+++ b/components/workspace/workspace-browser.tsx
@@ -56,11 +56,9 @@ export function WorkspaceBrowser({ children, model, path, tree }: WorkspaceBrows
   }
 
   const breadcrumbItems = breadcrumbs.map((breadcrumb, index) => {
-    let separator: ReactNode;
-    if (index > 0) separator = <ChevronRight aria-hidden="true" className="size-3.5" />;
     return (
       <Fragment key={breadcrumb.path}>
-        {separator}
+        {index > 0 && <ChevronRight aria-hidden="true" className="size-3.5" />}
         <button
           className="max-w-48 truncate rounded-sm px-1 py-0.5 text-sm text-muted-foreground outline-none hover:bg-sidebar-selected hover:text-foreground focus-visible:bg-sidebar-selected focus-visible:text-foreground last:text-foreground"
           onClick={() => onOpenPath(breadcrumb.path)}
diff --git a/components/workspace/workspace-panel.tsx b/components/workspace/workspace-panel.tsx
index a74b76b..54771a5 100644
--- a/components/workspace/workspace-panel.tsx
+++ b/components/workspace/workspace-panel.tsx
@@ -1,15 +1,23 @@
+import { File } from "@pierre/diffs/react";
 import { FileTree } from "@pierre/trees/react";
 import { keepPreviousData, useQuery } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 import type { z } from "zod";
 
-import FileViewer from "@/components/code/file-viewer";
 import { useWorkspaceTree } from "@/components/workspace/use-workspace-tree";
 import { WorkspaceBrowser } from "@/components/workspace/workspace-browser";
 import type { WorkspaceFileRequest } from "@/components/workspace/workspace-navigation";
 import { getWorkspaceUrl, workspaceFileSchema, workspacePathsSchema } from "@/lib/workspace";
 
 const emptyPaths: string[] = [];
+const fileOptions = {
+  disableFileHeader: true,
+  theme: "pierre-dark-soft",
+  themeType: "dark",
+  unsafeCSS: "pre { --diffs-bg: var(--background) !important; }",
+} as const;
+
+type WorkspaceFile = z.infer<typeof workspaceFileSchema>;
 
 async function getWorkspace<T>(url: string, schema: z.ZodType<T>): Promise<T> {
   const response = await fetch(url, { cache: "no-store" });
@@ -17,6 +25,11 @@ async function getWorkspace<T>(url: string, schema: z.ZodType<T>): Promise<T> {
   return schema.parse(await response.json());
 }
 
+function FileViewer({ contents, path }: { readonly contents: string; readonly path: string }) {
+  const file = { contents, name: path };
+  return <File className="app-scrollbar workspace-file" file={file} options={fileOptions} />;
+}
+
 function PanelMessage({ children }: { readonly children: ReactNode }) {
   return (
     <p className="flex size-full items-center justify-center p-4 text-sm text-muted-foreground">
@@ -25,6 +38,50 @@ function PanelMessage({ children }: { readonly children: ReactNode }) {
   );
 }
 
+function WorkspaceTree({
+  hasPaths,
+  isError,
+  model,
+  paths,
+  sessionId,
+}: {
+  readonly hasPaths: boolean;
+  readonly isError: boolean;
+  readonly model: ReturnType<typeof useWorkspaceTree>["model"];
+  readonly paths: string[];
+  readonly sessionId: string;
+}) {
+  if (!sessionId) return <PanelMessage>No files yet.</PanelMessage>;
+  if (isError && !hasPaths) return <PanelMessage>Couldn’t load files.</PanelMessage>;
+  if (!hasPaths) return <PanelMessage>Loading files…</PanelMessage>;
+  if (paths.length === 0) return <PanelMessage>No files yet.</PanelMessage>;
+  return <FileTree className="workspace-tree" model={model} />;
+}
+
+function WorkspaceViewer({
+  file,
+  isError,
+  selectedPath,
+}: {
+  readonly file?: WorkspaceFile;
+  readonly isError: boolean;
+  readonly selectedPath: string;
+}) {
+  if (!selectedPath) return <PanelMessage>Select a file</PanelMessage>;
+  if (file?.status === "missing") return <PanelMessage>File no longer exists.</PanelMessage>;
+  if (file?.status === "binary") {
+    return <PanelMessage>Binary files can’t be previewed.</PanelMessage>;
+  }
+  if (file?.status === "oversized") {
+    return <PanelMessage>Files larger than 200 KiB can’t be previewed.</PanelMessage>;
+  }
+  if (file?.status === "text") {
+    return <FileViewer contents={file.contents} path={file.path} />;
+  }
+  if (isError) return <PanelMessage>Couldn’t load file.</PanelMessage>;
+  return <PanelMessage>Loading file…</PanelMessage>;
+}
+
 export default function WorkspacePanel({
   requestedFile,
   revision,
@@ -54,33 +111,26 @@ export default function WorkspacePanel({
   });
   const file = fileQuery.data?.path === selectedPath ? fileQuery.data : undefined;
 
-  let tree: ReactNode = <PanelMessage>Loading files…</PanelMessage>;
-  if (!sessionId) tree = <PanelMessage>No files yet.</PanelMessage>;
-  if (pathsQuery.isError && !pathsQuery.data)
-    tree = <PanelMessage>Couldn’t load files.</PanelMessage>;
-  if (pathsQuery.data && paths.length === 0) tree = <PanelMessage>No files yet.</PanelMessage>;
-  if (paths.length > 0) {
-    tree = <FileTree className="workspace-tree" model={model} />;
-  }
-
-  let viewer: ReactNode = <PanelMessage>Select a file</PanelMessage>;
-  if (selectedPath) viewer = <PanelMessage>Loading file…</PanelMessage>;
-  if (selectedPath && fileQuery.isError) viewer = <PanelMessage>Couldn’t load file.</PanelMessage>;
-  if (file?.status === "missing") viewer = <PanelMessage>File no longer exists.</PanelMessage>;
-  if (file?.status === "binary")
-    viewer = <PanelMessage>Binary files can’t be previewed.</PanelMessage>;
-  if (file?.status === "oversized")
-    viewer = <PanelMessage>Files larger than 200 KiB can’t be previewed.</PanelMessage>;
-  if (file?.status === "text") viewer = <FileViewer contents={file.contents} path={file.path} />;
-
   return (
     <aside
       aria-label="Workspace files"
       className="min-h-0 w-full md:w-1/2 md:border-l"
       id="workspace-panel"
     >
-      <WorkspaceBrowser model={model} path={selectedPath} tree={tree}>
-        {viewer}
+      <WorkspaceBrowser
+        model={model}
+        path={selectedPath}
+        tree={
+          <WorkspaceTree
+            hasPaths={Boolean(pathsQuery.data)}
+            isError={pathsQuery.isError}
+            model={model}
+            paths={paths}
+            sessionId={sessionId}
+          />
+        }
+      >
+        <WorkspaceViewer file={file} isError={fileQuery.isError} selectedPath={selectedPath} />
       </WorkspaceBrowser>
     </aside>
   );