From 7f795727470a43249951dc8242de23da6830724d Mon Sep 17 00:00:00 2001
From: CreatorGhost <cybercreed010@gmail.com>
Date: Sat, 11 Jul 2026 23:17:26 +0530
Subject: [PATCH 1/2] feat(tui): make carbon the default decode UI

- Add carbon theme (true black + programmer green) and set as default
- Ignore inherited opencode config themes; /theme choice persists under decode_theme
- New DECODE block wordmark, single source for home and exit epilogue
- Session top strip with brand, title, and token budget
- Prompt: green caret prefix, hairline full border, right-docked agent badge
- Sidebar: CONTEXT/MODIFIED FILES/TODOS/MCP/LSP headers with green stats and context meter
- Left-aligned home with full-width prompt field
---
 packages/tui/src/component/logo.tsx           |  69 ++--
 packages/tui/src/component/prompt/index.tsx   | 268 ++++++------
 packages/tui/src/context/theme.tsx            |  30 +-
 .../src/feature-plugins/sidebar/context.tsx   |  27 +-
 .../tui/src/feature-plugins/sidebar/files.tsx |  20 +-
 .../src/feature-plugins/sidebar/footer.tsx    |   8 +-
 .../tui/src/feature-plugins/sidebar/lsp.tsx   |  20 +-
 .../tui/src/feature-plugins/sidebar/mcp.tsx   |  27 +-
 .../tui/src/feature-plugins/sidebar/todo.tsx  |  21 +-
 packages/tui/src/logo.ts                      |   4 +-
 packages/tui/src/routes/home.tsx              |   5 +-
 packages/tui/src/routes/session/index.tsx     | 391 ++++++++++--------
 packages/tui/src/theme/assets/carbon.json     | 255 ++++++++++++
 packages/tui/src/theme/index.ts               |   2 +
 packages/tui/src/util/presentation.ts         |  27 +-
 15 files changed, 731 insertions(+), 443 deletions(-)
 create mode 100644 packages/tui/src/theme/assets/carbon.json

diff --git a/packages/tui/src/component/logo.tsx b/packages/tui/src/component/logo.tsx
index db8e8dc71697..1aff29efa400 100644
--- a/packages/tui/src/component/logo.tsx
+++ b/packages/tui/src/component/logo.tsx
@@ -1,61 +1,40 @@
-import { RGBA, TextAttributes } from "@opentui/core"
-import { For, type JSX } from "solid-js"
-import { tint, useTheme } from "../context/theme"
+import { TextAttributes } from "@opentui/core"
+import { For } from "solid-js"
+import { useTheme } from "../context/theme"
+import { useDirectory } from "../context/directory"
 import { logo } from "../logo"
 
 export function Logo() {
   const { theme } = useTheme()
-
-  const renderLine = (line: string, fg: RGBA, bold: boolean): JSX.Element[] => {
-    const shadow = tint(theme.background, fg, 0.25)
-    const attrs = bold ? TextAttributes.BOLD : undefined
-    return Array.from(line).map((char) => {
-      if (char === "_") {
-        return (
-          <text fg={fg} bg={shadow} attributes={attrs} selectable={false}>
-            {" "}
-          </text>
-        )
-      }
-      if (char === "^") {
-        return (
-          <text fg={fg} bg={shadow} attributes={attrs} selectable={false}>
-            ▀
-          </text>
-        )
-      }
-      if (char === "~") {
-        return (
-          <text fg={shadow} attributes={attrs} selectable={false}>
-            ▀
-          </text>
-        )
-      }
-      if (char === ",") {
-        return (
-          <text fg={shadow} attributes={attrs} selectable={false}>
-            ▄
-          </text>
-        )
-      }
-      return (
-        <text fg={fg} attributes={attrs} selectable={false}>
-          {char}
-        </text>
-      )
-    })
-  }
+  const directory = useDirectory()
 
   return (
     <box>
       <For each={logo.left}>
         {(line, index) => (
           <box flexDirection="row" gap={1}>
-            <box flexDirection="row">{renderLine(line, theme.textMuted, false)}</box>
-            <box flexDirection="row">{renderLine(logo.right[index()], theme.text, true)}</box>
+            <text fg={theme.text} attributes={TextAttributes.BOLD} selectable={false}>
+              {line}
+            </text>
+            <text fg={theme.primary} attributes={TextAttributes.BOLD} selectable={false}>
+              {logo.right[index()]}
+            </text>
           </box>
         )}
       </For>
+      <box paddingTop={1} gap={1}>
+        <text fg={theme.primary} selectable={false}>
+          ━━━━━━━━
+        </text>
+        <box>
+          <text fg={theme.textMuted} selectable={false}>
+            decode runs commands on your behalf to help you build.
+          </text>
+          <text fg={theme.textMuted} selectable={false}>
+            Directory <span style={{ fg: theme.text, bold: true }}>{directory()}</span>
+          </text>
+        </box>
+      </box>
     </box>
   )
 }
diff --git a/packages/tui/src/component/prompt/index.tsx b/packages/tui/src/component/prompt/index.tsx
index 115c10296ef4..3e284200fe24 100644
--- a/packages/tui/src/component/prompt/index.tsx
+++ b/packages/tui/src/component/prompt/index.tsx
@@ -15,8 +15,7 @@ import path from "path"
 import { fileURLToPath } from "url"
 import { useLocal } from "../../context/local"
 import { Flag } from "@opencode-ai/core/flag/flag"
-import { tint, useTheme } from "../../context/theme"
-import { EmptyBorder, SplitBorder } from "../../ui/border"
+import { useTheme } from "../../context/theme"
 import { useTuiPaths, useTuiTerminalEnvironment } from "../../context/runtime"
 import { useClipboard } from "../../context/clipboard"
 import { Spinner } from "../spinner"
@@ -1303,7 +1302,6 @@ export function Prompt(props: PromptProps) {
     () => !!local.agent.current() && store.mode === "normal" && showVariant(),
     animationsEnabled,
   )
-  const borderHighlight = createMemo(() => tint(theme.border, highlight(), agentMetaAlpha()))
 
   const placeholderText = createMemo(() => {
     if (props.showPlaceholder === false) return undefined
@@ -1345,166 +1343,140 @@ export function Prompt(props: PromptProps) {
   return (
     <>
       <box ref={(r: BoxRenderable) => (anchor = r)} visible={props.visible !== false} width="100%">
-        <box
-          width="100%"
-          border={["left"]}
-          borderColor={borderHighlight()}
-          customBorderChars={{
-            ...SplitBorder.customBorderChars,
-            bottomLeft: "╹",
-          }}
-        >
+        <box width="100%" border={true} borderColor={theme.border} flexDirection="row">
           <box
             paddingLeft={2}
             paddingRight={2}
             paddingTop={1}
-            flexShrink={0}
+            paddingBottom={1}
             backgroundColor={theme.backgroundElement}
             flexGrow={1}
-            width="100%"
+            minWidth={0}
           >
-            <textarea
-              width="100%"
-              placeholder={placeholderText()}
-              placeholderColor={theme.textMuted}
-              textColor={leader() ? theme.textMuted : theme.text}
-              focusedTextColor={leader() ? theme.textMuted : theme.text}
-              minHeight={1}
-              maxHeight={maxHeight()}
-              onContentChange={() => {
-                const value = input.plainText
-                setStore("prompt", "input", value)
-                auto()?.onInput(value)
-                syncExtmarksWithPromptParts()
-                setCursorVersion((value) => value + 1)
-              }}
-              onCursorChange={() => setCursorVersion((value) => value + 1)}
-              onKeyDown={(e: { preventDefault(): void }) => {
-                if (props.disabled) {
-                  e.preventDefault()
-                  return
-                }
-              }}
-              onSubmit={() => {
-                // IME: double-defer so the last composed character (e.g. Korean
-                // hangul) is flushed to plainText before we read it for submission.
-                setTimeout(() => setTimeout(() => submit(), 0), 0)
-              }}
-              onPaste={async (event: PasteEvent) => {
-                if (props.disabled) {
-                  event.preventDefault()
-                  return
-                }
+            <box flexDirection="row" gap={1} width="100%">
+              <text flexShrink={0} fg={theme.primary}>
+                {store.mode === "shell" ? "$" : "❯"}
+              </text>
+              <textarea
+                flexGrow={1}
+                placeholder={placeholderText()}
+                placeholderColor={theme.textMuted}
+                textColor={leader() ? theme.textMuted : theme.text}
+                focusedTextColor={leader() ? theme.textMuted : theme.text}
+                minHeight={1}
+                maxHeight={maxHeight()}
+                onContentChange={() => {
+                  const value = input.plainText
+                  setStore("prompt", "input", value)
+                  auto()?.onInput(value)
+                  syncExtmarksWithPromptParts()
+                  setCursorVersion((value) => value + 1)
+                }}
+                onCursorChange={() => setCursorVersion((value) => value + 1)}
+                onKeyDown={(e: { preventDefault(): void }) => {
+                  if (props.disabled) {
+                    e.preventDefault()
+                    return
+                  }
+                }}
+                onSubmit={() => {
+                  // IME: double-defer so the last composed character (e.g. Korean
+                  // hangul) is flushed to plainText before we read it for submission.
+                  setTimeout(() => setTimeout(() => submit(), 0), 0)
+                }}
+                onPaste={async (event: PasteEvent) => {
+                  if (props.disabled) {
+                    event.preventDefault()
+                    return
+                  }
 
-                // Normalize line endings at the boundary
-                // Windows ConPTY/Terminal often sends CR-only newlines in bracketed paste
-                // Replace CRLF first, then any remaining CR
-                const normalizedText = decodePasteBytes(event.bytes).replace(/\r\n/g, "\n").replace(/\r/g, "\n")
-                const pastedContent = normalizedText.trim()
-
-                // Windows Terminal <1.25 can surface image-only clipboard as an
-                // empty bracketed paste. Windows Terminal 1.25+ does not.
-                if (!pastedContent) {
-                  keymap.dispatchCommand("prompt.paste")
-                  return
-                }
+                  // Normalize line endings at the boundary
+                  // Windows ConPTY/Terminal often sends CR-only newlines in bracketed paste
+                  // Replace CRLF first, then any remaining CR
+                  const normalizedText = decodePasteBytes(event.bytes).replace(/\r\n/g, "\n").replace(/\r/g, "\n")
+                  const pastedContent = normalizedText.trim()
+
+                  // Windows Terminal <1.25 can surface image-only clipboard as an
+                  // empty bracketed paste. Windows Terminal 1.25+ does not.
+                  if (!pastedContent) {
+                    keymap.dispatchCommand("prompt.paste")
+                    return
+                  }
 
-                // Once we cross an async boundary below, the terminal may perform its
-                // default paste unless we suppress it first and handle insertion ourselves.
-                event.preventDefault()
+                  // Once we cross an async boundary below, the terminal may perform its
+                  // default paste unless we suppress it first and handle insertion ourselves.
+                  event.preventDefault()
 
-                await pasteInputText(normalizedText)
-              }}
-              ref={(r: TextareaRenderable) => {
-                input = r
-                Object.assign(r, {
-                  getClipboardText: (text: string) => expandPastedTextPlaceholders(text, store.prompt.parts),
-                })
-                setInputTarget(r)
-                if (promptPartTypeId === 0) {
-                  promptPartTypeId = input.extmarks.registerType("prompt-part")
-                }
-                props.ref?.(ref)
-                setTimeout(() => {
-                  // setTimeout is a workaround and needs to be addressed properly
-                  if (!input || input.isDestroyed) return
-                  input.cursorColor = theme.text
-                }, 0)
-              }}
-              onMouseDown={(r: MouseEvent) => r.target?.focus()}
-              focusedBackgroundColor={theme.backgroundElement}
-              cursorColor={props.disabled ? theme.backgroundElement : theme.text}
-              syntaxStyle={syntax()}
-            />
-            <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1} justifyContent="space-between">
-              <box flexDirection="row" gap={1}>
-                <Show when={local.agent.current()} fallback={<box height={1} />}>
-                  {(agent) => (
-                    <>
-                      <text fg={fadeColor(highlight(), agentMetaAlpha())}>
-                        {store.mode === "shell" ? "Shell" : Locale.titlecase(agent().name)}
-                      </text>
-                      <Show when={store.mode === "normal" && local.permission.mode === "auto"}>
-                        <text fg={fadeColor(theme.textMuted, agentMetaAlpha())}>auto</text>
-                      </Show>
-                      <Show when={store.mode === "normal"}>
-                        <box flexDirection="row" gap={1}>
-                          <text fg={fadeColor(theme.textMuted, modelMetaAlpha())}>·</text>
-                          <text
-                            flexShrink={0}
-                            fg={fadeColor(leader() ? theme.textMuted : theme.text, modelMetaAlpha())}
-                          >
-                            {local.model.parsed().model}
+                  await pasteInputText(normalizedText)
+                }}
+                ref={(r: TextareaRenderable) => {
+                  input = r
+                  Object.assign(r, {
+                    getClipboardText: (text: string) => expandPastedTextPlaceholders(text, store.prompt.parts),
+                  })
+                  setInputTarget(r)
+                  if (promptPartTypeId === 0) {
+                    promptPartTypeId = input.extmarks.registerType("prompt-part")
+                  }
+                  props.ref?.(ref)
+                  setTimeout(() => {
+                    // setTimeout is a workaround and needs to be addressed properly
+                    if (!input || input.isDestroyed) return
+                    input.cursorColor = theme.primary
+                  }, 0)
+                }}
+                onMouseDown={(r: MouseEvent) => r.target?.focus()}
+                focusedBackgroundColor={theme.backgroundElement}
+                cursorColor={props.disabled ? theme.backgroundElement : theme.primary}
+                syntaxStyle={syntax()}
+              />
+            </box>
+          </box>
+          <box
+            flexShrink={0}
+            border={["left"]}
+            borderColor={theme.border}
+            backgroundColor={theme.backgroundPanel}
+            paddingLeft={2}
+            paddingRight={2}
+            justifyContent="center"
+          >
+            <box flexDirection="row" gap={1} alignItems="center">
+              <Show when={hasRightContent()}>{props.right}</Show>
+              <Show when={local.agent.current()}>
+                {(agent) => (
+                  <>
+                    <text>
+                      <span style={{ fg: fadeColor(highlight(), agentMetaAlpha()), bold: true }}>
+                        {(store.mode === "shell" ? "shell" : agent().name).toUpperCase()}
+                      </span>
+                    </text>
+                    <Show when={store.mode === "normal" && local.permission.mode === "auto"}>
+                      <text fg={fadeColor(theme.textMuted, agentMetaAlpha())}>auto</text>
+                    </Show>
+                    <Show when={store.mode === "normal" && props.sessionID}>
+                      <box flexDirection="row" gap={1}>
+                        <text flexShrink={0} fg={fadeColor(leader() ? theme.textMuted : theme.text, modelMetaAlpha())}>
+                          {local.model.parsed().model}
+                        </text>
+                        <text fg={fadeColor(theme.textMuted, modelMetaAlpha())}>·</text>
+                        <text fg={fadeColor(theme.textMuted, modelMetaAlpha())}>{currentProviderLabel()}</text>
+                        <Show when={showVariant()}>
+                          <text fg={fadeColor(theme.textMuted, variantMetaAlpha())}>·</text>
+                          <text>
+                            <span style={{ fg: fadeColor(theme.warning, variantMetaAlpha()), bold: true }}>
+                              {local.model.variant.current()}
+                            </span>
                           </text>
-                          <text fg={fadeColor(theme.textMuted, modelMetaAlpha())}>{currentProviderLabel()}</text>
-                          <Show when={showVariant()}>
-                            <text fg={fadeColor(theme.textMuted, variantMetaAlpha())}>·</text>
-                            <text>
-                              <span style={{ fg: fadeColor(theme.warning, variantMetaAlpha()), bold: true }}>
-                                {local.model.variant.current()}
-                              </span>
-                            </text>
-                          </Show>
-                        </box>
-                      </Show>
-                    </>
-                  )}
-                </Show>
-              </box>
-              <Show when={hasRightContent()}>
-                <box flexDirection="row" gap={1} alignItems="center">
-                  {props.right}
-                </box>
+                        </Show>
+                      </box>
+                    </Show>
+                  </>
+                )}
               </Show>
             </box>
           </box>
         </box>
-        <box
-          height={1}
-          border={["left"]}
-          borderColor={borderHighlight()}
-          customBorderChars={{
-            ...EmptyBorder,
-            vertical: theme.backgroundElement.a !== 0 ? "╹" : " ",
-          }}
-        >
-          <box
-            height={1}
-            border={["bottom"]}
-            borderColor={theme.backgroundElement}
-            customBorderChars={
-              theme.backgroundElement.a !== 0
-                ? {
-                    ...EmptyBorder,
-                    horizontal: "▀",
-                  }
-                : {
-                    ...EmptyBorder,
-                    horizontal: " ",
-                  }
-            }
-          />
-        </box>
         <box width="100%" flexDirection="row" justifyContent="space-between">
           <Switch>
             <Match when={status().type !== "idle"}>
diff --git a/packages/tui/src/context/theme.tsx b/packages/tui/src/context/theme.tsx
index 909dd69ac249..d3441e3f9256 100644
--- a/packages/tui/src/context/theme.tsx
+++ b/packages/tui/src/context/theme.tsx
@@ -23,7 +23,6 @@ import { createEffect, createMemo, onCleanup, onMount } from "solid-js"
 import { createStore, produce } from "solid-js/store"
 import { createSimpleContext } from "./helper"
 import { useKV } from "./kv"
-import { useTuiConfig } from "../config"
 import { Global } from "@opencode-ai/core/global"
 import { Glob } from "@opencode-ai/core/util/glob"
 import { readFile } from "node:fs/promises"
@@ -89,11 +88,13 @@ type State = {
   ready: boolean
 }
 
+const DEFAULT_THEME = "carbon"
+
 const [store, setStore] = createStore<State>({
   themes: allThemes(),
   mode: "dark",
   lock: undefined,
-  active: "opencode",
+  active: DEFAULT_THEME,
   ready: false,
 })
 
@@ -103,7 +104,6 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
   name: "Theme",
   init: (props: { mode: "dark" | "light"; source?: ThemeSource }) => {
     const renderer = useRenderer()
-    const config = useTuiConfig()
     const kv = useKV()
     const themes = props.source ?? themeSource
     const pick = (value: unknown) => {
@@ -118,17 +118,15 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         if (!lock && pick(kv.get("theme_mode")) !== undefined) kv.set("theme_mode", undefined)
         draft.mode = mode
         draft.lock = lock
-        const active = config.theme ?? kv.get("theme", "opencode")
-        draft.active = typeof active === "string" ? active : "opencode"
+        // Carbon is decode's identity. Ignore inherited opencode config themes and
+        // legacy "theme" KV state; only an explicit /theme choice made in decode
+        // (stored under "decode_theme") overrides the default.
+        const active = kv.get("decode_theme", DEFAULT_THEME)
+        draft.active = typeof active === "string" ? active : DEFAULT_THEME
         draft.ready = false
       }),
     )
 
-    createEffect(() => {
-      const theme = config.theme
-      if (theme) setStore("active", theme)
-    })
-
     function syncCustomThemes() {
       return themes
         .discover()
@@ -140,7 +138,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
             }, {}),
           )
         })
-        .catch(() => setStore("active", "opencode"))
+        .catch(() => setStore("active", DEFAULT_THEME))
     }
 
     onMount(() => {
@@ -159,7 +157,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
           if (!colors.palette[0]) {
             if (hasResolvedSystemTheme) return
             setSystemTheme(undefined)
-            if (store.active === "system") setStore("active", "opencode")
+            if (store.active === "system") setStore("active", DEFAULT_THEME)
             return
           }
           const next = store.lock ?? terminalMode(colors) ?? mode
@@ -174,7 +172,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
         .catch(() => {
           if (hasResolvedSystemTheme) return
           setSystemTheme(undefined)
-          if (store.active === "system") setStore("active", "opencode")
+          if (store.active === "system") setStore("active", DEFAULT_THEME)
         })
     }
 
@@ -257,13 +255,13 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       const active = store.themes[store.active]
       if (active) return resolveTheme(active, store.mode)
 
-      const saved = kv.get("theme")
+      const saved = kv.get("decode_theme")
       if (typeof saved === "string") {
         const theme = store.themes[saved]
         if (theme) return resolveTheme(theme, store.mode)
       }
 
-      return resolveTheme(store.themes.opencode, store.mode)
+      return resolveTheme(store.themes[DEFAULT_THEME], store.mode)
     })
 
     createEffect(() => renderer.setBackgroundColor(values().background))
@@ -293,7 +291,7 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
       set(theme: string) {
         if (!hasTheme(theme)) return false
         setStore("active", theme)
-        kv.set("theme", theme)
+        kv.set("decode_theme", theme)
         return true
       },
       get ready() {
diff --git a/packages/tui/src/feature-plugins/sidebar/context.tsx b/packages/tui/src/feature-plugins/sidebar/context.tsx
index f1c99d9679ce..29965ea9b389 100644
--- a/packages/tui/src/feature-plugins/sidebar/context.tsx
+++ b/packages/tui/src/feature-plugins/sidebar/context.tsx
@@ -34,18 +34,35 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
     }
   })
 
+  const bar = createMemo(() => {
+    const filled = Math.min(BAR_WIDTH, Math.round(((state().percent ?? 0) / 100) * BAR_WIDTH))
+    return { filled, rest: BAR_WIDTH - filled }
+  })
+
   return (
     <box>
-      <text fg={theme().text}>
-        <b>Context</b>
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={theme().textMuted}>CONTEXT</text>
+        <text fg={theme().primary}>{state().percent ?? 0}%</text>
+      </box>
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={theme().textMuted}>tokens</text>
+        <text fg={theme().text}>{state().tokens.toLocaleString()}</text>
+      </box>
+      <box flexDirection="row" justifyContent="space-between">
+        <text fg={theme().textMuted}>spent</text>
+        <text fg={theme().text}>{money.format(cost())}</text>
+      </box>
+      <text>
+        <span style={{ fg: theme().primary }}>{"━".repeat(bar().filled)}</span>
+        <span style={{ fg: theme().backgroundElement }}>{"━".repeat(bar().rest)}</span>
       </text>
-      <text fg={theme().textMuted}>{state().tokens.toLocaleString()} tokens</text>
-      <text fg={theme().textMuted}>{state().percent ?? 0}% used</text>
-      <text fg={theme().textMuted}>{money.format(cost())} spent</text>
     </box>
   )
 }
 
+const BAR_WIDTH = 24
+
 const tui: TuiPlugin = async (api) => {
   api.slots.register({
     order: 100,
diff --git a/packages/tui/src/feature-plugins/sidebar/files.tsx b/packages/tui/src/feature-plugins/sidebar/files.tsx
index 01f33f647d69..394b664e6a39 100644
--- a/packages/tui/src/feature-plugins/sidebar/files.tsx
+++ b/packages/tui/src/feature-plugins/sidebar/files.tsx
@@ -19,13 +19,19 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
   return (
     <Show when={list().length > 0}>
       <box>
-        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
-          <Show when={list().length > 2}>
-            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
-          </Show>
-          <text fg={theme().text}>
-            <b>Modified Files</b>
-          </text>
+        <box
+          flexDirection="row"
+          gap={1}
+          justifyContent="space-between"
+          onMouseDown={() => list().length > 2 && setOpen((x) => !x)}
+        >
+          <box flexDirection="row" gap={1}>
+            <Show when={list().length > 2}>
+              <text fg={theme().textMuted}>{open() ? "▼" : "▶"}</text>
+            </Show>
+            <text fg={theme().textMuted}>MODIFIED FILES</text>
+          </box>
+          <text fg={theme().primary}>{list().length}</text>
         </box>
         <Show when={list().length <= 2 || open()}>
           <For each={list()}>
diff --git a/packages/tui/src/feature-plugins/sidebar/footer.tsx b/packages/tui/src/feature-plugins/sidebar/footer.tsx
index cad71a2f752f..c90281550985 100644
--- a/packages/tui/src/feature-plugins/sidebar/footer.tsx
+++ b/packages/tui/src/feature-plugins/sidebar/footer.tsx
@@ -53,7 +53,7 @@ function View(props: { api: TuiPluginApi; sessionID: string }) {
                 ✕
               </text>
             </box>
-            <text fg={theme().textMuted}>DCode includes free models so you can start immediately.</text>
+            <text fg={theme().textMuted}>decode includes free models so you can start immediately.</text>
             <text fg={theme().textMuted}>
               Connect from 75+ providers to use other models, including Claude, GPT, Gemini etc
             </text>
@@ -69,9 +69,11 @@ function View(props: { api: TuiPluginApi; sessionID: string }) {
         <span style={{ fg: theme().text }}>{path().name}</span>
       </text>
       <text fg={theme().textMuted}>
-        <span style={{ fg: theme().success }}>•</span> <b>D</b>
         <span style={{ fg: theme().text }}>
-          <b>Code</b>
+          <b>de</b>
+        </span>
+        <span style={{ fg: theme().primary }}>
+          <b>code</b>
         </span>{" "}
         <span>{props.api.app.version}</span>
       </text>
diff --git a/packages/tui/src/feature-plugins/sidebar/lsp.tsx b/packages/tui/src/feature-plugins/sidebar/lsp.tsx
index c260cfbd1786..dd452fc416cb 100644
--- a/packages/tui/src/feature-plugins/sidebar/lsp.tsx
+++ b/packages/tui/src/feature-plugins/sidebar/lsp.tsx
@@ -12,13 +12,21 @@ function View(props: { api: TuiPluginApi }) {
 
   return (
     <box>
-      <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
-        <Show when={list().length > 2}>
-          <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
+      <box
+        flexDirection="row"
+        gap={1}
+        justifyContent="space-between"
+        onMouseDown={() => list().length > 2 && setOpen((x) => !x)}
+      >
+        <box flexDirection="row" gap={1}>
+          <Show when={list().length > 2}>
+            <text fg={theme().textMuted}>{open() ? "▼" : "▶"}</text>
+          </Show>
+          <text fg={theme().textMuted}>LSP</text>
+        </box>
+        <Show when={list().length > 0} fallback={<text fg={theme().textMuted}>{off() ? "off" : "idle"}</text>}>
+          <text fg={theme().primary}>{list().filter((item) => item.status === "connected").length} active</text>
         </Show>
-        <text fg={theme().text}>
-          <b>LSP</b>
-        </text>
       </box>
       <Show when={list().length <= 2 || open()}>
         <Show when={list().length === 0}>
diff --git a/packages/tui/src/feature-plugins/sidebar/mcp.tsx b/packages/tui/src/feature-plugins/sidebar/mcp.tsx
index 99d8567ea73c..32c7701660d4 100644
--- a/packages/tui/src/feature-plugins/sidebar/mcp.tsx
+++ b/packages/tui/src/feature-plugins/sidebar/mcp.tsx
@@ -29,17 +29,22 @@ function View(props: { api: TuiPluginApi }) {
   return (
     <Show when={list().length > 0}>
       <box>
-        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
-          <Show when={list().length > 2}>
-            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
-          </Show>
-          <text fg={theme().text}>
-            <b>MCP</b>
-            <Show when={!open()}>
-              <span style={{ fg: theme().textMuted }}>
-                {" "}
-                ({on()} active{bad() > 0 ? `, ${bad()} error${bad() > 1 ? "s" : ""}` : ""})
-              </span>
+        <box
+          flexDirection="row"
+          gap={1}
+          justifyContent="space-between"
+          onMouseDown={() => list().length > 2 && setOpen((x) => !x)}
+        >
+          <box flexDirection="row" gap={1}>
+            <Show when={list().length > 2}>
+              <text fg={theme().textMuted}>{open() ? "▼" : "▶"}</text>
+            </Show>
+            <text fg={theme().textMuted}>MCP</text>
+          </box>
+          <text>
+            <span style={{ fg: theme().primary }}>{on()} connected</span>
+            <Show when={bad() > 0}>
+              <span style={{ fg: theme().error }}> · {bad()} failed</span>
             </Show>
           </text>
         </box>
diff --git a/packages/tui/src/feature-plugins/sidebar/todo.tsx b/packages/tui/src/feature-plugins/sidebar/todo.tsx
index 15a78b0ebbf8..66e4bf7d32b0 100644
--- a/packages/tui/src/feature-plugins/sidebar/todo.tsx
+++ b/packages/tui/src/feature-plugins/sidebar/todo.tsx
@@ -10,16 +10,25 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
   const theme = () => props.api.theme.current
   const list = createMemo(() => props.api.state.session.todo(props.session_id))
   const show = createMemo(() => list().length > 0 && list().some((item) => item.status !== "completed"))
+  const done = createMemo(() => list().filter((item) => item.status === "completed").length)
 
   return (
     <Show when={show()}>
       <box>
-        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
-          <Show when={list().length > 2}>
-            <text fg={theme().text}>{open() ? "▼" : "▶"}</text>
-          </Show>
-          <text fg={theme().text}>
-            <b>Todo</b>
+        <box
+          flexDirection="row"
+          gap={1}
+          justifyContent="space-between"
+          onMouseDown={() => list().length > 2 && setOpen((x) => !x)}
+        >
+          <box flexDirection="row" gap={1}>
+            <Show when={list().length > 2}>
+              <text fg={theme().textMuted}>{open() ? "▼" : "▶"}</text>
+            </Show>
+            <text fg={theme().textMuted}>TODOS</text>
+          </box>
+          <text fg={theme().primary}>
+            {done()}/{list().length}
           </text>
         </box>
         <Show when={list().length <= 2 || open()}>
diff --git a/packages/tui/src/logo.ts b/packages/tui/src/logo.ts
index aa47986598a2..9ebf3f8edc27 100644
--- a/packages/tui/src/logo.ts
+++ b/packages/tui/src/logo.ts
@@ -1,6 +1,6 @@
 export const logo = {
-  left: ["     ", "█▀▀▄ ", "█__█ ", "▀▀▀  "],
-  right: ["                   ", "█▀▀▀ █▀▀█ █▀▀▄ █▀▀▀", "█___ █__█ █__█ █^^^", "▀▀▀▀ ▀▀▀▀ ▀~~▀ ▀▀▀▀"],
+  left: ["█▀▀▄ █▀▀▀", "█  █ █▀▀ ", "█▄▄▀ █▄▄▄"],
+  right: ["▄▀▀▀ ▄▀▀▄ █▀▀▄ █▀▀▀", "█    █  █ █  █ █▀▀ ", "▀▄▄▄ ▀▄▄▀ █▄▄▀ █▄▄▄"],
 }
 
 export const go = {
diff --git a/packages/tui/src/routes/home.tsx b/packages/tui/src/routes/home.tsx
index d4145e2d87be..67f503c40730 100644
--- a/packages/tui/src/routes/home.tsx
+++ b/packages/tui/src/routes/home.tsx
@@ -33,7 +33,8 @@ export function Home() {
   const promptMaxWidth = createMemo(() => {
     const configured = tuiConfig.prompt?.max_width
     if (configured === "auto") return Math.max(75, Math.floor(dimensions().width * 0.7))
-    return configured ?? 75
+    // Full-width field by default, matching the carbon home layout.
+    return configured ?? dimensions().width
   })
   let sent = false
 
@@ -69,7 +70,7 @@ export function Home() {
 
   return (
     <HomeSessionDestinationProvider>
-      <box flexGrow={1} alignItems="center" paddingLeft={2} paddingRight={2}>
+      <box flexGrow={1} alignItems="flex-start" paddingLeft={10} paddingRight={4}>
         <box flexGrow={1} minHeight={0} />
         <box height={4} minHeight={0} flexShrink={1} />
         <box flexShrink={0}>
diff --git a/packages/tui/src/routes/session/index.tsx b/packages/tui/src/routes/session/index.tsx
index a02bbab222e9..bd75dfdd83c9 100644
--- a/packages/tui/src/routes/session/index.tsx
+++ b/packages/tui/src/routes/session/index.tsx
@@ -245,6 +245,21 @@ export function Session() {
     return messages().findLast((x) => x.role === "assistant")
   })
 
+  const budget = createMemo(() => {
+    const last = messages().findLast(
+      (item): item is AssistantMessage => item.role === "assistant" && item.tokens.output > 0,
+    )
+    if (!last) return
+    const tokens =
+      last.tokens.input + last.tokens.output + last.tokens.reasoning + last.tokens.cache.read + last.tokens.cache.write
+    if (tokens <= 0) return
+    const model = sync.data.provider.find((item) => item.id === last.providerID)?.models[last.modelID]
+    return {
+      tokens: Locale.number(tokens),
+      limit: model?.limit.context ? Locale.number(model.limit.context) : undefined,
+    }
+  })
+
   const dimensions = useTerminalDimensions()
   const [sidebar, setSidebar] = kv.signal<"auto" | "hide">("sidebar", "auto")
   const [sidebarOpen, setSidebarOpen] = createSignal(false)
@@ -1162,185 +1177,217 @@ export function Session() {
           tui: tuiConfig,
         }}
       >
-        <box flexDirection="row" flexGrow={1} minHeight={0}>
-          <box flexGrow={1} minHeight={0} paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1}>
-            <Show when={session()}>
-              <scrollbox
-                ref={(r) => (scroll = r)}
-                viewportOptions={{
-                  paddingRight: showScrollbar() ? 1 : 0,
-                }}
-                verticalScrollbarOptions={{
-                  paddingLeft: 1,
-                  visible: showScrollbar(),
-                  trackOptions: {
-                    backgroundColor: theme.backgroundElement,
-                    foregroundColor: theme.border,
-                  },
-                }}
-                stickyScroll={true}
-                stickyStart="bottom"
-                flexGrow={1}
-                scrollAcceleration={scrollAcceleration()}
-              >
-                <box height={1} />
-                <For each={messages()}>
-                  {(message, index) => (
-                    <Switch>
-                      <Match when={message.id === revert()?.messageID}>
-                        {(function () {
-                          const redoShortcut = useCommandShortcut("session.redo")
-                          const [hover, setHover] = createSignal(false)
-                          const dialog = useDialog()
-
-                          const handleUnrevert = async () => {
-                            const confirmed = await DialogConfirm.show(
-                              dialog,
-                              "Confirm Redo",
-                              "Are you sure you want to restore the reverted messages?",
-                            )
-                            if (confirmed) {
-                              keymap.dispatchCommand("session.redo")
+        <box flexGrow={1} minHeight={0}>
+          <box
+            flexDirection="row"
+            flexShrink={0}
+            justifyContent="space-between"
+            gap={2}
+            paddingLeft={2}
+            paddingRight={2}
+            backgroundColor={theme.backgroundPanel}
+          >
+            <text fg={theme.textMuted} wrapMode="none">
+              <span style={{ fg: theme.text, bold: true }}>de</span>
+              <span style={{ fg: theme.primary, bold: true }}>code</span>
+              <span> │ </span>
+              <span>{Locale.truncate(session()?.title ?? "", 60)}</span>
+              <span style={{ fg: theme.textMuted }}> · {route.sessionID.slice(0, 10)}</span>
+            </text>
+            <Show when={budget()}>
+              {(usage) => (
+                <text fg={theme.textMuted} flexShrink={0}>
+                  <span style={{ fg: theme.primary, bold: true }}>{usage().tokens}</span>
+                  <Show when={usage().limit}>
+                    <span> / {usage().limit}</span>
+                  </Show>
+                  <Show when={(session()?.cost ?? 0) > 0}>
+                    <span> · ${(session()?.cost ?? 0).toFixed(2)}</span>
+                  </Show>
+                </text>
+              )}
+            </Show>
+          </box>
+          <box flexDirection="row" flexGrow={1} minHeight={0}>
+            <box flexGrow={1} minHeight={0} paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1}>
+              <Show when={session()}>
+                <scrollbox
+                  ref={(r) => (scroll = r)}
+                  viewportOptions={{
+                    paddingRight: showScrollbar() ? 1 : 0,
+                  }}
+                  verticalScrollbarOptions={{
+                    paddingLeft: 1,
+                    visible: showScrollbar(),
+                    trackOptions: {
+                      backgroundColor: theme.backgroundElement,
+                      foregroundColor: theme.border,
+                    },
+                  }}
+                  stickyScroll={true}
+                  stickyStart="bottom"
+                  flexGrow={1}
+                  scrollAcceleration={scrollAcceleration()}
+                >
+                  <box height={1} />
+                  <For each={messages()}>
+                    {(message, index) => (
+                      <Switch>
+                        <Match when={message.id === revert()?.messageID}>
+                          {(function () {
+                            const redoShortcut = useCommandShortcut("session.redo")
+                            const [hover, setHover] = createSignal(false)
+                            const dialog = useDialog()
+
+                            const handleUnrevert = async () => {
+                              const confirmed = await DialogConfirm.show(
+                                dialog,
+                                "Confirm Redo",
+                                "Are you sure you want to restore the reverted messages?",
+                              )
+                              if (confirmed) {
+                                keymap.dispatchCommand("session.redo")
+                              }
                             }
-                          }
-
-                          return (
-                            <box
-                              onMouseOver={() => setHover(true)}
-                              onMouseOut={() => setHover(false)}
-                              onMouseUp={handleUnrevert}
-                              marginTop={1}
-                              flexShrink={0}
-                              border={["left"]}
-                              customBorderChars={SplitBorder.customBorderChars}
-                              borderColor={theme.backgroundPanel}
-                            >
+
+                            return (
                               <box
-                                paddingTop={1}
-                                paddingBottom={1}
-                                paddingLeft={2}
-                                backgroundColor={hover() ? theme.backgroundElement : theme.backgroundPanel}
+                                onMouseOver={() => setHover(true)}
+                                onMouseOut={() => setHover(false)}
+                                onMouseUp={handleUnrevert}
+                                marginTop={1}
+                                flexShrink={0}
+                                border={["left"]}
+                                customBorderChars={SplitBorder.customBorderChars}
+                                borderColor={theme.backgroundPanel}
                               >
-                                <text fg={theme.textMuted}>{revert()!.reverted.length} message reverted</text>
-                                <text fg={theme.textMuted}>
-                                  <span style={{ fg: theme.text }}>{redoShortcut()}</span> or /redo to restore
-                                </text>
-                                <Show when={revert()!.diffFiles?.length}>
-                                  <box marginTop={1}>
-                                    <For each={revert()!.diffFiles}>
-                                      {(file) => (
-                                        <text fg={theme.text}>
-                                          {file.filename}
-                                          <Show when={file.additions > 0}>
-                                            <span style={{ fg: theme.diffAdded }}> +{file.additions}</span>
-                                          </Show>
-                                          <Show when={file.deletions > 0}>
-                                            <span style={{ fg: theme.diffRemoved }}> -{file.deletions}</span>
-                                          </Show>
-                                        </text>
-                                      )}
-                                    </For>
-                                  </box>
-                                </Show>
+                                <box
+                                  paddingTop={1}
+                                  paddingBottom={1}
+                                  paddingLeft={2}
+                                  backgroundColor={hover() ? theme.backgroundElement : theme.backgroundPanel}
+                                >
+                                  <text fg={theme.textMuted}>{revert()!.reverted.length} message reverted</text>
+                                  <text fg={theme.textMuted}>
+                                    <span style={{ fg: theme.text }}>{redoShortcut()}</span> or /redo to restore
+                                  </text>
+                                  <Show when={revert()!.diffFiles?.length}>
+                                    <box marginTop={1}>
+                                      <For each={revert()!.diffFiles}>
+                                        {(file) => (
+                                          <text fg={theme.text}>
+                                            {file.filename}
+                                            <Show when={file.additions > 0}>
+                                              <span style={{ fg: theme.diffAdded }}> +{file.additions}</span>
+                                            </Show>
+                                            <Show when={file.deletions > 0}>
+                                              <span style={{ fg: theme.diffRemoved }}> -{file.deletions}</span>
+                                            </Show>
+                                          </text>
+                                        )}
+                                      </For>
+                                    </box>
+                                  </Show>
+                                </box>
                               </box>
-                            </box>
-                          )
-                        })()}
-                      </Match>
-                      <Match when={revert()?.messageID && message.id >= revert()!.messageID}>
-                        <></>
-                      </Match>
-                      <Match when={message.role === "user"}>
-                        <UserMessage
-                          index={index()}
-                          onMouseUp={() => {
-                            if (renderer.getSelection()?.getSelectedText()) return
-                            dialog.replace(() => (
-                              <DialogMessage
-                                messageID={message.id}
-                                sessionID={route.sessionID}
-                                setPrompt={(promptInfo) => prompt?.set(promptInfo)}
-                              />
-                            ))
-                          }}
-                          message={message as UserMessage}
-                          parts={sync.data.part[message.id] ?? []}
-                          pending={pending()}
-                        />
-                      </Match>
-                      <Match when={message.role === "assistant"}>
-                        <AssistantMessage
-                          last={lastAssistant()?.id === message.id}
-                          message={message as AssistantMessage}
-                          parts={sync.data.part[message.id] ?? []}
-                        />
-                      </Match>
-                    </Switch>
-                  )}
-                </For>
-              </scrollbox>
-              <box flexShrink={0}>
-                <Show when={permissions().length > 0}>
-                  <PermissionPrompt
-                    request={permissions()[0]}
-                    directory={sync.session.get(permissions()[0].sessionID)?.directory}
-                  />
-                </Show>
-                <Show when={permissions().length === 0 && questions().length > 0}>
-                  <QuestionPrompt
-                    request={questions()[0]}
-                    directory={sync.session.get(questions()[0].sessionID)?.directory}
-                  />
-                </Show>
-                <Show when={session()?.parentID}>
-                  <SubagentFooter />
-                </Show>
-                <Show when={visible()}>
-                  <pluginRuntime.Slot
-                    name="session_prompt"
-                    mode="replace"
-                    session_id={route.sessionID}
-                    visible={visible()}
-                    disabled={disabled()}
-                    on_submit={toBottom}
-                    ref={bind}
-                  >
-                    <Prompt
+                            )
+                          })()}
+                        </Match>
+                        <Match when={revert()?.messageID && message.id >= revert()!.messageID}>
+                          <></>
+                        </Match>
+                        <Match when={message.role === "user"}>
+                          <UserMessage
+                            index={index()}
+                            onMouseUp={() => {
+                              if (renderer.getSelection()?.getSelectedText()) return
+                              dialog.replace(() => (
+                                <DialogMessage
+                                  messageID={message.id}
+                                  sessionID={route.sessionID}
+                                  setPrompt={(promptInfo) => prompt?.set(promptInfo)}
+                                />
+                              ))
+                            }}
+                            message={message as UserMessage}
+                            parts={sync.data.part[message.id] ?? []}
+                            pending={pending()}
+                          />
+                        </Match>
+                        <Match when={message.role === "assistant"}>
+                          <AssistantMessage
+                            last={lastAssistant()?.id === message.id}
+                            message={message as AssistantMessage}
+                            parts={sync.data.part[message.id] ?? []}
+                          />
+                        </Match>
+                      </Switch>
+                    )}
+                  </For>
+                </scrollbox>
+                <box flexShrink={0}>
+                  <Show when={permissions().length > 0}>
+                    <PermissionPrompt
+                      request={permissions()[0]}
+                      directory={sync.session.get(permissions()[0].sessionID)?.directory}
+                    />
+                  </Show>
+                  <Show when={permissions().length === 0 && questions().length > 0}>
+                    <QuestionPrompt
+                      request={questions()[0]}
+                      directory={sync.session.get(questions()[0].sessionID)?.directory}
+                    />
+                  </Show>
+                  <Show when={session()?.parentID}>
+                    <SubagentFooter />
+                  </Show>
+                  <Show when={visible()}>
+                    <pluginRuntime.Slot
+                      name="session_prompt"
+                      mode="replace"
+                      session_id={route.sessionID}
                       visible={visible()}
-                      ref={bind}
                       disabled={disabled()}
-                      onSubmit={() => {
-                        toBottom()
-                      }}
-                      sessionID={route.sessionID}
-                      right={<pluginRuntime.Slot name="session_prompt_right" session_id={route.sessionID} />}
-                    />
-                  </pluginRuntime.Slot>
-                </Show>
-              </box>
+                      on_submit={toBottom}
+                      ref={bind}
+                    >
+                      <Prompt
+                        visible={visible()}
+                        ref={bind}
+                        disabled={disabled()}
+                        onSubmit={() => {
+                          toBottom()
+                        }}
+                        sessionID={route.sessionID}
+                        right={<pluginRuntime.Slot name="session_prompt_right" session_id={route.sessionID} />}
+                      />
+                    </pluginRuntime.Slot>
+                  </Show>
+                </box>
+              </Show>
+              <Toast />
+            </box>
+            <Show when={sidebarVisible()}>
+              <Switch>
+                <Match when={wide()}>
+                  <Sidebar sessionID={route.sessionID} />
+                </Match>
+                <Match when={!wide()}>
+                  <box
+                    position="absolute"
+                    top={0}
+                    left={0}
+                    right={0}
+                    bottom={0}
+                    alignItems="flex-end"
+                    backgroundColor={RGBA.fromInts(0, 0, 0, 70)}
+                  >
+                    <Sidebar sessionID={route.sessionID} />
+                  </box>
+                </Match>
+              </Switch>
             </Show>
-            <Toast />
           </box>
-          <Show when={sidebarVisible()}>
-            <Switch>
-              <Match when={wide()}>
-                <Sidebar sessionID={route.sessionID} />
-              </Match>
-              <Match when={!wide()}>
-                <box
-                  position="absolute"
-                  top={0}
-                  left={0}
-                  right={0}
-                  bottom={0}
-                  alignItems="flex-end"
-                  backgroundColor={RGBA.fromInts(0, 0, 0, 70)}
-                >
-                  <Sidebar sessionID={route.sessionID} />
-                </box>
-              </Match>
-            </Switch>
-          </Show>
         </box>
       </context.Provider>
     </LocationProvider>
@@ -2006,7 +2053,7 @@ function BlockTool(props: {
       gap={1}
       backgroundColor={hover() ? theme.backgroundMenu : theme.backgroundPanel}
       customBorderChars={SplitBorder.customBorderChars}
-      borderColor={theme.background}
+      borderColor={theme.border}
       onMouseOver={() => props.onClick && setHover(true)}
       onMouseOut={() => setHover(false)}
       onMouseUp={() => {
diff --git a/packages/tui/src/theme/assets/carbon.json b/packages/tui/src/theme/assets/carbon.json
new file mode 100644
index 000000000000..a1538e363cd6
--- /dev/null
+++ b/packages/tui/src/theme/assets/carbon.json
@@ -0,0 +1,255 @@
+{
+  "$schema": "https://opencode.ai/theme.json",
+  "defs": {
+    "darkBg": "#030403",
+    "darkBgPanel": "#080b09",
+    "darkBgElement": "#0d120f",
+    "darkBgMenu": "#101711",
+    "darkGreen": "#00e676",
+    "darkGreenHi": "#48ffa0",
+    "darkGreenDeep": "#00a854",
+    "darkWhite": "#f2f6f3",
+    "darkText": "#dce5df",
+    "darkMuted": "#5d6c63",
+    "darkFaint": "#313d36",
+    "darkLine": "#1c2620",
+    "darkLineSubtle": "#121814",
+    "darkTeal": "#6fd6b8",
+    "darkWarn": "#e8c268",
+    "darkErr": "#f26d76",
+    "darkAdd": "#35d97c",
+    "darkAddBg": "#0a2416",
+    "darkDelBg": "#26141a",
+    "darkInk": "#02180c",
+    "lightBg": "#fafcfa",
+    "lightBgPanel": "#f1f5f2",
+    "lightBgElement": "#e6ede8",
+    "lightBgMenu": "#dfe8e2",
+    "lightGreen": "#067d4e",
+    "lightGreenHi": "#0aa864",
+    "lightGreenDeep": "#0a5c3c",
+    "lightWhite": "#0b1410",
+    "lightText": "#25332c",
+    "lightMuted": "#64756c",
+    "lightFaint": "#a9b8af",
+    "lightLine": "#d7e1da",
+    "lightLineSubtle": "#e4ece6",
+    "lightTeal": "#0f7a63",
+    "lightWarn": "#a3781a",
+    "lightErr": "#c23540",
+    "lightAdd": "#12824a",
+    "lightAddBg": "#ddf2e4",
+    "lightDelBg": "#f9e0e3"
+  },
+  "theme": {
+    "primary": {
+      "dark": "darkGreen",
+      "light": "lightGreen"
+    },
+    "secondary": {
+      "dark": "darkGreenDeep",
+      "light": "lightGreenDeep"
+    },
+    "accent": {
+      "dark": "darkGreenHi",
+      "light": "lightGreenHi"
+    },
+    "error": {
+      "dark": "darkErr",
+      "light": "lightErr"
+    },
+    "warning": {
+      "dark": "darkWarn",
+      "light": "lightWarn"
+    },
+    "success": {
+      "dark": "darkAdd",
+      "light": "lightAdd"
+    },
+    "info": {
+      "dark": "darkTeal",
+      "light": "lightTeal"
+    },
+    "text": {
+      "dark": "darkText",
+      "light": "lightText"
+    },
+    "textMuted": {
+      "dark": "darkMuted",
+      "light": "lightMuted"
+    },
+    "selectedListItemText": {
+      "dark": "darkInk",
+      "light": "lightBg"
+    },
+    "background": {
+      "dark": "darkBg",
+      "light": "lightBg"
+    },
+    "backgroundPanel": {
+      "dark": "darkBgPanel",
+      "light": "lightBgPanel"
+    },
+    "backgroundElement": {
+      "dark": "darkBgElement",
+      "light": "lightBgElement"
+    },
+    "backgroundMenu": {
+      "dark": "darkBgMenu",
+      "light": "lightBgMenu"
+    },
+    "border": {
+      "dark": "darkLine",
+      "light": "lightLine"
+    },
+    "borderActive": {
+      "dark": "darkGreen",
+      "light": "lightGreen"
+    },
+    "borderSubtle": {
+      "dark": "darkLineSubtle",
+      "light": "lightLineSubtle"
+    },
+    "diffAdded": {
+      "dark": "darkAdd",
+      "light": "lightAdd"
+    },
+    "diffRemoved": {
+      "dark": "darkErr",
+      "light": "lightErr"
+    },
+    "diffContext": {
+      "dark": "darkMuted",
+      "light": "lightMuted"
+    },
+    "diffHunkHeader": {
+      "dark": "darkGreenDeep",
+      "light": "lightGreenDeep"
+    },
+    "diffHighlightAdded": {
+      "dark": "darkGreenHi",
+      "light": "lightGreenHi"
+    },
+    "diffHighlightRemoved": {
+      "dark": "#ff8f98",
+      "light": "#a52833"
+    },
+    "diffAddedBg": {
+      "dark": "darkAddBg",
+      "light": "lightAddBg"
+    },
+    "diffRemovedBg": {
+      "dark": "darkDelBg",
+      "light": "lightDelBg"
+    },
+    "diffContextBg": {
+      "dark": "darkBgPanel",
+      "light": "lightBgPanel"
+    },
+    "diffLineNumber": {
+      "dark": "darkFaint",
+      "light": "lightFaint"
+    },
+    "diffAddedLineNumberBg": {
+      "dark": "#0c2b1a",
+      "light": "#cdeada"
+    },
+    "diffRemovedLineNumberBg": {
+      "dark": "#2b181d",
+      "light": "#f3d3d7"
+    },
+    "markdownText": {
+      "dark": "darkText",
+      "light": "lightText"
+    },
+    "markdownHeading": {
+      "dark": "darkGreen",
+      "light": "lightGreen"
+    },
+    "markdownLink": {
+      "dark": "darkGreenHi",
+      "light": "lightGreenHi"
+    },
+    "markdownLinkText": {
+      "dark": "darkTeal",
+      "light": "lightTeal"
+    },
+    "markdownCode": {
+      "dark": "darkGreenHi",
+      "light": "lightGreenHi"
+    },
+    "markdownBlockQuote": {
+      "dark": "darkMuted",
+      "light": "lightMuted"
+    },
+    "markdownEmph": {
+      "dark": "darkWarn",
+      "light": "lightWarn"
+    },
+    "markdownStrong": {
+      "dark": "darkWhite",
+      "light": "lightWhite"
+    },
+    "markdownHorizontalRule": {
+      "dark": "darkLine",
+      "light": "lightLine"
+    },
+    "markdownListItem": {
+      "dark": "darkGreen",
+      "light": "lightGreen"
+    },
+    "markdownListEnumeration": {
+      "dark": "darkGreenDeep",
+      "light": "lightGreenDeep"
+    },
+    "markdownImage": {
+      "dark": "darkGreenHi",
+      "light": "lightGreenHi"
+    },
+    "markdownImageText": {
+      "dark": "darkTeal",
+      "light": "lightTeal"
+    },
+    "markdownCodeBlock": {
+      "dark": "darkText",
+      "light": "lightText"
+    },
+    "syntaxComment": {
+      "dark": "darkMuted",
+      "light": "lightMuted"
+    },
+    "syntaxKeyword": {
+      "dark": "darkGreen",
+      "light": "lightGreen"
+    },
+    "syntaxFunction": {
+      "dark": "darkGreenHi",
+      "light": "lightGreenHi"
+    },
+    "syntaxVariable": {
+      "dark": "darkText",
+      "light": "lightText"
+    },
+    "syntaxString": {
+      "dark": "darkAdd",
+      "light": "lightAdd"
+    },
+    "syntaxNumber": {
+      "dark": "darkWarn",
+      "light": "lightWarn"
+    },
+    "syntaxType": {
+      "dark": "darkTeal",
+      "light": "lightTeal"
+    },
+    "syntaxOperator": {
+      "dark": "darkGreenDeep",
+      "light": "lightGreenDeep"
+    },
+    "syntaxPunctuation": {
+      "dark": "#93a49a",
+      "light": "#4d5c54"
+    },
+    "thinkingOpacity": 0.6
+  }
+}
diff --git a/packages/tui/src/theme/index.ts b/packages/tui/src/theme/index.ts
index e8a5f2c5a973..3a50d737fece 100644
--- a/packages/tui/src/theme/index.ts
+++ b/packages/tui/src/theme/index.ts
@@ -1,6 +1,7 @@
 import { SyntaxStyle, RGBA, type TerminalColors } from "@opentui/core"
 import aura from "./assets/aura.json" with { type: "json" }
 import ayu from "./assets/ayu.json" with { type: "json" }
+import carbon from "./assets/carbon.json" with { type: "json" }
 import carbonfox from "./assets/carbonfox.json" with { type: "json" }
 import catppuccinFrappe from "./assets/catppuccin-frappe.json" with { type: "json" }
 import catppuccinMacchiato from "./assets/catppuccin-macchiato.json" with { type: "json" }
@@ -130,6 +131,7 @@ export type ThemeJson = {
 export const DEFAULT_THEMES: Record<string, ThemeJson> = {
   aura,
   ayu,
+  carbon,
   catppuccin,
   ["catppuccin-frappe"]: catppuccinFrappe,
   ["catppuccin-macchiato"]: catppuccinMacchiato,
diff --git a/packages/tui/src/util/presentation.ts b/packages/tui/src/util/presentation.ts
index 98f517cbdf38..5f51f702a87b 100644
--- a/packages/tui/src/util/presentation.ts
+++ b/packages/tui/src/util/presentation.ts
@@ -1,35 +1,22 @@
-const logo = {
-  left: ["     ", "█▀▀▄ ", "█__█ ", "▀▀▀  "],
-  right: ["                   ", "█▀▀▀ █▀▀█ █▀▀▄ █▀▀▀", "█___ █__█ █__█ █^^^", "▀▀▀▀ ▀▀▀▀ ▀~~▀ ▀▀▀▀"],
-}
+import { logo } from "../logo"
 
 const reset = "\x1b[0m"
 const bold = "\x1b[1m"
 const dim = "\x1b[90m"
+const white = "\x1b[97m"
+const green = "\x1b[38;2;0;230;118m"
 
 function wordmark(pad = "") {
-  const draw = (line: string, fg: string, shadow: string, bg: string) =>
-    [...line]
-      .map((char) => {
-        if (char === "_") return `${bg} ${reset}`
-        if (char === "^") return `${fg}${bg}▀${reset}`
-        if (char === "~") return `${shadow}▀${reset}`
-        if (char === " ") return " "
-        return `${fg}${char}${reset}`
-      })
-      .join("")
-
-  return logo.left.map((line, index) => {
-    const left = draw(line, dim, "\x1b[38;5;235m", "\x1b[48;5;235m")
-    const right = draw(logo.right[index] ?? "", reset, "\x1b[38;5;238m", "\x1b[48;5;238m")
-    return `${pad}${left} ${right}`
-  })
+  return logo.left.map(
+    (line, index) => `${pad}${bold}${white}${line}${reset} ${bold}${green}${logo.right[index] ?? ""}${reset}`,
+  )
 }
 
 export function sessionEpilogue(input: { title: string; sessionID?: string }) {
   const weak = (text: string) => `${dim}${text.padEnd(10, " ")}${reset}`
   return [
     ...wordmark("  "),
+    `  ${green}━━━━━━━━${reset}`,
     "",
     `  ${weak("Session")}${bold}${input.title}${reset}`,
     `  ${weak("Continue")}${bold}dcode -s ${input.sessionID}${reset}`,

From 8118baf6c1f06bf345a93c72e5243623ef3096fa Mon Sep 17 00:00:00 2001
From: CreatorGhost <cybercreed010@gmail.com>
Date: Sat, 11 Jul 2026 23:28:39 +0530
Subject: [PATCH 2/2] fix(tui): address CodeRabbit review on carbon UI

- Disabled-aware cursor color in all three assignment paths
- Width-aware session strip title truncation with shrinkable left segment
- Remove redundant decode_theme fallback in values() memo
- Move BAR_WIDTH above its usage
---
 packages/tui/src/component/prompt/index.tsx          | 5 ++---
 packages/tui/src/context/theme.tsx                   | 7 -------
 packages/tui/src/feature-plugins/sidebar/context.tsx | 4 ++--
 packages/tui/src/routes/session/index.tsx            | 6 ++++--
 4 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/packages/tui/src/component/prompt/index.tsx b/packages/tui/src/component/prompt/index.tsx
index 3e284200fe24..02f6342605c8 100644
--- a/packages/tui/src/component/prompt/index.tsx
+++ b/packages/tui/src/component/prompt/index.tsx
@@ -246,8 +246,7 @@ export function Prompt(props: PromptProps) {
 
   createEffect(() => {
     if (!input || input.isDestroyed) return
-    if (props.disabled) input.cursorColor = theme.backgroundElement
-    if (!props.disabled) input.cursorColor = theme.text
+    input.cursorColor = props.disabled ? theme.backgroundElement : theme.primary
   })
 
   const lastUserMessage = createMemo(() => {
@@ -1422,7 +1421,7 @@ export function Prompt(props: PromptProps) {
                   setTimeout(() => {
                     // setTimeout is a workaround and needs to be addressed properly
                     if (!input || input.isDestroyed) return
-                    input.cursorColor = theme.primary
+                    input.cursorColor = props.disabled ? theme.backgroundElement : theme.primary
                   }, 0)
                 }}
                 onMouseDown={(r: MouseEvent) => r.target?.focus()}
diff --git a/packages/tui/src/context/theme.tsx b/packages/tui/src/context/theme.tsx
index d3441e3f9256..75c713b3a180 100644
--- a/packages/tui/src/context/theme.tsx
+++ b/packages/tui/src/context/theme.tsx
@@ -254,13 +254,6 @@ export const { use: useTheme, provider: ThemeProvider } = createSimpleContext({
     const values = createMemo(() => {
       const active = store.themes[store.active]
       if (active) return resolveTheme(active, store.mode)
-
-      const saved = kv.get("decode_theme")
-      if (typeof saved === "string") {
-        const theme = store.themes[saved]
-        if (theme) return resolveTheme(theme, store.mode)
-      }
-
       return resolveTheme(store.themes[DEFAULT_THEME], store.mode)
     })
 
diff --git a/packages/tui/src/feature-plugins/sidebar/context.tsx b/packages/tui/src/feature-plugins/sidebar/context.tsx
index 29965ea9b389..a0554791e911 100644
--- a/packages/tui/src/feature-plugins/sidebar/context.tsx
+++ b/packages/tui/src/feature-plugins/sidebar/context.tsx
@@ -10,6 +10,8 @@ const money = new Intl.NumberFormat("en-US", {
   currency: "USD",
 })
 
+const BAR_WIDTH = 24
+
 function View(props: { api: TuiPluginApi; session_id: string }) {
   const theme = () => props.api.theme.current
   const msg = createMemo(() => props.api.state.session.messages(props.session_id))
@@ -61,8 +63,6 @@ function View(props: { api: TuiPluginApi; session_id: string }) {
   )
 }
 
-const BAR_WIDTH = 24
-
 const tui: TuiPlugin = async (api) => {
   api.slots.register({
     order: 100,
diff --git a/packages/tui/src/routes/session/index.tsx b/packages/tui/src/routes/session/index.tsx
index bd75dfdd83c9..de6a38fafa08 100644
--- a/packages/tui/src/routes/session/index.tsx
+++ b/packages/tui/src/routes/session/index.tsx
@@ -1187,11 +1187,13 @@ export function Session() {
             paddingRight={2}
             backgroundColor={theme.backgroundPanel}
           >
-            <text fg={theme.textMuted} wrapMode="none">
+            <text fg={theme.textMuted} wrapMode="none" flexShrink={1} minWidth={0}>
               <span style={{ fg: theme.text, bold: true }}>de</span>
               <span style={{ fg: theme.primary, bold: true }}>code</span>
               <span> │ </span>
-              <span>{Locale.truncate(session()?.title ?? "", 60)}</span>
+              <span>
+                {Locale.truncate(session()?.title ?? "", Math.max(10, Math.min(60, dimensions().width - 55)))}
+              </span>
               <span style={{ fg: theme.textMuted }}> · {route.sessionID.slice(0, 10)}</span>
             </text>
             <Show when={budget()}>