@xingjisoft/neutrino 0.1.6 → 0.2.0

package/web/app.js

@@ -1,5 +1,5 @@
 import { createSettingsUI } from "./settings.js";
-import { turnFolds, turnPreview, turnRanges } from "./turns.js";
+import { turnAnswerIndex, turnFolds, turnPreview, turnRanges } from "./turns.js";
 
 // Neutrino web UI — a dependency-free single page app.
 //
@@ -61,6 +61,13 @@ async function apiFetch(path, init = {}) {
   return response;
 }
 
+// The orbit mark is shared by the sidebar, the favicon and the login card, so
+// the console never falls back to a typed glyph for its own identity.
+const LOGO_MARK =
+  '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">' +
+  '<ellipse cx="12" cy="12" rx="9.4" ry="3.8" transform="rotate(-30 12 12)" stroke="currentColor" stroke-width="1.7"/>' +
+  '<circle cx="12" cy="12" r="3.1" stroke="currentColor" stroke-width="1.7"/></svg>';
+
 let gateShown = false;
 
 function showGate(message = "") {
@@ -76,8 +83,9 @@ function showGate(message = "") {
   gate.setAttribute("aria-labelledby", "login-title");
   gate.innerHTML =
     '<form class="gate-card">' +
-    '<h2 id="login-title">Sign in to Neutrino</h2>' +
-    '<p>Enter your Web password. The default password is 114514.</p>' +
+    '<div class="gate-brand"><span class="logo">' + LOGO_MARK + "</span><strong>Neutrino</strong></div>" +
+    '<h2 id="login-title">Sign in</h2>' +
+    '<p>Enter your Web password to open this console. The default password is 114514.</p>' +
     '<label for="login-password">Password</label>' +
     '<input id="login-password" name="password" type="password" autocomplete="current-password" maxlength="256" required autofocus>' +
     '<p class="form-feedback error" role="alert"></p>' +
@@ -240,6 +248,16 @@ function truncate(value, max) {
   return text.length > max ? `${text.slice(0, max)}…` : text;
 }
 
+// Sidebar paths are identifiers, not navigation: keep the project end of a long
+// path so two checkouts under different parents stay tellable apart.
+function shortenPath(value, depth = 2) {
+  const text = String(value ?? "");
+  const separator = text.includes("\\") ? "\\" : "/";
+  const parts = text.split(/[\\/]+/).filter(Boolean);
+  if (parts.length <= depth + 1) return text;
+  return `…${separator}${parts.slice(-depth).join(separator)}`;
+}
+
 function safeJson(value) {
   try {
     return JSON.stringify(value ?? {});
@@ -364,8 +382,10 @@ function renderGroup(group) {
   const header = document.createElement("button");
   header.className = "group-header";
   header.innerHTML =
-    `<span class="chevron">${collapsed ? "▸" : "▾"}</span>` +
-    `<span class="path" title="${escapeHtml(group.cwd)}">${escapeHtml(group.cwd)}</span>` +
+    `<span class="chevron${collapsed ? " collapsed" : ""}">` +
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>' +
+    "</span>" +
+    `<span class="path" title="${escapeHtml(group.cwd)}">${escapeHtml(shortenPath(group.cwd))}</span>` +
     `<span class="count">${group.sessions.length}</span>`;
   header.addEventListener("click", () => {
     if (state.collapsed.has(group.key)) state.collapsed.delete(group.key);
@@ -413,12 +433,14 @@ function renderSession(session) {
   if (session.live) item.classList.add("live");
 
   const title = session.title || "New conversation";
+  const count = Number(session.message_count ?? 0);
+  item.title = title;
   item.innerHTML =
     `<div class="session-top"><span class="session-title">${escapeHtml(title)}</span>` +
     `${session.live ? '<span class="dot" title="Live"></span>' : ""}</div>` +
     `<div class="session-meta"><span class="model">${escapeHtml(session.model || "?")}</span>` +
     `<span class="time">${escapeHtml(formatTime(session.updated_at))}</span>` +
-    `<span class="count">${Number(session.message_count ?? 0)} msg</span></div>`;
+    `<span class="count">${count} message${count === 1 ? "" : "s"}</span></div>`;
 
   item.addEventListener("click", () => {
     if (session.liveKey) selectLive(session.liveKey);
@@ -459,6 +481,7 @@ async function selectLive(key) {
   state.openContext = null;
   renderSidebar();
   el.controls.innerHTML = "";
+  renderApproval(null);
   el.title.textContent = "Connecting…";
   el.sub.textContent = "";
   setComposerMode("live");
@@ -516,6 +539,7 @@ async function selectFile(id) {
   state.openContext = null;
   renderSidebar();
   el.controls.innerHTML = "";
+  renderApproval(null);
   setComposerMode("resume");
   el.title.textContent = "Loading…";
   el.sub.textContent = "";
@@ -552,12 +576,12 @@ function renderFileControls(data) {
 
   const badge = document.createElement("span");
   badge.className = "badge readonly";
-  badge.textContent = "read-only";
+  badge.textContent = "Read-only";
   el.controls.appendChild(badge);
 
   const button = document.createElement("button");
   button.className = "control primary";
-  button.textContent = "✎ Continue here";
+  button.textContent = "Continue here";
   button.title = "Resume this conversation in the browser and keep chatting";
   button.addEventListener("click", async () => {
     button.disabled = true;
@@ -567,7 +591,7 @@ function renderFileControls(data) {
       el.input.focus();
     } catch (error) {
       button.disabled = false;
-      button.textContent = "✎ Continue here";
+      button.textContent = "Continue here";
       el.sub.textContent = `Could not continue this conversation: ${error.message}`;
     }
   });
@@ -595,8 +619,8 @@ function setComposerMode(mode) {
   el.composer.classList.remove("hidden");
   el.input.placeholder =
     mode === "resume"
-      ? "Continue this conversation… (Enter to send)"
-      : "Message the agent… (Enter to send, Shift+Enter for a new line)";
+      ? "Continue this conversation…"
+      : "Message Neutrino…";
 }
 
 function hideComposer() {
@@ -709,7 +733,7 @@ function renderApproval(snapshot) {
   const head = document.createElement("div");
   head.className = "approval-head";
   const title = document.createElement("strong");
-  title.textContent = "Request Approval";
+  title.textContent = "Approval required";
   const risk = document.createElement("span");
   risk.className = "approval-risk";
   risk.textContent = extreme ? "EXTREME RISK" : "HIGH RISK";
@@ -800,12 +824,21 @@ function renderControls(snapshot) {
   const badge = document.createElement("span");
   const mode = snapshot.paused ? "paused" : snapshot.busy ? "busy" : "idle";
   badge.className = `badge ${mode}`;
+  // A retried request leaves the session busy but silent: name the retry so the
+  // badge does not just say "working" for minutes. The same goes for a
+  // sub-agent, whose own messages never reach this transcript.
+  const retrying = snapshot.retrying;
+  const subagent = snapshot.subagent;
   badge.textContent = snapshot.paused
     ? "paused"
     : snapshot.busy
       ? snapshot.compressing
         ? "compressing"
-        : "working"
+        : retrying
+          ? `retrying ${retrying.attempt}/${retrying.attempts}`
+          : subagent
+            ? `sub-agent: ${subagent}`
+            : "working"
       : "idle";
   el.controls.appendChild(badge);
 
@@ -819,7 +852,7 @@ function renderControls(snapshot) {
   if (snapshot.busy || snapshot.paused) {
     const button = document.createElement("button");
     button.className = "control";
-    button.textContent = snapshot.paused ? "▶ Resume" : "❚❚ Pause";
+    button.textContent = snapshot.paused ? "Resume" : "Pause";
     button.addEventListener("click", () => {
       postAction(snapshot.key, snapshot.paused ? "resume" : "pause");
     });
@@ -852,7 +885,7 @@ function renderMessageList(messages, streaming, options) {
   if (messages.length === 0 && !streaming) {
     const empty = document.createElement("div");
     empty.className = "empty";
-    empty.textContent = options?.readOnly ? "This conversation is empty." : "Say something to get started.";
+    empty.textContent = options?.readOnly ? "This conversation is empty." : "Send a message to get started.";
     el.messages.appendChild(empty);
     return;
   }
@@ -886,10 +919,10 @@ function renderMessageList(messages, streaming, options) {
     });
     el.messages.appendChild(details);
   }
-  // Render the tail one turn at a time: a turn the agent has finished folds into
-  // a summary line, a running one stays open. The turn in flight is the last one,
-  // so `active` decides its state; a turn cut in half by the compressed prefix is
-  // rendered as plain messages instead.
+  // Render the tail one turn at a time: a finished turn folds its work behind a
+  // summary line and keeps its reply; a running one stays fully open. The turn in
+  // flight is the last one, so `active` decides its state; a turn cut in half by
+  // the compressed prefix is rendered as plain messages instead.
   const turns = turnRanges(original);
   const running = options?.active && turns.length > 0 ? turns[turns.length - 1].start : -1;
   for (const turn of turns) {
@@ -931,7 +964,9 @@ function renderMessage(message, index) {
 
     const summary = document.createElement("summary");
     summary.innerHTML =
-      `<span class="tool-name">⚙ ${escapeHtml(message.name || "tool")}</span>` +
+      '<span class="tool-name">' +
+      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m4 17 6-6-6-6"/><path d="M12 19h8"/></svg>' +
+      `${escapeHtml(message.name || "tool")}</span>` +
       `<span class="tool-args">${escapeHtml(truncate(safeJson(message.arguments), 120))}</span>`;
     details.appendChild(summary);
 
@@ -958,29 +993,35 @@ function renderMessage(message, index) {
 }
 
 /**
- * A finished turn, folded to one summary line. The messages are rendered on
- * first open and dropped again on close, so a long transcript costs nothing
- * until the reader asks for it. Nothing is lost either way: this is presentation
- * only, and the saved transcript always holds every message.
+ * A finished turn: its work folded behind one control line, its reply always on
+ * screen below it. The folded messages are rendered on first open and dropped
+ * again on close, so a long transcript costs nothing until the reader asks for
+ * it. Nothing is lost either way: this is presentation only, and the saved
+ * transcript always holds every message.
  */
 function renderTurnFold(start, messages) {
+  // The reply is never folded away, so a turn renders as a group: the fold (the
+  // prompt line plus the work it hides) and, right below it, the answer itself.
+  const reply = turnAnswerIndex(messages);
+  const group = document.createElement("div");
+  group.className = "turn-group";
+
   const details = document.createElement("details");
   details.className = "turn";
   details.open = state.openTurns.has(start);
 
-  const count = messages.length;
+  const hidden = reply < 0 ? messages.length : messages.length - 1;
   const summary = document.createElement("summary");
   const chevron = document.createElement("span");
   chevron.className = "turn-chevron";
-  chevron.textContent = "▸";
+  chevron.innerHTML =
+    '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>';
   const you = document.createElement("span");
   you.className = "turn-you";
   you.textContent = `You: ${truncate(turnPreview(messages, "user"), 110)}`;
   const meta = document.createElement("span");
   meta.className = "turn-meta";
-  meta.textContent =
-    `${count} message${count === 1 ? "" : "s"} · ` +
-    truncate(turnPreview(messages, "assistant", true), 90);
+  meta.textContent = `${hidden} of ${messages.length} message${messages.length === 1 ? "" : "s"} folded`;
   // The hint cannot live in the static text: it says the opposite once open.
   const hint = document.createElement("span");
   hint.className = "turn-hint";
@@ -989,6 +1030,7 @@ function renderTurnFold(start, messages) {
   summary.appendChild(you);
   summary.appendChild(meta);
   details.appendChild(summary);
+  group.appendChild(details);
 
   const syncHint = () => {
     hint.textContent = details.open ? " — click to collapse" : " — click to expand";
@@ -1000,7 +1042,10 @@ function renderTurnFold(start, messages) {
   details.appendChild(body);
   const populate = () => {
     if (body.childNodes.length) return;
-    messages.forEach((message, offset) => body.appendChild(renderMessage(message, start + offset)));
+    messages.forEach((message, offset) => {
+      if (offset === reply) return; // the answer is never inside the fold
+      body.appendChild(renderMessage(message, start + offset));
+    });
   };
   if (details.open) populate();
   details.addEventListener("toggle", () => {
@@ -1015,7 +1060,10 @@ function renderTurnFold(start, messages) {
     }
     syncHint();
   });
-  return details;
+  // The answer comes with the fold, so a finished exchange ends on its reply
+  // even while the work that produced it stays hidden.
+  if (reply >= 0) group.appendChild(renderMessage(messages[reply], start + reply));
+  return group;
 }
 
 function firstUserMessage(messages) {

package/web/index.html

@@ -4,28 +4,44 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
     <meta name="color-scheme" content="dark" />
+    <meta name="theme-color" content="#151517" />
     <title>Neutrino</title>
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f9fafb' stroke-width='1.7'%3E%3Cellipse cx='12' cy='12' rx='9.4' ry='3.8' transform='rotate(-30 12 12)'/%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3C/svg%3E" />
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <div id="app">
       <aside id="sidebar">
         <header class="brand">
-          <div class="logo" aria-hidden="true">◈</div>
+          <div class="logo" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <ellipse cx="12" cy="12" rx="9.4" ry="3.8" transform="rotate(-30 12 12)" stroke="currentColor" stroke-width="1.7" />
+              <circle cx="12" cy="12" r="3.1" stroke="currentColor" stroke-width="1.7" />
+            </svg>
+          </div>
           <div class="brand-text">
             <strong>Neutrino</strong>
             <span id="status" class="status">connecting…</span>
           </div>
-          <button id="refresh" class="icon-btn" title="Refresh conversations" aria-label="Refresh">⟳</button>
-          <button id="settings-open" class="icon-btn" title="Settings" aria-label="Settings">⚙</button>
+          <div class="brand-actions">
+            <button id="refresh" class="icon-btn" type="button" title="Refresh conversations" aria-label="Refresh conversations">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36" /><path d="M21 3v6h-6" /></svg>
+            </button>
+            <button id="settings-open" class="icon-btn" type="button" title="Settings" aria-label="Settings">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" /><circle cx="12" cy="12" r="3" /></svg>
+            </button>
+          </div>
         </header>
         <div id="sessions" class="sessions"></div>
+        <footer class="sidebar-foot">
+          <span>Local agent console</span>
+        </footer>
       </aside>
 
       <main id="main">
         <header id="main-header" class="main-header">
           <button id="back-to-menu" class="icon-btn back-to-menu" type="button" title="Back to conversations" aria-label="Back to conversations" aria-controls="sidebar">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 5-7 7 7 7M5 12h14" /></svg>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 5-7 7 7 7M5 12h14" /></svg>
           </button>
           <div class="main-title">
             <h1 id="session-title">Select a conversation</h1>
@@ -37,19 +53,36 @@
         <form id="model-picker" class="model-picker hidden" aria-label="Conversation model">
           <label>Provider<select id="model-provider"></select></label>
           <label>Model<select id="model-name"></select></label>
-          <label>Thinking intensity<select id="model-intensity"></select></label>
-          <button id="model-apply" class="control" type="submit">Apply to conversation</button>
+          <label>Thinking<select id="model-intensity"></select></label>
+          <button id="model-apply" class="control" type="submit">Apply</button>
           <p id="model-feedback" class="form-feedback" role="status" aria-live="polite"></p>
         </form>
 
         <section id="messages" class="messages">
-          <div class="empty">Choose a conversation from the sidebar to view it.</div>
+          <div class="empty">
+            <span class="empty-mark" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <ellipse cx="12" cy="12" rx="9.4" ry="3.8" transform="rotate(-30 12 12)" stroke="currentColor" stroke-width="1.7" />
+                <circle cx="12" cy="12" r="3.1" stroke="currentColor" stroke-width="1.7" />
+              </svg>
+            </span>
+            <strong>No conversation open</strong>
+            <span>Choose a conversation from the sidebar to view it.</span>
+          </div>
         </section>
 
         <div id="approval" class="approval hidden" role="alert" aria-live="assertive"></div>
+
         <footer id="composer" class="composer hidden">
-          <textarea id="input" rows="2" placeholder="Send a message…  (Enter to send, Shift+Enter for newline)"></textarea>
-          <button id="send" class="primary">Send</button>
+          <div class="composer-inner">
+            <div class="composer-card">
+              <textarea id="input" rows="1" placeholder="Message Neutrino…" aria-label="Message"></textarea>
+              <button id="send" class="primary" type="button" title="Send message" aria-label="Send message">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
+              </button>
+            </div>
+            <div class="composer-hint"><kbd>Enter</kbd> to send · <kbd>Shift</kbd> + <kbd>Enter</kbd> for a new line</div>
+          </div>
         </footer>
       </main>
     </div>
@@ -57,8 +90,13 @@
     <dialog id="settings-dialog" class="settings-dialog" aria-labelledby="settings-title">
       <form id="settings-form">
         <header class="settings-header">
-          <h2 id="settings-title">Settings</h2>
-          <button id="settings-close" class="icon-btn" type="button" aria-label="Close settings">×</button>
+          <div>
+            <h2 id="settings-title">Settings</h2>
+            <p class="settings-sub">Models, approvals, and console access.</p>
+          </div>
+          <button id="settings-close" class="icon-btn" type="button" aria-label="Close settings">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12" /></svg>
+          </button>
         </header>
         <div class="settings-fields">
           <h3>Defaults for new conversations</h3>
@@ -66,21 +104,21 @@
           <label>Model<select id="default-model"></select></label>
           <label>Thinking intensity<select id="default-intensity"></select></label>
           <h3>Conversation and approvals</h3>
-          <label>Model context window (tokens)<input id="settings-context" type="number" min="1" max="9007199254740991" step="1" required></label>
+          <label>Model context window (tokens)<input id="settings-context" type="number" min="1" max="9007199254740991" step="1" required /></label>
           <p id="settings-compress-note" class="settings-note">Auto-compress at 80% of this model's context window. Default: 1,000,000 tokens.</p>
           <label>Approval reviewer model<select id="settings-reviewer"></select></label>
-          <label class="checkbox-label"><input id="settings-extreme" type="checkbox"> Extreme-risk auto-approval (del class, 3 separate review rounds)</label>
-          <label class="checkbox-label"><input id="settings-sound" type="checkbox"> Sound alerts (turn finished, approval waiting)</label>
+          <label class="checkbox-label"><input id="settings-extreme" type="checkbox" /> Extreme-risk auto-approval (del class, 3 separate review rounds)</label>
+          <label class="checkbox-label"><input id="settings-sound" type="checkbox" /> Sound alerts (turn finished, approval waiting)</label>
           <p class="settings-note">Safety determines automatic approval; task relevance only blocks unanimously confirmed, extreme mismatches. Delete-class automatic approval also requires this setting.</p>
           <h3>Web access</h3>
-          <label>New Web password<input id="settings-password" type="password" autocomplete="new-password" maxlength="256" placeholder="Leave blank to keep current password"></label>
-          <label>Confirm password<input id="settings-password-confirm" type="password" autocomplete="new-password" maxlength="256" placeholder="Repeat new password"></label>
+          <label>New Web password<input id="settings-password" type="password" autocomplete="new-password" maxlength="256" placeholder="Leave blank to keep current password" /></label>
+          <label>Confirm password<input id="settings-password-confirm" type="password" autocomplete="new-password" maxlength="256" placeholder="Repeat new password" /></label>
           <p class="settings-note">The password is permanent and survives restarts. Default: 114514. Saving a new password signs out other browsers.</p>
           <p id="settings-feedback" class="form-feedback" role="status" aria-live="polite"></p>
         </div>
         <footer class="settings-actions">
           <button id="settings-cancel" class="control" type="button">Cancel</button>
-          <button id="settings-save" class="primary" type="submit">Save settings</button>
+          <button id="settings-save" class="primary" type="submit">Save changes</button>
         </footer>
       </form>
     </dialog>