@alashi/cli 0.14.0 → 0.15.0

package/assets/v1/chat.js

@@ -5,9 +5,15 @@
  *   <script src="/assets/v1/chat.js"></script>
  *   <alashi-chat></alashi-chat>
  *
- * and get conversations, SSE streaming, markdown rendering, tool-use status,
- * and cost display. Renders into light DOM using system.css classes, so it
- * inherits the app's theme tokens.
+ * and get conversations, live event streaming, markdown rendering, tool-use
+ * status, interactive tool-approval cards, and cost display. Renders into
+ * light DOM using system.css classes, so it inherits the app's theme tokens.
+ *
+ * Turns are enqueue-only: POST /chat returns 202 and every event (including
+ * the echo of the user's own message) arrives over a standing per-conversation
+ * EventSource, so any number of tabs render the same transcript and the
+ * stream survives refreshes via Last-Event-ID replay + the pending-approvals
+ * snapshot.
  *
  * The same script also registers <alashi-markdown>, the markdown renderer on
  * its own for apps that display prose outside a conversation (see the bottom
@@ -121,6 +127,8 @@
       if (this._initialized) return;
       this._initialized = true;
       this.conversationId = null;
+      this._events = null;
+      this._resetTurn();
       this._render();
       // Single-conversation mode: the embedding app opens the transcript it
       // wants, so skip both the listing fetch and the auto-open.
@@ -238,6 +246,8 @@
 
     async openConversation(id) {
       this.conversationId = id;
+      this._disconnect();
+      this._resetTurn();
       this._log.replaceChildren();
       this._status.textContent = 'loading history…';
       const { bubble, note } = this._appendPending();
@@ -253,11 +263,232 @@
         this._showError(bubble, false, `Failed to load history: ${String(err)}`);
         this._status.textContent = String(err);
       }
+      await this._loadPendingApprovals().catch(() => {});
+      // Fresh connect: the host replays the in-flight turn (everything before
+      // it is already in the history we just rendered), then follows live.
+      this._connect(id);
       this._loadConversations().catch(() => {});
       this._emit('conversation', { conversationId: id });
       this._input.focus();
     }
 
+    /* Standing per-conversation EventSource. `fromStart` replays the whole
+     * ring — used right after creating a conversation, whose only events are
+     * this first turn. Reconnects resume via Last-Event-ID automatically; a
+     * gap beyond the ring arrives as a `resync` event instead. */
+    _connect(id, { fromStart = false } = {}) {
+      this._disconnect();
+      const url = this._hostApi(
+        `/chat/${encodeURIComponent(id)}/events${fromStart ? '?lastEventId=0' : ''}`,
+      );
+      this._events = new EventSource(url);
+      this._events.onmessage = (e) => {
+        let event;
+        try {
+          event = JSON.parse(e.data);
+        } catch {
+          return;
+        }
+        if (this.conversationId === id) this._handleEvent(event);
+      };
+    }
+
+    _disconnect() {
+      if (this._events) {
+        this._events.close();
+        this._events = null;
+      }
+    }
+
+    _resetTurn() {
+      this._reply = null;
+      this._replyNote = null;
+      this._replyText = '';
+    }
+
+    /* The current turn's assistant bubble, created on demand so a turn echoed
+     * from another tab renders the same as one submitted here. */
+    _ensureReply() {
+      if (!this._reply?.isConnected) {
+        const { bubble, note } = this._appendPending();
+        this._reply = bubble;
+        this._replyNote = note;
+        this._replyText = '';
+      }
+      return this._reply;
+    }
+
+    _handleEvent(event) {
+      if (event.type === 'user_message') {
+        this._appendMsg(event.text, 'user');
+        this._ensureReply();
+        this._status.textContent = 'thinking…';
+        return;
+      }
+      if (event.type === 'text') {
+        const reply = this._ensureReply();
+        this._replyText += event.text;
+        reply.classList.remove('pending');
+        this._setMsgText(reply, this._replyText, 'assistant');
+        this._log.scrollTop = this._log.scrollHeight;
+        return;
+      }
+      if (event.type === 'tool_use') {
+        this._status.textContent = `using tool: ${event.name}`;
+        if (this._reply?.classList.contains('pending'))
+          this._replyNote.textContent = `using tool: ${event.name}…`;
+        return;
+      }
+      if (event.type === 'approval_required') {
+        this._renderApproval(event);
+        return;
+      }
+      if (event.type === 'approval_resolved') {
+        this._resolveApproval(event);
+        return;
+      }
+      if (event.type === 'compaction') {
+        this._log.append(
+          el('div', {
+            className: 'chat-divider',
+            textContent: `context compacted · ${event.trigger}`,
+          }),
+        );
+        this._log.scrollTop = this._log.scrollHeight;
+        return;
+      }
+      if (event.type === 'resync') {
+        // Missed too much to replay: rebuild from history + pending snapshot.
+        this.openConversation(this.conversationId).catch(() => {});
+        return;
+      }
+      if (event.type === 'result') {
+        this._status.textContent = event.ok
+          ? `done${event.costUsd ? ` ($${event.costUsd.toFixed(4)})` : ''}`
+          : `error: ${event.error}`;
+        const reply = this._ensureReply();
+        if (!event.ok) {
+          this._showError(reply, this._replyText !== '', `Something went wrong: ${event.error}`);
+        } else if (this._replyText === '') {
+          reply.className = 'msg assistant';
+          reply.replaceChildren(
+            el('span', { className: 'typing-note', textContent: '(no reply)' }),
+          );
+        }
+        this._emit('turn', {
+          ok: event.ok,
+          costUsd: event.costUsd,
+          error: event.error,
+          conversationId: this.conversationId,
+        });
+        this._resetTurn();
+        this._send.disabled = false;
+        this._input.focus();
+      }
+    }
+
+    /* Inline approval card: tool, input preview, and the four decisions. The
+     * decision travels over the respond endpoint; the card collapses when the
+     * matching approval_resolved event comes back on the bus (so every tab
+     * collapses, not just the one that clicked). */
+    _renderApproval(event) {
+      if (this._approvalCard(event.approvalId)) return; // snapshot + replay overlap
+      const card = el('div', { className: 'approval-card' });
+      card.dataset.approvalId = event.approvalId;
+      card.dataset.tool = event.tool;
+      let preview = '';
+      try {
+        preview = JSON.stringify(event.input, null, 2);
+      } catch {
+        preview = String(event.input);
+      }
+      if (preview && preview.length > 2000) preview = `${preview.slice(0, 2000)}…`;
+      const actions = el('div', { className: 'approval-actions' });
+      const act = (label, body, primary) => {
+        const button = el('button', {
+          type: 'button',
+          textContent: label,
+          className: primary ? 'primary' : '',
+        });
+        button.addEventListener('click', () => {
+          for (const b of actions.querySelectorAll('button')) b.disabled = true;
+          this._respondToApproval(event.approvalId, body).catch(() => {
+            for (const b of actions.querySelectorAll('button')) b.disabled = false;
+          });
+        });
+        actions.append(button);
+      };
+      act('Approve', { behavior: 'allow' }, true);
+      act('Approve for session', { behavior: 'allow', scope: 'session' });
+      act('Always allow', { behavior: 'allow', scope: 'always' });
+      act('Deny', { behavior: 'deny' });
+      card.append(
+        el('div', {
+          className: 'approval-title',
+          textContent: `Approval required: ${event.tool}`,
+        }),
+        ...(preview ? [el('pre', {}, [el('code', { textContent: preview })])] : []),
+        actions,
+      );
+      // Keep the typing indicator visually last while the engine is suspended.
+      if (this._reply?.isConnected) this._log.insertBefore(card, this._reply);
+      else this._log.append(card);
+      this._log.scrollTop = this._log.scrollHeight;
+    }
+
+    _approvalCard(approvalId) {
+      for (const card of this._log.querySelectorAll('.approval-card')) {
+        if (card.dataset.approvalId === approvalId) return card;
+      }
+      return null;
+    }
+
+    async _respondToApproval(approvalId, body) {
+      const res = await fetch(
+        this._hostApi(
+          `/chat/${encodeURIComponent(this.conversationId)}/approvals/${encodeURIComponent(approvalId)}`,
+        ),
+        {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify(body),
+        },
+      );
+      if (!res.ok && res.status !== 409) throw new Error(`HTTP ${res.status}`);
+    }
+
+    _resolveApproval(event) {
+      const card = this._approvalCard(event.approvalId);
+      if (!card) return;
+      const verdict = event.behavior === 'allow' ? 'Approved' : 'Denied';
+      const why =
+        event.reason && event.reason !== 'user' ? ` · ${event.reason.replace('_', ' ')}` : '';
+      card.className = 'approval-card resolved';
+      card.replaceChildren(
+        el('div', {
+          className: 'approval-title',
+          textContent: `${verdict}: ${card.dataset.tool}${why}`,
+        }),
+      );
+    }
+
+    async _loadPendingApprovals() {
+      if (!this.conversationId) return;
+      const res = await fetch(
+        this._hostApi(`/chat/${encodeURIComponent(this.conversationId)}/pending-approvals`),
+      );
+      if (!res.ok) return;
+      const { approvals } = await res.json();
+      for (const approval of approvals) {
+        this._renderApproval({
+          type: 'approval_required',
+          approvalId: approval.approvalId,
+          tool: approval.tool,
+          input: approval.input,
+        });
+      }
+    }
+
     async adoptSession(sessionId, title) {
       const res = await fetch(this._hostApi('/chat/conversations'), {
         method: 'POST',
@@ -272,6 +503,8 @@
 
     newChat() {
       this.conversationId = null;
+      this._disconnect();
+      this._resetTurn();
       this._log.replaceChildren();
       this._status.textContent = '';
       this._loadConversations().catch(() => {});
@@ -283,15 +516,14 @@
       this.dispatchEvent(new CustomEvent(`alashi-chat:${name}`, { detail, bubbles: true }));
     }
 
+    /* Enqueue-only: the 202 carries the conversation id, and the turn itself
+     * (including the echo of this message) arrives over the EventSource. */
     async _submit() {
       const message = this._input.value.trim();
       if (!message) return;
       this._input.value = '';
       this._send.disabled = true;
-      this._appendMsg(message, 'user');
-      const { bubble: reply, note } = this._appendPending();
       this._status.textContent = 'thinking…';
-      let replyText = '';
 
       try {
         const res = await fetch(this._hostApi('/chat'), {
@@ -304,58 +536,20 @@
         });
         if (!res.ok) throw new Error(`HTTP ${res.status}: ${await res.text()}`);
         const isNew = !this.conversationId;
-        this.conversationId = res.headers.get('x-conversation-id') || this.conversationId;
-
-        const reader = res.body.getReader();
-        const decoder = new TextDecoder();
-        let buffer = '';
-        for (;;) {
-          const { done, value } = await reader.read();
-          if (done) break;
-          buffer += decoder.decode(value, { stream: true });
-          const frames = buffer.split('\n\n');
-          buffer = frames.pop();
-          for (const frame of frames) {
-            const dataLine = frame.split('\n').find((line) => line.startsWith('data: '));
-            if (!dataLine) continue;
-            const event = JSON.parse(dataLine.slice(6));
-            if (event.type === 'text') {
-              replyText += event.text;
-              reply.classList.remove('pending');
-              this._setMsgText(reply, replyText, 'assistant');
-              this._log.scrollTop = this._log.scrollHeight;
-            }
-            if (event.type === 'tool_use') {
-              this._status.textContent = `using tool: ${event.name}`;
-              if (reply.classList.contains('pending'))
-                note.textContent = `using tool: ${event.name}…`;
-            }
-            if (event.type === 'result') {
-              this._status.textContent = event.ok
-                ? `done${event.costUsd ? ` ($${event.costUsd.toFixed(4)})` : ''}`
-                : `error: ${event.error}`;
-              if (!event.ok) {
-                this._showError(reply, replyText !== '', `Something went wrong: ${event.error}`);
-              } else if (replyText === '') {
-                reply.className = 'msg assistant';
-                reply.replaceChildren(
-                  el('span', { className: 'typing-note', textContent: '(no reply)' }),
-                );
-              }
-              this._emit('turn', {
-                ok: event.ok,
-                costUsd: event.costUsd,
-                error: event.error,
-                conversationId: this.conversationId,
-              });
-            }
-          }
+        const { conversationId } = await res.json();
+        this.conversationId = conversationId || this.conversationId;
+        if (isNew) {
+          // New conversation: nothing on the bus predates this turn, so replay
+          // it all — the submit happened before the stream existed.
+          this._connect(this.conversationId, { fromStart: true });
+          this._emit('conversation', { conversationId: this.conversationId });
+          this._loadConversations().catch(() => {});
         }
-        if (isNew) this._loadConversations().catch(() => {});
       } catch (err) {
         this._status.textContent = String(err);
-        this._showError(reply, replyText !== '', `Something went wrong: ${String(err)}`);
-      } finally {
+        this._appendMsg(message, 'user');
+        const { bubble } = this._appendPending();
+        this._showError(bubble, false, `Something went wrong: ${String(err)}`);
         this._send.disabled = false;
         this._input.focus();
       }

package/assets/v1/system.css

@@ -675,3 +675,43 @@ alashi-markdown {
   color: var(--muted);
   margin-top: 0.4rem;
 }
+.approval-card {
+  border: 1px solid var(--warn, var(--border));
+  border-radius: 8px;
+  padding: 0.6rem 0.8rem;
+  margin: 0.25rem 0 0.6rem;
+  font-size: 0.9rem;
+}
+.approval-card .approval-title {
+  font-weight: 600;
+  margin-bottom: 0.4rem;
+}
+.approval-card pre {
+  max-height: 10rem;
+  overflow: auto;
+  margin: 0 0 0.5rem;
+  font-size: 0.8rem;
+}
+.approval-card.resolved {
+  border-color: var(--border);
+  color: var(--muted);
+}
+.approval-card.resolved .approval-title {
+  font-weight: 400;
+  margin-bottom: 0;
+  font-size: 0.85rem;
+}
+.approval-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+}
+.chat-divider {
+  color: var(--muted);
+  font-size: 0.75rem;
+  border-top: 1px dashed var(--border);
+  padding-top: 0.25rem;
+  margin: 0.4rem auto;
+  width: 60%;
+  text-align: center;
+}

package/dist/cli.mjs

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { A as UsageRecorder, E as budgetStatus, N as AuthService, O as setAppBudget, b as loadApp, c as installApp, d as updateApp, f as addRegistry, h as removeRegistry, i as resolveAppConfig, n as createServer, o as exportApp, s as importApp, t as Store, u as removeApp } from "./store-DoAGOynU.mjs";
+import { A as UsageRecorder, E as budgetStatus, N as AuthService, O as setAppBudget, b as loadApp, c as installApp, d as updateApp, f as addRegistry, h as removeRegistry, i as resolveAppConfig, n as createServer, o as exportApp, s as importApp, t as Store, u as removeApp } from "./store-dipRcfKX.mjs";
 import { createRequire } from "node:module";
 import { APP_NAME_PATTERN, AppSdkError } from "@alashi/apps-sdk";
 import { mkdir, readFile, readdir, writeFile } from "node:fs/promises";