ispbills-icli 8.5.8 → 8.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ispbills-icli",
-  "version": "8.5.8",
+  "version": "8.6.0",
   "description": "iCli — IspBills AI network engineer in your terminal",
   "keywords": [
     "ispbills",

package/src/tui/app.js

@@ -706,7 +706,7 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
         setChoice({
           title: '⚙ Tool request',
           note: toolDesc,
-          sel: 0, text: '', focusText: false, allowText: false,
+          sel: 0, text: '', focusText: false, allowText: true,
           isToolApproval: true,
           options: [
             { label: '1. Yes', value: 'yes, proceed with this tool call' },
@@ -1830,10 +1830,10 @@ export function App({ cfg, display = {}, onExternal, onExit, initialQuestion, sh
 
       ${live
         ? html`<${Box} flexDirection="column">
-            <${StatusLines} lines=${live.status} busy=${busy} />
+            ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} ts=${startedAt || Date.now()} streaming=${true} />` : null}
             ${live.reasoning ? html`<${Reasoning} text=${live.reasoning} show=${showReasoning} />` : null}
             ${live.reply?.steps ? html`<${Plan} reply=${live.reply} live=${true} />` : null}
-            ${live.text ? html`<${AssistantMessage} text=${live.text} cols=${cols} ts=${startedAt || Date.now()} streaming=${true} />` : null}
+            <${StatusLines} lines=${live.status} busy=${busy} />
             <${Thinking} label=${live.reply ? 'Planning' : live.text ? 'Responding' : 'Working'} startedAt=${startedAt} />
           <//>`
         : null}

package/src/tui/components.js

@@ -90,7 +90,7 @@ function formatTs(ts) {
 function SpeakerLine({ label, color, cols = 80, ts, rightLabel = '' }) {
   const stamp = ts ? `[${formatTs(ts)}]` : '';
   return html`
-    <${Box} paddingX=${2} marginTop=${1} width=${cols}>
+    <${Box} paddingX=${1} marginTop=${1} width=${cols}>
       <${Text} color=${color} bold>${label}<//>
       <${Box} flexGrow=${1} />
       ${rightLabel ? html`<${Text} color=${C.muted}>${rightLabel}<//>` : null}
@@ -118,7 +118,7 @@ export function TabBar({ active = 'session', cols = 80, mode = 'ask' }) {
           const on = t.id === active;
           return html`
             <${Box} key=${t.id}>
-              ${i > 0 ? html`<${Text} color="cyan" backgroundColor="blue">   <//>` : null}
+              ${i > 0 ? html`<${Text} backgroundColor="blue">   <//>` : null}
               ${on
                 ? html`<${Text} color="white" bold backgroundColor="blue">[${t.label}]<//>`
                 : html`<${Text} color="white" dimColor backgroundColor="blue">${t.label}<//>`}
@@ -221,7 +221,7 @@ export function UserMessage({ text, cols = 80, ts }) {
     <${Box} flexDirection="column" marginTop=${1}>
       <${Sep} cols=${cols} />
       <${SpeakerLine} label="You" color=${C.brand} cols=${cols} ts=${ts} />
-      <${Box} paddingX=${2}>
+      <${Box} paddingX=${1}>
         <${Text}>${withMentions(text)}<//>
       <//>
     <//>`;
@@ -257,7 +257,7 @@ export function AssistantMessage({ text, cols = 80, ts, label = `${glyphs.copilo
     <${Box} flexDirection="column" marginTop=${1}>
       <${Sep} cols=${cols} />
       <${SpeakerLine} label=${label} color=${C.accent} cols=${cols} ts=${ts} />
-      <${Box} paddingX=${2} flexDirection="column" width=${bodyWidth}>
+      <${Box} paddingX=${1} flexDirection="column" width=${bodyWidth}>
         ${streaming ? html`<${StreamingText} text=${text} />` : html`<${Markdown} content=${text} />`}
       <//>
     <//>`;
@@ -315,17 +315,18 @@ export function StatusLines({ lines = [], busy = false }) {
         const em = String(line).match(LEAD_EMOJI);
         const body = em ? String(line).slice(em[0].length) : String(line).replace(/^[\s◈◆●○◎⇢→>*✓✗×!⚠·-]+/u, '');
         const ci = body.indexOf(':');
-        const action = ci > -1 ? body.slice(0, ci) : body;
+        const action = ci > -1 ? body.slice(0, ci).trim() : body.trim();
         const detail = ci > -1 ? body.slice(ci + 1).trim() : '';
+        // §6/§23: render as [Tool call: name  detail]  ✓/spinner chip
+        const chipLabel = detail ? `${em ? em[1] : ''}${action}  ${detail}` : `${em ? em[1] : ''}${action}`;
         return html`
-          <${Box} key=${'s' + i}>
+          <${Box} key=${'s' + i} marginTop=${0}>
+            <${Text} color=${C.muted}>  <//>
+            <${Text} color=${running ? C.warning : C.muted}>[<//>
+            <${Text} color=${running ? C.white : C.muted} bold=${running}>${chipLabel.trim()}<//><${Text} color=${running ? C.warning : C.muted}>]<//><${Text}> <//>
             ${running
               ? html`<${Text} color=${C.accent}><${Spinner} type=${spinnerType()} /><//>`
-              : html`<${Text} color=${C.green}>${glyphs.check}<//>`}
-            <${Text}> <//>
-            ${em ? html`<${Text}>${em[1]} <//>` : null}
-            <${Text} color=${running ? C.white : C.gray} bold=${running}>${action}<//>
-            ${detail ? html`<${Text} color=${C.gray}>: ${detail}<//>` : null}
+              : html`<${Text} color=${C.success}>${glyphs.check}<//>`}
           <//>`;
       })}
     <//>`;
@@ -518,6 +519,7 @@ export function Choice({ title, note, options = [], sel = 0, allowText = false,
         <${Box} paddingX=${2} marginTop=${1}>
           <${Text} color=${C.accent} bold>⚙ Tool request<//>
         <//>
+        <${Sep} cols=${80} />
         ${note ? html`<${Box} paddingX=${2} marginTop=${1}><${Text} color=${C.muted}>${note}<//><//>` : null}
         <${Box} flexDirection="column" marginTop=${1} paddingX=${2}>
           ${options.map((o, i) => {