@crouton-kit/crouter 0.3.79 → 0.3.80

package/dist/clients/attach/chat-view.d.ts

@@ -23,6 +23,10 @@ export interface ChatViewOptions {
     /** Theme palette for the activity spinner / dim status / error lines. Absent →
      *  the module defaults (faint + ANSI red) are used. */
     palette?: AttachPalette;
+    /** Pre-colored banner lines pinned as the FIRST child of the chat container,
+     *  above history (the crouton wordmark). Sits at the very top of the transcript
+     *  and scrolls up into scrollback as the chat grows. Absent → no banner. */
+    banner?: ReadonlyArray<string>;
 }
 export declare class ChatView {
     private readonly tui;

package/dist/clients/attach/chat-view.js

@@ -142,6 +142,16 @@ export class ChatView {
         this.spinnerStyle = opts.palette?.active ?? defaultSpinnerStyle;
         this.dimStyle = opts.palette?.muted ?? defaultDimStyle;
         this.errorStyle = opts.palette?.error ?? defaultErrorStyle;
+        // Banner sits above history and OUTSIDE it, so resetChat() (which clears only
+        // historyContainer) never wipes it — it persists across every welcome snapshot.
+        if (opts.banner && opts.banner.length > 0) {
+            const b = new Container();
+            b.addChild(new Spacer(1));
+            for (const line of opts.banner)
+                b.addChild(new Text(line, 1, 0));
+            b.addChild(new Spacer(1));
+            this.container.addChild(b);
+        }
         this.container.addChild(this.historyContainer);
         this.container.addChild(this.statusContainer);
     }

package/dist/clients/attach/input-controller.d.ts

@@ -83,6 +83,13 @@ export declare class InputController {
     private state;
     /** Timestamp of the last lone Esc, for double-tap → tree detection (0 = none). */
     private lastEscapeAt;
+    /** Pasted-image registry: placeholder ordinal → temp-file path. The editor
+     *  shows a clean `[Image #N]` token instead of the ugly temp path; on submit
+     *  each token is expanded back to its path so the agent reads it off disk.
+     *  Cleared whenever the editor is emptied (send / clear). */
+    private pastedImages;
+    /** Monotonic paste counter — the `N` in `[Image #N]`. */
+    private pasteSeq;
     constructor(tui: TUI, editor: CustomEditor, keybindings: KeybindingsManager, hooks: InputControllerHooks);
     /** Central choke point for every command frame the input layer emits (direct
      *  keybindings, emitDrive, and the slash-command/picker `send` sink). Local
@@ -137,6 +144,13 @@ export declare class InputController {
     openAuthPicker(build: (controls: PickerControls) => Picker): void;
     private handleSubmit;
     private handleFollowUp;
+    /** Replace every `[Image #N]` token with the temp-file path of the image the
+     *  user pasted, so the agent receives a readable path even though the editor
+     *  only ever showed the clean placeholder. Unknown ordinals are left as-is. */
+    private expandImagePlaceholders;
+    /** Drop the pasted-image registry and reset the ordinal counter — called once
+     *  a submit has consumed the editor text. */
+    private clearPastedImages;
     /** Ctrl+G / app.editor.external — open the current editor text in $VISUAL/$EDITOR
      *  and load the saved result back. Ported from pi's `openExternalEditor`: stop
      *  the TUI to release the terminal, run the editor with inherited stdio, and on
@@ -154,5 +168,10 @@ export declare class InputController {
      *  images intact for the user to trim, never a socket-destroying overflow. */
     private emitDrive;
     private handlePaste;
+    /** Register an image path in the paste registry and splice a clean `[Image #N]`
+     *  token into the editor at the caret instead of the raw path. On submit the
+     *  token is expanded back to the path (see expandImagePlaceholders), so the
+     *  agent reads the image off disk. Shared by clipboard paste and drag-drop. */
+    private attachImage;
     private notify;
 }

package/dist/clients/attach/input-controller.js

@@ -77,6 +77,13 @@ export class InputController {
     state;
     /** Timestamp of the last lone Esc, for double-tap → tree detection (0 = none). */
     lastEscapeAt = 0;
+    /** Pasted-image registry: placeholder ordinal → temp-file path. The editor
+     *  shows a clean `[Image #N]` token instead of the ugly temp path; on submit
+     *  each token is expanded back to its path so the agent reads it off disk.
+     *  Cleared whenever the editor is emptied (send / clear). */
+    pastedImages = new Map();
+    /** Monotonic paste counter — the `N` in `[Image #N]`. */
+    pasteSeq = 0;
     constructor(tui, editor, keybindings, hooks) {
         this.tui = tui;
         this.editor = editor;
@@ -164,6 +171,14 @@ export class InputController {
         this.editor.onPasteImage = () => {
             void this.handlePaste();
         };
+        // A file DRAGGED into the pane arrives as bracketed-paste text (its path), not
+        // an image event — TitledEditor recognizes an image path and routes it here so
+        // it becomes an `[Image #N]` token just like a Ctrl+V paste.
+        const dropEditor = this.editor;
+        dropEditor.onPasteImagePath = (path) => {
+            this.attachImage(path);
+            return true;
+        };
         // Keyboard shortcuts that map 1:1 to a frame needing no engine-side data.
         this.editor.onAction('app.session.new', () => this.emitCommand({ type: 'new_session' }));
         this.editor.onAction('app.model.cycleForward', () => this.emitCommand({ type: 'cycle_model', direction: 'forward' }));
@@ -385,23 +400,43 @@ export class InputController {
         // running turn instead of queueing a fresh prompt. `isStreaming` is the
         // broker snapshot's busy signal; the broker routes `steer` → session.steer()
         // and `prompt` → session.prompt(). Idle / no state yet → prompt (safe default).
+        const expanded = this.expandImagePlaceholders(trimmed);
         const busy = this.state?.isStreaming === true;
         const frame = busy
-            ? { type: 'steer', text: trimmed }
-            : { type: 'prompt', text: trimmed };
+            ? { type: 'steer', text: expanded }
+            : { type: 'prompt', text: expanded };
         if (!this.emitDrive(frame))
             return; // too large — keep editor to trim
         this.editor.addToHistory(trimmed);
         this.editor.setText('');
+        this.clearPastedImages();
     }
     handleFollowUp() {
         const text = this.editor.getText().trim();
         if (!text)
             return;
-        if (!this.emitDrive({ type: 'follow_up', text }))
+        if (!this.emitDrive({ type: 'follow_up', text: this.expandImagePlaceholders(text) }))
             return;
         this.editor.addToHistory(text);
         this.editor.setText('');
+        this.clearPastedImages();
+    }
+    /** Replace every `[Image #N]` token with the temp-file path of the image the
+     *  user pasted, so the agent receives a readable path even though the editor
+     *  only ever showed the clean placeholder. Unknown ordinals are left as-is. */
+    expandImagePlaceholders(text) {
+        if (this.pastedImages.size === 0)
+            return text;
+        return text.replace(/\[Image #(\d+)\]/g, (match, digits) => {
+            const path = this.pastedImages.get(Number(digits));
+            return path ?? match;
+        });
+    }
+    /** Drop the pasted-image registry and reset the ordinal counter — called once
+     *  a submit has consumed the editor text. */
+    clearPastedImages() {
+        this.pastedImages.clear();
+        this.pasteSeq = 0;
     }
     /** Ctrl+G / app.editor.external — open the current editor text in $VISUAL/$EDITOR
      *  and load the saved result back. Ported from pi's `openExternalEditor`: stop
@@ -517,20 +552,29 @@ export class InputController {
                 this.notify(result.note ?? 'Image not pasted');
                 return;
             }
-            // Persist to a temp file and splice the PATH into the editor at the caret,
-            // so the agent reads the image off disk instead of relying on inline base64
-            // the viewer can't render.
+            // Persist to a temp file (the agent reads the image off disk instead of
+            // relying on inline base64 the viewer can't render), then attach it as an
+            // `[Image #N]` token (see attachImage).
             const path = writeClipboardImageToFile(result.image);
-            const cur = this.editor.getText();
-            const sep = cur && !/\s$/.test(cur) ? ' ' : '';
-            this.editor.insertTextAtCursor(`${sep}${path} `);
-            this.notify(result.note ? `Image saved (${result.note}) — path inserted` : 'Image saved — path inserted');
-            this.tui.requestRender();
+            this.attachImage(path, result.note);
         }
         catch {
             this.notify('Could not read the clipboard image');
         }
     }
+    /** Register an image path in the paste registry and splice a clean `[Image #N]`
+     *  token into the editor at the caret instead of the raw path. On submit the
+     *  token is expanded back to the path (see expandImagePlaceholders), so the
+     *  agent reads the image off disk. Shared by clipboard paste and drag-drop. */
+    attachImage(path, note) {
+        const n = ++this.pasteSeq;
+        this.pastedImages.set(n, path);
+        const cur = this.editor.getText();
+        const sep = cur && !/\s$/.test(cur) ? ' ' : '';
+        this.editor.insertTextAtCursor(`${sep}[Image #${n}] `);
+        this.notify(note ? `Image #${n} attached (${note})` : `Image #${n} attached`);
+        this.tui.requestRender();
+    }
     notify(message) {
         this.hooks.onNotice?.(message);
     }

package/dist/clients/attach/titled-editor.d.ts

@@ -26,6 +26,13 @@ export declare function thinkingTitleStyle(level: string | undefined, fallback:
  *  regression test. */
 export declare function composeTopBorder(width: number, title: string, info: string, titleStyle: (s: string) => string, borderColor: (s: string) => string): string;
 export declare function outlineCursorLine(line: string): string | undefined;
+/** Recognize a single input chunk as a filesystem path to an image file — how a
+ *  terminal delivers a file DRAGGED into the pane (the escaped path pasted in
+ *  bulk, optionally wrapped in bracketed-paste markers). Returns the resolved
+ *  path, or null when the chunk isn't a lone image path (normal typing, multi-
+ *  line text, a non-image path, or a path that doesn't point at a real file).
+ *  Conservative on purpose: it must never transform ordinary typed input. */
+export declare function detectDroppedImagePath(data: string): string | null;
 export declare class TitledEditor extends CustomEditor {
     /** crtr's OWN keybindings manager — the same one CustomEditor matches `app.*`
      *  against. We keep a reference so `handleInput` can resolve the newline chord
@@ -43,6 +50,20 @@ export declare class TitledEditor extends CustomEditor {
      *  override, so matching the chord here makes the newline behavior independent
      *  of cross-instance keybinding mirroring. Skipped while the autocomplete popup
      *  is open so Enter-to-confirm keeps working. */
+    /** Set by the input controller: called when a bulk input chunk is recognized
+     *  as a filesystem path to an image file (a file DRAGGED into the pane, which
+     *  the terminal delivers as bracketed-paste TEXT, not an image event). Returns
+     *  true when it consumed the drop, so the raw path is never inserted as text. */
+    onPasteImagePath?: (path: string) => boolean;
+    /** Width of an `[Image #N]` token sitting immediately before the cursor on the
+     *  current line, or 0 when the cursor isn't at the end of such a token — used to
+     *  delete/skip the token atomically. The token's separating space is a normal,
+     *  reachable character, deliberately NOT part of the atom. */
+    private imageTokenWidthBeforeCursor;
+    /** Width of an `[Image #N]` token sitting immediately after the cursor on the
+     *  current line, or 0 when the cursor isn't at the start of such a token — used
+     *  to skip the token with the right arrow. */
+    private imageTokenWidthAfterCursor;
     handleInput(data: string): void;
     /** Session-name chip painted into the LEFT of the top border. Empty → plain. */
     title: string;

package/dist/clients/attach/titled-editor.js

@@ -5,6 +5,7 @@
 //   2. a border color that tracks the agent's thinking level (set by attach-cmd
 //      on each state update), mirroring pi's `getThinkingBorderColor`.
 // Both are pure render-layer chrome; nothing here touches the socket or session.
+import { statSync } from 'node:fs';
 import { CustomEditor } from '@earendil-works/pi-coding-agent';
 import { CURSOR_MARKER, truncateToWidth, visibleWidth, } from '@earendil-works/pi-tui';
 /** The standard thinking levels form a deliberate cool→warm ramp between blue
@@ -152,6 +153,39 @@ export function outlineCursorLine(line) {
     const replacement = `${MUTED_CURSOR_ON}${grapheme}\x1b[0m`;
     return line.slice(0, start) + replacement + line.slice(end + SOLID_CURSOR_RESET.length);
 }
+/** Image file extensions a dragged path is recognized by. */
+const IMAGE_PATH_RE = /\.(png|jpe?g|gif|webp|bmp)$/i;
+/** Recognize a single input chunk as a filesystem path to an image file — how a
+ *  terminal delivers a file DRAGGED into the pane (the escaped path pasted in
+ *  bulk, optionally wrapped in bracketed-paste markers). Returns the resolved
+ *  path, or null when the chunk isn't a lone image path (normal typing, multi-
+ *  line text, a non-image path, or a path that doesn't point at a real file).
+ *  Conservative on purpose: it must never transform ordinary typed input. */
+export function detectDroppedImagePath(data) {
+    // Unwrap bracketed paste (\x1b[200~ … \x1b[201~) when the terminal uses it.
+    const bracketed = data.match(/\x1b\[200~([\s\S]*?)\x1b\[201~/);
+    let payload = (bracketed ? bracketed[1] : data).trim();
+    if (payload.length < 2)
+        return null; // a lone keystroke is never a drop
+    if (/[\u0000-\u0008\u000e-\u001f]/.test(payload))
+        return null; // control chars → not a path
+    // Terminals wrap a dropped path in quotes or backslash-escape its spaces.
+    if ((payload.startsWith("'") && payload.endsWith("'")) ||
+        (payload.startsWith('"') && payload.endsWith('"'))) {
+        payload = payload.slice(1, -1);
+    }
+    const path = payload.replace(/\\(.)/g, '$1');
+    if (/\n/.test(path) || !IMAGE_PATH_RE.test(path))
+        return null;
+    try {
+        if (!statSync(path).isFile())
+            return null;
+    }
+    catch {
+        return null; // not a real file → treat as ordinary pasted text
+    }
+    return path;
+}
 export class TitledEditor extends CustomEditor {
     /** crtr's OWN keybindings manager — the same one CustomEditor matches `app.*`
      *  against. We keep a reference so `handleInput` can resolve the newline chord
@@ -175,11 +209,78 @@ export class TitledEditor extends CustomEditor {
      *  override, so matching the chord here makes the newline behavior independent
      *  of cross-instance keybinding mirroring. Skipped while the autocomplete popup
      *  is open so Enter-to-confirm keeps working. */
+    /** Set by the input controller: called when a bulk input chunk is recognized
+     *  as a filesystem path to an image file (a file DRAGGED into the pane, which
+     *  the terminal delivers as bracketed-paste TEXT, not an image event). Returns
+     *  true when it consumed the drop, so the raw path is never inserted as text. */
+    onPasteImagePath;
+    /** Width of an `[Image #N]` token sitting immediately before the cursor on the
+     *  current line, or 0 when the cursor isn't at the end of such a token — used to
+     *  delete/skip the token atomically. The token's separating space is a normal,
+     *  reachable character, deliberately NOT part of the atom. */
+    imageTokenWidthBeforeCursor() {
+        const { line, col } = this.getCursor();
+        const text = this.getLines()[line];
+        if (text === undefined)
+            return 0;
+        const match = text.slice(0, col).match(/\[Image #\d+\]$/);
+        return match ? match[0].length : 0;
+    }
+    /** Width of an `[Image #N]` token sitting immediately after the cursor on the
+     *  current line, or 0 when the cursor isn't at the start of such a token — used
+     *  to skip the token with the right arrow. */
+    imageTokenWidthAfterCursor() {
+        const { line, col } = this.getCursor();
+        const text = this.getLines()[line];
+        if (text === undefined)
+            return 0;
+        const match = text.slice(col).match(/^\[Image #\d+\]/);
+        return match ? match[0].length : 0;
+    }
     handleInput(data) {
         if (!this.isShowingAutocomplete() && this.km.matches(data, 'tui.input.newLine')) {
             this.insertTextAtCursor('\n');
             return;
         }
+        // Backspace over an `[Image #N]` token deletes the WHOLE token (and its
+        // trailing space) in one keypress, not one character at a time — the token is
+        // a single atom to the user. We replay the backspace across the token's full
+        // width so the base editor's cursor/undo bookkeeping stays correct.
+        if (!this.isShowingAutocomplete() && this.km.matches(data, 'tui.editor.deleteCharBackward')) {
+            const width = this.imageTokenWidthBeforeCursor();
+            if (width > 1) {
+                for (let i = 0; i < width; i++)
+                    super.handleInput(data);
+                return;
+            }
+        }
+        // Left/right arrow steps OVER an `[Image #N]` token in one keypress — the
+        // token reads as a single character, so the caret never lands inside it. We
+        // replay the arrow across the token's full width so cursor bookkeeping stays
+        // correct.
+        if (!this.isShowingAutocomplete() && this.km.matches(data, 'tui.editor.cursorLeft')) {
+            const width = this.imageTokenWidthBeforeCursor();
+            if (width > 1) {
+                for (let i = 0; i < width; i++)
+                    super.handleInput(data);
+                return;
+            }
+        }
+        if (!this.isShowingAutocomplete() && this.km.matches(data, 'tui.editor.cursorRight')) {
+            const width = this.imageTokenWidthAfterCursor();
+            if (width > 1) {
+                for (let i = 0; i < width; i++)
+                    super.handleInput(data);
+                return;
+            }
+        }
+        // A file dragged into the pane arrives as a bulk paste of its (shell-escaped)
+        // path, NOT as an image on the clipboard, so onPasteImage never fires. Detect
+        // an image-file path here and hand it to the controller so it becomes an
+        // `[Image #N]` token like a clipboard paste, instead of the raw temp path.
+        const droppedPath = detectDroppedImagePath(data);
+        if (droppedPath && this.onPasteImagePath?.(droppedPath))
+            return;
         super.handleInput(data);
     }
     /** Session-name chip painted into the LEFT of the top border. Empty → plain. */

package/dist/core/profiles/select.js

@@ -631,15 +631,12 @@ export async function selectProfileForCwd(cwd, explicitProfile, forcePicker = fa
     if (pinnedId !== null && pinned === null)
         clearDefaultProfile(resolvedCwd);
     // A valid pin decides it outright and STOPS ASKING — the whole point of
-    // setting a default. Auto-pick it (interactive too), printing a one-line
-    // breadcrumb so the choice isn't invisible and the user knows how to change
-    // it. `crtr --pick-profile` (forcePicker) re-opens the menu to re-pin/unpin.
+    // setting a default. Auto-pick it silently: the crouton banner the viewer
+    // paints a beat later shows the active profile and the `crtr --pick-profile`
+    // hint, so a boot-time breadcrumb here would just be redundant.
+    // `crtr --pick-profile` (forcePicker) re-opens the menu to re-pin/unpin.
     if (pinned !== null && !forcePicker) {
         updateProfileLastUsed(pinned.profileId);
-        if (isInteractive()) {
-            process.stdout.write(`  ${accent('\u2713')} ${bold(pinned.manifest.name)} ${dim('\u00b7 default for this directory')}` +
-                `  ${dim('(crtr --pick-profile to change)')}\n`);
-        }
         return pinned.profileId;
     }
     // Exactly one profile's project dir IS cwd — unambiguous project root, use it

package/dist/core/runtime/banner.d.ts

@@ -0,0 +1,13 @@
+export interface BannerInfo {
+    /** crtr version, e.g. "0.3.78" → shown as "v0.3.78". */
+    version?: string;
+    /** Active profile name, e.g. "northlight". */
+    profile?: string;
+    /** Launch directory (already home-abbreviated if desired). */
+    cwd?: string;
+}
+/** The crouton banner as pre-colored terminal lines: the cube on the left with
+ *  name/version, tagline, profile, and launch path stacked beside rows 1–4.
+ *  Missing facts are simply omitted (their row shows just the cube). No
+ *  leading/trailing blank lines — the caller frames it. */
+export declare function croutonBannerLines(info?: BannerInfo): string[];

package/dist/core/runtime/banner.js

@@ -0,0 +1,51 @@
+// The crouton welcome banner — a little crouton rendered at the very top of a
+// node's transcript in the attach viewer (the way Claude Code opens with its
+// logo + session facts), with the launch facts stacked to its right: name +
+// version, tagline, profile, and the launch path. It scrolls up into history as
+// the conversation grows. Purely cosmetic.
+//
+// This lives in the VIEWER, not the front-door stdout: the attach TUI takes over
+// the whole terminal, so anything printed to stdout before it starts is wiped.
+// ChatView pins these lines as the first children of its chat container.
+// Clean line-art isometric cube in a single warm crust tone, with a few subtly
+// darker toast flecks. No background fills (they read as detached color slabs in
+// a dark terminal) and no inverted-brightness speckle.
+const RESET = '\u001b[0m';
+const CRUST = '\u001b[38;5;180m'; // warm tan — cube outline + accents
+const FLECK = '\u001b[38;5;137m'; // slightly darker toast dots
+const BOLD = '\u001b[1m';
+const DIM = '\u001b[2m';
+// Darker toast flecks on the cube faces; `.` glyphs recolor a touch darker.
+function crumb(text) {
+    return CRUST + text.replace(/\./g, `${FLECK}.${CRUST}`) + RESET;
+}
+// Rows 1–4 all share the same visible width (15 cells), so a fixed 3-space
+// gutter lands every info line in the same column — the stacked-facts layout.
+const CROUTON = [
+    crumb('      ________'),
+    crumb('     /       /|'),
+    crumb('    /  .  . / |'),
+    crumb('   /_______/  |'),
+    crumb('   |  .  . |  |'),
+    crumb('   | .   . | /'),
+    crumb('   |_______|/'),
+];
+/** The crouton banner as pre-colored terminal lines: the cube on the left with
+ *  name/version, tagline, profile, and launch path stacked beside rows 1–4.
+ *  Missing facts are simply omitted (their row shows just the cube). No
+ *  leading/trailing blank lines — the caller frames it. */
+export function croutonBannerLines(info = {}) {
+    const name = `${BOLD}${CRUST}crouter${RESET}${info.version ? `${DIM}  v${info.version}${RESET}` : ''}`;
+    const facts = [name, `${DIM}the agentic runtime${RESET}`];
+    if (info.profile)
+        facts.push(`${DIM}profile: ${RESET}${CRUST}${info.profile}${RESET}`);
+    if (info.cwd)
+        facts.push(`${DIM}${info.cwd}${RESET}`);
+    const out = [];
+    for (let i = 0; i < CROUTON.length; i++) {
+        // Facts sit beside rows 1..N (the top of the cube), one per row.
+        const fact = i >= 1 && i - 1 < facts.length ? `   ${facts[i - 1]}` : '';
+        out.push(CROUTON[i] + fact);
+    }
+    return out;
+}

package/dist/core/runtime/spawn.js

@@ -72,10 +72,10 @@ export async function bootRoot(opts) {
     // covering cwd > a synchronous create-or-root-profile prompt (the stable root
     // profile, headless).
     const profileId = await selectProfileForCwd(opts.cwd, opts.profile, opts.pickProfile ?? false);
-    // Immediate feedback: the broker + viewer boot take ~1s and the profile
-    // selector has just released the terminal — a silent cursor reads as a hang.
-    if (process.stdout.isTTY)
-        process.stdout.write('\u001b[2m  › starting…\u001b[0m\r\n');
+    // No boot spinner here: the attach viewer paints the crouton banner the moment
+    // the engine attaches (~1s), which is the real "we're up" signal. A separate
+    // `› starting…` line would just linger above it in scrollback (the viewer
+    // appends, it doesn't clear the screen), so it's redundant.
     // A born-resident root starts in base mode; it earns the orchestrator persona
     // the first time it delegates (or on promotion). Resident lifecycle either way.
     const { launch } = buildLaunchSpec(kind, 'base', { lifecycle: 'resident', hasManager: false, cwd: opts.cwd, profileId });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crouton-kit/crouter",
-  "version": "0.3.79",
+  "version": "0.3.80",
   "description": "crtr — agent runtime with memory, plugins, and marketplaces",
   "type": "module",
   "main": "dist/index.js",