drexler 0.2.9 → 0.2.11

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.2.11
+
+- Moved the live Deal Desk chrome into the startup panel on normal launches.
+- Kept a standalone Deal Desk header for fast and no-intro launches.
+- Added coverage for embedded startup-panel Deal Desk rendering.
+
+## 0.2.10
+
+- Closed transcript turn blocks with right-side borders and corners so user and Drexler cards align with the input frame.
+- Aligned the status row with the main chat chrome.
+
 ## 0.2.9
 
 - Removed transcript card side labels like `incoming memo` and `response ledger`.

package/package.json

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

package/src/index.ts

@@ -142,6 +142,7 @@ async function main(): Promise<void> {
         { exitOnCtrlC: false },
       );
       await intro.waitUntilExit();
+      intro.clear();
       intro.unmount();
     }
 
@@ -152,7 +153,13 @@ async function main(): Promise<void> {
     const { waitUntilExit } = render(
       React.createElement(ThemeProvider, {
         value: getActiveTheme(),
-        children: React.createElement(App, { conversation, config, mood }),
+        children: React.createElement(App, {
+          conversation,
+          config,
+          mood,
+          greeting,
+          showIntroChrome: !skipIntro,
+        }),
       }),
       { exitOnCtrlC: false },
     );

package/src/ui/App.tsx

@@ -34,6 +34,7 @@ import {
   insertAtCursor,
 } from "./graphemes.ts";
 import { InputBox } from "./InputBox.tsx";
+import { MascotDashboard } from "./MascotIntro.tsx";
 import { StreamingMessage } from "./Message.tsx";
 import { Spinner } from "./Spinner.tsx";
 import { StatusBar } from "./StatusBar.tsx";
@@ -101,9 +102,18 @@ interface AppProps {
   config: Config;
   mood?: string;
   fetchFn?: FetchFn;
+  greeting?: string;
+  showIntroChrome?: boolean;
 }
 
-export function App({ conversation, config, mood = "neutral", fetchFn }: AppProps) {
+export function App({
+  conversation,
+  config,
+  mood = "neutral",
+  fetchFn,
+  greeting,
+  showIntroChrome = false,
+}: AppProps) {
   const { exit } = useApp();
   const { stdout } = useStdout();
   const [activeTheme, setActiveThemeSnapshot] = useState(() => getActiveTheme());
@@ -124,11 +134,16 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   const mode = useMemo(() => pickLayout(cols), [cols]);
   const inputWidth = useMemo(() => Math.max(1, cols), [cols]);
   const chromeWidth = useMemo(() => Math.max(1, cols), [cols]);
-  const statusBarWidth = useMemo(() => Math.max(1, inputWidth - 2), [inputWidth]);
+  const statusBarWidth = inputWidth;
   const isCompact = mode === "very-narrow";
+  const integratedIntro = showIntroChrome && typeof greeting === "string";
   const maxTranscriptRows = useMemo(
-    () => transcriptRowsForTerminalRows(rows),
-    [rows],
+    () =>
+      Math.max(
+        1,
+        transcriptRowsForTerminalRows(rows) - (integratedIntro ? 10 : 0),
+      ),
+    [integratedIntro, rows],
   );
 
   const [items, setItems] = useState<ChatItem[]>([]);
@@ -303,7 +318,7 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
         setWitticism(event.finalLine);
         addItem("system", event.transcriptLine);
       }
-    }, 60);
+    }, 45);
   }, [addItem]);
 
   const runLLM = useCallback(async (instruction?: string) => {
@@ -701,6 +716,26 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   const isBusy =
     requestInFlight || streaming !== null || thinking !== null || synergyEvent !== null;
   const headerStatus = isBusy ? "streaming" : deskStatus;
+  const embeddedDealDeskWidth =
+    chromeWidth >= 112
+      ? Math.min(92, Math.max(32, Math.floor(chromeWidth * 0.44)))
+      : Math.max(32, chromeWidth - 8);
+  const dealDeskHeader = (
+    <DealDeskHeader
+      model={model}
+      mood={mood}
+      messageCount={msgCount}
+      themeName={themeName}
+      approximateTokens={tokenCount}
+      latencyMs={lastLatencyMs}
+      fallbackModel={fallbackModel}
+      status={headerStatus}
+      compact={isCompact}
+      notice={!integratedIntro ? deskNotice ?? undefined : undefined}
+      maxWidth={integratedIntro ? embeddedDealDeskWidth : chromeWidth}
+      marginBottom={integratedIntro ? 0 : 1}
+    />
+  );
   const visibleTranscriptRows = synergyEvent
     ? Math.max(1, maxTranscriptRows - synergyEventRows(chromeWidth, isCompact))
     : maxTranscriptRows;
@@ -708,19 +743,17 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   return (
     <ThemeProvider value={activeTheme}>
       <Box flexDirection="column">
-        <DealDeskHeader
-          model={model}
-          mood={mood}
-          messageCount={msgCount}
-          themeName={themeName}
-          approximateTokens={tokenCount}
-          latencyMs={lastLatencyMs}
-          fallbackModel={fallbackModel}
-          status={headerStatus}
-          compact={isCompact}
-          notice={deskNotice ?? undefined}
-          maxWidth={chromeWidth}
-        />
+        {integratedIntro ? (
+          <Box marginBottom={1}>
+            <MascotDashboard
+              greeting={greeting}
+              width={chromeWidth}
+              dealDesk={dealDeskHeader}
+            />
+          </Box>
+        ) : (
+          dealDeskHeader
+        )}
         <TranscriptViewport
           items={items}
           maxRows={visibleTranscriptRows}
@@ -776,7 +809,7 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
                   width={inputWidth}
                 />
               </Box>
-              <Box paddingLeft={2}>
+              <Box>
                 <StatusBar
                   messageCount={msgCount}
                   witticism={witticism}

package/src/ui/DealDeskHeader.tsx

@@ -16,6 +16,7 @@ export interface DealDeskHeaderProps {
   compact?: boolean;
   notice?: string;
   maxWidth?: number;
+  marginBottom?: number;
 }
 
 const DEFAULT_WIDTH = 80;
@@ -151,6 +152,7 @@ function DealDeskHeaderInner({
   compact = false,
   notice,
   maxWidth = DEFAULT_WIDTH,
+  marginBottom = 1,
 }: DealDeskHeaderProps) {
   const t = useTheme();
   const width = Math.max(MIN_WIDTH, Math.floor(maxWidth));
@@ -194,7 +196,7 @@ function DealDeskHeaderInner({
 
   if (width < FRAMED_MIN_WIDTH) {
     return (
-      <Box width={width} marginBottom={1}>
+      <Box width={width} marginBottom={marginBottom}>
         <Text color={statusColor[status]} wrap="truncate">
           {tinyLine({ model, messageCount, status, width })}
         </Text>
@@ -203,7 +205,7 @@ function DealDeskHeaderInner({
   }
 
   return (
-    <Box flexDirection="column" width={width} marginBottom={1}>
+    <Box flexDirection="column" width={width} marginBottom={marginBottom}>
       <Text color={t.primaryDim}>{lines[0]}</Text>
       <Text color={statusColor[status]}>{lines[1]}</Text>
       {lines.slice(2, -1).map((line, index) => (

package/src/ui/MascotIntro.tsx

@@ -1,5 +1,5 @@
 import { Box, Text, useApp, useInput, useStdout } from "ink";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { STARTUP_TIPS } from "../startupTips.ts";
 import {
   MascotFrame,
@@ -139,6 +139,16 @@ interface IntroProps {
   greeting: string;
 }
 
+interface MascotDashboardProps {
+  greeting: string;
+  width: number;
+  state?: MascotState;
+  bar?: string;
+  barColor?: string;
+  mascotStatus?: string;
+  dealDesk?: ReactNode;
+}
+
 function bootBar(frameIdx: number, total: number): string {
   const active = Math.max(
     1,
@@ -167,59 +177,21 @@ function TipsPanel({ width }: { width: number }) {
   );
 }
 
-export function MascotIntro({ greeting }: IntroProps) {
+export function MascotDashboard({
+  greeting,
+  width,
+  state = FRAMES[FRAMES.length - 1]!,
+  bar = bootBar(FRAMES.length - 1, FRAMES.length),
+  barColor,
+  mascotStatus = `${INTRO_STATUS_PREFIX}${INTRO_BOOT_NOTES[INTRO_BOOT_NOTES.length - 1]}`,
+  dealDesk,
+}: MascotDashboardProps) {
   const t = useTheme();
-  const { exit } = useApp();
-  const { stdout } = useStdout();
-  const [cols, setCols] = useState(stdout?.columns ?? 80);
-  const [frameIdx, setFrameIdx] = useState(0);
-
-  useEffect(() => {
-    if (!stdout) return;
-    const handler = () => setCols(stdout.columns ?? 80);
-    stdout.on("resize", handler);
-    return () => {
-      stdout.off("resize", handler);
-    };
-  }, [stdout]);
-
-  useInput((_input, key) => {
-    if (key.escape || key.return || (key.ctrl && _input === "c")) exit();
-  });
-
-  const mountedRef = useRef(true);
-  useEffect(() => {
-    return () => {
-      mountedRef.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    const compact = cols < 72;
-    const total = compact ? COMPACT_NOTES.length : FRAMES.length;
-    if (frameIdx >= total - 1) {
-      const handle = setTimeout(() => {
-        if (mountedRef.current) exit();
-      }, SETTLE_HOLD_MS);
-      return () => clearTimeout(handle);
-    }
-    const delay = compact
-      ? COMPACT_DELAY_MS
-      : (FRAMES[frameIdx] ?? FRAMES[FRAMES.length - 1]!).delayMs;
-    const handle = setTimeout(() => {
-      if (mountedRef.current) setFrameIdx((i) => i + 1);
-    }, delay);
-    return () => clearTimeout(handle);
-  }, [cols, frameIdx, exit]);
-
-  const state = FRAMES[frameIdx] ?? FRAMES[FRAMES.length - 1]!;
-  // Below 21 cols, mascot (17) + gutter (4) overflow — render text-only.
-  const tinyTerminal = cols < 21;
-  const compact = cols < 72;
-  const sideBySide = cols >= 112;
-  const available = compact
-    ? Math.max(1, cols - 1)
-    : Math.max(28, cols);
+  const resolvedBarColor = barColor ?? t.primaryLight;
+  const tinyTerminal = width < 21;
+  const compact = width < 72;
+  const sideBySide = width >= 112;
+  const available = compact ? Math.max(1, width - 1) : Math.max(28, width);
   const innerWidth = compact
     ? available
     : Math.max(24, available - FRAME_CHROME_WIDTH);
@@ -239,29 +211,16 @@ export function MascotIntro({ greeting }: IntroProps) {
     : sideBySide
     ? Math.max(18, leftPanelWidth - MASCOT_WIDTH - GUTTER_WIDTH)
     : innerWidth;
-  const bar = bootBar(
-    Math.min(frameIdx, compact ? COMPACT_NOTES.length - 1 : FRAMES.length - 1),
-    compact ? COMPACT_NOTES.length : FRAMES.length,
-  );
-  const barColor =
-    frameIdx < (compact ? COMPACT_NOTES.length : FRAMES.length) / 3
-      ? t.error
-      : frameIdx < ((compact ? COMPACT_NOTES.length : FRAMES.length) * 2) / 3
-      ? t.warning
-      : t.primaryLight;
-  const note = compact
-    ? COMPACT_NOTES[Math.min(frameIdx, COMPACT_NOTES.length - 1)]!
-    : state.note;
-  const mascotStatus = `${INTRO_STATUS_PREFIX}${note}`;
 
   if (tinyTerminal) {
     return (
       <Box width={available} flexDirection="column">
-        <Text color={barColor}>{mascotStatus}</Text>
+        <Text color={resolvedBarColor}>{mascotStatus}</Text>
         <Text bold color={t.primaryLight}>
           Drexler™
         </Text>
         <Text color={t.primaryLight}>{greeting}</Text>
+        {dealDesk ? <Box marginTop={1}>{dealDesk}</Box> : null}
       </Box>
     );
   }
@@ -269,12 +228,13 @@ export function MascotIntro({ greeting }: IntroProps) {
   if (compact) {
     return (
       <Box marginLeft={1} width={available} flexDirection="column">
-        <Text color={barColor}>{bar}</Text>
-        <Text color={barColor}>{mascotStatus}</Text>
+        <Text color={resolvedBarColor}>{bar}</Text>
+        <Text color={resolvedBarColor}>{mascotStatus}</Text>
         <Text bold color={t.primaryLight}>
           Drexler International™
         </Text>
         <Text color={t.primaryLight}>{greeting}</Text>
+        {dealDesk ? <Box marginTop={1}>{dealDesk}</Box> : null}
       </Box>
     );
   }
@@ -297,8 +257,8 @@ export function MascotIntro({ greeting }: IntroProps) {
             marginRight={sideBySide ? GUTTER_WIDTH : 0}
           >
             <MascotFrame {...state} />
-            <Text color={barColor}>{bar}</Text>
-            <Text color={barColor}>{mascotStatus}</Text>
+            <Text color={resolvedBarColor}>{bar}</Text>
+            <Text color={resolvedBarColor}>{mascotStatus}</Text>
           </Box>
           <Box
             flexDirection="column"
@@ -323,16 +283,96 @@ export function MascotIntro({ greeting }: IntroProps) {
                 </Text>
               ))}
             </Box>
-            <Box width={tipsWidth}>
-              <TipsPanel width={tipsWidth} />
+            <Box
+              flexDirection="column"
+              width={tipsWidth}
+              paddingRight={1}
+            >
+              <TipsPanel width={Math.max(1, tipsWidth - 1)} />
+              {dealDesk ? <Box marginTop={1}>{dealDesk}</Box> : null}
             </Box>
           </>
         ) : (
-          <Box marginTop={1} width={tipsWidth}>
+          <Box marginTop={1} width={tipsWidth} flexDirection="column">
             <TipsPanel width={tipsWidth} />
+            {dealDesk ? <Box marginTop={1}>{dealDesk}</Box> : null}
           </Box>
         )}
       </Box>
     </Box>
   );
 }
+
+export function MascotIntro({ greeting }: IntroProps) {
+  const t = useTheme();
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+  const [cols, setCols] = useState(stdout?.columns ?? 80);
+  const [frameIdx, setFrameIdx] = useState(0);
+
+  useEffect(() => {
+    if (!stdout) return;
+    const handler = () => setCols(stdout.columns ?? 80);
+    stdout.on("resize", handler);
+    return () => {
+      stdout.off("resize", handler);
+    };
+  }, [stdout]);
+
+  useInput((_input, key) => {
+    if (key.escape || key.return || (key.ctrl && _input === "c")) exit();
+  });
+
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    const compact = cols < 72;
+    const total = compact ? COMPACT_NOTES.length : FRAMES.length;
+    if (frameIdx >= total - 1) {
+      const handle = setTimeout(() => {
+        if (mountedRef.current) exit();
+      }, SETTLE_HOLD_MS);
+      return () => clearTimeout(handle);
+    }
+    const delay = compact
+      ? COMPACT_DELAY_MS
+      : (FRAMES[frameIdx] ?? FRAMES[FRAMES.length - 1]!).delayMs;
+    const handle = setTimeout(() => {
+      if (mountedRef.current) setFrameIdx((i) => i + 1);
+    }, delay);
+    return () => clearTimeout(handle);
+  }, [cols, frameIdx, exit]);
+
+  const state = FRAMES[frameIdx] ?? FRAMES[FRAMES.length - 1]!;
+  const compact = cols < 72;
+  const bar = bootBar(
+    Math.min(frameIdx, compact ? COMPACT_NOTES.length - 1 : FRAMES.length - 1),
+    compact ? COMPACT_NOTES.length : FRAMES.length,
+  );
+  const barColor =
+    frameIdx < (compact ? COMPACT_NOTES.length : FRAMES.length) / 3
+      ? t.error
+      : frameIdx < ((compact ? COMPACT_NOTES.length : FRAMES.length) * 2) / 3
+      ? t.warning
+      : t.primaryLight;
+  const note = compact
+    ? COMPACT_NOTES[Math.min(frameIdx, COMPACT_NOTES.length - 1)]!
+    : state.note;
+  const mascotStatus = `${INTRO_STATUS_PREFIX}${note}`;
+
+  return (
+    <MascotDashboard
+      greeting={greeting}
+      width={cols}
+      state={state}
+      bar={bar}
+      barColor={barColor}
+      mascotStatus={mascotStatus}
+    />
+  );
+}

package/src/ui/SynergyEvent.tsx

@@ -1,5 +1,5 @@
 import { Box, Text } from "ink";
-import { memo } from "react";
+import { memo, useMemo } from "react";
 import { displayWidth, fitDisplayText } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
@@ -142,6 +142,17 @@ function frameProgress(frame: number): number {
   return Math.max(0, Math.min(1, frame / (SYNERGY_EVENT_FRAMES - 1)));
 }
 
+// Cubic ease-out: fast reveal, soft settle. Feels less mechanical than linear.
+function easeOutCubic(p: number): number {
+  const clamped = Math.max(0, Math.min(1, p));
+  const inv = 1 - clamped;
+  return 1 - inv * inv * inv;
+}
+
+function easedProgress(frame: number): number {
+  return easeOutCubic(frameProgress(frame));
+}
+
 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)));
@@ -149,7 +160,7 @@ function bar(progress: number, width: number): string {
 }
 
 function stageAt(event: SynergyEventDefinition, frame: number): string {
-  const progress = frameProgress(frame);
+  const progress = easedProgress(frame);
   const idx = Math.min(
     event.stages.length - 1,
     Math.floor(progress * event.stages.length),
@@ -157,13 +168,10 @@ function stageAt(event: SynergyEventDefinition, frame: number): string {
   return event.stages[idx]!;
 }
 
-function visibleArt(event: SynergyEventDefinition, frame: number): readonly string[] {
-  const progress = frameProgress(frame);
-  const count = Math.max(
-    1,
-    Math.ceil(progress * Math.min(event.art.length, FULL_EVENT_ART_ROWS)),
-  );
-  return event.art.slice(0, count);
+function visibleArtCount(event: SynergyEventDefinition, frame: number): number {
+  const progress = easedProgress(frame);
+  const cap = Math.min(event.art.length, FULL_EVENT_ART_ROWS);
+  return Math.max(1, Math.ceil(progress * cap));
 }
 
 function kpiAt(event: SynergyEventDefinition, frame: number): string {
@@ -185,9 +193,18 @@ function SynergyEventInner({
 }: Props) {
   const t = useTheme();
   const safeWidth = Math.max(1, Math.floor(width));
-  const progress = frameProgress(frame);
+  const progress = easedProgress(frame);
   const done = frame >= SYNERGY_EVENT_FRAMES - 1;
   const tiny = safeWidth < 38 || compact;
+  // Title pulse: alert-style flicker during early reveal, calm bright on done.
+  const earlyPulse = !done && frame < 6 && frame % 2 === 0;
+  const titleColor = done ? t.primaryLight : earlyPulse ? t.primary : t.warning;
+
+  const artFrames = useMemo(
+    () => event.art.slice(0, FULL_EVENT_ART_ROWS),
+    [event],
+  );
+  const revealedRows = visibleArtCount(event, frame);
 
   if (tiny) {
     const label = done ? event.finalLine : stageAt(event, frame);
@@ -195,7 +212,7 @@ function SynergyEventInner({
     const line = `SYNC ${bar(progress, miniBarWidth)} ${label}`;
     return (
       <Box width={safeWidth} flexShrink={1}>
-        <Text color={done ? t.primaryLight : t.warning} bold wrap="truncate">
+        <Text color={titleColor} bold wrap="truncate">
           {fitDisplayText(line, safeWidth)}
         </Text>
       </Box>
@@ -223,7 +240,7 @@ function SynergyEventInner({
         flexShrink={1}
       >
         <Box>
-          <Text color={t.warning} bold>
+          <Text color={titleColor} bold>
             SYNERGY EVENT
           </Text>
           <Text color={t.primaryDim}> ─ </Text>
@@ -232,8 +249,8 @@ function SynergyEventInner({
           </Text>
         </Box>
         <Box flexDirection="column">
-          {event.art.slice(0, FULL_EVENT_ART_ROWS).map((line, idx) => {
-            const revealed = idx < visibleArt(event, frame).length;
+          {artFrames.map((line, idx) => {
+            const revealed = idx < revealedRows;
             return (
               <Text
                 key={`${event.id}-${idx}`}

package/src/ui/TranscriptViewport.tsx

@@ -103,8 +103,12 @@ function itemRows(
   cols: number,
 ): number {
   if (compact) return 1;
-  const bodyPrefix = `${ROLE_MARKERS[item.role]}  `;
-  const contentWidth = Math.max(1, cols - displayWidth(bodyPrefix));
+  const bodyPrefix = "│ › ";
+  const bodySuffix = " │";
+  const contentWidth = Math.max(
+    1,
+    cols - displayWidth(bodyPrefix) - displayWidth(bodySuffix),
+  );
   return 2 + wrappedContentRows(item.content, contentWidth).length;
 }
 
@@ -162,31 +166,41 @@ function DefaultTranscriptItem({
   }
 
   const headerPrefix = `╭─ ${label} `;
-  const headerRuleWidth = Math.max(0, cols - displayWidth(headerPrefix));
-  const footerWidth = Math.max(1, cols - 1);
-  const bodyPrefix = `${ROLE_MARKERS[item.role]}  `;
-  const contentWidth = Math.max(1, cols - displayWidth(bodyPrefix));
+  const headerRuleWidth = Math.max(0, cols - displayWidth(headerPrefix) - 1);
+  const footerWidth = Math.max(0, cols - 2);
+  const bodyPrefix = item.role === "user" ? "│ › " : "│   ";
+  const continuationPrefix = "│   ";
+  const bodySuffix = " │";
+  const contentWidth = Math.max(
+    1,
+    cols - displayWidth(bodyPrefix) - displayWidth(bodySuffix),
+  );
 
   return (
     <Box flexDirection="column" width={cols} flexShrink={1}>
       <Text color={accent} bold wrap="truncate">
         {fitDisplayText(
-          `${headerPrefix}${rule("─", headerRuleWidth)}`,
+          `${headerPrefix}${rule("─", headerRuleWidth)}╮`,
           cols,
         )}
       </Text>
       {wrappedContentRows(item.content, contentWidth).map((line, index) => (
         <Box key={index} width={cols} flexShrink={1}>
           <Text color={accent} bold={item.role === "user"}>
-            {index === 0 || item.role === "assistant" ? bodyPrefix : "   "}
+            {index === 0 ? bodyPrefix : continuationPrefix}
           </Text>
           <Text color={roleBodyColor(item.role, t)}>
-            {line}
+            {fitDisplayText(line, contentWidth)}
+          </Text>
+          <Text color={accent} bold={item.role === "user"}>
+            {`${" ".repeat(
+              Math.max(0, contentWidth - displayWidth(line)),
+            )}${bodySuffix}`}
           </Text>
         </Box>
       ))}
       <Text color={accent} bold={item.role === "user"} wrap="truncate">
-        {fitDisplayText(`╰${rule("─", footerWidth)}`, cols)}
+        {fitDisplayText(`╰${rule("─", footerWidth)}╯`, cols)}
       </Text>
     </Box>
   );