feat(tui): crush-inspired gradient UI, session header, and prompt styling

packages/opencode/src/cli/ui.ts

@@ -1,16 +1,11 @@
 import { EOL } from "os"
 import { Schema } from "effect"
 import { logo as glyphs } from "./logo"
-const wordmark = [
-  ` /$$$$$$$   /$$$$$$  /$$   /$$$$$$$$         /$$$$$$  /$$       /$$$$$$ `,
-  `| $$__  $$ /$$__  $$| $$  |__  $$__/        /$$__  $$| $$      |_  $$_/ `,
-  `| $$  \\ $$| $$  \\ $$| $$     | $$          | $$  \\__/| $$        | $$   `,
-  `| $$$$$$$ | $$  | $$| $$     | $$          | $$      | $$        | $$   `,
-  `| $$__  $$| $$  | $$| $$     | $$          | $$      | $$        | $$   `,
-  `| $$  \\ $$| $$  | $$| $$     | $$          | $$    $$| $$        | $$   `,
-  `| $$$$$$$/|  $$$$$$/| $$$$$$$| $$          |  $$$$$$/| $$$$$$$$ /$$$$$$ `,
-  `|_______/  \\______/ |________|__/           \\______/ |________/|______/ `,
-]
+
+// Gradient endpoints for the wordmark, matching the bolt theme's accent
+// (#63d9ff) and primary (#2d7bff) colors.
+const GRADIENT_FROM = [0x63, 0xd9, 0xff] as const
+const GRADIENT_TO = [0x2d, 0x7b, 0xff] as const
 
 export class CancelledError extends Schema.TaggedErrorClass<CancelledError>()("UICancelledError", {}) {}
 
@@ -49,58 +44,49 @@ export function empty() {
 }
 
 export function logo(pad?: string) {
+  const leftWidth = glyphs.left[0]!.length
+  const totalWidth = leftWidth + 1 + glyphs.right[0]!.length
+
   if (!process.stdout.isTTY && !process.stderr.isTTY) {
-    const result = []
-    for (const row of wordmark) {
-      if (pad) result.push(pad)
-      result.push(row)
-      result.push(EOL)
-    }
-    return result.join("").trimEnd()
+    return glyphs.left.map((row, index) => (pad ?? "") + row + " " + (glyphs.right[index] ?? "")).join(EOL)
   }
 
-  const result: string[] = []
   const reset = "\x1b[0m"
-  const left = {
-    fg: Style.TEXT_INFO,
-    shadow: "\x1b[38;5;235m",
-    bg: "\x1b[48;5;235m",
-  }
-  const right = {
-    fg: reset,
-    shadow: "\x1b[38;5;238m",
-    bg: "\x1b[48;5;238m",
+  const shadow = "\x1b[38;5;236m"
+  const fg = (rgb: readonly [number, number, number]) => `\x1b[38;2;${rgb[0]};${rgb[1]};${rgb[2]}m`
+  const gradient = (column: number) => {
+    const t = column / (totalWidth - 1)
+    return fg(
+      [0, 1, 2].map((i) => Math.round(GRADIENT_FROM[i]! + (GRADIENT_TO[i]! - GRADIENT_FROM[i]!) * t)) as unknown as [
+        number,
+        number,
+        number,
+      ],
+    )
   }
-  const gap = " "
-  const draw = (line: string, fg: string, shadow: string, bg: string) => {
+
+  const draw = (line: string, offset: number, bold: boolean) => {
     const parts: string[] = []
-    for (const char of line) {
-      if (char === "_") {
-        parts.push(bg, " ", reset)
-        continue
-      }
-      if (char === "^") {
-        parts.push(fg, bg, "▀", reset)
-        continue
-      }
-      if (char === "~") {
-        parts.push(shadow, "▀", reset)
-        continue
-      }
+    Array.from(line).forEach((char, column) => {
       if (char === " ") {
         parts.push(" ")
-        continue
+        return
+      }
+      if (char === "_") {
+        parts.push(shadow, "_", reset)
+        return
       }
-      parts.push(fg, char, reset)
-    }
+      parts.push(gradient(offset + column), bold ? "\x1b[1m" : "", char, reset)
+    })
     return parts.join("")
   }
+
+  const result: string[] = []
   glyphs.left.forEach((row, index) => {
     if (pad) result.push(pad)
-    result.push(draw(row, left.fg, left.shadow, left.bg))
-    result.push(gap)
-    const other = glyphs.right[index] ?? ""
-    result.push(draw(other, right.fg, right.shadow, right.bg))
+    result.push(draw(row, 0, false))
+    result.push(" ")
+    result.push(draw(glyphs.right[index] ?? "", leftWidth + 1, true))
     result.push(EOL)
   })
   return result.join("").trimEnd()

packages/tui/src/component/logo.tsx

@@ -1,15 +1,23 @@
-import { RGBA, TextAttributes } from "@opentui/core"
+import { TextAttributes } from "@opentui/core"
 import { For, type JSX } from "solid-js"
 import { tint, useTheme } from "../context/theme"
 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 leftWidth = logo.left[0]?.length ?? 0
+  const totalWidth = leftWidth + 1 + (logo.right[0]?.length ?? 0)
+
+  // Horizontal gradient across the whole wordmark, accent to primary.
+  const gradient = (column: number) =>
+    tint(theme.accent, theme.primary, totalWidth <= 1 ? 1 : column / (totalWidth - 1))
+
+  const renderLine = (line: string, offset: number, bold: boolean): JSX.Element[] => {
     const attrs = bold ? TextAttributes.BOLD : undefined
-    return Array.from(line).map((char) => {
+    return Array.from(line).map((char, column) => {
+      const fg = gradient(offset + column)
+      const shadow = tint(theme.background, fg, 0.25)
       if (char === "_") {
         return (
           <text fg={fg} bg={shadow} attributes={attrs} selectable={false}>
@@ -51,9 +59,9 @@ export function Logo() {
       <For each={logo.left}>
         {(line, index) => (
           <box flexDirection="row" gap={1}>
-            <box flexDirection="row">{renderLine(line, RGBA.fromHex("#0062ff"), false)}</box>
+            <box flexDirection="row">{renderLine(line, 0, false)}</box>
             {/* Safely access logo.right with fallback to empty string */}
-            <box flexDirection="row">{renderLine(logo.right[index()] ?? "", RGBA.fromHex("#ff0000"), true)}</box>
+            <box flexDirection="row">{renderLine(logo.right[index()] ?? "", leftWidth + 1, true)}</box>
           </box>
         )}
       </For>

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

@@ -0,0 +1,78 @@
+import { TextAttributes } from "@opentui/core"
+import { createMemo, For, Show } from "solid-js"
+import { useSync } from "../../context/sync"
+import { tint, useTheme } from "../../context/theme"
+import { Locale } from "../../util/locale"
+
+const BRAND = "BOLT CLI"
+
+// Three-line session header: a gradient brand row with a thin rule, the
+// current session line, and a subagent activity line.
+export function SessionHeader(props: { sessionID: string; width: number }) {
+  const { theme } = useTheme()
+  const sync = useSync()
+
+  const session = createMemo(() => sync.session.get(props.sessionID))
+  const sessions = createMemo(() => sync.data.session.filter((x) => !x.parentID))
+  const subagents = createMemo(() => {
+    const parentID = session()?.parentID ?? props.sessionID
+    return sync.data.session.filter((x) => x.parentID === parentID).toSorted((a, b) => a.time.created - b.time.created)
+  })
+  const working = (id: string) => (sync.data.session_status[id]?.type ?? "idle") !== "idle"
+
+  const gradient = (column: number) => tint(theme.accent, theme.primary, column / (BRAND.length - 1))
+
+  const label = (title: string, max: number) => {
+    const match = title.match(/@(\w+) subagent/)
+    const text = match ? Locale.titlecase(match[1]!) : title
+    return text.length > max ? text.slice(0, max - 1) + "…" : text
+  }
+
+  return (
+    <box flexShrink={0} paddingTop={1}>
+      <box flexDirection="row" gap={1}>
+        <text selectable={false}>
+          {Array.from(BRAND).map((char, column) => (
+            <span style={{ fg: gradient(column), attributes: TextAttributes.BOLD }}>{char}</span>
+          ))}
+        </text>
+        <text fg={theme.border} selectable={false} wrapMode="none">
+          {"─".repeat(Math.max(0, props.width - BRAND.length - 1))}
+        </text>
+      </box>
+      <box flexDirection="row" gap={1}>
+        <text fg={theme.primary}>●</text>
+        <text fg={theme.text} wrapMode="none">
+          {label(session()?.title ?? "untitled", Math.max(8, props.width - 20))}
+        </text>
+        <text fg={theme.textMuted} wrapMode="none">
+          · {sessions().length} {sessions().length === 1 ? "session" : "sessions"}
+        </text>
+      </box>
+      <Show
+        when={subagents().length > 0}
+        fallback={
+          <text fg={theme.textMuted} wrapMode="none">
+            no subagent work
+          </text>
+        }
+      >
+        <box flexDirection="row" gap={2}>
+          <For each={subagents().slice(-3)}>
+            {(child) => (
+              <box flexDirection="row" gap={1}>
+                <text fg={working(child.id) ? theme.success : theme.textMuted}>{working(child.id) ? "◉" : "○"}</text>
+                <text fg={working(child.id) ? theme.text : theme.textMuted} wrapMode="none">
+                  {label(child.title, 24)}
+                </text>
+              </box>
+            )}
+          </For>
+          <Show when={subagents().length > 3}>
+            <text fg={theme.textMuted}>+{subagents().length - 3} more</text>
+          </Show>
+        </box>
+      </Show>
+    </box>
+  )
+}

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

@@ -59,6 +59,7 @@ import { DialogTodos } from "../../component/dialog-todos"
 
 import { Sidebar } from "./sidebar"
 import { SubagentFooter } from "./subagent-footer.tsx"
+import { SessionHeader } from "./header.tsx"
 import { filetype } from "../../util/filetype"
 import parsers from "../../parsers-config"
 import { errorMessage } from "../../util/error"
@@ -1244,6 +1245,7 @@ export function Session() {
         <box flexDirection="row" flexGrow={1} minHeight={0}>
           <box flexGrow={1} minHeight={0} paddingBottom={1} paddingLeft={2} paddingRight={2} gap={1}>
             <Show when={session()}>
+              <SessionHeader sessionID={route.sessionID} width={contentWidth()} />
               <scrollbox
                 ref={(r) => (scroll = r)}
                 viewportOptions={{