indusagi-coding-agent 0.2.12 → 0.2.14

package/src/console/components/Banner.ts

@@ -9,7 +9,9 @@ import { basename } from "node:path";
 import type { InkThemeAdapter } from "indusagi/react-ink";
 import type { StartupChangelog, StartupMap, StartupNotice } from "../startup.js";
 import { MASCOTS, WHATS_NEW, pickWelcomeVariant, mascotRows, type MascotFace } from "./welcome.js";
-import { welcomeLine } from "./banner-sweep.js";
+import { welcomeLine, rowGradient } from "./banner-sweep.js";
+import chalk from "chalk";
+import { useTerminalSize } from "./ScrollViewport.js";
 
 const BRAND = "IndusCode";
 const COMPACT_EMBLEM = "▛▜▙▟";
@@ -23,6 +25,11 @@ const WORDMARK_ROWS: readonly string[] = [
   "╚═╝╚═╝  ╚═══╝╚═════╝  ╚═════╝ ╚══════╝     ╚═════╝ ╚═════╝ ╚═════╝ ╚══════╝"
 ];
 
+function StartupSummary({theme, startup}: {theme: InkThemeAdapter; startup?: StartupMap}) {
+  if (!startup?.sections.length) return null;
+  return jsx(Text, {wrap:"truncate-end", children:theme.muted(startup.sections.map(section => `${section.title}: ${section.count}`).join(" · "))});
+}
+
 function StartupNotices({ theme, notices }: { theme: InkThemeAdapter; notices: readonly StartupNotice[] }) {
   if (notices.length === 0) return null;
   return jsx(Box, {
@@ -98,10 +105,10 @@ function ShellLine({ theme, workspace, branch }: { theme: InkThemeAdapter; works
   });
 }
 
-function Wordmark({ theme }: { theme: InkThemeAdapter }) {
+function Wordmark({ theme, sweep }: { theme: InkThemeAdapter; sweep?: boolean }) {
   return jsx(Box, {
     flexDirection: "column",
-    children: WORDMARK_ROWS.map((line, index) => jsx(Text, { children: theme.color("accent", line) }, index))
+    children: WORDMARK_ROWS.map((line, index) => jsx(Text, { children: sweep ? chalk.hex(rowGradient(index, WORDMARK_ROWS.length, theme.colors.accent, theme.colors.customMessage))(line) : theme.color("accent", line) }, index))
   });
 }
 
@@ -127,7 +134,7 @@ function paintMascot(theme: InkThemeAdapter, tone: string, text: string) {
   }
 }
 
-function Mascot({ theme, face }: { theme: InkThemeAdapter; face: MascotFace }) {
+function Mascot({ theme, face, sweep }: { theme: InkThemeAdapter; face: MascotFace; sweep?: boolean }) {
   return jsx(Box, {
     flexDirection: "column",
     alignItems: "center",
@@ -137,7 +144,7 @@ function Mascot({ theme, face }: { theme: InkThemeAdapter; face: MascotFace }) {
         Box,
         {
           children: row.map((seg, segIndex) =>
-            jsx(Text, { children: paintMascot(theme, seg.tone, seg.text) }, segIndex)
+            jsx(Text, { children: sweep && seg.tone === "head" ? chalk.hex(rowGradient(rowIndex, 5, theme.colors.accent, theme.colors.customMessage))(seg.text) : paintMascot(theme, seg.tone, seg.text) }, segIndex)
           )
         },
         rowIndex
@@ -174,6 +181,7 @@ export interface BannerProps {
 }
 
 export function Banner(props: BannerProps) {
+  const { columns } = useTerminalSize();
   const {
     theme,
     modelId,
@@ -187,15 +195,16 @@ export function Banner(props: BannerProps) {
     variantSeed,
     whatsNew,
     notices,
-    changelog
+    changelog, sweep, startup
   } = props;
   const noticeList = notices ?? [];
-  if (quiet || compact) {
+  if (quiet || compact || columns < 76) {
     return jsxs(Box, {
       flexDirection: "column",
       marginBottom: 1,
       children: [
         jsx(StartupNotices, { theme, notices: noticeList }),
+        jsx(StartupSummary, {theme, startup}),
         jsxs(Box, {
           children: [
             compact
@@ -225,8 +234,9 @@ export function Banner(props: BannerProps) {
       marginBottom: 1,
       children: [
         jsx(StartupNotices, { theme, notices: noticeList }),
+        jsx(StartupSummary, {theme, startup}),
         jsx(ShellLine, { theme, workspace, branch }),
-        jsx(Box, { marginTop: 1, children: jsx(Wordmark, { theme }) }),
+        jsx(Box, { marginTop: 1, children: jsx(Wordmark, { theme, sweep }) }),
         jsxs(Box, {
           marginTop: 1,
           flexDirection: "column",
@@ -266,6 +276,7 @@ export function Banner(props: BannerProps) {
     marginBottom: 1,
     children: [
       jsx(StartupNotices, { theme, notices: noticeList }),
+        jsx(StartupSummary, {theme, startup}),
       jsxs(Box, {
         flexDirection: "column",
         borderStyle: "round",
@@ -292,7 +303,7 @@ export function Banner(props: BannerProps) {
                 marginRight: 2,
                 children: [
                   jsx(Text, { bold: true, children: theme.color("text", greeting) }),
-                  jsx(Mascot, { theme, face: variant.mascot }),
+                  jsx(Mascot, { theme, face: variant.mascot, sweep }),
                   jsx(Text, { children: theme.dim(metaLine) }),
                   jsx(Text, { children: theme.dim(shortenWorkspace(workspace)) })
                 ]

package/src/console/components/Composer.ts

@@ -1,29 +1,31 @@
-/**
- * Composer — the prompt-input surface.
- */
-import { Box, Text } from "indusagi/react-host/ink";
-import { jsx, jsxs } from "indusagi/react-host/jsx-runtime";
-import type { InkThemeAdapter } from "indusagi/react-ink";
-import type { Suggestion } from "../input/index.js";
+/** Bounded, grapheme-aware editor and selection-following completion menu. */
+import { Box, Text } from 'indusagi/react-host/ink';
+import { jsx, jsxs } from 'indusagi/react-host/jsx-runtime';
+import stringWidth from 'string-width';
+import type { InkThemeAdapter } from 'indusagi/react-ink';
+import type { Suggestion } from '../input/index.js';
+import { snapGrapheme } from '../input/graphemes.js';
+import { useTerminalSize } from './ScrollViewport.js';
 
-const PROMPT_GLYPH = "› ";
-const SUGGESTION_WINDOW = 8;
-const NAME_COLUMN_CAP = 24;
-const NAME_COLUMN_FLOOR = 8;
-
-function clampName(label: string, width: number): string {
-  if (label.length <= width) return label;
-  if (width <= 1) return label.slice(0, width);
-  return `${label.slice(0, width - 1)}…`;
-}
-
-function bufferWithCaret(buffer: string, caret: number) {
-  const before = buffer.slice(0, caret);
-  const under = caret < buffer.length ? buffer[caret] : " ";
-  const after = caret < buffer.length ? buffer.slice(caret + 1) : "";
-  return jsxs(Text, {
-    children: [before, jsx(Text, { inverse: true, children: under }), after]
-  });
+const segmenter = new Intl.Segmenter(undefined, {granularity:'grapheme'});
+interface Cell { text: string; caret: boolean }
+function editorLines(buffer: string, caret: number, width: number) {
+  const lines: Cell[][] = [[]];
+  let column = 0;
+  caret = snapGrapheme(buffer, caret);
+  for (const {segment, index} of segmenter.segment(buffer + ' ')) {
+    const cursor = index === caret;
+    if (segment === '\n') {
+      if (cursor) lines.at(-1)!.push({text:' ', caret:true});
+      lines.push([]); column=0; continue;
+    }
+    const text = segment === '\t' ? '  ' : segment.replace(/[\x00-\x1f\x7f]/g,'');
+    const cells = stringWidth(text);
+    if (column + cells > width && column > 0) {lines.push([]);column=0;}
+    lines.at(-1)!.push({text:cells > width ? '?' : text,caret:cursor});
+    column += Math.min(width,cells);
+  }
+  return lines;
 }
 
 export interface ComposerProps {
@@ -33,62 +35,35 @@ export interface ComposerProps {
   readonly busy: boolean;
   readonly suggestions: readonly Suggestion[];
   readonly highlight: number;
+  readonly paddingX?: number;
 }
 
-export function Composer({ theme, buffer, caret, busy, suggestions, highlight }: ComposerProps) {
-  const shown = suggestions.slice(0, SUGGESTION_WINDOW);
-  const borderColor = theme.colors.borderMuted ?? theme.colors.accent ?? "gray";
-  const nameWidth = shown.length > 0
-    ? Math.max(NAME_COLUMN_FLOOR, Math.min(NAME_COLUMN_CAP, Math.max(...shown.map((s) => s.label.length))))
-    : 0;
-  return jsxs(Box, {
-    flexDirection: "column",
-    children: [
-      jsxs(Box, {
-        borderStyle: "round",
-        borderColor,
-        paddingX: 1,
-        children: [
-          jsxs(Box, {
-            flexGrow: 1,
-            children: [
-              jsx(Text, { children: theme.color("customMessage", PROMPT_GLYPH) }),
-              bufferWithCaret(buffer, caret)
-            ]
-          }),
-          jsx(Text, { children: theme.dim("↵ send") })
-        ]
-      }),
-      shown.length > 0
-        ? jsx(Box, {
-            flexDirection: "column",
-            marginTop: 1,
-            children: shown.map((suggestion, index) => {
-              const active = index === highlight;
-              const name = clampName(suggestion.label, nameWidth);
-              return jsxs(
-                Box,
-                {
-                  children: [
-                    jsx(Box, {
-                      width: 2,
-                      flexShrink: 0,
-                      children: jsx(Text, { children: active ? theme.color("accent", "▸") : " " })
-                    }),
-                    jsx(Box, {
-                      width: nameWidth,
-                      flexShrink: 0,
-                      children: jsx(Text, { bold: active, children: theme.color("customMessage", name) })
-                    }),
-                    jsx(Text, { children: "  " }),
-                    jsx(Text, { children: theme.muted(suggestion.detail) })
-                  ]
-                },
-                suggestion.value
-              );
-            })
-          })
-        : null
-    ]
-  });
-}
+export function Composer({theme,buffer,caret,suggestions,highlight,paddingX=1}: ComposerProps) {
+  const {columns,rows} = useTerminalSize();
+  const padding = Math.max(0, Math.min(3, Math.floor(paddingX), Math.floor((columns-8)/2)));
+  const sendWidth = columns >= 32 ? 7 : 0;
+  const width = Math.max(1,columns - 2 - padding*2 - 2 - sendWidth);
+  const allLines = editorLines(buffer,caret,width);
+  const caretRow = Math.max(0,allLines.findIndex(line=>line.some(cell=>cell.caret)));
+  const editorBudget = Math.max(1,Math.min(6,Math.floor(rows/4)));
+  const top = Math.max(0,Math.min(caretRow-editorBudget+1,allLines.length-editorBudget));
+  const lines = allLines.slice(top,top+editorBudget);
+  const budget = Math.max(1,Math.min(8,rows-lines.length-12));
+  const start = Math.max(0,Math.min(highlight-budget+1,suggestions.length-budget));
+  const shown = suggestions.slice(start,start+budget);
+  const nameWidth = Math.max(1,Math.min(24,Math.floor(columns/3)));
+  return jsxs(Box,{flexDirection:'column',flexShrink:0,children:[
+    jsx(Box,{borderStyle:'round',borderColor:theme.colors.borderMuted??'gray',paddingX:padding,flexDirection:'column',children:
+      lines.map((line,index)=>jsxs(Box,{height:1,flexShrink:0,children:[
+        jsx(Box,{width:2,flexShrink:0,children:jsx(Text,{children:theme.color('customMessage',index+top===0?'› ':'· ')})}),
+        jsx(Box,{width,flexShrink:0,children:jsx(Text,{wrap:'truncate-end',children:line.map((cell,i)=>jsx(Text,{inverse:cell.caret,children:cell.text},i))})}),
+        sendWidth ? jsx(Box,{width:sendWidth,flexShrink:0,children:jsx(Text,{children:index===0?theme.dim(' ↵ send'):''})}) : null
+      ]},index))
+    }),
+    shown.length ? jsx(Box,{flexDirection:'column',marginTop:1,children:shown.map((suggestion,index)=>jsxs(Box,{height:1,children:[
+      jsx(Box,{width:2,flexShrink:0,children:jsx(Text,{children:start+index===highlight?theme.color('accent','▸'):' '})}),
+      jsx(Box,{width:nameWidth,flexShrink:0,children:jsx(Text,{wrap:'truncate-end',bold:start+index===highlight,children:theme.color('customMessage',suggestion.label)})}),
+      jsx(Box,{width:Math.max(1,columns-nameWidth-2),children:jsx(Text,{wrap:'truncate-end',children:theme.muted('  '+suggestion.detail)})})
+    ]},suggestion.value))}) : null
+  ]});
+}

package/src/console/components/ScrollViewport.ts

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'indusagi/react-host';
+import { Box, useInput } from 'indusagi/react-host/ink';
+import { measureElement, useStdout, type DOMElement } from 'ink';
+import { jsx } from 'indusagi/react-host/jsx-runtime';
+import type { ReactNode } from 'react';
+
+export function useTerminalSize() {
+  const { stdout } = useStdout();
+  const read = () => ({ columns: Math.max(1, stdout.columns || 80), rows: Math.max(1, stdout.rows || 24) });
+  const [size, setSize] = useState(read);
+  useEffect(() => {
+    const resize = () => setSize(read());
+    stdout.on('resize', resize);
+    return () => { stdout.off('resize', resize); };
+  }, [stdout]);
+  return size;
+}
+
+/** Row-bounded Ink viewport. Page keys scroll; new output follows only at the bottom. */
+export function ScrollViewport({ children, active = true, follow = true }: { children: ReactNode; active?: boolean; follow?: boolean }) {
+  const outer = React.useRef<DOMElement>(null);
+  const inner = React.useRef<DOMElement>(null);
+  const [metrics, setMetrics] = useState({ height: 1, content: 1 });
+  const [offset, setOffset] = useState(0);
+  useEffect(() => {
+    if (!outer.current || !inner.current) return;
+    const height = measureElement(outer.current).height;
+    const content = measureElement(inner.current).height;
+    if (metrics.height !== height || metrics.content !== content) {
+      const oldMax = Math.max(0, metrics.content - metrics.height);
+      const newMax = Math.max(0, content - height);
+      if (follow) setOffset(n => n === 0 ? 0 : Math.max(0, Math.min(newMax, n + newMax - oldMax)));
+      setMetrics({height, content});
+    }
+  });
+  const max = Math.max(0, metrics.content - metrics.height);
+  const scroll = Math.min(max, offset);
+  useInput((_input, key) => {
+    const step = Math.max(1, metrics.height - 2);
+    if (key.pageUp) setOffset(n => Math.min(max, n + (follow ? step : -step)));
+    if (key.pageDown) setOffset(n => Math.max(0, Math.min(max, n + (follow ? -step : step))));
+  }, {isActive: active});
+  const top = follow ? Math.max(0, max - scroll) : Math.max(0, scroll);
+  return jsx(Box, {ref: outer, flexDirection:'column', flexGrow:1, flexBasis:0, minHeight:1, overflow:'hidden',
+    children:jsx(Box, {ref:inner, flexDirection:'column', flexShrink:0, marginTop:-top, children})});
+}