feat(app): add wide mode setting to use full window width for chat

packages/app/src/components/session/session-context-tab.tsx

@@ -1,17 +1,20 @@
-import { createMemo, createEffect, on, onCleanup, For, Show } from "solid-js"
+import { createMemo, createEffect, createSignal, on, onCleanup, For, Show } from "solid-js"
 import type { JSX } from "solid-js"
 import { useParams } from "@solidjs/router"
 import { useSync } from "@/context/sync"
+import { useSDK } from "@/context/sdk"
 import { useLayout } from "@/context/layout"
 import { checksum } from "@opencode-ai/util/encode"
 import { findLast } from "@opencode-ai/util/array"
 import { same } from "@/utils/same"
 import { Icon } from "@opencode-ai/ui/icon"
+import { Button } from "@opencode-ai/ui/button"
 import { Accordion } from "@opencode-ai/ui/accordion"
 import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
 import { Code } from "@opencode-ai/ui/code"
 import { Markdown } from "@opencode-ai/ui/markdown"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import { ProgressCircle } from "@opencode-ai/ui/progress-circle"
 import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
 import { useLanguage } from "@/context/language"
 import { getSessionContextMetrics } from "./session-context-metrics"
@@ -278,6 +281,66 @@ export function SessionContextTab() {
       onScroll={handleScroll}
     >
       <div class="px-6 pt-4 flex flex-col gap-10">
+        <Show when={ctx()}>
+          {(c) => {
+            const sdk = useSDK()
+            const [compacting, setCompacting] = createSignal(false)
+            const usage = () => c().usage ?? 0
+            const color = () => usage() > 80 ? "var(--syntax-error)" : usage() > 60 ? "var(--syntax-warning)" : "var(--syntax-success)"
+
+            const compact = async () => {
+              if (!params.id || compacting()) return
+              setCompacting(true)
+              try {
+                const last = visibleUserMessages().at(-1)
+                await sdk.client.session.summarize({
+                  sessionID: params.id,
+                  directory: sdk.directory,
+                  providerID: last?.model?.providerID,
+                  modelID: last?.model?.modelID,
+                })
+              } finally {
+                setCompacting(false)
+              }
+            }
+
+            return (
+              <div class="flex flex-col gap-3 p-4 rounded-lg bg-surface-raised-base border border-border-weak-base">
+                <div class="flex items-center justify-between">
+                  <div class="flex items-center gap-3">
+                    <ProgressCircle size={32} strokeWidth={3} percentage={usage()} />
+                    <div class="flex flex-col">
+                      <span class="text-14-medium text-text-strong">
+                        {formatter().number(c().total)} / {formatter().number(c().limit)}
+                      </span>
+                      <span class="text-12-regular text-text-weak">
+                        {usage()}% {language.t("context.usage.usage")}
+                      </span>
+                    </div>
+                  </div>
+                  <Button
+                    size="small"
+                    variant={usage() > 70 ? "primary" : "secondary"}
+                    disabled={compacting() || visibleUserMessages().length === 0}
+                    onClick={compact}
+                  >
+                    {compacting() ? language.t("command.session.compact") + "..." : language.t("command.session.compact")}
+                  </Button>
+                </div>
+                <div class="h-2 w-full rounded-full overflow-hidden" style={{ "background-color": "var(--surface-base)" }}>
+                  <div
+                    class="h-full rounded-full transition-all duration-300"
+                    style={{
+                      width: `${Math.min(usage(), 100)}%`,
+                      "background-color": color(),
+                    }}
+                  />
+                </div>
+              </div>
+            )
+          }}
+        </Show>
+
         <div class="grid grid-cols-1 @[32rem]:grid-cols-2 gap-4">
           <For each={stats}>
             {(stat) => <Stat label={language.t(stat.label as Parameters<typeof language.t>[0])} value={stat.value()} />}

packages/app/src/components/settings-general.tsx

@@ -267,6 +267,48 @@ export const SettingsGeneral: Component = () => {
             )}
           </Select>
         </SettingsRow>
+
+        <SettingsRow
+          title="Font Size"
+          description="Adjust the editor and terminal font size"
+        >
+          <div class="flex items-center gap-2">
+            <Button
+              size="small"
+              variant="secondary"
+              disabled={settings.appearance.fontSize() <= 10}
+              onClick={() => settings.appearance.setFontSize(Math.max(10, settings.appearance.fontSize() - 1))}
+            >
+              −
+            </Button>
+            <span
+              class="text-14-medium text-text-strong tabular-nums"
+              style={{ "min-width": "32px", "text-align": "center" }}
+            >
+              {settings.appearance.fontSize()}
+            </span>
+            <Button
+              size="small"
+              variant="secondary"
+              disabled={settings.appearance.fontSize() >= 24}
+              onClick={() => settings.appearance.setFontSize(Math.min(24, settings.appearance.fontSize() + 1))}
+            >
+              +
+            </Button>
+          </div>
+        </SettingsRow>
+
+        <SettingsRow
+          title="Wide Mode"
+          description="Use full window width for chat instead of centered narrow layout"
+        >
+          <div data-action="settings-wide-mode">
+            <Switch
+              checked={settings.appearance.wideMode()}
+              onChange={(checked) => settings.appearance.setWideMode(checked)}
+            />
+          </div>
+        </SettingsRow>
       </div>
     </div>
   )

packages/app/src/components/terminal.tsx

@@ -337,7 +337,7 @@ export const Terminal = (props: TerminalProps) => {
         cursorStyle: "bar",
         cols: restoreSize?.cols,
         rows: restoreSize?.rows,
-        fontSize: 14,
+        fontSize: settings.appearance.fontSize(),
         fontFamily: monoFontFamily(settings.appearance.font()),
         allowTransparency: false,
         convertEol: false,

packages/app/src/context/global-sdk.tsx

@@ -49,6 +49,7 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
     let queue: Queued[] = []
     let buffer: Queued[] = []
     const coalesced = new Map<string, number>()
+    const voided = new Set<number>()
     let timer: ReturnType<typeof setTimeout> | undefined
     let last = 0
 
@@ -61,6 +62,19 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
       }
     }
 
+    const voidStaleDeltasForPart = (messageID: string, partID: string) => {
+      for (let i = 0; i < queue.length; i++) {
+        const entry = queue[i]
+        if (
+          entry.payload.type === "message.part.delta" &&
+          (entry.payload.properties as { messageID: string; partID: string }).messageID === messageID &&
+          (entry.payload.properties as { messageID: string; partID: string }).partID === partID
+        ) {
+          voided.add(i)
+        }
+      }
+    }
+
     const flush = () => {
       if (timer) clearTimeout(timer)
       timer = undefined
@@ -75,11 +89,13 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
 
       last = Date.now()
       batch(() => {
-        for (const event of events) {
-          emitter.emit(event.directory, event.payload)
+        for (let i = 0; i < events.length; i++) {
+          if (voided.has(i)) continue
+          emitter.emit(events[i].directory, events[i].payload)
         }
       })
 
+      voided.clear()
       buffer.length = 0
     }
 
@@ -144,6 +160,10 @@ export const { use: useGlobalSDK, provider: GlobalSDKProvider } = createSimpleCo
               const i = coalesced.get(k)
               if (i !== undefined) {
                 queue[i] = { directory, payload }
+                if (payload.type === "message.part.updated") {
+                  const part = (payload.properties as { part: { messageID: string; id: string } }).part
+                  voidStaleDeltasForPart(part.messageID, part.id)
+                }
                 continue
               }
               coalesced.set(k, queue.length)

packages/app/src/context/settings.tsx

@@ -32,6 +32,7 @@ export interface Settings {
   appearance: {
     fontSize: number
     font: string
+    wideMode: boolean
   }
   keybinds: Record<string, string>
   permissions: {
@@ -55,6 +56,7 @@ const defaultSettings: Settings = {
   appearance: {
     fontSize: 14,
     font: "ibm-plex-mono",
+    wideMode: false,
   },
   keybinds: {},
   permissions: {
@@ -112,6 +114,14 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
       document.documentElement.style.setProperty("--font-family-mono", monoFontFamily(store.appearance?.font))
     })
 
+    createEffect(() => {
+      if (typeof document === "undefined") return
+      const size = store.appearance?.fontSize ?? defaultSettings.appearance.fontSize
+      document.documentElement.style.setProperty("--font-size-base", `${size}px`)
+      document.documentElement.style.setProperty("--font-size-small", `${size - 1}px`)
+      document.documentElement.style.setProperty("--font-size-large", `${size + 2}px`)
+    })
+
     return {
       ready,
       get current() {
@@ -163,6 +173,10 @@ export const { use: useSettings, provider: SettingsProvider } = createSimpleCont
         setFont(value: string) {
           setStore("appearance", "font", value)
         },
+        wideMode: withFallback(() => store.appearance?.wideMode, defaultSettings.appearance.wideMode),
+        setWideMode(value: boolean) {
+          setStore("appearance", "wideMode", value)
+        },
       },
       keybinds: {
         get: (action: string) => store.keybinds?.[action],

packages/app/src/pages/session.tsx

@@ -10,6 +10,7 @@ import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { Mark } from "@opencode-ai/ui/logo"
 
 import { useSync } from "@/context/sync"
+import { useSettings } from "@/context/settings"
 import { useLayout } from "@/context/layout"
 import { checksum, base64Encode } from "@opencode-ai/util/encode"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
@@ -107,7 +108,8 @@ export default function Page() {
     if (desktopReviewOpen()) return `${layout.session.width()}px`
     return `calc(100% - ${layout.fileTree.width()}px)`
   })
-  const centered = createMemo(() => isDesktop() && !desktopSidePanelOpen())
+  const settings = useSettings()
+  const centered = createMemo(() => isDesktop() && !desktopSidePanelOpen() && !settings.appearance.wideMode())
 
   function normalizeTab(tab: string) {
     if (!tab.startsWith("file://")) return tab

packages/opencode/src/session/processor.ts

@@ -354,7 +354,11 @@ export namespace SessionProcessor {
             })
             const error = MessageV2.fromError(e, { providerID: input.model.providerID })
             if (MessageV2.ContextOverflowError.isInstance(error)) {
-              // TODO: Handle context overflow error
+              log.info("context overflow detected, triggering compaction", {
+                sessionID: input.sessionID,
+              })
+              needsCompaction = true
+              break
             }
             const retry = SessionRetry.retryable(error)
             if (retry !== undefined) {

packages/opencode/src/session/prompt.ts

@@ -538,12 +538,13 @@ export namespace SessionPrompt {
         continue
       }
 
-      // context overflow, needs compaction
+      // proactive context management: prune + compact before overflow
       if (
         lastFinished &&
         lastFinished.summary !== true &&
         (await SessionCompaction.isOverflow({ tokens: lastFinished.tokens, model }))
       ) {
+        await SessionCompaction.prune({ sessionID })
         await SessionCompaction.create({
           sessionID,
           agent: lastUser.agent,
@@ -702,6 +703,7 @@ export namespace SessionPrompt {
 
       if (result === "stop") break
       if (result === "compact") {
+        await SessionCompaction.prune({ sessionID })
         await SessionCompaction.create({
           sessionID,
           agent: lastUser.agent,