|
| 1 | +import { createMemo, createSignal, Show } from "solid-js" |
| 2 | +import type { JSX } from "@opentui/solid" |
| 3 | +import type { RGBA } from "@opentui/core" |
| 4 | +import { useTheme } from "../../context/theme" |
| 5 | +import { useKV } from "../../context/kv" |
| 6 | +import type { Theme } from "../../theme" |
| 7 | +import { tint } from "../../theme" |
| 8 | +import { BRAILLE_FRAMES, GLYPH, RESULT_PREFIX, collapsedHint, expandedHint } from "../../ui/glyphs" |
| 9 | +import { registerOpencodeSpinner } from "../register-spinner" |
| 10 | + |
| 11 | +registerOpencodeSpinner() |
| 12 | + |
| 13 | +export type ToolVisualState = "pending" | "running" | "permission" | "complete" | "error" | "denied" |
| 14 | + |
| 15 | +/** |
| 16 | + * Canonical bullet/label colors for every tool state so "done", "running", |
| 17 | + * and "failed" read the same everywhere in the message flow. |
| 18 | + */ |
| 19 | +export function toolStateColor(theme: Theme, state: ToolVisualState): { dot: RGBA; label: RGBA } { |
| 20 | + switch (state) { |
| 21 | + case "pending": |
| 22 | + return { dot: theme.textMuted, label: theme.textMuted } |
| 23 | + case "running": |
| 24 | + return { dot: theme.primary, label: theme.text } |
| 25 | + case "permission": |
| 26 | + return { dot: theme.warning, label: theme.text } |
| 27 | + case "complete": |
| 28 | + return { dot: theme.success, label: theme.text } |
| 29 | + case "error": |
| 30 | + return { dot: theme.error, label: theme.text } |
| 31 | + case "denied": |
| 32 | + return { dot: theme.error, label: theme.textMuted } |
| 33 | + } |
| 34 | +} |
| 35 | + |
| 36 | +/** |
| 37 | + * A logical block: fixed 2-column bullet glyph followed by flowing content. |
| 38 | + * When `spinner` is set the glyph cell animates instead (braille frames). |
| 39 | + */ |
| 40 | +export function Bullet(props: { |
| 41 | + color: RGBA |
| 42 | + glyph?: string |
| 43 | + spinner?: boolean |
| 44 | + marginTop?: number |
| 45 | + children: JSX.Element |
| 46 | +}) { |
| 47 | + const kv = useKV() |
| 48 | + const { theme } = useTheme() |
| 49 | + // Breathing gradient: each braille frame nudges the base color toward the |
| 50 | + // theme accent on a triangle wave, so the spinner "pulses" instead of sitting |
| 51 | + // on one flat hue. Built once per color/accent pair to avoid per-frame churn. |
| 52 | + const gradient = createMemo(() => { |
| 53 | + const base = props.color |
| 54 | + const accent = theme.accent |
| 55 | + return (frameIndex: number, _charIndex: number, totalFrames: number) => { |
| 56 | + const phase = totalFrames > 1 ? frameIndex / (totalFrames - 1) : 0 |
| 57 | + const wave = 1 - Math.abs(phase * 2 - 1) |
| 58 | + return tint(base, accent, wave * 0.5) |
| 59 | + } |
| 60 | + }) |
| 61 | + return ( |
| 62 | + <box flexDirection="row" marginTop={props.marginTop}> |
| 63 | + <box width={2} flexShrink={0}> |
| 64 | + <Show |
| 65 | + when={props.spinner && kv.get("animations_enabled", true)} |
| 66 | + fallback={<text fg={props.color}>{props.spinner ? GLYPH.idleSpinner : (props.glyph ?? GLYPH.bullet)}</text>} |
| 67 | + > |
| 68 | + <spinner frames={BRAILLE_FRAMES} interval={80} color={gradient()} /> |
| 69 | + </Show> |
| 70 | + </box> |
| 71 | + <box flexGrow={1} flexShrink={1}> |
| 72 | + {props.children} |
| 73 | + </box> |
| 74 | + </box> |
| 75 | + ) |
| 76 | +} |
| 77 | + |
| 78 | +/** |
| 79 | + * Hanging-indent result line(s) under a Bullet: `⎿ content`. |
| 80 | + */ |
| 81 | +export function ResultBlock(props: { color?: RGBA; children: JSX.Element }) { |
| 82 | + const { theme } = useTheme() |
| 83 | + return ( |
| 84 | + <box flexDirection="row"> |
| 85 | + <box width={RESULT_PREFIX.length} flexShrink={0}> |
| 86 | + <text fg={props.color ?? theme.textMuted}>{GLYPH.result}</text> |
| 87 | + </box> |
| 88 | + <box flexGrow={1} flexShrink={1}> |
| 89 | + {props.children} |
| 90 | + </box> |
| 91 | + </box> |
| 92 | + ) |
| 93 | +} |
| 94 | + |
| 95 | +/** |
| 96 | + * The one true collapse/expand affordance: `… +N lines (<shortcut> expand)`. |
| 97 | + */ |
| 98 | +export function CollapsedHint(props: { |
| 99 | + hidden: number |
| 100 | + expanded: boolean |
| 101 | + onToggle: () => void |
| 102 | + shortcut?: string |
| 103 | + color?: RGBA |
| 104 | +}) { |
| 105 | + const { theme } = useTheme() |
| 106 | + const [hover, setHover] = createSignal(false) |
| 107 | + return ( |
| 108 | + <box |
| 109 | + flexDirection="row" |
| 110 | + onMouseOver={() => setHover(true)} |
| 111 | + onMouseOut={() => setHover(false)} |
| 112 | + onMouseUp={() => props.onToggle()} |
| 113 | + > |
| 114 | + <text fg={hover() ? theme.text : (props.color ?? theme.textMuted)}> |
| 115 | + {props.expanded ? expandedHint(props.shortcut) : collapsedHint(props.hidden, props.shortcut)} |
| 116 | + </text> |
| 117 | + </box> |
| 118 | + ) |
| 119 | +} |
0 commit comments