diff --git a/packages/app/src/settings/model.tsx b/packages/app/src/settings/model.tsx
index 9058c8774f8..0a7888ce553 100644
--- a/packages/app/src/settings/model.tsx
+++ b/packages/app/src/settings/model.tsx
@@ -132,13 +132,8 @@ const appearanceSchema = Persistence.struct({
mono: Schema.String,
sans: Schema.String,
terminal: Schema.String,
- // "inbox" was an experimental vertical layout; its sessions now live on Home, so it reads back as vertical tabs.
- tabLayout: Schema.Literals(["horizontal", "vertical", "inbox"]).pipe(
- Schema.decodeTo(Schema.Literals(["horizontal", "vertical"]), {
- decode: SchemaGetter.transform((value) => (value === "inbox" ? "vertical" : value)),
- encode: SchemaGetter.transform((value) => value),
- }),
- ),
+ // "inbox" is experimental: the vertical layout with a server-wide session inbox in place of tabs.
+ tabLayout: Schema.Literals(["horizontal", "vertical", "inbox"]),
sidebarOpen: Persistence.optional(Schema.Boolean),
reduceMotion: Schema.Literals(["system", "on", "off"]),
})
diff --git a/packages/app/src/shell/titlebar/inbox-model.ts b/packages/app/src/shell/titlebar/inbox-model.ts
index e75f964a358..7b964c70a18 100644
--- a/packages/app/src/shell/titlebar/inbox-model.ts
+++ b/packages/app/src/shell/titlebar/inbox-model.ts
@@ -11,7 +11,8 @@ import { useTabs } from "@/shell/tabs/tabs"
import { sessionBusy, sessionRequests } from "@/shell/layout/project-avatar-state"
import { pathKey } from "@/workspaces/path-key"
import { parseHomeSessionIndex } from "@/home/sessions/index"
-import { sessionFormRequest, sessionPermissionRequest } from "@/session/requests/session-request-tree"
+import { sessionFormRequest, sessionPermissionRequest, sessionTreeIDs } from "@/session/requests/session-request-tree"
+import { notifySessionTabsRemoved } from "./session-events"
import { errorMessage } from "@/shell/layout/helpers"
import { showToast } from "@/shell/notifications/toast"
@@ -24,6 +25,9 @@ const BRANCH_BATCH = 4
// Root sessions fetched per server.
const INDEX_LIMIT = 200
+// The index excludes archived sessions, so a view that lists them loads the newest archived ones separately.
+const ARCHIVED_LIMIT = 50
+
export type InboxStatus = "approval" | "input" | "working" | "failed" | "done" | "ready"
export type InboxEntry = {
@@ -37,9 +41,10 @@ export type InboxEntry = {
/**
* Root sessions across every visible server with the state a person acts on: waiting for an answer, working,
- * finished and unread, or read. Home lists them.
+ * finished and unread, or read. Home and the experimental Inbox sidebar list them; only the sidebar loads archived
+ * sessions.
*/
-export function createSessionInbox() {
+export function createSessionInbox(options: { archived?: boolean } = {}) {
const global = useGlobal()
const servers = useServers()
const settings = useSettings()
@@ -59,6 +64,9 @@ export function createSessionInbox() {
queryClient.setQueryData
(["home-sessions", conn], (current) =>
current?.filter((session) => session.id !== sessionID),
)
+ queryClient.setQueryData(["inbox-archived-sessions", conn], (current) =>
+ current?.filter((session) => session.id !== sessionID),
+ )
}
createEffect(() => {
@@ -85,6 +93,22 @@ export function createSessionInbox() {
})),
}))
+ const archivedQueries = useQueries(() => ({
+ queries: connections().map((item) => ({
+ queryKey: ["inbox-archived-sessions", item.conn] as const,
+ enabled: !!options.archived && item.ctx.sdk.connection.status() === "connected",
+ queryFn: ({ signal }: { signal: AbortSignal }) =>
+ item.ctx.sdk.api.session
+ .list({ limit: ARCHIVED_LIMIT, order: "desc", parentID: null, archived: true }, { signal })
+ .then((response) => response.data),
+ retry: false,
+ staleTime: 30_000,
+ refetchOnMount: true,
+ refetchOnReconnect: true,
+ select: selectSessions,
+ })),
+ }))
+
const entries = createMemo(() =>
connections()
.flatMap((item, index) => {
@@ -116,9 +140,11 @@ export function createSessionInbox() {
// Locally known sessions come last so live archive and unarchive events win over cached indexes.
const sessions = new Map(
- [...(queries[index]?.data?.() ?? []), ...data.session.list()].map(
- (session) => [session.id, session] as const,
- ),
+ [
+ ...(queries[index]?.data?.() ?? []),
+ ...(options.archived ? (archivedQueries[index]?.data?.() ?? []) : []),
+ ...data.session.list(),
+ ].map((session) => [session.id, session] as const),
)
return data.session.apply([...sessions.values()].filter((session) => !session.parentID)).map(
@@ -232,6 +258,17 @@ export function createSessionInbox() {
description: errorMessage(cause, language.t("common.requestFailed")),
})
+ // Move the session between the cached indexes so it changes section before either refetches.
+ const move = (entry: InboxEntry, archivedAt: number | undefined) => {
+ const session = { ...entry.session, time: { ...entry.session.time, archived: archivedAt } }
+
+ forget(entry.conn, entry.session.id)
+ queryClient.setQueryData(
+ [archivedAt === undefined ? "home-sessions" : "inbox-archived-sessions", entry.conn],
+ (current) => current && [session, ...current],
+ )
+ }
+
// The pending request anywhere in the session's family, for views that answer it inline.
const family = (entry: InboxEntry) =>
[...new Set([entry.session.id, ...entry.ctx.data.session.family(entry.session.id)])].flatMap((id) => {
@@ -271,6 +308,43 @@ export function createSessionInbox() {
if (!entry.ctx.data.session.get(entry.session.id)) entry.ctx.data.session.remember(entry.session)
entry.ctx.notification.session.markViewed(entry.session.id)
},
+ archive: (entry: InboxEntry) =>
+ entry.ctx.sdk.api.session
+ .update({ sessionID: entry.session.id, archived: true })
+ .then(() => {
+ move(entry, Date.now())
+ notifySessionTabsRemoved({
+ server: entry.server,
+ directory: entry.session.location.directory,
+ sessionIDs: [entry.session.id],
+ })
+ })
+ .catch(requestFailed),
+ unarchive: (entry: InboxEntry) =>
+ entry.ctx.sdk.api.session
+ .update({ sessionID: entry.session.id, archived: false })
+ .then(() => move(entry, undefined))
+ .catch(requestFailed),
+ remove: (entry: InboxEntry) => {
+ const ids = sessionTreeIDs(entry.ctx.data.session.list(), entry.session.id)
+
+ return entry.ctx.data.session
+ .remove(entry.session.id)
+ .then(() => {
+ forget(entry.conn, entry.session.id)
+ notifySessionTabsRemoved({
+ server: entry.server,
+ directory: entry.session.location.directory,
+ sessionIDs: ids,
+ })
+ })
+ .catch((cause) =>
+ showToast({
+ title: language.t("session.delete.failed.title"),
+ description: errorMessage(cause, language.t("session.delete.failed.title")),
+ }),
+ )
+ },
}
}
diff --git a/packages/app/src/shell/titlebar/inbox.tsx b/packages/app/src/shell/titlebar/inbox.tsx
new file mode 100644
index 00000000000..7c97331778f
--- /dev/null
+++ b/packages/app/src/shell/titlebar/inbox.tsx
@@ -0,0 +1,381 @@
+import { Schema } from "effect"
+import { Persistence } from "@/runtime/persistence/schema"
+import { createEffect, createMemo, For, Show, type JSX } from "solid-js"
+import { Button } from "@opencode/ui/button"
+import { useDialog } from "@opencode/ui/context/dialog"
+import { Dialog, DialogFooter, DialogHeader, DialogTitleGroup } from "@opencode/ui/dialog"
+import { Icon } from "@opencode/ui/icon"
+import { Menu } from "@opencode/ui/menu"
+import { TextShimmer } from "@opencode/ui/text-shimmer"
+import { Tooltip } from "@opencode/ui/tooltip"
+import { displayName } from "@opencode/ui/project-avatar"
+import { useServers } from "@/runtime/server/registry"
+import { useLanguage } from "@/runtime/i18n/language"
+import { Persist, persisted } from "@/runtime/persistence/storage"
+import { SessionTabAvatarView } from "@/shell/layout/session-tab-avatar"
+import { sessionTabTitle } from "./tab-title"
+import { sessionTitle } from "@/session/title"
+import { createSessionInbox, inboxArchived, inboxBusy, type InboxEntry, type InboxStatus } from "./inbox-model"
+
+// `since` is when the inbox was first used; Recent only lists sessions that finished a run after it.
+const InboxState = Persistence.struct({
+ workingExpanded: Schema.Boolean,
+ since: Persistence.optional(Schema.Number),
+})
+
+/** The experimental Inbox interface mode: the session inbox in place of vertical tabs. */
+export function SidebarInbox() {
+ const language = useLanguage()
+ const dialog = useDialog()
+ const inbox = createSessionInbox({ archived: true })
+
+ const [state, setState, , ready] = persisted(Persist.global("sidebar.inbox"), InboxState, {
+ workingExpanded: true,
+ })
+
+ const sections = createMemo(() => {
+ const list = inbox.entries()
+ // The most recently finished session comes first.
+ const finished = list
+ .filter((entry) => {
+ const since = state.since
+
+ return !inboxBusy(entry.status) && since !== undefined && (entry.session.time.idle ?? 0) >= since
+ })
+ .toSorted((a, b) => (b.session.time.idle ?? 0) - (a.session.time.idle ?? 0))
+
+ return {
+ needs: list.filter((entry) => entry.status === "approval" || entry.status === "input"),
+ inbox: finished.filter((entry) => !inboxArchived(entry)),
+ archived: finished.filter(inboxArchived),
+ working: list.filter((entry) => entry.status === "working"),
+ }
+ })
+
+ // The client only refreshes `time.idle` for loaded sessions when a run ends, so load every working one.
+ createEffect(() => {
+ sections().working.forEach((entry) => {
+ if (entry.ctx.data.session.get(entry.session.id)) return
+ void entry.ctx.data.session.sync(entry.session.id).catch(() => undefined)
+ })
+ })
+
+ // The inbox starts empty and fills as sessions finish runs.
+ createEffect(() => {
+ if (ready() && state.since === undefined) setState("since", Date.now())
+ })
+
+ // Git info is not stored on the session, so eagerly load it for every shown row.
+ createEffect(() => {
+ const visible = sections()
+
+ inbox.loadBranches([...visible.needs, ...visible.working, ...visible.inbox, ...visible.archived])
+ })
+
+ function DeleteDialog(props: { entry: InboxEntry }) {
+ const confirm = async () => {
+ await inbox.remove(props.entry)
+ dialog.close()
+ }
+ return (
+
+
+
+
+ dialog.close()}>
+ {language.t("common.cancel")}
+
+
+ {language.t("session.delete.button")}
+
+
+
+ )
+ }
+
+ const rows = (list: InboxEntry[]) => (
+ entry.key)}>
+ {(key) => (
+
+ {(entry) => (
+ inbox.open(entry())}
+ onArchive={() => void inbox.archive(entry())}
+ onUnarchive={() => void inbox.unarchive(entry())}
+ onDelete={() => dialog.show(() =>
+ )}
+
+ )
+
+ return (
+
+
+
0}>
+
+
+
+
0}
+ fallback={
+
+
+ {language.t("sidebar.inbox.empty")}
+
+
+ }
+ >
+ 0}>
+
+ {rows(sections().inbox)}
+
+
0}>
+
+
+
+
+ {/* Working sessions sit in a shelf pinned below the scrolling list. */}
+
0}>
+
+
setState("workingExpanded", !state.workingExpanded)}
+ />
+
+ {/* A collapsed shelf still shows the session that is open. */}
+ {rows(sections().working.filter((entry) => state.workingExpanded || inbox.selected(entry)))}
+
+
+
{props.label}
+
+ {props.count}
+
+
+
+
+ )
+
+ return (
+
+ {content()}
+