drexler 0.2.10 → 0.2.12

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.2.12
+
+- Removed the duplicate startup card render so normal launches show one startup panel.
+- Tightened the embedded Deal Desk width so its box stays clean inside the startup panel.
+
+## 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.

package/package.json

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

package/src/index.ts

@@ -19,7 +19,6 @@ import {
 } from "./renderer.ts";
 import { startRepl } from "./repl.ts";
 import { App } from "./ui/App.tsx";
-import { MascotIntro } from "./ui/MascotIntro.tsx";
 import { promptForApiKeyWithInk } from "./ui/SetupPrompt.tsx";
 import { ThemeProvider } from "./ui/ThemeContext.tsx";
 import { getActiveTheme, selectTheme, setActiveTheme } from "./ui/themes.ts";
@@ -127,22 +126,10 @@ async function main(): Promise<void> {
 
   if (isInteractive) {
     if (!skipIntro) {
-      // Print intro to stdout before Ink mounts. Ink's <Static> can't host
-      // animated state, and we want the banner visible from boot.
       console.log("");
       await typewriterBanner();
       console.log(tagline());
       console.log("");
-      // Animated welcome card via transient Ink instance.
-      const intro = render(
-        React.createElement(ThemeProvider, {
-          value: getActiveTheme(),
-          children: React.createElement(MascotIntro, { greeting }),
-        }),
-        { exitOnCtrlC: false },
-      );
-      await intro.waitUntilExit();
-      intro.unmount();
     }
 
     console.log("");
@@ -152,7 +139,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());
@@ -126,9 +136,14 @@ export function App({ conversation, config, mood = "neutral", fetchFn }: AppProp
   const chromeWidth = useMemo(() => Math.max(1, cols), [cols]);
   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[]>([]);
@@ -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(72, Math.max(42, Math.floor(chromeWidth * 0.34)))
+      : 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}

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}
+    />
+  );
+}