diff --git a/app/[workspace]/project/[projectId]/(home)/plan/page.tsx b/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
index 713f5a06..d384542a 100644
--- a/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
+++ b/app/[workspace]/project/[projectId]/(home)/plan/page.tsx
@@ -19,22 +19,45 @@
 
 import { useCallback, useEffect, useState } from "react";
 import { useParams } from "next/navigation";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
 import {
-  Loader2, AlertCircle, Lightbulb, ListTodo, GitBranch,
-  Sparkles, Plus, Trash2, Check, RotateCcw, Pencil, X,
+  Loader2, AlertCircle, MessageSquare, ListTodo, GitBranch,
+  Target, Plus, Trash2, Check, RotateCcw, Pencil, X, Eye, FileText,
 } from "lucide-react";
 
 interface Idea     { id: string; text: string; createdAt: string }
-interface Task     { id: string; text: string; status: "open" | "done"; createdAt: string; doneAt?: string }
+type TaskStatus = "open" | "in_progress" | "done" | "blocked";
+interface Task {
+  id: string;
+  title: string;
+  description?: string;
+  status: TaskStatus;
+  agent?: { runId: string; startedAt: string; finishedAt?: string; status: "queued" | "running" | "succeeded" | "failed" } | null;
+  createdAt: string;
+  startedAt?: string;
+  doneAt?: string;
+  // Legacy single-line tasks (pre-markdown migration) carry text instead of title.
+  text?: string;
+}
 interface Decision { id: string; title: string; choice: string; why?: string; createdAt: string }
 interface Plan {
-  vision?: string;
-  ideas: Idea[];
+  vision?: string;       // stored as `vision` server-side, surfaced as "Objective" in the UI
+  ideas: Idea[];         // legacy bin — no longer surfaced; kept on the model for backward compat
   tasks: Task[];
   decisions: Decision[];
 }
 
-type Section = "vision" | "ideas" | "tasks" | "decisions";
+interface Session {
+  id: string;
+  title: string;
+  summary: string | null;
+  messageCount: number;
+  updatedAt: string;
+  createdAt: string;
+}
+
+type Section = "objective" | "sessions" | "tasks" | "decisions";
 
 interface SectionDef {
   key: Section;
@@ -44,10 +67,10 @@ interface SectionDef {
 }
 
 const SECTIONS: SectionDef[] = [
-  { key: "vision",    label: "Vision",    icon: Sparkles,   blurb: "What you're building, in one sentence." },
-  { key: "tasks",     label: "Tasks",     icon: ListTodo,   blurb: "What needs to happen next." },
-  { key: "decisions", label: "Decisions", icon: GitBranch,  blurb: "Choices already made — so we stop re-litigating them." },
-  { key: "ideas",     label: "Ideas",     icon: Lightbulb,  blurb: "Raw capture. Park half-thoughts here." },
+  { key: "objective", label: "Objective", icon: Target,        blurb: "What you're building, who it's for, and why." },
+  { key: "tasks",     label: "Tasks",     icon: ListTodo,      blurb: "What needs to happen next." },
+  { key: "decisions", label: "Decisions", icon: GitBranch,     blurb: "Choices already made — so we stop re-litigating them." },
+  { key: "sessions",  label: "Sessions",  icon: MessageSquare, blurb: "Past chat sessions for this project." },
 ];
 
 // ──────────────────────────────────────────────────
@@ -57,11 +80,13 @@ const SECTIONS: SectionDef[] = [
 export default function PlanTab() {
   const params = useParams();
   const projectId = params.projectId as string;
+  const workspace = params.workspace as string;
 
   const [plan, setPlan] = useState<Plan | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [active, setActive] = useState<Section>("vision");
+  const [active, setActive] = useState<Section>("objective");
+  const [sessionCount, setSessionCount] = useState(0);
 
   const load = useCallback(async () => {
     try {
@@ -100,14 +125,103 @@ export default function PlanTab() {
   }
 
   const counts: Record<Section, number> = {
-    vision: plan.vision ? 1 : 0,
-    ideas: plan.ideas.length,
-    tasks: plan.tasks.filter((t) => t.status === "open").length,
+    objective: plan.vision ? 1 : 0,
+    sessions: sessionCount,
+    tasks: plan.tasks.filter((t) => t.status !== "done").length,
     decisions: plan.decisions.length,
   };
 
   return (
     <div style={pageWrap}>
+      <style jsx global>{`
+        .vibn-prose {
+          font-family: "Outfit", "Inter", ui-sans-serif, sans-serif;
+          color: #1a1a1a;
+          font-size: 0.95rem;
+          line-height: 1.65;
+        }
+        .vibn-prose > :first-child { margin-top: 0; }
+        .vibn-prose > :last-child  { margin-bottom: 0; }
+        .vibn-prose h1,
+        .vibn-prose h2,
+        .vibn-prose h3,
+        .vibn-prose h4 {
+          font-family: "Newsreader", "Lora", Georgia, serif;
+          font-weight: 500;
+          letter-spacing: -0.01em;
+          margin: 1.4em 0 0.5em;
+          line-height: 1.25;
+          color: #1a1a1a;
+        }
+        .vibn-prose h1 { font-size: 1.7rem; font-weight: 400; letter-spacing: -0.02em; }
+        .vibn-prose h2 { font-size: 1.3rem; }
+        .vibn-prose h3 { font-size: 1.05rem; }
+        .vibn-prose h4 { font-size: 0.95rem; }
+        .vibn-prose p,
+        .vibn-prose ul,
+        .vibn-prose ol,
+        .vibn-prose blockquote { margin: 0.75em 0; }
+        .vibn-prose ul,
+        .vibn-prose ol { padding-left: 1.4em; }
+        .vibn-prose li { margin: 0.25em 0; }
+        .vibn-prose li > p { margin: 0.25em 0; }
+        .vibn-prose blockquote {
+          border-left: 3px solid #e8e4dc;
+          padding: 0.1em 0 0.1em 14px;
+          color: #5f5e5a;
+          font-style: italic;
+        }
+        .vibn-prose code {
+          font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
+          font-size: 0.85em;
+          background: #f3eee4;
+          padding: 1px 5px;
+          border-radius: 4px;
+        }
+        .vibn-prose pre {
+          font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
+          font-size: 0.84rem;
+          line-height: 1.55;
+          background: #1a1a1a;
+          color: #f6f4f0;
+          padding: 14px 16px;
+          border-radius: 8px;
+          overflow-x: auto;
+          margin: 1em 0;
+        }
+        .vibn-prose pre code {
+          background: transparent;
+          color: inherit;
+          padding: 0;
+          font-size: inherit;
+        }
+        .vibn-prose a {
+          color: #1a1a1a;
+          text-decoration: underline;
+          text-decoration-color: #c8c2b6;
+          text-underline-offset: 3px;
+        }
+        .vibn-prose a:hover { text-decoration-color: #1a1a1a; }
+        .vibn-prose hr {
+          border: none;
+          border-top: 1px solid #e8e4dc;
+          margin: 1.6em 0;
+        }
+        .vibn-prose table {
+          border-collapse: collapse;
+          width: 100%;
+          margin: 1em 0;
+          font-size: 0.88rem;
+        }
+        .vibn-prose th,
+        .vibn-prose td {
+          border: 1px solid #e8e4dc;
+          padding: 8px 12px;
+          text-align: left;
+        }
+        .vibn-prose th { background: #fafaf6; font-weight: 600; }
+        .vibn-prose img { max-width: 100%; border-radius: 6px; }
+      `}</style>
       <div style={grid}>
         <aside style={leftCol}>
           <h2 style={heading}>Plan</h2>
@@ -124,8 +238,8 @@ export default function PlanTab() {
 
         <section style={rightCol}>
           <div style={panel}>
-            {active === "vision"    && <VisionPanel    plan={plan} projectId={projectId} onChange={setPlan} />}
-            {active === "ideas"     && <IdeasPanel     plan={plan} projectId={projectId} onChange={setPlan} />}
+            {active === "objective" && <VisionPanel    plan={plan} projectId={projectId} onChange={setPlan} />}
+            {active === "sessions"  && <SessionsPanel  workspace={workspace} projectId={projectId} onCount={setSessionCount} />}
             {active === "tasks"     && <TasksPanel     plan={plan} projectId={projectId} onChange={setPlan} />}
             {active === "decisions" && <DecisionsPanel plan={plan} projectId={projectId} onChange={setPlan} />}
           </div>
@@ -177,8 +291,14 @@ function VisionPanel({
   const [draft, setDraft] = useState(plan.vision ?? "");
   const [saving, setSaving] = useState(false);
   const [editing, setEditing] = useState(!plan.vision);
+  // While editing, toggle between raw markdown source and rendered preview.
+  const [editorView, setEditorView] = useState<"write" | "preview">("write");
+  const [dirty, setDirty] = useState(false);
 
-  useEffect(() => { setDraft(plan.vision ?? ""); }, [plan.vision]);
+  useEffect(() => {
+    setDraft(plan.vision ?? "");
+    setDirty(false);
+  }, [plan.vision]);
 
   const save = async () => {
     setSaving(true);
@@ -190,106 +310,181 @@ function VisionPanel({
       });
       const d = await r.json();
       if (d.plan) onChange(d.plan);
+      setDirty(false);
       setEditing(false);
     } finally {
       setSaving(false);
     }
   };
 
+  const cancel = () => {
+    setDraft(plan.vision ?? "");
+    setDirty(false);
+    setEditing(false);
+  };
+
   return (
     <div>
-      <PanelHeader title="Vision" hint="One sentence on what you're building and who it's for." />
-      {editing ? (
-        <>
-          <textarea
-            value={draft}
-            onChange={(e) => setDraft(e.target.value)}
-            placeholder="A simple CRM for solo founders who hate spreadsheets…"
-            rows={5}
-            style={textarea}
-          />
-          <div style={{ display: "flex", gap: 8, marginTop: 10 }}>
-            <button onClick={save} disabled={saving} style={primaryBtn}>
-              {saving ? <Loader2 size={13} className="animate-spin" /> : <Check size={13} />}
-              Save
-            </button>
-            {plan.vision && (
-              <button onClick={() => { setDraft(plan.vision ?? ""); setEditing(false); }} style={ghostBtn}>
-                Cancel
-              </button>
-            )}
-          </div>
-        </>
-      ) : (
-        <>
-          <p style={visionText}>{plan.vision}</p>
+      <div style={visionHeaderRow}>
+        <h3 style={panelTitle}>Objective</h3>
+        {!editing && plan.vision && (
           <button onClick={() => setEditing(true)} style={ghostBtn}>
             <Pencil size={12} /> Edit
           </button>
+        )}
+      </div>
+
+      {editing ? (
+        <>
+          <div style={editorTabs}>
+            <button
+              type="button"
+              onClick={() => setEditorView("write")}
+              style={editorView === "write" ? editorTabActive : editorTab}
+            >
+              <FileText size={12} /> Write
+            </button>
+            <button
+              type="button"
+              onClick={() => setEditorView("preview")}
+              style={editorView === "preview" ? editorTabActive : editorTab}
+            >
+              <Eye size={12} /> Preview
+            </button>
+            <span style={{ flex: 1 }} />
+            {dirty && <span style={dirtyDot}>● Unsaved</span>}
+          </div>
+
+          {editorView === "write" ? (
+            <textarea
+              value={draft}
+              onChange={(e) => { setDraft(e.target.value); setDirty(true); }}
+              placeholder={visionPlaceholder}
+              style={visionTextarea}
+              spellCheck
+            />
+          ) : (
+            <div style={visionPreviewBox}>
+              {draft.trim() ? (
+                <div className="vibn-prose">
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>{draft}</ReactMarkdown>
+                </div>
+              ) : (
+                <div style={{ color: INK.muted, fontStyle: "italic" }}>
+                  Nothing to preview yet.
+                </div>
+              )}
+            </div>
+          )}
+
+          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
+            <button onClick={save} disabled={saving || !dirty} style={primaryBtn}>
+              {saving ? <Loader2 size={13} className="animate-spin" /> : <Check size={13} />}
+              Save
+            </button>
+            <button onClick={cancel} style={ghostBtn}>
+              <X size={13} /> Cancel
+            </button>
+          </div>
         </>
+      ) : plan.vision ? (
+        <div className="vibn-prose">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{plan.vision}</ReactMarkdown>
+        </div>
+      ) : (
+        <div style={emptyVisionBox}>
+          <p style={{ margin: 0, marginBottom: 12, fontSize: "0.9rem", color: INK.mid, lineHeight: 1.55 }}>
+            No objective yet. Write a few paragraphs about the problem, the people you&apos;re
+            building it for, and the shape of the solution. The AI reads this on every
+            chat so it stays anchored to your real intent.
+          </p>
+          <button onClick={() => { setEditing(true); setEditorView("write"); }} style={primaryBtn}>
+            <Plus size={13} /> Start writing
+          </button>
+        </div>
       )}
     </div>
   );
 }
 
+const visionPlaceholder = `# What we're building
+
+A short paragraph on the problem and who feels it.
+
+## Who it's for
+
+Describe the user — their context, what they currently do, and why it's painful.
+
+## What success looks like
+
+What changes when this exists?
+`;
+
 // ──────────────────────────────────────────────────
-// Ideas
+// Sessions — read-only log of past chat threads scoped to this project.
+// Title is auto-generated by the chat backend on first message; summary
+// (when present) is filled in by the AI at end-of-thread. Clicking a row
+// jumps the user back into that conversation in the side chat panel.
 // ──────────────────────────────────────────────────
 
-function IdeasPanel({
-  plan, projectId, onChange,
-}: { plan: Plan; projectId: string; onChange: (p: Plan) => void }) {
-  const [draft, setDraft] = useState("");
-  const [saving, setSaving] = useState(false);
+function SessionsPanel({
+  workspace, projectId, onCount,
+}: { workspace: string; projectId: string; onCount: (n: number) => void }) {
+  const [sessions, setSessions] = useState<Session[] | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [err, setErr] = useState<string | null>(null);
 
-  const add = async () => {
-    const text = draft.trim();
-    if (!text) return;
-    setSaving(true);
-    try {
-      const r = await fetch(`/api/projects/${projectId}/plan`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ kind: "idea", text }),
-      });
-      const d = await r.json();
-      if (d.plan) onChange(d.plan);
-      setDraft("");
-    } finally { setSaving(false); }
-  };
-
-  const remove = async (id: string) => {
-    const r = await fetch(`/api/projects/${projectId}/plan?kind=idea&id=${id}`, { method: "DELETE" });
-    const d = await r.json();
-    if (d.plan) onChange(d.plan);
-  };
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    fetch(`/api/chat/threads?workspace=${encodeURIComponent(workspace)}&projectId=${encodeURIComponent(projectId)}`, {
+      credentials: "include",
+    })
+      .then((r) => (r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))))
+      .then((d) => {
+        if (cancelled) return;
+        const list: Session[] = d.threads ?? [];
+        setSessions(list);
+        onCount(list.length);
+      })
+      .catch((e) => {
+        if (!cancelled) setErr(e?.message ?? "Failed to load sessions");
+      })
+      .finally(() => { if (!cancelled) setLoading(false); });
+    return () => { cancelled = true; };
+  }, [workspace, projectId, onCount]);
 
   return (
     <div>
-      <PanelHeader title="Ideas" hint="Park half-thoughts here. Promote the good ones to tasks later." />
-      <div style={addRow}>
-        <input
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => { if (e.key === "Enter") add(); }}
-          placeholder="A new idea…"
-          style={input}
-        />
-        <button onClick={add} disabled={saving || !draft.trim()} style={primaryBtn}>
-          <Plus size={13} /> Add
-        </button>
-      </div>
-      {plan.ideas.length === 0 ? (
-        <div style={emptyBox}>No ideas yet.</div>
+      <PanelHeader
+        title="Sessions"
+        hint="Past chat sessions on this project. Each one captures what was attempted, decided, or shipped."
+      />
+      {loading ? (
+        <div style={{ display: "flex", alignItems: "center", gap: 8, color: INK.mid, fontSize: "0.85rem", padding: "8px 0" }}>
+          <Loader2 size={13} className="animate-spin" /> Loading sessions…
+        </div>
+      ) : err ? (
+        <div style={errorBox}><AlertCircle size={13} style={{ marginRight: 6, verticalAlign: -2 }} />{err}</div>
+      ) : !sessions || sessions.length === 0 ? (
+        <div style={emptyBox}>
+          No sessions yet. Open the chat panel and start a conversation about this project —
+          it&apos;ll show up here.
+        </div>
       ) : (
         <ul style={list}>
-          {plan.ideas.map((idea) => (
-            <li key={idea.id} style={listRow}>
-              <span style={{ flex: 1, minWidth: 0 }}>{idea.text}</span>
-              <span style={timestampStyle}>{relativeTime(idea.createdAt)}</span>
-              <button onClick={() => remove(idea.id)} style={iconBtn} title="Delete">
-                <Trash2 size={13} />
-              </button>
+          {sessions.map((s) => (
+            <li key={s.id} style={sessionRow}>
+              <MessageSquare size={14} style={{ color: INK.mid, marginTop: 2, flexShrink: 0 }} />
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <div style={sessionTitle}>{s.title}</div>
+                {s.summary && <div style={sessionSummary}>{s.summary}</div>}
+                <div style={sessionMeta}>
+                  <span>{s.messageCount} {s.messageCount === 1 ? "message" : "messages"}</span>
+                  <span style={{ color: INK.muted }}>·</span>
+                  <span>{relativeTime(s.updatedAt)}</span>
+                </div>
+              </div>
             </li>
           ))}
         </ul>
@@ -302,113 +497,396 @@ function IdeasPanel({
 // Tasks
 // ──────────────────────────────────────────────────
 
+// Tasks. Each task is a *scoped unit of work* with a markdown spec —
+// a feature, a refactor, an investigation. The list-detail layout
+// mirrors how engineers think: pick one off the queue, see the full
+// brief, work it (or delegate it). Phase 2 will wire the "Delegate"
+// button to a background agent runner that executes the task spec
+// against the MCP and writes progress back here.
+
+function taskTitle(t: Task): string {
+  return (t.title || t.text || "Untitled task").trim();
+}
+
+const TASK_STATUS_LABEL: Record<TaskStatus, string> = {
+  open: "Open",
+  in_progress: "In progress",
+  done: "Done",
+  blocked: "Blocked",
+};
+const TASK_STATUS_COLOR: Record<TaskStatus, string> = {
+  open: "#5f5e5a",
+  in_progress: "#1d6cd0",
+  done: "#1f8c4d",
+  blocked: "#b94a3a",
+};
+
 function TasksPanel({
   plan, projectId, onChange,
 }: { plan: Plan; projectId: string; onChange: (p: Plan) => void }) {
-  const [draft, setDraft] = useState("");
+  const tasks = plan.tasks;
+  const [selectedId, setSelectedId] = useState<string | null>(() => tasks[0]?.id ?? null);
+  const [creating, setCreating] = useState(false);
+  const [filter, setFilter] = useState<"all" | "active" | "done">("active");
+
+  // Keep selection valid when the underlying list changes (delete / add).
+  useEffect(() => {
+    if (!selectedId && tasks.length > 0) {
+      setSelectedId(tasks[0].id);
+      return;
+    }
+    if (selectedId && !tasks.some((t) => t.id === selectedId)) {
+      setSelectedId(tasks[0]?.id ?? null);
+    }
+  }, [tasks, selectedId]);
+
+  const visible = tasks.filter((t) => {
+    if (filter === "all") return true;
+    if (filter === "done") return t.status === "done";
+    return t.status !== "done";
+  });
+  const selected = tasks.find((t) => t.id === selectedId) ?? null;
+
+  return (
+    <div>
+      <div style={visionHeaderRow}>
+        <h3 style={panelTitle}>Tasks</h3>
+        <button onClick={() => { setCreating(true); setSelectedId(null); }} style={primaryBtn}>
+          <Plus size={13} /> New task
+        </button>
+      </div>
+
+      <div style={taskFilterRow}>
+        {(["active", "done", "all"] as const).map((f) => (
+          <button
+            key={f}
+            type="button"
+            onClick={() => setFilter(f)}
+            style={filter === f ? taskFilterPillActive : taskFilterPill}
+          >
+            {f === "active" ? "Active" : f === "done" ? "Done" : "All"} · {
+              f === "active" ? tasks.filter((t) => t.status !== "done").length :
+              f === "done"   ? tasks.filter((t) => t.status === "done").length :
+                               tasks.length
+            }
+          </button>
+        ))}
+      </div>
+
+      <div style={taskSplit}>
+        <div style={taskListCol}>
+          {visible.length === 0 && !creating ? (
+            <div style={{ ...emptyBox, marginTop: 0 }}>
+              {tasks.length === 0
+                ? "No tasks yet. Create one to scope a feature, refactor, or investigation."
+                : "Nothing in this view."}
+            </div>
+          ) : (
+            <ul style={taskList}>
+              {visible.map((t) => (
+                <li key={t.id}>
+                  <button
+                    type="button"
+                    onClick={() => { setSelectedId(t.id); setCreating(false); }}
+                    style={selectedId === t.id ? taskItemActive : taskItem}
+                  >
+                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                      <span style={{ ...taskStatusDot, background: TASK_STATUS_COLOR[t.status] }} />
+                      <span style={taskItemTitle}>{taskTitle(t)}</span>
+                    </div>
+                    <div style={taskItemMeta}>
+                      <span>{TASK_STATUS_LABEL[t.status]}</span>
+                      <span style={{ color: INK.muted }}>·</span>
+                      <span>{relativeTime(t.doneAt ?? t.startedAt ?? t.createdAt)}</span>
+                    </div>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div style={taskDetailCol}>
+          {creating ? (
+            <TaskComposer
+              projectId={projectId}
+              onCancel={() => setCreating(false)}
+              onCreated={(plan, newId) => { onChange(plan); setCreating(false); setSelectedId(newId); }}
+            />
+          ) : selected ? (
+            <TaskDetail
+              task={selected}
+              projectId={projectId}
+              onChange={onChange}
+            />
+          ) : (
+            <div style={{ ...emptyBox, marginTop: 0 }}>
+              Pick a task on the left, or create a new one.
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────
+// Task detail — view + inline edit + status + delegate stub
+// ─────────────────────────────────────
+
+function TaskDetail({
+  task, projectId, onChange,
+}: { task: Task; projectId: string; onChange: (p: Plan) => void }) {
+  const [editing, setEditing] = useState(false);
+  const [titleDraft, setTitleDraft] = useState(taskTitle(task));
+  const [descDraft, setDescDraft] = useState(task.description ?? "");
+  const [editorView, setEditorView] = useState<"write" | "preview">("write");
   const [saving, setSaving] = useState(false);
 
-  const add = async () => {
-    const text = draft.trim();
-    if (!text) return;
-    setSaving(true);
-    try {
-      const r = await fetch(`/api/projects/${projectId}/plan`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ kind: "task", text }),
-      });
-      const d = await r.json();
-      if (d.plan) onChange(d.plan);
-      setDraft("");
-    } finally { setSaving(false); }
-  };
+  // Reset drafts whenever the selected task changes.
+  useEffect(() => {
+    setTitleDraft(taskTitle(task));
+    setDescDraft(task.description ?? "");
+    setEditing(false);
+  }, [task.id, task.title, task.description, task]);
 
-  const toggle = async (t: Task) => {
+  const patch = async (body: Record<string, unknown>) => {
     const r = await fetch(`/api/projects/${projectId}/plan`, {
       method: "PATCH",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ kind: "task", id: t.id, status: t.status === "open" ? "done" : "open" }),
+      body: JSON.stringify({ kind: "task", id: task.id, ...body }),
     });
     const d = await r.json();
     if (d.plan) onChange(d.plan);
   };
 
-  const remove = async (id: string) => {
-    const r = await fetch(`/api/projects/${projectId}/plan?kind=task&id=${id}`, { method: "DELETE" });
+  const save = async () => {
+    setSaving(true);
+    try {
+      await patch({ title: titleDraft.trim(), description: descDraft });
+      setEditing(false);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const remove = async () => {
+    const r = await fetch(`/api/projects/${projectId}/plan?kind=task&id=${task.id}`, { method: "DELETE" });
     const d = await r.json();
     if (d.plan) onChange(d.plan);
   };
 
-  const open = plan.tasks.filter((t) => t.status === "open");
-  const done = plan.tasks.filter((t) => t.status === "done");
-
   return (
-    <div>
-      <PanelHeader title="Tasks" hint="What needs to happen next. The AI sees open tasks as project context." />
-      <div style={addRow}>
-        <input
-          value={draft}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={(e) => { if (e.key === "Enter") add(); }}
-          placeholder="A new task…"
-          style={input}
-        />
-        <button onClick={add} disabled={saving || !draft.trim()} style={primaryBtn}>
-          <Plus size={13} /> Add
+    <div style={taskDetailWrap}>
+      <div style={taskDetailHeader}>
+        {editing ? (
+          <input
+            value={titleDraft}
+            onChange={(e) => setTitleDraft(e.target.value)}
+            placeholder="Task title"
+            style={{ ...input, fontSize: "1.05rem", fontWeight: 600 }}
+          />
+        ) : (
+          <h4 style={taskDetailTitle}>{taskTitle(task)}</h4>
+        )}
+        <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
+          {!editing && (
+            <button onClick={() => setEditing(true)} style={ghostBtn}>
+              <Pencil size={12} /> Edit
+            </button>
+          )}
+          {!editing && (
+            <button onClick={remove} style={ghostBtn} title="Delete task">
+              <Trash2 size={12} />
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div style={taskStatusRow}>
+        <span style={taskStatusLabel}>Status</span>
+        <select
+          value={task.status}
+          onChange={(e) => patch({ status: e.target.value })}
+          style={taskStatusSelect}
+        >
+          <option value="open">Open</option>
+          <option value="in_progress">In progress</option>
+          <option value="blocked">Blocked</option>
+          <option value="done">Done</option>
+        </select>
+        <span style={{ flex: 1 }} />
+        <button
+          type="button"
+          disabled
+          style={delegateBtn}
+          title="Coming soon: delegate this task to a background AI agent that executes the spec autonomously and reports back."
+        >
+          <Sparkle /> Delegate to agent
         </button>
       </div>
-      {open.length === 0 && done.length === 0 ? (
-        <div style={emptyBox}>No tasks yet.</div>
-      ) : (
+
+      {editing ? (
         <>
-          {open.length > 0 && (
-            <>
-              <div style={subHeading}>Open · {open.length}</div>
-              <ul style={list}>
-                {open.map((t) => (
-                  <li key={t.id} style={listRow}>
-                    <button onClick={() => toggle(t)} style={checkbox} title="Mark done">
-                      <span style={{ width: 12, height: 12, border: `1.5px solid ${INK.mid}`, borderRadius: 3 }} />
-                    </button>
-                    <span style={{ flex: 1, minWidth: 0 }}>{t.text}</span>
-                    <span style={timestampStyle}>{relativeTime(t.createdAt)}</span>
-                    <button onClick={() => remove(t.id)} style={iconBtn} title="Delete">
-                      <Trash2 size={13} />
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            </>
-          )}
-          {done.length > 0 && (
-            <>
-              <div style={{ ...subHeading, marginTop: 18 }}>Done · {done.length}</div>
-              <ul style={list}>
-                {done.map((t) => (
-                  <li key={t.id} style={{ ...listRow, opacity: 0.6 }}>
-                    <button onClick={() => toggle(t)} style={checkbox} title="Mark open">
-                      <Check size={12} />
-                    </button>
-                    <span style={{ flex: 1, minWidth: 0, textDecoration: "line-through" }}>{t.text}</span>
-                    <span style={timestampStyle}>{relativeTime(t.doneAt ?? t.createdAt)}</span>
-                    <button onClick={() => toggle(t)} style={iconBtn} title="Re-open">
-                      <RotateCcw size={13} />
-                    </button>
-                    <button onClick={() => remove(t.id)} style={iconBtn} title="Delete">
-                      <Trash2 size={13} />
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            </>
+          <div style={editorTabs}>
+            <button type="button" onClick={() => setEditorView("write")} style={editorView === "write" ? editorTabActive : editorTab}>
+              <FileText size={12} /> Write
+            </button>
+            <button type="button" onClick={() => setEditorView("preview")} style={editorView === "preview" ? editorTabActive : editorTab}>
+              <Eye size={12} /> Preview
+            </button>
+          </div>
+          {editorView === "write" ? (
+            <textarea
+              value={descDraft}
+              onChange={(e) => setDescDraft(e.target.value)}
+              placeholder={taskPlaceholder}
+              style={visionTextarea}
+              spellCheck
+            />
+          ) : (
+            <div style={visionPreviewBox}>
+              {descDraft.trim() ? (
+                <div className="vibn-prose">
+                  <ReactMarkdown remarkPlugins={[remarkGfm]}>{descDraft}</ReactMarkdown>
+                </div>
+              ) : (
+                <div style={{ color: INK.muted, fontStyle: "italic" }}>Nothing to preview yet.</div>
+              )}
+            </div>
           )}
+          <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
+            <button onClick={save} disabled={saving || !titleDraft.trim()} style={primaryBtn}>
+              {saving ? <Loader2 size={13} className="animate-spin" /> : <Check size={13} />} Save
+            </button>
+            <button
+              onClick={() => {
+                setTitleDraft(taskTitle(task));
+                setDescDraft(task.description ?? "");
+                setEditing(false);
+              }}
+              style={ghostBtn}
+            >
+              <X size={13} /> Cancel
+            </button>
+          </div>
         </>
+      ) : task.description?.trim() ? (
+        <div className="vibn-prose">
+          <ReactMarkdown remarkPlugins={[remarkGfm]}>{task.description}</ReactMarkdown>
+        </div>
+      ) : (
+        <div style={{ ...emptyBox, marginTop: 0 }}>
+          No spec yet. Click <em>Edit</em> and describe what success looks like for this task —
+          context, acceptance criteria, gotchas. Markdown supported.
+        </div>
       )}
     </div>
   );
 }
 
+// ─────────────────────────────────────
+// Task composer (new)
+// ─────────────────────────────────────
+
+function TaskComposer({
+  projectId, onCancel, onCreated,
+}: { projectId: string; onCancel: () => void; onCreated: (plan: Plan, taskId: string) => void }) {
+  const [title, setTitle] = useState("");
+  const [desc, setDesc] = useState("");
+  const [editorView, setEditorView] = useState<"write" | "preview">("write");
+  const [saving, setSaving] = useState(false);
+
+  const create = async () => {
+    if (!title.trim()) return;
+    setSaving(true);
+    try {
+      const r = await fetch(`/api/projects/${projectId}/plan`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ kind: "task", title: title.trim(), description: desc }),
+      });
+      const d = await r.json();
+      if (d.plan?.tasks?.[0]?.id) onCreated(d.plan, d.plan.tasks[0].id);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div style={taskDetailWrap}>
+      <div style={taskDetailHeader}>
+        <input
+          autoFocus
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="What is this task? (e.g. 'Migrate auth to NextAuth v5')"
+          style={{ ...input, fontSize: "1.05rem", fontWeight: 600 }}
+        />
+      </div>
+      <div style={editorTabs}>
+        <button type="button" onClick={() => setEditorView("write")} style={editorView === "write" ? editorTabActive : editorTab}>
+          <FileText size={12} /> Write
+        </button>
+        <button type="button" onClick={() => setEditorView("preview")} style={editorView === "preview" ? editorTabActive : editorTab}>
+          <Eye size={12} /> Preview
+        </button>
+      </div>
+      {editorView === "write" ? (
+        <textarea
+          value={desc}
+          onChange={(e) => setDesc(e.target.value)}
+          placeholder={taskPlaceholder}
+          style={visionTextarea}
+          spellCheck
+        />
+      ) : (
+        <div style={visionPreviewBox}>
+          {desc.trim() ? (
+            <div className="vibn-prose">
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>{desc}</ReactMarkdown>
+            </div>
+          ) : (
+            <div style={{ color: INK.muted, fontStyle: "italic" }}>Nothing to preview yet.</div>
+          )}
+        </div>
+      )}
+      <div style={{ display: "flex", gap: 8, marginTop: 12 }}>
+        <button onClick={create} disabled={saving || !title.trim()} style={primaryBtn}>
+          {saving ? <Loader2 size={13} className="animate-spin" /> : <Check size={13} />} Create task
+        </button>
+        <button onClick={onCancel} style={ghostBtn}>
+          <X size={13} /> Cancel
+        </button>
+      </div>
+    </div>
+  );
+}
+
+const taskPlaceholder = `## Goal
+
+What does success look like? One paragraph.
+
+## Context
+
+Why this matters now. Any background the agent or future-you needs.
+
+## Acceptance criteria
+
+- [ ] First observable thing that proves it's done
+- [ ] Second
+- [ ] ...
+
+## Notes / gotchas
+
+Edge cases, related decisions, links.
+`;
+
+function Sparkle() {
+  // tiny inline glyph — avoids pulling another lucide icon for a stub button
+  return <span aria-hidden style={{ display: "inline-block", width: 12, height: 12, fontSize: 12, lineHeight: 1 }}>✦</span>;
+}
+
 // ──────────────────────────────────────────────────
 // Decisions
 // ──────────────────────────────────────────────────
@@ -564,8 +1042,49 @@ const subHeading: React.CSSProperties = {
   fontSize: "0.68rem", fontWeight: 600, letterSpacing: "0.12em",
   textTransform: "uppercase", color: INK.muted, margin: "14px 0 8px",
 };
-const visionText: React.CSSProperties = {
-  fontSize: "1rem", lineHeight: 1.55, color: INK.ink, margin: "0 0 14px",
+const visionHeaderRow: React.CSSProperties = {
+  display: "flex", alignItems: "center", justifyContent: "space-between",
+  gap: 16, marginBottom: 18,
+};
+const editorTabs: React.CSSProperties = {
+  display: "flex", alignItems: "center", gap: 4,
+  borderBottom: `1px solid ${INK.border}`, marginBottom: 12, paddingBottom: 0,
+};
+const editorTab: React.CSSProperties = {
+  display: "inline-flex", alignItems: "center", gap: 6,
+  padding: "8px 12px", fontSize: "0.78rem", fontWeight: 500,
+  background: "transparent", color: INK.mid,
+  border: "none", borderBottom: "2px solid transparent",
+  cursor: "pointer", fontFamily: "inherit",
+  marginBottom: -1,
+};
+const editorTabActive: React.CSSProperties = {
+  ...editorTab,
+  color: INK.ink, fontWeight: 600,
+  borderBottomColor: INK.ink,
+};
+const dirtyDot: React.CSSProperties = {
+  fontSize: "0.72rem", color: "#b76b00", fontWeight: 500,
+};
+const visionTextarea: React.CSSProperties = {
+  width: "100%", minHeight: 360, padding: "14px 16px",
+  fontSize: "0.92rem", lineHeight: 1.6,
+  fontFamily: '"JetBrains Mono", "SF Mono", ui-monospace, monospace',
+  border: `1px solid ${INK.border}`, borderRadius: 8,
+  background: "#fdfcf9", color: INK.ink,
+  resize: "vertical", outline: "none",
+  boxSizing: "border-box",
+};
+const visionPreviewBox: React.CSSProperties = {
+  minHeight: 360, padding: "16px 20px",
+  border: `1px solid ${INK.border}`, borderRadius: 8,
+  background: "#fff",
+  boxSizing: "border-box",
+};
+const emptyVisionBox: React.CSSProperties = {
+  padding: "22px 24px",
+  border: `1px dashed ${INK.borderSoft}`, borderRadius: 10,
+  background: "#fafaf6",
 };
 const addRow: React.CSSProperties = { display: "flex", gap: 8, marginBottom: 14 };
 const input: React.CSSProperties = {
@@ -589,6 +1108,115 @@ const listRow: React.CSSProperties = {
   padding: "11px 14px", fontSize: "0.88rem",
   borderBottom: `1px solid ${INK.borderSoft}`, background: "#fff",
 };
+// Tasks (master/detail)
+const taskFilterRow: React.CSSProperties = {
+  display: "flex", gap: 6, marginBottom: 14,
+};
+const taskFilterPill: React.CSSProperties = {
+  padding: "5px 11px", fontSize: "0.74rem", fontWeight: 500,
+  background: "transparent", color: INK.mid,
+  border: `1px solid ${INK.border}`, borderRadius: 999,
+  cursor: "pointer", fontFamily: "inherit",
+};
+const taskFilterPillActive: React.CSSProperties = {
+  ...taskFilterPill,
+  background: INK.ink, color: "#fff", borderColor: INK.ink,
+};
+const taskSplit: React.CSSProperties = {
+  display: "grid",
+  gridTemplateColumns: "minmax(220px, 280px) 1fr",
+  gap: 18,
+  alignItems: "stretch",
+  minHeight: 320,
+};
+const taskListCol: React.CSSProperties = {
+  minWidth: 0,
+  borderRight: `1px solid ${INK.borderSoft}`,
+  paddingRight: 14,
+  maxHeight: 540, overflowY: "auto",
+};
+const taskDetailCol: React.CSSProperties = {
+  minWidth: 0,
+  paddingLeft: 4,
+};
+const taskList: React.CSSProperties = {
+  listStyle: "none", padding: 0, margin: 0,
+  display: "flex", flexDirection: "column", gap: 4,
+};
+const taskItem: React.CSSProperties = {
+  display: "flex", flexDirection: "column", gap: 4,
+  width: "100%", padding: "10px 12px",
+  background: "transparent", border: `1px solid transparent`,
+  borderRadius: 8, cursor: "pointer", textAlign: "left",
+  fontFamily: "inherit", color: "inherit",
+};
+const taskItemActive: React.CSSProperties = {
+  ...taskItem,
+  background: "#fff", border: `1px solid ${INK.border}`,
+  boxShadow: "0 1px 3px rgba(0,0,0,0.04)",
+};
+const taskItemTitle: React.CSSProperties = {
+  fontSize: "0.88rem", fontWeight: 600, color: INK.ink,
+  overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
+  flex: 1, minWidth: 0,
+};
+const taskStatusDot: React.CSSProperties = {
+  display: "inline-block", width: 8, height: 8, borderRadius: 999, flexShrink: 0,
+};
+const taskItemMeta: React.CSSProperties = {
+  display: "flex", gap: 6, alignItems: "center",
+  fontSize: "0.7rem", color: INK.muted, paddingLeft: 16,
+};
+const taskDetailWrap: React.CSSProperties = {
+  display: "flex", flexDirection: "column", minHeight: 0,
+};
+const taskDetailHeader: React.CSSProperties = {
+  display: "flex", alignItems: "center", justifyContent: "space-between",
+  gap: 12, marginBottom: 12,
+};
+const taskDetailTitle: React.CSSProperties = {
+  fontFamily: INK.fontSerif, fontSize: "1.25rem", fontWeight: 400,
+  letterSpacing: "-0.01em", margin: 0,
+};
+const taskStatusRow: React.CSSProperties = {
+  display: "flex", alignItems: "center", gap: 10,
+  padding: "10px 12px", marginBottom: 14,
+  background: "#fafaf6", border: `1px solid ${INK.borderSoft}`, borderRadius: 8,
+};
+const taskStatusLabel: React.CSSProperties = {
+  fontSize: "0.72rem", textTransform: "uppercase", letterSpacing: "0.1em",
+  color: INK.muted, fontWeight: 600,
+};
+const taskStatusSelect: React.CSSProperties = {
+  padding: "6px 10px", fontSize: "0.82rem",
+  border: `1px solid ${INK.border}`, borderRadius: 6,
+  background: "#fff", color: INK.ink, fontFamily: "inherit",
+  cursor: "pointer",
+};
+const delegateBtn: React.CSSProperties = {
+  display: "inline-flex", alignItems: "center", gap: 6,
+  padding: "6px 12px", fontSize: "0.78rem", fontWeight: 500,
+  background: "#fff", color: INK.mid,
+  border: `1px solid ${INK.border}`, borderRadius: 6,
+  cursor: "not-allowed", fontFamily: "inherit",
+  opacity: 0.7,
+};
+const sessionRow: React.CSSProperties = {
+  display: "flex", alignItems: "flex-start", gap: 12,
+  padding: "12px 14px",
+  borderBottom: `1px solid ${INK.borderSoft}`, background: "#fff",
+};
+const sessionTitle: React.CSSProperties = {
+  fontSize: "0.9rem", fontWeight: 600, color: INK.ink,
+  overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap",
+};
+const sessionSummary: React.CSSProperties = {
+  fontSize: "0.82rem", color: INK.mid, marginTop: 4, lineHeight: 1.5,
+};
+const sessionMeta: React.CSSProperties = {
+  display: "flex", gap: 8, alignItems: "center",
+  fontSize: "0.72rem", color: INK.muted, marginTop: 6,
+};
 const decisionRow: React.CSSProperties = {
   display: "flex", alignItems: "flex-start", gap: 10,
   padding: "12px 14px",
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 64a67272..1df5994e 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -500,6 +500,63 @@ export async function POST(request: Request) {
           [thread_id, email, JSON.stringify(finalMsg)],
         );
 
+        // Fire-and-forget: ask Gemini for a 1-2 sentence "what got done"
+        // summary of the conversation so far, persist it on the thread,
+        // and use the first user message (truncated) as a stable title
+        // when one isn't set yet. This is what powers the Sessions tab on
+        // the project Plan page — read-only chronological progress log.
+        // Wrapped in try/catch + .catch — the response stream is already
+        // closed and we don't want a summary failure to surface as an
+        // error to the user.
+        (async () => {
+          try {
+            const allMessages = [...history, finalMsg];
+            // Only summarize if there's something worth summarizing.
+            if (allMessages.length < 2) return;
+            const transcript = allMessages
+              .map((m) => {
+                const text = typeof m.content === 'string' ? m.content : JSON.stringify(m.content);
+                return `${m.role.toUpperCase()}: ${text.slice(0, 1200)}`;
+              })
+              .join('\n\n');
+            const sumResp = await callGeminiChat({
+              systemPrompt:
+                'You are summarizing a chat session for a project log. ' +
+                'Write 1-2 sentences (max 200 chars) describing what was actually attempted, decided, or shipped in this conversation. ' +
+                'Past tense, plain language, no preamble, no headings. ' +
+                'If nothing of substance happened, write a single short sentence describing the topic.',
+              messages: [{ role: 'user', content: transcript.slice(0, 8000) }],
+              temperature: 0.3,
+            });
+            const summary = (sumResp.text || '').trim().slice(0, 280);
+            // Pick a title only if the existing one is missing or generic.
+            const firstUser = allMessages.find((m) => m.role === 'user');
+            const firstText =
+              typeof firstUser?.content === 'string' ? firstUser.content : '';
+            const fallbackTitle = firstText.replace(/\s+/g, ' ').trim().slice(0, 60);
+            const update: Record<string, unknown> = {};
+            if (summary) update.summary = summary;
+            if (fallbackTitle) update.title = fallbackTitle;
+            if (Object.keys(update).length > 0) {
+              await query(
+                `UPDATE fs_chat_threads
+                    SET data = data || $2
+                  WHERE id = $1
+                    AND (
+                      ($2::jsonb ? 'title') IS FALSE
+                      OR data->>'title' IS NULL
+                      OR data->>'title' = ''
+                      OR data->>'title' = 'New conversation'
+                      OR ($2::jsonb ? 'summary')
+                    )`,
+                [thread_id, JSON.stringify(update)],
+              );
+            }
+          } catch {
+            // best-effort; silent failure
+          }
+        })().catch(() => {});
+
         emit({ type: 'done' });
         safeClose();
       } catch (e) {
diff --git a/app/api/chat/threads/route.ts b/app/api/chat/threads/route.ts
index 1a930f28..bb51cbf6 100644
--- a/app/api/chat/threads/route.ts
+++ b/app/api/chat/threads/route.ts
@@ -64,15 +64,31 @@ export async function GET(request: Request) {
   // When projectId is supplied, narrow to that project. When omitted,
   // return only WORKSPACE-level threads (project_id IS NULL) so the
   // workspace chat UI doesn't get spammed with every project's history.
+  // LEFT JOIN against fs_chat_messages so each thread row carries a
+  // message count. The Sessions tab on the Plan page renders this so
+  // the user can tell at a glance which conversations were substantive
+  // ("12 messages") vs. abandoned ("1 message").
   const sql = projectId
-    ? `SELECT id, project_id, data, created_at, updated_at
-         FROM fs_chat_threads
-        WHERE user_id = $1 AND workspace = $2 AND project_id = $3
-        ORDER BY updated_at DESC LIMIT 50`
-    : `SELECT id, project_id, data, created_at, updated_at
-         FROM fs_chat_threads
-        WHERE user_id = $1 AND workspace = $2 AND project_id IS NULL
-        ORDER BY updated_at DESC LIMIT 50`;
+    ? `SELECT t.id, t.project_id, t.data, t.created_at, t.updated_at,
+              COALESCE(m.cnt, 0)::int AS message_count
+         FROM fs_chat_threads t
+    LEFT JOIN (
+                SELECT thread_id, COUNT(*) AS cnt
+                  FROM fs_chat_messages
+                 GROUP BY thread_id
+              ) m ON m.thread_id = t.id
+        WHERE t.user_id = $1 AND t.workspace = $2 AND t.project_id = $3
+        ORDER BY t.updated_at DESC LIMIT 50`
+    : `SELECT t.id, t.project_id, t.data, t.created_at, t.updated_at,
+              COALESCE(m.cnt, 0)::int AS message_count
+         FROM fs_chat_threads t
+    LEFT JOIN (
+                SELECT thread_id, COUNT(*) AS cnt
+                  FROM fs_chat_messages
+                 GROUP BY thread_id
+              ) m ON m.thread_id = t.id
+        WHERE t.user_id = $1 AND t.workspace = $2 AND t.project_id IS NULL
+        ORDER BY t.updated_at DESC LIMIT 50`;
   const args = projectId
     ? [session.user.email, workspace, projectId]
     : [session.user.email, workspace];
@@ -84,6 +100,8 @@ export async function GET(request: Request) {
       id: r.id,
       projectId: r.project_id ?? null,
       title: r.data?.title || 'New conversation',
+      summary: r.data?.summary || null,
+      messageCount: r.message_count ?? 0,
       updatedAt: r.updated_at,
       createdAt: r.created_at,
     })),
diff --git a/app/api/mcp/route.ts b/app/api/mcp/route.ts
index 90bd1058..c4542252 100644
--- a/app/api/mcp/route.ts
+++ b/app/api/mcp/route.ts
@@ -3963,7 +3963,21 @@ echo "VIBN_SHIP_SHA=$(git rev-parse HEAD)"`;
 // project belongs to the calling principal's workspace before mutating.
 
 interface PlanIdea     { id: string; text: string; createdAt: string }
-interface PlanTask     { id: string; text: string; status: 'open' | 'done'; createdAt: string; doneAt?: string }
+// Tasks are markdown-bodied scoped units of work. `text` is the legacy
+// field from the v1 single-line shape; `title` + `description` is the
+// current shape. Reader migrates legacy rows on the fly.
+type PlanTaskStatus = 'open' | 'in_progress' | 'done' | 'blocked';
+interface PlanTask {
+  id: string;
+  title: string;
+  description?: string;
+  status: PlanTaskStatus;
+  createdAt: string;
+  startedAt?: string;
+  doneAt?: string;
+  text?: string; // legacy
+  agent?: { runId: string; startedAt: string; finishedAt?: string; status: 'queued' | 'running' | 'succeeded' | 'failed' } | null;
+}
 interface PlanDecision { id: string; title: string; choice: string; why?: string; createdAt: string }
 interface PlanShape {
   vision?: string;
@@ -3988,10 +4002,25 @@ async function loadPlanProject(principal: Principal, projectId: string) {
 
 function readPlanFromData(data: any): PlanShape {
   const raw = (data?.plan ?? {}) as Partial<PlanShape>;
+  // Mirror the legacy-task migration in app/api/projects/[projectId]/plan/route.ts:
+  // tasks created in v1 only have `text`; coerce them on the fly so the AI
+  // sees a consistent shape regardless of when a row was written.
+  const tasksIn = Array.isArray(raw.tasks) ? (raw.tasks as Array<Partial<PlanTask>>) : [];
+  const tasks: PlanTask[] = tasksIn.map((t) => ({
+    id: String(t.id ?? planNewId()),
+    title: String(t.title ?? t.text ?? '').trim(),
+    description: typeof t.description === 'string' ? t.description : '',
+    status: (t.status === 'in_progress' || t.status === 'done' || t.status === 'blocked' ? t.status : 'open') as PlanTaskStatus,
+    agent: t.agent ?? null,
+    createdAt: String(t.createdAt ?? new Date().toISOString()),
+    startedAt: t.startedAt,
+    doneAt: t.doneAt,
+    text: t.text,
+  }));
   return {
     vision: data?.productVision ?? raw.vision,
     ideas: Array.isArray(raw.ideas) ? raw.ideas : [],
-    tasks: Array.isArray(raw.tasks) ? raw.tasks : [],
+    tasks,
     decisions: Array.isArray(raw.decisions) ? raw.decisions : [],
   };
 }
@@ -4052,15 +4081,33 @@ async function toolPlanIdeaAdd(principal: Principal, params: Record<string, any>
 
 async function toolPlanTaskAdd(principal: Principal, params: Record<string, any>) {
   const projectId = String(params.projectId ?? '').trim();
-  const text = String(params.text ?? '').trim();
-  if (!projectId || !text) return NextResponse.json({ error: 'projectId and text required' }, { status: 400 });
+  // Accept either {title, description} (preferred) or legacy {text}.
+  const title = String(params.title ?? params.text ?? '').trim();
+  const description = typeof params.description === 'string' ? params.description : '';
+  if (!projectId || !title) {
+    return NextResponse.json({ error: 'projectId and title required' }, { status: 400 });
+  }
   const project = await loadPlanProject(principal, projectId);
   if (!project) return NextResponse.json({ error: 'Project not found in workspace' }, { status: 404 });
   const plan = readPlanFromData(project.data);
-  const task: PlanTask = { id: planNewId(), text, status: 'open', createdAt: new Date().toISOString() };
+  const task: PlanTask = {
+    id: planNewId(),
+    title,
+    description,
+    status: 'open',
+    createdAt: new Date().toISOString(),
+  };
   plan.tasks.unshift(task);
   await writePlanForProject(projectId, plan);
-  return NextResponse.json({ result: { ok: true, task, summaryHint: `Task added to Plan → Tasks. Brief acknowledgment only.` } });
+  return NextResponse.json({
+    result: {
+      ok: true,
+      task,
+      summaryHint:
+        `Task added to Plan → Tasks. Tell the user it's logged and ` +
+        `(if relevant) that the markdown spec is ready to delegate.`,
+    },
+  });
 }
 
 async function toolPlanTaskComplete(principal: Principal, params: Record<string, any>) {
diff --git a/app/api/projects/[projectId]/plan/route.ts b/app/api/projects/[projectId]/plan/route.ts
index 81986e3a..8ff2212f 100644
--- a/app/api/projects/[projectId]/plan/route.ts
+++ b/app/api/projects/[projectId]/plan/route.ts
@@ -27,7 +27,26 @@ import { authSession } from "@/lib/auth/session-server";
 import { query } from "@/lib/db-postgres";
 
 interface Idea     { id: string; text: string; createdAt: string }
-interface Task     { id: string; text: string; status: "open" | "done"; createdAt: string; doneAt?: string }
+type TaskStatus = "open" | "in_progress" | "done" | "blocked";
+interface Task {
+  id: string;
+  // Short headline. For backward compat we accept incoming `text` and
+  // mirror to `title` when no explicit title is given.
+  title: string;
+  // Markdown body — the spec/plan for the unit of work. Optional on
+  // legacy rows (we coerce undefined → empty string at read time).
+  description?: string;
+  status: TaskStatus;
+  // Reserved for Phase 2 (background agent delegation). Set when an
+  // autonomous agent has been kicked off against this task.
+  agent?: { runId: string; startedAt: string; finishedAt?: string; status: "queued" | "running" | "succeeded" | "failed" } | null;
+  createdAt: string;
+  startedAt?: string;
+  doneAt?: string;
+  // Legacy: original single-line text from the v1 task model. Only
+  // present on rows created before the markdown migration.
+  text?: string;
+}
 interface Decision { id: string; title: string; choice: string; why?: string; createdAt: string }
 interface PlanShape {
   vision?: string;
@@ -56,10 +75,26 @@ async function loadOwnedProject(projectId: string, email: string) {
 
 function readPlan(data: any): PlanShape {
   const raw = (data?.plan ?? {}) as Partial<PlanShape>;
+  // Migrate legacy task shape ({ text }) → new shape ({ title, description })
+  // on read, so old rows still render correctly without a one-shot
+  // migration script. We DON'T persist back here; the next write will
+  // serialize the new shape.
+  const tasksIn = Array.isArray(raw.tasks) ? (raw.tasks as Array<Partial<Task>>) : [];
+  const tasks: Task[] = tasksIn.map((t) => ({
+    id: String(t.id ?? newId()),
+    title: String(t.title ?? t.text ?? "").trim(),
+    description: typeof t.description === "string" ? t.description : "",
+    status: (t.status === "in_progress" || t.status === "done" || t.status === "blocked" ? t.status : "open") as TaskStatus,
+    agent: t.agent ?? null,
+    createdAt: String(t.createdAt ?? new Date().toISOString()),
+    startedAt: t.startedAt,
+    doneAt: t.doneAt,
+    text: t.text, // keep so legacy code paths (older API consumers) still see it
+  }));
   return {
     vision: data?.productVision ?? raw.vision,
     ideas: Array.isArray(raw.ideas) ? raw.ideas : [],
-    tasks: Array.isArray(raw.tasks) ? raw.tasks : [],
+    tasks,
     decisions: Array.isArray(raw.decisions) ? raw.decisions : [],
   };
 }
@@ -132,9 +167,19 @@ export async function POST(
     return NextResponse.json({ plan });
   }
   if (kind === "task") {
-    const text = String(body.text ?? "").trim();
-    if (!text) return NextResponse.json({ error: "text required" }, { status: 400 });
-    plan.tasks.unshift({ id: newId(), text, status: "open", createdAt: now });
+    // New richer shape: { title, description? }. Legacy callers that
+    // still send `text` are mapped to `title` so older AI tool versions
+    // and any open clients keep working.
+    const title = String(body.title ?? body.text ?? "").trim();
+    const description = typeof body.description === "string" ? body.description : "";
+    if (!title) return NextResponse.json({ error: "title required" }, { status: 400 });
+    plan.tasks.unshift({
+      id: newId(),
+      title,
+      description,
+      status: "open",
+      createdAt: now,
+    });
     await writePlan(projectId, plan);
     return NextResponse.json({ plan });
   }
@@ -168,10 +213,18 @@ export async function PATCH(
   if (kind === "task" && id) {
     const t = plan.tasks.find((x) => x.id === id);
     if (!t) return NextResponse.json({ error: "task not found" }, { status: 404 });
-    if (typeof body.text === "string") t.text = body.text.trim();
-    if (body.status === "open" || body.status === "done") {
-      t.status = body.status;
-      t.doneAt = body.status === "done" ? new Date().toISOString() : undefined;
+    if (typeof body.title === "string") t.title = body.title.trim();
+    if (typeof body.description === "string") t.description = body.description;
+    // Backward compat: PATCH body { text } updates the title.
+    if (typeof body.text === "string" && typeof body.title !== "string") t.title = body.text.trim();
+    const validStatuses: TaskStatus[] = ["open", "in_progress", "done", "blocked"];
+    if (validStatuses.includes(body.status)) {
+      const next = body.status as TaskStatus;
+      const now = new Date().toISOString();
+      t.status = next;
+      if (next === "in_progress" && !t.startedAt) t.startedAt = now;
+      if (next === "done") t.doneAt = now;
+      if (next === "open") { t.doneAt = undefined; t.startedAt = undefined; }
     }
     await writePlan(projectId, plan);
     return NextResponse.json({ plan });
diff --git a/components/vibn-chat/chat-panel.tsx b/components/vibn-chat/chat-panel.tsx
index 8cdfa3b5..e95e41db 100644
--- a/components/vibn-chat/chat-panel.tsx
+++ b/components/vibn-chat/chat-panel.tsx
@@ -299,6 +299,10 @@ export function ChatPanel() {
     setThreadsLoaded(false);
     setActiveThread(null);
     setMessages([]);
+    // Clear the threads array immediately so the resume effect doesn't
+    // race the loadThreads() fetch and resume a stale project-scoped
+    // thread when the user navigates from /project/X back to /projects.
+    setThreads([]);
     loadThreads();
   }, [loadThreads, projectId]);
 
diff --git a/lib/ai/vibn-tools.ts b/lib/ai/vibn-tools.ts
index 40ef90b6..f6ba2b09 100644
--- a/lib/ai/vibn-tools.ts
+++ b/lib/ai/vibn-tools.ts
@@ -955,14 +955,15 @@ After this returns, ALWAYS call apps_deploy { uuid } to regenerate the live Trae
   },
   {
     name: 'plan_task_add',
-    description: 'Add an open task. Call when (a) the user says "remind me to X", (b) you finish a tool chain and there\'s an obvious follow-up the user must do, or (c) you propose multi-step work and want to track each step. Don\'t bombard — one task per actual next-action.',
+    description: 'Add an open task. Tasks are SCOPED UNITS OF WORK with a markdown spec — a feature, refactor, investigation, or migration. Each task should be substantive enough that an autonomous agent could execute it. Provide a verb-led `title` AND a markdown `description` containing: ## Goal, ## Context, ## Acceptance criteria (checklist), and ## Notes if relevant. Don\'t use this for trivial reminders — only for things that warrant a brief.',
     parameters: {
       type: 'OBJECT',
       properties: {
-        projectId: { type: 'STRING', description: 'The Vibn project ID.' },
-        text:      { type: 'STRING', description: 'The task as a verb-led sentence ("Add Stripe webhook URL to env", not "Stripe webhook").' },
+        projectId:   { type: 'STRING', description: 'The Vibn project ID.' },
+        title:       { type: 'STRING', description: 'Short verb-led headline (e.g. "Migrate auth to NextAuth v5").' },
+        description: { type: 'STRING', description: 'Markdown spec for this task. Include ## Goal, ## Context, ## Acceptance criteria, optionally ## Notes. Strongly recommended.' },
       },
-      required: ['projectId', 'text'],
+      required: ['projectId', 'title'],
     },
   },
   {
diff --git a/package-lock.json b/package-lock.json
index 501dfc0a..a4d222c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -42,6 +42,7 @@
         "radix-ui": "^1.4.3",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
+        "react-markdown": "^10.1.0",
         "remark-gfm": "^4.0.1",
         "sonner": "^2.0.7",
         "ssh2": "^1.17.0",
diff --git a/package.json b/package.json
index 198809a7..45c15bd2 100644
--- a/package.json
+++ b/package.json
@@ -58,6 +58,7 @@
     "radix-ui": "^1.4.3",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
+    "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "ssh2": "^1.17.0",