feat(tui): add centered session width

Co-authored-by: Aiden Cline <rekram1-node@users.noreply.github.com>

packages/core/script/migration.ts

@@ -194,11 +194,10 @@ async function formatTypescript(input: string) {
 
 function renderRegistry(names: string[]) {
   return `import type { DatabaseMigration } from "./migration"
+${names.map((name, index) => `import m${index.toString().padStart(2, "0")} from "./migration/${name}"`).join("\n")}
 
-export const migrations: DatabaseMigration.Migration[] = (
-  await Promise.all([
-${names.map((name) => `    import("./migration/${name}"),`).join("\n")}
-  ])
-).map((module) => module.default)
+export const migrations = [
+${names.map((_, index) => `  m${index.toString().padStart(2, "0")},`).join("\n")}
+] satisfies DatabaseMigration.Migration[]
 `
 }

packages/core/src/config/plugin/source.ts

@@ -153,10 +153,12 @@ const scan = Effect.fn("ConfigPluginSource.scan")(function* (
   })
 })
 
+const sourceDirectories = ["plugin", "plugins"] as const
+
 function discoverDirectory(fs: FSUtil.Interface, directory: string) {
   return Effect.gen(function* () {
     const files = yield* fs
-      .scan("{plugin,plugins}/*.{ts,js}", {
+      .scan(`{${sourceDirectories.join(",")}}/*.{ts,js}`, {
         cwd: directory,
         absolute: true,
         include: "file",
@@ -168,8 +170,6 @@ function discoverDirectory(fs: FSUtil.Interface, directory: string) {
   })
 }
 
-const sourceDirectories = ["plugin", "plugins"] as const
-
 function isPluginSource(entries: readonly Entry[], file: string) {
   return entries.some(
     (entry) =>

packages/core/src/database/database.ts

@@ -42,10 +42,10 @@ const databaseLayer = Layer.effect(
 export function layer(options: Options = { path: ":memory:" }) {
   return Layer.unwrap(
     Effect.gen(function* () {
-      const global = yield* Global.Service
       const provide = (filename: string) => databaseLayer.pipe(Layer.provide(sqliteLayer({ filename })))
       const filename = options.path ?? ":memory:"
       if (filename === ":memory:" || isAbsolute(filename)) return provide(filename)
+      const global = yield* Global.Service
       return provide(join(global.data, filename))
     }),
   )

packages/core/src/database/migration.gen.ts

@@ -1,47 +1,86 @@
 import type { DatabaseMigration } from "./migration"
+import m00 from "./migration/20260127222353_familiar_lady_ursula"
+import m01 from "./migration/20260211171708_add_project_commands"
+import m02 from "./migration/20260213144116_wakeful_the_professor"
+import m03 from "./migration/20260225215848_workspace"
+import m04 from "./migration/20260227213759_add_session_workspace_id"
+import m05 from "./migration/20260228203230_blue_harpoon"
+import m06 from "./migration/20260303231226_add_workspace_fields"
+import m07 from "./migration/20260309230000_move_org_to_state"
+import m08 from "./migration/20260312043431_session_message_cursor"
+import m09 from "./migration/20260323234822_events"
+import m10 from "./migration/20260410174513_workspace-name"
+import m11 from "./migration/20260413175956_chief_energizer"
+import m12 from "./migration/20260423070820_add_icon_url_override"
+import m13 from "./migration/20260427172553_slow_nightmare"
+import m14 from "./migration/20260428004200_add_session_path"
+import m15 from "./migration/20260501142318_next_venus"
+import m16 from "./migration/20260504145000_add_sync_owner"
+import m17 from "./migration/20260507164347_add_workspace_time"
+import m18 from "./migration/20260510033149_session_usage"
+import m19 from "./migration/20260511000411_data_migration_state"
+import m20 from "./migration/20260511173437_session-metadata"
+import m21 from "./migration/20260601010001_normalize_storage_paths"
+import m22 from "./migration/20260601202201_amazing_prowler"
+import m23 from "./migration/20260602002951_lowly_union_jack"
+import m24 from "./migration/20260602182828_add_project_directories"
+import m25 from "./migration/20260603001617_session_message_projection_indexes"
+import m26 from "./migration/20260603040000_session_message_projection_order"
+import m27 from "./migration/20260603141458_session_input_inbox"
+import m28 from "./migration/20260603160727_jittery_ezekiel_stane"
+import m29 from "./migration/20260604172448_event_sourced_session_input"
+import m30 from "./migration/20260605003541_add_session_context_snapshot"
+import m31 from "./migration/20260605042240_add_context_epoch_agent"
+import m32 from "./migration/20260611035744_credential"
+import m33 from "./migration/20260611192811_lush_chimera"
+import m34 from "./migration/20260612174303_project_dir_strategy"
+import m35 from "./migration/20260622142730_simplify_session_context_epoch"
+import m36 from "./migration/20260622170816_reset_v2_session_state"
+import m37 from "./migration/20260622202450_simplify_session_input"
+import m38 from "./migration/20260804233008_loose_psylocke"
+import m39 from "./migration/20260805200742_import_legacy_credentials"
+import m40 from "./migration/20260808023530_workspace_domain"
 
-export const migrations: DatabaseMigration.Migration[] = (
-  await Promise.all([
-    import("./migration/20260127222353_familiar_lady_ursula"),
-    import("./migration/20260211171708_add_project_commands"),
-    import("./migration/20260213144116_wakeful_the_professor"),
-    import("./migration/20260225215848_workspace"),
-    import("./migration/20260227213759_add_session_workspace_id"),
-    import("./migration/20260228203230_blue_harpoon"),
-    import("./migration/20260303231226_add_workspace_fields"),
-    import("./migration/20260309230000_move_org_to_state"),
-    import("./migration/20260312043431_session_message_cursor"),
-    import("./migration/20260323234822_events"),
-    import("./migration/20260410174513_workspace-name"),
-    import("./migration/20260413175956_chief_energizer"),
-    import("./migration/20260423070820_add_icon_url_override"),
-    import("./migration/20260427172553_slow_nightmare"),
-    import("./migration/20260428004200_add_session_path"),
-    import("./migration/20260501142318_next_venus"),
-    import("./migration/20260504145000_add_sync_owner"),
-    import("./migration/20260507164347_add_workspace_time"),
-    import("./migration/20260510033149_session_usage"),
-    import("./migration/20260511000411_data_migration_state"),
-    import("./migration/20260511173437_session-metadata"),
-    import("./migration/20260601010001_normalize_storage_paths"),
-    import("./migration/20260601202201_amazing_prowler"),
-    import("./migration/20260602002951_lowly_union_jack"),
-    import("./migration/20260602182828_add_project_directories"),
-    import("./migration/20260603001617_session_message_projection_indexes"),
-    import("./migration/20260603040000_session_message_projection_order"),
-    import("./migration/20260603141458_session_input_inbox"),
-    import("./migration/20260603160727_jittery_ezekiel_stane"),
-    import("./migration/20260604172448_event_sourced_session_input"),
-    import("./migration/20260605003541_add_session_context_snapshot"),
-    import("./migration/20260605042240_add_context_epoch_agent"),
-    import("./migration/20260611035744_credential"),
-    import("./migration/20260611192811_lush_chimera"),
-    import("./migration/20260612174303_project_dir_strategy"),
-    import("./migration/20260622142730_simplify_session_context_epoch"),
-    import("./migration/20260622170816_reset_v2_session_state"),
-    import("./migration/20260622202450_simplify_session_input"),
-    import("./migration/20260804233008_loose_psylocke"),
-    import("./migration/20260805200742_import_legacy_credentials"),
-    import("./migration/20260808023530_workspace_domain"),
-  ])
-).map((module) => module.default)
+export const migrations = [
+  m00,
+  m01,
+  m02,
+  m03,
+  m04,
+  m05,
+  m06,
+  m07,
+  m08,
+  m09,
+  m10,
+  m11,
+  m12,
+  m13,
+  m14,
+  m15,
+  m16,
+  m17,
+  m18,
+  m19,
+  m20,
+  m21,
+  m22,
+  m23,
+  m24,
+  m25,
+  m26,
+  m27,
+  m28,
+  m29,
+  m30,
+  m31,
+  m32,
+  m33,
+  m34,
+  m35,
+  m36,
+  m37,
+  m38,
+  m39,
+  m40,
+] satisfies DatabaseMigration.Migration[]

packages/core/src/database/migration.ts

@@ -13,7 +13,6 @@ const lock = Semaphore.makeUnsafe(1)
 
 export type Migration = {
   id: string
-  aliases?: string[]
   foreignKeys?: boolean
   up: (tx: Transaction) => Effect.Effect<void, unknown, Global.Service>
 }
@@ -78,14 +77,6 @@ export function applyOnly(db: Database, input: Migration[]) {
 
     for (const migration of input) {
       if (completed.has(migration.id)) continue
-      const alias = migration.aliases?.find((id) => completed.has(id))
-      if (alias) {
-        yield* db.run(
-          sql`INSERT INTO ${sql.identifier("migration")} (id, time_completed) VALUES (${migration.id}, ${Date.now()})`,
-        )
-        yield* Effect.logInfo("database migration adopted", { migration: migration.id, alias })
-        continue
-      }
       const started = Date.now()
       yield* Effect.logInfo("database migration started", { migration: migration.id })
       const apply = db.transaction((tx) =>

packages/core/src/database/migration/20260804233008_loose_psylocke.ts

@@ -3,7 +3,6 @@ import type { DatabaseMigration } from "../migration"
 
 const migration: DatabaseMigration.Migration = {
   id: "20260804233008_loose_psylocke",
-  aliases: ["20260730195856_optional_session_title"],
   up(tx) {
     return Effect.gen(function* () {
       yield* tx.run(`

packages/core/src/models-dev.ts

@@ -1,4 +1,4 @@
-import { Context, Duration, Effect, Layer, Option, Schedule, Schema, Semaphore } from "effect"
+import { Cause, Context, Duration, Effect, Layer, Option, Schedule, Schema, Semaphore } from "effect"
 import { HttpClient, HttpClientRequest } from "effect/unstable/http"
 import { ModelsDev } from "@opencode-ai/schema/models-dev"
 import { Money } from "@opencode-ai/schema/money"
@@ -612,7 +612,16 @@ export const layer = (options?: Options) =>
       const fetchAndWrite = Effect.fn("ModelsDev.fetchAndWrite")(function* () {
         const text = yield* fetchApi()
         const catalog = (yield* Schema.decodeUnknownEffect(CatalogJson)(text)) as Record<string, SourceProvider>
-        yield* kv.set(key, { updatedAt: Date.now(), body: text })
+        // Best-effort: a cache-write failure must never kill catalog
+        // population. The payload has outgrown some KV backends' per-value
+        // limits (Durable Object SQLite caps values at 2 MB and api.json
+        // passed it in Aug 2026); a boot without a cache hit just refetches.
+        yield* kv.set(key, { updatedAt: Date.now(), body: text }).pipe(
+          Effect.catchCauseIf(
+            (cause) => !Cause.hasInterruptsOnly(cause),
+            (cause) => Effect.logWarning("Failed to cache models.dev catalog", { cause }),
+          ),
+        )
         return catalog
       })
 

packages/core/src/plugin/models-dev.ts

@@ -36,6 +36,7 @@ export const ModelsDevPlugin = define({
           draft.integrationID = Integration.ID.make(provider.info.id)
         })
         for (const model of provider.models) {
+          if (model.status === "deprecated") continue
           catalog.model.update(provider.info.id, model.id, (draft) => Object.assign(draft, model))
         }
       }

packages/core/src/session/runner/to-llm-message.ts

@@ -65,15 +65,15 @@ const userAttachmentContent = (files: readonly FileAttachment[]) => {
   )
   if (eligible.length < 2) return files.flatMap(attachmentContent)
 
-  const seen = new Map<string, string[]>()
+  const seen = new Map<string, Set<string>>()
   return files.flatMap((file) => {
     if (!imageMimes.has(file.mime) || file.source.type !== "inline" || !file.mention?.text)
       return attachmentContent(file)
     const metadata = JSON.stringify([file.mime, file.name ?? null, file.description ?? null, file.mention.text])
-    const matches = seen.get(metadata)
-    if (matches?.includes(file.data)) return []
-    if (matches) matches.push(file.data)
-    if (!matches) seen.set(metadata, [file.data])
+    const payloads = seen.get(metadata) ?? new Set<string>()
+    if (payloads.has(file.data)) return []
+    payloads.add(file.data)
+    seen.set(metadata, payloads)
     return attachmentContent(file)
   })
 }

packages/core/test/database-migration.test.ts

@@ -12,7 +12,6 @@ import { Database } from "@opencode-ai/core/database/database"
 import { tmpdir } from "./fixture/tmpdir"
 import type { SqlClient } from "effect/unstable/sql/SqlClient"
 import legacyCredentialsMigration from "@opencode-ai/core/database/migration/20260805200742_import_legacy_credentials"
-import consolidatedV2Migration from "@opencode-ai/core/database/migration/20260804233008_loose_psylocke"
 import { Global } from "@opencode-ai/util/global"
 
 const run = <A, E>(
@@ -115,28 +114,6 @@ describe("DatabaseMigration", () => {
     )
   })
 
-  test("adopts the consolidated V2 migration after the superseded chain", async () => {
-    await run(
-      Effect.gen(function* () {
-        const db = yield* makeDb
-        yield* db.run(sql`CREATE TABLE session (id text PRIMARY KEY)`)
-        yield* db.run(sql`CREATE TABLE event (id text PRIMARY KEY, created integer DEFAULT 0 NOT NULL)`)
-        yield* db.run(sql`CREATE TABLE migration (id text PRIMARY KEY, time_completed integer NOT NULL)`)
-        yield* db.run(sql`
-          INSERT INTO migration (id, time_completed)
-          VALUES ('20260730195856_optional_session_title', 1)
-        `)
-
-        yield* DatabaseMigration.applyOnly(db, [consolidatedV2Migration])
-
-        expect(yield* db.get(sql`SELECT id FROM migration WHERE id = ${consolidatedV2Migration.id}`)).toEqual({
-          id: consolidatedV2Migration.id,
-        })
-        expect(yield* db.get(sql`SELECT name FROM sqlite_master WHERE type = 'table' AND name = 'kv'`)).toBeUndefined()
-      }),
-    )
-  })
-
   test("imports legacy JSON credentials without changing the source file or existing credentials", async () => {
     await using tmp = await tmpdir()
     const source = path.join(tmp.path, "auth.json")

packages/core/test/models.test.ts

@@ -185,6 +185,15 @@ const buildLayer = (state: Ref.Ref<MockState>, cache: MockCache, options: Models
     ]),
   )
 
+// Mirrors production KV backends whose writes die as defects (e.g. Durable
+// Object SQLite rejecting values over its 2 MB cap with EffectDrizzleQueryError).
+const makeFailingWriteKV = (cache: MockCache) =>
+  Layer.mock(KV.Service, {
+    get: (key) => Effect.sync(() => cache.values.get(key)),
+    set: () => Effect.die(new Error('Failed query: insert into "kv"')),
+    remove: (key) => Effect.sync(() => cache.values.delete(key)).pipe(Effect.asVoid),
+  })
+
 const makeCache = (): MockCache => ({ values: new Map() })
 
 const writeCacheText = (cache: MockCache, text: string, updatedAt = Date.now()) =>
@@ -248,6 +257,25 @@ describe("ModelsDev Service", () => {
     }),
   )
 
+  it.live("get() still populates the catalog when the KV cache write fails", () =>
+    Effect.gen(function* () {
+      const cache = makeCache()
+      const state = yield* Ref.make({ ...initialState, body: JSON.stringify(fixture2) })
+      const layer = Layer.fresh(
+        AppNodeBuilder.build(ModelsDev.node, [
+          [ModelsDev.node, ModelsDev.configured({ fetch: true })],
+          [LayerNodePlatform.httpClient, Layer.succeed(HttpClient.HttpClient, makeMockClient(state))],
+          [KV.node, makeFailingWriteKV(cache)],
+        ]),
+      )
+      const result = yield* ModelsDev.Service.use((s) => s.get()).pipe(Effect.provide(layer))
+      expect(result).toEqual(fixture2Snapshot)
+      expect(cache.values.has(cacheKey)).toBe(false)
+      const final = yield* Ref.get(state)
+      expect(final.calls.length).toBe(1)
+    }),
+  )
+
   it.live("uses the default models URL when the configured URL is empty", () =>
     Effect.gen(function* () {
       const cache = makeCache()

packages/core/test/plugin/models-dev.test.ts

@@ -215,6 +215,66 @@ describe("ModelsDevPlugin", () => {
     }),
   )
 
+  it.effect("omits deprecated models from the catalog", () =>
+    Effect.gen(function* () {
+      const integrations = yield* Integration.Service
+      const catalog = yield* Catalog.Service
+      const providerID = Provider.ID.make("acme")
+      const activeID = Model.ID.make("current")
+      const deprecatedID = Model.ID.make("legacy")
+      const model = {
+        modelID: activeID,
+        providerID,
+        name: "Current",
+        capabilities: { tools: true, input: [], output: [] },
+        variants: [],
+        time: { released: Date.parse("2026-01-01") },
+        cost: [],
+        status: "active",
+        enabled: true,
+        limit: { context: 128_000, output: 32_000 },
+      } satisfies Omit<Model.Info, "id">
+      const snapshots = [
+        {
+          info: {
+            id: providerID,
+            name: "Acme",
+            package: Provider.aisdk("@ai-sdk/openai-compatible"),
+          },
+          environment: [],
+          models: [
+            { id: activeID, ...model },
+            {
+              id: deprecatedID,
+              ...model,
+              modelID: deprecatedID,
+              name: "Legacy",
+              status: "deprecated" as const,
+            },
+          ],
+        },
+      ] satisfies readonly ModelsDev.Snapshot[]
+
+      yield* ModelsDevPlugin.effect(
+        host({
+          catalog: catalogHost(catalog),
+          integration: integrationHost(integrations),
+        }),
+      ).pipe(
+        Effect.provideService(
+          ModelsDev.Service,
+          ModelsDev.Service.of({
+            get: () => Effect.succeed(snapshots),
+            refresh: () => Effect.void,
+          }),
+        ),
+      )
+
+      expect(yield* catalog.model.get(providerID, activeID)).toBeDefined()
+      expect(yield* catalog.model.get(providerID, deprecatedID)).toBeUndefined()
+    }),
+  )
+
   it.effect("registers key methods for providers with environment variables", () =>
     Effect.gen(function* () {
       const integrations = yield* Integration.Service

packages/merman/src/core/spatial.ts

@@ -77,20 +77,21 @@ export function spatialPathSpans(points: readonly DiagramPoint[]): SpatialSpan[]
     .sort(([left], [right]) => left - right)
     .flatMap(([y, xs]) => {
       const sorted = [...xs].sort((left, right) => left - right)
+      const [first, ...rest] = sorted
+      if (first === undefined) return []
       const spans: SpatialSpan[] = []
-      let start = sorted[0]
-      let end = start
-      if (start === undefined) return spans
-      for (const x of sorted.slice(1)) {
-        if (x === end! + 1) {
+      let start = first
+      let end = first
+      for (const x of rest) {
+        if (x === end + 1) {
           end = x
           continue
         }
-        spans.push(normalizedSpan(y, start, end!))
+        spans.push(normalizedSpan(y, start, end))
         start = x
         end = x
       }
-      spans.push(normalizedSpan(y, start, end!))
+      spans.push(normalizedSpan(y, start, end))
       return spans
     })
 }

packages/tui/src/component/dialog-config.tsx

@@ -60,6 +60,15 @@ export const settings: Setting[] = [
     labels: ["off", "on"],
     keywords: ["scroll bar"],
   },
+  {
+    title: "Max width",
+    category: "Session",
+    path: ["session", "max_width"],
+    default: "auto",
+    values: ["auto", 80, 100, 120],
+    labels: ["auto", "80 columns", "100 columns", "120 columns"],
+    keywords: ["transcript", "composer", "centered", "reading width"],
+  },
   {
     title: "Thinking",
     category: "Session",

packages/tui/src/component/session-tabs.tsx

@@ -62,13 +62,9 @@ function createMarquee(hovered: () => string | undefined, animations: () => bool
   const leading = createAnimatable({ opacity: 0 }, { enabled: animations, transition: tween({ duration: 0.25 }) })
 
   createEffect(() => {
-    if (!hovered()) {
-      setOffset(0)
-      leading.jump({ opacity: 0 })
-      return
-    }
     setOffset(0)
     leading.jump({ opacity: 0 })
+    if (!hovered()) return
     let interval: ReturnType<typeof setInterval> | undefined
     const delay = setTimeout(() => {
       setOffset(1)

packages/tui/src/config/index.tsx

@@ -125,6 +125,11 @@ export const Info = Schema.Struct({
         description: "Session sidebar visibility; 'auto' shows it when space permits",
       }),
       scrollbar: Schema.optional(Schema.Boolean).annotate({ description: "Show the session transcript scrollbar" }),
+      max_width: Schema.optional(
+        Schema.Union([Schema.Int.check(Schema.isGreaterThan(4)), Schema.Literal("auto")]),
+      ).annotate({
+        description: "Session transcript and composer max width, or 'auto' to use the available width",
+      }),
       thinking: Schema.optional(Schema.Literals(["show", "hide"])).annotate({
         description: "Show or hide model reasoning by default",
       }),

packages/tui/src/prompt/attachment.ts

@@ -25,14 +25,14 @@ function deduplicateByIdentity<T>(
   items: readonly T[],
   identity: (item: T) => { metadata: string; payload: string } | undefined,
 ) {
-  const seen = new Map<string, string[]>()
+  const seen = new Map<string, Set<string>>()
   return items.filter((item) => {
     const key = identity(item)
     if (!key) return true
-    const matches = seen.get(key.metadata)
-    if (matches?.includes(key.payload)) return false
-    if (matches) matches.push(key.payload)
-    if (!matches) seen.set(key.metadata, [key.payload])
+    const payloads = seen.get(key.metadata) ?? new Set<string>()
+    if (payloads.has(key.payload)) return false
+    payloads.add(key.payload)
+    seen.set(key.metadata, payloads)
     return true
   })
 }
@@ -42,7 +42,7 @@ export function deduplicatePromptImages(files: readonly PromptFile[] | undefined
   return deduplicateByIdentity(files, (file) =>
     file.uri.startsWith("data:image/") && file.mention?.text
       ? {
-          metadata: JSON.stringify([attachmentMetadata(file), file.mention.text]),
+          metadata: JSON.stringify([file.name ?? null, file.description ?? null, file.mention.text]),
           payload: file.uri,
         }
       : undefined,

packages/tui/src/routes/session/index.tsx

@@ -68,7 +68,7 @@ import { errorMessage } from "../../util/error"
 import { useToast } from "../../ui/toast"
 import stripAnsi from "strip-ansi"
 import { usePromptRef } from "../../context/prompt"
-import { sessionTabsFitVertically, SESSION_SIDEBAR_WIDTH } from "../../ui/layout"
+import { sessionContentWidth, sessionTabsFitVertically, SESSION_SIDEBAR_WIDTH } from "../../ui/layout"
 import { projectedPromptInput } from "../../prompt/codec"
 import { deduplicateVisibleImages } from "../../prompt/attachment"
 import { useEpilogue } from "../../context/epilogue"
@@ -225,6 +225,7 @@ export function Session() {
   const thinkingMode = createMemo<ThinkingMode>(() => config.session?.thinking ?? "hide")
   const showThinking = createMemo(() => true)
   const showScrollbar = createMemo(() => config.session?.scrollbar ?? false)
+  const maxWidth = createMemo(() => config.session?.max_width ?? "auto")
   const markdownMode = createMemo(() => config.session?.markdown ?? "rendered")
   const diffWrapMode = createMemo(() => config.diffs?.wrap ?? "word")
   const groupExploration = createMemo(() => config.session?.grouping !== "none")
@@ -243,7 +244,7 @@ export function Session() {
     if (sidebar() === "auto" && wide()) return true
     return false
   })
-  const contentWidth = createMemo(() => availableWidth() - (sidebarVisible() ? 42 : 0) - 4)
+  const contentWidth = createMemo(() => sessionContentWidth(availableWidth(), sidebarVisible(), maxWidth()))
   const models = createMemo(() => data.location.model.list(location()) ?? [])
 
   const scrollAcceleration = createMemo(() => getScrollAcceleration(config))
@@ -1037,103 +1038,107 @@ export function Session() {
       }}
     >
       <box flexDirection="row" flexGrow={1} minHeight={0}>
-        <box
-          flexGrow={1}
-          minHeight={0}
-          paddingBottom={1}
-          paddingLeft={dimensions().width < 44 ? 1 : 2}
-          paddingRight={dimensions().width < 44 ? 1 : 2}
-          gap={1}
-        >
-          <Show when={session()}>
-            <scrollbox
-              ref={(r) => (scroll = r)}
-              viewportOptions={{
-                paddingRight: showScrollbar() ? 1 : 0,
-              }}
-              verticalScrollbarOptions={{
-                paddingLeft: 1,
-                visible: showScrollbar(),
-                trackOptions: {
-                  backgroundColor: theme.raise(theme.background.surface.offset),
-                  foregroundColor: theme.border.default,
-                },
-              }}
-              stickyScroll={!navigationMessage()}
-              stickyStart="bottom"
-              flexGrow={1}
-              scrollAcceleration={scrollAcceleration()}
-            >
-              <For each={visibleRows()}>
-                {(row, index) => (
-                  <SessionRowView
-                    row={row}
-                    message={(messageID) => data.session.message.get(route.sessionID, messageID)}
-                    boundaryID={boundaries()[index() + hidden()]}
+        <box flexGrow={1} minHeight={0} alignItems="center">
+          <box
+            width="100%"
+            maxWidth={maxWidth() === "auto" ? undefined : maxWidth()}
+            flexGrow={1}
+            minHeight={0}
+            paddingBottom={1}
+            paddingLeft={dimensions().width < 44 ? 1 : 2}
+            paddingRight={dimensions().width < 44 ? 1 : 2}
+            gap={1}
+          >
+            <Show when={session()}>
+              <scrollbox
+                ref={(r) => (scroll = r)}
+                viewportOptions={{
+                  paddingRight: showScrollbar() ? 1 : 0,
+                }}
+                verticalScrollbarOptions={{
+                  paddingLeft: 1,
+                  visible: showScrollbar(),
+                  trackOptions: {
+                    backgroundColor: theme.raise(theme.background.surface.offset),
+                    foregroundColor: theme.border.default,
+                  },
+                }}
+                stickyScroll={!navigationMessage()}
+                stickyStart="bottom"
+                flexGrow={1}
+                scrollAcceleration={scrollAcceleration()}
+              >
+                <For each={visibleRows()}>
+                  {(row, index) => (
+                    <SessionRowView
+                      row={row}
+                      message={(messageID) => data.session.message.get(route.sessionID, messageID)}
+                      boundaryID={boundaries()[index() + hidden()]}
+                    />
+                  )}
+                </For>
+                <BackgroundToolHint messages={messages()} />
+                <Show when={session()?.revert?.messageID}>
+                  <RevertMessage
+                    count={messagesFromRevert().filter((message) => message.type === "user").length}
+                    files={session()!.revert!.files ?? []}
                   />
-                )}
-              </For>
-              <BackgroundToolHint messages={messages()} />
-              <Show when={session()?.revert?.messageID}>
-                <RevertMessage
-                  count={messagesFromRevert().filter((message) => message.type === "user").length}
-                  files={session()!.revert!.files ?? []}
+                </Show>
+                <Show when={navigationSlack()}>
+                  {(height) => <box id={NAVIGATION_SLACK_ID} height={height()} flexShrink={0} />}
+                </Show>
+              </scrollbox>
+              <box flexShrink={0}>
+                <Show when={!composer.open && !disabled() && queuedPrompts().length > 0}>
+                  <QueuedPromptDock prompts={queuedPrompts()} onOpen={openQueuedPrompts} />
+                </Show>
+                <PluginSlot name="session.composer.top" input={{ sessionID: route.sessionID }} mode="all" />
+                <Composer
+                  sessionID={route.sessionID}
+                  open={composer.open || (!!session()?.parentID && forms().length === 0)}
+                  defaultTab={composer.tab ?? (session()?.parentID ? "subagents" : undefined)}
+                  onClose={() => setComposer("open", false)}
                 />
-              </Show>
-              <Show when={navigationSlack()}>
-                {(height) => <box id={NAVIGATION_SLACK_ID} height={height()} flexShrink={0} />}
-              </Show>
-            </scrollbox>
-            <box flexShrink={0}>
-              <Show when={!composer.open && !disabled() && queuedPrompts().length > 0}>
-                <QueuedPromptDock prompts={queuedPrompts()} onOpen={openQueuedPrompts} />
-              </Show>
-              <PluginSlot name="session.composer.top" input={{ sessionID: route.sessionID }} mode="all" />
-              <Composer
-                sessionID={route.sessionID}
-                open={composer.open || (!!session()?.parentID && forms().length === 0)}
-                defaultTab={composer.tab ?? (session()?.parentID ? "subagents" : undefined)}
-                onClose={() => setComposer("open", false)}
-              />
-              <Switch>
-                <Match when={composer.open || (!!session()?.parentID && forms().length === 0)}>{null}</Match>
-                <Match when={promptedPermissions().length > 0}>
-                  <Show when={promptedPermissions()[0]?.id} keyed>
-                    {(_) => {
-                      const request = promptedPermissions()[0]
-                      return request ? (
-                        <PermissionPrompt request={request} directory={session()?.location.directory} />
-                      ) : null
-                    }}
-                  </Show>
-                </Match>
-                <Match when={forms().length > 0}>
-                  <Show when={forms()[0]?.id} keyed>
-                    {(_) => {
-                      const form = forms()[0]
-                      return form ? <FormPrompt form={form} /> : null
-                    }}
-                  </Show>
-                </Match>
-                <Match when={!disabled()}>
-                  <Prompt
-                    visible={true}
-                    ref={bind}
-                    disabled={false}
-                    onSubmit={() => {
-                      toBottom()
-                    }}
-                    onEmptySubmit={async () => {
-                      const next = queuedPrompts()[0]
-                      if (!next) return false
-                      return mutatePending("steer", next.id)
-                    }}
-                    sessionID={route.sessionID}
-                  />
-                </Match>
-              </Switch>
-            </box>
-          </Show>
+                <Switch>
+                  <Match when={composer.open || (!!session()?.parentID && forms().length === 0)}>{null}</Match>
+                  <Match when={promptedPermissions().length > 0}>
+                    <Show when={promptedPermissions()[0]?.id} keyed>
+                      {(_) => {
+                        const request = promptedPermissions()[0]
+                        return request ? (
+                          <PermissionPrompt request={request} directory={session()?.location.directory} />
+                        ) : null
+                      }}
+                    </Show>
+                  </Match>
+                  <Match when={forms().length > 0}>
+                    <Show when={forms()[0]?.id} keyed>
+                      {(_) => {
+                        const form = forms()[0]
+                        return form ? <FormPrompt form={form} /> : null
+                      }}
+                    </Show>
+                  </Match>
+                  <Match when={!disabled()}>
+                    <Prompt
+                      visible={true}
+                      ref={bind}
+                      disabled={false}
+                      onSubmit={() => {
+                        toBottom()
+                      }}
+                      onEmptySubmit={async () => {
+                        const next = queuedPrompts()[0]
+                        if (!next) return false
+                        return mutatePending("steer", next.id)
+                      }}
+                      sessionID={route.sessionID}
+                    />
+                  </Match>
+                </Switch>
+              </box>
+            </Show>
+          </box>
         </box>
         <Show when={sidebarVisible()}>
           <Switch>

packages/tui/src/ui/layout.ts

@@ -1,6 +1,13 @@
 export const SESSION_SIDEBAR_WIDTH = 42
 const SESSION_CONTENT_MIN_WIDTH = 44
+const SESSION_CONTENT_PADDING = 4
 
 export function sessionTabsFitVertically(total: number) {
   return total >= SESSION_SIDEBAR_WIDTH + SESSION_CONTENT_MIN_WIDTH
 }
+
+export function sessionContentWidth(total: number, sidebar: boolean, maxWidth: number | "auto" = "auto") {
+  const available = total - (sidebar ? SESSION_SIDEBAR_WIDTH : 0) - SESSION_CONTENT_PADDING
+  if (maxWidth === "auto") return available
+  return Math.max(1, Math.min(available, maxWidth - SESSION_CONTENT_PADDING))
+}

packages/tui/test/config-v2.test.tsx

@@ -27,6 +27,15 @@ test("validates the session tabs setting", () => {
   expect(decode({ session: { image_preview: true } })).toEqual({ session: { image_preview: true } })
 })
 
+test("validates the session max width setting", () => {
+  const decode = Schema.decodeUnknownSync(Info)
+
+  expect(decode({ session: { max_width: "auto" } })).toEqual({ session: { max_width: "auto" } })
+  expect(decode({ session: { max_width: 100 } })).toEqual({ session: { max_width: 100 } })
+  expect(() => decode({ session: { max_width: 4 } })).toThrow()
+  expect(() => decode({ session: { max_width: 100.5 } })).toThrow()
+})
+
 test("resolves nested config and keybind defaults", () => {
   const config = resolve(
     {
@@ -53,6 +62,13 @@ test("shows resolved tab defaults in settings", () => {
   expect(settings.find((setting) => setting.path.join(".") === "tabs.layout")?.default).toBe("horizontal")
 })
 
+test("shows session max width presets in settings", () => {
+  const setting = settings.find((setting) => setting.path.join(".") === "session.max_width")
+
+  expect(setting?.default).toBe("auto")
+  expect(setting?.values).toEqual(["auto", 80, 100, 120])
+})
+
 test("provides config and its host interface", async () => {
   const config = resolve({}, { terminalSuspend: true })
   let current = {}

packages/tui/test/ui/layout.test.ts

@@ -1,8 +1,18 @@
 import { expect, test } from "bun:test"
-import { sessionTabsFitVertically, SESSION_SIDEBAR_WIDTH } from "../../src/ui/layout"
+import { sessionContentWidth, sessionTabsFitVertically, SESSION_SIDEBAR_WIDTH } from "../../src/ui/layout"
 
 test("vertical tabs match the session sidebar and preserve compact content width", () => {
   expect(SESSION_SIDEBAR_WIDTH).toBe(42)
   expect(sessionTabsFitVertically(86)).toBe(true)
   expect(sessionTabsFitVertically(85)).toBe(false)
 })
+
+test("session content uses available width by default", () => {
+  expect(sessionContentWidth(160, false)).toBe(156)
+  expect(sessionContentWidth(160, true)).toBe(114)
+})
+
+test("session content caps wide sessions and preserves narrow sessions", () => {
+  expect(sessionContentWidth(160, false, 100)).toBe(96)
+  expect(sessionContentWidth(80, false, 100)).toBe(76)
+})