From d39c6b8ddddbb23853ba73e288e491536c682d2b Mon Sep 17 00:00:00 2001 From: Badcuban <108198679+badcuban@users.noreply.github.com> Date: Tue, 28 Jul 2026 00:14:57 -0400 Subject: [PATCH 01/18] Sketch the inbox sidebar Studied from the competitor's Sidebar v2, which is a better piece of thinking than its screenshot suggests. The parts worth taking are not the cards: they are the sort discipline (creation order, held from open until settled, so the screen only moves when a lifecycle does), the three-color status budget, and unread as its own axis rather than a status. Translated into rows and dividers at two lines apiece, with projects demoted from tree to filter -- which is the change that retires the rail: once every row carries its own project, nothing needs tracing back to a group header. Settle becomes Done. Snooze deferred whole. A sketch, not a build; open questions for Will are in the file. --- docs/design/sidebar-inbox.html | 334 +++++++++++++++++++++++++++++++++ 1 file changed, 334 insertions(+) create mode 100644 docs/design/sidebar-inbox.html diff --git a/docs/design/sidebar-inbox.html b/docs/design/sidebar-inbox.html new file mode 100644 index 00000000..26121cfe --- /dev/null +++ b/docs/design/sidebar-inbox.html @@ -0,0 +1,334 @@ + + + + + + + + Inbox Sidebar + + + +

Inbox sidebar

+

+ Threads are the inbox. One live list ordered by when work began, a Done tail ordered by + when work ended, and the rail retired. Rows and hairline dividers, not cards: two lines, + ~46px, where T3 spends 78px on three. +

+ +
+
+
Proposed — resting state
+
+
+
+
⌕ Search ⌘K
+
✎
+
+
▤ All projects ▼
+
+ +
Threads 2 need you · 6
+
    +
  • +
    + + Give revert a preview dialog + approval +
    +
    + threadlines· + feature/revert-preview +
    +214 −38
    +
    +
    • +
  • +
    + + Polish the inbox sidebar + working · 4m +
    +
    + threadlines· + feature/sidebar-polish +
    +
    +
    • +
  • +
    + ★ + In-app browser panel with agent control + 2h +
    +
    + badcode· + feature/deck-sidebar +
    +26k −329
    +
    +
    • +
  • +
    + + Wire the relay reconnect backoff + failed +
    +
    + threadlines· + fix/relay-backoff +
    +
    +
    • +
  • +
    + + Compare model picker density options + 18m +
    +
    + badcode· + main +
    +
    +
    • +
  • +
    + Draft the changelog for 0.2.6 + 3d +
    +
    + threadlines· + main +
    +
    +
    • +
+ +
Done 31
+
    +
  • +
    Answer a notification with 2021d
    +
    • +
  • +
    Spellcheck via native Chromium6d
    +
    • +
  • +
    Phone link relay chunking12d
    +
    • +
+
Show 28 more…
+
+
+ +
+
Same rows — hover affordances forced
+
+
Threads
+
    +
  • +
    + Compare model picker density options + 18m +
    +
    + badcode· + main +
    +
    +
    ✓ Done
    +
    ☆
    +
    +
    • +
+
Done
+
    +
  • +
    Phone link relay chunking12d
    +
    ↩ Reopen
    +
    • +
+
+ +
+

What we take from T3

+ The attention partition (live above, done below), and their sort discipline: the live + list holds creation order, newest first, and activity never reorders it. A row + keeps its place from open until you mark it done, so the thing you were about to click + never jumps. Status lives in the row, not in position. Color is spent on exactly three + things: approval (act now), working (in motion, with elapsed), + failed (broken). Everything else rests unlabeled with a timestamp. + Unread is its own axis: a completed run you haven’t seen keeps a bright title and + a white dot until you visit. + +

Our flavor

+ Rows with dividers, never cards — two lines instead of their three by folding + status into line one. Projects stop being a tree: the scope filter narrows the list, and + every row names its project, which is what killed the rail — project context + travels with the thread now, so nothing needs to be traced back to a group header. + Pinned threads float to the top of the live list (an explicit act, so the move is + yours). “Done” instead of T3’s “Settle”: plainer, and it + reads correctly for agent work. Blocked or running work refuses Done — same rule + the deck already had: live work can’t be waved away. + +

Deliberately deferred

+ Snooze (T3’s wake/woke machinery is a whole feature; worth doing later, properly). + Auto-done on merged PRs and after idle weeks (needs settled server semantics first). + Multi-select. + +

Open questions for Will

+ 1. Collapsed state: with the rail gone, does the sidebar still icon-collapse to + something (project favicons only), or does it just hide? The auto-fold-when-squeezed + behavior needs a target.
+ 2. Done placement: tail at the bottom (shown), or behind a destinations-band entry so + the sidebar is only live work?
+ 3. Do the destinations (Chats etc.) survive above the thread list as-is? +
+
+
+ + From 8594f45dda0da198d33d993e464f4a64d7d99b55 Mon Sep 17 00:00:00 2001 From: Badcuban <108198679+badcuban@users.noreply.github.com> Date: Tue, 28 Jul 2026 00:22:54 -0400 Subject: [PATCH 02/18] Offer chips beside the dropdown, and answer in plain words Will answered the collapse question -- hidden entirely, same toggle as today -- and could not answer the quick-links one because it was asked in internal vocabulary. Rewritten the way the screen looks. The new choice on the table is how project switching feels: a compact dropdown at two clicks a switch, or a row of recent-project chips at one, each carrying its needs-you count. --- docs/design/sidebar-inbox.html | 69 ++++++++++++++++++++++++++++++---- 1 file changed, 62 insertions(+), 7 deletions(-) diff --git a/docs/design/sidebar-inbox.html b/docs/design/sidebar-inbox.html index 26121cfe..b3bcd22f 100644 --- a/docs/design/sidebar-inbox.html +++ b/docs/design/sidebar-inbox.html @@ -71,6 +71,14 @@ } .scope:hover { background: var(--hover); color: var(--fg); } .scope .chev { color: var(--fg-dim); font-size: 9px; } + .chips { display: flex; gap: 4px; padding: 0 4px 2px; overflow: hidden; } + .chip { + font-size: 11.5px; color: var(--fg-mid); padding: 3px 8px; border-radius: 5px; + white-space: nowrap; cursor: default; + } + .chip:hover { background: var(--hover); color: var(--fg); } + .chip.on { background: var(--active-row); color: var(--fg); } + .chip .n { color: var(--fg-dim); font-size: 10px; margin-left: 3px; font-family: var(--mono); } /* ── Section headers ────────────────────────── */ .sect { @@ -266,6 +274,37 @@

Inbox sidebar

+
Option B — project chips instead of the dropdown
+
+
+
+
⌕ Search ⌘K
+
✎
+
+
+ All + threadlines 4 + badcode 2 + dotfiles + … +
+
+
Threads
+ +
+
Same rows — hover affordances forced
Threads
@@ -320,13 +359,29 @@

Deliberately deferred

Auto-done on merged PRs and after idle weeks (needs settled server semantics first). Multi-select. -

Open questions for Will

- 1. Collapsed state: with the rail gone, does the sidebar still icon-collapse to - something (project favicons only), or does it just hide? The auto-fold-when-squeezed - behavior needs a target.
- 2. Done placement: tail at the bottom (shown), or behind a destinations-band entry so - the sidebar is only live work?
- 3. Do the destinations (Chats etc.) survive above the thread list as-is? +

Decided

+ Collapsing the sidebar hides it completely, with the same toggle button as today. + No icon strip. + +

Switching projects: dropdown vs chips

+ “All projects” is one combined list — every project’s threads + mixed together, newest first, each row saying which project it belongs to. Picking a + project narrows the list to just that one (and the row label can disappear, since + it’s implied). The dropdown (option A) is compact but costs two clicks per + switch. The chips row (option B) puts your most recent projects one click away, with + a count of threads that need you on each — overflow projects live behind the + “…”. Worth knowing: in an inbox, you often don’t need to + switch at all — whatever you touched last is already near the top of the + combined list. The filter is for focus, not for finding things. + +

Still open for Will

+ 1. Where finished threads live: the dimmed “Done” list at the bottom of + the sidebar (as shown), or on its own page you open from a link, keeping the sidebar + for live work only.
+ 2. Today's sidebar has a small row of quick links at the top (Chats, and the new-chat + shortcut) that jump to pages rather than to a specific thread. Keep that row above + the new list, or fold what it does into the search and compose buttons?
+ 3. Dropdown or chips, per the section above.
From 90493011e815efa48a09ca3f022dddd784be8b5e Mon Sep 17 00:00:00 2001 From: Badcuban <108198679+badcuban@users.noreply.github.com> Date: Tue, 28 Jul 2026 00:29:03 -0400 Subject: [PATCH 03/18] Settle the sketch: chips win, Done keeps its names Chips replace the dropdown in the main frame, the second frame shows the scoped state, and Done rows get their project labels back at readable contrast. Will's objection to the competitor's settled tail was exact -- dimming every row to the same grey turns history into texture. The section header carries done-ness; the rows keep their identity. Add project lives in the trailing ellipsis chip, which is the project menu: overflow projects, then the rare actions. --- docs/design/sidebar-inbox.html | 49 +++++++++++++++++++--------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/docs/design/sidebar-inbox.html b/docs/design/sidebar-inbox.html index b3bcd22f..0f4d4247 100644 --- a/docs/design/sidebar-inbox.html +++ b/docs/design/sidebar-inbox.html @@ -144,10 +144,14 @@ .act-btn:hover { background: var(--hover); color: var(--fg); } /* ── Done tail ──────────────────────────────── */ + /* Done rows keep their identity. Flattening them all to one grey (T3's + treatment) turns the section into a texture; here the section header + carries "done" and each row keeps a readable name and its project. */ .done .row { padding: 6px 12px; } .done .l1 { gap: 8px; } - .done .title { font-weight: 400; color: var(--fg-mid); } + .done .title { font-weight: 400; color: rgb(232 231 227 / 0.78); } .done .row:hover .title { color: var(--fg); } + .done .proj { flex: none; font-size: 11px; color: rgb(232 231 227 / 0.42); } .more { padding: 7px 12px 12px; font-size: 11px; color: var(--fg-dim); border-top: 1px solid var(--border); @@ -172,14 +176,19 @@

Inbox sidebar

-
Proposed — resting state
+
Final direction — resting state
⌕ Search ⌘K
✎
-
▤ All projects ▼
+
+ All + threadlines 2 + badcode + … +
Threads 2 need you · 6
@@ -260,13 +269,13 @@

Inbox sidebar

Done 31
  • -
    Answer a notification with 2021d
    +
    Answer a notification with 202badcode1d
  • -
    Spellcheck via native Chromium6d
    +
    Spellcheck via native Chromiumthreadlines6d
  • -
    Phone link relay chunking12d
    +
    Phone link relay chunkingthreadlines12d
Show 28 more…
@@ -274,7 +283,7 @@

Inbox sidebar

-
Option B — project chips instead of the dropdown
+
Chips, scoped to one project
@@ -282,10 +291,9 @@

Inbox sidebar

✎
- All - threadlines 4 - badcode 2 - dotfiles + All + threadlines 2 + badcode …
@@ -360,8 +368,14 @@

Deliberately deferred

Multi-select.

Decided

- Collapsing the sidebar hides it completely, with the same toggle button as today. - No icon strip. + Collapsing the sidebar hides it completely, same toggle as today; no icon strip. + Chips over the dropdown. The Done list stays at the bottom of the sidebar. Done rows + are not flattened to uniform grey: the section header says done, each row keeps a + readable title and its project name. The trailing “…” chip is the + project menu — projects that didn't fit as chips, then Add project. The old + quick-links row folds away: compose covers new-chat, and the Chats page link moves + into the “…” menu's footer alongside Add project (easily moved if + that feels buried).

Switching projects: dropdown vs chips

“All projects” is one combined list — every project’s threads @@ -374,14 +388,7 @@

Switching projects: dropdown vs chips

switch at all — whatever you touched last is already near the top of the combined list. The filter is for focus, not for finding things. -

Still open for Will

- 1. Where finished threads live: the dimmed “Done” list at the bottom of - the sidebar (as shown), or on its own page you open from a link, keeping the sidebar - for live work only.
- 2. Today's sidebar has a small row of quick links at the top (Chats, and the new-chat - shortcut) that jump to pages rather than to a specific thread. Keep that row above - the new list, or fold what it does into the search and compose buttons?
- 3. Dropdown or chips, per the section above. +
From 4462727aace372e8a95ef6b88162a036856b1aae Mon Sep 17 00:00:00 2001 From: Badcuban <108198679+badcuban@users.noreply.github.com> Date: Tue, 28 Jul 2026 00:38:37 -0400 Subject: [PATCH 04/18] Promote Add project out of the overflow A folder-plus pinned to the right end of the chips row: always visible, never scrolling away with the overflow, and unambiguous beside the compose pencil because it wears the folder. The ellipsis chip goes back to meaning only what it says -- projects that did not fit. --- docs/design/sidebar-inbox.html | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/docs/design/sidebar-inbox.html b/docs/design/sidebar-inbox.html index 0f4d4247..578cb18f 100644 --- a/docs/design/sidebar-inbox.html +++ b/docs/design/sidebar-inbox.html @@ -79,6 +79,9 @@ .chip:hover { background: var(--hover); color: var(--fg); } .chip.on { background: var(--active-row); color: var(--fg); } .chip .n { color: var(--fg-dim); font-size: 10px; margin-left: 3px; font-family: var(--mono); } + .chip.add { margin-left: auto; padding: 3px 6px; color: var(--fg-dim); } + .chip.add:hover { color: var(--fg); background: var(--hover); } + .chip.add svg { display: block; } /* ── Section headers ────────────────────────── */ .sect { @@ -187,7 +190,8 @@

Inbox sidebar

All threadlines 2 badcode - … + … +
@@ -294,7 +298,7 @@

Inbox sidebar

All threadlines 2 badcode - … +
Threads
@@ -371,11 +375,12 @@

Decided

Collapsing the sidebar hides it completely, same toggle as today; no icon strip. Chips over the dropdown. The Done list stays at the bottom of the sidebar. Done rows are not flattened to uniform grey: the section header says done, each row keeps a - readable title and its project name. The trailing “…” chip is the - project menu — projects that didn't fit as chips, then Add project. The old - quick-links row folds away: compose covers new-chat, and the Chats page link moves - into the “…” menu's footer alongside Add project (easily moved if - that feels buried). + readable title and its project name. Add project is a primary action: a + folder-plus pinned to the right end of the chips row, always visible — the + “…” chip appears only when projects overflow, and holds only + those. The old quick-links row folds away: compose covers new-chat, and the Chats + page link moves into the “…” menu's footer (easily moved if that + feels buried).

Switching projects: dropdown vs chips

“All projects” is one combined list — every project’s threads From ac4ae7bf7cf78f3b115e2e5f1c1ed566ccb59fc3 Mon Sep 17 00:00:00 2001 From: Badcuban <108198679+badcuban@users.noreply.github.com> Date: Tue, 28 Jul 2026 00:48:06 -0400 Subject: [PATCH 05/18] Lay the inbox's foundations The lifecycle, the sorts, and the chips, as pure functions with the components still to come. Done is an override the user sets, never a state the thread has: it is resolved against the thread's live condition on every read, and the blockers outrank it in both directions. Work that is blocked on the user, in flight, or sent-but-not-yet-adopted refuses to hide -- that last one bounded by a grace window on both sides, because message timestamps originate on whichever device sent them and a clock ahead of this one would otherwise hold the state for the whole skew. New activity in a done thread pulls it back to the live list by the same resolution, with nobody having to un-mark anything. That is what makes Done safe to use freely. The live list sorts by creation and pins alone; its input type does not carry activity timestamps, so reordering it by activity is a compile error, not a temptation. Done rows sort by when the work ended, label and order from the same function so they cannot disagree. Along the way: failed sessions get a pill. They had none -- an errored thread showed the same nothing as a healthy idle one, and counted toward nobody's attention. --- apps/web/src/components/Sidebar.logic.test.ts | 121 ++++ apps/web/src/components/Sidebar.logic.ts | 236 ++++++- apps/web/src/uiStateStore.test.ts | 2 + apps/web/src/uiStateStore.ts | 85 ++- docs/design/sidebar-inbox.html | 588 ++++++++++++++---- 5 files changed, 896 insertions(+), 136 deletions(-) diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts index 63aff431..90c5b883 100644 --- a/apps/web/src/components/Sidebar.logic.test.ts +++ b/apps/web/src/components/Sidebar.logic.test.ts @@ -27,6 +27,7 @@ import { sortProjectsForSidebar, THREAD_JUMP_HINT_SHOW_DELAY_MS, } from "./Sidebar.logic"; +import { buildProjectChips, isThreadDone, sortInboxThreads } from "./Sidebar.logic"; import { EnvironmentId, OrchestrationLatestTurn, @@ -1380,3 +1381,123 @@ describe("buildProjectHoverSummary", () => { expect(summary.lastActivityAt).toBeNull(); }); }); + +// ── Inbox lifecycle ────────────────────────────────────────────────── + +describe("inbox done lifecycle", () => { + const NOW = "2026-07-28T12:00:00.000Z"; + const base = { + hasPendingApprovals: false, + hasPendingUserInput: false, + session: null, + latestUserMessageAt: null, + latestTurn: null, + }; + const doneMark = { state: "done", at: NOW } as const; + + it("refuses to hide work that is blocked on the user", () => { + // Hiding a pending approval defeats the approval: the agent waits forever + // on an answer the user can no longer see the question for. + expect(isThreadDone({ ...base, hasPendingApprovals: true }, doneMark, { now: NOW })).toBe( + false, + ); + expect(isThreadDone({ ...base, hasPendingUserInput: true }, doneMark, { now: NOW })).toBe( + false, + ); + }); + + it("refuses to hide a running thread, even explicitly marked", () => { + const running = { + ...base, + session: { status: "running" } as never, + }; + expect(isThreadDone(running, doneMark, { now: NOW })).toBe(false); + }); + + it("treats a just-sent message as pending work until a turn adopts it", () => { + // Between send and adoption there is no turn and no running session -- + // the gap where marking Done would hide a message about to run. + const queued = { + ...base, + latestUserMessageAt: "2026-07-28T11:59:30.000Z", + }; + expect(isThreadDone(queued, doneMark, { now: NOW })).toBe(false); + // Past the grace window the same shape is a failed start, not pending + // work; holding it undoneable forever would strand the thread. + expect( + isThreadDone({ ...base, latestUserMessageAt: "2026-07-28T11:00:00.000Z" }, doneMark, { + now: NOW, + }), + ).toBe(true); + }); + + it("lets a failed thread be marked done", () => { + // "I saw it, I'm done with it" must be expressible for failures, or the + // Done list can never hold anything that went wrong. + const failed = { ...base, session: { status: "error" } as never }; + expect(isThreadDone(failed, doneMark, { now: NOW })).toBe(true); + }); + + it("keeps a thread live without an explicit done mark", () => { + expect(isThreadDone(base, null, { now: NOW })).toBe(false); + expect(isThreadDone(base, { state: "active", at: NOW }, { now: NOW })).toBe(false); + }); +}); + +describe("sortInboxThreads", () => { + it("holds creation order and floats pins, nothing else", () => { + const rows = [ + { id: "old", createdAt: "2026-07-20T00:00:00.000Z", pinnedAt: null }, + { id: "pinned", createdAt: "2026-07-18T00:00:00.000Z", pinnedAt: "2026-07-27T00:00:00.000Z" }, + { id: "new", createdAt: "2026-07-27T00:00:00.000Z", pinnedAt: null }, + ]; + + // Activity timestamps are deliberately absent from the input type: the + // list must be un-reorderable by anything but creation and pinning. + expect(sortInboxThreads(rows).map((row) => row.id)).toEqual(["pinned", "new", "old"]); + }); +}); + +describe("buildProjectChips", () => { + const projects = [ + { key: "a", label: "alpha" }, + { key: "b", label: "beta" }, + { key: "c", label: "gamma" }, + { key: "d", label: "delta" }, + ]; + const activity = new Map([ + ["a", 400], + ["b", 300], + ["c", 200], + ["d", 100], + ]); + + it("orders by recent activity and carries needs-you counts", () => { + const { chips, overflow } = buildProjectChips({ + projects, + lastActivityMsByKey: activity, + needsYouCountByKey: new Map([["b", 2]]), + scopedKey: null, + maxChips: 3, + }); + + expect(chips.map((chip) => chip.key)).toEqual(["a", "b", "c"]); + expect(chips[1]?.needsYouCount).toBe(2); + expect(overflow.map((chip) => chip.key)).toEqual(["d"]); + }); + + it("pulls the scoped project out of the overflow", () => { + // Filtering by a project and watching its chip vanish into the ellipsis + // reads as the sidebar losing your place. + const { chips, overflow } = buildProjectChips({ + projects, + lastActivityMsByKey: activity, + needsYouCountByKey: new Map(), + scopedKey: "d", + maxChips: 3, + }); + + expect(chips.map((chip) => chip.key)).toEqual(["a", "b", "d"]); + expect(overflow.map((chip) => chip.key)).toEqual(["c"]); + }); +}); diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts index 744168d5..2aa35d25 100644 --- a/apps/web/src/components/Sidebar.logic.ts +++ b/apps/web/src/components/Sidebar.logic.ts @@ -40,7 +40,8 @@ export interface ThreadStatusPill { | "Pending Approval" | "Awaiting Input" | "Plan Ready" - | "Background"; + | "Background" + | "Failed"; colorClass: string; dotClass: string; pulse: boolean; @@ -54,6 +55,7 @@ const THREAD_STATUS_PRIORITY: Record = { "Plan Ready": 2, Background: 2, Completed: 1, + Failed: 4, }; export const THREAD_STATUS_DOT_CLASSES = { @@ -62,6 +64,7 @@ export const THREAD_STATUS_DOT_CLASSES = { cyan: "bg-cyan-500 dark:bg-cyan-300/90", emerald: "bg-emerald-500 dark:bg-emerald-300/90", violet: "bg-violet-500 dark:bg-violet-300/90", + red: "bg-red-500 dark:bg-red-400/90", } as const; type ThreadStatusInput = Pick< @@ -386,6 +389,17 @@ export function resolveThreadStatusPill(input: { }; } + if (thread.session?.status === "error") { + // Failed threads previously showed nothing -- indistinguishable from + // healthy idle ones, which is the worst place for a failure to hide. + return { + label: "Failed", + colorClass: "text-red-600 dark:text-red-400/90", + dotClass: THREAD_STATUS_DOT_CLASSES.red, + pulse: false, + }; + } + const hasPlanReadyPrompt = !thread.hasPendingUserInput && thread.interactionMode === "plan" && @@ -478,6 +492,7 @@ export function excludeOnDeckThreads(input: { const NEEDS_USER_STATUSES: ReadonlySet = new Set([ "Pending Approval", "Awaiting Input", + "Failed", ]); /** True while the provider is working on the thread or waiting on the user. */ @@ -746,3 +761,222 @@ export function buildProjectHoverSummary(input: { lastActivityAt, }; } + +// ── Inbox lifecycle ────────────────────────────────────────────────── +// +// The sidebar is an inbox: one live list, a Done tail. "Done" is a client-side +// overlay in v1 -- an override the user sets, resolved against the thread's +// actual state. The rules below owe their shape to studying how the settle +// lifecycle goes wrong: the invariant that matters is that no override may +// hide work that is moving or blocked on the user. + +/** + * A queued turn start counts as pending work for at most this long. + * + * Between sending a message and a session adopting it, the work is invisible + * to every status check: no turn, no running session. Without a bound, a + * thread whose start failed would be permanently un-doneable; without the + * guard, marking Done in that gap would hide a message that is about to run. + */ +export const QUEUED_TURN_START_GRACE_MS = 2 * 60 * 1_000; + +type InboxLifecycleInput = Pick< + SidebarThreadSummary, + "hasPendingApprovals" | "hasPendingUserInput" | "session" | "latestUserMessageAt" | "latestTurn" +>; + +/** + * A user message no turn has picked up yet: strictly newer than every + * timestamp on the latest turn, and within the adoption grace window. Bounded + * on both sides because message timestamps originate on whichever device sent + * them -- a clock ahead of this one would otherwise hold the queued state for + * the whole skew. + */ +export function hasQueuedTurnStart( + thread: InboxLifecycleInput, + options: { readonly now: string }, +): boolean { + if (thread.latestUserMessageAt == null) return false; + // A failed start is already visible as the Failed pill; holding the queued + // state too would make the thread un-doneable while it screams red. + if (thread.session?.status === "error") return false; + const messageAt = Date.parse(thread.latestUserMessageAt); + if (Number.isNaN(messageAt)) return false; + const nowMs = Date.parse(options.now); + if (Number.isNaN(nowMs)) return false; + if (Math.abs(nowMs - messageAt) > QUEUED_TURN_START_GRACE_MS) return false; + const turn = thread.latestTurn; + if (turn === null) return true; + return [turn.requestedAt, turn.startedAt, turn.completedAt].every( + (candidate) => candidate == null || Date.parse(candidate) < messageAt, + ); +} + +/** + * Whether Done is allowed right now. Work that is moving, blocked on the + * user, or queued cannot be waved away: hiding a pending approval defeats + * the approval, and hiding a running turn hides where its result will land. + * A failed thread CAN be marked done -- that is "I saw it, I'm done with it". + */ +export function canMarkThreadDone( + thread: InboxLifecycleInput, + options: { readonly now: string }, +): boolean { + if (thread.hasPendingApprovals || thread.hasPendingUserInput) return false; + // The same in-flight resolution the status pill uses, so "can't be marked + // done" and "shows as working" can never disagree about what running means. + if (getThreadInFlightStatus(thread) !== null) return false; + if (hasQueuedTurnStart(thread, options)) return false; + return true; +} + +/** + * The user's explicit word on a thread's lifecycle, stamped when given. + * "active" exists so a reopened thread stays reopened once auto-done rules + * arrive; today it simply reads as not-done. + */ +export interface ThreadDoneOverride { + readonly state: "done" | "active"; + readonly at: string; +} + +/** + * Where a thread lives. The blockers outrank the override in both + * directions: new activity in a done thread pulls it back to the live list + * without anyone having to un-mark it, which is what makes Done safe to use + * freely. + */ +export function isThreadDone( + thread: InboxLifecycleInput, + override: ThreadDoneOverride | null | undefined, + options: { readonly now: string }, +): boolean { + if (!canMarkThreadDone(thread, options)) return false; + return override?.state === "done"; +} + +/** + * The live list holds still. Creation order, newest first; activity never + * reorders it, so a row keeps its place from open until it is marked done + * and the thing you were reaching for never jumps. Pins are the one + * exception, and they move only when you pin -- your action, your motion. + */ +export function sortInboxThreads< + T extends { readonly id: string; readonly createdAt: string; readonly pinnedAt: string | null }, +>(threads: readonly T[]): T[] { + return [...threads].toSorted((left, right) => { + if ((left.pinnedAt !== null) !== (right.pinnedAt !== null)) { + return left.pinnedAt !== null ? -1 : 1; + } + if (left.pinnedAt !== null && right.pinnedAt !== null) { + const byPin = + (toSortableTimestamp(right.pinnedAt) ?? 0) - (toSortableTimestamp(left.pinnedAt) ?? 0); + if (byPin !== 0) return byPin; + } + const byCreated = + (toSortableTimestamp(right.createdAt) ?? 0) - (toSortableTimestamp(left.createdAt) ?? 0); + return byCreated !== 0 ? byCreated : left.id.localeCompare(right.id); + }); +} + +type DoneSortInput = Pick< + SidebarThreadSummary, + "latestUserMessageAt" | "latestTurn" | "updatedAt" | "createdAt" +>; + +/** + * Done rows are history, so they order by when the work ended: the explicit + * mark when there is one, else the thread's last activity. Label and order + * both come from here so they can never disagree. + */ +export function resolveDoneTimestamp( + thread: DoneSortInput, + override: ThreadDoneOverride | null | undefined, +): string | null { + if (override?.state === "done" && !Number.isNaN(Date.parse(override.at))) { + return override.at; + } + let latest: string | null = null; + let latestMs = Number.NEGATIVE_INFINITY; + for (const candidate of [ + thread.latestUserMessageAt, + thread.latestTurn?.requestedAt, + thread.latestTurn?.startedAt, + thread.latestTurn?.completedAt, + ]) { + if (candidate == null) continue; + const parsed = Date.parse(candidate); + if (!Number.isNaN(parsed) && parsed > latestMs) { + latest = candidate; + latestMs = parsed; + } + } + return latest ?? thread.updatedAt ?? thread.createdAt; +} + +export function sortDoneThreads( + threads: readonly T[], + overrideFor: (thread: T) => ThreadDoneOverride | null | undefined, +): T[] { + const timestampMs = (thread: T) => { + const timestamp = resolveDoneTimestamp(thread, overrideFor(thread)); + return timestamp === null ? 0 : (toSortableTimestamp(timestamp) ?? 0); + }; + return [...threads].toSorted( + (left, right) => timestampMs(right) - timestampMs(left) || left.id.localeCompare(right.id), + ); +} + +// ── Project chips ──────────────────────────────────────────────────── + +export interface ProjectChipModel { + readonly key: string; + readonly label: string; + /** Threads in this project blocked on the user, shown on the chip. */ + readonly needsYouCount: number; +} + +/** + * Which projects earn a chip, in most-recently-active order. + * + * The scoped project always gets a chip even when its activity would not + * earn one: filtering by a project and then watching its chip vanish into + * the overflow reads as the sidebar losing your place. + */ +export function buildProjectChips(input: { + readonly projects: ReadonlyArray<{ readonly key: string; readonly label: string }>; + readonly lastActivityMsByKey: ReadonlyMap; + readonly needsYouCountByKey: ReadonlyMap; + readonly scopedKey: string | null; + readonly maxChips: number; +}): { readonly chips: ProjectChipModel[]; readonly overflow: ProjectChipModel[] } { + const toModel = (project: { key: string; label: string }): ProjectChipModel => ({ + key: project.key, + label: project.label, + needsYouCount: input.needsYouCountByKey.get(project.key) ?? 0, + }); + const ordered = [...input.projects] + .toSorted( + (left, right) => + (input.lastActivityMsByKey.get(right.key) ?? 0) - + (input.lastActivityMsByKey.get(left.key) ?? 0) || left.label.localeCompare(right.label), + ) + .map(toModel); + if (ordered.length <= input.maxChips) { + return { chips: ordered, overflow: [] }; + } + const chips = ordered.slice(0, input.maxChips); + const overflow = ordered.slice(input.maxChips); + if (input.scopedKey !== null && !chips.some((chip) => chip.key === input.scopedKey)) { + const scoped = overflow.find((chip) => chip.key === input.scopedKey); + if (scoped !== undefined) { + // The scoped project takes the last visible slot; the displaced chip + // joins the overflow where the scoped one came from. + const displaced = chips[chips.length - 1]!; + chips[chips.length - 1] = scoped; + const index = overflow.indexOf(scoped); + overflow[index] = displaced; + } + } + return { chips, overflow }; +} diff --git a/apps/web/src/uiStateStore.test.ts b/apps/web/src/uiStateStore.test.ts index 64be831c..4c478981 100644 --- a/apps/web/src/uiStateStore.test.ts +++ b/apps/web/src/uiStateStore.test.ts @@ -30,6 +30,8 @@ function makeUiState(overrides: Partial = {}): UiState { threadLastVisitedAtById: {}, threadChangedFilesExpandedById: {}, onDeckThreadKeys: [], + doneThreadOverrides: {}, + inboxProjectScopeKey: null, onDeckDismissedThreadKeys: [], defaultAdvertisedEndpointKey: null, lastChatThreadRef: null, diff --git a/apps/web/src/uiStateStore.ts b/apps/web/src/uiStateStore.ts index 3fd111aa..3152fee3 100644 --- a/apps/web/src/uiStateStore.ts +++ b/apps/web/src/uiStateStore.ts @@ -25,6 +25,8 @@ export interface PersistedUiState { threadChangedFilesExpandedById?: Record>; onDeckThreadKeys?: string[]; onDeckDismissedThreadKeys?: string[]; + doneThreadOverrides?: Record; + inboxProjectScopeKey?: string | null; } export interface UiProjectState { @@ -44,6 +46,17 @@ export interface UiOnDeckState { onDeckDismissedThreadKeys: string[]; } +export interface UiInboxState { + /** + * The user's explicit word on each thread's lifecycle, by scoped thread + * key. An override never decides on its own -- isThreadDone resolves it + * against the thread's live state, so activity blockers always win. + */ + doneThreadOverrides: Record; + /** Which project chip is selected; null is All. */ + inboxProjectScopeKey: string | null; +} + export interface UiEndpointState { defaultAdvertisedEndpointKey: string | null; } @@ -53,7 +66,13 @@ export interface UiNavigationState { } export interface UiState - extends UiProjectState, UiThreadState, UiOnDeckState, UiEndpointState, UiNavigationState {} + extends + UiProjectState, + UiThreadState, + UiOnDeckState, + UiInboxState, + UiEndpointState, + UiNavigationState {} export interface SyncProjectInput { /** Physical project key (env + cwd). Used for manual sort order. */ @@ -75,6 +94,8 @@ const initialState: UiState = { threadChangedFilesExpandedById: {}, onDeckThreadKeys: [], onDeckDismissedThreadKeys: [], + doneThreadOverrides: {}, + inboxProjectScopeKey: null, defaultAdvertisedEndpointKey: null, lastChatThreadRef: null, }; @@ -123,12 +144,39 @@ function readPersistedState(): UiState { ), onDeckThreadKeys: sanitizePersistedKeyList(parsed.onDeckThreadKeys), onDeckDismissedThreadKeys: sanitizePersistedKeyList(parsed.onDeckDismissedThreadKeys), + doneThreadOverrides: sanitizePersistedDoneOverrides(parsed.doneThreadOverrides), + inboxProjectScopeKey: + typeof parsed.inboxProjectScopeKey === "string" && parsed.inboxProjectScopeKey.length > 0 + ? parsed.inboxProjectScopeKey + : null, }; } catch { return initialState; } } +function sanitizePersistedDoneOverrides( + value: PersistedUiState["doneThreadOverrides"], +): Record { + if (value === undefined || value === null || typeof value !== "object") { + return {}; + } + const sanitized: Record = {}; + for (const [key, entry] of Object.entries(value)) { + if ( + typeof key === "string" && + key.length > 0 && + entry !== null && + typeof entry === "object" && + (entry.state === "done" || entry.state === "active") && + typeof entry.at === "string" + ) { + sanitized[key] = { state: entry.state, at: entry.at }; + } + } + return sanitized; +} + function sanitizePersistedKeyList(value: string[] | undefined): string[] { if (!Array.isArray(value)) { return []; @@ -228,6 +276,8 @@ export function persistState(state: UiState): void { threadChangedFilesExpandedById, onDeckThreadKeys: state.onDeckThreadKeys, onDeckDismissedThreadKeys: state.onDeckDismissedThreadKeys, + doneThreadOverrides: state.doneThreadOverrides, + inboxProjectScopeKey: state.inboxProjectScopeKey, } satisfies PersistedUiState), ); if (!legacyKeysCleanedUp) { @@ -539,6 +589,26 @@ export function syncOnDeck( }; } +/** + * Stamp the user's word on a thread's lifecycle. Pure and idempotent: marking + * a done thread done again refreshes nothing, so a double-click cannot move a + * row twice. + */ +export function setDoneOverride( + state: UiState, + threadKey: string, + override: { state: "done" | "active"; at: string }, +): UiState { + const current = state.doneThreadOverrides[threadKey]; + if (current !== undefined && current.state === override.state) { + return state; + } + return { + ...state, + doneThreadOverrides: { ...state.doneThreadOverrides, [threadKey]: override }, + }; +} + export function dismissFromOnDeck(state: UiState, threadKey: string): UiState { if (!state.onDeckThreadKeys.includes(threadKey)) { return state; @@ -762,6 +832,9 @@ interface UiStateStore extends UiState { syncThreads: (threads: readonly SyncThreadInput[]) => void; syncOnDeck: (threads: readonly OnDeckSyncInput[], activeThreadKey: string | null) => void; dismissFromOnDeck: (threadKey: string) => void; + markThreadDone: (threadKey: string, at: string) => void; + reopenThread: (threadKey: string, at: string) => void; + setInboxProjectScope: (projectKey: string | null) => void; markThreadVisited: (threadId: string, visitedAt?: string) => void; markThreadUnread: (threadId: string, latestTurnCompletedAt: string | null | undefined) => void; clearThreadUi: (threadId: string) => void; @@ -788,6 +861,16 @@ export const useUiStateStore = create((set) => ({ syncOnDeck: (threads, activeThreadKey) => set((state) => syncOnDeck(state, threads, activeThreadKey)), dismissFromOnDeck: (threadKey) => set((state) => dismissFromOnDeck(state, threadKey)), + markThreadDone: (threadKey, at) => + set((state) => setDoneOverride(state, threadKey, { state: "done", at })), + reopenThread: (threadKey, at) => + set((state) => setDoneOverride(state, threadKey, { state: "active", at })), + setInboxProjectScope: (projectKey) => + set((state) => + state.inboxProjectScopeKey === projectKey + ? state + : { ...state, inboxProjectScopeKey: projectKey }, + ), markThreadVisited: (threadId, visitedAt) => set((state) => markThreadVisited(state, threadId, visitedAt)), markThreadUnread: (threadId, latestTurnCompletedAt) => diff --git a/docs/design/sidebar-inbox.html b/docs/design/sidebar-inbox.html index 578cb18f..caa0fe65 100644 --- a/docs/design/sidebar-inbox.html +++ b/docs/design/sidebar-inbox.html @@ -30,7 +30,11 @@ --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, monospace; } - * { margin: 0; padding: 0; box-sizing: border-box; } + * { + margin: 0; + padding: 0; + box-sizing: border-box; + } body { background: var(--bg); color: var(--fg); @@ -38,10 +42,31 @@ font-size: 13px; padding: 40px; } - h1 { font-size: 20px; font-weight: 600; margin-bottom: 6px; } - .sub { color: var(--fg-mid); margin-bottom: 28px; max-width: 640px; line-height: 1.5; } - .stage { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; } - .frame-label { font-size: 11px; color: var(--fg-dim); margin-bottom: 8px; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; } + h1 { + font-size: 20px; + font-weight: 600; + margin-bottom: 6px; + } + .sub { + color: var(--fg-mid); + margin-bottom: 28px; + max-width: 640px; + line-height: 1.5; + } + .stage { + display: flex; + gap: 40px; + align-items: flex-start; + flex-wrap: wrap; + } + .frame-label { + font-size: 11px; + color: var(--fg-dim); + margin-bottom: 8px; + font-family: var(--mono); + text-transform: uppercase; + letter-spacing: 0.06em; + } .sidebar { width: 288px; @@ -55,126 +80,346 @@ } /* ── Top chrome ─────────────────────────────── */ - .chrome { padding: 10px 10px 6px; display: flex; flex-direction: column; gap: 6px; } - .searchrow { display: flex; align-items: center; gap: 8px; } + .chrome { + padding: 10px 10px 6px; + display: flex; + flex-direction: column; + gap: 6px; + } + .searchrow { + display: flex; + align-items: center; + gap: 8px; + } .search { - flex: 1; display: flex; align-items: center; gap: 7px; - padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; - color: var(--fg-dim); font-size: 12px; + flex: 1; + display: flex; + align-items: center; + gap: 7px; + padding: 5px 8px; + border: 1px solid var(--border); + border-radius: 6px; + color: var(--fg-dim); + font-size: 12px; + } + .search .kbd { + margin-left: auto; + font-family: var(--mono); + font-size: 10px; + border: 1px solid var(--border); + border-radius: 3px; + padding: 1px 4px; + } + .iconbtn { + width: 26px; + height: 26px; + display: grid; + place-items: center; + border-radius: 6px; + color: var(--fg-mid); + } + .iconbtn:hover { + background: var(--hover); + color: var(--fg); } - .search .kbd { margin-left: auto; font-family: var(--mono); font-size: 10px; border: 1px solid var(--border); border-radius: 3px; padding: 1px 4px; } - .iconbtn { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; color: var(--fg-mid); } - .iconbtn:hover { background: var(--hover); color: var(--fg); } .scope { - display: flex; align-items: center; gap: 6px; padding: 4px 6px; - color: var(--fg-mid); font-size: 12px; border-radius: 6px; width: fit-content; + display: flex; + align-items: center; + gap: 6px; + padding: 4px 6px; + color: var(--fg-mid); + font-size: 12px; + border-radius: 6px; + width: fit-content; + } + .scope:hover { + background: var(--hover); + color: var(--fg); + } + .scope .chev { + color: var(--fg-dim); + font-size: 9px; + } + .chips { + display: flex; + gap: 4px; + padding: 0 4px 2px; + overflow: hidden; } - .scope:hover { background: var(--hover); color: var(--fg); } - .scope .chev { color: var(--fg-dim); font-size: 9px; } - .chips { display: flex; gap: 4px; padding: 0 4px 2px; overflow: hidden; } .chip { - font-size: 11.5px; color: var(--fg-mid); padding: 3px 8px; border-radius: 5px; - white-space: nowrap; cursor: default; - } - .chip:hover { background: var(--hover); color: var(--fg); } - .chip.on { background: var(--active-row); color: var(--fg); } - .chip .n { color: var(--fg-dim); font-size: 10px; margin-left: 3px; font-family: var(--mono); } - .chip.add { margin-left: auto; padding: 3px 6px; color: var(--fg-dim); } - .chip.add:hover { color: var(--fg); background: var(--hover); } - .chip.add svg { display: block; } + font-size: 11.5px; + color: var(--fg-mid); + padding: 3px 8px; + border-radius: 5px; + white-space: nowrap; + cursor: default; + } + .chip:hover { + background: var(--hover); + color: var(--fg); + } + .chip.on { + background: var(--active-row); + color: var(--fg); + } + .chip .n { + color: var(--fg-dim); + font-size: 10px; + margin-left: 3px; + font-family: var(--mono); + } + .chip.add { + margin-left: auto; + padding: 3px 6px; + color: var(--fg-dim); + } + .chip.add:hover { + color: var(--fg); + background: var(--hover); + } + .chip.add svg { + display: block; + } /* ── Section headers ────────────────────────── */ .sect { - display: flex; align-items: baseline; gap: 8px; - padding: 12px 12px 5px; font-size: 11px; color: var(--fg-dim); - font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; + display: flex; + align-items: baseline; + gap: 8px; + padding: 12px 12px 5px; + font-size: 11px; + color: var(--fg-dim); + font-family: var(--mono); + text-transform: uppercase; + letter-spacing: 0.06em; + } + .sect .count { + margin-left: auto; + text-transform: none; + letter-spacing: 0; + } + .sect .needs { + color: var(--act); } - .sect .count { margin-left: auto; text-transform: none; letter-spacing: 0; } - .sect .needs { color: var(--act); } /* ── Thread rows ────────────────────────────── */ - ul { list-style: none; } + ul { + list-style: none; + } .row { position: relative; padding: 7px 12px 8px; border-top: 1px solid var(--border); cursor: default; } - .row:hover { background: var(--hover); } - .row.current { background: var(--active-row); } - .l1 { display: flex; align-items: center; gap: 7px; min-width: 0; } - .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; } - .dot.act { background: var(--act); } - .dot.motion { background: var(--motion); } - .dot.broken { background: var(--broken); } - .dot.unread { background: var(--fg); } - .pin { color: var(--fg-dim); font-size: 10px; flex: none; } + .row:hover { + background: var(--hover); + } + .row.current { + background: var(--active-row); + } + .l1 { + display: flex; + align-items: center; + gap: 7px; + min-width: 0; + } + .dot { + width: 7px; + height: 7px; + border-radius: 50%; + flex: none; + } + .dot.act { + background: var(--act); + } + .dot.motion { + background: var(--motion); + } + .dot.broken { + background: var(--broken); + } + .dot.unread { + background: var(--fg); + } + .pin { + color: var(--fg-dim); + font-size: 10px; + flex: none; + } .title { - flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-weight: 500; color: rgb(232 231 227 / 0.9); font-size: 13px; - } - .title.bright { color: var(--fg); } - .title.dim { font-weight: 400; color: var(--fg-mid); } - .stat { flex: none; font-size: 11px; font-family: var(--mono); color: var(--fg-dim); } - .stat.act { color: var(--act); } - .stat.motion { color: var(--motion); } - .stat.broken { color: var(--broken); } + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-weight: 500; + color: rgb(232 231 227 / 0.9); + font-size: 13px; + } + .title.bright { + color: var(--fg); + } + .title.dim { + font-weight: 400; + color: var(--fg-mid); + } + .stat { + flex: none; + font-size: 11px; + font-family: var(--mono); + color: var(--fg-dim); + } + .stat.act { + color: var(--act); + } + .stat.motion { + color: var(--motion); + } + .stat.broken { + color: var(--broken); + } .l2 { - display: flex; align-items: center; gap: 6px; min-width: 0; - margin-top: 2px; padding-left: 14px; - font-size: 11px; color: var(--fg-dim); - } - .l2 .proj { color: rgb(232 231 227 / 0.5); } - .l2 .sep { color: rgb(232 231 227 / 0.22); } - .l2 .branch { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 10.5px; } - .l2 .right { margin-left: auto; display: flex; align-items: center; gap: 6px; flex: none; } - .l2 .diff { font-family: var(--mono); font-size: 10px; } - .l2 .plus { color: rgb(120 200 130); } - .l2 .minus { color: rgb(230 120 110); } - .glyph { width: 12px; height: 12px; opacity: 0.55; flex: none; } + display: flex; + align-items: center; + gap: 6px; + min-width: 0; + margin-top: 2px; + padding-left: 14px; + font-size: 11px; + color: var(--fg-dim); + } + .l2 .proj { + color: rgb(232 231 227 / 0.5); + } + .l2 .sep { + color: rgb(232 231 227 / 0.22); + } + .l2 .branch { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-family: var(--mono); + font-size: 10.5px; + } + .l2 .right { + margin-left: auto; + display: flex; + align-items: center; + gap: 6px; + flex: none; + } + .l2 .diff { + font-family: var(--mono); + font-size: 10px; + } + .l2 .plus { + color: rgb(120 200 130); + } + .l2 .minus { + color: rgb(230 120 110); + } + .glyph { + width: 12px; + height: 12px; + opacity: 0.55; + flex: none; + } /* Hover actions replace the right meta (shown forced on one row) */ .acts { - position: absolute; right: 8px; top: 6px; display: none; gap: 2px; - background: var(--panel); padding-left: 8px; + position: absolute; + right: 8px; + top: 6px; + display: none; + gap: 2px; + background: var(--panel); + padding-left: 8px; + } + .row.show-acts .acts { + display: flex; + } + .row.show-acts .stat { + visibility: hidden; } - .row.show-acts .acts { display: flex; } - .row.show-acts .stat { visibility: hidden; } .act-btn { - font-size: 11px; color: var(--fg-mid); padding: 2px 7px; border-radius: 4px; - display: flex; align-items: center; gap: 4px; + font-size: 11px; + color: var(--fg-mid); + padding: 2px 7px; + border-radius: 4px; + display: flex; + align-items: center; + gap: 4px; + } + .act-btn:hover { + background: var(--hover); + color: var(--fg); } - .act-btn:hover { background: var(--hover); color: var(--fg); } /* ── Done tail ──────────────────────────────── */ /* Done rows keep their identity. Flattening them all to one grey (T3's treatment) turns the section into a texture; here the section header carries "done" and each row keeps a readable name and its project. */ - .done .row { padding: 6px 12px; } - .done .l1 { gap: 8px; } - .done .title { font-weight: 400; color: rgb(232 231 227 / 0.78); } - .done .row:hover .title { color: var(--fg); } - .done .proj { flex: none; font-size: 11px; color: rgb(232 231 227 / 0.42); } + .done .row { + padding: 6px 12px; + } + .done .l1 { + gap: 8px; + } + .done .title { + font-weight: 400; + color: rgb(232 231 227 / 0.78); + } + .done .row:hover .title { + color: var(--fg); + } + .done .proj { + flex: none; + font-size: 11px; + color: rgb(232 231 227 / 0.42); + } .more { - padding: 7px 12px 12px; font-size: 11px; color: var(--fg-dim); + padding: 7px 12px 12px; + font-size: 11px; + color: var(--fg-dim); border-top: 1px solid var(--border); } - .more:hover { color: var(--fg-mid); } + .more:hover { + color: var(--fg-mid); + } /* ── Notes column ───────────────────────────── */ - .notes { max-width: 420px; font-size: 13px; line-height: 1.55; color: var(--fg-mid); } - .notes h2 { font-size: 13px; color: var(--fg); margin: 18px 0 4px; font-weight: 600; } - .notes h2:first-child { margin-top: 0; } - .notes code { font-family: var(--mono); font-size: 11.5px; color: var(--fg); } - .notes .q { color: var(--act); } + .notes { + max-width: 420px; + font-size: 13px; + line-height: 1.55; + color: var(--fg-mid); + } + .notes h2 { + font-size: 13px; + color: var(--fg); + margin: 18px 0 4px; + font-weight: 600; + } + .notes h2:first-child { + margin-top: 0; + } + .notes code { + font-family: var(--mono); + font-size: 11.5px; + color: var(--fg); + } + .notes .q { + color: var(--act); + }

Inbox sidebar

- Threads are the inbox. One live list ordered by when work began, a Done tail ordered by - when work ended, and the rail retired. Rows and hairline dividers, not cards: two lines, - ~46px, where T3 spends 78px on three. + Threads are the inbox. One live list ordered by when work began, a Done tail ordered by when + work ended, and the rail retired. Rows and hairline dividers, not cards: two lines, ~46px, + where T3 spends 78px on three.

@@ -191,11 +436,27 @@

Inbox sidebar

threadlines 2 badcode … - + + +
-
Threads 2 need you · 6
+
+ Threads 2 need you · 6 +
  • @@ -206,7 +467,16 @@

    Inbox sidebar

    threadlines· feature/revert-preview -
    +214 −38
    +
    + +214 −38 + + +
  • @@ -218,7 +488,14 @@

    Inbox sidebar

    threadlines· feature/sidebar-polish -
    +
    + + + +
  • @@ -230,7 +507,13 @@

    Inbox sidebar

    badcode· feature/deck-sidebar -
    +26k −329
    +
    + +26k −329 + + +
  • @@ -242,7 +525,11 @@

    Inbox sidebar

    threadlines· fix/relay-backoff -
    +
    + + + +
  • @@ -254,7 +541,14 @@

    Inbox sidebar

    badcode· main -
    +
    + + + +
  • @@ -265,7 +559,11 @@

    Inbox sidebar

    threadlines· main -
    +
    + + + +
@@ -273,13 +571,22 @@

Inbox sidebar

Done 31
  • -
    Answer a notification with 202badcode1d
    +
    + Answer a notification with 202badcode1d +
  • -
    Spellcheck via native Chromiumthreadlines6d
    +
    + Spellcheck via native Chromiumthreadlines6d +
  • -
    Phone link relay chunkingthreadlines12d
    +
    + Phone link relay chunkingthreadlines12d +
Show 28 more…
@@ -288,7 +595,7 @@

Inbox sidebar

Chips, scoped to one project
-
+
⌕ Search ⌘K
@@ -298,7 +605,21 @@

Inbox sidebar

All threadlines 2 badcode - + + +
Threads
@@ -318,7 +639,7 @@

Inbox sidebar

Same rows — hover affordances forced
-
+
Threads
  • @@ -339,32 +660,34 @@

    Inbox sidebar

    Done
    • -
      Phone link relay chunking12d
      +
      + Phone link relay chunking12d +
      ↩ Reopen
-
+

What we take from T3

- The attention partition (live above, done below), and their sort discipline: the live - list holds creation order, newest first, and activity never reorders it. A row - keeps its place from open until you mark it done, so the thing you were about to click - never jumps. Status lives in the row, not in position. Color is spent on exactly three - things: approval (act now), working (in motion, with elapsed), - failed (broken). Everything else rests unlabeled with a timestamp. - Unread is its own axis: a completed run you haven’t seen keeps a bright title and - a white dot until you visit. + The attention partition (live above, done below), and their sort discipline: the live list + holds creation order, newest first, and activity never reorders it. A row keeps + its place from open until you mark it done, so the thing you were about to click never + jumps. Status lives in the row, not in position. Color is spent on exactly three things: + approval (act now), working (in motion, with elapsed), + failed (broken). Everything else rests unlabeled with a timestamp. Unread is + its own axis: a completed run you haven’t seen keeps a bright title and a white dot + until you visit.

Our flavor

- Rows with dividers, never cards — two lines instead of their three by folding - status into line one. Projects stop being a tree: the scope filter narrows the list, and - every row names its project, which is what killed the rail — project context - travels with the thread now, so nothing needs to be traced back to a group header. - Pinned threads float to the top of the live list (an explicit act, so the move is - yours). “Done” instead of T3’s “Settle”: plainer, and it - reads correctly for agent work. Blocked or running work refuses Done — same rule - the deck already had: live work can’t be waved away. + Rows with dividers, never cards — two lines instead of their three by folding status + into line one. Projects stop being a tree: the scope filter narrows the list, and every + row names its project, which is what killed the rail — project context travels with + the thread now, so nothing needs to be traced back to a group header. Pinned threads float + to the top of the live list (an explicit act, so the move is yours). “Done” + instead of T3’s “Settle”: plainer, and it reads correctly for agent + work. Blocked or running work refuses Done — same rule the deck already had: live + work can’t be waved away.

Deliberately deferred

Snooze (T3’s wake/woke machinery is a whole feature; worth doing later, properly). @@ -372,28 +695,25 @@

Deliberately deferred

Multi-select.

Decided

- Collapsing the sidebar hides it completely, same toggle as today; no icon strip. - Chips over the dropdown. The Done list stays at the bottom of the sidebar. Done rows - are not flattened to uniform grey: the section header says done, each row keeps a - readable title and its project name. Add project is a primary action: a - folder-plus pinned to the right end of the chips row, always visible — the - “…” chip appears only when projects overflow, and holds only - those. The old quick-links row folds away: compose covers new-chat, and the Chats - page link moves into the “…” menu's footer (easily moved if that - feels buried). + Collapsing the sidebar hides it completely, same toggle as today; no icon strip. Chips + over the dropdown. The Done list stays at the bottom of the sidebar. Done rows are not + flattened to uniform grey: the section header says done, each row keeps a readable title + and its project name. Add project is a primary action: a folder-plus pinned to the right + end of the chips row, always visible — the “…” chip appears only + when projects overflow, and holds only those. The old quick-links row folds away: compose + covers new-chat, and the Chats page link moves into the “…” menu's + footer (easily moved if that feels buried).

Switching projects: dropdown vs chips

“All projects” is one combined list — every project’s threads mixed together, newest first, each row saying which project it belongs to. Picking a project narrows the list to just that one (and the row label can disappear, since - it’s implied). The dropdown (option A) is compact but costs two clicks per - switch. The chips row (option B) puts your most recent projects one click away, with - a count of threads that need you on each — overflow projects live behind the - “…”. Worth knowing: in an inbox, you often don’t need to - switch at all — whatever you touched last is already near the top of the - combined list. The filter is for focus, not for finding things. - - + it’s implied). The dropdown (option A) is compact but costs two clicks per switch. + The chips row (option B) puts your most recent projects one click away, with a count of + threads that need you on each — overflow projects live behind the + “…”. Worth knowing: in an inbox, you often don’t need to switch + at all — whatever you touched last is already near the top of the combined list. The + filter is for focus, not for finding things.
From 4d0e036e9322170347a9220877f8d6b59873fc46 Mon Sep 17 00:00:00 2001 From: Badcuban <108198679+badcuban@users.noreply.github.com> Date: Tue, 28 Jul 2026 01:24:04 -0400 Subject: [PATCH 06/18] Turn the sidebar into an inbox The project tree becomes one flat list. Live threads hold creation order -- pins float, nothing else moves a row -- with status carried in the row: a three-color budget of amber for blocked-on-you, blue for working, red for failed, and everything else resting unlabeled with a timestamp. Done threads keep their names and their projects in a tail below, ordered by when the work ended, because history you can still recognize is the point of keeping it visible. Projects stop being structure and become a scope: chips of the recently active few, each wearing its needs-you count, the overflow behind an ellipsis, add-project pinned at the row's end. Every row names its own project, which is what finally retires the rail -- nothing needs tracing back to a group header anymore. Gone with it: the On Deck section (the live list is the deck now), the destinations band, the sort and grouping menus that no longer governed anything, project drag-ordering, the icon-collapse mode, and every helper that existed only to serve them, down to the auto-animate dependency. Sidebar.tsx drops from 3904 lines to 1390 while gaining a lifecycle. Built by an agent from the settled sketch in docs/design/sidebar-inbox .html and reviewed seam by seam; its judgment calls held, including two this message should not bury: archive survives beside Done because hiding forever and finished-but-kept are different verbs, and project management moved to right-click on the chips when the headers that held it left. --- apps/web/package.json | 1 - apps/web/src/components/AppSidebarLayout.tsx | 13 +- apps/web/src/components/ChatView.browser.tsx | 131 +- apps/web/src/components/Sidebar.logic.test.ts | 374 +- apps/web/src/components/Sidebar.logic.ts | 250 +- apps/web/src/components/Sidebar.tsx | 4003 +++-------------- .../src/components/ThreadStatusIndicators.tsx | 60 - .../components/sidebar/DeckRail.browser.tsx | 185 - apps/web/src/components/sidebar/DeckRail.tsx | 265 -- .../components/sidebar/DestinationBand.tsx | 114 - apps/web/src/components/sidebar/InboxRows.tsx | 769 ++++ .../src/components/sidebar/OnDeckSection.tsx | 200 - .../components/sidebar/ProjectChipsRow.tsx | 669 +++ .../components/sidebar/ProjectHoverCard.tsx | 91 - apps/web/src/index.css | 44 - apps/web/src/uiStateStore.test.ts | 95 - apps/web/src/uiStateStore.ts | 127 +- pnpm-lock.yaml | 8 - 18 files changed, 2292 insertions(+), 5107 deletions(-) delete mode 100644 apps/web/src/components/sidebar/DeckRail.browser.tsx delete mode 100644 apps/web/src/components/sidebar/DeckRail.tsx delete mode 100644 apps/web/src/components/sidebar/DestinationBand.tsx create mode 100644 apps/web/src/components/sidebar/InboxRows.tsx delete mode 100644 apps/web/src/components/sidebar/OnDeckSection.tsx create mode 100644 apps/web/src/components/sidebar/ProjectChipsRow.tsx delete mode 100644 apps/web/src/components/sidebar/ProjectHoverCard.tsx diff --git a/apps/web/package.json b/apps/web/package.json index 3b9c523e..c59606c3 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -21,7 +21,6 @@ "@effect/atom-react": "catalog:", "@fontsource-variable/cascadia-mono": "^5.2.2", "@fontsource-variable/schibsted-grotesk": "^5.2.8", - "@formkit/auto-animate": "^0.10.0", "@legendapp/list": "^3.3.3", "@lexical/react": "^0.47.0", "@pierre/diffs": "catalog:", diff --git a/apps/web/src/components/AppSidebarLayout.tsx b/apps/web/src/components/AppSidebarLayout.tsx index ce8a3b54..eacdd410 100644 --- a/apps/web/src/components/AppSidebarLayout.tsx +++ b/apps/web/src/components/AppSidebarLayout.tsx @@ -25,9 +25,6 @@ const THREAD_SIDEBAR_MIN_WIDTH = 13 * 16; const THREAD_SIDEBAR_DEFAULT_WIDTH = `${THREAD_SIDEBAR_MIN_WIDTH}px`; const THREAD_MAIN_CONTENT_MIN_WIDTH = 40 * 16; const MACOS_TRAFFIC_LIGHTS_LEFT_INSET = "88px"; -// Collapsed width of the deck rail. Wide enough for a 32px hit target plus the -// breathing room that keeps status dots off the window edge. -const THREAD_SIDEBAR_RAIL_WIDTH = "2.75rem"; function SidebarControl() { return ( @@ -50,7 +47,6 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) { const appSettings = useSettings(); const sidebarStyle = { "--sidebar-width": THREAD_SIDEBAR_DEFAULT_WIDTH, - "--sidebar-width-icon": THREAD_SIDEBAR_RAIL_WIDTH, ...(isElectron && typeof navigator !== "undefined" && isMacPlatform(navigator.platform) ? { "--workspace-controls-left": MACOS_TRAFFIC_LIGHTS_LEFT_INSET } : {}), @@ -139,7 +135,9 @@ export function AppSidebarLayout({ children }: { children: ReactNode }) { - {/* Only the expanded pane resizes; a handle on the fixed-width rail - would advertise a drag that does nothing. */} - + {/* The drag handle on the pane's edge; it resizes while open. */} + {children} diff --git a/apps/web/src/components/ChatView.browser.tsx b/apps/web/src/components/ChatView.browser.tsx index f547dadb..abd62209 100644 --- a/apps/web/src/components/ChatView.browser.tsx +++ b/apps/web/src/components/ChatView.browser.tsx @@ -2097,6 +2097,8 @@ describe("ChatView timeline estimator parity (full app)", () => { projectExpandedById: {}, projectOrder: [], threadLastVisitedAtById: {}, + doneThreadOverrides: {}, + inboxProjectScopeKey: null, }); useTerminalStateStore.persist.clearStorage(); useTerminalStateStore.setState({ @@ -2373,30 +2375,37 @@ describe("ChatView timeline estimator parity (full app)", () => { } }); - it("hides the active thread row when collapsing a one-thread project", async () => { + it("narrows the live list to the scoped project and hides the implied label", async () => { const mounted = await mountChatView({ viewport: DEFAULT_VIEWPORT, snapshot: createSnapshotForTargetUser({ - targetMessageId: "msg-user-one-thread-collapse-target" as MessageId, - targetText: "one thread collapse target", + targetMessageId: "msg-user-scope-target" as MessageId, + targetText: "scope target", }), }); try { - await expect.element(page.getByTestId(`thread-row-${THREAD_ID}`)).toBeInTheDocument(); + const threadRow = await waitForElement( + () => document.querySelector(`[data-testid="thread-row-${THREAD_ID}"]`), + "Unable to find thread row.", + ); + expect(threadRow.textContent).toContain("Project"); - const projectButton = await waitForButtonByText("Project"); - expect(projectButton.getAttribute("aria-expanded")).toBe("true"); - projectButton.click(); + await page.getByTestId(`inbox-scope-${PROJECT_LOGICAL_KEY}`).click(); await vi.waitFor( () => { - expect(projectButton.getAttribute("aria-expanded")).toBe("false"); - expect(document.querySelector(`[data-testid="thread-row-${THREAD_ID}"]`)).toBeNull(); + expect(useUiStateStore.getState().inboxProjectScopeKey).toBe(PROJECT_LOGICAL_KEY); + const scopedRow = document.querySelector( + `[data-testid="thread-row-${THREAD_ID}"]`, + ); + expect(scopedRow).not.toBeNull(); + expect(scopedRow?.textContent).not.toContain("Project"); }, { timeout: 4_000, interval: 16 }, ); } finally { + useUiStateStore.getState().setInboxProjectScope(null); await mounted.cleanup(); } }); @@ -5037,9 +5046,6 @@ describe("ChatView timeline estimator parity (full app)", () => { }); it("renders compact thread actions in the shared thread-row hover group", async () => { - // Deliberately unpinned. A pinned thread is on deck, and a thread on deck - // is not drawn again in the tree -- so the tree row this is about only - // exists for an ordinary thread. const mounted = await mountChatView({ viewport: DEFAULT_VIEWPORT, snapshot: createSnapshotForTargetUser({ @@ -5068,9 +5074,9 @@ describe("ChatView timeline estimator parity (full app)", () => { "Thread actions should render inside a shared visibility wrapper.", ).not.toBeNull(); const threadItem = archiveButton.closest("li"); - expect(threadItem?.className).toContain("group/menu-sub-item"); - expect(compactActions?.className).toContain("group-hover/menu-sub-item:opacity-100"); - expect(compactActions?.className).toContain("group-focus-within/menu-sub-item:opacity-100"); + expect(threadItem?.className).toContain("group/thread-row"); + expect(compactActions?.className).toContain("group-hover/thread-row:opacity-100"); + expect(compactActions?.className).toContain("group-focus-within/thread-row:opacity-100"); expect(pinButton.getAttribute("aria-label")).toBe(`Pin ${THREAD_TITLE}`); expect(pinButton.getAttribute("aria-pressed")).toBe("false"); expect( @@ -5084,37 +5090,90 @@ describe("ChatView timeline estimator parity (full app)", () => { } }); - it("puts a pinned thread on the deck instead of in the tree, and holds live work there", async () => { - // This replaces two tests that asserted pin and archive on the tree row of a - // running thread. That row no longer exists: pinned and live threads are on - // deck, and a thread on deck is drawn once, there. What matters now is that - // it moved rather than vanished, and that a run in progress cannot be waved - // away with the dismiss button. + it("lists every open thread once, floats pins to the top, and refuses Done on running work", async () => { + const pinnedThreadId = "thread-pinned-inbox" as ThreadId; + const runningSnapshot = createSnapshotForTargetUser({ + targetMessageId: "msg-user-running-pin-test" as MessageId, + targetText: "running pin target", + sessionStatus: "running", + sessionActiveTurnId: "turn-running-pin-test" as TurnId, + }); + const withPinnedThread = addThreadToSnapshot(runningSnapshot, pinnedThreadId); const mounted = await mountChatView({ viewport: DEFAULT_VIEWPORT, - snapshot: createSnapshotForTargetUser({ - targetMessageId: "msg-user-running-pin-test" as MessageId, - targetText: "running pin target", - threadPinnedAt: NOW_ISO, - sessionStatus: "running", - sessionActiveTurnId: "turn-running-pin-test" as TurnId, - }), + snapshot: { + ...withPinnedThread, + threads: withPinnedThread.threads.map((thread) => + thread.id === pinnedThreadId ? { ...thread, pinnedAt: NOW_ISO } : thread, + ), + }, }); try { - await waitForElement( - () => document.querySelector(`[data-testid="on-deck-row-${THREAD_ID}"]`), - "Unable to find the thread's deck row.", + const runningRow = await waitForElement( + () => document.querySelector(`[data-testid="thread-row-${THREAD_ID}"]`), + "Unable to find the running thread's row.", + ); + const pinnedRow = await waitForElement( + () => document.querySelector(`[data-testid="thread-row-${pinnedThreadId}"]`), + "Unable to find the pinned thread's row.", ); expect( - document.querySelector(`[data-testid="thread-row-${THREAD_ID}"]`), - "A thread on deck should not also be drawn in the project tree.", - ).toBeNull(); + pinnedRow.compareDocumentPosition(runningRow) & Node.DOCUMENT_POSITION_FOLLOWING, + "A pinned thread sorts above the rest of the live list.", + ).toBeTruthy(); + expect( + document.querySelectorAll(`[data-testid="thread-row-${THREAD_ID}"]`).length, + "Each thread is drawn exactly once.", + ).toBe(1); expect( - document.querySelector(`[data-testid="on-deck-dismiss-${THREAD_ID}"]`), - "A running thread should not offer dismiss.", + document.querySelector(`[data-testid="thread-done-${THREAD_ID}"]`), + "A running thread cannot be marked done.", ).toBeNull(); + expect( + document.querySelector(`[data-testid="thread-done-${pinnedThreadId}"]`), + "A settled thread offers Done.", + ).not.toBeNull(); + } finally { + await mounted.cleanup(); + } + }); + + it("moves a thread into the Done tail and back with Reopen", async () => { + const mounted = await mountChatView({ + viewport: DEFAULT_VIEWPORT, + snapshot: createSnapshotForTargetUser({ + targetMessageId: "msg-user-done-lifecycle" as MessageId, + targetText: "done lifecycle target", + }), + }); + + try { + const threadRow = page.getByTestId(`thread-row-${THREAD_ID}`); + await expect.element(threadRow).toBeInTheDocument(); + await threadRow.hover(); + await page.getByTestId(`thread-done-${THREAD_ID}`).click(); + + await vi.waitFor( + () => { + expect(document.querySelector(`[data-testid="thread-row-${THREAD_ID}"]`)).toBeNull(); + expect(document.querySelector(`[data-testid="done-row-${THREAD_ID}"]`)).not.toBeNull(); + }, + { timeout: 4_000, interval: 16 }, + ); + + const doneRow = page.getByTestId(`done-row-${THREAD_ID}`); + await doneRow.hover(); + await page.getByTestId(`done-reopen-${THREAD_ID}`).click(); + + await vi.waitFor( + () => { + expect(document.querySelector(`[data-testid="done-row-${THREAD_ID}"]`)).toBeNull(); + expect(document.querySelector(`[data-testid="thread-row-${THREAD_ID}"]`)).not.toBeNull(); + }, + { timeout: 4_000, interval: 16 }, + ); } finally { await mounted.cleanup(); } diff --git a/apps/web/src/components/Sidebar.logic.test.ts b/apps/web/src/components/Sidebar.logic.test.ts index 90c5b883..9481ce20 100644 --- a/apps/web/src/components/Sidebar.logic.test.ts +++ b/apps/web/src/components/Sidebar.logic.test.ts @@ -2,26 +2,18 @@ import { afterEach, beforeEach, describe, expect, it, vi } from "vite-plus/test" import { ProviderDriverKind } from "@threadlines/contracts"; import { - buildOnDeckSyncInput, - buildProjectHoverSummary, countThreadsNeedingUser, createThreadJumpHintVisibilityController, - excludeOnDeckThreads, getSidebarThreadIdsToPrewarm, - isOnDeckDismissible, - getVisibleSidebarThreadIds, resolveAdjacentThreadId, getFallbackThreadIdAfterDelete, - getSidebarThreadWindow, getProjectSortTimestamp, hasUnseenCompletion, isContextMenuPointerDown, orderItemsByPreferredIds, - resolveProjectStatusIndicator, resolveSidebarNewThreadSeedContext, resolveSidebarNewThreadEnvMode, THREAD_STATUS_DOT_CLASSES, - resolveThreadRowClassName, resolveThreadStatusPill, shouldClearThreadSelectionOnMouseDown, sortProjectsForSidebar, @@ -39,7 +31,6 @@ import { DEFAULT_INTERACTION_MODE, DEFAULT_RUNTIME_MODE, type Project, - type SidebarThreadSummary, type Thread, } from "../types"; @@ -408,46 +399,6 @@ describe("resolveAdjacentThreadId", () => { }); }); -describe("getVisibleSidebarThreadIds", () => { - it("returns only the rendered visible thread order across projects", () => { - expect( - getVisibleSidebarThreadIds([ - { - renderedThreadIds: [ - ThreadId.make("thread-12"), - ThreadId.make("thread-11"), - ThreadId.make("thread-10"), - ], - }, - { - renderedThreadIds: [ThreadId.make("thread-8"), ThreadId.make("thread-6")], - }, - ]), - ).toEqual([ - ThreadId.make("thread-12"), - ThreadId.make("thread-11"), - ThreadId.make("thread-10"), - ThreadId.make("thread-8"), - ThreadId.make("thread-6"), - ]); - }); - - it("skips threads from collapsed projects whose thread panels are not shown", () => { - expect( - getVisibleSidebarThreadIds([ - { - shouldShowThreadPanel: false, - renderedThreadIds: [ThreadId.make("thread-hidden-2"), ThreadId.make("thread-hidden-1")], - }, - { - shouldShowThreadPanel: true, - renderedThreadIds: [ThreadId.make("thread-12"), ThreadId.make("thread-11")], - }, - ]), - ).toEqual([ThreadId.make("thread-12"), ThreadId.make("thread-11")]); - }); -}); - describe("isContextMenuPointerDown", () => { it("treats secondary-button presses as context menu gestures on all platforms", () => { expect( @@ -763,212 +714,6 @@ describe("resolveThreadStatusPill", () => { }); }); -describe("resolveThreadRowClassName", () => { - it("uses the darker selected palette when a thread is both selected and active", () => { - const className = resolveThreadRowClassName({ isActive: true, isSelected: true }); - expect(className).toContain("bg-primary/22"); - expect(className).toContain("hover:bg-primary/26"); - expect(className).toContain("dark:bg-primary/30"); - expect(className).not.toContain("bg-accent/85"); - }); - - it("uses selected hover colors for selected threads", () => { - const className = resolveThreadRowClassName({ isActive: false, isSelected: true }); - expect(className).toContain("bg-primary/15"); - expect(className).toContain("hover:bg-primary/19"); - expect(className).toContain("dark:bg-primary/22"); - expect(className).not.toContain("hover:bg-accent"); - }); - - it("keeps the accent palette for active-only threads", () => { - const className = resolveThreadRowClassName({ isActive: true, isSelected: false }); - expect(className).toContain("bg-accent/85"); - expect(className).toContain("hover:bg-accent"); - }); -}); - -describe("resolveProjectStatusIndicator", () => { - it("returns null when no threads have a notable status", () => { - expect(resolveProjectStatusIndicator([null, null])).toBeNull(); - }); - - it("surfaces the highest-priority actionable state across project threads", () => { - expect( - resolveProjectStatusIndicator([ - { - label: "Completed", - colorClass: "text-emerald-600", - dotClass: THREAD_STATUS_DOT_CLASSES.emerald, - pulse: false, - }, - { - label: "Pending Approval", - colorClass: "text-amber-600", - dotClass: THREAD_STATUS_DOT_CLASSES.amber, - pulse: false, - }, - { - label: "Working", - colorClass: "text-primary-readable", - dotClass: THREAD_STATUS_DOT_CLASSES.blue, - pulse: true, - }, - ]), - ).toMatchObject({ label: "Pending Approval", dotClass: THREAD_STATUS_DOT_CLASSES.amber }); - }); - - it("prefers plan-ready over completed when no stronger action is needed", () => { - expect( - resolveProjectStatusIndicator([ - { - label: "Completed", - colorClass: "text-emerald-600", - dotClass: THREAD_STATUS_DOT_CLASSES.emerald, - pulse: false, - }, - { - label: "Plan Ready", - colorClass: "text-violet-600", - dotClass: THREAD_STATUS_DOT_CLASSES.violet, - pulse: false, - }, - ]), - ).toMatchObject({ label: "Plan Ready", dotClass: THREAD_STATUS_DOT_CLASSES.violet }); - }); -}); - -const makeKeys = (count: number) => Array.from({ length: count }, (_, index) => `t-${index + 1}`); -const getThreadKey = (key: string) => key; - -describe("getSidebarThreadWindow", () => { - const previewLimit = 6; - - it("includes the active thread even when it falls below the folded preview", () => { - const window = getSidebarThreadWindow({ - threads: makeKeys(8), - getThreadKey, - activeThreadKey: "t-8", - previewLimit, - revealedCount: 0, - }); - - expect(window.visibleThreads).toEqual(["t-1", "t-2", "t-3", "t-4", "t-5", "t-6", "t-8"]); - expect(window.hiddenThreads).toEqual(["t-7"]); - expect(window.isRevealed).toBe(false); - }); - - it("caps the next reveal to the configured preview count", () => { - const window = getSidebarThreadWindow({ - threads: makeKeys(previewLimit + previewLimit + 2), - getThreadKey, - activeThreadKey: null, - previewLimit, - revealedCount: 0, - }); - - expect(window.nextRevealCount).toBe(previewLimit); - expect(window.searchHandoffThreadCount).toBeNull(); - }); - - it("offers a single preview-sized step when the tail is larger than the preview", () => { - const window = getSidebarThreadWindow({ - threads: makeKeys(40), - getThreadKey, - activeThreadKey: null, - previewLimit, - revealedCount: 0, - }); - - expect(window.visibleThreads).toHaveLength(previewLimit); - expect(window.nextRevealCount).toBe(previewLimit); - expect(window.searchHandoffThreadCount).toBeNull(); - }); - - it("offers only the remaining tail when it is smaller than the preview count", () => { - const window = getSidebarThreadWindow({ - threads: makeKeys(previewLimit + 2), - getThreadKey, - activeThreadKey: null, - previewLimit, - revealedCount: 0, - }); - - expect(window.nextRevealCount).toBe(2); - expect(window.searchHandoffThreadCount).toBeNull(); - }); - - it("uses the configured preview count for the reveal step", () => { - const configuredPreviewLimit = 5; - const window = getSidebarThreadWindow({ - threads: makeKeys(40), - getThreadKey, - activeThreadKey: null, - previewLimit: configuredPreviewLimit, - revealedCount: 0, - }); - - expect(window.visibleThreads).toHaveLength(configuredPreviewLimit); - expect(window.nextRevealCount).toBe(configuredPreviewLimit); - }); - - it("keeps revealing in chunks once expanded while also offering search", () => { - const window = getSidebarThreadWindow({ - threads: makeKeys(40), - getThreadKey, - activeThreadKey: null, - previewLimit, - revealedCount: previewLimit, - }); - - expect(window.visibleThreads).toHaveLength(previewLimit + previewLimit); - expect(window.nextRevealCount).toBe(previewLimit); - expect(window.searchHandoffThreadCount).toBe(40); - expect(window.isRevealed).toBe(true); - }); - - it("keeps Show less without further rows when everything is revealed", () => { - const window = getSidebarThreadWindow({ - threads: makeKeys(10), - getThreadKey, - activeThreadKey: null, - previewLimit, - revealedCount: 4, - }); - - expect(window.visibleThreads).toHaveLength(10); - expect(window.hiddenThreads).toEqual([]); - expect(window.nextRevealCount).toBe(0); - expect(window.searchHandoffThreadCount).toBeNull(); - expect(window.isRevealed).toBe(true); - }); - - it("does not duplicate an active thread already inside the window", () => { - const window = getSidebarThreadWindow({ - threads: makeKeys(8), - getThreadKey, - activeThreadKey: "t-2", - previewLimit, - revealedCount: 0, - }); - - expect(window.visibleThreads).toEqual(["t-1", "t-2", "t-3", "t-4", "t-5", "t-6"]); - expect(window.hiddenThreads).toEqual(["t-7", "t-8"]); - }); - - it("ignores an active thread that belongs to another project", () => { - const window = getSidebarThreadWindow({ - threads: makeKeys(8), - getThreadKey, - activeThreadKey: "other-project-thread", - previewLimit, - revealedCount: 0, - }); - - expect(window.visibleThreads).toEqual(["t-1", "t-2", "t-3", "t-4", "t-5", "t-6"]); - expect(window.hiddenThreads).toEqual(["t-7", "t-8"]); - }); -}); - function makeProject(overrides: Partial = {}): Project { const { defaultModelSelection, ...rest } = overrides; return { @@ -1246,7 +991,7 @@ describe("sortProjectsForSidebar", () => { }); }); -describe("on deck classification", () => { +describe("countThreadsNeedingUser", () => { const pill = (label: import("./Sidebar.logic").ThreadStatusPill["label"]) => ({ label, colorClass: "", @@ -1254,60 +999,12 @@ describe("on deck classification", () => { pulse: false, }); - it("buildOnDeckSyncInput separates live work from unseen completions", () => { - expect( - buildOnDeckSyncInput({ threadKey: "t-1", pinnedAt: null, status: pill("Working") }), - ).toEqual({ key: "t-1", pinned: false, live: true, unseen: false }); - expect( - buildOnDeckSyncInput({ threadKey: "t-2", pinnedAt: null, status: pill("Completed") }), - ).toEqual({ key: "t-2", pinned: false, live: false, unseen: true }); - expect( - buildOnDeckSyncInput({ - threadKey: "t-3", - pinnedAt: "2026-03-09T10:00:00.000Z", - status: null, - }), - ).toEqual({ key: "t-3", pinned: true, live: false, unseen: false }); - }); - - it("isOnDeckDismissible allows dismissing settled rows only", () => { - expect(isOnDeckDismissible(null)).toBe(true); - expect(isOnDeckDismissible(pill("Completed"))).toBe(true); - expect(isOnDeckDismissible(pill("Working"))).toBe(false); - expect(isOnDeckDismissible(pill("Pending Approval"))).toBe(false); - }); - - it("excludeOnDeckThreads drops deck rows from the tree and keeps the rest in order", () => { - const threads = [{ key: "t-1" }, { key: "t-2" }, { key: "t-3" }]; - const getThreadKey = (thread: { key: string }) => thread.key; - - expect( - excludeOnDeckThreads({ - threads, - onDeckThreadKeys: new Set(["t-2"]), - getThreadKey, - }), - ).toEqual([{ key: "t-1" }, { key: "t-3" }]); - - expect(excludeOnDeckThreads({ threads, onDeckThreadKeys: new Set(), getThreadKey })).toEqual( - threads, - ); - - expect( - excludeOnDeckThreads({ - threads, - onDeckThreadKeys: new Set(["t-1", "t-2", "t-3"]), - getThreadKey, - }), - ).toEqual([]); - }); - - it("countThreadsNeedingUser counts only threads blocked on the user", () => { + it("counts only threads blocked on the user", () => { expect( countThreadsNeedingUser([ pill("Pending Approval"), pill("Awaiting Input"), - // Live but unblocked, so the rail badge must ignore these. + // Live but unblocked, so the section header must ignore these. pill("Working"), pill("Starting"), pill("Plan Ready"), @@ -1319,71 +1016,6 @@ describe("on deck classification", () => { }); }); -describe("buildProjectHoverSummary", () => { - const thread = (id: string, overrides: Partial = {}) => - ({ - id: ThreadId.make(id), - environmentId: localEnvironmentId, - projectId: ProjectId.make("project-badcode"), - title: id, - interactionMode: DEFAULT_INTERACTION_MODE, - session: null, - createdAt: "2026-07-20T00:00:00.000Z", - archivedAt: null, - pinnedAt: null, - latestTurn: null, - branch: null, - worktreePath: null, - latestUserMessageAt: null, - hasPendingApprovals: false, - hasPendingUserInput: false, - hasActionableProposedPlan: false, - ...overrides, - }) as SidebarThreadSummary; - - const summaryFor = (threads: readonly SidebarThreadSummary[]) => - buildProjectHoverSummary({ - name: "badcode", - cwd: "/repo/badcode", - environmentId: localEnvironmentId, - threads, - getLastVisitedAt: () => undefined, - }); - - it("counts only threads the provider is still live on", () => { - const summary = summaryFor([ - thread("waiting", { hasPendingApprovals: true }), - thread("idle"), - thread("also-idle"), - ]); - - expect(summary.threadCount).toBe(3); - expect(summary.activeCount).toBe(1); - expect(summary.status?.label).toBe("Pending Approval"); - }); - - it("reports the most recent activity across the project", () => { - const summary = summaryFor([ - thread("older", { latestUserMessageAt: "2026-07-21T00:00:00.000Z" }), - thread("newest", { latestUserMessageAt: "2026-07-24T00:00:00.000Z" }), - thread("middle", { latestUserMessageAt: "2026-07-22T00:00:00.000Z" }), - ]); - - expect(summary.lastActivityAt).toBe("2026-07-24T00:00:00.000Z"); - }); - - it("describes an empty project without inventing activity", () => { - const summary = summaryFor([]); - - expect(summary.threadCount).toBe(0); - expect(summary.activeCount).toBe(0); - expect(summary.status).toBeNull(); - expect(summary.lastActivityAt).toBeNull(); - }); -}); - -// ── Inbox lifecycle ────────────────────────────────────────────────── - describe("inbox done lifecycle", () => { const NOW = "2026-07-28T12:00:00.000Z"; const base = { diff --git a/apps/web/src/components/Sidebar.logic.ts b/apps/web/src/components/Sidebar.logic.ts index 2aa35d25..4fc45135 100644 --- a/apps/web/src/components/Sidebar.logic.ts +++ b/apps/web/src/components/Sidebar.logic.ts @@ -10,11 +10,7 @@ import { toSortableTimestamp, type ThreadSortInput, } from "../lib/threadSort"; -import type { EnvironmentId } from "@threadlines/contracts"; -import { scopedThreadKey, scopeThreadRef } from "@threadlines/client-runtime"; import type { SidebarThreadSummary, Thread } from "../types"; -import type { OnDeckSyncInput } from "../uiStateStore"; -import { cn } from "../lib/utils"; import { isLatestTurnSettled } from "../session-logic"; export const THREAD_SELECTION_SAFE_SELECTOR = "[data-thread-item], [data-thread-selection-safe]"; @@ -47,17 +43,6 @@ export interface ThreadStatusPill { pulse: boolean; } -const THREAD_STATUS_PRIORITY: Record = { - "Pending Approval": 5, - "Awaiting Input": 4, - Working: 3, - Starting: 3, - "Plan Ready": 2, - Background: 2, - Completed: 1, - Failed: 4, -}; - export const THREAD_STATUS_DOT_CLASSES = { amber: "bg-amber-500 dark:bg-amber-300/90", blue: "bg-primary-graph", @@ -261,17 +246,6 @@ export function orderItemsByPreferredIds(input: { return [...ordered, ...remaining]; } -export function getVisibleSidebarThreadIds( - renderedProjects: readonly { - shouldShowThreadPanel?: boolean; - renderedThreadIds: readonly TThreadId[]; - }[], -): TThreadId[] { - return renderedProjects.flatMap((renderedProject) => - renderedProject.shouldShowThreadPanel === false ? [] : renderedProject.renderedThreadIds, - ); -} - export function getSidebarThreadIdsToPrewarm( visibleThreadIds: readonly TThreadId[], limit = SIDEBAR_THREAD_PREWARM_LIMIT, @@ -315,37 +289,6 @@ export function isContextMenuPointerDown(input: { return input.isMac && input.button === 0 && input.ctrlKey; } -export function resolveThreadRowClassName(input: { - isActive: boolean; - isSelected: boolean; -}): string { - const baseClassName = - "h-7 w-full translate-x-0 cursor-pointer justify-start px-2 text-left select-none focus-ring focus-visible:ring-inset"; - - if (input.isSelected && input.isActive) { - return cn( - baseClassName, - "bg-primary/22 text-foreground font-medium hover:bg-primary/26 hover:text-foreground dark:bg-primary/30 dark:hover:bg-primary/36", - ); - } - - if (input.isSelected) { - return cn( - baseClassName, - "bg-primary/15 text-foreground hover:bg-primary/19 hover:text-foreground dark:bg-primary/22 dark:hover:bg-primary/28", - ); - } - - if (input.isActive) { - return cn( - baseClassName, - "bg-accent/85 text-foreground font-medium hover:bg-accent hover:text-foreground dark:bg-accent/55 dark:hover:bg-accent/70", - ); - } - - return cn(baseClassName, "text-muted-foreground hover:bg-accent hover:text-foreground"); -} - export function resolveThreadStatusPill(input: { thread: ThreadStatusInput; }): ThreadStatusPill | null { @@ -438,56 +381,10 @@ export function resolveThreadStatusPill(input: { return null; } -/** Statuses that mean the provider is working or waiting on the user right now. */ -const ON_DECK_LIVE_STATUSES: ReadonlySet = new Set([ - "Pending Approval", - "Awaiting Input", - "Working", - "Starting", - "Plan Ready", - "Background", -]); - -/** Maps a thread's status pill and pin state onto the deck's entry signals. */ -export function buildOnDeckSyncInput(input: { - threadKey: string; - pinnedAt: string | null; - status: ThreadStatusPill | null; -}): OnDeckSyncInput { - return { - key: input.threadKey, - pinned: input.pinnedAt !== null, - live: input.status !== null && ON_DECK_LIVE_STATUSES.has(input.status.label), - unseen: input.status?.label === "Completed", - }; -} - -/** Only settled rows offer the dismiss affordance; live work can't be waved away. */ -export function isOnDeckDismissible(status: ThreadStatusPill | null): boolean { - return status === null || !ON_DECK_LIVE_STATUSES.has(status.label); -} - -/** - * Drops threads that already have a deck row, so a thread on deck appears once - * in the sidebar rather than twice. Must be applied *before* the preview window - * is computed: a deck thread should not consume a preview slot and then vanish, - * which would leave "Show more" counts disagreeing with the rendered rows. - */ -export function excludeOnDeckThreads(input: { - threads: readonly TThread[]; - onDeckThreadKeys: ReadonlySet; - getThreadKey: (thread: TThread) => string; -}): TThread[] { - if (input.onDeckThreadKeys.size === 0) { - return [...input.threads]; - } - return input.threads.filter((thread) => !input.onDeckThreadKeys.has(input.getThreadKey(thread))); -} - /** * Statuses where the agent has stopped and cannot continue without the user. - * Narrower than {@link ON_DECK_LIVE_STATUSES}: a working thread is live but - * needs nothing, and a ready plan is an invitation rather than a block. + * Narrower than "busy": a working thread needs nothing, and a ready plan is an + * invitation rather than a block. */ const NEEDS_USER_STATUSES: ReadonlySet = new Set([ "Pending Approval", @@ -495,11 +392,6 @@ const NEEDS_USER_STATUSES: ReadonlySet = new Set([ "Failed", ]); -/** True while the provider is working on the thread or waiting on the user. */ -export function isLiveThreadStatus(status: ThreadStatusPill | null): boolean { - return status !== null && ON_DECK_LIVE_STATUSES.has(status.label); -} - /** True when the thread is blocked waiting on the user. */ export function isNeedsUserStatus(status: ThreadStatusPill | null): boolean { return status !== null && NEEDS_USER_STATUSES.has(status.label); @@ -517,85 +409,19 @@ export function countThreadsNeedingUser(statuses: ReadonlyArray, -): ThreadStatusPill | null { - let highestPriorityStatus: ThreadStatusPill | null = null; - - for (const status of statuses) { - if (status === null) continue; - if ( - highestPriorityStatus === null || - THREAD_STATUS_PRIORITY[status.label] > THREAD_STATUS_PRIORITY[highestPriorityStatus.label] - ) { - highestPriorityStatus = status; - } - } - - return highestPriorityStatus; -} - -export interface SidebarThreadWindow { - visibleThreads: T[]; - hiddenThreads: T[]; - /** How many threads the next "Show more" click reveals (0 = no row). */ - nextRevealCount: number; - /** Total thread count for the "Search all N threads" row (null = no row). */ - searchHandoffThreadCount: number | null; - /** True once the user revealed beyond the preview (shows "Show less"). */ - isRevealed: boolean; -} - -export function getSidebarThreadWindow(input: { - threads: readonly T[]; - getThreadKey: (thread: T) => string; - activeThreadKey: string | null; - previewLimit: number; - revealedCount: number; -}): SidebarThreadWindow { - const { activeThreadKey, getThreadKey, previewLimit, revealedCount, threads } = input; - const isRevealed = revealedCount > 0; - const windowSize = previewLimit + Math.max(0, revealedCount); - - if (threads.length <= windowSize) { - return { - visibleThreads: [...threads], - hiddenThreads: [], - nextRevealCount: 0, - searchHandoffThreadCount: null, - isRevealed, - }; - } - - const windowThreads = threads.slice(0, windowSize); - // The active thread always stays visible, even when it falls in the hidden - // tail, so the current-thread marker never disappears from the sidebar. - const visibleThreadKeys = new Set(windowThreads.map(getThreadKey)); - const includeActiveThread = - activeThreadKey !== null && - !visibleThreadKeys.has(activeThreadKey) && - threads.some((thread) => getThreadKey(thread) === activeThreadKey); - if (includeActiveThread) { - visibleThreadKeys.add(activeThreadKey); - } - - const visibleThreads = includeActiveThread - ? threads.filter((thread) => visibleThreadKeys.has(getThreadKey(thread))) - : windowThreads; - const hiddenThreads = threads.filter((thread) => !visibleThreadKeys.has(getThreadKey(thread))); - - // Reveal in preview-sized chunks until the tail is exhausted. Search remains - // available after the first expansion as a fast path for huge projects. - const revealStepSize = Math.max(0, previewLimit); - const nextRevealCount = Math.min(hiddenThreads.length, revealStepSize); +/** + * The single word a row spends on status. Only states that stop the agent and + * hand the thread back earn one; in-flight work reads as "working" with its + * elapsed time, and everything else rests with a timestamp instead. + */ +const INBOX_STATUS_WORDS: Partial> = { + "Pending Approval": "approval", + "Awaiting Input": "input", + Failed: "failed", +}; - return { - visibleThreads, - hiddenThreads, - nextRevealCount, - searchHandoffThreadCount: isRevealed && hiddenThreads.length > 0 ? threads.length : null, - isRevealed, - }; +export function inboxStatusWord(status: ThreadStatusPill | null): string | null { + return status === null ? null : (INBOX_STATUS_WORDS[status.label] ?? null); } export function getFallbackThreadIdAfterDelete< @@ -714,54 +540,6 @@ export function sortScopedProjectsByActivity< }); } -export interface ProjectHoverSummary { - name: string; - cwd: string; - environmentId: EnvironmentId; - status: ThreadStatusPill | null; - threadCount: number; - activeCount: number; - lastActivityAt: string | null; -} - -/** - * Builds a project's hover summary from its threads. Shared so the expanded row - * and the collapsed rail glyph describe a project identically. - */ -export function buildProjectHoverSummary(input: { - name: string; - cwd: string; - environmentId: EnvironmentId; - threads: readonly SidebarThreadSummary[]; - getLastVisitedAt: (threadKey: string) => string | null | undefined; -}): ProjectHoverSummary { - const getThreadKey = (thread: SidebarThreadSummary) => - scopedThreadKey(scopeThreadRef(thread.environmentId, thread.id)); - const statuses = input.threads.map((thread) => { - const lastVisitedAt = input.getLastVisitedAt(getThreadKey(thread)); - return resolveThreadStatusPill({ - thread: { - ...thread, - ...(lastVisitedAt !== undefined && lastVisitedAt !== null ? { lastVisitedAt } : {}), - }, - }); - }); - const lastActivityAt = input.threads.reduce((latest, thread) => { - const at = thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt; - return latest === null || at > latest ? at : latest; - }, null); - - return { - name: input.name, - cwd: input.cwd, - environmentId: input.environmentId, - status: resolveProjectStatusIndicator(statuses), - threadCount: input.threads.length, - activeCount: statuses.filter(isLiveThreadStatus).length, - lastActivityAt, - }; -} - // ── Inbox lifecycle ────────────────────────────────────────────────── // // The sidebar is an inbox: one live list, a Done tail. "Done" is a client-side diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx index aa76c24b..f09c6276 100644 --- a/apps/web/src/components/Sidebar.tsx +++ b/apps/web/src/components/Sidebar.tsx @@ -1,52 +1,11 @@ -import { - ArchiveIcon, - ArrowUpDownIcon, - ChevronRightIcon, - ChevronUpIcon, - CloudIcon, - FolderPlusIcon, - MessagesSquareIcon, - PinIcon, - PinOffIcon, - SearchIcon, - SettingsIcon, - SquarePenIcon, - TerminalIcon, -} from "lucide-react"; -import { - ChangeRequestStatusIcon, - prStatusIndicator, - resolveThreadPr, - terminalStatusFromRunningIds, - ThreadRailNode, - ThreadStatusLabel, -} from "./ThreadStatusIndicators"; +import { SearchIcon, SettingsIcon, SquarePenIcon } from "lucide-react"; import { ThreadlinesGlyph } from "./Icons"; -import { LiveNode, SectionLabel } from "./ui/threadline"; -import { ProjectFavicon } from "./ProjectFavicon"; -import { autoAnimate } from "@formkit/auto-animate"; +import { SectionLabel } from "./ui/threadline"; import React, { useCallback, useEffect, memo, useMemo, useRef, useState } from "react"; import { useShallow } from "zustand/react/shallow"; import { - DndContext, - type DragCancelEvent, - type CollisionDetection, - PointerSensor, - type DragStartEvent, - closestCorners, - pointerWithin, - useSensor, - useSensors, - type DragEndEvent, -} from "@dnd-kit/core"; -import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable"; -import { restrictToFirstScrollableAncestor, restrictToVerticalAxis } from "@dnd-kit/modifiers"; -import { CSS } from "@dnd-kit/utilities"; -import { - type ContextMenuItem, - ProjectId, + type ScopedProjectRef, type ScopedThreadRef, - type SidebarProjectGroupingMode, type ThreadEnvMode, ThreadId, } from "@threadlines/contracts"; @@ -58,25 +17,15 @@ import { scopeThreadRef, } from "@threadlines/client-runtime"; import { Link, useLocation, useNavigate, useParams, useRouter } from "@tanstack/react-router"; -import { - MAX_SIDEBAR_THREAD_PREVIEW_COUNT, - MIN_SIDEBAR_THREAD_PREVIEW_COUNT, - type SidebarProjectSortOrder, - type SidebarThreadPreviewCount, - type SidebarThreadSortOrder, -} from "@threadlines/contracts/settings"; -import { resolveThreadWorkingCwd } from "@threadlines/shared/threadCwd"; import { usePrimaryEnvironmentId } from "../environments/primary"; -import { resolveGeneralChatsProjectRef } from "../lib/generalChats"; import { isElectron } from "../env"; import { APP_BASE_NAME, APP_STAGE_LABEL, APP_VERSION } from "../branding"; import { isTerminalFocused } from "../lib/terminalFocus"; import { cn, isMacPlatform, newCommandId } from "../lib/utils"; +import { toSortableTimestamp } from "../lib/threadSort"; import { selectProjectByRef, - selectGeneralChatsProjectAcrossEnvironments, selectProjectsAcrossEnvironments, - selectSidebarThreadsForProjectRefs, selectSidebarThreadsAcrossEnvironments, selectThreadByRef, useStore, @@ -93,12 +42,11 @@ import { } from "../keybindings"; import { useModelPickerOpen } from "../modelPickerOpenState"; import { useShortcutModifierState } from "../shortcutModifierState"; -import { useGitStatus } from "../lib/gitStatusState"; import { readLocalApi } from "../localApi"; import { useComposerDraftStore } from "../composerDraftStore"; -import { useHandleNewThread, useNewThreadHandler } from "../hooks/useHandleNewThread"; +import { useHandleNewThread } from "../hooks/useHandleNewThread"; +import { useRelativeTimeTick } from "../hooks/useRelativeTimeTick"; import { retainThreadDetailSubscription } from "../environments/runtime/service"; - import { useThreadActions } from "../hooks/useThreadActions"; import { buildThreadRouteParams, @@ -106,37 +54,8 @@ import { resolveThreadRouteTarget, } from "../threadRoutes"; import { stackedThreadToast, toastManager } from "./ui/toast"; -import { formatRelativeTimeLabel } from "../timestampFormat"; import { SettingsSidebarNav } from "./settings/SettingsSidebarNav"; import { Kbd } from "./ui/kbd"; -import { Button } from "./ui/button"; -import { - Dialog, - DialogDescription, - DialogFooter, - DialogHeader, - DialogPanel, - DialogPopup, - DialogTitle, -} from "./ui/dialog"; -import { Input } from "./ui/input"; -import { - Menu, - MenuGroup, - MenuPopup, - MenuRadioGroup, - MenuRadioItem, - MenuSeparator, - MenuTrigger, -} from "./ui/menu"; -import { - NumberField, - NumberFieldDecrement, - NumberFieldGroup, - NumberFieldIncrement, - NumberFieldInput, -} from "./ui/number-field"; -import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./ui/select"; import { Tooltip, TooltipPopup, TooltipTrigger } from "./ui/tooltip"; import { SidebarContent, @@ -146,9 +65,6 @@ import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, - SidebarMenuSub, - SidebarMenuSubButton, - SidebarMenuSubItem, SidebarSeparator, SidebarTrigger, useSidebar, @@ -156,50 +72,34 @@ import { import { useThreadSelectionStore } from "../threadSelectionStore"; import { useCommandPaletteStore } from "../commandPaletteStore"; import { - buildOnDeckSyncInput, - buildProjectHoverSummary, - excludeOnDeckThreads, + buildProjectChips, + canMarkThreadDone, + countThreadsNeedingUser, getSidebarThreadIdsToPrewarm, - getSidebarThreadWindow, - isOnDeckDismissible, + isNeedsUserStatus, + isThreadDone, resolveAdjacentThreadId, - isContextMenuPointerDown, - resolveProjectStatusIndicator, + resolveDoneTimestamp, resolveSidebarNewThreadSeedContext, resolveSidebarNewThreadEnvMode, - resolveThreadRowClassName, resolveThreadStatusPill, - orderItemsByPreferredIds, shouldClearThreadSelectionOnMouseDown, - sortProjectsForSidebar, + sortDoneThreads, + sortInboxThreads, useThreadJumpHintVisibility, - ThreadStatusPill, + type ThreadStatusPill, } from "./Sidebar.logic"; -import { OnDeckSection, type OnDeckEntry } from "./sidebar/OnDeckSection"; -import { DeckRail, type DeckRailProject } from "./sidebar/DeckRail"; -import { ProjectHoverCard } from "./sidebar/ProjectHoverCard"; +import { InboxDoneRow, InboxThreadRow } from "./sidebar/InboxRows"; +import { ProjectChipsRow } from "./sidebar/ProjectChipsRow"; import { SidebarHoverCardGroup } from "./sidebar/hoverCard"; -import { - DESTINATION_ICONS, - DestinationBand, - type SidebarDestination, -} from "./sidebar/DestinationBand"; -import { startNewGeneralChatThread, startNewThreadFromContext } from "../lib/chatThreadActions"; -import { sortThreads } from "../lib/threadSort"; +import { resolveThreadActionProjectRef, startNewGeneralChatThread } from "../lib/chatThreadActions"; import { SidebarUpdatePill } from "./sidebar/SidebarUpdatePill"; import { SidebarVersionTag } from "./sidebar/SidebarVersionTag"; -import { useCopyToClipboard } from "~/hooks/useCopyToClipboard"; -import { CommandDialogTrigger } from "./ui/command"; import { readEnvironmentApi } from "../environmentApi"; -import { useSettings, useUpdateSettings } from "~/hooks/useSettings"; +import { useSettings } from "~/hooks/useSettings"; import { useServerKeybindings } from "../rpc/serverState"; import { resolveElectronSidebarWordmarkLayout } from "../desktopChrome"; -import { - derivePhysicalProjectKey, - deriveProjectGroupingOverrideKey, - getProjectOrderKey, - selectProjectGroupingSettings, -} from "../logicalProject"; +import { derivePhysicalProjectKey, selectProjectGroupingSettings } from "../logicalProject"; import { useSavedEnvironmentRegistryStore, useSavedEnvironmentRuntimeStore, @@ -208,57 +108,31 @@ import type { SidebarThreadSummary } from "../types"; import { buildPhysicalToLogicalProjectKeyMap, buildSidebarProjectSnapshots, - type SidebarProjectGroupMember, type SidebarProjectSnapshot, } from "../sidebarProjectGrouping"; import { SidebarProviderUpdatePill } from "./sidebar/SidebarProviderUpdatePill"; -const SIDEBAR_SORT_LABELS: Record = { - updated_at: "Last user message", - created_at: "Created at", - manual: "Manual", -}; -const SIDEBAR_THREAD_SORT_LABELS: Record = { - updated_at: "Last user message", - created_at: "Created at", -}; -const SIDEBAR_LIST_ANIMATION_OPTIONS = { - duration: 180, - easing: "ease-out", -} as const; -const EMPTY_THREAD_JUMP_LABELS = new Map(); -const PROJECT_GROUPING_MODE_LABELS: Record = { - repository: "Group by repository", - repository_path: "Group by repository path", - separate: "Keep separate", -}; - -function clampSidebarThreadPreviewCount(value: number): SidebarThreadPreviewCount { - return Math.min( - MAX_SIDEBAR_THREAD_PREVIEW_COUNT, - Math.max(MIN_SIDEBAR_THREAD_PREVIEW_COUNT, value), - ) as SidebarThreadPreviewCount; -} - -function formatProjectMemberActionLabel( - member: SidebarProjectGroupMember, - groupedProjectCount: number, -): string { - if (groupedProjectCount <= 1) { - return member.name; - } - - return member.environmentLabel ? `${member.environmentLabel} — ${member.cwd}` : member.cwd; -} +import { useCopyToClipboard } from "~/hooks/useCopyToClipboard"; +import { CommandDialogTrigger } from "./ui/command"; -function projectGroupingModeDescription(mode: SidebarProjectGroupingMode): string { - switch (mode) { - case "repository": - return "Projects from the same repository share one sidebar row."; - case "repository_path": - return "Projects group only when both the repository and repo-relative path match."; - case "separate": - return "Every project path gets its own sidebar row."; - } +const EMPTY_THREAD_JUMP_LABELS = new Map(); +/** How many chips fit beside "All" and the add-project button. */ +const MAX_PROJECT_CHIPS = 3; +/** The Done tail opens short and reveals in bigger steps: it is history. */ +const DONE_PREVIEW_COUNT = 10; +const DONE_REVEAL_STEP = 20; +// The queued-turn grace window is measured in minutes, so a coarse clock is +// enough to keep "can this be marked done" honest without re-rendering often. +const INBOX_CLOCK_INTERVAL_MS = 30_000; + +interface InboxEntry { + thread: SidebarThreadSummary; + threadKey: string; + status: ThreadStatusPill | null; + projectKey: string; + projectLabel: string | null; + isDone: boolean; + canMarkDone: boolean; + doneAt: string | null; } function buildThreadJumpLabelMap(input: { @@ -291,845 +165,180 @@ function buildThreadJumpLabelMap(input: { return mapping.size > 0 ? mapping : EMPTY_THREAD_JUMP_LABELS; } -interface SidebarThreadRowProps { - thread: SidebarThreadSummary; - projectCwd: string | null; - orderedProjectThreadKeys: readonly string[]; - isActive: boolean; - jumpLabel: string | null; - appSettingsConfirmThreadArchive: boolean; - renamingThreadKey: string | null; - renamingTitle: string; - setRenamingTitle: (title: string) => void; - renamingInputRef: React.RefObject; - renamingCommittedRef: React.RefObject; - confirmingArchiveThreadKey: string | null; - setConfirmingArchiveThreadKey: React.Dispatch>; - confirmArchiveButtonRefs: React.RefObject>; - handleThreadClick: ( - event: React.MouseEvent, - threadRef: ScopedThreadRef, - orderedProjectThreadKeys: readonly string[], - ) => void; - navigateToThread: (threadRef: ScopedThreadRef) => void; - handleMultiSelectContextMenu: (position: { x: number; y: number }) => Promise; - handleThreadContextMenu: ( - threadRef: ScopedThreadRef, - position: { x: number; y: number }, - ) => Promise; - clearSelection: () => void; - commitRename: ( - threadRef: ScopedThreadRef, - newTitle: string, - originalTitle: string, - ) => Promise; - cancelRename: () => void; - attemptTogglePinThread: (threadRef: ScopedThreadRef, shouldPin: boolean) => Promise; - attemptArchiveThread: (threadRef: ScopedThreadRef) => Promise; - openPrLink: (event: React.MouseEvent, prUrl: string) => void; -} - -const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowProps) { - const { - orderedProjectThreadKeys, - isActive, - jumpLabel, - appSettingsConfirmThreadArchive, - renamingThreadKey, - renamingTitle, - setRenamingTitle, - renamingInputRef, - renamingCommittedRef, - confirmingArchiveThreadKey, - setConfirmingArchiveThreadKey, - confirmArchiveButtonRefs, - handleThreadClick, - navigateToThread, - handleMultiSelectContextMenu, - handleThreadContextMenu, - clearSelection, - commitRename, - cancelRename, - attemptTogglePinThread, - attemptArchiveThread, - openPrLink, - thread, - } = props; - const threadRef = scopeThreadRef(thread.environmentId, thread.id); - const threadKey = scopedThreadKey(threadRef); - const lastVisitedAt = useUiStateStore((state) => state.threadLastVisitedAtById[threadKey]); - const isSelected = useThreadSelectionStore((state) => state.selectedThreadKeys.has(threadKey)); - const runningTerminalIds = useTerminalStateStore( - (state) => - selectThreadTerminalState(state.terminalStateByThreadKey, threadRef).runningTerminalIds, - ); - const primaryEnvironmentId = usePrimaryEnvironmentId(); - const isRemoteThread = - primaryEnvironmentId !== null && thread.environmentId !== primaryEnvironmentId; - const remoteEnvLabel = useSavedEnvironmentRuntimeStore( - (s) => s.byId[thread.environmentId]?.descriptor?.label ?? null, - ); - const remoteEnvSavedLabel = useSavedEnvironmentRegistryStore( - (s) => s.byId[thread.environmentId]?.label ?? null, - ); - const threadEnvironmentLabel = isRemoteThread - ? (remoteEnvLabel ?? remoteEnvSavedLabel ?? "Remote") - : null; - // For grouped projects, the thread may belong to a different environment - // than the representative project. Look up the thread's own project cwd - // so git status (and thus PR detection) queries the correct path. - const threadProjectCwd = useStore( - useMemo( - () => (state: import("../store").AppState) => - selectProjectByRef(state, scopeProjectRef(thread.environmentId, thread.projectId))?.cwd ?? - null, - [thread.environmentId, thread.projectId], - ), - ); - const gitCwd = resolveThreadWorkingCwd({ - projectCwd: threadProjectCwd ?? props.projectCwd, - worktreePath: thread.worktreePath, - effectiveCwd: thread.effectiveCwd, - }); - const gitStatus = useGitStatus({ - environmentId: thread.environmentId, - cwd: thread.branch != null ? gitCwd : null, - }); - const isHighlighted = isActive || isSelected; - const isThreadRunning = - thread.session?.status === "running" && thread.session.activeTurnId != null; - const archiveUnavailableReason = - thread.session?.status === "connecting" || thread.session?.orchestrationStatus === "starting" - ? "connecting" - : isThreadRunning - ? "running" - : null; - const isThreadArchiveDisabled = archiveUnavailableReason !== null; - const threadStatus = resolveThreadStatusPill({ - thread: { - ...thread, - lastVisitedAt, - }, - }); - const pr = resolveThreadPr(thread.branch, gitStatus.data); - const prStatus = prStatusIndicator(pr, gitStatus.data?.sourceControlProvider); - const terminalStatus = terminalStatusFromRunningIds(runningTerminalIds); - const isConfirmingArchive = confirmingArchiveThreadKey === threadKey && !isThreadArchiveDisabled; - const isPinned = thread.pinnedAt !== null; - // On phone layouts the pin/archive cluster is always visible (absolutely - // positioned at the row's right edge), so the timestamp stays visible and - // shifts left of the cluster instead of hiding; the hover/focus fade-out - // only applies at sm+ where the cluster overlays the timestamp's spot. - const threadMetaClassName = isConfirmingArchive - ? "pointer-events-none opacity-0" - : "pointer-events-none transition-opacity duration-150 max-sm:mr-15 sm:group-hover/menu-sub-item:opacity-0 sm:group-focus-within/menu-sub-item:opacity-0"; - const clearConfirmingArchive = useCallback(() => { - setConfirmingArchiveThreadKey((current) => (current === threadKey ? null : current)); - }, [setConfirmingArchiveThreadKey, threadKey]); - const handleMouseLeave = useCallback(() => { - clearConfirmingArchive(); - }, [clearConfirmingArchive]); - const handleBlurCapture = useCallback( - (event: React.FocusEvent) => { - const currentTarget = event.currentTarget; - requestAnimationFrame(() => { - if (currentTarget.contains(document.activeElement)) { - return; - } - clearConfirmingArchive(); - }); - }, - [clearConfirmingArchive], - ); - const handleRowClick = useCallback( - (event: React.MouseEvent) => { - handleThreadClick(event, threadRef, orderedProjectThreadKeys); - }, - [handleThreadClick, orderedProjectThreadKeys, threadRef], - ); - const handleRowKeyDown = useCallback( - (event: React.KeyboardEvent) => { - if (event.key !== "Enter" && event.key !== " ") return; - event.preventDefault(); - navigateToThread(threadRef); - }, - [navigateToThread, threadRef], +/** Section voice for the inbox: mono, quiet, with the count on the right. */ +function InboxSectionHeader({ label, children }: { label: string; children?: React.ReactNode }) { + return ( +
+ + {label} + + + {children} + +
); - const handleRowContextMenu = useCallback( - (event: React.MouseEvent) => { - event.preventDefault(); - const hasSelection = useThreadSelectionStore.getState().hasSelection(); - if (hasSelection && isSelected) { - void handleMultiSelectContextMenu({ - x: event.clientX, - y: event.clientY, - }); - return; - } +} - if (hasSelection) { - clearSelection(); - } - void handleThreadContextMenu(threadRef, { - x: event.clientX, - y: event.clientY, - }); - }, - [clearSelection, handleMultiSelectContextMenu, handleThreadContextMenu, isSelected, threadRef], - ); - const handlePrClick = useCallback( - (event: React.MouseEvent) => { - if (!prStatus) return; - openPrLink(event, prStatus.url); - }, - [openPrLink, prStatus], - ); - const handleRenameInputRef = useCallback( - (element: HTMLInputElement | null) => { - if (element && renamingInputRef.current !== element) { - renamingInputRef.current = element; - element.focus(); - element.select(); - } - }, - [renamingInputRef], - ); - const handleRenameInputChange = useCallback( - (event: React.ChangeEvent) => { - setRenamingTitle(event.target.value); - }, - [setRenamingTitle], - ); - const handleRenameInputKeyDown = useCallback( - (event: React.KeyboardEvent) => { - event.stopPropagation(); - if (event.key === "Enter") { - event.preventDefault(); - renamingCommittedRef.current = true; - void commitRename(threadRef, renamingTitle, thread.title); - } else if (event.key === "Escape") { - event.preventDefault(); - renamingCommittedRef.current = true; - cancelRename(); - } - }, - [cancelRename, commitRename, renamingCommittedRef, renamingTitle, thread.title, threadRef], - ); - const handleRenameInputBlur = useCallback(() => { - if (!renamingCommittedRef.current) { - void commitRename(threadRef, renamingTitle, thread.title); - } - }, [commitRename, renamingCommittedRef, renamingTitle, thread.title, threadRef]); - const handleRenameInputClick = useCallback((event: React.MouseEvent) => { - event.stopPropagation(); - }, []); - const handleConfirmArchiveRef = useCallback( - (element: HTMLButtonElement | null) => { - if (element) { - confirmArchiveButtonRefs.current.set(threadKey, element); - } else { - confirmArchiveButtonRefs.current.delete(threadKey); - } - }, - [confirmArchiveButtonRefs, threadKey], - ); - const stopPropagationOnPointerDown = useCallback( - (event: React.PointerEvent) => { - event.stopPropagation(); - }, - [], - ); - const handleConfirmArchiveClick = useCallback( - (event: React.MouseEvent) => { - event.preventDefault(); - event.stopPropagation(); - clearConfirmingArchive(); - void attemptArchiveThread(threadRef); - }, - [attemptArchiveThread, clearConfirmingArchive, threadRef], - ); - const handleStartArchiveConfirmation = useCallback( - (event: React.MouseEvent) => { - event.preventDefault(); - event.stopPropagation(); - setConfirmingArchiveThreadKey(threadKey); - requestAnimationFrame(() => { - confirmArchiveButtonRefs.current.get(threadKey)?.focus(); - }); - }, - [confirmArchiveButtonRefs, setConfirmingArchiveThreadKey, threadKey], - ); - const handleArchiveImmediateClick = useCallback( - (event: React.MouseEvent) => { - event.preventDefault(); - event.stopPropagation(); - void attemptArchiveThread(threadRef); - }, - [attemptArchiveThread, threadRef], - ); - const handleTogglePinClick = useCallback( - (event: React.MouseEvent) => { - event.preventDefault(); - event.stopPropagation(); - if (event.detail > 0) { - event.currentTarget.blur(); - } - void attemptTogglePinThread(threadRef, !isPinned); - }, - [attemptTogglePinThread, isPinned, threadRef], +const SidebarChromeHeader = memo(function SidebarChromeHeader({ + isElectron, +}: { + isElectron: boolean; +}) { + const electronWordmarkLayout = resolveElectronSidebarWordmarkLayout( + typeof navigator === "undefined" ? "" : navigator.platform, ); - const rowButtonRender = useMemo(() =>
, []); - - return ( - - {/* The rail node lives in the row (a sibling of the button, which clips its - own overflow) so it can sit centered on the project line: every thread - contributes one node, turning the rail into a continuous threadline. */} - - -
- {prStatus && ( - - - - - } - /> - {prStatus.tooltip} - - )} - {isPinned && ( - - - - - } - /> - Pinned - - )} - {renamingThreadKey === threadKey ? ( - - ) : ( - - - {thread.title} - - } - /> - - {thread.title} - - - )} -
-
- {terminalStatus && ( - + + + - - - )} -
- {isConfirmingArchive ? ( - - ) : ( -
- - - {isPinned ? ( - - ) : ( - - )} - - } - /> - {isPinned ? "Unpin" : "Pin"} - - {!isThreadArchiveDisabled && appSettingsConfirmThreadArchive ? ( - - ) : !isThreadArchiveDisabled ? ( - - - - - } - /> - Archive - - ) : ( - - )} -
- )} - - - {isRemoteThread && ( - - - } - > - - - {threadEnvironmentLabel} - - )} - {jumpLabel ? ( - - {jumpLabel} - - ) : ( - - {formatRelativeTimeLabel( - thread.latestUserMessageAt ?? thread.updatedAt ?? thread.createdAt, - )} - - )} - +
- - + + +
); -}); -interface SidebarProjectThreadListProps { - projectKey: string; - hiddenThreadStatus: ThreadStatusPill | null; - orderedProjectThreadKeys: readonly string[]; - renderedThreads: readonly SidebarThreadSummary[]; - showEmptyThreadState: boolean; - shouldShowThreadPanel: boolean; - nextRevealCount: number; - searchHandoffThreadCount: number | null; - isThreadListRevealed: boolean; - onSearchAllThreads: () => void; - projectCwd: string; - activeRouteThreadKey: string | null; - threadJumpLabelByKey: ReadonlyMap; - appSettingsConfirmThreadArchive: boolean; - renamingThreadKey: string | null; - renamingTitle: string; - setRenamingTitle: (title: string) => void; - renamingInputRef: React.RefObject; - renamingCommittedRef: React.RefObject; - confirmingArchiveThreadKey: string | null; - setConfirmingArchiveThreadKey: React.Dispatch>; - confirmArchiveButtonRefs: React.RefObject>; - attachThreadListAutoAnimateRef: (node: HTMLElement | null) => void; - handleThreadClick: ( - event: React.MouseEvent, - threadRef: ScopedThreadRef, - orderedProjectThreadKeys: readonly string[], - ) => void; - navigateToThread: (threadRef: ScopedThreadRef) => void; - handleMultiSelectContextMenu: (position: { x: number; y: number }) => Promise; - handleThreadContextMenu: ( - threadRef: ScopedThreadRef, - position: { x: number; y: number }, - ) => Promise; - clearSelection: () => void; - commitRename: ( - threadRef: ScopedThreadRef, - newTitle: string, - originalTitle: string, - ) => Promise; - cancelRename: () => void; - attemptTogglePinThread: (threadRef: ScopedThreadRef, shouldPin: boolean) => Promise; - attemptArchiveThread: (threadRef: ScopedThreadRef) => Promise; - openPrLink: (event: React.MouseEvent, prUrl: string) => void; - expandThreadListForProject: (projectKey: string, additionalCount: number) => void; - collapseThreadListForProject: (projectKey: string) => void; -} + return isElectron ? ( + + {electronWordmarkLayout.spacerClassName ? ( + - - - - - { - if (!open) { - closeProjectRenameDialog(); - } - }} - > - - - Rename project - - {projectRenameTarget - ? `Update the title for ${projectRenameTarget.cwd}.` - : "Update the project title."} - - - -
- Project title - setProjectRenameTitle(event.target.value)} - onKeyDown={(event) => { - if (event.key === "Enter") { - event.preventDefault(); - void submitProjectRename(); - } - }} - /> -
- {projectRenameTarget?.environmentLabel ? ( -

- Environment: {projectRenameTarget.environmentLabel} -

- ) : null} - - - - - - - - - { - if (!open) { - closeProjectGroupingDialog(); - } - }} - > - - - Project grouping - - {projectGroupingTarget - ? `Choose how ${projectGroupingTarget.cwd} should be grouped in the sidebar.` - : "Choose how this project should be grouped in the sidebar."} - - - -
- Grouping rule - -
-

- {projectGroupingSelection === "inherit" - ? projectGroupingModeDescription(projectGroupingSettings.sidebarProjectGroupingMode) - : projectGroupingModeDescription(projectGroupingSelection)} -

- - - - - - - - - ); -}); - -const SidebarProjectListRow = memo(function SidebarProjectListRow(props: SidebarProjectItemProps) { - return ( - - - - ); -}); - -type SortableProjectHandleProps = Pick< - ReturnType, - "attributes" | "listeners" | "setActivatorNodeRef" ->; - -function ProjectSortMenu({ - projectSortOrder, - threadSortOrder, - projectGroupingMode, - threadPreviewCount, - onProjectSortOrderChange, - onThreadSortOrderChange, - onProjectGroupingModeChange, - onThreadPreviewCountChange, -}: { - projectSortOrder: SidebarProjectSortOrder; - threadSortOrder: SidebarThreadSortOrder; - projectGroupingMode: SidebarProjectGroupingMode; - threadPreviewCount: SidebarThreadPreviewCount; - onProjectSortOrderChange: (sortOrder: SidebarProjectSortOrder) => void; - onThreadSortOrderChange: (sortOrder: SidebarThreadSortOrder) => void; - onProjectGroupingModeChange: (mode: SidebarProjectGroupingMode) => void; - onThreadPreviewCountChange: (count: SidebarThreadPreviewCount) => void; -}) { - const handleThreadPreviewCountChange = useCallback( - (nextValue: number | null) => { - if (nextValue === null) { - return; - } - - const clampedValue = clampSidebarThreadPreviewCount(nextValue); - if (clampedValue !== threadPreviewCount) { - onThreadPreviewCountChange(clampedValue); - } - }, - [onThreadPreviewCountChange, threadPreviewCount], - ); - - return ( - - - - } - > - - - Sidebar options - - - -
- Sort projects -
- { - onProjectSortOrderChange(value as SidebarProjectSortOrder); - }} - > - {(Object.entries(SIDEBAR_SORT_LABELS) as Array<[SidebarProjectSortOrder, string]>).map( - ([value, label]) => ( - - {label} - - ), - )} - - - -
- Sort threads -
- { - onThreadSortOrderChange(value as SidebarThreadSortOrder); - }} - > - {( - Object.entries(SIDEBAR_THREAD_SORT_LABELS) as Array<[SidebarThreadSortOrder, string]> - ).map(([value, label]) => ( - - {label} - - ))} - - - -
- Visible threads -
-
- - - - { - event.stopPropagation(); - }} - /> - - - -
- - - -
- Group projects -
- { - if (value === "repository" || value === "repository_path" || value === "separate") { - onProjectGroupingModeChange(value); - } - }} - > - {( - Object.entries(PROJECT_GROUPING_MODE_LABELS) as Array< - [SidebarProjectGroupingMode, string] - > - ).map(([value, label]) => ( - - {label} - - ))} - - - - - ); -} - -function SortableProjectItem({ - projectId, - disabled = false, - children, -}: { - projectId: string; - disabled?: boolean; - children: (handleProps: SortableProjectHandleProps) => React.ReactNode; -}) { - const { - attributes, - listeners, - setActivatorNodeRef, - setNodeRef, - transform, - transition, - isDragging, - isOver, - } = useSortable({ id: projectId, disabled }); - return ( -
  • - {children({ attributes, listeners, setActivatorNodeRef })} -
    • - ); -} - -const SidebarChromeHeader = memo(function SidebarChromeHeader({ - isElectron, - collapsed = false, -}: { - isElectron: boolean; - collapsed?: boolean; -}) { - const electronWordmarkLayout = resolveElectronSidebarWordmarkLayout( - typeof navigator === "undefined" ? "" : navigator.platform, - ); - const wordmark = ( -
    - - - - -
    - ); - - // The rail is too narrow for the wordmark, and its top-left is already the - // collapse trigger's fixed home — so the collapsed header is a bare spacer - // that keeps the titlebar height (and, on Electron, the drag region). - if (collapsed) { - return ( - - ); - } - - return isElectron ? ( - - {electronWordmarkLayout.spacerClassName ? ( -