@jskit-ai/assistant-core 0.2.6 → 0.2.8

package/examples/conversation/package.json

@@ -8,14 +8,14 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.2.6",
-    "@jskit-ai/http-runtime": "0.2.3",
-    "@jskit-ai/kernel": "0.2.3",
+    "@jskit-ai/assistant-core": "0.2.8",
+    "@jskit-ai/http-runtime": "0.2.4",
+    "@jskit-ai/kernel": "0.2.4",
     "@mdi/js": "^7.4.47",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0",
-    "@jskit-ai/connectors-core": "0.2.3",
-    "@jskit-ai/connectors-catalog": "0.2.3"
+    "@jskit-ai/connectors-core": "0.2.4",
+    "@jskit-ai/connectors-catalog": "0.2.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-core",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -8,6 +8,7 @@
   "exports": {
     "./client": "./src/client/index.js",
     "./server": "./src/server/index.js",
+    "./server/types": "./src/server/types.js",
     "./shared": "./src/shared/index.js",
     "./client/conversation": "./src/client/conversation/index.js",
     "./server/codex-events": "./src/server/hosts/codexEvents.js",
@@ -35,10 +36,11 @@
     "./testing/native-opencode": "./src/testing/nativeOpenCode.js",
     "./server/codex-client": "./src/server/conversation/codexClient.js",
     "./client/conversation-submit": "./src/client/conversation/submitText.js",
+    "./client/types": "./src/client/types.js",
     "./locales/en.json": "./locales/en.json"
   },
   "dependencies": {
-    "@ai-sdk/anthropic": "^4.0.53",
+    "@ai-sdk/anthropic": "^4.0.93",
     "@ai-sdk/cerebras": "^3.0.48",
     "@ai-sdk/google": "^4.0.70",
     "@ai-sdk/groq": "^4.0.41",
@@ -48,18 +50,19 @@
     "@ai-sdk/perplexity": "^4.0.43",
     "@ai-sdk/togetherai": "^3.0.49",
     "@ai-sdk/xai": "^4.0.58",
-    "@jskit-ai/resource-core": "0.1.194",
-    "@jskit-ai/resource-crud-core": "0.1.194",
+    "@jskit-ai/agent": "0.1.0",
+    "@jskit-ai/resource-core": "0.1.195",
+    "@jskit-ai/resource-crud-core": "0.1.195",
     "@mdi/js": "^7.4.47",
     "@openrouter/ai-sdk-provider": "^3.0.0",
-    "ai": "^7.0.101",
+    "ai": "^7.0.152",
     "json-rest-schema": "^1.0.17",
     "openai": "^6.22.0",
     "ws": "^8.20.1"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.2.3",
-    "@jskit-ai/kernel": "0.2.3",
+    "@jskit-ai/http-runtime": "0.2.4",
+    "@jskit-ai/kernel": "0.2.4",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0"
   },
@@ -123,6 +126,10 @@
             "subpath": "./server",
             "summary": "Framework integration: Exports reusable assistant AI/provider and NDJSON streaming helpers."
           },
+          {
+            "subpath": "./server/types",
+            "summary": "Framework integration: Types of the conversation runtime, tool catalogue and AI clients, and the contracts of what an application passes the runtime."
+          },
           {
             "subpath": "./shared",
             "summary": "Framework integration: Exports reusable assistant validators, path helpers, query keys, and stream/settings events."
@@ -198,6 +205,10 @@
           {
             "subpath": "./client/conversation-submit",
             "summary": "Optional UI: Original text submission helper forwards companion text through the application draft and canonical send action; also exported by ./client/conversation."
+          },
+          {
+            "subpath": "./client/types",
+            "summary": "Framework integration: Types of the conversation adapter, actions, attachments, suggestions, questions, message delivery and API client that client code receives."
           }
         ],
         "capabilities": []

package/src/client/browser.js

@@ -0,0 +1,21 @@
+// The browser's timers and animation frames, for client code that also runs where there is no window (server
+// rendering and node tests). Without one, timers and frames are not scheduled and each caller takes its own path.
+
+/** Whether the page has a window whose `name` (a timer, frame or media function) can be called. */
+function hasWindowFunction(name) {
+  // readable-check: allow method-probe - platform object: window exists only in a browser
+  return typeof window !== "undefined" && typeof window[name] === "function";
+}
+
+/** Resolves after the next animation frame, or at once without a window. */
+function waitForLayoutFrame() {
+  if (!hasWindowFunction("requestAnimationFrame")) {
+    return Promise.resolve();
+  }
+
+  return new Promise((resolve) => {
+    window.requestAnimationFrame(resolve);
+  });
+}
+
+export { hasWindowFunction, waitForLayoutFrame };

package/src/client/conversation/AssistantAttachmentQueue.vue

@@ -123,16 +123,29 @@
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
 import {
-  mdiAlertCircleOutline,
-  mdiCheckCircleOutline,
   mdiClose,
   mdiCloseCircleOutline,
-  mdiFileOutline,
   mdiRefresh
 } from "@mdi/js";
 
+import { hasWindowFunction } from "../browser.js";
 import { useJskitText } from "../i18n.js";
 import { attachmentSizeText } from "./attachmentSize.js";
+import {
+  activePhases,
+  itemBytesLabel,
+  itemCancelable,
+  itemColor,
+  itemIcon,
+  itemKey,
+  itemName,
+  itemPercent,
+  itemPhase,
+  itemProgressIndeterminate,
+  itemProgressValue,
+  itemProgressVisible,
+  itemStatusLabel
+} from "./attachmentQueueItems.js";
 
 const { t } = useJskitText();
 
@@ -154,7 +167,6 @@ const props = defineProps({
   }
 });
 
-const activePhases = new Set(["queued", "preparing", "uploading", "delivering"]);
 const queueRoot = ref(null);
 const reducedMotion = ref(false);
 const actionElements = new Map();
@@ -221,93 +233,16 @@ const announcement = computed(() => {
   return messages.join(" ");
 });
 
-function itemKey(item = {}) {
-  return String(item.clientId || item.id || item.attachmentId || item.fileName || "attachment");
-}
-
-function itemName(item = {}) {
-  return String(item.fileName || item.file?.name || t("jskit.assistant.attachments.unnamed"));
-}
-
-function itemPhase(item = {}) {
-  return String(item.phase || item.status || "queued");
-}
-
-function itemPercent(item = {}) {
-  if (itemPhase(item) === "ready") {
-    return 100;
-  }
-  if (itemPhase(item) === "delivering") {
-    return 100;
-  }
-  if (itemPhase(item) === "queued") {
-    return 0;
-  }
-  const progressValue = item.percent ?? item.progress;
-  const directPercent = progressValue === null || progressValue === undefined || progressValue === ""
-    ? null
-    : Number(progressValue);
-  if (directPercent !== null && Number.isFinite(directPercent)) {
-    return Math.min(100, Math.max(0, Math.round(directPercent)));
-  }
-  const size = Number(item.size) || 0;
-  return size > 0 && Number(item.bytesSent) > 0
-    ? Math.min(100, Math.max(0, Math.round(((Number(item.bytesSent) || 0) / size) * 100)))
-    : null;
-}
-
-function itemProgressVisible(item = {}) {
-  return activePhases.has(itemPhase(item));
-}
-
-function itemProgressIndeterminate(item = {}) {
-  return itemProgressVisible(item) && itemPercent(item) === null;
-}
-
-function itemProgressValue(item = {}) {
-  return itemPercent(item) ?? 0;
-}
-
 function itemProgressStationary(item = {}) {
   return reducedMotion.value && itemProgressVisible(item) && itemPercent(item) === null;
 }
 
-function itemBytesLabel(item = {}) {
-  const size = Math.max(0, Number(item.size) || 0);
-  const sent = Math.min(Math.max(0, Number(item.bytesSent) || 0), size);
-  const percent = itemPercent(item);
-  return percent === null
-    ? t("jskit.assistant.attachments.bytes", { sent: attachmentSizeText(sent), size: attachmentSizeText(size) })
-    : t("jskit.assistant.attachments.bytesPercent", { sent: attachmentSizeText(sent), size: attachmentSizeText(size), percent });
-}
-
-function itemStatusLabel(item = {}) {
-  const labels = {
-    cancelled: "jskit.assistant.attachments.status.cancelled",
-    delivering: "jskit.assistant.attachments.status.delivering",
-    failed: item.failureStage === "preparing"
-      ? "jskit.assistant.attachments.status.preparationFailed"
-      : item.failureStage === "handoff"
-        ? "jskit.assistant.attachments.status.sendingFailed"
-        : "jskit.assistant.attachments.status.uploadFailed",
-    preparing: "jskit.assistant.attachments.status.preparing",
-    queued: "jskit.assistant.attachments.status.queued",
-    ready: "jskit.assistant.attachments.status.ready",
-    uploading: "jskit.assistant.attachments.status.uploading"
-  };
-  return t(Object.hasOwn(labels, itemPhase(item)) ? labels[itemPhase(item)] : "jskit.assistant.attachments.status.queued");
-}
-
-function itemCancelable(item = {}) {
-  return ["preparing", "queued", "uploading"].includes(itemPhase(item));
-}
-
 function actionKey(item = {}, action = "") {
   return `${itemKey(item)}:${action}`;
 }
 
 function actionElement(element = null) {
-  return element?.$el || element || null;
+  return element?.$el || null;
 }
 
 function setActionElement(item = {}, action = "", element = null) {
@@ -323,7 +258,7 @@ function focusItemAction(item = {}) {
   for (const action of ["cancel", "retry", "remove"]) {
     const target = actionElement(actionElements.get(actionKey(item, action)));
     if (target && !target.disabled) {
-      target.focus?.();
+      target.focus();
       return true;
     }
   }
@@ -344,51 +279,33 @@ async function handleAction(action, item, index) {
   emit("focus-input");
 }
 
-function itemIcon(item = {}) {
-  if (itemPhase(item) === "ready") {
-    return mdiCheckCircleOutline;
-  }
-  if (itemPhase(item) === "failed") {
-    return mdiAlertCircleOutline;
-  }
-  return mdiFileOutline;
-}
-
-function itemColor(item = {}) {
-  if (itemPhase(item) === "ready") {
-    return "success";
-  }
-  if (itemPhase(item) === "failed") {
-    return "error";
-  }
-  return "primary";
-}
-
 function updateReducedMotionPreference() {
   reducedMotion.value = reducedMotionMediaQuery?.matches === true;
 }
 
-if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+if (hasWindowFunction("matchMedia")) {
   reducedMotionMediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
   updateReducedMotionPreference();
 }
+// readable-check: allow method-probe - platform object: an older browser's media query has addListener() in place of addEventListener()
+const mediaQueryDispatchesEvents = typeof reducedMotionMediaQuery?.addEventListener === "function";
 
 onMounted(() => {
   if (!reducedMotionMediaQuery) {
     return;
   }
-  if (typeof reducedMotionMediaQuery.addEventListener === "function") {
+  if (mediaQueryDispatchesEvents) {
     reducedMotionMediaQuery.addEventListener("change", updateReducedMotionPreference);
   } else {
-    reducedMotionMediaQuery.addListener?.(updateReducedMotionPreference);
+    reducedMotionMediaQuery.addListener(updateReducedMotionPreference);
   }
 });
 
 onBeforeUnmount(() => {
-  if (typeof reducedMotionMediaQuery?.removeEventListener === "function") {
+  if (mediaQueryDispatchesEvents) {
     reducedMotionMediaQuery.removeEventListener("change", updateReducedMotionPreference);
   } else {
-    reducedMotionMediaQuery?.removeListener?.(updateReducedMotionPreference);
+    reducedMotionMediaQuery?.removeListener(updateReducedMotionPreference);
   }
   reducedMotionMediaQuery = null;
 });

package/src/client/conversation/AssistantComposerActions.vue

@@ -30,7 +30,7 @@ const { t } = useJskitText();
 defineProps({ state: { type: Object, required: true } });
 const emit = defineEmits(["submit", "stop"]);
 const sendButton = ref(null);
-defineExpose({ focus() { (sendButton.value?.$el || sendButton.value)?.focus?.(); } });
+defineExpose({ focus() { sendButton.value?.$el.focus(); } });
 </script>
 <style scoped>
 .assistant-composer-actions, .assistant-composer-actions__tools, .assistant-composer-actions__delivery {

package/src/client/conversation/AssistantConversationElement.vue

@@ -37,6 +37,7 @@
         </div>
       </div>
     </section>
+    <!-- readable-check: allow optional-call - optional operation: an adapter without loadMore, reload, checkDelivery or openLink offers no older history, reload, delivery check or link handling -->
     <AssistantTranscript
       v-bind="conversation" :preview-message="adapter.conversation.previewMessage || null" :working="working" class="assistant-conversation__transcript"
       @load-more="adapter.actions?.loadMore?.($event)" @reload="adapter.actions?.reload?.()"
@@ -96,9 +97,11 @@
         @submit="submit" @tab-to-submit="delivery?.focus()"
         @focus="adapter.suggestions?.focus()" @blur="adapter.suggestions?.blur()"
         @escape="dismissSuggestions"
-        @dragenter="attachmentEvent('handleDragEnter', $event)" @dragover="attachmentEvent('handleDragOver', $event)"
-        @dragleave="attachmentEvent('handleDragLeave', $event)" @drop="attachmentEvent('handleDrop', $event)"
-        @paste="attachmentEvent('handlePaste', $event)"
+        @dragenter="attachmentsEnabled && adapter.attachments.handleDragEnter($event)"
+        @dragover="attachmentsEnabled && adapter.attachments.handleDragOver($event)"
+        @dragleave="attachmentsEnabled && adapter.attachments.handleDragLeave($event)"
+        @drop="attachmentsEnabled && adapter.attachments.handleDrop($event)"
+        @paste="attachmentsEnabled && adapter.attachments.handlePaste($event)"
       >
         <template v-if="attachmentsEnabled" #attachments>
           <input ref="fileInput" hidden multiple type="file" :accept="adapter.attachments.accept" :disabled="!adapter.attachments.canAddFiles" @change="attachSelectedFiles">
@@ -119,6 +122,7 @@
         </template>
         <template #footer>
           <AssistantComposerActions ref="delivery" :state="{ ...adapter.composer, pending, canSend }" @submit="submit" @stop="stop">
+            <!-- readable-check: allow optional-call - optional operation: model choices without a provider, model or variant selector, or without reload, ignore that change -->
             <AssistantModelControl
               v-if="adapter.models && adapter.models.enabled !== false" v-model="modelsOpen" v-bind="adapter.models"
               @select-provider="adapter.models.selectProvider?.($event)" @select-model="adapter.models.selectModel?.($event)"
@@ -163,11 +167,12 @@ import AssistantGoalControl from "./AssistantGoalControl.vue";
 import AssistantAttachmentQueue from "./AssistantAttachmentQueue.vue";
 import AssistantQuestionInputs from "./AssistantQuestionInputs.vue";
 import AssistantModelControl from "./AssistantModelControl.vue";
+import { displayedConversation } from "./conversationDisplay.js";
 import { useJskitText } from "../i18n.js";
 
 const { t } = useJskitText();
 const props = defineProps({
-  adapter: { type: Object, required: true },
+  adapter: { type: /** @type {import("vue").PropType<import("../types.js").AssistantConversationAdapter>} */ (Object), required: true },
   avatarSize: { type: String, default: "compact", validator: (value) => ["hidden", "compact", "standard", "large"].includes(value) },
   label: { type: String, default: undefined },
   configuration: { type: Object, default: () => ({}) },
@@ -247,52 +252,9 @@ const fileInput = ref(null);
 const modelsOpen = ref(false);
 const delivery = ref(null);
 const statusId = `assistant-status-${useId()}`;
-const conversation = computed(() => {
-  const saved = props.adapter.conversation;
-  if (!props.adapter.delivery && !saved.previewMessage && !saved.previewMessages?.length && !saved.interimReply) return saved;
-  const { previewMessage, previewMessages, interimReply, ...display } = saved;
-  let turns = props.adapter.delivery ? props.adapter.delivery.turns(saved.turns || []) : saved.turns || [];
-  if (interimReply?.text && interimReply.turnId) {
-    const assistant = { ...interimReply, messageId: interimReply.id, role: "assistant" };
-    turns = turns.map(turn => turn.turnId !== interimReply.turnId ? turn : {
-      ...turn, assistant,
-      commentary: (turn.commentary || []).filter(message =>
-        (message.outputId || message.messageId) !== (interimReply.outputId || interimReply.id)),
-      ...(Array.isArray(turn.messages) ? { messages: turn.messages.filter(message =>
-        message.role !== "assistant" &&
-        (message.outputId || message.messageId) !== (interimReply.outputId || interimReply.id)).concat(assistant) } : {})
-    });
-  }
-  // This list projects existing capture/pending owners; it never queues delivery.
-  const previews = Array.isArray(previewMessages) ? previewMessages : previewMessage ? [previewMessage] : [];
-  for (const preview of previews) {
-    const messageId = String(preview?.messageId || preview?.id || "").trim();
-    const localDelivery = messageId && props.adapter.delivery?.find?.(messageId);
-    if ((!localDelivery || localDelivery.status === "failed") && preview?.actions?.send) {
-      // Keep one unadmitted bubble and its real status until explicit Edit/discard.
-      // A receipt:false user row is not acknowledgement of the pending words.
-      turns = turns.map(turn => {
-        const failed = turn.optimistic?.id === messageId && turn.optimistic.status === "failed";
-        const unadmitted = turn.user?.receipt === false && String(turn.user.messageId || turn.user.id || "") === messageId;
-        if (!failed && !unadmitted) return turn;
-        return { ...turn, preview: true, previewMessage: preview, user: { ...turn.user, text: String(preview.text || "") } };
-      });
-    }
-    const alreadyShown = messageId && (localDelivery || turns.some(turn => [
-      turn.system, turn.user, turn.assistant, ...(turn.thinking || []), ...(turn.commentary || []), ...(turn.messages || [])
-    ].some(message => String(message?.messageId || message?.id || "") === messageId &&
-      (message.receipt !== false || turn.preview))));
-    if (messageId && (preview?.text || preview?.actions?.editing) && !alreadyShown) {
-      const user = { messageId, role: "user", text: String(preview.text || "") };
-      turns = [...turns, { turnId: messageId, user, messages: [user], preview: true, previewMessage: preview,
-        optimistic: { id: messageId, status: "pending" } }];
-    }
-  }
-  // Transcription and interim replies are display only. The receipt watcher
-  // receives canonical turns, never these presentation or delivery overlays.
-  return { ...display, turns, welcomeMessage: turns.length ? "" : saved.welcomeMessage };
-});
+const conversation = computed(() => displayedConversation(props.adapter));
 watch([() => props.adapter.delivery, () => props.adapter.conversation.turns], ([controller, turns]) => {
+  // readable-check: allow optional-collaborator - optional operation: an adapter without a delivery sends through its own actions
   controller?.reconcile(turns || []);
 }, { immediate: true });
 const pending = computed(() => Boolean(props.adapter.delivery?.state.sending || props.adapter.composer?.pending));
@@ -318,9 +280,11 @@ const canSend = computed(() => (
 async function resend(id) {
   if (props.adapter.actions?.resend) return props.adapter.actions.resend(id);
   const controller = props.adapter.delivery;
+  // readable-check: allow optional-collaborator - optional operation: an adapter without a delivery sends through its own actions
   const payload = controller?.find(id)?.payload;
   const attachments = props.adapter.attachments;
   try {
+    // readable-check: allow optional-collaborator - optional operation: an adapter without a delivery sends through its own actions
     const response = await controller?.resend(id, { queue: queueWhileSending.value });
     clearAcceptedAttachments(response, payload, attachments);
     return response;
@@ -343,9 +307,6 @@ function edit(id) {
   const draft = props.adapter.delivery?.edit(id, props.adapter.composer?.draft || "");
   if (draft != null) { props.adapter.actions.setDraft(draft); input.value?.focus(); }
 }
-function attachmentEvent(method, event) {
-  if (attachmentsEnabled.value) return props.adapter.attachments[method]?.(event);
-}
 function attachSelectedFiles(event) {
   const files = Array.from(event.target.files || []);
   event.target.value = "";
@@ -397,6 +358,7 @@ function stop() {
 }
 function updateConfiguration(value) {
   if (props.configurationMode !== "editable" || pending.value) return;
+  // readable-check: allow optional-call - optional operation: an adapter without updateConfiguration keeps its configuration fixed
   return props.adapter.actions?.updateConfiguration?.(value);
 }
 defineExpose({ focus: () => input.value?.focus(), submit, stop });

package/src/client/conversation/AssistantGoalControl.vue

@@ -8,16 +8,21 @@ const STATUS_KEYS = Object.freeze({
   usageLimited: "jskit.assistant.goal.usageLimited", budgetLimited: "jskit.assistant.goal.budgetLimited", complete: "jskit.assistant.goal.complete"
 });
 
-const props = defineProps({ state: { type: Object, default: null } });
+const props = defineProps({
+  state: { type: /** @type {import("vue").PropType<import("../types.js").AssistantGoalState>} */ (Object), required: true }
+});
 const open = ref(false);
 const objective = ref("");
 const tokenBudget = ref("");
 const now = ref(Date.now());
-const goal = computed(() => props.state?.loading || props.state?.available === false ? null : props.state?.goal);
+const goal = computed(() => props.state.loading || props.state.available === false ? null : props.state.goal);
 const running = computed(() => goal.value?.status === "active");
-const working = computed(() => running.value && props.state?.working === true);
-const label = computed(() => props.state?.loading ? t("jskit.assistant.goal.loading") : props.state?.available === false ? t("jskit.assistant.goal.unavailable")
-  : t(Object.hasOwn(STATUS_KEYS, goal.value?.status ?? "") ? STATUS_KEYS[goal.value.status] : "jskit.assistant.goal.set"));
+const working = computed(() => running.value && props.state.working === true);
+// A Start stays Starting… until the server's goal shows it, even while closed.
+const starting = computed(() => props.state.action === "set");
+const label = computed(() => props.state.loading ? t("jskit.assistant.goal.loading") : props.state.available === false ? t("jskit.assistant.goal.unavailable")
+  : starting.value ? t("jskit.assistant.goal.starting")
+    : t(Object.hasOwn(STATUS_KEYS, goal.value?.status ?? "") ? STATUS_KEYS[goal.value.status] : "jskit.assistant.goal.set"));
 const nativeElapsed = computed(() => Number.isFinite(goal.value?.elapsedSeconds));
 const createdAt = computed(() => typeof goal.value?.createdAt === "string" ? Date.parse(goal.value.createdAt) : NaN);
 const elapsedLabel = computed(() => nativeElapsed.value ? t("jskit.assistant.goal.runningTime") : t("jskit.assistant.goal.elapsedSinceStart"));
@@ -40,18 +45,19 @@ const elapsed = computed(() => {
   const minutes = Math.floor(total / 60);
   return minutes < 60 ? `${minutes}:${seconds}` : `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, "0")}:${seconds}`;
 });
-const canSet = computed(() => !props.state?.loading && props.state?.available !== false && typeof props.state?.set === "function" && (!goal.value || goal.value.status === "complete"));
-const validBudget = computed(() => props.state?.tokenBudgetSupported === false || tokenBudget.value === "" || (Number.isSafeInteger(Number(tokenBudget.value)) && Number(tokenBudget.value) > 0));
+// readable-check: allow method-probe - optional operation: a goal state without set() does not allow starting a goal, so Start stays disabled
+const canSet = computed(() => !props.state.loading && props.state.available !== false && typeof props.state.set === "function" && (!goal.value || goal.value.status === "complete"));
+const validBudget = computed(() => props.state.tokenBudgetSupported === false || tokenBudget.value === "" || (Number.isSafeInteger(Number(tokenBudget.value)) && Number(tokenBudget.value) > 0));
 let timer;
-onMounted(() => watch(() => [props.state?.enabled, clockRunning.value, goal.value?.elapsedSeconds, goal.value?.sampledAt, createdAt.value], () => {
+onMounted(() => watch(() => [props.state.enabled, clockRunning.value, goal.value?.elapsedSeconds, goal.value?.sampledAt, createdAt.value], () => {
   clearInterval(timer);
   now.value = Date.now();
-  if (props.state?.enabled !== false && clockRunning.value) {
+  if (props.state.enabled !== false && clockRunning.value) {
     timer = setInterval(() => { now.value = Date.now(); }, 1000);
   }
 }, { immediate: true, flush: "sync" }));
 onScopeDispose(() => clearInterval(timer));
-watch(() => props.state?.enabled, enabled => { if (enabled === false) open.value = false; });
+watch(() => props.state.enabled, enabled => { if (enabled === false) open.value = false; });
 async function setGoal() {
   if (!canSet.value || props.state.pending || !objective.value.trim() || !validBudget.value) return;
   const result = await props.state.set({ objective: objective.value.trim(), ...(props.state.tokenBudgetSupported === false || tokenBudget.value === "" ? {} : { tokenBudget: Number(tokenBudget.value) }) });
@@ -64,7 +70,7 @@ async function setGoal() {
     <template #activator="{ props: menuProps }">
       <v-btn v-bind="menuProps" class="assistant-goal" size="small" variant="text" :aria-label="label" :title="[label, elapsedText, goal?.objective].filter(Boolean).join('\n')">
         <span v-if="goal" class="assistant-goal__light" :class="{ 'assistant-goal__light--running': running, 'assistant-goal__light--working': working, 'assistant-goal__light--paused': goal.status === 'paused' }" aria-hidden="true" />
-        <span class="assistant-goal__label">{{ state.loading ? t('jskit.assistant.goal.loading') : state.available === false ? t('jskit.assistant.goal.unavailable') : goal ? t('jskit.assistant.goal.goal') : t('jskit.assistant.goal.set') }}</span>
+        <span class="assistant-goal__label">{{ state.loading ? t('jskit.assistant.goal.loading') : state.available === false ? t('jskit.assistant.goal.unavailable') : starting ? t('jskit.assistant.goal.starting') : goal ? t('jskit.assistant.goal.goal') : t('jskit.assistant.goal.set') }}</span>
         <span v-if="elapsed" class="assistant-goal__elapsed" aria-hidden="true">{{ elapsed }}</span>
       </v-btn>
     </template>
@@ -81,7 +87,7 @@ async function setGoal() {
       <form v-if="canSet" class="assistant-goal__form mt-2" @submit.prevent="setGoal">
         <v-textarea v-model="objective" :label="t('jskit.assistant.goal.objective')" rows="2" max-rows="4" maxlength="4000" auto-grow :disabled="state.pending" hide-details />
         <v-text-field v-if="state.tokenBudgetSupported !== false" v-model="tokenBudget" :label="t('jskit.assistant.goal.tokenBudget')" type="number" min="1" step="1" :disabled="state.pending" :error="!validBudget" hide-details />
-        <v-btn type="submit" size="small" :disabled="state.pending || !objective.trim() || !validBudget">{{ state.action === 'set' ? t('jskit.assistant.goal.starting') : t('jskit.assistant.goal.start') }}</v-btn>
+        <v-btn type="submit" size="small" :disabled="state.pending || !objective.trim() || !validBudget">{{ starting ? t('jskit.assistant.goal.starting') : t('jskit.assistant.goal.start') }}</v-btn>
       </form>
       <p v-if="state.error" role="alert" class="text-error text-body-small mt-2">{{ state.error }}</p>
       <slot :goal="goal" />

package/src/client/conversation/AssistantPromptInput.vue

@@ -77,7 +77,8 @@
 </template>
 
 <script setup>
-import { computed, onBeforeUnmount, onMounted, ref, useId, watch } from "vue";
+import { computed, ref, useId } from "vue";
+import { useTextareaAutoGrow } from "./useTextareaAutoGrow.js";
 const emit = defineEmits(["blur", "escape", "focus", "input-activity", "submit", "tab-to-submit", "update:modelValue", "paste"]);
 const props = defineProps({
   submitOnModifierEnter: { type: Boolean, default: false },
@@ -155,9 +156,6 @@ 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)
     ? props.errorMessages
@@ -177,55 +175,10 @@ const textareaAriaLabel = computed(() => (
     : undefined
 ));
 
-function resizeTextarea() {
-  if (!props.autoGrow) {
-    return;
-  }
-  const textarea = textareaRef.value;
-  if (!textarea) {
-    return;
-  }
-  if (!props.placeholderAffectsHeight && !textarea.value) {
-    return;
-  }
-  const style = window.getComputedStyle(textarea);
-  const minHeight = Number.parseFloat(style.minHeight) || 0;
-  const maxHeight = Number.parseFloat(style.maxHeight) || Number.POSITIVE_INFINITY;
-  textarea.style.height = "auto";
-  const contentHeight = Math.max(textarea.scrollHeight, minHeight);
-  const targetHeight = Math.min(contentHeight, maxHeight);
-  textarea.style.height = `${targetHeight}px`;
-  textarea.style.overflowY = contentHeight > targetHeight + 1 ? "auto" : "hidden";
-}
+const { preserveHeightForNextModelValue, queueResizeTextarea, releasePreservedHeight } = useTextareaAutoGrow(props, textareaRef);
 
-function queueResizeTextarea() {
-  if (!props.autoGrow || typeof window === "undefined") {
-    return;
-  }
-  if (resizeFrame) return;
-  resizeFrame = window.requestAnimationFrame(() => {
-    resizeFrame = 0;
-    resizeTextarea();
-  });
-}
-
-function preserveHeightForNextModelValue() {
-  const textarea = textareaRef.value;
-  if (!props.autoGrow || !textarea) {
-    return false;
-  }
-  if (resizeFrame) {
-    window.cancelAnimationFrame(resizeFrame);
-    resizeFrame = 0;
-  }
-  preserveHeightForNextModelValueChange = true;
-  textarea.style.height = `${textarea.getBoundingClientRect().height}px`;
-  textarea.style.overflowY = "auto";
-  return true;
-}
-
-function handleTextareaInput(event = {}) {
-  preserveHeightForNextModelValueChange = false;
+function handleTextareaInput(event) {
+  releasePreservedHeight();
   emit("input-activity");
   emit("update:modelValue", String(event?.target?.value || ""));
   queueResizeTextarea();
@@ -289,47 +242,9 @@ function handleTextareaKeydown(event = {}) {
 }
 
 function focusTextarea(options = { preventScroll: true }) {
-  textareaRef.value?.focus?.(options);
+  textareaRef.value?.focus(options);
 }
 
-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;
-  }
-});
-
-watch(() => [
-  props.autoGrow,
-  props.modelValue,
-  props.placeholder,
-  props.placeholderAffectsHeight,
-  props.rows,
-  props.density
-], (values, previousValues = []) => {
-  const modelValueChanged = values[1] !== previousValues[1];
-  if (preserveHeightForNextModelValueChange && modelValueChanged) {
-    preserveHeightForNextModelValueChange = false;
-    return;
-  }
-  queueResizeTextarea();
-}, { flush: "post" });
-
 defineExpose({ inputElement: textareaRef, focus: focusTextarea, preserveHeightForNextModelValue, queueResizeTextarea });
 </script>
 <style scoped>