nathanwhit · nathanwhit · Jun 12, 2026 · Jun 12, 2026
diff --git a/ui/src/icons.tsx b/ui/src/icons.tsx
@@ -12,6 +12,7 @@ const PATHS = {
   refresh: "M21 12a9 9 0 1 1-2.6-6.4L21 8 M21 3v5h-5",
   external: "M15 3h6v6 M21 3l-9 9 M19 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h6",
   back: "m15 18-6-6 6-6",
+  chevron: "m6 9 6 6 6-6",
   help: "M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20Z M9.1 9a3 3 0 0 1 5.8 1c0 2-3 2.6-3 4 M12 17.5h.01",
   check: "M20 6 9 17l-5-5",
   alert: "M12 9v4 M12 17h.01 M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z",

diff --git a/ui/src/pages/Objective.tsx b/ui/src/pages/Objective.tsx
@@ -6,6 +6,7 @@ import {
   Button,
   Card,
   Chip,
+  Collapsible,
   EmptyState,
   Pill,
   SectionTitle,
@@ -37,6 +38,8 @@ export function ObjectivePage({
   // Defend against null lists from older servers (Go nil slices encode as null).
   const obj = detail.data.objective;
   const sessions = detail.data.sessions ?? [];
+  const activeSessions = sessions.filter((s) => s.status !== "canceled");
+  const canceledSessions = sessions.filter((s) => s.status === "canceled");
   const pull_requests = detail.data.pull_requests ?? [];
   const questions = detail.data.questions ?? [];
   const artifacts = detail.data.artifacts ?? [];
@@ -147,10 +150,24 @@ export function ObjectivePage({
         <Card className="overflow-x-auto">
           {sessions.length === 0 ? (
             <EmptyState>No sessions yet.</EmptyState>
+          ) : activeSessions.length === 0 ? (
+            <EmptyState>No active sessions.</EmptyState>
           ) : (
-            <SessionTable sessions={sessions} nav={nav} />
+            <SessionTable sessions={activeSessions} nav={nav} />
           )}
         </Card>
+        {canceledSessions.length > 0 && (
+          <div className="mt-3">
+            <Collapsible
+              title="Canceled sessions"
+              count={canceledSessions.length}
+            >
+              <Card className="overflow-x-auto">
+                <SessionTable sessions={canceledSessions} nav={nav} />
+              </Card>
+            </Collapsible>
+          </div>
+        )}
       </section>
 
       <div className="grid gap-6 lg:grid-cols-2">

diff --git a/ui/src/pages/Overview.tsx b/ui/src/pages/Overview.tsx
@@ -6,6 +6,7 @@ import { Icon } from "../icons";
 import {
   Button,
   Card,
+  Collapsible,
   EmptyState,
   Field,
   Modal,
@@ -39,6 +40,8 @@ export function Overview({ nav }: { nav: (to: string) => void }) {
   const [creating, setCreating] = useState(false);
 
   const objs = objectives.data ?? [];
+  const activeObjs = objs.filter((o) => o.status !== "canceled");
+  const canceledObjs = objs.filter((o) => o.status === "canceled");
   const running = (sessions.data ?? []).filter(
     (s) => s.status === "running",
   ).length;
@@ -80,53 +83,27 @@ export function Overview({ nav }: { nav: (to: string) => void }) {
               No objectives yet — create one and a manager session will start
               planning.
             </EmptyState>
+          ) : activeObjs.length === 0 ? (
+            <EmptyState>No active objectives.</EmptyState>
           ) : (
-            <table className="w-full min-w-[640px] text-[13px]">
-              <thead className="border-b border-edge">
-                <tr>
-                  <Th>Status</Th>
-                  <Th>Title</Th>
-                  <Th>Repo</Th>
-                  <Th>Sessions</Th>
-                  <Th>PRs</Th>
-                  <Th>Activity</Th>
-                  <Th>Updated</Th>
-                </tr>
-              </thead>
-              <tbody className="divide-y divide-edge/60">
-                {objs.map((o) => (
-                  <tr
-                    key={o.id}
-                    onClick={() => nav(`/objectives/${o.id}`)}
-                    className="cursor-pointer transition-colors hover:bg-raised/60"
-                  >
-                    <Td>
-                      <span className="flex items-center gap-2">
-                        <Pill status={o.status} />
-                        {o.needs_user && <Pill status="waiting_user" />}
-                      </span>
-                    </Td>
-                    <Td className="font-medium">{o.title}</Td>
-                    <Td className="text-mute">{o.repo || "—"}</Td>
-                    <Td className="text-mute">{o.active_sessions}</Td>
-                    <Td className="text-mute">{o.pr_count}</Td>
-                    <Td className="max-w-[260px] truncate text-mute">
-                      {o.latest_activity || "—"}
-                    </Td>
-                    <Td>
-                      <TimeAgo iso={o.updated_at} />
-                    </Td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
+            <ObjectivesTable objectives={activeObjs} nav={nav} />
           )}
         </Card>
         {objectives.error && (
           <p className="mt-2 text-xs text-rose-400">{objectives.error}</p>
         )}
       </section>
 
+      {canceledObjs.length > 0 && (
+        <section>
+          <Collapsible title="Canceled objectives" count={canceledObjs.length}>
+            <Card className="overflow-x-auto">
+              <ObjectivesTable objectives={canceledObjs} nav={nav} />
+            </Card>
+          </Collapsible>
+        </section>
+      )}
+
       {creating && (
         <NewObjectiveModal
           onClose={() => setCreating(false)}
@@ -140,6 +117,56 @@ export function Overview({ nav }: { nav: (to: string) => void }) {
   );
 }
 
+function ObjectivesTable({
+  objectives,
+  nav,
+}: {
+  objectives: api.DashboardObjective[];
+  nav: (to: string) => void;
+}) {
+  return (
+    <table className="w-full min-w-[640px] text-[13px]">
+      <thead className="border-b border-edge">
+        <tr>
+          <Th>Status</Th>
+          <Th>Title</Th>
+          <Th>Repo</Th>
+          <Th>Sessions</Th>
+          <Th>PRs</Th>
+          <Th>Activity</Th>
+          <Th>Updated</Th>
+        </tr>
+      </thead>
+      <tbody className="divide-y divide-edge/60">
+        {objectives.map((o) => (
+          <tr
+            key={o.id}
+            onClick={() => nav(`/objectives/${o.id}`)}
+            className="cursor-pointer transition-colors hover:bg-raised/60"
+          >
+            <Td>
+              <span className="flex items-center gap-2">
+                <Pill status={o.status} />
+                {o.needs_user && <Pill status="waiting_user" />}
+              </span>
+            </Td>
+            <Td className="font-medium">{o.title}</Td>
+            <Td className="text-mute">{o.repo || "—"}</Td>
+            <Td className="text-mute">{o.active_sessions}</Td>
+            <Td className="text-mute">{o.pr_count}</Td>
+            <Td className="max-w-[260px] truncate text-mute">
+              {o.latest_activity || "—"}
+            </Td>
+            <Td>
+              <TimeAgo iso={o.updated_at} />
+            </Td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
 function Stat({
   label,
   value,

diff --git a/ui/src/pages/Sessions.tsx b/ui/src/pages/Sessions.tsx
@@ -1,7 +1,7 @@
 import { useState } from "react";
 import * as api from "../api";
 import { usePoll } from "../hooks";
-import { Card, EmptyState } from "../ui";
+import { Card, Collapsible, EmptyState } from "../ui";
 import { SessionTable } from "./Objective";
 
 const FILTERS = [
@@ -22,7 +22,7 @@ function matches(filter: FilterKey, status: string): boolean {
     case "waiting":
       return ["waiting_user", "waiting_capacity"].includes(status);
     case "done":
-      return ["succeeded", "failed", "canceled"].includes(status);
+      return ["succeeded", "failed"].includes(status);
   }
 }
 
@@ -33,7 +33,10 @@ export function SessionsPage({ nav }: { nav: (to: string) => void }) {
   );
   const [filter, setFilter] = useState<FilterKey>("all");
 
-  const all = sessions.data ?? [];
+  // Canceled sessions are kept out of the main table and filter counts; they
+  // live in their own collapsed section below.
+  const all = (sessions.data ?? []).filter((s) => s.status !== "canceled");
+  const canceled = (sessions.data ?? []).filter((s) => s.status === "canceled");
   const shown = all.filter((s) => matches(filter, s.status));
 
   return (
@@ -73,6 +76,15 @@ export function SessionsPage({ nav }: { nav: (to: string) => void }) {
           <SessionTable sessions={shown} nav={nav} />
         )}
       </Card>
+
+      {canceled.length > 0 && (
+        <Collapsible title="Canceled sessions" count={canceled.length}>
+          <Card className="overflow-x-auto">
+            <SessionTable sessions={canceled} nav={nav} />
+          </Card>
+        </Collapsible>
+      )}
+
       {sessions.error && (
         <p className="text-xs text-rose-400">{sessions.error}</p>
       )}

diff --git a/ui/src/ui.tsx b/ui/src/ui.tsx
@@ -110,6 +110,41 @@ export function EmptyState({ children }: { children: ReactNode }) {
   );
 }
 
+// Collapsible is a section that hides its contents behind a clickable header,
+// collapsed by default. Used for low-priority groups (e.g. canceled items).
+export function Collapsible({
+  title,
+  count,
+  defaultOpen = false,
+  children,
+}: {
+  title: ReactNode;
+  count?: number;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        className="mb-3 flex w-full items-center gap-2 text-left text-[11px] font-semibold tracking-[0.14em] text-faint uppercase transition-colors hover:text-mute"
+      >
+        <Icon
+          name="chevron"
+          className={`size-3.5 transition-transform ${open ? "" : "-rotate-90"}`}
+        />
+        {title}
+        {count !== undefined && (
+          <span className="tabular-nums text-faint/70">{count}</span>
+        )}
+      </button>
+      {open && children}
+    </div>
+  );
+}
+
 // ---- buttons ----
 
 const BUTTON_VARIANTS = {