@jskit-ai/assistant-core 0.1.171 → 0.1.173

package/examples/conversation/App.vue

@@ -6,17 +6,52 @@
         :adapter="adapter" :configuration="configuration"
         :configuration-mode="configurationMode" :configuration-fields="fields"
       >
-        <template #hints><p v-if="error" role="alert">{{ error }}</p></template>
+        <template #attachments="{ items }">
+          <AssistantMessageAttachments :attachments="items || []" preview-enabled @preview="selectedAttachment = $event" />
+        </template>
+        <template #composer-feedback><p v-if="error" role="alert">{{ error }}</p></template>
       </AssistantConversationElement>
+      <AssistantAttachmentPreview
+        v-if="selectedAttachment" :attachment="selectedAttachment" :download-url="attachmentUrl"
+        :preview-url="/\.(png|jpe?g|gif|webp)$/i.test(selectedAttachment.fileName) ? attachmentUrl : ''" @close="selectedAttachment = null"
+      />
     </main>
   </v-app>
 </template>
 <script setup>
 import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
-import { AssistantConversationElement } from "@jskit-ai/assistant-core/client/conversation";
+import { AssistantConversationElement, AssistantAttachmentPreview, AssistantMessageAttachments, useAssistantAttachments, useAssistantSuggestions } from "@jskit-ai/assistant-core/client/conversation";
 
 const turns = ref([]), draft = ref(""), loading = ref(true), pending = ref(false), error = ref("");
+const accepted = ref(false);
 const providerLabel = ref(""), configurationMode = ref("hidden"), configuration = ref({ tone: "concise" });
+const modelChoices = ref([]), integrationId = ref(""), draftIntegrationId = ref("");
+const selectedAttachment = ref(null);
+const attachmentUrl = computed(() => selectedAttachment.value ? `/api/attachments/${encodeURIComponent(selectedAttachment.value.attachmentId)}` : "");
+async function requestJson(url, options) {
+  const response = await fetch(url, options);
+  const result = await response.json();
+  if (!response.ok) throw new Error(result.error || "Request failed.");
+  return result;
+}
+const attachments = reactive(useAssistantAttachments({
+  sessionId: "example", maxBytes: 2_000_000,
+  uploadAttachment: (_scope, file, { signal }) => requestJson("/api/attachments", {
+    method: "POST", body: file, signal,
+    headers: { "Content-Type": "application/octet-stream", "X-File-Name": encodeURIComponent(file.name), "X-File-Type": file.type || "text/plain" }
+  }),
+  deleteAttachment: (_scope, id) => requestJson(`/api/attachments/${encodeURIComponent(id)}`, { method: "DELETE" })
+}));
+attachments.open = file => { selectedAttachment.value = file; };
+const suggestions = reactive(useAssistantSuggestions({
+  active: () => !loading.value && !pending.value,
+  requestKey: () => turns.value.at(-1)?.turnId || "new",
+  draft,
+  generate: ({ draft, signal }) => requestJson("/api/suggestions", {
+    method: "POST", signal, headers: { "Content-Type": "application/json" }, body: JSON.stringify({ draft })
+  }),
+  onSelect: prompt => { draft.value = prompt; }
+}));
 const fields = [{ name: "tone", label: "Answer style", items: ["concise", "detailed"] }];
 let request = null;
 let disposed = false;
@@ -32,25 +67,30 @@ async function reload() {
     providerLabel.value = data.providerLabel;
     configurationMode.value = data.configurationMode;
     configuration.value = data.configuration;
+    modelChoices.value = data.modelChoices;
+    integrationId.value = data.integrationId;
+    draftIntegrationId.value = data.integrationId;
     error.value = "";
   } catch (failure) { if (!disposed) error.value = failure.message; }
   finally { if (!disposed) loading.value = false; }
 }
 
-async function submit({ configuration: selectedConfiguration }) {
-  if (pending.value || !draft.value.trim()) return;
-  const text = draft.value;
+async function submit({ configuration: selectedConfiguration, attachments: selectedFiles }) {
+  if (pending.value || (!draft.value.trim() && !selectedFiles.length)) return;
+  const draftSnapshot = draft.value;
+  const text = draftSnapshot || "Please review the attached files.";
   pending.value = true;
+  accepted.value = false;
   error.value = "";
   const controller = new AbortController();
   request = controller;
   try {
     const response = await fetch("/api/messages", {
       method: "POST", headers: { "Content-Type": "application/json" }, signal: controller.signal,
-      body: JSON.stringify({ messageId: crypto.randomUUID(), text, configuration: selectedConfiguration })
+      body: JSON.stringify({ messageId: crypto.randomUUID(), text, configuration: selectedConfiguration, integrationId: integrationId.value, attachmentIds: selectedFiles.map(file => file.attachmentId) })
     });
     if (!response.ok) throw new Error((await response.json()).error || "Could not send.");
-    if (draft.value === text) draft.value = "";
+    if (draft.value === draftSnapshot) draft.value = "";
     const reader = response.body.getReader(), decoder = new TextDecoder();
     let buffer = "";
     try {
@@ -63,6 +103,7 @@ async function submit({ configuration: selectedConfiguration }) {
           const event = JSON.parse(buffer.slice(0, newline));
           buffer = buffer.slice(newline + 1);
           if (disposed) continue;
+          if (event.type === "accepted") { accepted.value = true; attachments.clearAttachments({ accepted: true, attachmentIds: selectedFiles.map(file => file.attachmentId) }); }
           if (event.type === "snapshot") turns.value = event.turns;
           if (event.type === "error") error.value = event.message;
         }
@@ -80,10 +121,21 @@ async function stop() {
 }
 
 const adapter = reactive({
+  attachments,
+  suggestions,
+  models: computed(() => modelChoices.value.length && configurationMode.value !== "hidden" ? {
+    providerRows: [{ id: "application", label: "Application AI" }], modelProviderId: "application",
+    modelRows: modelChoices.value, modelId: draftIntegrationId.value,
+    selectionSummary: modelChoices.value.find(item => item.id === integrationId.value)?.label,
+    changesDisabled: configurationMode.value !== "editable" || pending.value,
+    canSave: configurationMode.value === "editable" && !pending.value && draftIntegrationId.value !== integrationId.value,
+    selectModel: value => { draftIntegrationId.value = value; },
+    apply: () => { integrationId.value = draftIntegrationId.value; }
+  } : null),
   conversation: { turns, loading, visible: true, assistantLabel: "Assistant", scrollKey: "example" },
   composer: {
-    draft, pending, disabled: pending, submitOnModifierEnter: true,
-    canSend: computed(() => !loading.value && !pending.value && Boolean(draft.value.trim())),
+    draft, pending: computed(() => pending.value && !accepted.value), submitOnEnter: true, submitOnModifierEnter: true,
+    canSend: computed(() => !loading.value && !pending.value && Boolean(draft.value.trim() || attachments.attachments.length)),
     canStop: pending, placeholder: "Ask a question…"
   },
   actions: { reload, submit, stop,
@@ -99,6 +151,6 @@ html, body, #app { margin: 0; height: 100%; }
 .example { display: flex; flex-direction: column; height: 100dvh; max-width: 60rem; width: 100%; margin: auto; padding: 1rem; box-sizing: border-box; }
 .example header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
 .example h1 { font-size: 1.4rem; }
-.example header span { color: #666; font-size: .875rem; }
+.example header span { color: rgba(var(--v-theme-on-surface), .7); font-size: .875rem; }
 .example > .assistant-conversation { flex: 1; min-height: 0; }
 </style>

package/examples/conversation/README.md

@@ -16,16 +16,41 @@ npm run dev
 Open http://127.0.0.1:5175. `npm run build` builds the client. The default demo
 provider streams a labelled example response and needs no credentials.
 
-Optional server environment:
+## Enable an AI integration
+
+The example uses JSKIT's existing `ai` integration configuration and authorized
+connection resolver. To call the explicitly selected model in `integrations.json`:
+
+```sh
+ASSISTANT_INTEGRATIONS=./integrations.json npm run server
+```
+
+Edit that portable configuration through JSKIT's integration editor or its JSON
+contract. Shared keys use `env:NAME` references; the key stays in the server's
+normal environment. The example binds authorization to its one local user.
+Provider availability is separate from valid configuration. Demo mode remains
+offline when `ASSISTANT_INTEGRATIONS` is unset.
 
 | Variable | Meaning |
 | --- | --- |
-| `ASSISTANT_API_KEY` | Enables the existing JSKIT API-model client; server only. |
-| `ASSISTANT_PROVIDER` | `openai`, `deepseek`, or `anthropic`; default `openai`. |
-| `ASSISTANT_MODEL` | Model available to that provider/account. |
+| `ASSISTANT_INTEGRATIONS` | Path to the app's portable integration JSON; enables real inference. |
+| `ASSISTANT_INTEGRATION_ID` | Default chat integration; `assistant` by default. |
+| `ASSISTANT_SUGGESTION_INTEGRATION_ID` | Separate suggestion agent integration; `suggestions` by default. |
+| `ASSISTANT_SUGGESTION_PROMPT` | Server-owned suggestion instructions; returns an array of `{label,prompt}`. |
 | `ASSISTANT_CONFIGURATION_MODE` | `hidden`, `readonly`, or `editable`; default `editable`. |
 | `ASSISTANT_STORAGE_MODULE` | Path to an app module exporting async `createStorage()`. Otherwise history is held in memory and disappears on restart. |
 
+The shared chooser selects the configured chat integrations; suggestions keep
+their independent connection. The shared row shows suggestions and working status,
+and responses stream incrementally. The example accepts text, JSON and common
+web images up to 2 MB each. Uploads use opaque IDs, preview through app URLs,
+and preserve files accepted by a message. Both uploaded bytes and default history
+are transient. When replacing history storage, also replace `attachments.js`
+with storage that preserves referenced files across restart.
+
+Goals stay off in this API-model example because it has no goal scheduler.
+Native-agent apps enable the shared goal control by supplying real goal actions.
+
 This is a single-user local template with one conversation. A hosted app must
 derive storage scope from authenticated actor/workspace/conversation ownership,
 authorize every route and attachment, and retain provider-delivery evidence for

package/examples/conversation/attachments.js

@@ -0,0 +1,45 @@
+import { randomUUID } from "node:crypto";
+
+// Single-user, in-memory example. Hosted applications authorize the owner on
+// upload, resolution, download and deletion, and retain accepted files.
+const files = new Map();
+export const maxFileBytes = 2_000_000;
+export async function upload(request) {
+  const fileName = decodeURIComponent(request.headers["x-file-name"] || "attachment");
+  const mediaType = request.headers["x-file-type"] || "text/plain";
+  if (!/^(text\/[a-z0-9.+-]+|application\/json|image\/(png|jpeg|webp|gif))$/i.test(mediaType)) {
+    throw new Error("This example accepts text, JSON, PNG, JPEG, WebP and GIF files.");
+  }
+  const chunks = [];
+  let size = 0;
+  for await (const chunk of request) {
+    size += chunk.length;
+    if (size > maxFileBytes) throw new Error("Files must be at most 2 MB.");
+    chunks.push(chunk);
+  }
+  const attachmentId = randomUUID();
+  const receipt = { attachmentId, fileName: fileName.slice(0, 200), size };
+  files.set(attachmentId, { receipt, mediaType, data: Buffer.concat(chunks), accepted: false });
+  return receipt;
+}
+export function resolveFiles(ids = []) {
+  if (!Array.isArray(ids) || ids.length > 10) throw new Error("Invalid attachments.");
+  return ids.map(id => {
+    const file = files.get(id);
+    if (!file) throw new Error("An attached file is unavailable. Please attach it again.");
+    return file;
+  });
+}
+export function contentFor(file) {
+  return file.mediaType.startsWith("image/")
+    ? { type: "image", image: file.data, mediaType: file.mediaType }
+    : { type: "text", text: `File: ${file.receipt.fileName}\n${file.data.toString("utf8")}` };
+}
+export function acceptFiles(selected) { for (const file of selected) file.accepted = true; }
+export function removeFile(id) { if (!files.get(id)?.accepted) files.delete(id); }
+export function download(response, id) {
+  const [file] = resolveFiles([id]);
+  response.writeHead(200, { "Content-Type": file.mediaType, "Cache-Control": "no-store", "X-Content-Type-Options": "nosniff",
+    "Content-Disposition": `inline; filename*=UTF-8''${encodeURIComponent(file.receipt.fileName)}` });
+  response.end(file.data);
+}

package/examples/conversation/integrations.json

@@ -0,0 +1,28 @@
+{
+  "schemaVersion": 1,
+  "registrations": {},
+  "integrations": {
+    "assistant": {
+      "provider": "ai",
+      "accountMode": "shared",
+      "scopes": [],
+      "settings": {
+        "model": "opencode/big-pickle"
+      },
+      "authentication": {
+        "method": "none"
+      }
+    },
+    "suggestions": {
+      "provider": "ai",
+      "accountMode": "shared",
+      "scopes": [],
+      "settings": {
+        "model": "opencode/big-pickle"
+      },
+      "authentication": {
+        "method": "none"
+      }
+    }
+  }
+}

package/examples/conversation/package.json

@@ -8,12 +8,14 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.1.171",
-    "@jskit-ai/http-runtime": "0.1.191",
-    "@jskit-ai/kernel": "0.1.193",
+    "@jskit-ai/assistant-core": "0.1.173",
+    "@jskit-ai/http-runtime": "0.1.193",
+    "@jskit-ai/kernel": "0.1.195",
     "@mdi/js": "^7.4.47",
     "vue": "^3.5.13",
-    "vuetify": "^4.0.0"
+    "vuetify": "^4.0.0",
+    "@jskit-ai/connectors-core": "0.1.12",
+    "@jskit-ai/connectors-catalog": "0.1.12"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

package/examples/conversation/server.js

@@ -2,7 +2,11 @@ import { createServer } from "node:http";
 import { resolve } from "node:path";
 import { pathToFileURL } from "node:url";
 import { setTimeout as delay } from "node:timers/promises";
-import { createAiClient } from "@jskit-ai/assistant-core/server";
+import { readFile } from "node:fs/promises";
+import { createAiConnectionResolver } from "@jskit-ai/connectors-catalog/server/ai";
+import { createEnvironmentReferenceResolver } from "@jskit-ai/connectors-core/server";
+import { upload, resolveFiles, contentFor, acceptFiles, removeFile, download } from "./attachments.js";
+import { createAiConnectionClient } from "@jskit-ai/assistant-core/server";
 import { createConversationTranscript, createMemoryConversationStorage } from "@jskit-ai/assistant-core/server/conversation";
 
 // This template is a single-user local application. A hosted app derives scope
@@ -15,10 +19,23 @@ const transcript = createConversationTranscript({ storage });
 const configurationMode = process.env.ASSISTANT_CONFIGURATION_MODE || "editable";
 if (!["hidden", "readonly", "editable"].includes(configurationMode)) throw new Error("Invalid configuration mode.");
 const fixedConfiguration = Object.freeze({ tone: "concise" });
-const ai = process.env.ASSISTANT_API_KEY ? createAiClient({
-  provider: process.env.ASSISTANT_PROVIDER || "openai", apiKey: process.env.ASSISTANT_API_KEY,
-  model: process.env.ASSISTANT_MODEL
+// Set ASSISTANT_INTEGRATIONS to opt into real inference. The default stays offline.
+const integrationConfiguration = process.env.ASSISTANT_INTEGRATIONS
+  ? JSON.parse(await readFile(resolve(process.env.ASSISTANT_INTEGRATIONS), "utf8")) : null;
+const context = Object.freeze({ applicationId: "conversation-example", subjectId: "local-user" });
+const connections = integrationConfiguration ? createAiConnectionResolver({
+  configuration: integrationConfiguration,
+  authorize: actor => actor === context ? actor : null,
+  resolveReference: createEnvironmentReferenceResolver(process.env)
 }) : null;
+const assistantIntegrationId = process.env.ASSISTANT_INTEGRATION_ID || "assistant";
+const suggestionIntegrationId = process.env.ASSISTANT_SUGGESTION_INTEGRATION_ID || "suggestions";
+const modelChoices = connections ? Object.entries(integrationConfiguration.integrations)
+  .filter(([id, integration]) => integration.provider === "ai" && id !== suggestionIntegrationId)
+  .map(([id, integration]) => ({ id, label: `${id} · ${integration.settings?.model || "Default AI model"}` })) : [];
+async function clientFor(integrationId) {
+  return connections ? createAiConnectionClient(await connections.resolve({ context, integrationId })) : null;
+}
 let active = null;
 
 function configurationFor(input) {
@@ -29,7 +46,8 @@ function configurationFor(input) {
   return { tone: input.tone };
 }
 
-async function* reply(messages, configuration, signal) {
+async function* reply(messages, configuration, integrationId, signal) {
+  const ai = await clientFor(integrationId);
   if (ai) {
     const stream = await ai.createChatCompletionStream({ signal, messages: [
       { role: "system", content: `Answer in a ${configuration.tone} style.` }, ...messages
@@ -40,7 +58,7 @@ async function* reply(messages, configuration, signal) {
     }
     return;
   }
-  const answer = `This is the **demo provider**. Your message was:\n\n${messages.at(-1).content}\n\nThe application supplies the provider and storage; JSKIT supplies the conversation UI and transcript behavior.`;
+  const answer = `This is the **demo provider**. Your message was:\n\n${Array.isArray(messages.at(-1).content) ? messages.at(-1).content.filter(part => part.type === "text").map(part => part.text).join("\n\n") : messages.at(-1).content}\n\nThe application supplies the provider and storage; JSKIT supplies the conversation UI and transcript behavior.`;
   for (const word of answer.match(/\S+\s*/g) || []) {
     await delay(35, undefined, { signal });
     yield word;
@@ -66,9 +84,36 @@ createServer(async (request, response) => {
   try {
     if (request.method === "GET" && request.url === "/api/conversation") {
       json(response, 200, { turns: await transcript.readConversationLog(scope), configurationMode,
-        configuration: fixedConfiguration, providerLabel: ai ? `${ai.provider} · ${ai.defaultModel}` : "Demo provider · transient storage" });
+        configuration: fixedConfiguration, modelChoices, integrationId: assistantIntegrationId,
+        providerLabel: connections ? "Application AI integration" : "Demo provider · transient storage" });
       return;
     }
+    if (request.method === "POST" && request.url === "/api/attachments") {
+      json(response, 200, await upload(request)); return;
+    }
+    const attachmentPath = request.url?.match(/^\/api\/attachments\/([A-Za-z0-9-]+)$/);
+    if (attachmentPath && request.method === "GET") { download(response, attachmentPath[1]); return; }
+    if (attachmentPath && request.method === "DELETE") { removeFile(attachmentPath[1]); json(response, 200, { ok: true }); return; }
+    if (request.method === "POST" && request.url === "/api/suggestions") {
+      const input = await body(request);
+      const controller = new AbortController();
+      response.on("close", () => controller.abort());
+      const suggestionAgent = await clientFor(suggestionIntegrationId);
+      const history = await transcript.readConversationLog(scope);
+      const result = suggestionAgent ? await suggestionAgent.createChatCompletion({
+        signal: controller.signal,
+        messages: [
+          { role: "system", content: process.env.ASSISTANT_SUGGESTION_PROMPT || 'Suggest three useful next user messages. Return only a JSON array of {"label":"short label","prompt":"message"}. Do not execute tasks.' },
+          { role: "user", content: JSON.stringify({ draft: String(input.draft || "").slice(0, 4000), turns: history.slice(-3) }) }
+        ]
+      }) : null;
+      const suggestions = result ? JSON.parse(result.choices[0].message.content) : [
+        { label: "Summarize", prompt: "Summarize our conversation so far." },
+        { label: "Explain", prompt: "Explain your last answer in more detail." },
+        { label: "Next steps", prompt: "What would be a useful next step?" }
+      ];
+      json(response, 200, suggestions); return;
+    }
     if (request.method === "DELETE" && request.url === "/api/run") {
       active?.abort();
       json(response, 200, { stopped: true });
@@ -79,11 +124,15 @@ createServer(async (request, response) => {
     if (typeof input.text !== "string" || !input.text.trim() || input.text.length > 8000 ||
       typeof input.messageId !== "string" || !/^[A-Za-z0-9_-]{1,128}$/.test(input.messageId)) throw new Error("Invalid message.");
     const configuration = configurationFor(input.configuration);
+    const integrationId = configurationMode === "editable" ? input.integrationId || assistantIntegrationId : assistantIntegrationId;
+    if (connections && !modelChoices.some(choice => choice.id === integrationId)) throw new Error("Choose an allowed AI connection.");
+    const files = resolveFiles(input.attachmentIds);
+    input.attachments = files.map(file => file.receipt);
     if (active) { json(response, 409, { error: "The assistant is already working." }); return; }
     const controller = new AbortController();
     active = controller;
     let turn;
-    try { turn = await transcript.writeConversationUserMessage(scope, input); }
+    try { turn = await transcript.writeConversationUserMessage(scope, input); acceptFiles(files); }
     catch (failure) { active = null; throw failure; }
     response.writeHead(200, { "Content-Type": "application/x-ndjson", "Cache-Control": "no-store" });
     const emit = (event) => { if (!response.destroyed) response.write(`${JSON.stringify(event)}\n`); };
@@ -92,12 +141,14 @@ createServer(async (request, response) => {
     let answer = "";
     try {
       // A duplicate request returns saved state; it never launches the provider again.
+      emit({ type: "accepted" });
       if (turn) {
         const history = await transcript.readConversationLog(scope);
         emit({ type: "snapshot", turns: history.map((entry) => entry.turnId === turn.turnId ? { ...entry, pending: true } : entry) });
         const messages = history.flatMap((entry) => [entry.user, entry.assistant].filter(Boolean))
-          .slice(-20).map((entry) => ({ role: entry.role, content: entry.text }));
-        for await (const text of reply(messages, configuration, controller.signal)) {
+          .slice(-20).map((entry) => ({ role: entry.role, content: entry.attachments?.length
+            ? [{ type: "text", text: entry.text }, ...resolveFiles(entry.attachments.map(file => file.attachmentId)).map(contentFor)] : entry.text }));
+        for await (const text of reply(messages, configuration, integrationId, controller.signal)) {
           answer += text;
           if (answer.length > 32_000) throw new Error("Response limit reached.");
           emit({ type: "snapshot", turns: history.map((entry) => entry.turnId === turn.turnId

package/fixtures/responsive-assistant/ConversationFixture.vue

@@ -1,11 +1,55 @@
 <script setup>
 import { computed, reactive, ref } from "vue";
 import AssistantConversationElement from "../../src/client/conversation/AssistantConversationElement.vue";
+import { useAssistantAttachments } from "../../src/client/conversation/useAssistantAttachments.js";
+import { useAssistantSuggestions } from "../../src/client/conversation/useAssistantSuggestions.js";
 const phase = ref("idle");
 const draft = ref("");
 const narrow = ref(false);
 const submissions = ref(0);
 const feedback = ref(false);
+const supportEnabled = new URLSearchParams(location.search).has("support");
+const suggestionModel = ref("small-model");
+const customActivity = ref(false);
+const suggestions = useAssistantSuggestions({
+  active: computed(() => supportEnabled && phase.value === "idle"),
+  draft, configuration: computed(() => ({ model: suggestionModel.value })), debounceMs: 0,
+  generate: async ({ configuration }) => [{ label: "Suggest next step", prompt: `Suggestion from ${configuration.model}` }],
+  onSelect(text) { draft.value = text; }
+});
+const capabilitiesEnabled = new URLSearchParams(location.search).has("capabilities");
+const attachmentReceipts = ref([]);
+const waitingUploads = [];
+function finishUploads() { for (const finish of waitingUploads.splice(0)) finish(); }
+const attachments = useAssistantAttachments({
+  sessionId: "fixture-conversation", maxItems: 2,
+  canUpload: computed(() => capabilitiesEnabled),
+  async uploadAttachment(sessionId, file, { onProgress }) {
+    onProgress({ bytesSent: file.size / 2, totalBytes: file.size });
+    await new Promise(resolve => waitingUploads.push(resolve));
+    onProgress({ bytesSent: file.size, totalBytes: file.size });
+    return { attachmentId: file.name, fileName: file.name, size: file.size, sessionId };
+  },
+  async deleteAttachment() { return { ok: true }; }
+});
+const modelId = ref("one");
+const appliedModel = ref("one");
+const models = reactive({
+  providerRows: [{ id: "configured", label: "Configured AI" }], modelProviderId: "configured",
+  modelRows: Array.from({ length: 8 }, (_, index) => ({ id: index === 0 ? "one" : `model-${index}`, label: `Model ${index + 1}` })),
+  modelId, changesDisabled: computed(() => phase.value !== "idle"),
+  canSave: computed(() => modelId.value !== appliedModel.value),
+  selectModel(value) { modelId.value = value; },
+  apply() { appliedModel.value = modelId.value; }
+});
+const goalEnabled = ref(new URLSearchParams(location.search).has("goal"));
+const goal = ref(null);
+const goalState = reactive({
+  enabled: goalEnabled, goal,
+  set(input) { goal.value = { ...input, status: "active", elapsedSeconds: 0, sampledAt: Date.now() }; },
+  pause() { goal.value = { ...goal.value, status: "paused", elapsedSeconds: goal.value.elapsedSeconds + (Date.now() - goal.value.sampledAt) / 1000, sampledAt: Date.now() }; },
+  resume() { goal.value = { ...goal.value, status: "active", sampledAt: Date.now() }; }
+});
 const adapter = reactive({
   conversation: { turns: [], visible: true, scrollKey: "fixture", welcomeMessage: "Composer responsiveness fixture" },
   composer: {
@@ -18,9 +62,12 @@ const adapter = reactive({
     stopPending: computed(() => phase.value === "stopping"),
     submitLabel: computed(() => phase.value === "reconnecting" ? "Reconnecting…" : "Send")
   },
+  suggestions, goal: goalState,
+  attachments: capabilitiesEnabled ? attachments : undefined,
+  models: capabilitiesEnabled ? models : undefined,
   actions: {
     setDraft(value) { draft.value = value; },
-    submit() { submissions.value += 1; draft.value = ""; phase.value = "active"; },
+    submit(payload) { attachmentReceipts.value = payload.attachments; attachments.clearAttachments(); submissions.value += 1; draft.value = ""; phase.value = "active"; },
     stop() { phase.value = "stopping"; }
   }
 });
@@ -32,10 +79,16 @@ const adapter = reactive({
         <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>
         <button @click="feedback = !feedback">Toggle action feedback</button>
+        <button v-if="supportEnabled" @click="suggestionModel = 'other-model'">Change suggestion model</button>
+        <button v-if="supportEnabled" @click="customActivity = !customActivity">Custom activity</button>
+        <button v-if="capabilitiesEnabled" @click="finishUploads">Finish uploads</button>
+        <button @click="goalEnabled = !goalEnabled">Toggle goals</button>
         <output>{{ phase }}; submitted {{ submissions }}</output>
+        <output v-if="capabilitiesEnabled">Model: {{ appliedModel }}; sent files: {{ attachmentReceipts.map(item => item.fileName).join(', ') }}</output>
       </div>
       <main class="fixture" :class="{ narrow }">
         <AssistantConversationElement :adapter="adapter">
+          <template v-if="customActivity" #activity="{ activity }"><strong>Custom activity: {{ activity.label }}</strong></template>
           <template #composer-feedback><p v-if="feedback" class="feedback" role="status">Describe what you want to change.</p></template>
         </AssistantConversationElement>
       </main>

package/fixtures/responsive-assistant/ProgressFixture.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { computed, ref } from "vue";
+import AssistantConversationElement from "../../src/client/conversation/AssistantConversationElement.vue";
+import { conversationTurnsFromMessages } from "../../src/shared/conversation/turns.js";
+
+const working = ref(true);
+const draft = ref("");
+const scope = ref("first");
+const combined = ref(false);
+const messages = ref([1, 2, 3].map(index => ({
+  messageId: `progress-${index}`, role: "thinking", text: `Reasoning ${index}`
+})));
+let sequence = 3;
+function append(role) {
+  sequence += 1;
+  messages.value.push({ messageId: `message-${sequence}`, role, text: `${role} ${sequence}` });
+}
+const adapter = computed(() => ({
+  conversation: {
+    working: working.value, scrollKey: scope.value, hasMoreBefore: true,
+    turns: combined.value
+      ? conversationTurnsFromMessages(messages.value)
+      : messages.value.map(message => ({
+          turnId: `row-${message.messageId}`,
+          ...(message.role === "system" || message.role === "user"
+            ? { [message.role]: { messageId: message.messageId, text: message.text } } : {}),
+          messages: [message]
+        }))
+  },
+  composer: { draft: draft.value, canSend: Boolean(draft.value), canStop: working.value },
+  actions: {
+    setDraft(value) { draft.value = value; },
+    stop() { working.value = false; },
+    loadMore({ complete }) {
+      messages.value.unshift({ messageId: `older-${sequence++}`, role: "thinking", text: "Older reasoning" });
+      complete({ changed: true });
+    }
+  }
+}));
+</script>
+<template>
+  <v-app>
+    <v-main>
+      <main class="progress-fixture">
+        <nav>
+          <button @click="working = !working">Toggle working</button>
+          <button @click="combined = !combined">Change storage rows</button>
+          <button @click="scope = scope === 'first' ? 'second' : 'first'">Change conversation</button>
+          <button v-for="role in ['thinking', 'commentary', 'assistant', 'user', 'system']" :key="role" @click="append(role)">Append {{ role }}</button>
+        </nav>
+        <AssistantConversationElement :adapter="adapter" />
+      </main>
+    </v-main>
+  </v-app>
+</template>
+<style scoped>
+.progress-fixture { display: flex; flex-direction: column; height: 100dvh; padding: 8px; }
+nav { display: flex; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
+nav button { padding: 8px; min-height: 48px; border: 1px solid; }
+.assistant-conversation { flex: 1; }
+</style>

package/fixtures/responsive-assistant/main.js

@@ -6,6 +6,7 @@ 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";
+import ProgressFixture from "./ProgressFixture.vue";
 
 const vuetify = createVuetify({
   components,
@@ -20,6 +21,7 @@ const vuetify = createVuetify({
   }
 });
 
-createApp(new URLSearchParams(location.search).has("conversation") ? ConversationFixture : App)
+const query = new URLSearchParams(location.search);
+createApp(query.has("progress") ? ProgressFixture : query.has("conversation") ? ConversationFixture : App)
   .use(vuetify)
   .mount("#app");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-core",
-  "version": "0.1.171",
+  "version": "0.1.173",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -18,19 +18,33 @@
     "./shared/conversation": "./src/shared/conversation/index.js",
     "./client/conversation-submit": "./src/client/conversation/submitText.js",
     "./client/conversation-scroll": "./src/client/conversation/useScrollToBottom.js",
-    "./testing/conversation-storage": "./src/testing/conversationStorageContract.js"
+    "./testing/conversation-storage": "./src/testing/conversationStorageContract.js",
+    "./client/conversation-suggestions": "./src/client/conversation/useAssistantSuggestions.js",
+    "./client/conversation-attachments": "./src/client/conversation/useAssistantAttachments.js"
   },
   "dependencies": {
-    "@jskit-ai/resource-core": "0.1.135",
-    "@jskit-ai/resource-crud-core": "0.1.135",
+    "@ai-sdk/anthropic": "^4.0.53",
+    "@ai-sdk/cerebras": "^3.0.48",
+    "@ai-sdk/google": "^4.0.70",
+    "@ai-sdk/groq": "^4.0.41",
+    "@ai-sdk/mistral": "^4.0.43",
+    "@ai-sdk/openai": "^4.0.66",
+    "@ai-sdk/openai-compatible": "^3.0.48",
+    "@ai-sdk/perplexity": "^4.0.43",
+    "@ai-sdk/togetherai": "^3.0.49",
+    "@ai-sdk/xai": "^4.0.58",
+    "@jskit-ai/resource-core": "0.1.137",
+    "@jskit-ai/resource-crud-core": "0.1.137",
+    "@mdi/js": "^7.4.47",
+    "@openrouter/ai-sdk-provider": "^3.0.0",
+    "ai": "^7.0.101",
     "json-rest-schema": "^1.0.17",
     "openai": "^6.22.0",
-    "@mdi/js": "^7.4.47",
     "ws": "^8.20.1"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.191",
-    "@jskit-ai/kernel": "0.1.193",
+    "@jskit-ai/http-runtime": "0.1.193",
+    "@jskit-ai/kernel": "0.1.195",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0"
   },