create-theokit 1.18.0 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-theokit",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "type": "module",
   "description": "Scaffold a new TheoKit project",
   "license": "Apache-2.0",

package/templates/surfaces/tui/tui/App.tsx.tmpl

@@ -24,6 +24,18 @@ import { streamAgentTurnInProcess } from 'theokit/server/agent'
 
 import * as chatAgent from '../agents/chat.js'
 import { AGENT } from '../shared/agent.js'
+// Everything visual (accent, banner wordmark + copy, spinner words, placeholder) lives in ONE file —
+// edit `tui/theme.ts` to restyle; this component never needs touching for a rebrand.
+import {
+  ACCENT,
+  BANNER_TIPS,
+  BANNER_WHATS_NEW,
+  LOGO,
+  PLACEHOLDER,
+  THEME,
+  THINKING_PHRASES,
+  WIDE_COLS,
+} from './theme.js'
 
 /** Shown in the status bar (from `shared/agent.ts`). */
 const MODEL = AGENT.model
@@ -32,32 +44,6 @@ const CWD = process.cwd().replace(homedir(), '~')
 /** Compact token count for the footer: `128000 → 128k`, `12300 → 12.3k`, `462 → 462`. */
 const fmtK = (n: number): string =>
   n >= 1000 ? `${(Math.round(n / 100) / 10).toString().replace(/\.0$/, '')}k` : `${n}`
-/** Claude Code's warm accent (truecolor; degrades gracefully on 256-color terminals). */
-const ACCENT = '#d97757'
-/** The "Theo" wordmark (figlet ANSI-Shadow, block glyphs — single-width, renders everywhere). */
-const THEO_LOGO = [
-  '████████╗██╗  ██╗███████╗ ██████╗',
-  '╚══██╔══╝██║  ██║██╔════╝██╔═══██╗',
-  '   ██║   ███████║█████╗  ██║   ██║',
-  '   ██║   ██╔══██║██╔══╝  ██║   ██║',
-  '   ██║   ██║  ██║███████╗╚██████╔╝',
-  '   ╚═╝   ╚═╝  ╚═╝╚══════╝ ╚═════╝ ',
-].join('\n')
-/** Below this column count the welcome box collapses to a single column (the two-column aside needs room). */
-const WIDE_COLS = 90
-/** Whimsical status words cycled while the agent thinks (Claude Code idiom — the ✻ spinner rotates these). */
-const THINKING_PHRASES = [
-  'Thinking',
-  'Pondering',
-  'Noodling',
-  'Percolating',
-  'Baking',
-  'Brewing',
-  'Simmering',
-  'Conjuring',
-  'Musing',
-  'Marinating',
-] as const
 
 /** The agent's opening line — a short warm intro; the banner already carries the how-to tips. */
 const GREETING: UIMessageLike = {
@@ -110,7 +96,7 @@ function Banner(): ReactElement {
       {/* Fixed-width left column (fits the 34-wide wordmark) so a long cwd truncates instead of pushing
           the right column off-screen — the box stays full width, the content stays grouped on the left. */}
       <Box flexDirection="column" width={38} flexShrink={0}>
-        <Text color={ACCENT}>{THEO_LOGO}</Text>
+        <Text color={ACCENT}>{LOGO}</Text>
         <Box marginTop={1} flexDirection="column">
           <Text color={ACCENT} bold wrap="truncate-end">
             ✻ Welcome to {APP_NAME}
@@ -129,16 +115,22 @@ function Banner(): ReactElement {
             Tips for getting started
           </Text>
           <Box marginTop={1} flexDirection="column">
-            <Text dimColor>Ask me anything — I stream a reply</Text>
-            <Text dimColor>/help  ·  @ mention a file  ·  esc interrupts</Text>
+            {BANNER_TIPS.map((tip) => (
+              <Text key={tip} dimColor>
+                {tip}
+              </Text>
+            ))}
           </Box>
           <Box marginTop={1} flexDirection="column">
             <Text color={ACCENT} bold>
               What&apos;s new
             </Text>
             <Box marginTop={1} flexDirection="column">
-              <Text dimColor>Human-in-the-loop approvals</Text>
-              <Text dimColor>Live token usage in the footer</Text>
+              {BANNER_WHATS_NEW.map((line) => (
+                <Text key={line} dimColor>
+                  {line}
+                </Text>
+              ))}
             </Box>
           </Box>
         </Box>
@@ -217,7 +209,7 @@ export function App(): ReactElement {
   }
 
   return (
-    <TheoTUIProvider theme={{ base: 'dark', override: { accent: ACCENT } }}>
+    <TheoTUIProvider theme={THEME}>
       {/* InkInputProvider bridges Ink's stdin to @theokit/tui's interactive surfaces (ApprovalPrompt's
           choice bar) so they receive keys under plain Ink — the ChatComposer keeps using Ink's own hooks. */}
       <InkInputProvider>
@@ -255,7 +247,7 @@ export function App(): ReactElement {
             </ApprovalPrompt>
           ) : (
             <ChatComposer
-              placeholder="Ask {{name}} anything…"
+              placeholder={PLACEHOLDER}
               bordered
               hint={exitArmed ? 'Press Ctrl+C again to quit' : undefined}
               commands={[

package/templates/surfaces/tui/tui/theme.ts.tmpl

@@ -0,0 +1,73 @@
+/**
+ * ════════════════════════════════════════════════════════════════════════════════════════════════
+ *  tui/theme.ts — the ONE place to restyle your terminal UI.
+ *
+ *  Everything visual lives here: the accent color, the welcome-banner wordmark + copy, the "thinking"
+ *  words, and the input placeholder. Edit this file to rebrand — `tui/App.tsx` reads from it and never
+ *  needs touching for a restyle.
+ * ════════════════════════════════════════════════════════════════════════════════════════════════
+ */
+import type { TheoThemeProp } from '@theokit/tui'
+
+/**
+ * The accent color — used for the banner, the `✻`/`⏺` markers, the box borders, and the `>` prompt.
+ * Any Ink color: a name (`'cyan'`, `'green'`, `'magenta'`) or a hex (`'#d97757'`, truecolor).
+ */
+export const ACCENT = '#d97757'
+
+/**
+ * The global `@theokit/tui` theme applied by `<TheoTUIProvider>`. Partial-merge: override only what you
+ * pass — everything else inherits the base theme. Uncomment a block below to restyle the bullets:
+ *
+ *   role: { assistant: { glyph: '▸ ' } },                              // the assistant message bullet
+ *   toolStatus: { success: { glyph: '◆' }, failed: { glyph: '✗' } },   // per-status tool bullets
+ */
+export const THEME: TheoThemeProp = {
+  base: 'dark', // 'dark' · 'light' · 'no-color'
+  override: {
+    accent: ACCENT,
+    // role: { assistant: { glyph: '⏺  ' } },
+    // toolStatus: { pending: { glyph: '○' }, success: { glyph: '●' }, failed: { glyph: '✗' } },
+  },
+}
+
+/**
+ * The wordmark at the top of the welcome banner (ASCII art). Swap it for your own — generate one with
+ * `npx figlet -f "ANSI Shadow" "YourApp"` — or set it to `''` to hide it. Use single-width glyphs so it
+ * renders on every terminal.
+ */
+export const LOGO = [
+  '████████╗██╗  ██╗███████╗ ██████╗',
+  '╚══██╔══╝██║  ██║██╔════╝██╔═══██╗',
+  '   ██║   ███████║█████╗  ██║   ██║',
+  '   ██║   ██╔══██║██╔══╝  ██║   ██║',
+  '   ██║   ██║  ██║███████╗╚██████╔╝',
+  '   ╚═╝   ╚═╝  ╚═╝╚══════╝ ╚═════╝ ',
+].join('\n')
+
+/** The welcome banner's right column (shown on wide terminals). One string per line. */
+export const BANNER_TIPS = [
+  'Ask me anything — I stream a reply',
+  '/help  ·  @ mention a file  ·  esc interrupts',
+]
+export const BANNER_WHATS_NEW = ['Human-in-the-loop approvals', 'Live token usage in the footer']
+
+/** Whimsical words the "thinking" spinner cycles through while the agent works. */
+export const THINKING_PHRASES = [
+  'Thinking',
+  'Pondering',
+  'Noodling',
+  'Percolating',
+  'Baking',
+  'Brewing',
+  'Simmering',
+  'Conjuring',
+  'Musing',
+  'Marinating',
+]
+
+/** The dim placeholder shown in the empty input box. */
+export const PLACEHOLDER = 'Ask {{name}} anything…'
+
+/** Below this terminal width the welcome banner collapses from two columns to one. */
+export const WIDE_COLS = 90