drexler 0.2.12 → 0.2.14

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.2.14
+
+- Added a startup Mood panel with a stable boot gauge, percentage-only loading row, and rotating mood-specific posture/detail copy.
+- Anchored the wide startup dashboard so wrapped greeting copy no longer pushes the Mood and Deal Desk boxes down or adds stray rows.
+- Reworked the embedded Deal Desk into satirical mood-shaped product chrome instead of model/context telemetry.
+- Improved Drexler transcript rendering with complete bordered cards, a diamond response marker, cleaned markdown/code fence display, and Dracula-inspired code syntax colors.
+- Updated documentation to match current startup chrome, command palette behavior, keyboard controls, source setup, and layout invariants.
+
+## 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/README.md

@@ -4,7 +4,7 @@
 [![license](https://img.shields.io/npm/l/drexler.svg)](./LICENSE)
 [![bun](https://img.shields.io/badge/runtime-bun%20%E2%89%A5%201.1-black)](https://bun.sh)
 
-CLI chat with **Drexler**, a corporate-executive AI persona who speaks in broken third-person and treats every conversation like a hostile takeover. Built with Bun + TypeScript. Talks to OpenRouter's Gemma 4 31B model (paid).
+CLI chat with **Drexler**, a corporate-executive AI persona who speaks in broken third-person and treats every conversation like a hostile takeover. Built with Bun + TypeScript, Ink, and OpenRouter-compatible Gemma models.
 
 > "Drexler usually charge consulting fee for this. Today, pro bono. You welcome."
 
@@ -13,7 +13,7 @@ CLI chat with **Drexler**, a corporate-executive AI persona who speaks in broken
 ## Quickstart
 
 ```bash
-bun add -g drexler
+bun install -g drexler@latest
 drexler
 ```
 
@@ -39,7 +39,7 @@ Verify: `bun --version` → should print `1.1.0` or higher.
 ### 2. Install Drexler globally
 
 ```bash
-bun add -g drexler
+bun install -g drexler@latest
 ```
 
 This installs the `drexler` command into `~/.bun/bin/drexler`. Make sure `~/.bun/bin` is on your `$PATH` (Bun's installer does this automatically; if not, add `export PATH="$HOME/.bun/bin:$PATH"` to your shell rc).
@@ -65,9 +65,11 @@ Paste the key, hit return. Drexler saves it to `~/.config/drexler/config.json` (
 ## Update
 
 ```bash
-bun update -g drexler
+bun install -g drexler@latest
 ```
 
+Global installs replace the existing `drexler` package in Bun's global install location; they do not keep stacking duplicate app copies.
+
 ## Uninstall
 
 ```bash
@@ -79,6 +81,33 @@ rm -rf ~/.config/drexler   # optional: wipe stored key + settings
 
 ## Usage
 
+### Interactive UI
+
+Drexler runs as an Ink terminal UI when both stdin and stdout are TTYs. The normal launch shows one integrated startup panel with the mascot, tips, a **Mood** readout, and the **Drexler Deal Desk**. Short terminals automatically suppress oversized startup chrome so the chat stays usable.
+
+The startup panel is designed to stay stable while it boots: the mascot loading bar and Mood gauge animate without changing width, greeting copy is held in a fixed slot, and the Mood and Deal Desk boxes stay aligned when the greeting wraps. After boot, Mood resolves into a rotating Drexler-flavored posture with a short satirical subtext line.
+
+The Deal Desk is intentionally not a frontier-model telemetry panel. It shows mood-shaped corporate nonsense like boardroom status, memo count, mandate, risk, fees, and counsel posture. Values rotate by mood and session so repeated moods still feel alive.
+
+Conversation turns render as bordered cards aligned to the chat input width. User and Drexler responses use separate accents, wrapped text, and fixed-width borders so long responses stay inside the terminal instead of clipping at the right edge. Drexler responses use a diamond body marker. Markdown/code fence labels are cleaned up for display, and code blocks render with Dracula-inspired terminal syntax colors.
+
+Typing `/` opens the directive palette. Use `Tab`, `Enter`, or `↑`/`↓` to select. Commands with fixed arguments open smoother option choosers:
+
+- `/theme` previews all themes with descriptions.
+- `/startup` offers `fast`, `no-intro`, and `normal`.
+- `/retry` offers `terse` and `brutal`.
+- `/export` offers `md`, `txt`, `json`, and `html`.
+- `/model` offers `31b` and `26b`.
+
+`/synergy` runs a rotating animated corporate event in the live UI, then returns control to the chat when the animation completes.
+
+Keyboard notes:
+
+- `Tab`, `Enter`, and `↑`/`↓` operate the directive palette.
+- `PageUp`/`PageDown` scroll transcript history when it exceeds the visible viewport.
+- `Esc` cancels an in-flight model response without quitting.
+- `Ctrl+C` exits gracefully with an in-character farewell.
+
 ### Flags
 
 | flag                              | what                                                              |
@@ -93,12 +122,12 @@ rm -rf ~/.config/drexler   # optional: wipe stored key + settings
 
 ### Slash commands (inside the REPL)
 
-| cmd            | what it do                                       |
+| cmd            | what it does                                     |
 | -------------- | ------------------------------------------------ |
 | `/help`        | list directives                                  |
 | `/clear`       | shred conversation history (system prompt pinned) |
 | `/exit`        | meeting adjourned                                |
-| `/synergy`     | SYNERGY!                                         |
+| `/synergy`     | run a rotating animated morale event             |
 | `/model`       | show current model, or `/model 26b` to switch   |
 | `/theme`       | show/switch theme; append `save` to persist, e.g. `/theme midnight save` |
 | `/startup fast\|no-intro\|normal` | persist startup behavior for future launches |
@@ -114,8 +143,6 @@ rm -rf ~/.config/drexler   # optional: wipe stored key + settings
 | `/save-last [path]` | save Drexler's last response only          |
 | `/copy-last`   | copy Drexler's latest response to the clipboard  |
 
-`Ctrl+C` exits gracefully with an in-character farewell.
-
 ---
 
 ## Configuration
@@ -126,6 +153,8 @@ Drexler reads config in this priority (later wins):
 2. Environment variables
 3. CLI flags
 
+If the current config file does not exist, Drexler also checks the legacy `~/.drexlerrc` path.
+
 ### Environment variables
 
 | var                  | purpose                                              |
@@ -159,13 +188,26 @@ Default `maxHistory`: 50 messages.
 Available launch/config themes: `apollo`, `amber`, `mono`, `terminal`, `dealroom`, `midnight`, `paper`, and `plasma`.
 `NO_COLOR` always forces `mono`.
 
+Theme notes:
+
+| theme      | character                                  |
+| ---------- | ------------------------------------------ |
+| `apollo`   | signature Drexler green, the default        |
+| `amber`    | warm amber deal glow                        |
+| `mono`     | plain high-contrast ANSI colors             |
+| `terminal` | classic green/cyan terminal                 |
+| `dealroom` | restrained teal boardroom palette           |
+| `midnight` | cool blue late-session desk                 |
+| `paper`    | clean document-style contrast               |
+| `plasma`   | high-energy magenta trading-floor accent    |
+
 ---
 
 ## Models
 
 | alias  | id                                  | notes                          |
 | ------ | ----------------------------------- | ------------------------------ |
-| `31b`  | `google/gemma-4-31b-it`             | primary (paid)                 |
+| `31b`  | `google/gemma-4-31b-it`             | primary default                |
 | `26b`  | `google/gemma-4-26b-a4b-it`         | fallback, auto-retry on 429    |
 
 Pass `--model vendor/name:tag` for any other OpenRouter-compatible model.
@@ -178,7 +220,7 @@ Pass `--model vendor/name:tag` for any other OpenRouter-compatible model.
 git clone https://github.com/showOS/Drexler.git
 cd Drexler
 bun install
-cp .env.example .env       # then edit, paste key into OPENROUTER_API_KEY=
+export OPENROUTER_API_KEY=sk-or-v1-your-key
 bun run start
 ```
 
@@ -192,11 +234,12 @@ bun run typecheck
 ### Releasing a new version
 
 ```bash
-npm version <patch|minor>  # bumps package.json, commits, tags
-git push --follow-tags     # CI publishes to npm automatically
+bun run prepublishOnly
+npm version <patch|minor>  # bumps package.json, commits, and tags
+git push origin main --follow-tags
 ```
 
-The `.github/workflows/publish.yml` workflow runs typecheck + tests + `npm publish --provenance` on every `v*` tag push.
+The `.github/workflows/publish.yml` workflow runs install, tag/package version verification, typecheck, tests, and `npm publish --provenance` on every `v*` tag push.
 
 ---
 
@@ -210,6 +253,8 @@ The `.github/workflows/publish.yml` workflow runs typecheck + tests + `npm publi
 | Garbled box-drawing characters                             | Use a UTF-8 terminal with a Nerd Font (e.g. iTerm2, Alacritty, WezTerm)                   |
 | Want to switch themes mid-session                          | Use `/theme midnight`, `/theme dealroom`, `/theme amber`, or any listed theme inside the REPL |
 | Want a faster launch                                       | Use `drexler --fast` or set `"fast": true` in config                                     |
+| Startup panel looks cramped                                | Enlarge the terminal, or use `/startup no-intro` or `/startup fast`                      |
+| Slash command options are not visible                      | Type `/`, `/theme`, `/startup`, `/retry`, `/export`, or `/model`; exact fixed-argument commands open their chooser automatically |
 
 ---
 

package/package.json

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

package/src/index.ts

@@ -133,7 +133,7 @@ async function main(): Promise<void> {
     }
 
     console.log("");
-    console.log("  " + infoLine() + "  ·  mood: " + mood);
+    console.log("  " + infoLine());
     console.log("");
 
     const { waitUntilExit } = render(

package/src/ui/App.tsx

@@ -34,7 +34,11 @@ import {
   insertAtCursor,
 } from "./graphemes.ts";
 import { InputBox } from "./InputBox.tsx";
-import { MascotDashboard } from "./MascotIntro.tsx";
+import {
+  introPhaseColor,
+  MascotDashboard,
+  useIntroAnimation,
+} from "./MascotIntro.tsx";
 import { StreamingMessage } from "./Message.tsx";
 import { Spinner } from "./Spinner.tsx";
 import { StatusBar } from "./StatusBar.tsx";
@@ -136,14 +140,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[]>([]);
@@ -201,6 +208,7 @@ export function App({
   const [historyIdx, setHistoryIdx] = useState<number | null>(null);
   const [paletteIdx, setPaletteIdx] = useState(0);
   const [scrollOffset, setScrollOffset] = useState(0);
+  const intro = useIntroAnimation(chromeWidth, integratedIntro);
 
   const paletteItems = useMemo(() => filterPaletteByPrefix(input), [input]);
   const paletteOpen = paletteItems.length > 0;
@@ -716,11 +724,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,13 +736,15 @@ export function App({
       status={headerStatus}
       compact={isCompact}
       notice={!integratedIntro ? deskNotice ?? undefined : undefined}
-      maxWidth={integratedIntro ? embeddedDealDeskWidth : chromeWidth}
+      maxWidth={Math.max(1, width)}
       marginBottom={integratedIntro ? 0 : 1}
     />
   );
+  const dealDeskHeader = renderDealDeskHeader(chromeWidth);
   const visibleTranscriptRows = synergyEvent
     ? Math.max(1, maxTranscriptRows - synergyEventRows(chromeWidth, isCompact))
     : maxTranscriptRows;
+  const introBarColor = introPhaseColor(intro.colorPhase, t);
 
   return (
     <ThemeProvider value={activeTheme}>
@@ -748,7 +754,13 @@ export function App({
             <MascotDashboard
               greeting={greeting}
               width={chromeWidth}
-              dealDesk={dealDeskHeader}
+              mood={mood}
+              bootProgress={intro.progress}
+              state={intro.state}
+              bar={intro.bar}
+              barColor={introBarColor}
+              mascotStatus={intro.status}
+              dealDesk={renderDealDeskHeader}
             />
           </Box>
         ) : (
@@ -769,7 +781,7 @@ export function App({
             </Box>
           )}
           {thinking !== null && streaming === null && (
-            <Box paddingX={1} marginBottom={1}>
+            <Box marginBottom={1}>
               <Spinner label={thinking} width={chromeWidth} />
             </Box>
           )}
@@ -809,11 +821,11 @@ export function App({
                   width={inputWidth}
                 />
               </Box>
-              <Box>
+              <Box paddingLeft={2}>
                 <StatusBar
                   messageCount={msgCount}
                   witticism={witticism}
-                  maxWidth={statusBarWidth}
+                  maxWidth={Math.max(1, statusBarWidth - 2)}
                   status={isBusy ? "streaming" : deskStatus}
                   compact={isCompact}
                   scrollHint={scrollHint}

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 ? (