mulmoclaude 0.9.2 → 0.9.4

package/src/components/FileTreePane.vue

@@ -1,30 +1,42 @@
 <template>
   <div class="w-72 flex-shrink-0 border-r border-gray-200 overflow-y-auto p-2 bg-gray-50">
-    <div class="flex justify-end items-center gap-2 pb-1 text-xs">
-      <span class="text-gray-400">{{ t("fileTreePane.sort") }}</span>
-      <div class="flex border border-gray-300 rounded overflow-hidden">
-        <button
-          type="button"
-          class="h-8 px-2.5 flex items-center gap-1 transition-colors"
-          :class="sortMode === 'name' ? 'bg-blue-50 text-blue-700 font-medium' : 'bg-white text-gray-500 hover:bg-gray-50'"
-          :aria-pressed="sortMode === 'name'"
-          :title="t('fileTreePane.sortByName')"
-          data-testid="file-sort-name"
-          @click="emit('update:sortMode', 'name')"
-        >
-          {{ t("fileTreePane.name") }}
-        </button>
-        <button
-          type="button"
-          class="h-8 px-2.5 flex items-center gap-1 transition-colors"
-          :class="sortMode === 'recent' ? 'bg-blue-50 text-blue-700 font-medium' : 'bg-white text-gray-500 hover:bg-gray-50'"
-          :aria-pressed="sortMode === 'recent'"
-          :title="t('fileTreePane.sortByRecent')"
-          data-testid="file-sort-recent"
-          @click="emit('update:sortMode', 'recent')"
-        >
-          {{ t("fileTreePane.recent") }}
-        </button>
+    <div class="flex flex-wrap justify-end items-center gap-x-3 gap-y-1 pb-1 text-xs">
+      <label class="flex items-center gap-1 text-gray-500 cursor-pointer select-none" :title="t('fileTreePane.showSystemFilesTitle')">
+        <input
+          type="checkbox"
+          class="h-3.5 w-3.5"
+          data-testid="file-tree-show-system-toggle"
+          :checked="showHiddenSystem"
+          @change="(e) => emit('update:showHiddenSystem', (e.target as HTMLInputElement).checked)"
+        />
+        {{ t("fileTreePane.showSystemFiles") }}
+      </label>
+      <div class="flex items-center gap-2">
+        <span class="text-gray-400">{{ t("fileTreePane.sort") }}</span>
+        <div class="flex border border-gray-300 rounded overflow-hidden">
+          <button
+            type="button"
+            class="h-8 px-2.5 flex items-center gap-1 transition-colors"
+            :class="sortMode === 'name' ? 'bg-blue-50 text-blue-700 font-medium' : 'bg-white text-gray-500 hover:bg-gray-50'"
+            :aria-pressed="sortMode === 'name'"
+            :title="t('fileTreePane.sortByName')"
+            data-testid="file-sort-name"
+            @click="emit('update:sortMode', 'name')"
+          >
+            {{ t("fileTreePane.name") }}
+          </button>
+          <button
+            type="button"
+            class="h-8 px-2.5 flex items-center gap-1 transition-colors"
+            :class="sortMode === 'recent' ? 'bg-blue-50 text-blue-700 font-medium' : 'bg-white text-gray-500 hover:bg-gray-50'"
+            :aria-pressed="sortMode === 'recent'"
+            :title="t('fileTreePane.sortByRecent')"
+            data-testid="file-sort-recent"
+            @click="emit('update:sortMode', 'recent')"
+          >
+            {{ t("fileTreePane.recent") }}
+          </button>
+        </div>
       </div>
     </div>
     <div v-if="treeError" class="p-2 text-xs text-red-600">
@@ -38,6 +50,7 @@
       :recent-paths="recentPaths"
       :children-by-path="childrenByPath"
       :sort-mode="sortMode"
+      :show-hidden-system="showHiddenSystem"
       @select="emit('select', $event)"
       @load-children="emit('loadChildren', $event)"
       @create-file="emit('createFile', $event)"
@@ -55,6 +68,7 @@
         :recent-paths="emptySet"
         :children-by-path="childrenByPath"
         :sort-mode="sortMode"
+        show-hidden-system
         @select="emit('select', $event)"
         @load-children="emit('loadChildren', $event)"
       />
@@ -78,12 +92,14 @@ defineProps<{
   selectedPath: string | null;
   recentPaths: Set<string>;
   sortMode: FileSortMode;
+  showHiddenSystem: boolean;
 }>();
 
 const emit = defineEmits<{
   select: [path: string];
   loadChildren: [path: string];
   "update:sortMode": [mode: FileSortMode];
+  "update:showHiddenSystem": [next: boolean];
   createFile: [args: { folder: string; filename: string; resolve: (ok: boolean, error?: string) => void }];
 }>();
 

package/src/components/FilesView.vue

@@ -9,9 +9,11 @@
       :selected-path="selectedPath"
       :recent-paths="recentPaths"
       :sort-mode="sortMode"
+      :show-hidden-system="showHiddenSystem"
       @select="selectFile"
       @load-children="loadDirChildren"
       @update:sort-mode="setSortMode"
+      @update:show-hidden-system="setShowHiddenSystem"
       @create-file="handleCreateFile"
     />
     <!-- Content pane -->
@@ -72,6 +74,7 @@ import { useFileTree } from "../composables/useFileTree";
 import { useFileSelection, isValidFilePath, readPathMatch } from "../composables/useFileSelection";
 import { useMarkdownMode } from "../composables/useMarkdownMode";
 import { useFileSortMode } from "../composables/useFileSortMode";
+import { useShowHiddenSystemFiles } from "../composables/useShowHiddenSystemFiles";
 import { useContentDisplay } from "../composables/useContentDisplay";
 import { useMarkdownLinkHandler } from "../composables/useMarkdownLinkHandler";
 import { apiPost, apiPut } from "../utils/api";
@@ -100,6 +103,7 @@ const { selectedPath, content, contentLoading, contentError, loadContent, select
 const { mdRawMode, toggleMdRaw } = useMarkdownMode();
 
 const { sortMode, setSortMode } = useFileSortMode();
+const { showHiddenSystem, setShowHiddenSystem } = useShowHiddenSystemFiles();
 
 const { isMarkdown, isHtml, isJson, isJsonl, sandboxedHtml, htmlPreviewUrl, jsonTokens, jsonlLines, mdFrontmatter } = useContentDisplay(selectedPath, content);
 

package/src/components/RemoteHostControl.vue

@@ -52,6 +52,20 @@
       </div>
 
       <p v-if="error" class="mt-2 text-red-600 break-words" data-testid="remote-host-error">{{ error }}</p>
+
+      <div class="mt-3 pt-2 border-t border-gray-100 text-[11px] leading-snug text-gray-600 space-y-2" data-testid="remote-host-help">
+        <p>{{ t("remoteHost.description") }}</p>
+        <i18n-t keypath="remoteHost.howTo" tag="p" scope="global">
+          <template #url>
+            <a :href="MOBILE_URL" target="_blank" rel="noopener noreferrer" class="font-mono text-blue-600 hover:underline break-all">{{ MOBILE_URL }}</a>
+          </template>
+        </i18n-t>
+        <i18n-t keypath="remoteHost.customViewHint" tag="p" scope="global">
+          <template #keyword>
+            <code class="px-1 py-0.5 rounded bg-gray-100 text-gray-800">custom remote view</code>
+          </template>
+        </i18n-t>
+      </div>
     </div>
   </div>
 </template>
@@ -82,6 +96,10 @@ interface StatusResponse {
 
 const { t } = useI18n();
 
+// Mobile companion PWA. Shown in the popover as help text; not fetched from
+// this desktop app, so no runtime env override is needed.
+const MOBILE_URL = "https://mulmoserver.web.app";
+
 const open = ref(false);
 const busy = ref(false);
 const error = ref<string | null>(null);

package/src/components/SessionHistoryPanel.vue

@@ -35,7 +35,8 @@
         :key="session.id"
         tabindex="0"
         role="button"
-        :aria-label="t('sessionHistoryPanel.openRowAria', { preview: session.preview || t('sessionHistoryPanel.noMessages') })"
+        :aria-label="t('sessionHistoryPanel.openRowAria', { preview: primaryText(session) })"
+        :title="primaryText(session)"
         class="relative cursor-pointer rounded p-2 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
         :class="rowClasses(session)"
         :data-testid="`session-item-${session.id}`"
@@ -91,20 +92,22 @@
             {{ t("sessionHistoryPanel.delete") }}
           </button>
         </div>
-        <div class="flex items-center gap-1.5">
-          <SessionRoleIcon :session="session" :roles="roles" size="sm" />
-          <p class="truncate flex-1 min-w-0" :class="previewClasses(session)">
-            {{ session.preview || t("sessionHistoryPanel.noMessages") }}
+        <!-- Primary line prefers the AI-generated summary (chat indexer,
+             #123) when present — it's typically more informative than
+             the first user message. Fall back to the first user message,
+             then to a "no messages" placeholder. `line-clamp-2` lets a
+             summary wrap so more of it is readable at a glance; the raw
+             first-message fallback stays on a single line via `truncate`
+             so short prompts don't disturb row heights. -->
+        <div class="flex items-start gap-1.5">
+          <SessionRoleIcon :session="session" :roles="roles" size="sm" class="flex-shrink-0 mt-0.5" />
+          <p class="flex-1 min-w-0" :class="[previewClasses(session), sessionHasVisibleSummary(session) ? 'line-clamp-2' : 'truncate']">
+            {{ primaryText(session) }}
           </p>
-          <span v-if="isSessionRunning(session)" class="flex-shrink-0 flex items-center" :aria-label="t('sessionHistoryPanel.running')">
+          <span v-if="isSessionRunning(session)" class="flex-shrink-0 flex items-center mt-0.5" :aria-label="t('sessionHistoryPanel.running')">
             <span class="w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse" />
           </span>
         </div>
-        <!-- Optional second line: AI-generated summary of the
-             session, populated by the chat indexer (#123). -->
-        <p v-if="session.summary" class="text-xs text-gray-500 truncate mt-0.5">
-          {{ session.summary }}
-        </p>
       </div>
     </div>
   </div>
@@ -118,6 +121,7 @@ import type { SessionSummary, SessionOrigin } from "../types/session";
 import { SESSION_ORIGINS } from "../types/session";
 import { HISTORY_FILTERS, HISTORY_FILTER_ORDER, type HistoryFilter } from "../config/historyFilters";
 import { isLongRunningConversation } from "../utils/session/longRunning";
+import { resolveSessionPrimaryText, sessionHasVisibleSummary } from "../utils/session/sessionPreview";
 import { formatDate } from "../utils/format/date";
 import SessionRoleIcon from "./SessionRoleIcon.vue";
 import FilterChip from "./FilterChip.vue";
@@ -199,6 +203,15 @@ function previewClasses(session: SessionSummary): string {
   return "text-gray-700";
 }
 
+// Primary line resolution: prefer the AI summary (trim + whitespace
+// guarded so a summarizer returning "   " doesn't blank the row) →
+// first user message → localised placeholder. Same call is used for
+// visible text, aria-label, and the hover title so all three stay in
+// lockstep.
+function primaryText(session: SessionSummary): string {
+  return resolveSessionPrimaryText(session) ?? t("sessionHistoryPanel.noMessages");
+}
+
 // ── Row action menu ─────────────────────────────────────────
 //
 // Only one popover is open at a time, tracked by session id. A

package/src/components/SettingsChatIndexTab.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="space-y-3" data-testid="settings-chat-index-tab">
+    <p class="text-sm text-gray-700">{{ t("settingsModal.chatIndexTab.description") }}</p>
+
+    <div class="space-y-2">
+      <label class="block text-sm font-medium text-gray-800" for="settings-chat-index-mode">{{ t("settingsModal.chatIndexTab.modeLabel") }}</label>
+      <select
+        id="settings-chat-index-mode"
+        v-model="modeDraft"
+        class="w-full px-3 py-2 text-sm rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        data-testid="settings-chat-index-mode-select"
+        @change="save"
+      >
+        <option v-for="mode in CHAT_INDEX_MODES" :key="mode" :value="mode">{{ t(`settingsModal.chatIndexTab.mode.${mode}`) }}</option>
+      </select>
+      <p class="text-xs text-gray-500">{{ t("settingsModal.chatIndexTab.helperText") }}</p>
+    </div>
+
+    <div v-if="loaded && !errorMessage" class="flex items-center gap-3 text-xs">
+      <span :class="statusColour" data-testid="settings-chat-index-status">
+        {{ statusText }}
+      </span>
+    </div>
+
+    <p v-if="errorMessage" class="text-sm text-red-700" role="alert" data-testid="settings-chat-index-error">{{ errorMessage }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { apiGet, apiPut, type ApiResult } from "../utils/api";
+import { API_ROUTES } from "../config/apiRoutes";
+
+const CHAT_INDEX_MODES = ["off", "haiku", "sonnet"] as const;
+type ChatIndexMode = (typeof CHAT_INDEX_MODES)[number];
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  reloadToken: number;
+}>();
+
+const emit = defineEmits<{
+  saved: [];
+}>();
+
+interface SettingsResponse {
+  settings: { chatIndex?: ChatIndexMode };
+}
+
+const modeDraft = ref<ChatIndexMode>("off");
+const storedMode = ref<ChatIndexMode>("off");
+const loaded = ref(false);
+const saving = ref(false);
+const errorMessage = ref("");
+
+const statusText = computed(() => {
+  if (saving.value) return t("common.saving");
+  return t(`settingsModal.chatIndexTab.status.${storedMode.value}`);
+});
+
+const statusColour = computed(() => {
+  if (saving.value) return "text-gray-500";
+  return storedMode.value === "off" ? "text-gray-500" : "text-green-600";
+});
+
+async function load(): Promise<void> {
+  errorMessage.value = "";
+  const response = await apiGet<SettingsResponse>(API_ROUTES.config.base);
+  if (!response.ok) {
+    errorMessage.value = response.error || t("settingsModal.chatIndexTab.loadError");
+    return;
+  }
+  storedMode.value = response.data.settings.chatIndex ?? "off";
+  modeDraft.value = storedMode.value;
+  loaded.value = true;
+}
+
+async function save(): Promise<void> {
+  if (saving.value) return;
+  if (modeDraft.value === storedMode.value) return;
+  const requested = modeDraft.value;
+  saving.value = true;
+  errorMessage.value = "";
+  // The Settings tab uses the PATCH endpoint (`config.settings`) — the
+  // full-shape `config.base` PUT expects `{ settings, mcp }` and would
+  // reject a bare `{ chatIndex }` payload. Send null on "off" so the
+  // server drops the field and settings.json stays default-clean.
+  const payload = { chatIndex: requested === "off" ? null : requested };
+  const response = await apiPut<unknown>(API_ROUTES.config.settings, payload);
+  saving.value = false;
+  applySaveOutcome(response, requested);
+}
+
+// On failure with drift, respect the user's newer selection and retry.
+// On failure without drift, revert modeDraft so re-selecting the same
+// option fires @change again — otherwise the select value hasn't
+// changed and the user is stuck with no way to retry.
+function applySaveOutcome(response: ApiResult<unknown>, requested: ChatIndexMode): void {
+  if (!response.ok) {
+    errorMessage.value = response.error || t("settingsModal.chatIndexTab.saveError");
+    if (modeDraft.value !== requested) void save();
+    else modeDraft.value = storedMode.value;
+    return;
+  }
+  storedMode.value = requested;
+  emit("saved");
+  if (modeDraft.value !== requested) void save();
+}
+
+watch(
+  () => props.reloadToken,
+  () => {
+    void load();
+  },
+  { immediate: true },
+);
+</script>

package/src/components/SettingsJournalTab.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="space-y-3" data-testid="settings-journal-tab">
+    <p class="text-sm text-gray-700">{{ t("settingsModal.journalTab.description") }}</p>
+
+    <div class="space-y-2">
+      <label class="block text-sm font-medium text-gray-800" for="settings-journal-mode">{{ t("settingsModal.journalTab.modeLabel") }}</label>
+      <select
+        id="settings-journal-mode"
+        v-model="modeDraft"
+        class="w-full px-3 py-2 text-sm rounded border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500"
+        data-testid="settings-journal-mode-select"
+        @change="save"
+      >
+        <option v-for="mode in JOURNAL_MODES" :key="mode" :value="mode">{{ t(`settingsModal.journalTab.mode.${mode}`) }}</option>
+      </select>
+      <p class="text-xs text-gray-500">{{ t("settingsModal.journalTab.helperText") }}</p>
+    </div>
+
+    <div v-if="loaded && !errorMessage" class="flex items-center gap-3 text-xs">
+      <span :class="statusColour" data-testid="settings-journal-status">
+        {{ statusText }}
+      </span>
+    </div>
+
+    <p v-if="errorMessage" class="text-sm text-red-700" role="alert" data-testid="settings-journal-error">{{ errorMessage }}</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { apiGet, apiPut, type ApiResult } from "../utils/api";
+import { API_ROUTES } from "../config/apiRoutes";
+
+const JOURNAL_MODES = ["off", "haiku", "sonnet"] as const;
+type JournalMode = (typeof JOURNAL_MODES)[number];
+
+const { t } = useI18n();
+
+const props = defineProps<{
+  reloadToken: number;
+}>();
+
+const emit = defineEmits<{
+  saved: [];
+}>();
+
+interface SettingsResponse {
+  settings: { journal?: JournalMode };
+}
+
+const modeDraft = ref<JournalMode>("off");
+const storedMode = ref<JournalMode>("off");
+const loaded = ref(false);
+const saving = ref(false);
+const errorMessage = ref("");
+
+const statusText = computed(() => {
+  if (saving.value) return t("common.saving");
+  return t(`settingsModal.journalTab.status.${storedMode.value}`);
+});
+
+const statusColour = computed(() => {
+  if (saving.value) return "text-gray-500";
+  return storedMode.value === "off" ? "text-gray-500" : "text-green-600";
+});
+
+async function load(): Promise<void> {
+  errorMessage.value = "";
+  const response = await apiGet<SettingsResponse>(API_ROUTES.config.base);
+  if (!response.ok) {
+    errorMessage.value = response.error || t("settingsModal.journalTab.loadError");
+    return;
+  }
+  storedMode.value = response.data.settings.journal ?? "off";
+  modeDraft.value = storedMode.value;
+  loaded.value = true;
+}
+
+async function save(): Promise<void> {
+  if (saving.value) return;
+  if (modeDraft.value === storedMode.value) return;
+  const requested = modeDraft.value;
+  saving.value = true;
+  errorMessage.value = "";
+  // PATCH endpoint (not the atomic base) so a bare `{ journal }` body
+  // is accepted. Send null on "off" so settings.json stays default-clean.
+  const payload = { journal: requested === "off" ? null : requested };
+  const response = await apiPut<unknown>(API_ROUTES.config.settings, payload);
+  saving.value = false;
+  applySaveOutcome(response, requested);
+}
+
+// On failure with drift, respect the user's newer selection and retry.
+// On failure without drift, revert modeDraft so re-selecting the same
+// option fires @change again — otherwise the select value hasn't
+// changed and the user is stuck with no way to retry.
+function applySaveOutcome(response: ApiResult<unknown>, requested: JournalMode): void {
+  if (!response.ok) {
+    errorMessage.value = response.error || t("settingsModal.journalTab.saveError");
+    if (modeDraft.value !== requested) void save();
+    else modeDraft.value = storedMode.value;
+    return;
+  }
+  storedMode.value = requested;
+  emit("saved");
+  if (modeDraft.value !== requested) void save();
+}
+
+watch(
+  () => props.reloadToken,
+  () => {
+    void load();
+  },
+  { immediate: true },
+);
+</script>

package/src/components/SettingsModal.vue

@@ -167,6 +167,10 @@
             <SettingsModelTab v-else-if="activeTab === 'model'" :reload-token="modelReloadToken" @saved="emit('saved')" />
 
             <SettingsVoiceTab v-else-if="activeTab === 'voice'" :reload-token="voiceReloadToken" />
+
+            <SettingsChatIndexTab v-else-if="activeTab === 'chatIndex'" :reload-token="chatIndexReloadToken" @saved="emit('saved')" />
+
+            <SettingsJournalTab v-else-if="activeTab === 'journal'" :reload-token="journalReloadToken" @saved="emit('saved')" />
           </template>
         </div>
       </div>
@@ -197,6 +201,8 @@ import SettingsMapTab from "./SettingsMapTab.vue";
 import SettingsPhotosTab from "./SettingsPhotosTab.vue";
 import SettingsModelTab from "./SettingsModelTab.vue";
 import SettingsVoiceTab from "./SettingsVoiceTab.vue";
+import SettingsChatIndexTab from "./SettingsChatIndexTab.vue";
+import SettingsJournalTab from "./SettingsJournalTab.vue";
 import SkillsView from "../plugins/manageSkills/View.vue";
 import RolesView from "./RolesView.vue";
 import PluginScopedRoot from "./PluginScopedRoot.vue";
@@ -245,7 +251,7 @@ const emit = defineEmits<{
 // update / remove persist immediately).
 const mcpTabRef = ref<{ flushDraft: () => boolean; hasPendingDraft: () => boolean } | null>(null);
 
-type TabId = "gemini" | "tools" | "mcp" | "dirs" | "refs" | "map" | "photos" | "model" | "voice" | "skills" | "roles";
+type TabId = "gemini" | "tools" | "mcp" | "dirs" | "refs" | "map" | "photos" | "model" | "voice" | "chatIndex" | "journal" | "skills" | "roles";
 
 const activeTab = ref<TabId>("tools");
 
@@ -261,7 +267,7 @@ const isFullTab = computed(() => FULL_TABS.includes(activeTab.value));
 // item is filtered out by `visibleGroups` when geminiAvailable === true
 // (env var present → user has nothing to configure).
 const GROUPS: readonly { key: string; items: readonly TabId[] }[] = [
-  { key: "llm", items: ["model", "voice", "tools", "gemini"] },
+  { key: "llm", items: ["model", "voice", "chatIndex", "journal", "tools", "gemini"] },
   { key: "servers", items: ["mcp"] },
   { key: "workspace", items: ["dirs", "refs"] },
   { key: "plugins", items: ["map", "photos"] },
@@ -294,6 +300,8 @@ function onMapSaved(): void {
 const photosReloadToken = ref(0);
 const modelReloadToken = ref(0);
 const voiceReloadToken = ref(0);
+const chatIndexReloadToken = ref(0);
+const journalReloadToken = ref(0);
 const toolsText = ref("");
 // Server truth for tools — updated on load and on a successful Save
 // from the Tools tab. `toolsDirty` compares this against `toolsText`
@@ -501,6 +509,8 @@ watch(
       photosReloadToken.value += 1;
       modelReloadToken.value += 1;
       voiceReloadToken.value += 1;
+      chatIndexReloadToken.value += 1;
+      journalReloadToken.value += 1;
       statusMessage.value = "";
       statusError.value = false;
     }

package/src/composables/collections/uiHost.ts

@@ -12,6 +12,9 @@
 // `notifiedSeverities` returns an empty map.
 import {
   configureCollectionUi,
+  type CollectionRemoteViewResult,
+  type CollectionRemoteViewMutateResult,
+  type CollectionRemoteViewItemsResult,
   type CollectionViewI18nResult,
   type CollectionViewToken,
   type RegistryListResponse,
@@ -57,6 +60,10 @@ const collectionActionUrl = (slug: string, actionId: string): string =>
   withSlug(API_ROUTES.collections.collectionAction, slug).replace(":actionId", encodeURIComponent(actionId));
 const viewDeleteUrl = (slug: string, viewId: string): string =>
   withSlug(API_ROUTES.collections.viewDelete, slug).replace(":viewId", encodeURIComponent(viewId));
+const remoteViewMutateUrl = (slug: string, viewId: string): string =>
+  withSlug(API_ROUTES.collections.remoteViewMutate, slug).replace(":viewId", encodeURIComponent(viewId));
+const remoteViewItemsUrl = (slug: string, viewId: string): string =>
+  withSlug(API_ROUTES.collections.remoteViewItems, slug).replace(":viewId", encodeURIComponent(viewId));
 
 // ── Deferred app bindings (need a component context; set by App.vue setup) ──
 type StartChat = (prompt: string, role: string) => void;
@@ -98,6 +105,14 @@ configureCollectionUi({
     }
   },
   fetchViewI18n: (slug, viewId, locale) => apiGet<CollectionViewI18nResult>(withSlug(API_ROUTES.collections.viewI18n, slug), { id: viewId, locale }),
+  fetchRemoteView: (slug, viewId, locale) => apiGet<CollectionRemoteViewResult>(withSlug(API_ROUTES.collections.remoteView, slug), { id: viewId, locale }),
+  mutateRemoteView: (slug, viewId, request) => apiPost<CollectionRemoteViewMutateResult>(remoteViewMutateUrl(slug, viewId), request),
+  fetchRemoteViewItems: (slug, viewId, request) =>
+    apiGet<CollectionRemoteViewItemsResult>(remoteViewItemsUrl(slug, viewId), {
+      offset: request.offset,
+      limit: request.limit,
+      fields: request.fields?.join(",") || undefined,
+    }),
   buildViewSrcdoc: (html, boot) => buildCustomViewSrcdoc(html, boot),
 
   // record CRUD + actions

package/src/composables/collections/useDynamicShortcutIcons.ts

@@ -0,0 +1,93 @@
+// Keeps pinned launcher shortcuts for collections that declare a
+// `dynamicIcon` (see `CollectionSchema.dynamicIcon`) live: subscribes to
+// each dynamic collection's source collection(s) and re-reconciles the
+// shortcut cache whenever their records change, so the launcher icon
+// tracks the data state live instead of waiting for the next
+// Collections-index visit — `CollectionsIndexView`'s own reconcile-on-mount
+// remains the fallback for a cold boot, before this composable's first
+// fetch resolves.
+//
+// Mounted once at app level (src/App.vue) so it runs regardless of
+// whether the Collections index is open. Module-singleton state, like
+// `useShortcuts` — there's only ever one launcher to keep live.
+
+import { onMounted, onUnmounted, ref } from "vue";
+import { collectionUi } from "@mulmoclaude/collection-plugin/vue";
+import { useShortcuts } from "../useShortcuts";
+import type { CollectionSummary } from "@mulmoclaude/core/collection";
+
+/** Wait for a burst of source-collection changes to settle (e.g. a feed
+ *  refresh writing several records) before re-fetching, rather than
+ *  re-fetching per record. */
+const SOURCE_CHANGE_DEBOUNCE_MS = 300;
+
+type Unsubscribe = () => void;
+
+const summaries = ref<CollectionSummary[]>([]);
+let subscriptions: Unsubscribe[] = [];
+let debounceHandle: ReturnType<typeof setTimeout> | null = null;
+let refreshSeq = 0;
+
+/** Slugs of every source collection a dynamic-icon shortcut watches,
+ *  deduped (two dynamic collections can share a source). */
+function dynamicSourceSlugs(): string[] {
+  const slugs = new Set<string>();
+  for (const summary of summaries.value) {
+    for (const source of summary.iconSources ?? []) slugs.add(source);
+  }
+  return [...slugs];
+}
+
+function clearSubscriptions(): void {
+  subscriptions.forEach((unsubscribe) => unsubscribe());
+  subscriptions = [];
+}
+
+/** Re-derive the watched source-collection set from the current
+ *  `summaries` and (re)subscribe — so a newly-added dynamic collection
+ *  gets watched on the next refresh. A host without `subscribeChanges`
+ *  (no pub/sub transport) leaves this a no-op; v1's reconcile-on-visit
+ *  still applies. */
+function resubscribe(): void {
+  clearSubscriptions();
+  const subscribe = collectionUi().subscribeChanges;
+  if (!subscribe) return;
+  subscriptions = dynamicSourceSlugs().map((slug) => subscribe(slug, scheduleRefresh));
+}
+
+function scheduleRefresh(): void {
+  if (debounceHandle) clearTimeout(debounceHandle);
+  debounceHandle = setTimeout(() => {
+    debounceHandle = null;
+    void refresh();
+  }, SOURCE_CHANGE_DEBOUNCE_MS);
+}
+
+/** Fetch the authoritative collections list, reconcile pinned
+ *  `"collection"` shortcuts against it, and re-derive which source
+ *  collections to watch. Feed-source entries are excluded — they're
+ *  reconciled separately (kind `"feed"`) by `FeedsView`. A failed fetch
+ *  leaves the prior summaries (and subscriptions) untouched. A monotonic
+ *  `refreshSeq` drops a superseded fetch so a slow older `listCollections`
+ *  can't resolve last and overwrite fresher summaries / resubscribe stale. */
+async function refresh(): Promise<void> {
+  const seq = ++refreshSeq;
+  const result = await collectionUi().listCollections();
+  if (seq !== refreshSeq) return;
+  if (!result.ok) return;
+  summaries.value = result.data.collections.filter((summary) => summary.source !== "feed");
+  resubscribe();
+  await useShortcuts().reconcile(
+    "collection",
+    summaries.value.map((summary) => ({ slug: summary.slug, title: summary.title, icon: summary.icon })),
+  );
+}
+
+/** Mount once at app level. No template — side effects only. */
+export function useDynamicShortcutIcons(): void {
+  onMounted(() => void refresh());
+  onUnmounted(() => {
+    if (debounceHandle) clearTimeout(debounceHandle);
+    clearSubscriptions();
+  });
+}