@nanhara/hara 0.99.0 → 0.99.1

package/dist/tui/InputBox.js

@@ -37,8 +37,9 @@ export function footerCwd(abs, home = process.env.HOME ?? "", maxLen = 28) {
 }
 /** Compose the single dim footer line rendered below the box. Pure so the ordering/spacing (and the
  *  optional route segment) can be pinned without rendering React. Shape (codex-style status line):
- *  `<model> · <approval>[ · <route>] · <cwd> · ↑<in> ↓<out> · ctx <pct>%`. `ctx N%` is always present
- *  (from 0 on) so the field never pops in mid-session and shifts the layout. */
+ *  `<model> · <approval>[ · <route>] · <cwd> · ↑<in> ↓<out> · ctx <pct>%`. The session name is NOT here —
+ *  it rides the input box's top-right border (see TopBorder). `ctx N%` is always present (from 0 on) so
+ *  the field never pops in mid-session and shifts the layout. */
 export function footerLine(model, s, cwdShort, route) {
     const routeSeg = route ? ` · ${route}` : "";
     return `  ${model} · ${s.approval}${routeSeg} · ${cwdShort} · ↑${tok(s.input)} ↓${tok(s.output)} · ctx ${s.ctxPct}%`;
@@ -48,6 +49,16 @@ export function footerLine(model, s, cwdShort, route) {
 const Footer = memo(function Footer({ model, s, cwdShort, route }) {
     return _jsx(Text, { dimColor: true, children: footerLine(model, s, cwdShort, route) });
 });
+// The rounded TOP edge of the input box, carrying the session name in the right corner (it "rides"
+// the border — codex-style titled panel, and where hara has always shown it). Drawn by hand because
+// ink's <Box borderStyle> has no title slot; the box below it renders with `borderTop={false}` and a
+// fixed `width`, so this line supplies the top with its two corners and everything lines up exactly.
+// Layout (total = width): `╭` + left dashes + ` ● <name> ` + `─╮`. `●` (U+25CF) is a hard 1-cell glyph
+// (unlike the emoji-presentation `⏺`, which some terminals render 2 cells wide and would skew the corner).
+const TopBorder = memo(function TopBorder({ name, width }) {
+    const left = Math.max(2, width - name.length - 7); // ╭(1)+ " "(1)+●(1)+" name "(len+2)+"─╮"(2)
+    return (_jsxs(Box, { children: [_jsx(Text, { dimColor: true, children: "╭" + "─".repeat(left) + " " }), _jsx(Text, { color: "cyan", children: "\u25CF" }), _jsx(Text, { bold: true, children: ` ${name} ` }), _jsx(Text, { dimColor: true, children: "─╮" })] }));
+});
 const MODE_DESC = {
     suggest: "confirms edits & commands",
     "auto-edit": "auto-applies edits · asks before commands",
@@ -369,9 +380,11 @@ export function InputBox({ status, cwd, model, route, width, onSubmit, onClipboa
     }, { isActive });
     const gutter = vim && mode === "normal" ? "◆ " : "› ";
     const gutterColor = vim ? (mode === "normal" ? "yellow" : "green") : "cyan";
-    // The prompt box borders subtract 2 cells (1 each side) from the usable text width; InputLine's
-    // deterministic wrap needs the INNER width so the cursor/continuation gutter stay exact.
-    const innerW = Math.max(1, w - 2);
+    // The box borders (1 each side) + paddingX (1 each side) subtract 4 cells; InputLine's deterministic
+    // wrap needs the INNER width so the cursor/continuation gutter stay exact. The box is a fixed `width={w}`
+    // with `borderTop={false}` so the hand-drawn TopBorder (with the session title) supplies the top edge
+    // + corners and everything aligns column-for-column.
+    const innerW = Math.max(1, w - 4);
     const cwdShort = footerCwd(cwd);
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Box, { borderStyle: "round", borderColor: "gray", borderDimColor: true, paddingX: 1, children: _jsx(InputLine, { value: value, cursor: cursor, width: innerW, gutter: gutter, gutterColor: gutterColor, placeholder: placeholder }) }), vim ? _jsx(Text, { dimColor: true, children: mode === "normal" ? "  -- NORMAL --  i/a insert · h l 0 $ w b e move · x dd D cw p edit" : "  -- INSERT --  Esc → normal" }) : null, _jsx(Footer, { model: model, s: status, cwdShort: cwdShort, route: route }), working ? _jsx(Text, { dimColor: true, children: `  ⌨ working — Enter queues your message${queued ? ` · ${queued} queued` : ""} · Esc interrupts` }) : null, popupOpen ? _jsx(MentionPopup, { items: candidates, selected: selIdx, query: mention.query }) : null, _jsx(ModeBar, { approval: status.approval })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(TopBorder, { name: status.sessionName || "session", width: w }), _jsx(Box, { borderStyle: "round", borderTop: false, borderColor: "gray", borderDimColor: true, paddingX: 1, width: w, children: _jsx(InputLine, { value: value, cursor: cursor, width: innerW, gutter: gutter, gutterColor: gutterColor, placeholder: placeholder }) }), vim ? _jsx(Text, { dimColor: true, children: mode === "normal" ? "  -- NORMAL --  i/a insert · h l 0 $ w b e move · x dd D cw p edit" : "  -- INSERT --  Esc → normal" }) : null, _jsx(Footer, { model: model, s: status, cwdShort: cwdShort, route: route }), working ? _jsx(Text, { dimColor: true, children: `  ⌨ working — Enter queues your message${queued ? ` · ${queued} queued` : ""} · Esc interrupts` }) : null, popupOpen ? _jsx(MentionPopup, { items: candidates, selected: selIdx, query: mention.query }) : null, _jsx(ModeBar, { approval: status.approval })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanhara/hara",
-  "version": "0.99.0",
+  "version": "0.99.1",
   "description": "hara — a coding agent CLI that runs like an engineering org.",
   "bin": {
     "hara": "dist/index.js"