drexler 0.2.12 → 0.2.13

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.2.13
+
+- Hardened startup panel layout across narrow, standard, and wide terminals.
+- Clamped the embedded Deal Desk to its actual startup-panel column.
+- Improved display-width clipping for Deal Desk, command palette, spinner, status bar, and transcript row budgeting.
+- Added regression coverage for duplicate startup chrome, wide glyphs, long command rows, and short-terminal startup suppression.
+
 ## 0.2.12
 
 - Removed the duplicate startup card render so normal launches show one startup panel.

package/package.json

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

package/src/ui/App.tsx

@@ -136,14 +136,17 @@ export function App({
   const chromeWidth = useMemo(() => Math.max(1, cols), [cols]);
   const statusBarWidth = inputWidth;
   const isCompact = mode === "very-narrow";
-  const integratedIntro = showIntroChrome && typeof greeting === "string";
+  const integratedIntro =
+    showIntroChrome && typeof greeting === "string" && rows >= 32;
+  const introRowBudget =
+    integratedIntro ? (chromeWidth >= 112 ? 14 : chromeWidth >= 72 ? 26 : 6) : 0;
   const maxTranscriptRows = useMemo(
     () =>
       Math.max(
         1,
-        transcriptRowsForTerminalRows(rows) - (integratedIntro ? 10 : 0),
+        transcriptRowsForTerminalRows(rows) - introRowBudget,
       ),
-    [integratedIntro, rows],
+    [introRowBudget, rows],
   );
 
   const [items, setItems] = useState<ChatItem[]>([]);
@@ -716,11 +719,7 @@ export function App({
   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 = (
+  const renderDealDeskHeader = (width: number) => (
     <DealDeskHeader
       model={model}
       mood={mood}
@@ -732,10 +731,11 @@ export function App({
       status={headerStatus}
       compact={isCompact}
       notice={!integratedIntro ? deskNotice ?? undefined : undefined}
-      maxWidth={integratedIntro ? embeddedDealDeskWidth : chromeWidth}
+      maxWidth={integratedIntro ? Math.min(72, Math.max(1, width)) : width}
       marginBottom={integratedIntro ? 0 : 1}
     />
   );
+  const dealDeskHeader = renderDealDeskHeader(chromeWidth);
   const visibleTranscriptRows = synergyEvent
     ? Math.max(1, maxTranscriptRows - synergyEventRows(chromeWidth, isCompact))
     : maxTranscriptRows;
@@ -748,7 +748,7 @@ export function App({
             <MascotDashboard
               greeting={greeting}
               width={chromeWidth}
-              dealDesk={dealDeskHeader}
+              dealDesk={renderDealDeskHeader}
             />
           </Box>
         ) : (
@@ -769,7 +769,7 @@ export function App({
             </Box>
           )}
           {thinking !== null && streaming === null && (
-            <Box paddingX={1} marginBottom={1}>
+            <Box marginBottom={1}>
               <Spinner label={thinking} width={chromeWidth} />
             </Box>
           )}

package/src/ui/CommandPalette.tsx

@@ -54,13 +54,18 @@ function paletteHeading(items: ReadonlyArray<SlashCommand>): {
   };
 }
 
+function padDisplayText(input: string, width: number): string {
+  const clipped = fitDisplayText(input, width);
+  return `${clipped}${" ".repeat(Math.max(0, width - displayWidth(clipped)))}`;
+}
+
 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.reduce((m, i) => Math.max(m, displayWidth(i.name)), 0),
     [items],
   );
   if (items.length === 0) return null;
@@ -87,10 +92,21 @@ function CommandPaletteInner({ items, selectedIdx, width = 80 }: Props) {
   }
 
   const innerWidth = Math.max(1, safeWidth - 4);
-  const descBudget = Math.max(8, Math.floor(innerWidth * 0.36));
+  const markerWidth = 2;
+  const nameBudget = Math.max(
+    6,
+    Math.min(maxNameW + 1, Math.floor(innerWidth * 0.44)),
+  );
+  const descBudget = Math.max(
+    6,
+    Math.min(
+      Math.floor(innerWidth * 0.34),
+      innerWidth - markerWidth - nameBudget - 1,
+    ),
+  );
   const hintBudget = Math.max(
     0,
-    innerWidth - 4 - maxNameW - descBudget - 4,
+    innerWidth - markerWidth - nameBudget - 1 - descBudget - 2,
   );
 
   return (
@@ -121,18 +137,12 @@ function CommandPaletteInner({ items, selectedIdx, width = 80 }: Props) {
         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 name = padDisplayText(item.name, nameBudget);
+        const desc = padDisplayText(item.description, descBudget);
         const clippedHint =
           hintBudget > 0 ? fitDisplayText(hint, hintBudget) : "";
-        const rowWidth =
-          2 +
-          displayWidth(name) +
-          1 +
-          displayWidth(desc) +
-          (clippedHint ? 2 + displayWidth(clippedHint) : 0);
         return (
-          <Box key={item.name} width={Math.min(innerWidth, rowWidth)} flexShrink={1}>
+          <Box key={item.name} width={innerWidth} flexShrink={1}>
             <Text color={sel ? t.primaryLight : t.primaryDim} bold={sel}>
               {sel ? "› " : "  "}
             </Text>
@@ -140,7 +150,7 @@ function CommandPaletteInner({ items, selectedIdx, width = 80 }: Props) {
               {name}
             </Text>
             <Text color={t.primaryDim}> </Text>
-            <Text color={sel ? t.text : t.dim} wrap="truncate">
+            <Text color={sel ? t.text : t.dim}>
               {desc}
             </Text>
             {clippedHint ? (

package/src/ui/DealDeskHeader.tsx

@@ -1,5 +1,6 @@
 import { Box, Text } from "ink";
 import { memo, useMemo } from "react";
+import { displayWidth, fitDisplayText } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
 export type DealDeskHeaderStatus = "idle" | "streaming" | "error";
@@ -29,25 +30,19 @@ const STATUS_LABEL: Record<DealDeskHeaderStatus, string> = {
   error: "ERROR",
 };
 
-function visibleLength(input: string): number {
-  return Array.from(input).length;
-}
-
 function clampText(input: string, max: number): string {
   if (max <= 0) return "";
-  if (visibleLength(input) <= max) return input;
-  if (max === 1) return "…";
-  return `${Array.from(input).slice(0, max - 1).join("")}…`;
+  return fitDisplayText(input, max);
 }
 
 function padToWidth(input: string, width: number): string {
-  const len = visibleLength(input);
+  const len = displayWidth(input);
   if (len >= width) return input;
   return `${input}${" ".repeat(width - len)}`;
 }
 
 function shellLine(left: string, right: string, width: number): string {
-  const available = Math.max(0, width - visibleLength(left) - visibleLength(right));
+  const available = Math.max(0, width - displayWidth(left) - displayWidth(right));
   return `${left}${"─".repeat(available)}${right}`;
 }
 

package/src/ui/MascotIntro.tsx

@@ -127,13 +127,8 @@ const COMPACT_DELAY_MS = 850;
 const SETTLE_HOLD_MS = 1200;
 const FRAME_CHROME_WIDTH = 4;
 const GUTTER_WIDTH = 4;
-const SPLIT_DIVIDER_WIDTH = 3;
 const BOOT_BAR_WIDTH = MASCOT_WIDTH - 1;
-const SPLIT_DIVIDER_HEIGHT = 9;
-const SPLIT_DIVIDER_ROWS: number[] = Array.from(
-  { length: SPLIT_DIVIDER_HEIGHT },
-  (_, i) => i,
-);
+const RIGHT_COLUMN_BORDER_WIDTH = 2;
 
 interface IntroProps {
   greeting: string;
@@ -146,7 +141,7 @@ interface MascotDashboardProps {
   bar?: string;
   barColor?: string;
   mascotStatus?: string;
-  dealDesk?: ReactNode;
+  dealDesk?: (width: number) => ReactNode;
 }
 
 function bootBar(frameIdx: number, total: number): string {
@@ -191,7 +186,7 @@ export function MascotDashboard({
   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 available = compact ? Math.max(1, width - 1) : Math.max(28, width - 1);
   const innerWidth = compact
     ? available
     : Math.max(24, available - FRAME_CHROME_WIDTH);
@@ -200,11 +195,17 @@ export function MascotDashboard({
     : sideBySide
     ? Math.max(
         MASCOT_WIDTH + GUTTER_WIDTH + 24,
-        Math.floor((innerWidth - SPLIT_DIVIDER_WIDTH) / 2),
+        Math.floor((innerWidth - RIGHT_COLUMN_BORDER_WIDTH) / 2),
       )
     : innerWidth;
+  const rightColumnWidth = sideBySide
+    ? Math.max(20, innerWidth - leftPanelWidth)
+    : innerWidth;
+  const rightInnerWidth = sideBySide
+    ? Math.max(1, rightColumnWidth - RIGHT_COLUMN_BORDER_WIDTH)
+    : rightColumnWidth;
   const tipsWidth = sideBySide
-    ? Math.max(20, innerWidth - leftPanelWidth - SPLIT_DIVIDER_WIDTH)
+    ? rightInnerWidth
     : innerWidth;
   const copyWidth = compact
     ? available
@@ -220,7 +221,7 @@ export function MascotDashboard({
           Drexler™
         </Text>
         <Text color={t.primaryLight}>{greeting}</Text>
-        {dealDesk ? <Box marginTop={1}>{dealDesk}</Box> : null}
+        {dealDesk ? <Box marginTop={1}>{dealDesk(Math.max(1, available))}</Box> : null}
       </Box>
     );
   }
@@ -234,7 +235,7 @@ export function MascotDashboard({
           Drexler International™
         </Text>
         <Text color={t.primaryLight}>{greeting}</Text>
-        {dealDesk ? <Box marginTop={1}>{dealDesk}</Box> : null}
+        {dealDesk ? <Box marginTop={1}>{dealDesk(Math.max(1, available))}</Box> : null}
       </Box>
     );
   }
@@ -275,27 +276,20 @@ export function MascotDashboard({
           </Box>
         </Box>
         {sideBySide ? (
-          <>
-            <Box flexDirection="column" width={SPLIT_DIVIDER_WIDTH}>
-              {SPLIT_DIVIDER_ROWS.map((idx) => (
-                <Text key={idx} color={t.primaryDim}>
-                  {" │ "}
-                </Text>
-              ))}
-            </Box>
             <Box
               flexDirection="column"
-              width={tipsWidth}
-              paddingRight={1}
+              width={rightColumnWidth}
+              borderLeft
+              borderColor={t.primaryDim}
+              paddingLeft={1}
             >
-              <TipsPanel width={Math.max(1, tipsWidth - 1)} />
-              {dealDesk ? <Box marginTop={1}>{dealDesk}</Box> : null}
+              <TipsPanel width={rightInnerWidth} />
+              {dealDesk ? <Box marginTop={1}>{dealDesk(rightInnerWidth)}</Box> : null}
             </Box>
-          </>
         ) : (
           <Box marginTop={1} width={tipsWidth} flexDirection="column">
             <TipsPanel width={tipsWidth} />
-            {dealDesk ? <Box marginTop={1}>{dealDesk}</Box> : null}
+            {dealDesk ? <Box marginTop={1}>{dealDesk(tipsWidth)}</Box> : null}
           </Box>
         )}
       </Box>

package/src/ui/Spinner.tsx

@@ -1,6 +1,6 @@
 import { Box, Text } from "ink";
 import { useEffect, useState } from "react";
-import { fitDisplayText } from "./graphemes.ts";
+import { displayWidth, fitDisplayText } from "./graphemes.ts";
 import { useTheme } from "./ThemeContext.tsx";
 
 const FRAMES = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
@@ -47,8 +47,15 @@ export function Spinner({ label, width = 80 }: Props) {
     );
   }
 
-  const labelBudget = Math.max(1, safeWidth - 22);
+  const innerWidth = Math.max(1, safeWidth - 4);
   const showStage = safeWidth >= 42;
+  const stageLabel = showStage ? ` · ${stage}` : "";
+  const secondsLabel = seconds > 0 && safeWidth >= 34 ? ` · ${seconds}s` : "";
+  const fixedWidth =
+    displayWidth(`${FRAMES[i]} WORKING ─ `) +
+    displayWidth(stageLabel) +
+    displayWidth(secondsLabel);
+  const labelBudget = Math.max(1, innerWidth - fixedWidth);
 
   return (
     <Box
@@ -66,13 +73,8 @@ export function Spinner({ label, width = 80 }: Props) {
       <Text color={t.text} wrap="truncate">
         {fitDisplayText(label, labelBudget)}
       </Text>
-      {showStage ? <Text color={t.dim}> · {stage}</Text> : null}
-      {seconds > 0 && safeWidth >= 34 ? (
-        <>
-          <Text color={t.primaryDim}> · </Text>
-          <Text color={t.dim}>{seconds}s</Text>
-        </>
-      ) : null}
+      {stageLabel ? <Text color={t.dim}>{stageLabel}</Text> : null}
+      {secondsLabel ? <Text color={t.dim}>{secondsLabel}</Text> : null}
     </Box>
   );
 }

package/src/ui/StatusBar.tsx

@@ -16,13 +16,6 @@ interface Props {
 
 const MAX_WITTICISM_LEN = 60;
 
-function clampText(input: string, max: number): string {
-  if (input.length <= max) return input;
-  if (max <= 0) return "";
-  if (max === 1) return "…";
-  return input.slice(0, max - 1) + "…";
-}
-
 function StatusBarInner({
   messageCount,
   witticism,
@@ -40,52 +33,27 @@ function StatusBarInner({
     }),
     [t.primaryLight, t.warning, t.error],
   );
+  const safeWidth =
+    typeof maxWidth === "number" ? Math.max(1, Math.floor(maxWidth)) : undefined;
   const countLabel = `${messageCount} message${messageCount === 1 ? "" : "s"}`;
-  const hintLabel = scrollHint ? `  │  ${scrollHint}` : "";
-  const quoteWidth =
-    typeof maxWidth === "number"
-      ? Math.max(
-          0,
-          maxWidth -
-            "● ".length -
-            countLabel.length -
-            hintLabel.length -
-            "  │  ".length -
-            2,
-        )
-      : MAX_WITTICISM_LEN;
-  const safe = clampText(witticism, Math.min(MAX_WITTICISM_LEN, quoteWidth));
+  const quote = `"${fitDisplayText(witticism, MAX_WITTICISM_LEN)}"`;
+  const line = compact
+    ? `${countLabel}${scrollHint ? `  │  ${scrollHint}` : ""}`
+    : `${countLabel}${scrollHint ? `  │  ${scrollHint}` : ""}  │  ${quote}`;
+  const body = fitDisplayText(line, Math.max(1, (safeWidth ?? 80) - 2));
   const box = compact ? (
     <Box>
       <Text color={dotColor[status]}>● </Text>
-      <Text color={t.dim}>{countLabel}</Text>
-      {scrollHint ? (
-        <>
-          <Text color={t.primaryDim}>{"  │  "}</Text>
-          <Text color={t.primaryLight}>
-            {fitDisplayText(scrollHint, Math.max(1, maxWidth ?? 24))}
-          </Text>
-        </>
-      ) : null}
+      <Text color={t.dim} wrap="truncate">{body}</Text>
     </Box>
   ) : (
     <Box>
       <Text color={dotColor[status]}>● </Text>
-      <Text color={t.dim}>{countLabel}</Text>
-      {scrollHint ? (
-        <>
-          <Text color={t.primaryDim}>{"  │  "}</Text>
-          <Text color={t.primaryLight}>{scrollHint}</Text>
-        </>
-      ) : null}
-      <Text color={t.primaryDim}>{"  │  "}</Text>
-      <Text color={t.dim} italic>
-        "{safe}"
-      </Text>
+      <Text color={t.dim} italic wrap="truncate">{body}</Text>
     </Box>
   );
-  if (typeof maxWidth === "number") {
-    return <Box width={maxWidth}>{box}</Box>;
+  if (typeof safeWidth === "number") {
+    return <Box width={safeWidth}>{box}</Box>;
   }
   return box;
 }

package/src/ui/TranscriptViewport.tsx

@@ -275,11 +275,19 @@ function selectWindow(
     reserveTop = nextReserveTop;
   }
 
-  return {
-    visible: entries.slice(start, end),
-    hiddenBefore: start,
-    hiddenAfter: entries.length - end,
-  };
+  const visible = entries.slice(start, end);
+  const visibleRows = visible.reduce(
+    (sum, entry) => sum + Math.max(1, entry.estimatedRows),
+    0,
+  );
+  let hiddenBefore = start;
+  let hiddenAfter = entries.length - end;
+  if (visibleRows + (hiddenBefore > 0 ? 1 : 0) + (hiddenAfter > 0 ? 1 : 0) > safeRows) {
+    if (hiddenBefore > 0) hiddenBefore = 0;
+    if (visibleRows + (hiddenAfter > 0 ? 1 : 0) > safeRows) hiddenAfter = 0;
+  }
+
+  return { visible, hiddenBefore, hiddenAfter };
 }
 
 function ScrollIndicator({