drexler 0.2.3 → 0.2.5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 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.
+
 ## 0.2.3
 
 - Restored full-terminal-width interactive chrome, including the chat input bar.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drexler",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "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) =>

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/TranscriptViewport.tsx

@@ -35,6 +35,18 @@ const ROLE_LABELS: Record<TranscriptViewportItem["role"], string> = {
   system: "SYSTEM",
 };
 
+const ROLE_DETAILS: Record<TranscriptViewportItem["role"], string> = {
+  user: "incoming memo",
+  assistant: "response ledger",
+  system: "system notice",
+};
+
+const ROLE_MARKERS: Record<TranscriptViewportItem["role"], string> = {
+  user: "›",
+  assistant: "│",
+  system: "!",
+};
+
 function lineCount(input: string): number {
   if (input.length === 0) return 1;
   return input.split("\n").length;
@@ -42,17 +54,30 @@ function lineCount(input: string): number {
 
 function itemRows(item: TranscriptViewportItem, compact: boolean): number {
   if (compact) return 1;
-  return 1 + lineCount(item.content);
+  return 2 + lineCount(item.content);
 }
 
-function roleColor(
+function roleAccentColor(
   role: TranscriptViewportItem["role"],
   theme: ReturnType<typeof useTheme>,
 ): string {
   if (role === "system") return theme.warning;
+  if (role === "user") return theme.warning;
   return theme.primaryLight;
 }
 
+function roleBodyColor(
+  role: TranscriptViewportItem["role"],
+  theme: ReturnType<typeof useTheme>,
+): string {
+  if (role === "system") return theme.dim;
+  return theme.text;
+}
+
+function rule(char: string, width: number): string {
+  return char.repeat(Math.max(0, width));
+}
+
 function DefaultTranscriptItem({
   item,
   compact,
@@ -64,18 +89,20 @@ function DefaultTranscriptItem({
 }) {
   const t = useTheme();
   const label = ROLE_LABELS[item.role];
+  const accent = roleAccentColor(item.role, t);
 
   if (compact) {
-    const prefix = `${label} │ `;
+    const marker = item.role === "assistant" ? "◆" : ROLE_MARKERS[item.role];
+    const prefix = `${label} ${marker} `;
     const budget = Math.max(1, cols - displayWidth(prefix));
     const firstLine = item.content.split("\n")[0] ?? "";
     return (
       <Box width={cols} flexShrink={1}>
-        <Text color={roleColor(item.role, t)} bold>
+        <Text color={accent} bold>
           {fitDisplayText(prefix, cols)}
         </Text>
         {displayWidth(prefix) < cols ? (
-          <Text color={item.role === "system" ? t.dim : t.text} wrap="truncate">
+          <Text color={roleBodyColor(item.role, t)} wrap="truncate">
             {fitDisplayText(firstLine, budget)}
           </Text>
         ) : null}
@@ -83,20 +110,38 @@ function DefaultTranscriptItem({
     );
   }
 
-  const contentWidth = Math.max(1, cols - 2);
+  const detail = ROLE_DETAILS[item.role];
+  const headerPrefix = `╭─ ${label} `;
+  const headerSuffix = ` ${detail}`;
+  const headerRuleWidth = Math.max(
+    0,
+    cols - displayWidth(headerPrefix) - displayWidth(headerSuffix),
+  );
+  const footerWidth = Math.max(1, cols - 1);
+  const bodyPrefix = `${ROLE_MARKERS[item.role]}  `;
+  const contentWidth = Math.max(1, cols - displayWidth(bodyPrefix));
+
   return (
     <Box flexDirection="column" width={cols} flexShrink={1}>
-      <Text color={roleColor(item.role, t)} bold wrap="truncate">
-        {fitDisplayText(label, cols)}
+      <Text color={accent} bold wrap="truncate">
+        {fitDisplayText(
+          `${headerPrefix}${rule("─", headerRuleWidth)}${headerSuffix}`,
+          cols,
+        )}
       </Text>
       {item.content.split("\n").map((line, index) => (
-        <Box key={index} paddingLeft={1} width={cols} flexShrink={1}>
-          <Text color={t.primaryDim}>│ </Text>
-          <Text color={item.role === "system" ? t.dim : t.text} wrap="truncate">
+        <Box key={index} width={cols} flexShrink={1}>
+          <Text color={accent} bold={item.role === "user"}>
+            {bodyPrefix}
+          </Text>
+          <Text color={roleBodyColor(item.role, t)} wrap="truncate">
             {fitDisplayText(line, contentWidth)}
           </Text>
         </Box>
       ))}
+      <Text color={item.role === "assistant" ? t.primaryDim : t.dim} wrap="truncate">
+        {fitDisplayText(`╰${rule("─", footerWidth)}`, cols)}
+      </Text>
     </Box>
   );
 }