diff --git a/packages/app/pr/screenshots/minimap-rail-1.png b/packages/app/pr/screenshots/minimap-rail-1.png
new file mode 100644
index 000000000..01c5c70eb
Binary files /dev/null and b/packages/app/pr/screenshots/minimap-rail-1.png differ
diff --git a/packages/app/pr/screenshots/minimap-rail-2.png b/packages/app/pr/screenshots/minimap-rail-2.png
new file mode 100644
index 000000000..38b08bc37
Binary files /dev/null and b/packages/app/pr/screenshots/minimap-rail-2.png differ
diff --git a/packages/app/src/app/app.tsx b/packages/app/src/app/app.tsx
index bfd0f38ea..55ff078ab 100644
--- a/packages/app/src/app/app.tsx
+++ b/packages/app/src/app/app.tsx
@@ -2002,6 +2002,7 @@ export default function App() {
               listAgents={listAgents}
               setSessionAgent={setSessionAgent}
               saveSession={saveSessionExport}
+              sessionStatusById={activeSessionStatusById()}
               onTryNotionPrompt={() => {
                 setPrompt("setup my crm");
                 setTryNotionPromptVisible(false);
diff --git a/packages/app/src/app/components/flyout-item.tsx b/packages/app/src/app/components/flyout-item.tsx
new file mode 100644
index 000000000..c8855c0b1
--- /dev/null
+++ b/packages/app/src/app/components/flyout-item.tsx
@@ -0,0 +1,50 @@
+import { Show, createSignal, onMount } from "solid-js";
+import { Check, FileText, Folder } from "lucide-solid";
+
+export type FlyoutProps = {
+  item: {
+    id: string;
+    rect: { top: number; left: number; width: number; height: number };
+    targetRect: { top: number; left: number; width: number; height: number };
+    label: string;
+    icon: "file" | "check" | "folder";
+  };
+};
+
+export default function FlyoutItem(props: FlyoutProps) {
+  const [active, setActive] = createSignal(false);
+  onMount(() => {
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setActive(true);
+      });
+    });
+  });
+
+  return (
+    <div
+      class="fixed z-[100] pointer-events-none transition-all duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)] flex items-center gap-2 px-3 py-2 rounded-xl bg-gray-12 text-gray-1 shadow-xl border border-gray-11/20"
+      style={{
+        top: `${props.item.rect.top}px`,
+        left: `${props.item.rect.left}px`,
+        transform: active()
+          ? `translate(${props.item.targetRect.left - props.item.rect.left}px, ${
+              props.item.targetRect.top - props.item.rect.top
+            }px) scale(0.3)`
+          : "translate(0, 0) scale(1)",
+        opacity: active() ? 0 : 1,
+      }}
+    >
+      <Show when={props.item.icon === "check"}>
+        <Check size={14} />
+      </Show>
+      <Show when={props.item.icon === "file"}>
+        <FileText size={14} />
+      </Show>
+      <Show when={props.item.icon === "folder"}>
+        <Folder size={14} />
+      </Show>
+      <span class="text-xs font-medium truncate max-w-[120px]">{props.item.label}</span>
+    </div>
+  );
+}
diff --git a/packages/app/src/app/components/session/composer.tsx b/packages/app/src/app/components/session/composer.tsx
new file mode 100644
index 000000000..a357d9eb3
--- /dev/null
+++ b/packages/app/src/app/components/session/composer.tsx
@@ -0,0 +1,209 @@
+import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { ArrowRight, Zap } from "lucide-solid";
+
+export type CommandItem = {
+  id: string;
+  description: string;
+};
+
+export type ComposerProps = {
+  prompt: string;
+  setPrompt: (value: string) => void;
+  busy: boolean;
+  onSend: () => void;
+  commandMatches: CommandItem[];
+  onRunCommand: (commandId: string) => void;
+  selectedModelLabel: string;
+  onModelClick: () => void;
+  showNotionBanner: boolean;
+  onNotionBannerClick: () => void;
+  toast: string | null;
+};
+
+export default function Composer(props: ComposerProps) {
+  let textareaRef: HTMLTextAreaElement | undefined;
+  const [commandIndex, setCommandIndex] = createSignal(0);
+
+  const commandMenuOpen = createMemo(() => {
+    return props.prompt.startsWith("/") && !props.busy;
+  });
+
+  const syncHeight = () => {
+    if (!textareaRef) return;
+    textareaRef.style.height = "auto";
+    const nextHeight = Math.min(textareaRef.scrollHeight, 160);
+    textareaRef.style.height = `${nextHeight}px`;
+    textareaRef.style.overflowY = textareaRef.scrollHeight > 160 ? "auto" : "hidden";
+  };
+
+  createEffect(() => {
+    props.prompt;
+    syncHeight();
+  });
+
+  createEffect(() => {
+    if (commandMenuOpen()) {
+      setCommandIndex(0);
+    }
+  });
+
+  const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === "Enter" && event.shiftKey) return;
+    if (event.isComposing && event.key !== "Enter") return;
+
+    if (commandMenuOpen()) {
+      const matches = props.commandMatches;
+      if (event.key === "Enter") {
+        event.preventDefault();
+        const active = matches[commandIndex()] ?? matches[0];
+        if (active) {
+          props.onRunCommand(active.id);
+        }
+        return;
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setCommandIndex((i) => Math.min(i + 1, matches.length - 1));
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setCommandIndex((i) => Math.max(i - 1, 0));
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        props.setPrompt("");
+        return;
+      }
+      if (event.key === "Tab") {
+        event.preventDefault();
+        // maybe autocomplete?
+        const active = matches[commandIndex()] ?? matches[0];
+         if (active) {
+          props.onRunCommand(active.id);
+        }
+        return;
+      }
+    }
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      props.onSend();
+    }
+  };
+
+  createEffect(() => {
+     const handler = () => {
+       textareaRef?.focus();
+     };
+     window.addEventListener("openwork:focusPrompt", handler);
+     onCleanup(() => window.removeEventListener("openwork:focusPrompt", handler));
+  });
+
+  return (
+    <div class="p-4 border-t border-gray-6 bg-gray-1 sticky bottom-0 z-20">
+      <div class="max-w-2xl mx-auto">
+        <div
+          class={`bg-gray-2 border border-gray-6 rounded-3xl overflow-visible transition-all shadow-2xl relative group/input ${
+            commandMenuOpen()
+              ? "rounded-t-none border-t-transparent"
+              : "focus-within:ring-1 focus-within:ring-gray-7"
+          }`}
+        >
+          <Show when={commandMenuOpen()}>
+            <div class="absolute bottom-full left-[-1px] right-[-1px] z-30">
+              <div class="rounded-t-3xl border border-gray-6 border-b-0 bg-gray-2 shadow-2xl overflow-hidden">
+                <div class="px-4 pt-3 pb-2 text-[10px] font-semibold uppercase tracking-[0.2em] text-gray-8 border-b border-gray-6/30 bg-gray-2">
+                  Commands
+                </div>
+                <div class="space-y-1 p-2 bg-gray-2">
+                  <Show
+                    when={props.commandMatches.length}
+                    fallback={
+                      <div class="px-3 py-2 text-xs text-gray-9">No commands found.</div>
+                    }
+                  >
+                    <For each={props.commandMatches}>
+                      {(command, idx) => (
+                        <button
+                          type="button"
+                          class={`w-full flex items-start gap-3 rounded-xl px-3 py-2 text-left transition-colors ${
+                            idx() === commandIndex()
+                              ? "bg-gray-12/10 text-gray-12"
+                              : "text-gray-11 hover:bg-gray-12/5"
+                          }`}
+                          onMouseDown={(e) => {
+                            e.preventDefault();
+                            props.onRunCommand(command.id);
+                          }}
+                          onMouseEnter={() => setCommandIndex(idx())}
+                        >
+                          <div class="text-xs font-semibold text-gray-12">/{command.id}</div>
+                          <div class="text-[11px] text-gray-9">{command.description}</div>
+                        </button>
+                      )}
+                    </For>
+                  </Show>
+                </div>
+              </div>
+            </div>
+          </Show>
+
+          <button
+            type="button"
+            class="absolute top-3 left-4 flex items-center gap-1.5 text-[10px] font-bold text-gray-7 hover:text-gray-11 transition-colors uppercase tracking-widest z-10"
+            onClick={props.onModelClick}
+            disabled={props.busy}
+          >
+            <Zap size={10} class="text-gray-7 group-hover:text-amber-11 transition-colors" />
+            <span>{props.selectedModelLabel}</span>
+          </button>
+
+          <div class="p-3 pt-8 pb-3 px-4">
+            <Show when={props.showNotionBanner}>
+              <button
+                type="button"
+                class="w-full mb-2 flex items-center justify-between gap-3 rounded-xl border border-green-7/20 bg-green-7/10 px-3 py-2 text-left text-sm text-green-12 transition-colors hover:bg-green-7/15"
+                onClick={props.onNotionBannerClick}
+              >
+                <span>Try it now: set up my CRM in Notion</span>
+                <span class="text-xs text-green-12 font-medium">Insert prompt</span>
+              </button>
+            </Show>
+
+            <div class="relative">
+              <Show when={props.toast}>
+                <div class="absolute bottom-full right-0 mb-2 z-30 rounded-xl border border-gray-6 bg-gray-1/90 px-3 py-2 text-xs text-gray-11 shadow-lg backdrop-blur-md">
+                  {props.toast}
+                </div>
+              </Show>
+
+              <div class="relative flex items-end gap-3">
+                <textarea
+                  ref={textareaRef}
+                  rows={1}
+                  disabled={props.busy}
+                  value={props.prompt}
+                  onInput={(e) => props.setPrompt(e.currentTarget.value)}
+                  onKeyDown={handleKeyDown}
+                  placeholder="Ask OpenWork..."
+                  class="flex-1 bg-transparent border-none p-0 text-gray-12 placeholder-gray-6 focus:ring-0 text-[15px] leading-relaxed resize-none min-h-[24px]"
+                />
+
+                <button
+                  disabled={!props.prompt.trim() || props.busy}
+                  onClick={props.onSend}
+                  class="p-2 bg-gray-12 text-gray-1 rounded-xl hover:scale-105 active:scale-95 transition-all disabled:opacity-0 disabled:scale-75 shadow-lg shrink-0 flex items-center justify-center"
+                  title="Run"
+                >
+                  <ArrowRight size={18} />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/app/src/app/components/session/message-list.tsx b/packages/app/src/app/components/session/message-list.tsx
new file mode 100644
index 000000000..4c2976744
--- /dev/null
+++ b/packages/app/src/app/components/session/message-list.tsx
@@ -0,0 +1,254 @@
+import { For, Show, createMemo, createSignal, onCleanup } from "solid-js";
+import type { Part } from "@opencode-ai/sdk/v2/client";
+import { Check, ChevronDown, Circle, Copy, File, FileText } from "lucide-solid";
+
+import type { ArtifactItem, MessageWithParts } from "../../types";
+import { groupMessageParts, summarizeStep } from "../../utils";
+import Button from "../button";
+import PartView from "../part-view";
+
+export type MessageListProps = {
+  messages: MessageWithParts[];
+  artifacts: ArtifactItem[];
+  developerMode: boolean;
+  showThinking: boolean;
+  expandedStepIds: Set<string>;
+  setExpandedStepIds: (updater: (current: Set<string>) => Set<string>) => void;
+  onOpenArtifact: (artifact: ArtifactItem) => void;
+};
+
+export default function MessageList(props: MessageListProps) {
+  const [copyingId, setCopyingId] = createSignal<string | null>(null);
+  let copyTimeout: number | undefined;
+
+  onCleanup(() => {
+    if (copyTimeout !== undefined) {
+      window.clearTimeout(copyTimeout);
+    }
+  });
+
+  const handleCopy = async (text: string, id: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopyingId(id);
+      if (copyTimeout !== undefined) {
+        window.clearTimeout(copyTimeout);
+      }
+      copyTimeout = window.setTimeout(() => {
+        setCopyingId(null);
+        copyTimeout = undefined;
+      }, 2000);
+    } catch {
+      // ignore
+    }
+  };
+
+  const toggleSteps = (id: string) => {
+    props.setExpandedStepIds((current) => {
+      const next = new Set(current);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
+      return next;
+    });
+  };
+
+  const artifactsByMessage = createMemo(() => {
+    const map = new Map<string, ArtifactItem[]>();
+    for (const artifact of props.artifacts) {
+      const key = artifact.messageId?.trim();
+      if (!key) continue;
+      const current = map.get(key);
+      if (current) {
+        current.push(artifact);
+      } else {
+        map.set(key, [artifact]);
+      }
+    }
+    return map;
+  });
+
+  return (
+    <div class="max-w-3xl mx-auto space-y-6 pb-32 px-4">
+      <For each={props.messages}>
+        {(msg) => {
+          const isUser = () => (msg.info as any).role === "user";
+          const renderableParts = () =>
+            msg.parts.filter((p) => {
+              if (p.type === "reasoning") {
+                return props.developerMode && props.showThinking;
+              }
+
+              if (p.type === "step-start" || p.type === "step-finish") {
+                return props.developerMode;
+              }
+
+              if (p.type === "text" || p.type === "tool") {
+                return true;
+              }
+
+              return props.developerMode;
+            });
+
+          const groups = () =>
+            groupMessageParts(renderableParts(), String((msg.info as any).id ?? "message"));
+          const groupSpacing = () => (isUser() ? "mb-3" : "mb-4");
+          const messageId = () => String((msg.info as any).id ?? "");
+          const messageArtifacts = () => artifactsByMessage().get(messageId()) ?? [];
+
+          return (
+            <Show when={renderableParts().length > 0}>
+              <div
+                class={`flex group ${isUser() ? "justify-end" : "justify-start"}`.trim()}
+                data-message-role={isUser() ? "user" : "assistant"}
+                data-message-id={messageId()}
+              >
+                <div
+                  class={`w-full relative ${
+                    isUser()
+                      ? "max-w-2xl px-6 py-4 rounded-[24px] bg-gray-3 text-gray-12 text-[15px] leading-relaxed"
+                      : "max-w-[68ch] text-[15px] leading-7 text-gray-12 group pl-2"
+                  }`}
+                >
+                  <For each={groups()}>
+                    {(group, idx) => (
+                      <div class={idx() === groups().length - 1 ? "" : groupSpacing()}>
+                        <Show when={group.kind === "text"}>
+                          <PartView
+                            part={(group as { kind: "text"; part: Part }).part}
+                            developerMode={props.developerMode}
+                            showThinking={props.showThinking}
+                            tone={isUser() ? "dark" : "light"}
+                            renderMarkdown={!isUser()}
+                          />
+                        </Show>
+                        <Show when={group.kind === "steps"}>
+                          <div class={isUser() ? "mt-2" : "mt-3 border-t border-gray-6/60 pt-3"}>
+                            <button
+                              class={`flex items-center gap-2 text-xs ${
+                                isUser() ? "text-gray-10 hover:text-gray-11" : "text-gray-10 hover:text-gray-12"
+                              }`}
+                              onClick={() => toggleSteps((group as any).id)}
+                            >
+                              <span>
+                                {props.expandedStepIds.has((group as any).id)
+                                  ? "Hide steps"
+                                  : "View steps"}
+                              </span>
+                              <ChevronDown
+                                size={14}
+                                class={`transition-transform ${
+                                  props.expandedStepIds.has((group as any).id) ? "rotate-180" : ""
+                                }`.trim()}
+                              />
+                            </button>
+                            <Show when={props.expandedStepIds.has((group as any).id)}>
+                              <div
+                                class={`mt-3 space-y-3 rounded-xl border p-3 ${
+                                  isUser()
+                                    ? "border-gray-6 bg-gray-1/60"
+                                    : "border-gray-6/70 bg-gray-2/40"
+                                }`}
+                              >
+                                <For each={(group as any).parts as Part[]}>
+                                  {(part) => {
+                                    const summary = summarizeStep(part);
+                                    return (
+                                      <div class="flex items-start gap-3 text-xs text-gray-11">
+                                        <div class="mt-0.5 h-5 w-5 rounded-full border border-gray-7 flex items-center justify-center text-gray-10">
+                                          {part.type === "tool" ? (
+                                            <File size={12} />
+                                          ) : (
+                                            <Circle size={8} />
+                                          )}
+                                        </div>
+                                        <div>
+                                          <div class="text-gray-12">{summary.title}</div>
+                                          <Show when={summary.detail}>
+                                            <div class="mt-1 text-gray-10">{summary.detail}</div>
+                                          </Show>
+                                          <Show
+                                            when={
+                                              props.developerMode &&
+                                              (part.type !== "tool" || props.showThinking)
+                                            }
+                                          >
+                                            <div class="mt-2 text-xs text-gray-10">
+                                              <PartView
+                                                part={part}
+                                                developerMode={props.developerMode}
+                                                showThinking={props.showThinking}
+                                                tone={isUser() ? "dark" : "light"}
+                                              />
+                                            </div>
+                                          </Show>
+                                        </div>
+                                      </div>
+                                    );
+                                  }}
+                                </For>
+                              </div>
+                            </Show>
+                          </div>
+                        </Show>
+                      </div>
+                    )}
+                  </For>
+                  <Show when={messageArtifacts().length}>
+                    <div class={`mt-4 space-y-2 ${isUser() ? "text-gray-12" : ""}`.trim()}>
+                      <div class="text-[11px] uppercase tracking-wide text-gray-9">Artifacts</div>
+                      <For each={messageArtifacts()}>
+                        {(artifact) => (
+                          <div
+                            class="rounded-2xl border border-gray-6 bg-gray-1/60 px-4 py-3 flex items-center justify-between"
+                            data-artifact-id={artifact.id}
+                          >
+                            <div class="flex items-center gap-3">
+                              <div class="h-9 w-9 rounded-lg bg-gray-2 flex items-center justify-center">
+                                <FileText size={16} class="text-gray-10" />
+                              </div>
+                              <div>
+                                <div class="text-sm text-gray-12">{artifact.name}</div>
+                                <div class="text-xs text-gray-10">Document</div>
+                              </div>
+                            </div>
+                            <Button
+                              variant="outline"
+                              class="text-xs"
+                              onClick={() => props.onOpenArtifact(artifact)}
+                            >
+                              Open
+                            </Button>
+                          </div>
+                        )}
+                      </For>
+                    </div>
+                  </Show>
+
+                  <div class="mt-2 flex justify-end opacity-0 group-hover:opacity-100 transition-opacity select-none">
+                    <button
+                      class="text-gray-9 hover:text-gray-11 p-1 rounded hover:bg-black/5 dark:hover:bg-white/10 transition-colors"
+                      title="Copy message"
+                      onClick={() => {
+                        const text = renderableParts()
+                          .map((p) => ("text" in p ? (p as any).text : ""))
+                          .join("\n");
+                        handleCopy(text, messageId());
+                      }}
+                    >
+                      <Show when={copyingId() === messageId()} fallback={<Copy size={12} />}>
+                        <Check size={12} class="text-green-10" />
+                      </Show>
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </Show>
+          );
+        }}
+      </For>
+    </div>
+  );
+}
diff --git a/packages/app/src/app/components/session/minimap.tsx b/packages/app/src/app/components/session/minimap.tsx
new file mode 100644
index 000000000..b39db53e8
--- /dev/null
+++ b/packages/app/src/app/components/session/minimap.tsx
@@ -0,0 +1,125 @@
+import { For, createEffect, createSignal, onCleanup, onMount } from "solid-js";
+import type { MessageWithParts } from "../../types";
+
+export type MinimapProps = {
+  containerRef: () => HTMLDivElement | undefined;
+  messages: MessageWithParts[];
+};
+
+export default function Minimap(props: MinimapProps) {
+  const [lines, setLines] = createSignal<{ id: string; role: "user" | "assistant"; top: number; height: number }[]>([]);
+  const [activeId, setActiveId] = createSignal<string | null>(null);
+
+  let rafId: number | null = null;
+
+  const update = () => {
+    const container = props.containerRef();
+    if (!container) return;
+
+    const containerRect = container.getBoundingClientRect();
+    const scrollTop = container.scrollTop;
+    
+    // Find all message groups (bubbles)
+    // We assume MessageList renders them with data-message-id
+    const elements = Array.from(container.querySelectorAll('[data-message-role]'));
+    
+    const nextLines = elements.map(el => {
+      const rect = el.getBoundingClientRect();
+      const relativeTop = rect.top - containerRect.top + scrollTop;
+      const scrollHeight = container.scrollHeight;
+      const clientHeight = container.clientHeight;
+      
+      // Map content position (0 to scrollHeight) to viewport position (0 to clientHeight)
+      const mapTop = (relativeTop / scrollHeight) * clientHeight;
+      
+      return {
+        id: el.getAttribute('data-message-id') || "",
+        role: el.getAttribute('data-message-role') as "user" | "assistant",
+        top: mapTop,
+        height: 2 
+      };
+    });
+    
+    setLines(nextLines);
+
+    // Update active message based on center
+    const center = containerRect.top + containerRect.height / 2;
+    let closestId = null;
+    let minDist = Infinity;
+    
+    elements.forEach(el => {
+      const rect = el.getBoundingClientRect();
+      const dist = Math.abs((rect.top + rect.height / 2) - center);
+      if (dist < minDist) {
+        minDist = dist;
+        closestId = el.getAttribute('data-message-id');
+      }
+    });
+    setActiveId(closestId);
+  };
+
+  const scheduleUpdate = () => {
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(() => {
+      update();
+      rafId = null;
+    });
+  };
+
+  createEffect(() => {
+    props.messages.length;
+    scheduleUpdate();
+  });
+
+  createEffect(() => {
+    const container = props.containerRef();
+    if (!container) return;
+
+    container.addEventListener("scroll", scheduleUpdate);
+    window.addEventListener("resize", scheduleUpdate);
+
+    onCleanup(() => {
+      container.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+      if (rafId !== null) cancelAnimationFrame(rafId);
+    });
+  });
+
+  return (
+    <div class="hidden lg:flex w-6 bg-gray-1/50 border-l border-gray-3 flex-col items-center justify-start relative group/rail z-10 overflow-hidden py-2 h-full backdrop-blur-sm">
+      <For each={lines()}>
+        {(line, idx) => {
+          const isActive = () => line.id === activeId();
+          const isUser = line.role === "user";
+          
+          return (
+            <button
+              type="button"
+              aria-label={`${isUser ? "User" : "Agent"} message ${idx() + 1}`}
+              aria-current={isActive() ? "true" : undefined}
+              class={`absolute left-1/2 -translate-x-1/2 rounded-full transition-all duration-300 ease-out cursor-pointer appearance-none border-none p-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-12/70
+                ${
+                  isActive()
+                    ? "w-4 h-1.5 opacity-100 z-20 bg-gray-12 shadow-sm"
+                    : `w-2 h-1 ${isUser ? "bg-gray-11 opacity-60" : "bg-gray-6 opacity-40"} hover:w-3 hover:opacity-100`
+                }
+              `}
+              style={{
+                top: `${line.top}px`,
+              }}
+              title={isUser ? "User" : "Agent"}
+              onClick={(e) => {
+                e.stopPropagation();
+                const container = props.containerRef();
+                const el = container?.querySelector(`[data-message-id="${line.id}"]`);
+                el?.scrollIntoView({ behavior: "smooth", block: "center" });
+              }}
+            >
+              <span aria-hidden="true" class="absolute -inset-x-2 -inset-y-1" />
+            </button>
+          );
+        }}
+      </For>
+    </div>
+  );
+}
diff --git a/packages/app/src/app/components/session/sidebar.tsx b/packages/app/src/app/components/session/sidebar.tsx
new file mode 100644
index 000000000..0f9b1f443
--- /dev/null
+++ b/packages/app/src/app/components/session/sidebar.tsx
@@ -0,0 +1,278 @@
+import { For, Show, createMemo } from "solid-js";
+import { Check, ChevronDown, Circle, File, FileText, Folder, Plus } from "lucide-solid";
+
+import type { ArtifactItem, TodoItem } from "../../types";
+
+export type SidebarSectionState = {
+  progress: boolean;
+  artifacts: boolean;
+  context: boolean;
+};
+
+export type SidebarProps = {
+  todos: TodoItem[];
+  artifacts: ArtifactItem[];
+  activePlugins: string[];
+  activePluginStatus: string | null;
+  authorizedDirs: string[];
+  workingFiles: string[];
+  expandedSections: SidebarSectionState;
+  onToggleSection: (section: keyof SidebarSectionState) => void;
+  onOpenArtifact: (artifact: ArtifactItem) => void;
+  sessions: Array<{ id: string; title: string; slug?: string | null }>;
+  selectedSessionId: string | null;
+  onSelectSession: (id: string) => void;
+  sessionStatusById: Record<string, string>;
+  onCreateSession: () => void;
+  newTaskDisabled: boolean;
+};
+
+const humanizePlugin = (name: string) => {
+  const cleaned = name
+    .replace(/^@[^/]+\//, "")
+    .replace(/[-_]+/g, " ")
+    .replace(/\b(opencode|plugin)\b/gi, "")
+    .trim();
+  return cleaned
+    .split(" ")
+    .filter(Boolean)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ")
+    .trim();
+};
+
+export default function SessionSidebar(props: SidebarProps) {
+  const realTodos = createMemo(() => props.todos.filter((todo) => todo.content.trim()));
+
+  const progressDots = createMemo(() => {
+    const activeTodos = realTodos();
+    const total = activeTodos.length;
+    if (!total) return [] as boolean[];
+    const completed = activeTodos.filter((todo) => todo.status === "completed").length;
+    return Array.from({ length: total }, (_, idx) => idx < completed);
+  });
+
+  return (
+    <div class="flex flex-col h-full overflow-hidden">
+      <div class="px-4 pt-4 shrink-0">
+        <button
+          class="w-full flex items-center gap-2 px-3 py-2.5 rounded-xl bg-gray-12 text-gray-1 text-sm font-medium shadow-lg shadow-gray-12/10 hover:bg-gray-11 transition-colors"
+          onClick={props.onCreateSession}
+          disabled={props.newTaskDisabled}
+        >
+          <Plus size={16} />
+          New task
+        </button>
+      </div>
+
+      <div class="flex-1 overflow-y-auto px-4 py-4 space-y-6">
+        <div>
+          <div class="text-[10px] text-gray-9 uppercase tracking-widest font-semibold mb-3 px-2">Recents</div>
+          <div class="space-y-1">
+            <For each={props.sessions.slice(0, 8)}>
+              {(session) => (
+                <button
+                  class={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                    session.id === props.selectedSessionId
+                      ? "bg-gray-3 text-gray-12 font-medium"
+                      : "text-gray-11 hover:text-gray-12 hover:bg-gray-2"
+                  }`}
+                  onClick={() => props.onSelectSession(session.id)}
+                >
+                  <div class="flex items-center justify-between gap-2 w-full overflow-hidden">
+                    <span class="truncate">{session.title}</span>
+                    <Show
+                      when={
+                        props.sessionStatusById[session.id] &&
+                        props.sessionStatusById[session.id] !== "idle"
+                      }
+                    >
+                      <span
+                        class={`shrink-0 text-[10px] px-1.5 py-0.5 rounded-full border flex items-center gap-1 ${
+                          props.sessionStatusById[session.id] === "running"
+                            ? "border-amber-7/50 text-amber-11 bg-amber-2/50"
+                            : "border-gray-7/50 text-gray-10 bg-gray-2/50"
+                        }`}
+                      >
+                        <div
+                          class={`w-1 h-1 rounded-full ${
+                            props.sessionStatusById[session.id] === "running"
+                              ? "bg-amber-9 animate-pulse"
+                              : "bg-gray-9"
+                          }`}
+                        />
+                      </span>
+                    </Show>
+                  </div>
+                </button>
+              )}
+            </For>
+          </div>
+        </div>
+
+        <div class="space-y-4">
+          <Show when={realTodos().length > 0}>
+            <div class="rounded-2xl border border-gray-6 bg-gray-2/30">
+              <button
+                class="w-full px-4 py-3 flex items-center justify-between text-sm text-gray-12 font-medium"
+                onClick={() => props.onToggleSection("progress")}
+              >
+                <span>Progress</span>
+                <ChevronDown
+                  size={16}
+                  class={`transition-transform text-gray-10 ${
+                    props.expandedSections.progress ? "rotate-180" : ""
+                  }`.trim()}
+                />
+              </button>
+              <Show when={props.expandedSections.progress}>
+                <div class="px-4 pb-4 pt-1">
+                  <div class="flex items-center gap-2 flex-wrap">
+                    <For each={progressDots()}>
+                      {(done) => (
+                        <div
+                          class={`h-6 w-6 rounded-full border flex items-center justify-center transition-colors ${
+                            done
+                              ? "border-green-6 bg-green-2 text-green-11"
+                              : "border-gray-6 bg-gray-1 text-gray-8"
+                          }`}
+                        >
+                          <Show when={done}>
+                            <Check size={14} />
+                          </Show>
+                        </div>
+                      )}
+                    </For>
+                  </div>
+                </div>
+              </Show>
+            </div>
+          </Show>
+
+          <div class="rounded-2xl border border-gray-6 bg-gray-2/30">
+            <button
+              class="w-full px-4 py-3 flex items-center justify-between text-sm text-gray-12 font-medium"
+              onClick={() => props.onToggleSection("artifacts")}
+            >
+              <span>Artifacts</span>
+              <ChevronDown
+                size={16}
+                class={`transition-transform text-gray-10 ${
+                  props.expandedSections.artifacts ? "rotate-180" : ""
+                }`.trim()}
+              />
+            </button>
+            <Show when={props.expandedSections.artifacts}>
+              <div class="px-4 pb-4 pt-1 space-y-3">
+                <Show
+                  when={props.artifacts.length}
+                  fallback={<div class="text-xs text-gray-9 pl-1">No artifacts yet.</div>}
+                >
+                  <For each={props.artifacts}>
+                    {(artifact) => (
+                      <button
+                        class="flex items-center gap-3 text-sm text-gray-11 hover:text-gray-12 w-full text-left group"
+                        onClick={() => props.onOpenArtifact(artifact)}
+                      >
+                        <div class="h-8 w-8 rounded-lg bg-gray-3 group-hover:bg-gray-4 flex items-center justify-center transition-colors shrink-0">
+                          <FileText size={16} class="text-gray-10 group-hover:text-gray-11" />
+                        </div>
+                        <div class="min-w-0">
+                          <div class="truncate">{artifact.name}</div>
+                        </div>
+                      </button>
+                    )}
+                  </For>
+                </Show>
+              </div>
+            </Show>
+          </div>
+
+          <div class="rounded-2xl border border-gray-6 bg-gray-2/30">
+            <button
+              class="w-full px-4 py-3 flex items-center justify-between text-sm text-gray-12 font-medium"
+              onClick={() => props.onToggleSection("context")}
+            >
+              <span>Context</span>
+              <ChevronDown
+                size={16}
+                class={`transition-transform text-gray-10 ${
+                  props.expandedSections.context ? "rotate-180" : ""
+                }`.trim()}
+              />
+            </button>
+            <Show when={props.expandedSections.context}>
+              <div class="px-4 pb-4 pt-1 space-y-5">
+                <Show when={props.activePlugins.length || props.activePluginStatus}>
+                  <div>
+                    <div class="flex items-center justify-between text-[11px] uppercase tracking-wider text-gray-9 font-semibold mb-2">
+                      <span>Active plugins</span>
+                    </div>
+                    <div class="space-y-2">
+                      <Show
+                        when={props.activePlugins.length}
+                        fallback={
+                          <div class="text-xs text-gray-9">
+                            {props.activePluginStatus ?? "No plugins loaded."}
+                          </div>
+                        }
+                      >
+                        <For each={props.activePlugins}>
+                          {(plugin) => (
+                            <div class="flex items-center gap-2 text-xs text-gray-11">
+                              <Circle size={6} class="text-green-9 fill-green-9" />
+                              <span class="truncate">{humanizePlugin(plugin) || plugin}</span>
+                            </div>
+                          )}
+                        </For>
+                      </Show>
+                    </div>
+                  </div>
+                </Show>
+
+                <div>
+                  <div class="flex items-center justify-between text-[11px] uppercase tracking-wider text-gray-9 font-semibold mb-2">
+                    <span>Authorized folders</span>
+                  </div>
+                  <div class="space-y-2">
+                    <For each={props.authorizedDirs.slice(0, 3)}>
+                      {(folder) => (
+                        <div class="flex items-center gap-2 text-xs text-gray-11">
+                          <Folder size={12} class="text-gray-9" />
+                          <span class="truncate" title={folder}>
+                            {folder.split(/[/\\]/).pop()}
+                          </span>
+                        </div>
+                      )}
+                    </For>
+                  </div>
+                </div>
+
+                <div>
+                   <div class="flex items-center justify-between text-[11px] uppercase tracking-wider text-gray-9 font-semibold mb-2">
+                    <span>Working files</span>
+                  </div>
+                  <div class="space-y-2">
+                    <Show
+                      when={props.workingFiles.length}
+                      fallback={<div class="text-xs text-gray-9">None yet.</div>}
+                    >
+                      <For each={props.workingFiles}>
+                        {(file) => (
+                          <div class="flex items-center gap-2 text-xs text-gray-11">
+                            <File size={12} class="text-gray-9" />
+                            <span class="truncate">{file}</span>
+                          </div>
+                        )}
+                      </For>
+                    </Show>
+                  </div>
+                </div>
+              </div>
+            </Show>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/app/src/app/demo-state.ts b/packages/app/src/app/demo-state.ts
index dce8f0ec0..9a347e4f1 100644
--- a/packages/app/src/app/demo-state.ts
+++ b/packages/app/src/app/demo-state.ts
@@ -28,6 +28,7 @@ export function createDemoState(options: {
     name: "Demo",
     path: "~/OpenWork Demo",
     preset: "starter",
+    workspaceType: "local",
   });
 
   const isDemoMode = createMemo(() => demoMode());
@@ -106,6 +107,7 @@ export function createDemoState(options: {
         name: "Home",
         path: "~/OpenWork Demo",
         preset: "starter",
+        workspaceType: "local",
       });
       setDemoSessions([baseSession]);
       setDemoSessionStatusById({ [baseSession.id]: "completed" });
@@ -140,6 +142,7 @@ export function createDemoState(options: {
         name: "Finance",
         path: "~/OpenWork Demo/finance",
         preset: "starter",
+        workspaceType: "local",
       });
       setDemoSessions([{ ...baseSession, title: "Weekly finance recap" }]);
       setDemoSessionStatusById({ [baseSession.id]: "completed" });
@@ -183,6 +186,7 @@ export function createDemoState(options: {
         name: "Notes",
         path: "~/OpenWork Demo/notes",
         preset: "starter",
+        workspaceType: "local",
       });
       setDemoSessions([{ ...baseSession, title: "Notes summary" }]);
       setDemoSessionStatusById({ [baseSession.id]: "completed" });
@@ -217,6 +221,7 @@ export function createDemoState(options: {
       name: "Home",
       path: "~/OpenWork Demo/home",
       preset: "starter",
+      workspaceType: "local",
     });
     setDemoSessions([{ ...baseSession, title: "Grocery order" }]);
     setDemoSessionStatusById({ [baseSession.id]: "completed" });
diff --git a/packages/app/src/app/pages/session.tsx b/packages/app/src/app/pages/session.tsx
index f458741e8..01c055beb 100644
--- a/packages/app/src/app/pages/session.tsx
+++ b/packages/app/src/app/pages/session.tsx
@@ -1,4 +1,4 @@
-import { For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js";
+import { For, Show, createEffect, createMemo, createSignal, onMount } from "solid-js";
 import type { Agent, Part, Provider } from "@opencode-ai/sdk/v2/client";
 import type {
   ArtifactItem,
@@ -13,25 +13,23 @@ import type {
 
 import {
   ArrowRight,
-  Check,
-  ChevronDown,
-  Circle,
-  File,
-  FileText,
-  Folder,
   HardDrive,
-  Plus,
   Shield,
   Zap,
 } from "lucide-solid";
 
 import Button from "../components/button";
-import PartView from "../components/part-view";
 import RenameSessionModal from "../components/rename-session-modal";
 import WorkspaceChip from "../components/workspace-chip";
 import ProviderAuthModal from "../components/provider-auth-modal";
 import { isTauriRuntime, isWindowsPlatform } from "../utils";
 
+import MessageList from "../components/session/message-list";
+import Composer, { type CommandItem } from "../components/session/composer";
+import SessionSidebar, { type SidebarSectionState } from "../components/session/sidebar";
+import Minimap from "../components/session/minimap";
+import FlyoutItem from "../components/flyout-item";
+
 export type SessionViewProps = {
   selectedSessionId: string | null;
   setView: (view: View) => void;
@@ -55,14 +53,10 @@ export type SessionViewProps = {
   summarizeStep: (part: Part) => { title: string; detail?: string };
   expandedStepIds: Set<string>;
   setExpandedStepIds: (updater: (current: Set<string>) => Set<string>) => Set<string>;
-  expandedSidebarSections: { progress: boolean; artifacts: boolean; context: boolean };
+  expandedSidebarSections: SidebarSectionState;
   setExpandedSidebarSections: (
-    updater: (current: { progress: boolean; artifacts: boolean; context: boolean }) => {
-      progress: boolean;
-      artifacts: boolean;
-      context: boolean;
-    },
-  ) => { progress: boolean; artifacts: boolean; context: boolean };
+    updater: (current: SidebarSectionState) => SidebarSectionState,
+  ) => SidebarSectionState;
   artifacts: ArtifactItem[];
   workingFiles: string[];
   authorizedDirs: string[];
@@ -97,58 +91,120 @@ export type SessionViewProps = {
   listAgents: () => Promise<Agent[]>;
   setSessionAgent: (sessionId: string, agent: string | null) => void;
   saveSession: (sessionId: string) => Promise<string>;
+  sessionStatusById: Record<string, string>;
 };
 
 export default function SessionView(props: SessionViewProps) {
   let messagesEndEl: HTMLDivElement | undefined;
-
-  createEffect(() => {
-    props.messages.length;
-    props.todos.length;
-    showAnticipatoryCursor();
-    messagesEndEl?.scrollIntoView({ behavior: "smooth" });
-  });
-
-  const realTodos = createMemo(() => props.todos.filter((todo) => todo.content.trim()));
-
-  const progressDots = createMemo(() => {
-    const activeTodos = realTodos();
-    const total = activeTodos.length;
-    if (!total) return [] as boolean[];
-    const completed = activeTodos.filter((todo) => todo.status === "completed").length;
-    return Array.from({ length: total }, (_, idx) => idx < completed);
-  });
+  let chatContainerEl: HTMLDivElement | undefined;
 
   const [artifactToast, setArtifactToast] = createSignal<string | null>(null);
   const [commandToast, setCommandToast] = createSignal<string | null>(null);
-  const [commandIndex, setCommandIndex] = createSignal(0);
   const [providerAuthActionBusy, setProviderAuthActionBusy] = createSignal(false);
   const [renameModalOpen, setRenameModalOpen] = createSignal(false);
   const [renameTitle, setRenameTitle] = createSignal("");
   const [renameBusy, setRenameBusy] = createSignal(false);
 
-  let promptInputEl: HTMLTextAreaElement | undefined;
+  type Flyout = {
+    id: string;
+    rect: { top: number; left: number; width: number; height: number };
+    targetRect: { top: number; left: number; width: number; height: number };
+    label: string;
+    icon: "file" | "check" | "folder";
+  };
+  const [flyouts, setFlyouts] = createSignal<Flyout[]>([]);
+  const [prevTodoCount, setPrevTodoCount] = createSignal(0);
+  const [prevArtifactCount, setPrevArtifactCount] = createSignal(0);
+  const [prevFileCount, setPrevFileCount] = createSignal(0);
+  const [isInitialLoad, setIsInitialLoad] = createSignal(true);
+  
+  const pendingArtifactRafIds = new Set<number>();
+
+  onMount(() => {
+    setTimeout(() => setIsInitialLoad(false), 2000);
+  });
 
-  const focusPromptInput = () => {
-    if (props.busy) return;
-    const el = promptInputEl;
-    if (!el) return;
-    el.focus();
-    try {
-      const len = el.value.length;
-      el.setSelectionRange(len, len);
-    } catch {
-      // ignore
-    }
+  createEffect(() => {
+    props.messages.length;
+    props.todos.length;
+    messagesEndEl?.scrollIntoView({ behavior: "smooth" });
+  });
+
+  const triggerFlyout = (
+    sourceEl: Element | null,
+    targetId: string,
+    label: string,
+    icon: Flyout["icon"]
+  ) => {
+    if (isInitialLoad() || !sourceEl) return;
+    const targetEl = document.getElementById(targetId);
+    if (!targetEl) return;
+
+    const rect = sourceEl.getBoundingClientRect();
+    const targetRect = targetEl.getBoundingClientRect();
+
+    const id = Math.random().toString(36);
+    setFlyouts((prev) => [
+      ...prev,
+      {
+        id,
+        rect: { top: rect.top, left: rect.left, width: rect.width, height: rect.height },
+        targetRect: { top: targetRect.top, left: targetRect.left, width: targetRect.width, height: targetRect.height },
+        label,
+        icon,
+      },
+    ]);
+
+    setTimeout(() => {
+      setFlyouts((prev) => prev.filter((f) => f.id !== id));
+    }, 1000);
   };
 
   createEffect(() => {
-    const handler = () => {
-      focusPromptInput();
-    };
+    const todos = props.todos.filter((t) => t.content.trim());
+    const count = todos.length;
+    const prev = prevTodoCount();
+    if (count > prev && prev > 0) {
+      const lastMsg = chatContainerEl?.querySelector('[data-message-role="assistant"]:last-child');
+      triggerFlyout(lastMsg ?? null, "sidebar-progress", "New Task", "check");
+    }
+    setPrevTodoCount(count);
+  });
 
-    window.addEventListener("openwork:focusPrompt", handler);
-    onCleanup(() => window.removeEventListener("openwork:focusPrompt", handler));
+  createEffect(() => {
+    const artifacts = props.artifacts;
+    const count = artifacts.length;
+    const prev = prevArtifactCount();
+    if (count > prev && prev > 0) {
+      const last = artifacts[artifacts.length - 1];
+      const scheduleAttempt = (attempts: number) => {
+        const rafId = requestAnimationFrame(() => {
+          pendingArtifactRafIds.delete(rafId);
+          const card = document.querySelector(`[data-artifact-id="${last.id}"]`);
+          if (card) {
+            triggerFlyout(card, "sidebar-artifacts", last.name, "file");
+            return;
+          }
+          if (attempts > 0) {
+            scheduleAttempt(attempts - 1);
+          }
+        });
+        pendingArtifactRafIds.add(rafId);
+      };
+      scheduleAttempt(3);
+    }
+    setPrevArtifactCount(count);
+  });
+  
+  createEffect(() => {
+     const files = props.workingFiles;
+     const count = files.length;
+     const prev = prevFileCount();
+     if (count > prev && prev > 0) {
+        const lastMsg = chatContainerEl?.querySelector('[data-message-role="assistant"]:last-child');
+        triggerFlyout(lastMsg ?? null, "sidebar-context", "File Modified", "folder");
+     }
+     setPrevFileCount(count);
   });
 
   createEffect(() => {
@@ -163,19 +219,6 @@ export default function SessionView(props: SessionViewProps) {
     return () => window.clearTimeout(id);
   });
 
-  const maxPromptHeight = 160;
-
-  const syncPromptHeight = () => {
-    if (!promptInputEl) return;
-    promptInputEl.style.height = "auto";
-    const nextHeight = Math.min(promptInputEl.scrollHeight, maxPromptHeight);
-    promptInputEl.style.height = `${nextHeight}px`;
-    promptInputEl.style.overflowY =
-      promptInputEl.scrollHeight > maxPromptHeight ? "auto" : "hidden";
-  };
-
-  const artifactActionLabel = () => (isWindowsPlatform() ? "Open" : "Reveal");
-
   const artifactActionToast = () => (isWindowsPlatform() ? "Opened in default app." : "Revealed in file manager.");
 
   const resolveArtifactPath = (artifact: ArtifactItem) => {
@@ -219,106 +262,6 @@ export default function SessionView(props: SessionViewProps) {
     }
   };
 
-
-  const humanizePlugin = (name: string) => {
-    const cleaned = name
-      .replace(/^@[^/]+\//, "")
-      .replace(/[-_]+/g, " ")
-      .replace(/\b(opencode|plugin)\b/gi, "")
-      .trim();
-    return cleaned
-      .split(" ")
-      .filter(Boolean)
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(" ")
-      .trim();
-  };
-
-  const toggleSteps = (id: string) => {
-    props.setExpandedStepIds((current) => {
-      const next = new Set(current);
-      if (next.has(id)) {
-        next.delete(id);
-      } else {
-        next.add(id);
-      }
-      return next;
-    });
-  };
-
-  const toggleSidebar = (key: "progress" | "artifacts" | "context") => {
-    props.setExpandedSidebarSections((current) => ({ ...current, [key]: !current[key] }));
-  };
-
-  const artifactsByMessage = createMemo(() => {
-    const map = new Map<string, ArtifactItem[]>();
-    for (const artifact of props.artifacts) {
-      const key = artifact.messageId?.trim();
-      if (!key) continue;
-      const current = map.get(key);
-      if (current) {
-        current.push(artifact);
-      } else {
-        map.set(key, [artifact]);
-      }
-    }
-    return map;
-  });
-
-  const unlinkedArtifacts = createMemo(() => props.artifacts.filter((artifact) => !artifact.messageId));
-
-
-  const modelLabelParts = createMemo(() => {
-    const label = props.selectedSessionModelLabel || "Model";
-    const [provider, model] = label.split(" · ");
-    return {
-      provider: provider?.trim() || label,
-      model: model?.trim() || "Ready",
-    };
-  });
-
-  const isModelUnknown = createMemo(() =>
-    ["model", "unknown", "default"].includes((props.selectedSessionModelLabel || "").trim().toLowerCase()),
-  );
-
-  const modelUnavailableDetail = createMemo(() => {
-    if (props.selectedSessionModelLabel) return null;
-    return "Connect a provider to customize this.";
-  });
-
-  const isAssistantMessage = (msg: MessageWithParts) => (msg.info as any).role === "assistant";
-  const isUserMessage = (msg: MessageWithParts) => (msg.info as any).role === "user";
-
-  const lastUserMessageId = createMemo(() => {
-    const list = props.messages;
-    for (let i = list.length - 1; i >= 0; i -= 1) {
-      const msg = list[i];
-      if (msg && isUserMessage(msg)) return String((msg.info as any).id ?? "");
-    }
-    return "";
-  });
-
-  const hasAssistantTextAfterLastUser = createMemo(() => {
-    const pivot = lastUserMessageId();
-    if (!pivot) return false;
-    const list = props.messages;
-    const pivotIndex = list.findIndex((msg) => String((msg.info as any).id ?? "") === pivot);
-    if (pivotIndex < 0) return false;
-    for (let i = pivotIndex + 1; i < list.length; i += 1) {
-      const msg = list[i];
-      if (!msg || !isAssistantMessage(msg)) continue;
-      if (msg.parts.some((part) => part.type === "text" && part.text?.trim())) {
-        return true;
-      }
-    }
-    return false;
-  });
-
-  const showAnticipatoryCursor = createMemo(() => {
-    if (props.busyLabel !== "Running" && props.sessionStatus !== "running") return false;
-    return !hasAssistantTextAfterLastUser();
-  });
-
   const selectedSessionTitle = createMemo(() => {
     const id = props.selectedSessionId;
     if (!id) return "";
@@ -363,10 +306,7 @@ export default function SessionView(props: SessionViewProps) {
     }
   };
 
-  const clearPrompt = () => {
-    props.setPrompt("");
-    queueMicrotask(syncPromptHeight);
-  };
+  const clearPrompt = () => props.setPrompt("");
 
   const extractCommandArgs = (raw: string) => {
     const trimmed = raw.trim();
@@ -377,29 +317,6 @@ export default function SessionView(props: SessionViewProps) {
     return body.slice(spaceIndex + 1).trim();
   };
 
-  const extractCommandRemainder = (raw: string) => {
-    if (!raw.startsWith("/")) return "";
-    const body = raw.slice(1);
-    const spaceIndex = body.search(/\s/);
-    if (spaceIndex === -1) return "";
-    return body.slice(spaceIndex);
-  };
-
-  const applyCommandCompletion = (commandId: string) => {
-    if (!commandId) return;
-    const remainder = extractCommandRemainder(props.prompt);
-    const next = `/${commandId}${remainder}`;
-    if (next === props.prompt) return;
-    props.setPrompt(next);
-    queueMicrotask(() => {
-      syncPromptHeight();
-      if (!promptInputEl) return;
-      const length = promptInputEl.value.length;
-      promptInputEl.focus();
-      promptInputEl.setSelectionRange(length, length);
-    });
-  };
-
   const requireSessionId = () => {
     const sessionId = props.selectedSessionId;
     if (!sessionId) {
@@ -433,7 +350,6 @@ export default function SessionView(props: SessionViewProps) {
   const commandList = createMemo(() => [
     {
       id: "models",
-      label: "Models",
       description: "Choose a model",
       run: () => {
         props.openSessionModelPicker();
@@ -442,7 +358,6 @@ export default function SessionView(props: SessionViewProps) {
     },
     {
       id: "connect",
-      label: "Connect",
       description: "Connect a provider",
       run: async () => {
         try {
@@ -457,7 +372,6 @@ export default function SessionView(props: SessionViewProps) {
     },
     {
       id: "new",
-      label: "New",
       description: "Start a new task",
       run: () => {
         props.createSessionAndOpen();
@@ -466,7 +380,6 @@ export default function SessionView(props: SessionViewProps) {
     },
     {
       id: "agent",
-      label: "Agent",
       description: "Choose an agent",
       run: async () => {
         const sessionId = requireSessionId();
@@ -524,7 +437,6 @@ export default function SessionView(props: SessionViewProps) {
     },
     {
       id: "export",
-      label: "Export",
       description: "Export session JSON",
       run: async () => {
         const sessionId = requireSessionId();
@@ -542,7 +454,6 @@ export default function SessionView(props: SessionViewProps) {
     },
     {
       id: "rename",
-      label: "Rename",
       description: "Rename this session",
       run: () => {
         openRenameModal();
@@ -551,7 +462,6 @@ export default function SessionView(props: SessionViewProps) {
     },
     {
       id: "help",
-      label: "Help",
       description: "Show available commands",
       run: () => {
         setCommandToast("Commands: /models, /connect, /new, /agent, /export, /rename, /help");
@@ -560,136 +470,26 @@ export default function SessionView(props: SessionViewProps) {
     },
   ]);
 
-  const commandInput = createMemo(() => {
-    const value = props.prompt;
-    if (!value.startsWith("/")) return null;
-    return value.slice(1);
-  });
-
-  const commandToken = createMemo(() => {
-    const value = commandInput();
-    if (value == null) return null;
-    const token = value.trim().split(/\s+/)[0]?.toLowerCase() ?? "";
-    return token;
-  });
-
   const commandMatches = createMemo(() => {
-    const token = commandToken();
-    if (token == null) return [];
+    const value = props.prompt;
+    if (!value.startsWith("/")) return [];
+    const token = value.slice(1).trim().split(/\s+/)[0]?.toLowerCase() ?? "";
     const list = commandList();
     if (!token) return list;
     return list.filter((command) => command.id.startsWith(token));
   });
 
-  const commandMenuOpen = createMemo(() => commandInput() !== null && !props.busy);
-
-  createEffect(() => {
-    if (!commandMenuOpen()) return;
-    queueMicrotask(focusPromptInput);
-  });
-
-  const moveCommandIndex = (delta: number) => {
-    const matches = commandMatches();
-    if (!matches.length) return;
-    setCommandIndex((current) => {
-      const next = current + delta;
-      if (next < 0) return 0;
-      if (next >= matches.length) return matches.length - 1;
-      return next;
-    });
+  const handleRunCommand = (commandId: string) => {
+     const command = commandList().find(c => c.id === commandId);
+     if (command) {
+       command.run();
+     }
   };
 
-
-  createEffect(() => {
-    const matches = commandMatches();
-    if (!matches.length) {
-      setCommandIndex(0);
-      return;
-    }
-    setCommandIndex((current) => Math.min(current, matches.length - 1));
-  });
-
-  createEffect(() => {
-    props.prompt;
-    syncPromptHeight();
-  });
-
-  const runCommand = (commandId?: string) => {
-    if (!commandId) {
-      setCommandToast("Unknown command");
-      return null;
-    }
-    const command = commandList().find((entry) => entry.id === commandId);
-    if (!command) {
-      setCommandToast("Unknown command");
-      return null;
-    }
-    return command.run();
-  };
-
-  const selectCommand = (commandId?: string) => {
-    if (!commandId) {
-      setCommandToast("Unknown command");
-      return;
-    }
-    applyCommandCompletion(commandId);
-    const result = runCommand(commandId);
-    if (result === null) return;
-    Promise.resolve(result).finally(() => {
-      clearPrompt();
-    });
-  };
-
-  const handlePrimaryAction = () => {
-    if (commandMenuOpen()) {
-      const matches = commandMatches();
-      const active = matches[commandIndex()] ?? matches[0];
-      selectCommand(active?.id);
-      return;
-    }
+  const handleSendPrompt = () => {
     props.sendPromptAsync().catch(() => undefined);
   };
 
-  const handlePromptKeyDown = (event: KeyboardEvent) => {
-    if (event.key === "Enter" && event.shiftKey) return;
-    if (event.isComposing && event.key !== "Enter") return;
-
-    const menuOpen = commandMenuOpen();
-    if (menuOpen) {
-      const matches = commandMatches();
-      if (event.key === "Enter") {
-        event.preventDefault();
-        handlePrimaryAction();
-      }
-      if (event.key === "ArrowDown") {
-        event.preventDefault();
-        if (!matches.length) return;
-        moveCommandIndex(1);
-        return;
-      }
-      if (event.key === "ArrowUp") {
-        event.preventDefault();
-        if (!matches.length) return;
-        moveCommandIndex(-1);
-        return;
-      }
-      if (event.key === "Tab") {
-        event.preventDefault();
-        return;
-      }
-      if (event.key === "Escape") {
-        event.preventDefault();
-        clearPrompt();
-      }
-      return;
-    }
-
-    if (event.key === "Enter") {
-      event.preventDefault();
-      handlePrimaryAction();
-    }
-  };
-
   return (
     <Show
       when={props.selectedSessionId}
@@ -749,502 +549,94 @@ export default function SessionView(props: SessionViewProps) {
 
         <div class="flex-1 flex overflow-hidden">
           <aside class="hidden lg:flex w-72 border-r border-gray-6 bg-gray-1 flex-col">
-            <div class="px-4 pt-4">
-              <button
-                class="w-full flex items-center gap-2 px-3 py-2 rounded-xl bg-gray-12 text-gray-1 text-sm font-medium shadow-lg shadow-gray-12/10"
-                onClick={props.createSessionAndOpen}
-                disabled={props.newTaskDisabled}
-              >
-                <Plus size={16} />
-                New task
-              </button>
-            </div>
-
-            <div class="flex-1 overflow-y-auto px-4 py-4">
-              <div class="text-xs text-gray-10 uppercase tracking-wide mb-3">Recents</div>
-              <div class="space-y-2">
-                <For each={props.sessions.slice(0, 8)}>
-                  {(session) => (
-                    <button
-                      class={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
-                        session.id === props.selectedSessionId
-                          ? "bg-gray-2 text-gray-12"
-                          : "text-gray-11 hover:text-gray-12 hover:bg-gray-2/50"
-                      }`}
-                      onClick={async () => {
-                        await props.selectSession(session.id);
-                        props.setView("session");
-                        props.setTab("sessions");
-                      }}
-                    >
-                      <div class="flex items-center justify-between gap-2">
-                        <span class="truncate">{session.title}</span>
-                      </div>
-                    </button>
-                  )}
-                </For>
-              </div>
-              <div class="mt-6 text-xs text-gray-10">
-                These tasks run locally and aren't synced across devices.
-              </div>
-            </div>
+             <SessionSidebar
+               todos={props.todos}
+               artifacts={props.artifacts}
+               activePlugins={props.activePlugins}
+               activePluginStatus={props.activePluginStatus}
+               authorizedDirs={props.authorizedDirs}
+               workingFiles={props.workingFiles}
+               expandedSections={props.expandedSidebarSections}
+               onToggleSection={(section) => {
+                 props.setExpandedSidebarSections((curr) => ({...curr, [section]: !curr[section]}));
+               }}
+               onOpenArtifact={handleOpenArtifact}
+               sessions={props.sessions}
+               selectedSessionId={props.selectedSessionId}
+               onSelectSession={async (id) => {
+                 await props.selectSession(id);
+                 props.setView("session");
+                 props.setTab("sessions");
+               }}
+               sessionStatusById={props.sessionStatusById}
+               onCreateSession={props.createSessionAndOpen}
+               newTaskDisabled={props.newTaskDisabled}
+             />
           </aside>
 
-          <div class="flex-1 overflow-y-auto p-6 md:p-10 scroll-smooth">
-            <div class="max-w-2xl mx-auto space-y-6 pb-32">
-              <Show when={props.messages.length === 0}>
-                <div class="text-center py-20 space-y-4">
-                  <div class="w-16 h-16 bg-gray-2 rounded-3xl mx-auto flex items-center justify-center border border-gray-6">
-                    <Zap class="text-gray-7" />
-                  </div>
-                  <h3 class="text-xl font-medium">Ready to work</h3>
-                  <p class="text-gray-10 text-sm max-w-xs mx-auto">
-                    Describe a task. I'll show progress and ask for permissions when needed.
-                  </p>
-                </div>
-              </Show>
-
-              <For each={props.messages}>
-                {(msg) => {
-                  const isUser = () => (msg.info as any).role === "user";
-                  const renderableParts = () =>
-                    msg.parts.filter((p) => {
-                      if (p.type === "reasoning") {
-                        return props.developerMode && props.showThinking;
-                      }
-
-                      if (p.type === "step-start" || p.type === "step-finish") {
-                        return props.developerMode;
-                      }
-
-                      if (p.type === "text" || p.type === "tool") {
-                        return true;
-                      }
-
-                      return props.developerMode;
-                    });
-
-                  const groups = () =>
-                    props.groupMessageParts(renderableParts(), String((msg.info as any).id ?? "message"));
-                  const groupSpacing = () => (isUser() ? "mb-3" : "mb-4");
-                  const messageId = () => String((msg.info as any).id ?? "");
-                  const messageArtifacts = () => artifactsByMessage().get(messageId()) ?? [];
-
-                  return (
-                    <Show when={renderableParts().length > 0}>
-                      <div class={`flex ${isUser() ? "justify-end" : "justify-start"}`.trim()}>
-                        <div
-                          class={`w-full ${
-                            isUser()
-                              ? "max-w-[520px] rounded-2xl bg-gray-4 text-gray-12 shadow-sm border-gray-5 border-1 shadow-gray-12/5 p-4 text-sm leading-relaxed rounded-br-none"
-                              : "max-w-[68ch] text-[15px] leading-7 text-gray-12"
-                          }`}
-                        >
-                          <For each={groups()}>
-                            {(group, idx) => (
-                              <div class={idx() === groups().length - 1 ? "" : groupSpacing()}>
-                                <Show when={group.kind === "text"}>
-                                  <PartView
-                                      part={(group as { kind: "text"; part: Part }).part}
-                                      developerMode={props.developerMode}
-                                      showThinking={props.showThinking}
-                                      tone={isUser() ? "dark" : "light"}
-                                      renderMarkdown={!isUser()}
-                                    />
-                                </Show>
-                                <Show when={group.kind === "steps"}>
-                                  <div class={isUser() ? "mt-2" : "mt-3 border-t border-gray-6/60 pt-3"}>
-                                    <button
-                                      class={`flex items-center gap-2 text-xs ${
-                                        isUser() ? "text-gray-10 hover:text-gray-11" : "text-gray-10 hover:text-gray-12"
-                                      }`}
-                                      onClick={() => toggleSteps((group as any).id)}
-                                    >
-                                      <span>
-                                        {props.expandedStepIds.has((group as any).id) ? "Hide steps" : "View steps"}
-                                      </span>
-                                      <ChevronDown
-                                        size={14}
-                                        class={`transition-transform ${props.expandedStepIds.has((group as any).id) ? "rotate-180" : ""}`.trim()}
-                                      />
-                                    </button>
-                                    <Show when={props.expandedStepIds.has((group as any).id)}>
-                                      <div
-                                        class={`mt-3 space-y-3 rounded-xl border p-3 ${
-                                          isUser()
-                                            ? "border-gray-6 bg-gray-1/60"
-                                            : "border-gray-6/70 bg-gray-2/40"
-                                        }`}
-                                      >
-                                        <For each={(group as any).parts as Part[]}>
-                                          {(part) => {
-                                            const summary = props.summarizeStep(part);
-                                            return (
-                                              <div class="flex items-start gap-3 text-xs text-gray-11">
-                                                <div class="mt-0.5 h-5 w-5 rounded-full border border-gray-7 flex items-center justify-center text-gray-10">
-                                                  {part.type === "tool" ? <File size={12} /> : <Circle size={8} />}
-                                                </div>
-                                                <div>
-                                                  <div class="text-gray-12">{summary.title}</div>
-                                                  <Show when={summary.detail}>
-                                                    <div class="mt-1 text-gray-10">{summary.detail}</div>
-                                                  </Show>
-                                                  <Show when={props.developerMode && (part.type !== "tool" || props.showThinking)}>
-                                                    <div class="mt-2 text-xs text-gray-10">
-                                                      <PartView
-                                                        part={part}
-                                                        developerMode={props.developerMode}
-                                                        showThinking={props.showThinking}
-                                                        tone={isUser() ? "dark" : "light"}
-                                                      />
-                                                    </div>
-                                                  </Show>
-                                                </div>
-                                              </div>
-                                            );
-                                          }}
-                                        </For>
-                                      </div>
-                                    </Show>
-                                  </div>
-                                </Show>
-                              </div>
-                            )}
-                          </For>
-                          <Show when={messageArtifacts().length}>
-                            <div class={`mt-4 space-y-2 ${isUser() ? "text-gray-12" : ""}`.trim()}>
-                              <div class="text-[11px] uppercase tracking-wide text-gray-9">Artifacts</div>
-                              <For each={messageArtifacts()}>
-                                {(artifact) => (
-                                  <div class="rounded-2xl border border-gray-6 bg-gray-1/60 px-4 py-3 flex items-center justify-between">
-                                    <div class="flex items-center gap-3">
-                                      <div class="h-9 w-9 rounded-lg bg-gray-2 flex items-center justify-center">
-                                        <FileText size={16} class="text-gray-10" />
-                                      </div>
-                                      <div>
-                                        <div class="text-sm text-gray-12">{artifact.name}</div>
-                                        <div class="text-xs text-gray-10">Document</div>
-                                      </div>
-                                    </div>
-                                    <Button variant="outline" class="text-xs" onClick={() => handleOpenArtifact(artifact)}>
-                                      {artifactActionLabel()}
-                                    </Button>
-                                  </div>
-                                )}
-                              </For>
-                            </div>
-                          </Show>
-                        </div>
-                      </div>
-                    </Show>
-                  );
-                }}
-              </For>
-
-              <Show when={showAnticipatoryCursor()}>
-                <div class="flex justify-start py-4 px-2">
-                  <Zap size={14} class="text-gray-7 animate-soft-pulse" />
+          <div
+            class="flex-1 overflow-y-auto pt-6 md:pt-10 scroll-smooth relative no-scrollbar"
+            ref={(el) => (chatContainerEl = el)}
+          >
+            <style>
+              {`
+                .no-scrollbar::-webkit-scrollbar {
+                  display: none;
+                }
+                .no-scrollbar {
+                  -ms-overflow-style: none;
+                  scrollbar-width: none;
+                }
+              `}
+            </style>
+            
+            <Show when={props.messages.length === 0}>
+              <div class="text-center py-20 space-y-4">
+                <div class="w-16 h-16 bg-gray-2 rounded-3xl mx-auto flex items-center justify-center border border-gray-6">
+                  <Zap class="text-gray-7" />
                 </div>
-              </Show>
-
-              <Show when={unlinkedArtifacts().length}>
-                <div class="mt-6 space-y-2">
-                  <div class="text-[11px] uppercase tracking-wide text-gray-9">Artifacts</div>
-                  <For each={unlinkedArtifacts()}>
-                    {(artifact) => (
-                      <div class="rounded-2xl border border-gray-6 bg-gray-1/60 px-4 py-3 flex items-center justify-between">
-                        <div class="flex items-center gap-3">
-                          <div class="h-9 w-9 rounded-lg bg-gray-2 flex items-center justify-center">
-                            <FileText size={16} class="text-gray-10" />
-                          </div>
-                          <div>
-                            <div class="text-sm text-gray-12">{artifact.name}</div>
-                            <div class="text-xs text-gray-10">Document</div>
-                          </div>
-                        </div>
-                        <Button variant="outline" class="text-xs" onClick={() => handleOpenArtifact(artifact)}>
-                          {artifactActionLabel()}
-                        </Button>
-                      </div>
-                    )}
-                  </For>
-                </div>
-              </Show>
-
-              <div ref={(el) => (messagesEndEl = el)} />
-            </div>
+                <h3 class="text-xl font-medium">Ready to work</h3>
+                <p class="text-gray-10 text-sm max-w-xs mx-auto">
+                  Describe a task. I'll show progress and ask for permissions when needed.
+                </p>
+              </div>
+            </Show>
+
+            <MessageList 
+              messages={props.messages}
+              artifacts={props.artifacts}
+              developerMode={props.developerMode}
+              showThinking={props.showThinking}
+              expandedStepIds={props.expandedStepIds}
+              setExpandedStepIds={props.setExpandedStepIds}
+              onOpenArtifact={handleOpenArtifact}
+            />
+
+            <div ref={(el) => (messagesEndEl = el)} />
           </div>
+          
+          <Minimap containerRef={() => chatContainerEl} messages={props.messages} />
 
           <Show when={artifactToast()}>
             <div class="fixed bottom-24 right-8 z-30 rounded-xl bg-gray-2 border border-gray-6 px-4 py-2 text-xs text-gray-11 shadow-lg">
               {artifactToast()}
             </div>
           </Show>
-
-          <aside class="hidden lg:flex w-80 border-l border-gray-6 bg-gray-1 flex-col">
-            <div class="p-4 space-y-4 overflow-y-auto flex-1">
-              <Show when={realTodos().length > 0}>
-                <div class="rounded-2xl border border-gray-6 bg-gray-1/60">
-                  <button
-                    class="w-full px-4 py-3 flex items-center justify-between text-sm text-gray-12"
-                    onClick={() => toggleSidebar("progress")}
-                  >
-                    <span>Progress</span>
-                    <ChevronDown
-                      size={16}
-                      class={`transition-transform ${props.expandedSidebarSections.progress ? "rotate-180" : ""}`.trim()}
-                    />
-                  </button>
-                  <Show when={props.expandedSidebarSections.progress}>
-                    <div class="px-4 pb-4 pt-1">
-                      <div class="flex items-center gap-2">
-                        <For each={progressDots()}>
-                          {(done) => (
-                            <div
-                              class={`h-6 w-6 rounded-full border flex items-center justify-center ${
-                                done ? "border-green-6 text-green-11" : "border-gray-7 text-gray-8"
-                              }`}
-                            >
-                              <Show when={done}>
-                                <Check size={14} />
-                              </Show>
-                            </div>
-                          )}
-                        </For>
-                      </div>
-                      <div class="mt-2 text-xs text-gray-10">Steps will show as the task unfolds.</div>
-                    </div>
-                  </Show>
-                </div>
-              </Show>
-
-              <div class="rounded-2xl border border-gray-6 bg-gray-1/60">
-                <button
-                  class="w-full px-4 py-3 flex items-center justify-between text-sm text-gray-12"
-                  onClick={() => toggleSidebar("artifacts")}
-                >
-                  <span>Artifacts</span>
-                  <ChevronDown
-                    size={16}
-                    class={`transition-transform ${props.expandedSidebarSections.artifacts ? "rotate-180" : ""}`.trim()}
-                  />
-                </button>
-                <Show when={props.expandedSidebarSections.artifacts}>
-                  <div class="px-4 pb-4 pt-1 space-y-3">
-                    <Show
-                      when={props.artifacts.length}
-                      fallback={<div class="text-xs text-gray-7">No artifacts yet.</div>}
-                    >
-                      <For each={props.artifacts}>
-                        {(artifact) => (
-                          <div class="flex items-center gap-3 text-sm text-gray-11">
-                            <div class="h-8 w-8 rounded-lg bg-gray-2 flex items-center justify-center">
-                              <FileText size={16} class="text-gray-10" />
-                            </div>
-                            <div class="min-w-0">
-                              <div class="truncate text-gray-12">{artifact.name}</div>
-                            </div>
-                          </div>
-                        )}
-                      </For>
-                    </Show>
-                  </div>
-                </Show>
-              </div>
-
-              <div class="rounded-2xl border border-gray-6 bg-gray-1/60">
-                <button
-                  class="w-full px-4 py-3 flex items-center justify-between text-sm text-gray-12"
-                  onClick={() => toggleSidebar("context")}
-                >
-                  <span>Context</span>
-                  <ChevronDown
-                    size={16}
-                    class={`transition-transform ${props.expandedSidebarSections.context ? "rotate-180" : ""}`.trim()}
-                  />
-                </button>
-                <Show when={props.expandedSidebarSections.context}>
-                  <div class="px-4 pb-4 pt-1 space-y-4">
-                    <Show when={props.activePlugins.length || props.activePluginStatus}>
-                      <div>
-                        <div class="flex items-center justify-between text-xs text-gray-10">
-                          <span>Active plugins</span>
-                          <span>{props.activePlugins.length}</span>
-                        </div>
-                        <div class="mt-2 space-y-2">
-                          <Show
-                            when={props.activePlugins.length}
-                            fallback={
-                              <div class="text-xs text-gray-7">{props.activePluginStatus ?? "No plugins loaded."}</div>
-                            }
-                          >
-                            <For each={props.activePlugins}>
-                              {(plugin) => (
-                                <div class="flex items-center gap-2 text-xs text-gray-11">
-                                  <Circle size={8} class="text-gray-10" />
-                                  <span class="truncate">{humanizePlugin(plugin) || plugin}</span>
-                                </div>
-                              )}
-                            </For>
-                          </Show>
-                        </div>
-                      </div>
-                    </Show>
-
-                    <div>
-                      <div class="flex items-center justify-between text-xs text-gray-10">
-                        <span>Selected folders</span>
-                        <span>{props.authorizedDirs.length}</span>
-                      </div>
-                      <div class="mt-2 space-y-2">
-                        <For each={props.authorizedDirs.slice(0, 3)}>
-                          {(folder) => (
-                            <div class="flex items-center gap-2 text-xs text-gray-11">
-                              <Folder size={12} class="text-gray-10" />
-                              <span class="truncate">{folder}</span>
-                            </div>
-                          )}
-                        </For>
-                      </div>
-                    </div>
-
-                    <div>
-                      <div class="text-xs text-gray-10">Working files</div>
-                      <div class="mt-2 space-y-2">
-                        <Show
-                          when={props.workingFiles.length}
-                          fallback={<div class="text-xs text-gray-7">None yet.</div>}
-                        >
-                          <For each={props.workingFiles}>
-                            {(file) => (
-                              <div class="flex items-center gap-2 text-xs text-gray-11">
-                                <File size={12} class="text-gray-10" />
-                                <span class="truncate">{file}</span>
-                              </div>
-                            )}
-                          </For>
-                        </Show>
-                      </div>
-                    </div>
-                  </div>
-                </Show>
-              </div>
-            </div>
-          </aside>
         </div>
 
-        <div class="p-4 border-t border-gray-6 bg-gray-1 sticky bottom-0 z-20">
-          <div class="max-w-2xl mx-auto">
-              <div
-                class={`bg-gray-2 border border-gray-6 rounded-2xl overflow-visible transition-all shadow-2xl relative group/input ${
-                  commandMenuOpen()
-                    ? "rounded-t-none border-t-transparent"
-                    : "focus-within:ring-1 focus-within:ring-gray-7"
-                }`}
-              >
-                <Show when={commandMenuOpen()}>
-                  <div class="absolute bottom-full left-[-1px] right-[-1px] z-30">
-                    <div class="rounded-t-2xl border border-gray-6 border-b-0 bg-gray-2 shadow-2xl overflow-hidden">
-                      <div class="px-3 pt-3 pb-2 text-[10px] font-semibold uppercase tracking-[0.2em] text-gray-8 border-b border-gray-6/30 bg-gray-2">
-                        Commands
-                      </div>
-                      <div class="space-y-1 p-2 bg-gray-2">
-                        <Show
-                          when={commandMatches().length}
-                          fallback={
-                            <div class="px-3 py-2 text-xs text-gray-9">
-                              No commands found.
-                            </div>
-                          }
-                        >
-                          <For each={commandMatches()}>
-                            {(command, idx) => (
-                              <button
-                                type="button"
-                                class={`w-full flex items-start gap-3 rounded-xl px-3 py-2 text-left transition-colors ${
-                                  idx() === commandIndex()
-                                    ? "bg-gray-12/10 text-gray-12"
-                                    : "text-gray-11 hover:bg-gray-12/5"
-                                }`}
-                                onMouseDown={(event) => {
-                                  event.preventDefault();
-                                  selectCommand(command.id);
-                                }}
-                                onMouseEnter={() => {
-                                  setCommandIndex(idx());
-                                  promptInputEl?.focus();
-                                }}
-                              >
-                                <div class="text-xs font-semibold text-gray-12">/{command.id}</div>
-                                <div class="text-[11px] text-gray-9">{command.description}</div>
-                              </button>
-                            )}
-                          </For>
-                        </Show>
-                      </div>
-                    </div>
-                  </div>
-                </Show>
-
-                <button
-                  type="button"
-                  class="absolute top-2 left-4 flex items-center gap-1 text-[10px] font-bold text-gray-7 hover:text-gray-11 transition-colors uppercase tracking-widest z-10"
-                  onClick={() => props.openSessionModelPicker()}
-                  disabled={props.busy}
-                >
-                  <Zap size={10} class="text-gray-7 group-hover:text-amber-11 transition-colors" />
-                  <span>{isModelUnknown() ? "Standard" : modelLabelParts().model}</span>
-                </button>
-
-                <div class="p-2 pt-6 pb-3 px-4">
-                  <Show when={props.showTryNotionPrompt}>
-                    <button
-                      type="button"
-                      class="w-full mb-2 flex items-center justify-between gap-3 rounded-xl border border-green-7/20 bg-green-7/10 px-3 py-2 text-left text-sm text-green-12 transition-colors hover:bg-green-7/15"
-                      onClick={() => props.onTryNotionPrompt()}
-                    >
-                      <span>Try it now: set up my CRM in Notion</span>
-                      <span class="text-xs text-green-12 font-medium">Insert prompt</span>
-                    </button>
-                  </Show>
-
-                  <div class="relative">
-
-                  <Show when={commandToast()}>
-                    <div class="absolute bottom-full right-0 mb-2 z-30 rounded-xl border border-gray-6 bg-gray-1/90 px-3 py-2 text-xs text-gray-11 shadow-lg">
-                      {commandToast()}
-                    </div>
-                  </Show>
-
-                  <div class="relative flex items-end gap-2">
-                    <textarea
-                      ref={(el) => (promptInputEl = el)}
-                      rows={1}
-                      disabled={props.busy}
-                      value={props.prompt}
-                      onInput={(e) => {
-                        props.setPrompt(e.currentTarget.value);
-                        syncPromptHeight();
-                      }}
-                      onKeyDown={handlePromptKeyDown}
-                      placeholder="Ask OpenWork..."
-                      class="flex-1 bg-transparent border-none p-0 text-gray-12 placeholder-gray-6 focus:ring-0 text-[15px] leading-relaxed resize-none min-h-[24px] max-h-[160px]"
-                    />
-
-                    <button
-                      disabled={!props.prompt.trim() || props.busy}
-                      onClick={handlePrimaryAction}
-                      class="p-1.5 bg-gray-12 text-gray-1 rounded-lg hover:scale-105 active:scale-95 transition-all disabled:opacity-0 disabled:scale-75 shadow-lg shrink-0"
-                      title="Run"
-                    >
-                      <ArrowRight size={18} />
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <Composer 
+           prompt={props.prompt}
+           setPrompt={props.setPrompt}
+           busy={props.busy}
+           onSend={handleSendPrompt}
+           commandMatches={commandMatches()}
+           onRunCommand={handleRunCommand}
+           selectedModelLabel={props.selectedSessionModelLabel || "Model"}
+           onModelClick={props.openSessionModelPicker}
+           showNotionBanner={props.showTryNotionPrompt}
+           onNotionBannerClick={props.onTryNotionPrompt}
+           toast={commandToast()}
+        />
 
         <ProviderAuthModal
           open={props.providerAuthModalOpen}
@@ -1340,6 +732,10 @@ export default function SessionView(props: SessionViewProps) {
             </div>
           </div>
         </Show>
+
+        <For each={flyouts()}>
+          {(item) => <FlyoutItem item={item} />}
+        </For>
       </div>
     </Show>
   );