@jskit-ai/assistant-core 0.2.21 → 0.2.22

package/CHANGELOG.md

@@ -2,8 +2,12 @@
 
 ## Unreleased
 
+- The goal menu closes when Cancel succeeds, as it does after Start; Pause and Resume keep it open.
+- `AssistantConversationElement` has an `avatar-thumbnail` slot, with the `{ size, height }` scope of the other avatar slots: while the avatar is hidden, the **Show avatar** button draws its content instead of the anonymous account icon, such as a still miniature of the avatar, clipped to the button's round 32-pixel disc. The button keeps its label, title and 44-pixel target, and shows the icon as before without the slot.
 - A delivered Codex turn is held as not yet started only until Codex reports it: a `turn/started` that arrives before the `turn/start` answer counts, and a thread read listing exactly that turn as completed or failed settles a turn whose notifications were missed, so its answer is no longer kept waiting for a notification that never comes.
 - The API driver's state note, which carries the current time, follows the conversation as its last message instead of ending the system prompt, so the provider's prompt cache keeps the whole history from one turn to the next instead of charging it uncached on each turn's first model call (`@jskit-ai/agent` `runLoop`).
+- The assistant settings card is an elevated Material 3 card without a border, and the long-text preview's table alignment no longer needs `!important`.
+- Icons are Material Symbols `$aliases` (from `@jskit-ai/material-web`) instead of `@mdi/js` paths, and text uses Vuetify 4's Material 3 type classes (`text-body-large`, `text-title-medium`, ...) instead of Material 2 ones, which Vuetify 4 no longer styles. Upgrading: see the guide's [Move an app to the Material 3 defaults](https://mobily-enterprises.github.io/jskit-ai/guide/app-setup/material-3-migration).
 - Assistant failures that reach a person translate: 63 more undotted codes render from `jskit.errors.<code>`, and 98 sentences that share a code with others, or are sent without one, carry a `messageCode` (`assistant.claude.*`, `assistant.codex.*`, `assistant.opencode.*`, `assistant.conversation.*`, `assistant.turn.*`). The English messages are unchanged.
 - The OpenCode version mismatch, Claude control-request timeout and unreadable saved Claude conversation errors carry `params` for their catalog English.
 - The assistant settings resource sends its system prompt field messages in the coded `{ code, message, params }` form.

package/examples/conversation/main.js

@@ -2,8 +2,9 @@ import { createApp } from "vue";
 import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
-import { aliases, mdi } from "vuetify/iconsets/mdi-svg";
 import "vuetify/styles";
+import "@jskit-ai/material-web/client/material.css";
+import { createMaterialVuetifyOptions } from "@jskit-ai/material-web/client";
 import App from "./App.vue";
 
-createApp(App).use(createVuetify({ components, directives, icons: { defaultSet: "mdi", aliases, sets: { mdi } } })).mount("#app");
+createApp(App).use(createVuetify({ components, directives, ...createMaterialVuetifyOptions() })).mount("#app");

package/examples/conversation/package.json

@@ -8,14 +8,14 @@
     "build": "vite build"
   },
   "dependencies": {
-    "@jskit-ai/assistant-core": "0.2.21",
-    "@jskit-ai/http-runtime": "0.2.9",
-    "@jskit-ai/kernel": "0.2.9",
-    "@mdi/js": "^7.4.47",
+    "@jskit-ai/assistant-core": "0.2.22",
+    "@jskit-ai/http-runtime": "0.2.10",
+    "@jskit-ai/kernel": "0.2.10",
+    "@jskit-ai/material-web": "0.1.0",
     "vue": "^3.5.13",
     "vuetify": "^4.0.0",
-    "@jskit-ai/connectors-core": "0.2.10",
-    "@jskit-ai/connectors-catalog": "0.2.10"
+    "@jskit-ai/connectors-core": "0.2.11",
+    "@jskit-ai/connectors-catalog": "0.2.11"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.7",

package/fixtures/responsive-assistant/main.js

@@ -1,24 +1,23 @@
 import { createApp } from "vue";
 import "vuetify/styles";
+import "@jskit-ai/material-web/client/material.css";
+import { createMaterialVuetifyOptions } from "@jskit-ai/material-web/client";
 import { createVuetify } from "vuetify";
 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";
 import ProgressFixture from "./ProgressFixture.vue";
 import DeliveryFixture from "./DeliveryFixture.vue";
 
 const query = new URLSearchParams(location.search);
+const material = createMaterialVuetifyOptions();
 const vuetify = createVuetify({
   components,
   directives,
-  icons: {
-    defaultSet: "mdi",
-    aliases: mdiAliases,
-    sets: { mdi }
-  },
+  ...material,
   theme: {
+    ...material.theme,
     defaultTheme: query.has("dark") ? "dark" : "light"
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/assistant-core",
-  "version": "0.2.21",
+  "version": "0.2.22",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1"
@@ -52,9 +52,8 @@
     "@ai-sdk/togetherai": "^3.0.49",
     "@ai-sdk/xai": "^4.0.58",
     "@jskit-ai/agent": "0.1.1",
-    "@jskit-ai/resource-core": "0.1.200",
-    "@jskit-ai/resource-crud-core": "0.1.200",
-    "@mdi/js": "^7.4.47",
+    "@jskit-ai/resource-core": "0.1.201",
+    "@jskit-ai/resource-crud-core": "0.1.201",
     "@openrouter/ai-sdk-provider": "^3.0.0",
     "ai": "^7.0.152",
     "json-rest-schema": "^1.0.17",
@@ -62,10 +61,10 @@
     "ws": "^8.20.1"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.2.9",
-    "@jskit-ai/kernel": "0.2.9",
+    "@jskit-ai/http-runtime": "0.2.10",
+    "@jskit-ai/kernel": "0.2.10",
     "vue": "^3.5.13",
-    "vuetify": "^4.0.0"
+    "vuetify": "^4.3.0"
   },
   "description": "Reusable assistant client/server/shared primitives without surface-specific routes or settings ownership.",
   "jskit": {
@@ -219,5 +218,8 @@
         "capabilities": []
       }
     }
+  },
+  "devDependencies": {
+    "@jskit-ai/material-web": "0.1.0"
   }
 }

package/src/client/components/AssistantSettingsFormCard.vue

@@ -1,8 +1,8 @@
 <template>
   <section :class="props.rootClass">
-    <v-card rounded="lg" elevation="1" border>
+    <v-card>
       <v-card-item>
-        <v-card-title class="text-h6">{{ props.title }}</v-card-title>
+        <v-card-title class="text-title-large">{{ props.title }}</v-card-title>
         <v-card-subtitle>{{ props.subtitle }}</v-card-subtitle>
       </v-card-item>
       <v-divider />
@@ -11,11 +11,11 @@
           <v-skeleton-loader type="text@2, list-item-two-line@4, button" />
         </template>
 
-        <p v-else-if="props.addEdit.loadError" class="text-body-2 text-medium-emphasis mb-4">
+        <p v-else-if="props.addEdit.loadError" class="text-body-medium on-surface-variant mb-4">
           {{ props.addEdit.loadError }}
         </p>
 
-        <p v-else-if="!props.addEdit.canView" class="text-body-2 text-medium-emphasis mb-4">
+        <p v-else-if="!props.addEdit.canView" class="text-body-medium on-surface-variant mb-4">
           {{ props.noPermissionMessage }}
         </p>
 

package/src/client/conversation/AssistantAttachmentPreview.vue

@@ -13,7 +13,7 @@
         <p v-else>{{ t("jskit.assistant.attachments.previewUnavailable") }}</p>
       </v-card-text>
       <v-card-actions>
-        <v-btn :href="downloadUrl" :download="attachment.fileName" :prepend-icon="mdiDownload" variant="tonal">{{ t("jskit.assistant.attachments.download") }}</v-btn>
+        <v-btn :href="downloadUrl" :download="attachment.fileName" prepend-icon="$download" variant="tonal">{{ t("jskit.assistant.attachments.download") }}</v-btn>
         <v-spacer />
         <v-btn @click="emit('close')">{{ t("jskit.assistant.attachments.close") }}</v-btn>
       </v-card-actions>
@@ -23,7 +23,6 @@
 
 <script setup>
 import { ref, watch } from "vue";
-import { mdiDownload } from "@mdi/js";
 import { useJskitText } from "../i18n.js";
 
 const { t } = useJskitText();

package/src/client/conversation/AssistantAttachmentQueue.vue

@@ -74,7 +74,7 @@
             :ref="(element) => setActionElement(item, 'cancel', element)"
             :aria-label="t('jskit.assistant.attachments.cancelItem', { name: itemName(item) })"
             class="assistant-attachment-queue__action"
-            :icon="mdiCloseCircleOutline"
+            icon="$cancel"
             size="small"
             :title="t('jskit.assistant.attachments.cancelItem', { name: itemName(item) })"
             type="button"
@@ -86,7 +86,7 @@
             :ref="(element) => setActionElement(item, 'retry', element)"
             :aria-label="t('jskit.assistant.attachments.retryItem', { name: itemName(item) })"
             class="assistant-attachment-queue__action"
-            :icon="mdiRefresh"
+            icon="$refresh"
             size="small"
             :title="t('jskit.assistant.attachments.retryItem', { name: itemName(item) })"
             type="button"
@@ -98,7 +98,7 @@
             :ref="(element) => setActionElement(item, 'remove', element)"
             :aria-label="t('jskit.assistant.attachments.removeItem', { name: itemName(item) })"
             class="assistant-attachment-queue__action"
-            :icon="mdiClose"
+            icon="$close"
             size="small"
             :title="t('jskit.assistant.attachments.removeItem', { name: itemName(item) })"
             type="button"
@@ -122,11 +122,6 @@
 
 <script setup>
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from "vue";
-import {
-  mdiClose,
-  mdiCloseCircleOutline,
-  mdiRefresh
-} from "@mdi/js";
 
 import { hasWindowFunction } from "../browser.js";
 import { useJskitText } from "../i18n.js";

package/src/client/conversation/AssistantComposerActions.vue

@@ -4,7 +4,7 @@
     <div class="assistant-composer-actions__delivery">
       <v-btn
         v-if="state.canStop" color="error" :disabled="state.stopDisabled || state.stopPending"
-        :aria-busy="state.stopPending ? 'true' : undefined" :prepend-icon="mdiStopCircleOutline"
+        :aria-busy="state.stopPending ? 'true' : undefined" prepend-icon="$stopCircle"
         size="small" variant="tonal" @click="emit('stop')"
       >
         {{ state.stopPending ? t('jskit.assistant.composer.stopping') : t('jskit.assistant.composer.stop') }}
@@ -12,7 +12,7 @@
       <v-btn
         ref="sendButton" class="assistant-composer-actions__send" color="primary" :disabled="!state.canSend"
         :aria-busy="state.pending && !state.canSend ? 'true' : undefined" :aria-label="state.submitAriaLabel || state.submitLabel || t('jskit.assistant.composer.sendMessage')"
-        :title="state.submitTitle" :prepend-icon="state.submitIcon || mdiSend" size="small" variant="flat"
+        :title="state.submitTitle" :prepend-icon="state.submitIcon || '$send'" size="small" variant="flat"
         @click="emit('submit')"
       >
         {{ state.submitLabel || (state.pending && !state.canSend ? t('jskit.assistant.composer.sending') : t('jskit.assistant.composer.send')) }}
@@ -23,7 +23,6 @@
 </template>
 <script setup>
 import { ref } from "vue";
-import { mdiSend, mdiStopCircleOutline } from "@mdi/js";
 import { useJskitText } from "../i18n.js";
 
 const { t } = useJskitText();

package/src/client/conversation/AssistantComposerSupport.vue

@@ -29,7 +29,7 @@
       <v-icon
         aria-hidden="true"
         class="assistant-composer-support__marker"
-        :icon="mdiLightbulbOnOutline"
+        icon="$lightbulb"
         size="16"
       />
 
@@ -73,7 +73,6 @@
 
 <script setup>
 import { computed } from "vue";
-import { mdiLightbulbOnOutline } from "@mdi/js";
 import { useJskitText } from "../i18n.js";
 
 const { t } = useJskitText();

package/src/client/conversation/AssistantConversationElement.vue

@@ -7,14 +7,14 @@
       <div v-show="avatarSize === 'hidden'" ref="avatarControls" class="assistant-conversation__avatar-controls">
         <slot name="avatar-control" :size="avatarSize" :height="avatarHeight" />
         <v-btn
-          :icon="mdiAccountCircleOutline" size="small"
+          icon="$accountCircle" size="small"
           variant="text" :width="44" :min-width="44" :min-height="44"
           class="assistant-conversation__avatar-size"
           :aria-label="t('jskit.assistant.chat.showAvatar')" :title="t('jskit.assistant.chat.showAvatar')"
           :aria-expanded="avatarSize !== 'hidden'" @click="toggleAvatar"
         >
           <span class="assistant-conversation__avatar-size-disc">
-            <v-icon size="20" :icon="mdiAccountCircleOutline" />
+            <slot name="avatar-thumbnail" :size="avatarSize" :height="avatarHeight"><v-icon size="20" icon="$accountCircle" /></slot>
           </span>
         </v-btn>
       </div>
@@ -25,13 +25,13 @@
         <div class="assistant-conversation__avatar-tools">
           <slot name="avatar-tools" :size="avatarSize" :height="avatarHeight" />
           <v-btn
-            :icon="mdiMinus" size="small" variant="text" color="primary"
+            icon="$minus" size="small" variant="text" color="primary"
             :width="40" :min-width="40" :min-height="44" class="assistant-conversation__avatar-size"
             :aria-label="t('jskit.assistant.chat.minimiseAvatar')" :title="t('jskit.assistant.chat.minimiseAvatar')" :aria-expanded="true"
             @click="toggleAvatar"
           >
             <span class="assistant-conversation__avatar-size-disc assistant-conversation__avatar-size-disc--minimise">
-              <v-icon size="20" :icon="mdiMinus" />
+              <v-icon size="20" icon="$minus" />
             </span>
           </v-btn>
         </div>
@@ -49,13 +49,13 @@
       <template #user-message-actions="scope">
         <div v-if="scope.turn.preview && scope.turn.previewMessage?.actions" class="assistant-conversation__preview-actions">
           <v-btn
-            v-if="scope.turn.previewMessage.actions.discard" :icon="mdiClose" size="small" variant="text"
+            v-if="scope.turn.previewMessage.actions.discard" icon="$close" size="small" variant="text"
             :aria-label="t('jskit.assistant.chat.discardUnsent')" :title="t('jskit.assistant.chat.discardUnsent')"
             :disabled="!scope.turn.previewMessage.actions.canDiscard"
             @click="scope.turn.previewMessage.actions.discard(scope.turn.turnId)"
           />
           <v-btn
-            v-if="scope.turn.previewMessage.actions.edit" :icon="mdiPencil" size="small" variant="text"
+            v-if="scope.turn.previewMessage.actions.edit" icon="$edit" size="small" variant="text"
             :aria-label="t('jskit.assistant.chat.editUnsent')" :title="t('jskit.assistant.chat.editUnsent')"
             :disabled="!scope.turn.previewMessage.actions.canEdit"
             @click="scope.turn.previewMessage.actions.edit(scope.turn.turnId)"
@@ -129,7 +129,7 @@
               @select-variant="adapter.models.selectVariant?.($event)" @apply="applyModel" @reload="adapter.models.reload?.()"
             />
             <v-btn
-              v-if="attachmentsEnabled" :aria-label="t('jskit.assistant.chat.attachFiles')" :title="t('jskit.assistant.chat.attachFiles')" size="small" variant="text" :icon="mdiPaperclip"
+              v-if="attachmentsEnabled" :aria-label="t('jskit.assistant.chat.attachFiles')" :title="t('jskit.assistant.chat.attachFiles')" size="small" variant="text" icon="$attachFile"
               :disabled="!adapter.attachments.canAddFiles" @click="fileInput?.click()"
             />
             <slot
@@ -158,7 +158,6 @@
 </template>
 <script setup>
 import { computed, onBeforeUnmount, onMounted, onUpdated, ref, useId, useSlots, watch } from "vue";
-import { mdiAccountCircleOutline, mdiClose, mdiMinus, mdiPaperclip, mdiPencil } from "@mdi/js";
 import AssistantTranscript from "./AssistantTranscript.vue";
 import AssistantPromptInput from "./AssistantPromptInput.vue";
 import AssistantComposerActions from "./AssistantComposerActions.vue";
@@ -371,7 +370,7 @@ defineExpose({ focus: () => input.value?.focus(), submit, stop });
 .assistant-conversation__avatar-controls { position: absolute; top: 0; right: 100%; display: flex; align-items: center; justify-content: flex-end; min-height: 44px; }
 .assistant-conversation__avatar--hidden .assistant-conversation__avatar-controls { right: 0; }
 .assistant-conversation__avatar-size { min-width: 44px; min-height: 44px; }
-.assistant-conversation__avatar-size-disc { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--v-theme-on-surface), .08); }
+.assistant-conversation__avatar-size-disc { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; overflow: hidden; border-radius: 50%; background: rgba(var(--v-theme-on-surface), .08); }
 .assistant-conversation__avatar-size-disc--minimise { background: rgba(var(--v-theme-primary), .12); }
 .assistant-conversation__avatar-presentation { display: flex; flex-direction: column; align-items: center; min-width: 0; }
 .assistant-conversation__avatar-tools { display: flex; align-items: center; gap: 0; }

package/src/client/conversation/AssistantConversationStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="message.delivery" class="d-flex flex-wrap align-center ga-1 text-caption text-error" role="status">
+  <div v-if="message.delivery" class="d-flex flex-wrap align-center ga-1 text-body-small text-error" role="status">
     <span>{{ message.delivery.error || message.text }}</span>
     <v-btn
       variant="text"

package/src/client/conversation/AssistantGoalControl.vue

@@ -63,6 +63,11 @@ async function setGoal() {
   const result = await props.state.set({ objective: objective.value.trim(), ...(props.state.tokenBudgetSupported === false || tokenBudget.value === "" ? {} : { tokenBudget: Number(tokenBudget.value) }) });
   if (result !== false && result?.ok !== false && !props.state.error) { objective.value = ""; tokenBudget.value = ""; open.value = false; }
 }
+// A successful Cancel closes the menu, as Start does; Pause and Resume keep it open.
+async function cancelGoal() {
+  const result = await props.state.cancel();
+  if (result !== false && result?.ok !== false && !props.state.error) open.value = false;
+}
 </script>
 
 <template>
@@ -78,7 +83,7 @@ async function setGoal() {
       <strong role="status">{{ label }}</strong>
       <v-btn v-if="(running || (state.pauseBlocked && goal?.status === 'blocked')) && state.pause" size="small" :disabled="state.stopPending" @click="state.pause()">{{ state.action === 'pause' ? t('jskit.assistant.goal.pausing') : t('jskit.assistant.goal.pause') }}</v-btn>
       <v-btn v-if="['paused', 'blocked', 'usageLimited'].includes(goal?.status) && state.resume" size="small" :disabled="state.pending" @click="state.resume()">{{ state.action === 'resume' ? t('jskit.assistant.goal.resuming') : t('jskit.assistant.goal.resume') }}</v-btn>
-      <v-btn v-if="goal && goal.status !== 'complete' && state.cancel" color="error" size="small" variant="text" :disabled="state.stopPending" @click="state.cancel()">{{ state.action === 'cancel' ? t('jskit.assistant.goal.cancelling') : t('jskit.assistant.goal.cancel') }}</v-btn>
+      <v-btn v-if="goal && goal.status !== 'complete' && state.cancel" color="error" size="small" variant="text" :disabled="state.stopPending" @click="cancelGoal">{{ state.action === 'cancel' ? t('jskit.assistant.goal.cancelling') : t('jskit.assistant.goal.cancel') }}</v-btn>
       <p v-if="goal" class="my-2">{{ goal.objective }}</p>
       <p v-if="goal?.reason" class="text-body-small my-2">{{ goal.reason }}</p>
       <p v-if="elapsed" class="text-body-small my-2">{{ elapsedText }}</p>

package/src/client/conversation/AssistantMessageAttachments.vue

@@ -41,7 +41,6 @@
 </template>
 
 <script setup>
-import { mdiFileOutline, mdiImageOutline } from "@mdi/js";
 import { useJskitText } from "../i18n.js";
 import { attachmentSizeText } from "./attachmentSize.js";
 
@@ -53,7 +52,7 @@ defineProps({
 });
 const emit = defineEmits(["preview"]);
 function attachmentIcon(attachment) {
-  return /\.(?:avif|bmp|gif|heic|heif|jpe?g|png|svg|webp)$/iu.test(attachment.fileName) ? mdiImageOutline : mdiFileOutline;
+  return /\.(?:avif|bmp|gif|heic|heif|jpe?g|png|svg|webp)$/iu.test(attachment.fileName) ? "$image" : "$description";
 }
 function attachmentKey(attachment, index) {
   return attachment.attachmentId || `${index}:${attachment.fileName}:${attachment.size ?? ""}`;

package/src/client/conversation/AssistantModelControl.vue

@@ -11,7 +11,7 @@
         :aria-label="t('jskit.assistant.model.chooseAi')"
         class="assistant-model-control__button"
         density="comfortable"
-        :icon="mdiCogOutline"
+        icon="$settings"
         rounded="lg"
         size="small"
         :title="buttonTitle ?? t('jskit.assistant.model.chooseAi')"
@@ -29,7 +29,7 @@
     >
       <header class="assistant-model-control__header">
         <v-avatar color="primary" size="36" variant="tonal">
-          <v-icon :icon="mdiBrain" size="20" />
+          <v-icon icon="$psychology" size="20" />
         </v-avatar>
         <div>
           <strong class="text-title-small">{{ t("jskit.assistant.model.controls") }}</strong>
@@ -43,7 +43,7 @@
         rounded="lg"
         role="status"
       >
-        <v-icon :icon="mdiClockOutline" size="18" />
+        <v-icon icon="$schedule" size="18" />
         <span>{{ t("jskit.assistant.model.viewOnly") }}</span>
       </v-sheet>
 
@@ -96,7 +96,7 @@
               @click="selectProvider(provider.id)"
             >
               <span>{{ provider.label }}</span>
-              <v-icon v-if="modelProviderId === provider.id" :icon="mdiCheck" size="15" />
+              <v-icon v-if="modelProviderId === provider.id" icon="$check" size="15" />
             </v-btn>
           </div>
         </section>
@@ -135,7 +135,7 @@
               @click="selectModel(model.id)"
             >
               <span>{{ model.label }}</span>
-              <v-icon v-if="modelId === model.id" :icon="mdiCheck" size="15" />
+              <v-icon v-if="modelId === model.id" icon="$check" size="15" />
             </v-btn>
           </div>
           <span v-else class="assistant-model-control__empty">{{ t("jskit.assistant.model.noModels") }}</span>
@@ -165,7 +165,7 @@
               @click="selectVariant(variant.id)"
             >
               <span>{{ variant.label }}</span>
-              <v-icon v-if="variantId === variant.id" :icon="mdiCheck" size="15" />
+              <v-icon v-if="variantId === variant.id" icon="$check" size="15" />
             </v-btn>
           </div>
         </section>
@@ -189,7 +189,6 @@
 </template>
 
 <script setup>
-import { mdiBrain, mdiCheck, mdiClockOutline, mdiCogOutline } from "@mdi/js";
 import { useJskitText } from "../i18n.js";
 
 const { t } = useJskitText();

package/src/client/conversation/AssistantQuestionInputs.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { mdiPencilOutline } from "@mdi/js";
 import { useJskitText } from "../i18n.js";
 
 const { t } = useJskitText();
@@ -23,7 +22,7 @@ const emit = defineEmits(["dismiss"]);
         :aria-label="t('jskit.assistant.questions.answerNormally')"
         class="ml-auto"
         color="primary"
-        :prepend-icon="mdiPencilOutline"
+        prepend-icon="$edit"
         size="small"
         variant="tonal"
         @click="emit('dismiss')"

package/src/client/conversation/AssistantTranscript.css

@@ -325,13 +325,13 @@
 }
 
 .assistant-transcript__message-header time {
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  color: rgb(var(--v-theme-on-surface-variant));
   font-weight: 650;
 }
 
 .assistant-transcript__message-footer {
   align-items: center;
-  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  color: rgb(var(--v-theme-on-surface-variant));
   display: flex;
   font-size: 0.88rem;
   font-weight: 500;

package/src/client/conversation/AssistantTranscript.vue

@@ -11,7 +11,7 @@
       :aria-label="reloadLabel"
       class="assistant-transcript__reload"
       :disabled="reloading"
-      :icon="mdiRefresh"
+      icon="$refresh"
       size="x-small"
       :title="reloadLabel"
       type="button"
@@ -78,7 +78,7 @@
       >
         <div class="assistant-transcript__assistant-header">
           <span class="assistant-transcript__avatar assistant-transcript__avatar--assistant">
-            <v-icon :icon="mdiRobotOutline" size="16" />
+            <v-icon icon="$smartToy" size="16" />
           </span>
           <div class="assistant-transcript__message-header">
             <span>{{ assistantName }}</span>
@@ -120,7 +120,7 @@
         >
           <v-icon
             class="assistant-transcript__system-icon"
-            :icon="mdiInformationOutline"
+            icon="$info"
             size="15"
           />
           <div class="assistant-transcript__system-body">
@@ -225,7 +225,7 @@
             </div>
           </div>
           <span class="assistant-transcript__avatar assistant-transcript__avatar--user">
-            <v-icon :icon="mdiAccountOutline" size="15" />
+            <v-icon icon="$person" size="15" />
           </span>
         </div>
 
@@ -245,7 +245,7 @@
         >
           <div class="assistant-transcript__assistant-header">
             <span class="assistant-transcript__avatar assistant-transcript__avatar--assistant">
-              <v-icon :icon="mdiRobotOutline" size="16" />
+              <v-icon icon="$smartToy" size="16" />
             </span>
             <div class="assistant-transcript__message-header">
               <span :title="entry.message.assistantDetails || entry.turn.assistantDetails || undefined">
@@ -319,12 +319,6 @@
 import AssistantMessageAttachments from "./AssistantMessageAttachments.vue";
 import AssistantConversationStatus from "./AssistantConversationStatus.vue";
 import { computed, ref, watch } from "vue";
-import {
-  mdiAccountOutline,
-  mdiInformationOutline,
-  mdiRefresh,
-  mdiRobotOutline
-} from "@mdi/js";
 import LongTextInlineParts from "./LongTextInlineParts.vue";
 import LongTextPreviewBlocks from "./LongTextPreviewBlocks.vue";
 import AssistantProgress from "./AssistantProgress.vue";

package/src/client/conversation/LongTextPreviewBlocks.vue

@@ -310,13 +310,13 @@ h5.studio-long-text-review__heading {
   word-break: normal;
 }
 
-.studio-long-text-review__table-cell--right {
+.studio-long-text-review__table .studio-long-text-review__table-cell--right {
   font-variant-numeric: tabular-nums;
-  text-align: right !important;
+  text-align: right;
 }
 
-.studio-long-text-review__table-cell--center {
-  text-align: center !important;
+.studio-long-text-review__table .studio-long-text-review__table-cell--center {
+  text-align: center;
 }
 
 .studio-long-text-review__details {

package/src/client/conversation/attachmentQueueItems.js

@@ -1,5 +1,4 @@
 // How the attachment queue shows each item: its key, name, phase, progress, status text, icon and colour.
-import { mdiAlertCircleOutline, mdiCheckCircleOutline, mdiFileOutline } from "@mdi/js";
 import { useJskitText } from "../i18n.js";
 import { attachmentSizeText } from "./attachmentSize.js";
 
@@ -86,12 +85,12 @@ function itemCancelable(item = {}) {
 
 function itemIcon(item = {}) {
   if (itemPhase(item) === "ready") {
-    return mdiCheckCircleOutline;
+    return "$checkCircle";
   }
   if (itemPhase(item) === "failed") {
-    return mdiAlertCircleOutline;
+    return "$error";
   }
-  return mdiFileOutline;
+  return "$description";
 }
 
 function itemColor(item = {}) {

package/test/conversationAvatarThumbnail.test.js

@@ -0,0 +1,62 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { readFileSync } from "node:fs";
+import { registerHooks } from "node:module";
+import { compileScript, parse } from "@vue/compiler-sfc";
+import { createSSRApp, defineComponent, h } from "vue";
+import { renderToString } from "vue/server-renderer";
+
+const elementUrl = new URL("../src/client/conversation/AssistantConversationElement.vue", import.meta.url).href;
+const textUrl = new URL("../src/client/i18n.js", import.meta.url).href;
+
+async function importElement() {
+  const hooks = registerHooks({
+    load(url, context, nextLoad) {
+      if (url === textUrl) {
+        return { format: "module", shortCircuit: true, source: "export function useJskitText() { return { t: (key) => key }; }" };
+      }
+      if (!url.endsWith(".vue")) return nextLoad(url, context);
+      if (url !== elementUrl) return { format: "module", shortCircuit: true, source: "export default { render: () => null };" };
+      const { descriptor } = parse(readFileSync(new URL(url), "utf8"));
+      return {
+        format: "module", shortCircuit: true,
+        source: compileScript(descriptor, { id: "assistant-avatar-thumbnail", inlineTemplate: true }).content
+      };
+    }
+  });
+  try {
+    return (await import(elementUrl)).default;
+  } finally {
+    hooks.deregister();
+  }
+}
+
+async function renderShowAvatarButton(element, slots) {
+  const app = createSSRApp({ render: () => h(element, { adapter: { conversation: { turns: [] } }, avatarSize: "hidden" }, slots) });
+  app.component("VBtn", defineComponent({ setup: (_props, { slots: content }) => () => h("button", content.default?.()) }));
+  app.component("VIcon", defineComponent({ props: { icon: { type: String, default: "" } }, setup: (props) => () => h("i", { "data-icon": props.icon }) }));
+  const html = await renderToString(app);
+  const buttons = [...html.matchAll(/<button([^>]*)>(.*?)<\/button>/gs)].filter(([, attributes]) => attributes.includes('aria-label="jskit.assistant.chat.showAvatar"'));
+  assert.equal(buttons.length, 1, "One Show avatar button while the avatar is hidden");
+  const [, attributes, content] = buttons[0];
+  assert.match(attributes, /title="jskit.assistant.chat.showAvatar"/u);
+  assert.match(attributes, /width="44"/u);
+  return content;
+}
+
+test("the hidden avatar's Show button shows the avatar-thumbnail slot, or the account icon without one", async () => {
+  const element = await importElement();
+  const avatar = () => h("span", { class: "fixture-face" });
+
+  const thumbnail = await renderShowAvatarButton(element, {
+    avatar,
+    "avatar-thumbnail": ({ size, height }) => h("span", { class: "fixture-thumbnail", "data-size": size, "data-height": String(height) })
+  });
+  assert.match(thumbnail, /class="assistant-conversation__avatar-size-disc"/u);
+  assert.match(thumbnail, /<span class="fixture-thumbnail" data-size="hidden" data-height="0"><\/span>/u);
+  assert.doesNotMatch(thumbnail, /data-icon=/u);
+
+  const fallback = await renderShowAvatarButton(element, { avatar });
+  assert.match(fallback, /<i data-icon="\$accountCircle"[^>]*><\/i>/u);
+  assert.doesNotMatch(fallback, /fixture-thumbnail/u);
+});

package/test/transcriptTheme.browser.test.js

@@ -38,7 +38,7 @@ function readText(element) {
   return {
     color: [color.red, color.green, color.blue, color.alpha],
     onSurface: style.getPropertyValue("--v-theme-on-surface").split(",").map(Number),
-    mediumEmphasis: Number(style.getPropertyValue("--v-medium-emphasis-opacity")),
+    onSurfaceVariant: style.getPropertyValue("--v-theme-on-surface-variant").split(",").map(Number),
     contrast: (lighter + 0.05) / (darker + 0.05)
   };
 }
@@ -67,15 +67,17 @@ test("the task transcript's user bubble, header time and footer follow the light
         element.append(time);
       });
       const samples = {
-        "user bubble": [bubble.locator(".assistant-transcript__user-content"), 1],
-        "user footer": [bubble.locator(".assistant-transcript__message-footer time"), "medium"],
-        "assistant footer": [page.locator(".assistant-transcript__message-footer--assistant time").first(), "medium"],
-        "header time": [header.locator("time"), "medium"]
+        "user bubble": [bubble.locator(".assistant-transcript__user-content"), "on-surface"],
+        "user footer": [bubble.locator(".assistant-transcript__message-footer time"), "on-surface-variant"],
+        "assistant footer": [page.locator(".assistant-transcript__message-footer--assistant time").first(), "on-surface-variant"],
+        "header time": [header.locator("time"), "on-surface-variant"]
       };
-      for (const [name, [locator, alpha]] of Object.entries(samples)) {
+      // Material 3 secondary text is the solid on-surface-variant role, not on-surface at a lower opacity.
+      for (const [name, [locator, role]] of Object.entries(samples)) {
         const text = await locator.evaluate(readText);
-        assert.deepEqual(text.color.slice(0, 3), text.onSurface, `${theme} ${name}: the colour is the theme's on-surface`);
-        assert.equal(text.color[3], alpha === "medium" ? text.mediumEmphasis : alpha, `${theme} ${name}: the opacity`);
+        const expected = role === "on-surface" ? text.onSurface : text.onSurfaceVariant;
+        assert.deepEqual(text.color.slice(0, 3), expected, `${theme} ${name}: the colour is the theme's ${role}`);
+        assert.equal(text.color[3], 1, `${theme} ${name}: the opacity`);
         assert.ok(text.contrast >= 4.5, `${theme} ${name}: contrast ${text.contrast.toFixed(2)}:1 is under 4.5:1`);
       }
       await page.close();