@elliotsystems/eai 0.1.2 → 0.1.3

package/plugin/opencode-plugin/src/tui/index.tsx

@@ -0,0 +1,99 @@
+/**
+ * Elliot AI TUI chrome.
+ *
+ * Fills the host's public plugin slots — nothing here edits OpenCode. That is
+ * what keeps the whole redesign at zero fork divergence, and it is also the
+ * ceiling on it: the session transcript exposes no slot but the prompt, so
+ * message and tool-call rendering stay upstream's. The boundary, with call
+ * sites, is documented in `docs/opencode/TUI-REDESIGN.md`.
+ *
+ * Registration happens in two passes because `order` is per-registration, not
+ * per-slot, and the sidebar needs a different position than everything else.
+ */
+import { HomeBottom } from "./home.js"
+import { HomePrompt, SessionPrompt } from "./prompt.js"
+import { SidebarContent, SidebarFooter, SidebarTitle } from "./sidebar.js"
+import { Wordmark } from "./wordmark.js"
+import type { SessionSlotProps, TuiPluginApi, TuiPlugin } from "./api.js"
+
+/**
+ * Ahead of every built-in sidebar section (context 100, mcp 200, lsp 300,
+ * todo 400, files 500), so what Elliot adds is read before what OpenCode
+ * reports.
+ */
+const SIDEBAR_ORDER = 50
+
+/**
+ * Above the built-in home plugins (`internal:home-tips` and `internal:which-key`
+ * both register at 100–200) so Elliot's chrome sorts after theirs in append
+ * slots, and wins the `single_winner` ones.
+ */
+const CHROME_ORDER = 200
+
+/**
+ * The theme file, relative to the plugin root.
+ *
+ * Installing it is REQUIRED, not a nicety. Theme discovery scans only
+ * `themes/*.json` under the global config directory and each `.opencode`
+ * directory up from the cwd (`packages/tui/src/context/theme.tsx:38`), so
+ * `opencode-plugin/themes/elliot.json` is never found on its own — which is why
+ * `tui.json`'s `"theme": "elliot"` silently fell back to the default palette and
+ * the Elliot theme had never actually applied. `api.theme.install` copies the
+ * file to a scanned location, which is what the package's `oc-themes` field was
+ * always gesturing at.
+ */
+const THEME_FILE = "themes/elliot.json"
+
+/**
+ * Required, not optional, and it must also be carried on the DEFAULT export
+ * below -- `readV1Plugin` (`plugin/shared.ts:278`) hands the host `mod.default`,
+ * so a bare named export is never read. `tui.json` names this plugin by a relative path, so
+ * the host classifies it `source: "file"` (`plugin/shared.ts:57`) and
+ * `resolvePluginId` (`:306`) THROWS for a path plugin that exports no `id`.
+ * That throw is reported via `console.error`, which the alternate screen
+ * swallows -- so the plugin silently did not load, and the missing `id` was
+ * read for months as "TUI plugin loading is broken in the runtime"
+ * (docs/opencode/TUI-REDESIGN.md 6.2). It is not: this export is the fix.
+ */
+export const id = "@elliotsystems/opencode-plugin"
+
+export const tui: TuiPlugin = async (api) => {
+  // Never fatal: a chrome that refuses to load because a colour file could not
+  // be copied is worse than one that renders in the default palette.
+  await api.theme.install(THEME_FILE).catch(() => {})
+
+  api.slots.register({
+    order: SIDEBAR_ORDER,
+    slots: {
+      sidebar_content: (_context: unknown, slot: SessionSlotProps) => (
+        <SidebarContent api={api} slot={slot} />
+      ),
+    },
+  })
+
+  api.slots.register({
+    order: CHROME_ORDER,
+    slots: {
+      home_logo: () => <Wordmark api={api} />,
+      home_bottom: () => <HomeBottom api={api} />,
+      home_prompt: (_context: unknown, slot: { ref?: (ref: unknown) => void }) => (
+        <HomePrompt api={api} slot={slot} />
+      ),
+      session_prompt: (_context: unknown, slot: SessionSlotProps) => (
+        <SessionPrompt api={api} slot={slot} />
+      ),
+      sidebar_title: (_context: unknown, slot: SessionSlotProps & { title: string }) => (
+        <SidebarTitle api={api} slot={slot} />
+      ),
+      sidebar_footer: () => <SidebarFooter api={api} />,
+    },
+  })
+}
+
+/**
+ * The host requires a default export with `tui()` — and refuses a module that
+ * default-exports both `server()` and `tui()` (`plugin/shared.ts:294`). That is
+ * why this lives behind its own export subpath instead of the package root,
+ * which keeps default-exporting the server plugin.
+ */
+export default { id, tui }

package/plugin/opencode-plugin/src/tui/knowledge.ts

@@ -0,0 +1,243 @@
+/**
+ * Reading Elliot's knowledge activity out of what the TUI already has.
+ *
+ * The sidebar shows two things a stock OpenCode sidebar cannot: whether the
+ * knowledge boundary is actually up, and which sources Elliot cited in THIS
+ * session. Both are derived from `api.state` alone — MCP status and the
+ * session's own tool parts.
+ *
+ * It deliberately does NOT call Elliot's backend. The server plugin's contract
+ * (`src/index.ts`) is that OAuth lifecycle belongs to OpenCode's native MCP
+ * client and a second credential path must not exist; a sidebar that fetched
+ * `get_index_stats` itself would be exactly that second path. So index totals
+ * are absent here rather than approximated, and everything below is either
+ * proven from session state or not shown.
+ */
+
+import { knowledgeToolKey } from "../mcp-keys.js"
+
+// ------------------------------------------------------------- host shapes --
+
+/** `TuiSidebarMcpItem` (packages/plugin/src/tui.ts) — the fields we read. */
+export interface McpItem {
+  readonly name: string
+  readonly status: string
+  readonly error?: string
+}
+
+/** A `ToolPart` in its completed state, narrowed to what a citation needs. */
+export interface ToolPartLike {
+  readonly type: string
+  readonly tool?: string
+  readonly state?: {
+    readonly status?: string
+    readonly output?: string
+  }
+}
+
+// ------------------------------------------------------- connection status --
+
+export type KnowledgeConnection = {
+  /** `undefined` when no Elliot MCP server is configured at all. */
+  readonly status: "connected" | "failed" | "pending" | undefined
+  readonly name?: string
+  readonly error?: string
+}
+
+/**
+ * Which MCP server is Elliot's.
+ *
+ * Matched by name rather than by URL because the name is what the operator
+ * chose in `opencode.json` and what the agent sees prefixed onto the tool
+ * (`elliot_knowledge_search`). A substring match keeps `elliot`, `elliot-dev`
+ * and `elliot-staging` all recognised.
+ */
+function isElliotServer(name: string): boolean {
+  return name.toLowerCase().includes("elliot")
+}
+
+/**
+ * The knowledge boundary's real state.
+ *
+ * A failed server outranks a connected one when several match: the panel exists
+ * to surface the problem, and reporting "connected" while a configured Elliot
+ * server is down is the one output that would actively mislead.
+ */
+export function knowledgeConnection(items: readonly McpItem[]): KnowledgeConnection {
+  const elliot = items.filter((item) => isElliotServer(item.name))
+  if (elliot.length === 0) return { status: undefined }
+
+  const failed = elliot.find((item) => item.status === "failed")
+  if (failed) return { status: "failed", name: failed.name, error: failed.error }
+
+  const connected = elliot.find((item) => item.status === "connected")
+  if (connected) return { status: "connected", name: connected.name }
+
+  return { status: "pending", name: elliot[0]!.name }
+}
+
+// -------------------------------------------------------------- citations --
+
+/** One source Elliot cited, as rendered by the backend's evidence formatter. */
+export interface Citation {
+  readonly path: string
+  readonly symbol?: string
+}
+
+export type KnowledgeResult = {
+  readonly status: "ok" | "no_results" | "repo_not_authorized" | "unavailable"
+  readonly repoScope?: string
+  readonly resultCount: number
+  readonly citations: readonly Citation[]
+}
+
+/** The Elliot-looking MCP servers currently configured, by name. */
+export function elliotServerNames(items: readonly McpItem[]): string[] {
+  return items.filter((item) => isElliotServer(item.name)).map((item) => item.name)
+}
+
+/**
+ * Is this agent-visible tool key an Elliot knowledge lookup?
+ *
+ * Exact composed-key match against the configured servers, mirroring
+ * `isElliotKnowledgeTool` in `policy.ts` rather than matching the
+ * `knowledge_search` suffix. Suffix matching is rejected there because it would
+ * let an unrelated server named e.g. `not-elliot` be treated as ours; the same
+ * reasoning applies to a panel that would otherwise attribute a third party's
+ * results to Elliot.
+ */
+export function isKnowledgeTool(tool: string | undefined, serverNames: readonly string[]): boolean {
+  if (typeof tool !== "string") return false
+  return serverNames.some((name) => tool === knowledgeToolKey(name))
+}
+
+/**
+ * Parse one completed `knowledge_search` output.
+ *
+ * The output string is the backend's envelope, JSON-encoded
+ * (`backend/app/routers/mcp_v1.py:229` wraps `render_knowledge_evidence` in a
+ * single text content block): `{status, repo_scope?, result_count?, evidence}`.
+ *
+ * This is a real coupling to that shape, so it is written to go SILENT rather
+ * than wrong if the shape changes — every branch returns `undefined` on
+ * anything unexpected, and `test/tui-knowledge.test.ts` locks the contract so a
+ * backend change breaks a test instead of the sidebar.
+ */
+export function parseKnowledgeOutput(output: string | undefined): KnowledgeResult | undefined {
+  if (!output) return undefined
+
+  let envelope: unknown
+  try {
+    envelope = JSON.parse(output)
+  } catch {
+    return undefined
+  }
+  if (typeof envelope !== "object" || envelope === null) return undefined
+
+  const record = envelope as Record<string, unknown>
+  const status = record["status"]
+  if (
+    status !== "ok" &&
+    status !== "no_results" &&
+    status !== "repo_not_authorized" &&
+    status !== "unavailable"
+  ) {
+    return undefined
+  }
+
+  const repoScope = typeof record["repo_scope"] === "string" ? record["repo_scope"] : undefined
+  const resultCount = typeof record["result_count"] === "number" ? record["result_count"] : 0
+  const evidence = typeof record["evidence"] === "string" ? record["evidence"] : ""
+
+  return {
+    status,
+    repoScope,
+    resultCount,
+    citations: status === "ok" ? parseEvidence(evidence, resultCount) : [],
+  }
+}
+
+/** The backend joins evidence entries with this exact delimiter. */
+const ENTRY_DELIMITER = "\n---\n"
+
+/** `path` or `path — symbol`, as `_render_knowledge_result` builds the header. */
+const HEADER = /^(\S+)(?: — (.+))?$/
+
+/**
+ * Pull the header line out of each evidence entry.
+ *
+ * `limit` is load-bearing, not defensive tidying. Chunk CONTENT is embedded in
+ * the same string, so a markdown chunk containing a `---` horizontal rule
+ * produces extra delimiters and therefore phantom entries. `result_count` is
+ * the backend's authoritative count, so honouring it caps the damage, and the
+ * header regex rejects the rest — a prose line has spaces and so cannot match.
+ */
+function parseEvidence(evidence: string, limit: number): Citation[] {
+  if (!evidence || limit <= 0) return []
+
+  const citations: Citation[] = []
+  const seen = new Set<string>()
+
+  for (const entry of evidence.split(ENTRY_DELIMITER)) {
+    if (citations.length >= limit) break
+
+    const header = entry.split("\n", 1)[0]?.trim()
+    if (!header) continue
+    const match = HEADER.exec(header)
+    if (!match) continue
+
+    const path = match[1]!
+    // Several chunks from one file are one source to a reader. The key is a
+    // JSON tuple rather than a joined string: any separator character could
+    // legitimately appear in a path or a symbol name, so joining risks two
+    // different (path, symbol) pairs collapsing into one key.
+    const key = JSON.stringify([path, match[2] ?? ""])
+    if (seen.has(key)) continue
+    seen.add(key)
+    citations.push(match[2] ? { path, symbol: match[2] } : { path })
+  }
+
+  return citations
+}
+
+/**
+ * Every knowledge lookup in this session, oldest first.
+ *
+ * Running and errored calls are skipped rather than shown as empty results:
+ * "cited nothing" and "has not finished" are different facts, and the sidebar
+ * must not merge them.
+ */
+export function collectKnowledgeResults(
+  parts: readonly ToolPartLike[],
+  serverNames: readonly string[],
+): KnowledgeResult[] {
+  const results: KnowledgeResult[] = []
+  for (const part of parts) {
+    if (part.type !== "tool") continue
+    if (!isKnowledgeTool(part.tool, serverNames)) continue
+    if (part.state?.status !== "completed") continue
+    const parsed = parseKnowledgeOutput(part.state.output)
+    if (parsed) results.push(parsed)
+  }
+  return results
+}
+
+/**
+ * The distinct sources cited across a session, most recent lookup first.
+ *
+ * Ordering matters for a panel that is height-bounded: the sources backing the
+ * answer currently on screen are the ones worth the rows.
+ */
+export function distinctCitations(results: readonly KnowledgeResult[], limit: number): Citation[] {
+  const out: Citation[] = []
+  const seen = new Set<string>()
+  for (const result of [...results].reverse()) {
+    for (const citation of result.citations) {
+      if (out.length >= limit) return out
+      if (seen.has(citation.path)) continue
+      seen.add(citation.path)
+      out.push(citation)
+    }
+  }
+  return out
+}

package/plugin/opencode-plugin/src/tui/prompt.tsx

@@ -0,0 +1,62 @@
+/**
+ * Elliot's prompt, filling `home_prompt` and `session_prompt`.
+ *
+ * It REUSES the host's `api.ui.Prompt` rather than rebuilding an editor. That is
+ * not a shortcut: the host's prompt carries autocomplete, file attachment,
+ * history, frecency, shell mode, paste handling and the leader-key layer
+ * (`component/prompt/index.tsx`, 1,716 lines). Reimplementing it to change the
+ * placeholder text would trade all of that away for copy.
+ *
+ * What Elliot changes is the copy, which is the most-read text in the whole TUI:
+ * upstream suggests "Fix a TODO in the codebase", which says nothing about why
+ * this terminal is different. The chrome around the input stays the host's, and
+ * is quieted through the theme instead — the rail is painted from `theme.border`
+ * (`component/prompt/index.tsx:1289`), so `themes/elliot.json` already softened
+ * it without a fork.
+ *
+ * Both slots are `mode="replace"`, so these components stand in for the host's
+ * own render. Every prop the host passes MUST therefore be forwarded. `ref` in
+ * particular is load-bearing: `routes/home.tsx` binds it to set and auto-submit
+ * `--prompt`, so dropping it would silently break `eai --prompt "..."` while the
+ * interactive TUI kept working.
+ *
+ * Props are passed as JSX attributes rather than by calling `Prompt(props)` or
+ * spreading an object: Solid compiles attributes into getters, and only that
+ * form keeps `visible` and `disabled` reactive as the session changes state.
+ */
+import type { SessionSlotProps, TuiPluginApi } from "./api.js"
+
+/**
+ * Placeholders that describe Elliot's actual capability.
+ *
+ * Knowledge-shaped, not TODO-shaped: the first thing a user tries should be the
+ * thing only this terminal can do. Shell placeholders stay as upstream's — shell
+ * mode is upstream's feature and its examples are already the right ones.
+ */
+const PLACEHOLDERS = {
+  normal: [
+    "Ask why this service is built the way it is",
+    "Which PRs changed the auth flow?",
+    "Summarise what this repo does for a new joiner",
+  ],
+  shell: ["git status", "ls -la", "pwd"],
+}
+
+export function HomePrompt(props: { api: TuiPluginApi; slot: { ref?: (ref: unknown) => void } }) {
+  const Prompt = props.api.ui.Prompt
+  return <Prompt ref={props.slot.ref} placeholders={PLACEHOLDERS} />
+}
+
+export function SessionPrompt(props: { api: TuiPluginApi; slot: SessionSlotProps }) {
+  const Prompt = props.api.ui.Prompt
+  return (
+    <Prompt
+      sessionID={props.slot.session_id}
+      visible={props.slot.visible}
+      disabled={props.slot.disabled}
+      onSubmit={props.slot.on_submit}
+      ref={props.slot.ref}
+      placeholders={PLACEHOLDERS}
+    />
+  )
+}

package/plugin/opencode-plugin/src/tui/sidebar.tsx

@@ -0,0 +1,184 @@
+/**
+ * The Elliot knowledge panel — `sidebar_content`, plus Elliot's identity in
+ * `sidebar_title` and `sidebar_footer`.
+ *
+ * It shows only what nothing else in the sidebar shows. Upstream's built-in
+ * sections already list MCP servers, LSP clients, todos and changed files, so
+ * restating any of them here would be exactly the duplication this redesign is
+ * removing. What is left — and what no stock sidebar can know — is the retrieval
+ * scope in force and the sources Elliot actually cited in this session.
+ *
+ * Knowledge health therefore earns a row only when it is NOT healthy. A problem
+ * explains a bad answer and is worth the space; "working normally" is already
+ * visible in the MCP section and is not.
+ */
+import { For, Show } from "solid-js"
+
+import type { SessionSlotProps, TuiPluginApi } from "./api.js"
+import {
+  collectKnowledgeResults,
+  distinctCitations,
+  elliotServerNames,
+  knowledgeConnection,
+  type Citation,
+  type KnowledgeResult,
+} from "./knowledge.js"
+
+/** A height-bounded panel: past this, rows push the built-in sections off. */
+const MAX_CITATIONS = 6
+
+/** A small-caps-style section label, matching upstream's sidebar rhythm. */
+function Label(props: { api: TuiPluginApi; children: string }) {
+  return (
+    <text fg={props.api.theme.current.border} selectable={false}>
+      {props.children}
+    </text>
+  )
+}
+
+/**
+ * Every knowledge lookup in this session.
+ *
+ * Reads the transcript rather than calling the backend — see `knowledge.ts` for
+ * why a fetch here would violate the no-second-credential-path rule.
+ */
+function resultsFor(api: TuiPluginApi, sessionID: string): KnowledgeResult[] {
+  const servers = elliotServerNames(api.state.mcp())
+  if (servers.length === 0) return []
+
+  const parts = api.state.session
+    .messages(sessionID)
+    .flatMap((message) => [...api.state.part(message.id)])
+  return collectKnowledgeResults(parts, servers)
+}
+
+/**
+ * The scope retrieval actually ran under.
+ *
+ * The backend echoes `repo_scope` in its envelope, so the most recent lookup is
+ * authoritative — that is the scope Elliot *used*, not the one we assume from
+ * the worktree. Falling back to the branch keeps the row useful before the first
+ * lookup, and a missing scope is reported as tenant-wide rather than left blank,
+ * because "unscoped" is a real and meaningful state.
+ */
+function scopeLabel(results: readonly KnowledgeResult[]): string | undefined {
+  for (const result of [...results].reverse()) {
+    if (result.repoScope) return result.repoScope
+  }
+  return undefined
+}
+
+function CitationRow(props: { api: TuiPluginApi; citation: Citation }) {
+  const theme = props.api.theme.current
+  return (
+    <box flexDirection="row" gap={1}>
+      <text fg={theme.textMuted} selectable={true}>
+        {props.citation.path}
+      </text>
+      <Show when={props.citation.symbol}>
+        <text fg={theme.border} selectable={false}>
+          {props.citation.symbol}
+        </text>
+      </Show>
+    </box>
+  )
+}
+
+/** The one row that appears only on trouble. */
+function Trouble(props: { api: TuiPluginApi }) {
+  const theme = props.api.theme.current
+  const connection = () => knowledgeConnection(props.api.state.mcp())
+
+  return (
+    <Show when={connection().status === "failed" || connection().status === undefined}>
+      <box flexDirection="row" gap={1}>
+        <text fg={connection().status === "failed" ? theme.error : theme.warning} selectable={false}>
+          !
+        </text>
+        <text fg={theme.textMuted} selectable={false}>
+          {connection().status === "failed"
+            ? "knowledge unreachable — answers are unsourced"
+            : "no knowledge server configured"}
+        </text>
+      </box>
+    </Show>
+  )
+}
+
+export function SidebarContent(props: { api: TuiPluginApi; slot: SessionSlotProps }) {
+  const theme = props.api.theme.current
+  const results = () => resultsFor(props.api, props.slot.session_id)
+  const scope = () => scopeLabel(results())
+  const citations = () => distinctCitations(results(), MAX_CITATIONS)
+
+  return (
+    <box gap={1}>
+      <box>
+        <Label api={props.api}>KNOWLEDGE</Label>
+        <Trouble api={props.api} />
+        <Show
+          when={scope()}
+          fallback={
+            <text fg={theme.textMuted} selectable={false}>
+              organisation-wide
+            </text>
+          }
+        >
+          <text fg={theme.text} selectable={true}>
+            {scope()}
+          </text>
+        </Show>
+      </box>
+
+      <Show when={citations().length > 0}>
+        <box>
+          <Label api={props.api}>SOURCES CITED</Label>
+          <For each={citations()}>
+            {(citation) => <CitationRow api={props.api} citation={citation} />}
+          </For>
+        </box>
+      </Show>
+    </box>
+  )
+}
+
+/**
+ * The session title, with Elliot's mark ahead of it.
+ *
+ * `sidebar_title` is `single_winner`, so this replaces upstream's title block
+ * rather than stacking with it — which is why the title itself is reproduced
+ * here instead of only the branding.
+ */
+export function SidebarTitle(props: { api: TuiPluginApi; slot: SessionSlotProps & { title: string } }) {
+  const theme = props.api.theme.current
+  return (
+    <box paddingRight={1}>
+      <box flexDirection="row" gap={1}>
+        <text fg={theme.primary} selectable={false}>
+          ●
+        </text>
+        <text fg={theme.text} selectable={true}>
+          {props.slot.title}
+        </text>
+      </box>
+    </box>
+  )
+}
+
+/** Replaces upstream's "OpenCode <version>" line; the build is Elliot's. */
+export function SidebarFooter(props: { api: TuiPluginApi }) {
+  const theme = props.api.theme.current
+  return (
+    <box flexDirection="row" gap={1}>
+      <text fg={theme.primary} selectable={false}>
+        ●
+      </text>
+      <text fg={theme.text} selectable={false}>
+        Elliot AI
+      </text>
+      <text fg={theme.border} selectable={false}>
+        {props.api.app.version}
+      </text>
+    </box>
+  )
+}

package/plugin/opencode-plugin/src/tui/wordmark.tsx

@@ -0,0 +1,109 @@
+/**
+ * The ELLIOT AI wordmark, filling `home_logo` (declared `mode="replace"`, so it
+ * supplants upstream's `<Logo/>`).
+ *
+ * Colour comes from the active theme, never from literals, so `themes/elliot.json`
+ * stays the single source of truth and the mark degrades correctly under another
+ * theme.
+ */
+import { For } from "solid-js"
+import { RGBA, TextAttributes } from "@opentui/core"
+
+import type { TuiPluginApi } from "./api.js"
+
+/**
+ * ELLIOT / AI, transcribed from the design's glyph grid.
+ *
+ * 4-column glyphs separated by one space, except `I` and `T` which are 3 — that
+ * is the design's own metric. `left` is 27 columns, `right` is 8.
+ *
+ * `_` and `^` are the host's shading marks (`packages/tui/src/logo.ts`): a cell
+ * painted on a tinted background, and `▀` on that same tint.
+ */
+const WORDMARK = {
+  left: [
+    "█▀▀▀ █    █    ▀▀▀ █▀▀█ ▀▀▀",
+    "█^^^ █    █     █  █__█  █ ",
+    "▀▀▀▀ ▀▀▀▀ ▀▀▀▀ ▀▀▀ ▀▀▀▀  ▀ ",
+  ],
+  right: ["█▀▀█ ▀▀▀", "█^^█  █ ", "▀  ▀ ▀▀▀"],
+} as const
+
+/** The design sets ELLIOT and AI two columns apart, not one. */
+const WORDMARK_GAP = 2
+
+/**
+ * Tint a shadow from the theme, mirroring the host's `tint(background, fg, 0.25)`
+ * so a plugin-rendered wordmark shades identically to a host-rendered one.
+ * Reimplemented rather than imported because the host's theme context is not a
+ * shared module.
+ *
+ * It must return a real `RGBA`, not a matching plain object. The renderer hands
+ * colours to opentui's FFI (`textBufferSetDefaultBg`), which needs the
+ * Float32Array an `RGBA` carries; a structurally identical literal reaches the
+ * boundary and dies with "Expected ArrayBufferView but received Cell to a
+ * pointer", taking the whole TUI down. That crash was latent for as long as this
+ * plugin never loaded -- fixing the loader is what surfaced it.
+ */
+function shadowOf(background: RGBA, fg: RGBA): RGBA {
+  const mix = (a: number, b: number) => a + (b - a) * 0.25
+  return RGBA.fromValues(
+    mix(background.r, fg.r),
+    mix(background.g, fg.g),
+    mix(background.b, fg.b),
+    background.a ?? 1,
+  )
+}
+
+function Glyphs(props: { line: string; fg: RGBA; shadow: RGBA; bold: boolean }) {
+  const attrs = props.bold ? TextAttributes.BOLD : undefined
+  return (
+    <box flexDirection="row">
+      {Array.from(props.line).map((char) => {
+        if (char === "_")
+          return (
+            <text fg={props.fg} bg={props.shadow} attributes={attrs} selectable={false}>
+              {" "}
+            </text>
+          )
+        if (char === "^")
+          return (
+            <text fg={props.fg} bg={props.shadow} attributes={attrs} selectable={false}>
+              ▀
+            </text>
+          )
+        return (
+          <text fg={props.fg} attributes={attrs} selectable={false}>
+            {char}
+          </text>
+        )
+      })}
+    </box>
+  )
+}
+
+export function Wordmark(props: { api: TuiPluginApi }) {
+  const theme = props.api.theme.current
+  return (
+    <box>
+      <For each={WORDMARK.left}>
+        {(line, index) => (
+          <box flexDirection="row" gap={WORDMARK_GAP}>
+            <Glyphs
+              line={line}
+              fg={theme.textMuted}
+              shadow={shadowOf(theme.background, theme.textMuted)}
+              bold={false}
+            />
+            <Glyphs
+              line={WORDMARK.right[index()] ?? ""}
+              fg={theme.primary}
+              shadow={shadowOf(theme.background, theme.primary)}
+              bold={true}
+            />
+          </box>
+        )}
+      </For>
+    </box>
+  )
+}