drexler 0.2.4 → 0.2.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.2.6
+
+- Upgraded `/synergy` into a rotating animated Ink event with staged reveals, progress, KPI tickers, and themed finale copy.
+- Added compact synergy rendering and a non-interactive fallback line for classic command dispatch.
+
+## 0.2.5
+
+- Made constrained slash commands open smoother option choosers, with `/theme` showing all theme choices as soon as the command is typed.
+- Added richer theme descriptions and contextual hints in the command palette.
+
 ## 0.2.4
 
 - Improved transcript readability with distinct user and Drexler turn blocks, role-specific accents, and clearer body markers.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drexler",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "CLI chat with Drexler, a corporate-executive AI persona built on OpenRouter Gemma 4 31B.",
   "license": "MIT",
   "author": "showOS",

package/src/commands.ts

@@ -53,6 +53,7 @@ const WHITESPACE_RE = /\s+/;
 export interface SlashCommand {
   readonly name: string;
   readonly description: string;
+  readonly hint?: string;
 }
 
 export const COMMAND_PALETTE: ReadonlyArray<SlashCommand> = [
@@ -76,49 +77,151 @@ export const COMMAND_PALETTE: ReadonlyArray<SlashCommand> = [
   { name: "/copy-last", description: "Copy last response" },
 ];
 
+const THEME_PALETTE_COPY: Record<
+  ThemeName,
+  { readonly description: string; readonly hint: string }
+> = {
+  apollo: {
+    description: "Signature Drexler green",
+    hint: "default executive terminal",
+  },
+  amber: {
+    description: "Warm amber deal glow",
+    hint: "low-light command room",
+  },
+  mono: {
+    description: "Plain high-contrast text",
+    hint: "NO_COLOR friendly",
+  },
+  terminal: {
+    description: "Classic ANSI terminal",
+    hint: "green/cyan legacy mode",
+  },
+  dealroom: {
+    description: "Teal boardroom desk",
+    hint: "quiet professional palette",
+  },
+  midnight: {
+    description: "Cool blue night desk",
+    hint: "focused late-session work",
+  },
+  paper: {
+    description: "Clean document mode",
+    hint: "bright memo-style contrast",
+  },
+  plasma: {
+    description: "Magenta trading floor",
+    hint: "high-energy neon accent",
+  },
+};
+
 const ARGUMENT_PALETTE: ReadonlyArray<{
   readonly command: string;
+  readonly baseDescription: string;
+  readonly baseHint: string;
   readonly values: ReadonlyArray<SlashCommand>;
 }> = [
   {
     command: "/theme",
+    baseDescription: "Theme chooser",
+    baseHint: "select a look below",
     values: [
-      ...THEME_NAMES.map((name) => ({
-        name: `/theme ${name}`,
-        description: `Switch to ${name} theme`,
-      })),
-      { name: "/theme save", description: "Save current theme as default" },
+      ...THEME_NAMES.map((name) => {
+        const copy = THEME_PALETTE_COPY[name];
+        return {
+          name: `/theme ${name}`,
+          description: copy.description,
+          hint: copy.hint,
+        };
+      }),
+      {
+        name: "/theme save",
+        description: "Persist current theme",
+        hint: "use after previewing",
+      },
     ],
   },
   {
     command: "/startup",
+    baseDescription: "Startup mode chooser",
+    baseHint: "pick launch behavior",
     values: [
-      { name: "/startup fast", description: "Persist fast startup" },
-      { name: "/startup no-intro", description: "Skip intro on launch" },
-      { name: "/startup normal", description: "Restore full intro" },
+      {
+        name: "/startup fast",
+        description: "Persist fast startup",
+        hint: "skip ceremony",
+      },
+      {
+        name: "/startup no-intro",
+        description: "Skip intro on launch",
+        hint: "keep normal runtime",
+      },
+      {
+        name: "/startup normal",
+        description: "Restore full intro",
+        hint: "show full opening",
+      },
     ],
   },
   {
     command: "/retry",
+    baseDescription: "Retry style chooser",
+    baseHint: "reshape last answer",
     values: [
-      { name: "/retry terse", description: "Retry in two sentences" },
-      { name: "/retry brutal", description: "Retry more forcefully" },
+      {
+        name: "/retry terse",
+        description: "Retry in two sentences",
+        hint: "short and direct",
+      },
+      {
+        name: "/retry brutal",
+        description: "Retry more forcefully",
+        hint: "sharper critique",
+      },
     ],
   },
   {
     command: "/export",
+    baseDescription: "Export format chooser",
+    baseHint: "pick transcript output",
     values: [
-      { name: "/export md", description: "Export markdown transcript" },
-      { name: "/export txt", description: "Export plain text transcript" },
-      { name: "/export json", description: "Export structured JSON" },
-      { name: "/export html", description: "Export printable HTML" },
+      {
+        name: "/export md",
+        description: "Export markdown transcript",
+        hint: "portable notes",
+      },
+      {
+        name: "/export txt",
+        description: "Export plain text transcript",
+        hint: "clean copy",
+      },
+      {
+        name: "/export json",
+        description: "Export structured JSON",
+        hint: "machine-readable",
+      },
+      {
+        name: "/export html",
+        description: "Export printable HTML",
+        hint: "browser-ready memo",
+      },
     ],
   },
   {
     command: "/model",
+    baseDescription: "Model chooser",
+    baseHint: "select inference desk",
     values: [
-      { name: "/model 31b", description: "Use primary 31b model" },
-      { name: "/model 26b", description: "Use fallback 26b model" },
+      {
+        name: "/model 31b",
+        description: "Use primary 31b model",
+        hint: "best default",
+      },
+      {
+        name: "/model 26b",
+        description: "Use fallback 26b model",
+        hint: "faster backup",
+      },
     ],
   },
 ];
@@ -126,6 +229,16 @@ const ARGUMENT_PALETTE: ReadonlyArray<{
 function filterArgumentPalette(input: string): ReadonlyArray<SlashCommand> {
   const lower = input.toLowerCase();
   for (const group of ARGUMENT_PALETTE) {
+    if (lower === group.command) {
+      return [
+        {
+          name: group.command,
+          description: group.baseDescription,
+          hint: group.baseHint,
+        },
+        ...group.values,
+      ];
+    }
     const prefix = `${group.command} `;
     if (!lower.startsWith(prefix)) continue;
     const argPrefix = lower.slice(prefix.length);
@@ -143,6 +256,8 @@ export function filterPaletteByPrefix(
   input: string,
 ): ReadonlyArray<SlashCommand> {
   if (!input.startsWith("/")) return [];
+  const exactArgumentPalette = filterArgumentPalette(input);
+  if (exactArgumentPalette.length > 0) return exactArgumentPalette;
   if (input.includes(" ")) return filterArgumentPalette(input);
   const prefix = input.toLowerCase();
   return COMMAND_PALETTE.filter((c) =>
@@ -199,7 +314,9 @@ export function dispatch(input: string, ctx: CommandContext): CommandAction {
       };
 
     case "synergy":
-      ctx.print("SYNERGY. You promoted. Award: continued employment.");
+      ctx.print(
+        "SYNERGY EVENT: alignment protocol completed. Award: continued employment.",
+      );
       return { type: "continue" };
 
     case "model":

package/src/ui/App.tsx

@@ -37,6 +37,13 @@ import { InputBox } from "./InputBox.tsx";
 import { StreamingMessage } from "./Message.tsx";
 import { Spinner } from "./Spinner.tsx";
 import { StatusBar } from "./StatusBar.tsx";
+import {
+  pickSynergyEvent,
+  SynergyEvent,
+  SYNERGY_EVENT_FRAMES,
+  synergyEventRows,
+  type SynergyEventDefinition,
+} from "./SynergyEvent.tsx";
 import { ThemeProvider } from "./ThemeContext.tsx";
 import { TranscriptViewport } from "./TranscriptViewport.tsx";
 import { getActiveTheme, THEMES } from "./themes.ts";
@@ -84,6 +91,11 @@ interface ChatItem {
   content: string;
 }
 
+interface ActiveSynergyEvent {
+  event: SynergyEventDefinition;
+  frame: number;
+}
+
 interface AppProps {
   conversation: Conversation;
   config: Config;
@@ -155,6 +167,9 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   const cursor = draft.cursor;
   const [streaming, setStreaming] = useState<string | null>(null);
   const [thinking, setThinking] = useState<string | null>(null);
+  const [synergyEvent, setSynergyEvent] = useState<ActiveSynergyEvent | null>(
+    null,
+  );
   const [exitMsg, setExitMsg] = useState<string | null>(null);
   const [witticism, setWitticism] = useState<string>(pick(WITTICISMS));
   const [model, setModel] = useState<string>(config.model);
@@ -207,6 +222,7 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   const mountedRef = useRef(true);
   const exitingRef = useRef(false);
   const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const synergyTimerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const flushStream = useCallback(() => {
     if (!mountedRef.current) return;
     setStreaming(streamBufRef.current);
@@ -234,6 +250,45 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
     [flushStream],
   );
 
+  const runSynergyEvent = useCallback(() => {
+    if (synergyTimerRef.current !== null) {
+      clearInterval(synergyTimerRef.current);
+      synergyTimerRef.current = null;
+    }
+
+    const event = pickSynergyEvent();
+    let frame = 0;
+    const finalFrame = SYNERGY_EVENT_FRAMES - 1;
+    const holdFrames = 8;
+
+    setThinking(null);
+    setStreaming(null);
+    setDeskStatus("idle");
+    setDeskNotice("synergy event");
+    setSynergyEvent({ event, frame });
+
+    synergyTimerRef.current = setInterval(() => {
+      frame += 1;
+      if (!mountedRef.current) return;
+
+      if (frame <= finalFrame) {
+        setSynergyEvent({ event, frame });
+        return;
+      }
+
+      if (frame >= finalFrame + holdFrames) {
+        if (synergyTimerRef.current !== null) {
+          clearInterval(synergyTimerRef.current);
+          synergyTimerRef.current = null;
+        }
+        setSynergyEvent(null);
+        setDeskNotice("synergy logged");
+        setWitticism(event.finalLine);
+        addItem("system", event.transcriptLine);
+      }
+    }, 60);
+  }, [addItem]);
+
   const runLLM = useCallback(async (instruction?: string) => {
     const startedAt = Date.now();
     setThinking(pick(THINKING_LINES));
@@ -349,6 +404,10 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
         },
       });
       const lower = line.toLowerCase().trim();
+      if (lower === "/synergy") {
+        runSynergyEvent();
+        return;
+      }
       if (lower === "/clear" || lower.startsWith("/clear ")) {
         setItems([]);
         setLastLatencyMs(null);
@@ -399,6 +458,7 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
       model,
       removeLastAssistantItem,
       runLLM,
+      runSynergyEvent,
       triggerExit,
     ],
   );
@@ -424,8 +484,11 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   );
 
   useInput((char, key) => {
-    if (streaming !== null || thinking !== null) {
+    if (streaming !== null || thinking !== null || synergyEvent !== null) {
       if (key.escape) {
+        if (synergyEvent !== null) {
+          return;
+        }
         cancelledRef.current = true;
         abortRef.current?.abort();
         return;
@@ -593,11 +656,17 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
       if (exitTimerRef.current !== null) {
         clearTimeout(exitTimerRef.current);
       }
+      if (synergyTimerRef.current !== null) {
+        clearInterval(synergyTimerRef.current);
+      }
     };
   }, []);
 
-  const isBusy = streaming !== null || thinking !== null;
+  const isBusy = streaming !== null || thinking !== null || synergyEvent !== null;
   const headerStatus = isBusy ? "streaming" : deskStatus;
+  const visibleTranscriptRows = synergyEvent
+    ? Math.max(1, maxTranscriptRows - synergyEventRows(chromeWidth, isCompact))
+    : maxTranscriptRows;
 
   return (
     <ThemeProvider value={activeTheme}>
@@ -617,7 +686,7 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
         />
         <TranscriptViewport
           items={items}
-          maxRows={maxTranscriptRows}
+          maxRows={visibleTranscriptRows}
           cols={chromeWidth}
           compact={isCompact}
           scrollOffset={scrollOffset}
@@ -634,6 +703,14 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
               <Spinner label={thinking} width={chromeWidth} />
             </Box>
           )}
+          {synergyEvent !== null && (
+            <SynergyEvent
+              event={synergyEvent.event}
+              frame={synergyEvent.frame}
+              width={chromeWidth}
+              compact={isCompact}
+            />
+          )}
           {exitMsg !== null ? (
             <Box paddingX={1} marginBottom={1}>
               <Text color={t.primaryLight} bold>
@@ -654,6 +731,11 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
                   value={input}
                   cursor={cursor}
                   disabled={isBusy}
+                  disabledLabel={
+                    synergyEvent !== null
+                      ? "(Synergy event running... boardroom locked)"
+                      : undefined
+                  }
                   width={inputWidth}
                 />
               </Box>

package/src/ui/CommandPalette.tsx

@@ -31,10 +31,34 @@ const COMMAND_HINTS: Record<string, string> = {
   "/copy-last": "copy latest response",
 };
 
+const ARGUMENT_TITLES: Record<string, { title: string; hint: string }> = {
+  "/theme": { title: "THEMES", hint: "tab fill, ↑↓ choose, enter apply" },
+  "/startup": { title: "STARTUP", hint: "tab fill, ↑↓ choose, enter save" },
+  "/retry": { title: "RETRY", hint: "tab fill, ↑↓ choose, enter reroll" },
+  "/export": { title: "EXPORT", hint: "tab fill, ↑↓ choose, enter run" },
+  "/model": { title: "MODELS", hint: "tab fill, ↑↓ choose, enter switch" },
+};
+
+function paletteHeading(items: ReadonlyArray<SlashCommand>): {
+  title: string;
+  hint: string;
+} {
+  const firstToken = items[0]?.name.split(" ")[0] ?? "";
+  const hasArguments = items.some((item) => item.name.includes(" "));
+  if (hasArguments && ARGUMENT_TITLES[firstToken]) {
+    return ARGUMENT_TITLES[firstToken];
+  }
+  return {
+    title: "DIRECTIVES",
+    hint: "tab/↑↓ select, enter execute",
+  };
+}
+
 function CommandPaletteInner({ items, selectedIdx, width = 80 }: Props) {
   const t = useTheme();
   const safeWidth = Math.max(1, Math.floor(width));
   const tiny = safeWidth < 26;
+  const heading = useMemo(() => paletteHeading(items), [items]);
   const maxNameW = useMemo(
     () => items.reduce((m, i) => Math.max(m, i.name.length), 0),
     [items],
@@ -81,19 +105,22 @@ function CommandPaletteInner({ items, selectedIdx, width = 80 }: Props) {
     >
       <Box marginBottom={1}>
         <Text color={t.primaryLight} bold>
-          DIRECTIVES
+          {heading.title}
         </Text>
         <Text color={t.primaryDim}> ─ </Text>
         <Text color={t.dim} wrap="truncate">
-          {fitDisplayText("tab/↑↓ select, enter execute", Math.max(1, innerWidth - 13))}
+          {fitDisplayText(
+            heading.hint,
+            Math.max(1, innerWidth - displayWidth(heading.title) - 3),
+          )}
         </Text>
       </Box>
       {items.map((item, idx) => {
         const sel = idx === selectedIdx;
         const isArgumentSuggestion = item.name.includes(" ");
-        const hint = isArgumentSuggestion
-          ? ""
-          : COMMAND_HINTS[item.name] ?? item.description;
+        const hint =
+          item.hint ??
+          (isArgumentSuggestion ? "" : COMMAND_HINTS[item.name] ?? item.description);
         const name = item.name.padEnd(maxNameW + 1);
         const desc = fitDisplayText(item.description, descBudget);
         const clippedHint =

package/src/ui/InputBox.tsx

@@ -8,6 +8,7 @@ interface Props {
   cursor: number;
   disabled: boolean;
   width: number;
+  disabledLabel?: string;
 }
 
 const PROMPT_WIDTH = 2;
@@ -80,13 +81,19 @@ function fitPlainText(chars: string[], cursor: number, maxWidth: number): string
   return out || " ";
 }
 
-function InputBoxInner({ value, cursor, disabled, width }: Props) {
+function InputBoxInner({
+  value,
+  cursor,
+  disabled,
+  width,
+  disabledLabel,
+}: Props) {
   const t = useTheme();
   const chars = splitGraphemes(value);
   const safeCursor = clampCursor(value, cursor);
   const boxWidth = Math.max(1, width);
   const inputBudget = Math.max(1, boxWidth - BOX_CHROME_WIDTH - PROMPT_WIDTH);
-  const disabledText = "(Drexler thinking... ESC to cancel)";
+  const disabledText = disabledLabel ?? "(Drexler thinking... ESC to cancel)";
   const window = fitWindow(chars, safeCursor, inputBudget);
   const visible = chars.slice(window.start, window.end);
   const visibleCursor = clamp(safeCursor - window.start, 0, visible.length);

package/src/ui/SynergyEvent.tsx

@@ -0,0 +1,284 @@
+import { Box, Text } from "ink";
+import { memo } from "react";
+import { displayWidth, fitDisplayText } from "./graphemes.ts";
+import { useTheme } from "./ThemeContext.tsx";
+
+export interface SynergyEventDefinition {
+  id: string;
+  title: string;
+  subtitle: string;
+  art: readonly string[];
+  stages: readonly string[];
+  kpis: readonly string[];
+  finalLine: string;
+  transcriptLine: string;
+}
+
+export const SYNERGY_EVENT_FRAMES = 28;
+
+export const SYNERGY_EVENTS: readonly SynergyEventDefinition[] = [
+  {
+    id: "alignment-protocol",
+    title: "ALIGNMENT PROTOCOL",
+    subtitle: "cross-functional theater detected",
+    art: [
+      "   ██████╗ ██╗   ██╗███╗   ██╗",
+      "  ██╔════╝ ╚██╗ ██╔╝████╗  ██║",
+      "  ╚█████╗   ╚████╔╝ ██╔██╗ ██║",
+      "   ╚═══██╗   ╚██╔╝  ██║╚██╗██║",
+      "  ██████╔╝    ██║   ██║ ╚████║",
+      "  ╚═════╝     ╚═╝   ╚═╝  ╚═══╝",
+    ],
+    stages: [
+      "initiating alignment protocol",
+      "harmonizing action items",
+      "converting meetings into margin",
+      "minting provisional shareholder value",
+    ],
+    kpis: [
+      "EBITDA +0.4%",
+      "morale provisionally approved",
+      "consultants +7",
+      "clarity -3",
+    ],
+    finalLine:
+      "Synergy achieved. Headcount unchanged. Morale amortized.",
+    transcriptLine: "SYNERGY EVENT: shareholder value allegedly unlocked.",
+  },
+  {
+    id: "boardroom-alert",
+    title: "BOARDROOM ALERT",
+    subtitle: "value creation siren armed",
+    art: [
+      "  [!] BOARDROOM ALERT",
+      "  [!] ALIGNMENT DETECTED",
+      "  [!] VALUE CREATION IMMINENT",
+      "  [!] ASK NO FOLLOW-UP QUESTIONS",
+    ],
+    stages: [
+      "paging senior stakeholders",
+      "escalating morale to committee",
+      "routing accountability offshore",
+      "closing the loop with no loop",
+    ],
+    kpis: [
+      "risk committee awake",
+      "action items multiplying",
+      "status: billable",
+      "decision rights unclear",
+    ],
+    finalLine: "Drexler approve synergy. Nobody ask what changed.",
+    transcriptLine: "SYNERGY EVENT: boardroom siren produced measurable vibes.",
+  },
+  {
+    id: "briefcase-cameo",
+    title: "BRIEFCASE CAMEO",
+    subtitle: "executive artifact opening",
+    art: [
+      "        _________",
+      "      _/  ___   \\_",
+      "     |  $     $   |",
+      "     |  ───┬───   |",
+      "     |_____|_______|",
+      "        /  |  \\",
+    ],
+    stages: [
+      "unlocking sealed mandate",
+      "counting invisible efficiencies",
+      "deploying tasteful corporate sparkle",
+      "reclassifying excitement as asset",
+    ],
+    kpis: [
+      "briefcase yield +12 bps",
+      "sparkle reserve funded",
+      "memo density rising",
+      "bonus pool unchanged",
+    ],
+    finalLine: "Briefcase open. Synergy escaped. Legal says it was planned.",
+    transcriptLine: "SYNERGY EVENT: briefcase opened and released approved optimism.",
+  },
+  {
+    id: "achievement-unlocked",
+    title: "ACHIEVEMENT UNLOCKED",
+    subtitle: "cross-functional theater",
+    art: [
+      "      ╔══════════════════╗",
+      "      ║  DEAL TROPHY +1  ║",
+      "      ╚══════════════════╝",
+      "        Reward: meeting",
+      "        Status: billable",
+    ],
+    stages: [
+      "checking performance conditions",
+      "unlocking meeting about meeting",
+      "allocating credit to leadership",
+      "filing victory under recurring revenue",
+    ],
+    kpis: [
+      "achievement: unlocked",
+      "reward: one calendar invite",
+      "prestige +8",
+      "substance pending",
+    ],
+    finalLine: "Achievement unlocked: Cross-Functional Theater.",
+    transcriptLine: "SYNERGY EVENT: achievement unlocked, substance pending.",
+  },
+];
+
+export function pickSynergyEvent(
+  random: () => number = Math.random,
+): SynergyEventDefinition {
+  const idx = Math.min(
+    SYNERGY_EVENTS.length - 1,
+    Math.floor(random() * SYNERGY_EVENTS.length),
+  );
+  return SYNERGY_EVENTS[idx]!;
+}
+
+function frameProgress(frame: number): number {
+  return Math.max(0, Math.min(1, frame / (SYNERGY_EVENT_FRAMES - 1)));
+}
+
+function bar(progress: number, width: number): string {
+  const safeWidth = Math.max(1, width);
+  const filled = Math.max(0, Math.min(safeWidth, Math.round(progress * safeWidth)));
+  return `${"█".repeat(filled)}${"░".repeat(safeWidth - filled)}`;
+}
+
+function stageAt(event: SynergyEventDefinition, frame: number): string {
+  const progress = frameProgress(frame);
+  const idx = Math.min(
+    event.stages.length - 1,
+    Math.floor(progress * event.stages.length),
+  );
+  return event.stages[idx]!;
+}
+
+function visibleArt(event: SynergyEventDefinition, frame: number): readonly string[] {
+  const progress = frameProgress(frame);
+  const count = Math.max(1, Math.ceil(progress * event.art.length));
+  return event.art.slice(0, count);
+}
+
+function kpiAt(event: SynergyEventDefinition, frame: number): string {
+  return event.kpis[Math.floor(frame / 3) % event.kpis.length]!;
+}
+
+interface Props {
+  event: SynergyEventDefinition;
+  frame: number;
+  width?: number;
+  compact?: boolean;
+}
+
+function SynergyEventInner({
+  event,
+  frame,
+  width = 80,
+  compact = false,
+}: Props) {
+  const t = useTheme();
+  const safeWidth = Math.max(1, Math.floor(width));
+  const progress = frameProgress(frame);
+  const done = progress >= 0.94;
+  const tiny = safeWidth < 38 || compact;
+
+  if (tiny) {
+    const label = done ? event.finalLine : stageAt(event, frame);
+    const miniBarWidth = Math.max(4, Math.min(18, safeWidth - 12));
+    const line = `SYNC ${bar(progress, miniBarWidth)} ${label}`;
+    return (
+      <Box width={safeWidth} flexShrink={1}>
+        <Text color={done ? t.primaryLight : t.warning} bold wrap="truncate">
+          {fitDisplayText(line, safeWidth)}
+        </Text>
+      </Box>
+    );
+  }
+
+  const innerWidth = Math.max(1, safeWidth - 4);
+  const title = `${event.title} · ${event.subtitle}`;
+  const progressWidth = Math.max(8, Math.min(34, innerWidth - 18));
+  const progressPct = `${Math.round(progress * 100)
+    .toString()
+    .padStart(3, " ")}%`;
+  const artWidth = Math.max(1, innerWidth - 2);
+  const kpi = kpiAt(event, frame);
+
+  return (
+    <Box
+      flexDirection="column"
+      borderStyle="round"
+      borderColor={done ? t.primaryLight : t.warning}
+      paddingX={1}
+      marginBottom={1}
+      width={safeWidth}
+      flexShrink={1}
+    >
+      <Box>
+        <Text color={t.warning} bold>
+          SYNERGY EVENT
+        </Text>
+        <Text color={t.primaryDim}> ─ </Text>
+        <Text color={t.dim} wrap="truncate">
+          {fitDisplayText(title, Math.max(1, innerWidth - 16))}
+        </Text>
+      </Box>
+      <Box marginTop={1} flexDirection="column">
+        {visibleArt(event, frame).map((line, idx) => (
+          <Text key={`${event.id}-${idx}`} color={t.primaryLight} wrap="truncate">
+            {fitDisplayText(line, artWidth)}
+          </Text>
+        ))}
+      </Box>
+      <Box marginTop={1}>
+        <Text color={t.primaryDim}>[</Text>
+        <Text color={done ? t.primaryLight : t.warning}>
+          {bar(progress, progressWidth)}
+        </Text>
+        <Text color={t.primaryDim}>] </Text>
+        <Text color={t.dim}>{progressPct}</Text>
+      </Box>
+      <Box>
+        <Text color={t.primaryLight} bold>
+          ◆{" "}
+        </Text>
+        <Text color={t.text} wrap="truncate">
+          {fitDisplayText(stageAt(event, frame), Math.max(1, innerWidth - 2))}
+        </Text>
+      </Box>
+      <Box>
+        <Text color={t.primaryDim}>ticker </Text>
+        <Text color={t.warning} wrap="truncate">
+          {fitDisplayText(kpi, Math.max(1, innerWidth - 7))}
+        </Text>
+      </Box>
+      {done ? (
+        <Box marginTop={1}>
+          <Text color={t.primaryLight} bold wrap="truncate">
+            {fitDisplayText(event.finalLine, innerWidth)}
+          </Text>
+        </Box>
+      ) : null}
+    </Box>
+  );
+}
+
+export const SynergyEvent = memo(SynergyEventInner);
+
+export function synergyEventRows(width: number, compact = false): number {
+  if (compact || width < 38) return 1;
+  return 12;
+}
+
+export function synergyEventMaxRowWidth(
+  rendered: string,
+  stripAnsi: (s: string) => string = (s) => s,
+): number {
+  return Math.max(
+    0,
+    ...stripAnsi(rendered)
+      .split("\n")
+      .map((row) => displayWidth(row)),
+  );
+}