@jskit-ai/assistant-core 0.1.167 → 0.1.168

package/examples/conversation/package.json

@@ -8,7 +8,7 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.1.167",
+    "@jskit-ai/assistant-core": "0.1.168",
     "@jskit-ai/http-runtime": "0.1.189",
     "@jskit-ai/kernel": "0.1.191",
     "@mdi/js": "^7.4.47",

package/fixtures/responsive-assistant/ConversationFixture.vue

@@ -0,0 +1,45 @@
+<script setup>
+import { computed, reactive, ref } from "vue";
+import AssistantConversationElement from "../../src/client/conversation/AssistantConversationElement.vue";
+const phase = ref("idle");
+const draft = ref("");
+const narrow = ref(false);
+const submissions = ref(0);
+const adapter = reactive({
+  conversation: { turns: [], visible: true, scrollKey: "fixture", welcomeMessage: "Composer responsiveness fixture" },
+  composer: {
+    draft,
+    rows: 2,
+    submitOnEnter: true,
+    canSend: computed(() => Boolean(draft.value.trim()) && ["idle", "active", "stopped"].includes(phase.value)),
+    canStop: computed(() => ["active", "stopping"].includes(phase.value)),
+    stopPending: computed(() => phase.value === "stopping"),
+    submitLabel: computed(() => phase.value === "reconnecting" ? "Reconnecting…" : "Send")
+  },
+  actions: {
+    setDraft(value) { draft.value = value; },
+    submit() { submissions.value += 1; draft.value = ""; phase.value = "active"; },
+    stop() { phase.value = "stopping"; }
+  }
+});
+</script>
+<template>
+  <v-app>
+    <v-main>
+      <div class="controls">
+        <button v-for="state in ['idle', 'active', 'reconnecting', 'stopping', 'stopped']" :key="state" @click="phase = state">External {{ state }}</button>
+        <button @click="narrow = !narrow">Resize pane</button>
+        <output>{{ phase }}; submitted {{ submissions }}</output>
+      </div>
+      <main class="fixture" :class="{ narrow }">
+        <AssistantConversationElement :adapter="adapter" />
+      </main>
+    </v-main>
+  </v-app>
+</template>
+<style scoped>
+.controls { display: flex; flex-wrap: wrap; gap: 12px; padding: 12px; }
+.controls button { border: 1px solid; padding: 4px; }
+.fixture { height: 70vh; width: min(900px, 100%); margin: auto; }
+.fixture.narrow { width: min(320px, 100%); }
+</style>

package/fixtures/responsive-assistant/main.js

@@ -5,6 +5,7 @@ import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
 import { aliases as mdiAliases, mdi } from "vuetify/iconsets/mdi-svg";
 import App from "./App.vue";
+import ConversationFixture from "./ConversationFixture.vue";
 
 const vuetify = createVuetify({
   components,
@@ -19,6 +20,6 @@ const vuetify = createVuetify({
   }
 });
 
-createApp(App)
+createApp(new URLSearchParams(location.search).has("conversation") ? ConversationFixture : App)
   .use(vuetify)
   .mount("#app");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-core",
-  "version": "0.1.167",
+  "version": "0.1.168",
   "type": "module",
   "scripts": {
     "test": "node --test"

package/src/client/conversation/AssistantPromptInput.vue

@@ -156,6 +156,7 @@ const props = defineProps({
 const textareaRef = ref(null);
 const textareaId = `assistant-prompt-${useId()}`;
 let resizeFrame = 0;
+let resizeObserver = null;
 let preserveHeightForNextModelValueChange = false;
 const combinedErrorMessages = computed(() => {
   return Array.isArray(props.errorMessages)
@@ -201,9 +202,7 @@ function queueResizeTextarea() {
   if (!props.autoGrow || typeof window === "undefined") {
     return;
   }
-  if (resizeFrame) {
-    window.cancelAnimationFrame(resizeFrame);
-  }
+  if (resizeFrame) return;
   resizeFrame = window.requestAnimationFrame(() => {
     resizeFrame = 0;
     resizeTextarea();
@@ -241,6 +240,7 @@ function handleTextareaBlur(event = {}) {
 }
 
 function handleTextareaKeydown(event = {}) {
+  if (props.disabled || event.isComposing) return;
   if (event.key === "Escape") {
     emit("escape", event);
     return;
@@ -292,9 +292,22 @@ function focusTextarea(options = { preventScroll: true }) {
   textareaRef.value?.focus?.(options);
 }
 
-onMounted(queueResizeTextarea);
+onMounted(() => {
+  queueResizeTextarea();
+  let lastWidth = 0;
+  resizeObserver = new ResizeObserver(([entry]) => {
+    // Height changes are our own output. Only width changes need another layout.
+    const width = entry.contentRect.width;
+    if (width !== lastWidth) {
+      lastWidth = width;
+      queueResizeTextarea();
+    }
+  });
+  resizeObserver.observe(textareaRef.value);
+});
 
 onBeforeUnmount(() => {
+  resizeObserver?.disconnect();
   if (resizeFrame && typeof window !== "undefined") {
     window.cancelAnimationFrame(resizeFrame);
     resizeFrame = 0;
@@ -306,7 +319,8 @@ watch(() => [
   props.modelValue,
   props.placeholder,
   props.placeholderAffectsHeight,
-  props.rows
+  props.rows,
+  props.density
 ], (values, previousValues = []) => {
   const modelValueChanged = values[1] !== previousValues[1];
   if (preserveHeightForNextModelValueChange && modelValueChanged) {
@@ -314,7 +328,7 @@ watch(() => [
     return;
   }
   queueResizeTextarea();
-});
+}, { flush: "post" });
 
 defineExpose({ inputElement: textareaRef, focus: focusTextarea, preserveHeightForNextModelValue, queueResizeTextarea });
 </script>

package/src/server/conversation/codexClient.js

@@ -51,6 +51,7 @@ class CodexAppServerJsonRpcClient {
   constructor({
     endpoint = "",
     maxMessageBytes = Number.POSITIVE_INFINITY,
+    onDisconnect = null,
     requestTimeoutMs = CODEX_APP_SERVER_REQUEST_TIMEOUT_MS,
     WebSocketImpl = WebSocket
   } = {}) {
@@ -60,6 +61,7 @@ class CodexAppServerJsonRpcClient {
       : Number.POSITIVE_INFINITY;
     this.requestTimeoutMs = normalizePositiveInteger(requestTimeoutMs, CODEX_APP_SERVER_REQUEST_TIMEOUT_MS);
     this.WebSocketImpl = WebSocketImpl;
+    this.onDisconnect = onDisconnect;
     this.nextRequestId = 1;
     this.notificationSubscribers = new Set();
     this.pendingRequests = new Map();
@@ -105,11 +107,16 @@ class CodexAppServerJsonRpcClient {
         callback(value);
       };
       cleanup.push(addSocketListener(socket, "open", () => {
-        if (this.socket === socket) {
-          this.connected = true;
+        if (this.socket !== socket) {
+          settle(reject, new Error("Codex connection was closed before it opened."));
+          return;
         }
+        this.connected = true;
         settle(resolve);
       }));
+      cleanup.push(addSocketListener(socket, "close", () => {
+        settle(reject, new Error("Codex connection closed before it opened."));
+      }));
       cleanup.push(addSocketListener(socket, "error", (error) => {
         if (this.socket === socket) {
           this.connected = false;
@@ -118,13 +125,14 @@ class CodexAppServerJsonRpcClient {
         settle(reject, error?.error || error);
       }));
     });
-    addSocketListener(socket, "message", (event) => this.handleMessage(event));
+    addSocketListener(socket, "message", (event) => {
+      if (this.socket === socket) this.handleMessage(event);
+    });
     addSocketListener(socket, "close", () => {
-      if (this.socket === socket) {
-        this.connected = false;
-        this.socket = null;
-      }
-      this.rejectPendingRequests(new Error("Codex app-server connection closed."));
+      if (this.socket === socket) this.disconnect(new Error("Codex app-server connection closed."));
+    });
+    addSocketListener(socket, "error", (event) => {
+      if (this.socket === socket) this.disconnect(event?.error || new Error("Codex app-server connection failed."));
     });
     return this;
   }
@@ -240,12 +248,15 @@ class CodexAppServerJsonRpcClient {
       if (text === null) {
         const error = new Error("Codex app-server message exceeded the configured transport limit.");
         error.code = "assistant_codex_app_server_message_too_large";
-        this.rejectPendingRequests(error);
-        this.close();
+        this.disconnect(error);
         return;
       }
       message = JSON.parse(text);
-    } catch {
+      if (!message || typeof message !== "object" || Array.isArray(message)) {
+        throw new TypeError("Codex JSON-RPC messages must be objects.");
+      }
+    } catch (error) {
+      this.disconnect(new Error("Codex app-server sent an unreadable message.", { cause: error }));
       return;
     }
     if (Object.hasOwn(message, "id") && message.method) {
@@ -316,6 +327,11 @@ class CodexAppServerJsonRpcClient {
     this.pendingRequests.clear();
   }
 
+  disconnect(error) {
+    this.close();
+    this.onDisconnect?.(error);
+  }
+
   close() {
     this.rejectPendingRequests(new Error("Codex app-server connection closed."));
     const socket = this.socket;

package/test/assistantScroll.browser.test.js

@@ -137,3 +137,50 @@ test("AssistantClientElement keeps long conversations scrollable across responsi
     await stopProcess(vite);
   }
 });
+
+test("conversation composer preserves typing and reacts to external state and pane resizing", {
+  skip: !RUN_BROWSER_TEST,
+  timeout: 60_000
+}, async () => {
+  const vite = await startViteFixture({ fixtureRoot: FIXTURE_ROOT });
+  const browser = await chromium.launch(createChromiumLaunchOptions());
+  try {
+    const page = await browser.newPage({ viewport: { width: 1365, height: 900 } });
+    await page.goto(`${vite.baseURL}/?conversation=1`);
+    const input = page.getByRole("textbox", { name: "Message AI assistant" });
+    const draft = "Keep this draft while the assistant changes state. This is a longer message to verify wrapping when the chat pane becomes narrower.";
+    await input.fill(draft);
+    await input.evaluate((element) => { element.focus(); element.setSelectionRange(10, 10); });
+    for (const phase of ["active", "reconnecting", "stopping", "stopped", "idle"]) {
+      // External events must not take focus like clicking a fixture button would.
+      await page.getByRole("button", { name: `External ${phase}`, exact: true }).evaluate((element) => element.click());
+      await expect(input).toHaveValue(draft);
+      await expect(input).toBeFocused();
+      await expect(input).toBeEnabled();
+      assert.equal(await input.evaluate((element) => element.selectionStart), 10);
+      const send = page.locator(".assistant-composer-actions__send");
+      if (["reconnecting", "stopping"].includes(phase)) await expect(send).toBeDisabled();
+      else await expect(send).toBeEnabled();
+      if (phase === "active") await expect(page.getByRole("button", { name: "Stop", exact: true })).toBeEnabled();
+      if (phase === "stopping") await expect(page.getByRole("button", { name: "Stopping…", exact: true })).toBeDisabled();
+      if (phase === "stopped") await expect(page.getByRole("button", { name: "Stop", exact: true })).toHaveCount(0);
+    }
+    const before = await input.evaluate((element) => element.clientHeight);
+    await page.getByRole("button", { name: "Resize pane" }).evaluate((element) => element.click());
+    await expect.poll(() => input.evaluate((element) => element.clientHeight)).toBeGreaterThan(before);
+    await input.dispatchEvent("keydown", { key: "Enter", isComposing: true });
+    await expect(input).toHaveValue(draft);
+    await input.press("Enter");
+    await expect(page.locator("output")).toHaveText("active; submitted 1");
+    await expect(input).toHaveValue("");
+    for (const width of [390, 800, 1224]) {
+      await page.setViewportSize({ width, height: 900 });
+      await input.fill(draft);
+      await expect(input).toBeVisible();
+      assert.ok(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth));
+    }
+  } finally {
+    await browser.close();
+    await stopProcess(vite);
+  }
+});

package/test/codexClient.test.js

@@ -0,0 +1,82 @@
+import assert from "node:assert/strict";
+import { EventEmitter } from "node:events";
+import test from "node:test";
+import { WebSocketServer } from "ws";
+import { CodexAppServerJsonRpcClient } from "../src/server/conversation/codexClient.js";
+
+test("unexpected WebSocket closure reports observation loss; explicit close does not", async () => {
+  const server = new WebSocketServer({ port: 0 });
+  const connected = new Promise((resolve) => server.once("connection", resolve));
+  const lost = Promise.withResolvers();
+  const errors = [];
+  const client = new CodexAppServerJsonRpcClient({
+    endpoint: `ws://127.0.0.1:${server.address().port}`,
+    onDisconnect(error) { errors.push(error); lost.resolve(); }
+  });
+  try {
+    await client.connect();
+    (await connected).terminate();
+    await lost.promise;
+    assert.equal(client.isOpen(), false);
+    assert.equal(errors.length, 1);
+    await client.connect();
+    client.close();
+    assert.equal(errors.length, 1);
+  } finally {
+    client.close();
+    for (const socket of server.clients) socket.terminate();
+    await new Promise((resolve) => server.close(resolve));
+  }
+});
+
+class Socket extends EventEmitter {
+  constructor() { super(); queueMicrotask(() => this.emit("open")); }
+  close() { this.emit("close"); }
+  send() {}
+}
+
+test("obsolete socket messages, errors and closure cannot affect its replacement", async () => {
+  const errors = [];
+  const notifications = [];
+  const client = new CodexAppServerJsonRpcClient({
+    endpoint: "ws://fixture", WebSocketImpl: Socket, onDisconnect: (error) => errors.push(error)
+  });
+  try {
+    await client.connect();
+    const old = client.socket;
+    client.close();
+    await client.connect();
+    client.subscribe((event) => notifications.push(event));
+    const pending = client.request("read");
+    old.emit("message", JSON.stringify({ id: 1, result: "obsolete" }));
+    old.emit("message", JSON.stringify({ method: "obsolete" }));
+    old.emit("error", new Error("obsolete"));
+    old.emit("close");
+    client.socket.emit("message", JSON.stringify({ id: 1, result: "current" }));
+    assert.equal(await pending, "current");
+    assert.deepEqual(notifications, []);
+    assert.deepEqual(errors, []);
+  } finally { client.close(); }
+});
+
+for (const message of ["invalid JSON", "null"]) test(`unreadable output (${message}) disconnects instead of silently losing observation`, async () => {
+  const errors = [];
+  const client = new CodexAppServerJsonRpcClient({
+    endpoint: "ws://fixture", WebSocketImpl: Socket, onDisconnect: (error) => errors.push(error)
+  });
+  await client.connect();
+  client.socket.emit("message", message);
+  assert.equal(errors.length, 1);
+  assert.equal(client.isOpen(), false);
+});
+
+ test("closing during connection rejects readiness instead of leaving it pending", async () => {
+  class PendingSocket extends EventEmitter {
+    close() { this.emit("close"); }
+  }
+  const client = new CodexAppServerJsonRpcClient({ endpoint: "ws://fixture", WebSocketImpl: PendingSocket });
+  const connected = client.connect();
+  client.close();
+  await assert.rejects(connected, /closed before it opened/);
+  assert.equal(client.isOpen(), false);
+});