mulmoclaude 0.9.0 → 0.9.2

package/server/workspace/skills/writer.ts

@@ -121,10 +121,7 @@ export interface DeleteSkillInput {
 }
 
 export type DeleteResult =
-  | { kind: "deleted"; name: string }
-  | { kind: "invalid-slug"; slug: string }
-  | { kind: "not-found"; name: string }
-  | { kind: "user-scope"; name: string };
+  { kind: "deleted"; name: string } | { kind: "invalid-slug"; slug: string } | { kind: "not-found"; name: string } | { kind: "user-scope"; name: string };
 
 /**
  * Remove a project-scope skill (SKILL.md + its containing folder).

package/server/workspace/skills-preset.ts

@@ -1,9 +1,9 @@
 // Host shim — the preset-skill sync logic + the bundled assets (helps + preset
-// skills) now live in @mulmoclaude/workspace-setup (shared with MulmoTerminal so the
+// skills) now live in @mulmoclaude/core/workspace-setup (shared with MulmoTerminal so the
 // two apps seed a fresh workspace identically). Re-exported here so existing SERVER
 // importers (the catalog, collections/configure) keep their import paths.
 //
-// NOTE for Vue/browser code: import `isPresetSlug` from "@mulmoclaude/workspace-setup/slug"
+// NOTE for Vue/browser code: import `isPresetSlug` from "@mulmoclaude/core/workspace-setup/slug"
 // (browser-safe) — NOT from here. This `.` re-export pulls in node:fs via the sync code.
 export {
   syncPresetSkills,
@@ -13,4 +13,4 @@ export {
   type SyncPresetSkillsResult,
   type SyncActivePresetSkillsOptions,
   type SyncActivePresetSkillsResult,
-} from "@mulmoclaude/workspace-setup";
+} from "@mulmoclaude/core/workspace-setup";

package/server/workspace/wiki-pages/io.ts

@@ -23,8 +23,8 @@ import { mkdir, writeFile } from "node:fs/promises";
 import { readTextSafe } from "../../utils/files/safe.js";
 import { writeFileAtomic } from "../../utils/files/atomic.js";
 import { mergeFrontmatter, parseFrontmatter, serializeWithFrontmatter } from "../../utils/markdown/frontmatter.js";
-import { isSafeSlug } from "../../../src/lib/wiki-page/slug.js";
-import { wikiSlugFromAbsPath } from "../../../src/lib/wiki-page/paths.js";
+import { isSafeSlug } from "@mulmoclaude/core/wiki";
+import { wikiSlugFromAbsPath } from "@mulmoclaude/core/wiki/paths";
 import { workspacePath as defaultWorkspacePath } from "../workspace.js";
 import { WORKSPACE_DIRS } from "../paths.js";
 import { appendSnapshot } from "./snapshot.js";

package/server/workspace/workspace.ts

@@ -5,9 +5,9 @@ import { log } from "../system/logger/index.js";
 import { EAGER_WORKSPACE_DIRS, WORKSPACE_PATHS, workspacePath } from "./paths.js";
 import { readWorkspaceTextSync, writeWorkspaceTextSync } from "../utils/files/workspace-io.js";
 import { loadCustomDirs, ensureCustomDirs } from "./custom-dirs.js";
-// Helps + preset skills + their sync logic now live in @mulmoclaude/workspace-setup
+// Helps + preset skills + their sync logic now live in @mulmoclaude/core/workspace-setup
 // (shared with MulmoTerminal); the bundled source dirs come from the package.
-import { seedHelps, presetSkillsAssetDir, syncActivePresetSkills, syncPresetSkills } from "@mulmoclaude/workspace-setup";
+import { seedHelps, presetSkillsAssetDir, syncActivePresetSkills, syncPresetSkills } from "@mulmoclaude/core/workspace-setup";
 
 // Re-exported so existing callers (`import { workspacePath } from
 // "./workspace.js"`) keep working. See workspace-paths.ts for the

package/src/App.vue

@@ -21,25 +21,28 @@
             :active-tool-name="selectedResult?.toolName ?? null"
             :active-view-mode="currentPage"
             :shortcuts="shortcuts"
+            :active-session-count="activeSessionCount"
+            :unread-count="unreadCount"
             @navigate="onPluginNavigate"
             @navigate-shortcut="onShortcutNavigate"
+            @navigate-chat="handleHomeClick"
           />
         </div>
       </div>
-      <!-- Row 2: role selector + session tabs. Shown whenever the
-           side panel is hidden — Row 2 and the side panel are
-           mutually exclusive. The header-controls wrapper is pinned
-           to 264px (w-72 minus px-3 padding on each side) so that
+      <!-- Row 2: role selector + session tabs. Chat-only chrome — shown
+           on /chat whenever the side panel is hidden (Row 2 and the
+           side panel are mutually exclusive). Off /chat the whole row
+           is gone; the always-visible Chat button in Row 1 is the way
+           back into a conversation. The header-controls wrapper is
+           pinned to 264px (w-72 minus px-3 padding on each side) so
            RoleSelector / + / toggle occupy the exact same x-range as
            they do inside the open side panel — toggling the panel
            therefore doesn't shift those controls. -->
-      <div v-if="!sidePanelVisible" class="flex items-center gap-2 px-3 py-2 border-b border-gray-100">
+      <div v-if="isChatPage && !sidePanelVisible" class="flex items-center gap-2 px-3 py-2 border-b border-gray-100">
         <div class="w-[264px] shrink-0">
           <SessionHeaderControls
             :roles="roles"
             :side-panel-visible="sidePanelVisible"
-            :active-session-count="activeSessionCount"
-            :unread-count="unreadCount"
             @role-change="onRoleChange"
             @new-session="handleNewSessionClick"
             @update:side-panel-visible="setSidePanelVisible"
@@ -53,12 +56,12 @@
     <div class="flex flex-1 min-h-0">
       <!-- Session-history side panel. Opt-in column to the left of
            the chat sidebar / canvas, toggled via
-           SessionHistoryToggleButton. Renders on every page when
-           `sidePanelVisible` is true. Row 2 of the top bar hides when
-           the panel is open — the panel's own header supplies the
-           role selector + new-session button instead. -->
+           SessionHistoryToggleButton. Chat-only chrome — renders on
+           /chat when `sidePanelVisible` is true. Row 2 of the top bar
+           hides when the panel is open — the panel's own header
+           supplies the role selector + new-session button instead. -->
       <div
-        v-if="sidePanelVisible"
+        v-if="isChatPage && sidePanelVisible"
         class="relative border-r border-gray-200 bg-white text-gray-900 flex flex-col min-w-0 overflow-hidden"
         :class="sidePanelExpanded ? 'flex-1' : 'w-72 flex-shrink-0'"
         data-testid="session-history-side-panel"
@@ -72,8 +75,6 @@
           <SessionHeaderControls
             :roles="roles"
             :side-panel-visible="sidePanelVisible"
-            :active-session-count="activeSessionCount"
-            :unread-count="unreadCount"
             @role-change="onRoleChange"
             @new-session="handleNewSessionClick"
             @update:side-panel-visible="setSidePanelVisibleAndCollapse"
@@ -211,6 +212,11 @@
                variants; standalone routes are wrapped here against the
                same `pkg-name + endpoints` pair so the `useRuntime()`
                call resolves. -->
+          <!-- Dashboard — grid of favorite (pinned) collections, each a
+               live embedded view. Host component (no PluginScopedRoot):
+               CollectionView talks to /api/collections directly, same as
+               the collections index below. -->
+          <DashboardView v-else-if="currentPage === 'dashboard'" />
           <FilesView v-else-if="currentPage === 'files'" :refresh-token="filesRefreshToken" @load-session="handleSessionSelect" />
           <PluginScopedRoot v-else-if="currentPage === 'automations'" pkg-name="scheduler" :endpoints="API_ROUTES.scheduler">
             <AutomationsView />
@@ -228,6 +234,13 @@
                directly. -->
           <CollectionView v-else-if="currentPage === 'collections' && route.params.slug" :key="String(route.params.slug)" />
           <CollectionsIndexView v-else-if="currentPage === 'collections'" />
+          <!-- Accounting — the double-entry bookkeeping app. Host
+               component (no PluginScopedRoot): the View talks to
+               /api/accounting via the host's apiCall directly and never
+               calls `useRuntime()`, so it needs no plugin scope. Mounted
+               without a `selected-result` prop — standalone it self-fetches
+               the book list and auto-selects a book on mount. -->
+          <AccountingView v-else-if="currentPage === 'accounting'" />
           <!-- Debug page (encore plan PR 1 follow-up). The View ships
                inside the @mulmoclaude/debug-plugin runtime package; we
                look it up by tool name and render the registered
@@ -301,7 +314,7 @@
     <!-- Global confirm dialog. Renders the module-global confirm state opened
          via useConfirm()/the collection plugin's confirm() capability — mounted
          here at the app root so it survives any single view (CollectionView used
-         to render its own before moving into @mulmoclaude/collection-plugin). -->
+         to render its own before moving into @mulmoclaude/core/collection). -->
     <ConfirmModal />
   </div>
 </template>
@@ -324,11 +337,13 @@ import SessionHistoryPanel from "./components/SessionHistoryPanel.vue";
 import SessionSidebar from "./components/SessionSidebar.vue";
 import ThinkingIndicator from "./components/ThinkingIndicator.vue";
 import PluginLauncher from "./components/PluginLauncher.vue";
+import DashboardView from "./components/DashboardView.vue";
 import StackView from "./components/StackView.vue";
 import FilesView from "./components/FilesView.vue";
 import AutomationsView from "./plugins/scheduler/AutomationsView.vue";
 import WikiView from "./plugins/wiki/View.vue";
-import { buildWikiRouteParams } from "./plugins/wiki/route";
+import { AccountingView } from "@mulmoclaude/accounting-plugin/vue";
+import { buildWikiRouteParams } from "@mulmoclaude/core/wiki";
 import { CollectionView, CollectionsIndexView, FeedsView } from "@mulmoclaude/collection-plugin/vue";
 import PluginScopedRoot from "./components/PluginScopedRoot.vue";
 import SettingsModal from "./components/SettingsModal.vue";
@@ -371,7 +386,7 @@ import ConfirmModal from "./components/ConfirmModal.vue";
 import { useNotifications } from "./composables/useNotifications";
 import { collectionNotifiedSeverities } from "./utils/collections/notifiedItems";
 import { installCollectionAppBindings } from "./composables/collections/uiHost";
-import type { CollectionsListResponse } from "@mulmoclaude/collection-plugin";
+import type { CollectionsListResponse } from "@mulmoclaude/core/collection";
 import { useHealth } from "./composables/useHealth";
 import { useSessionHistory } from "./composables/useSessionHistory";
 import { useRightSidebar } from "./composables/useRightSidebar";
@@ -588,7 +603,7 @@ const showSettings = ref(false);
 // When the Settings modal closes, re-check voice-input availability: the
 // user may have just enabled it / started the model download, and the
 // mic button should appear without a reload (the composable then polls
-// until the download finishes). See plans/feat-voice-input.md.
+// until the download finishes). See plans/done/feat-voice-input.md.
 function onSettingsOpenChange(open: boolean): void {
   showSettings.value = open;
   if (!open) chatInputRef.value?.refreshVoiceAvailability()?.catch(() => undefined);
@@ -678,10 +693,18 @@ const canvasDropHandlers = computed(() =>
 // don't persist empty sessions on the server. Fires true → false only;
 // an empty → /chat transition is handled by the route-params watcher
 // and onMounted.
+//
+// Also collapse the side panel's transient full-width mode. The panel
+// itself is chat-only chrome (`isChatPage && sidePanelVisible`), so it
+// unmounts off /chat — but the canvas/sidebar stay gated by
+// `!sidePanelExpanded`. Without this reset, leaving /chat while expanded
+// would unmount the panel AND keep the canvas hidden, blanking plugin
+// pages until the panel is collapsed again.
 watch(isChatPage, (isChat, wasChat) => {
   if (!(wasChat && !isChat)) return;
   removeCurrentIfEmpty();
   currentSessionId.value = "";
+  sidePanelExpanded.value = false;
 });
 
 function handleSessionSelect(sessionId: string): void {

package/src/components/ChatInput.vue

@@ -161,7 +161,7 @@ const emit = defineEmits<{
 
 // Local voice input (Mac-only). The mic button is hidden unless the
 // backend reports voice input ready; transcripts are appended to the
-// input for review, never auto-sent. See plans/feat-voice-input.md.
+// input for review, never auto-sent. See plans/done/feat-voice-input.md.
 function insertTranscript(text: string): void {
   const current = props.modelValue;
   const next = current.trim().length > 0 ? `${current.trimEnd()} ${text}` : text;

package/src/components/DashboardView.vue

@@ -0,0 +1,372 @@
+<template>
+  <div class="h-full overflow-auto p-4" :class="{ 'select-none': isResizing || isReordering }" data-testid="dashboard-view">
+    <!-- Empty state: no pinned collections yet. -->
+    <div v-if="favoriteSlugs.length === 0" class="h-full flex flex-col items-center justify-center text-center text-slate-500 gap-2">
+      <span class="material-icons text-4xl text-slate-300">dashboard</span>
+      <p class="text-sm font-medium">{{ t("dashboard.empty") }}</p>
+      <p class="text-xs">{{ t("dashboard.emptyHint") }}</p>
+    </div>
+
+    <!-- Two-column grid of favorite collections. Each tile shows a live
+         embedded CollectionView in the tile's chosen view mode. Height is
+         per grid ROW (both side-by-side tiles share it), set via the
+         resize handle and stored positionally in the layout. -->
+    <div v-else class="grid gap-4 sm:grid-cols-2" data-testid="dashboard-grid">
+      <section
+        v-for="(tile, index) in tiles"
+        v-show="metaFor(tile.slug)"
+        :key="tile.slug"
+        class="flex flex-col border border-slate-200 rounded-lg bg-white overflow-hidden shadow-sm transition-opacity"
+        :class="{ 'ring-2 ring-indigo-400': dropIndex === index && dragIndex !== index, 'opacity-50': dragIndex === index }"
+        :data-dashboard-index="index"
+        :data-testid="`dashboard-tile-${tile.slug}`"
+      >
+        <!-- Tile header: drag handle + title/icon (opens full view) + view picker. -->
+        <header class="flex items-center gap-2 px-3 py-2 border-b border-slate-100 bg-slate-50">
+          <span
+            class="material-icons text-base text-slate-400 cursor-grab select-none touch-none"
+            :title="t('dashboard.dragHint')"
+            :aria-label="t('dashboard.dragHint')"
+            data-testid="dashboard-tile-drag"
+            @pointerdown.prevent="onReorderStart(index, $event)"
+            >drag_indicator</span
+          >
+          <button
+            type="button"
+            class="flex items-center gap-1.5 min-w-0 flex-1 text-left text-sm font-semibold text-slate-700 hover:text-indigo-600"
+            :title="t('dashboard.openFull')"
+            @click="onTitleActivate($event, tile.slug)"
+            @dblclick="openFull(tile.slug)"
+          >
+            <span class="material-symbols-outlined text-base flex-none">{{ metaFor(tile.slug)?.icon || "apps" }}</span>
+            <span class="truncate">{{ metaFor(tile.slug)?.title || tile.slug }}</span>
+          </button>
+          <select
+            class="flex-none text-xs bg-white border border-slate-200 rounded px-1.5 py-1 text-slate-600 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+            :value="effectiveView(tile)"
+            :aria-label="t('dashboard.viewPickerLabel')"
+            :data-testid="`dashboard-tile-view-${tile.slug}`"
+            @change="onPickView(tile.slug, $event)"
+          >
+            <option v-for="mode in modesFor(tile.slug)" :key="mode" :value="mode">{{ modeLabel(tile.slug, mode) }}</option>
+          </select>
+        </header>
+        <!-- Live embedded view. `:key` remounts the view when the mode
+             changes so the new initial view takes effect. Height is the
+             grid ROW's height (shared by both side-by-side tiles), set via
+             the resize handle below. -->
+        <div class="overflow-auto" :style="{ height: `${rowHeight(index)}px` }">
+          <CollectionView
+            :key="`${tile.slug}:${effectiveView(tile)}`"
+            :slug="tile.slug"
+            :initial-view="effectiveView(tile)"
+            hide-view-toggle
+            hide-header
+            hide-search
+          />
+        </div>
+        <!-- Resize handle: drag vertically to set this row's height. -->
+        <div
+          class="h-2 flex-none cursor-row-resize bg-slate-100 hover:bg-indigo-200 transition-colors flex items-center justify-center"
+          :title="t('dashboard.resizeHint')"
+          :aria-label="t('dashboard.resizeHint')"
+          :data-testid="`dashboard-tile-resize-${tile.slug}`"
+          @pointerdown.prevent="onResizeStart(index, $event)"
+        >
+          <span class="h-0.5 w-8 rounded-full bg-slate-300"></span>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { useI18n } from "vue-i18n";
+import { useRouter } from "vue-router";
+import { CollectionView, applicableViewModes, customViewKey, type CollectionViewMode } from "@mulmoclaude/collection-plugin/vue";
+import { useShortcuts } from "../composables/useShortcuts";
+import { useDashboard } from "../composables/useDashboard";
+import { apiGet } from "../utils/api";
+import { API_ROUTES } from "../config/apiRoutes";
+import { PAGE_ROUTES } from "../router/pageRoutes";
+import type { DashboardTile } from "../types/dashboard";
+import type { CollectionDetailResponse, CollectionSchema } from "./collectionTypes";
+
+const { t } = useI18n();
+const router = useRouter();
+
+const { shortcuts, load: loadShortcuts } = useShortcuts();
+const { tiles, rowHeights, load: loadDashboard, reconcile, setTiles, setViewMode, setRowHeight } = useDashboard();
+
+// Favorites = pinned COLLECTION shortcuts (feeds are excluded — the
+// dashboard is a collections surface). The cached title/icon ride along
+// so a tile renders without an extra fetch.
+const collectionFavorites = computed(() => shortcuts.value.filter((entry) => entry.kind === "collection"));
+const favoriteSlugs = computed(() => collectionFavorites.value.map((entry) => entry.slug));
+const metaFor = (slug: string) => collectionFavorites.value.find((entry) => entry.slug === slug);
+
+// Per-slug schema, fetched lazily to drive each tile's view picker.
+const schemas = ref<Record<string, CollectionSchema>>({});
+
+async function loadSchema(slug: string): Promise<void> {
+  if (schemas.value[slug]) return;
+  const url = API_ROUTES.collections.detail.replace(":slug", encodeURIComponent(slug));
+  const result = await apiGet<CollectionDetailResponse>(url);
+  if (result.ok) schemas.value = { ...schemas.value, [slug]: result.data.collection.schema };
+}
+
+function modesFor(slug: string): CollectionViewMode[] {
+  const schema = schemas.value[slug];
+  return schema ? applicableViewModes(schema) : ["table"];
+}
+
+/** The view a tile opens in: its stored mode when still applicable, else
+ *  the first available mode (table). */
+function effectiveView(tile: DashboardTile): CollectionViewMode {
+  const modes = modesFor(tile.slug);
+  return tile.viewMode && modes.includes(tile.viewMode as CollectionViewMode) ? (tile.viewMode as CollectionViewMode) : (modes[0] ?? "table");
+}
+
+const BUILTIN_LABEL_KEYS: Record<string, string> = {
+  table: "dashboard.viewTable",
+  calendar: "dashboard.viewCalendar",
+  kanban: "dashboard.viewKanban",
+};
+
+function modeLabel(slug: string, mode: CollectionViewMode): string {
+  const builtin = BUILTIN_LABEL_KEYS[mode];
+  if (builtin) return t(builtin);
+  // Custom view: use the author-authored label from the schema.
+  const view = schemas.value[slug]?.views?.find((entry) => customViewKey(entry.id) === mode);
+  return view?.label ?? mode;
+}
+
+function onPickView(slug: string, event: Event): void {
+  const { value } = event.target as HTMLSelectElement;
+  void setViewMode(slug, value);
+}
+
+function openFull(slug: string): void {
+  router.push({ name: PAGE_ROUTES.collections, params: { slug } }).catch(() => {});
+}
+
+// Keyboard (Enter/Space on a native <button>) and assistive-tech "activate"
+// both dispatch a click with detail 0, whereas a real mouse click has
+// detail >= 1. Act only on the former so keyboard/AT users can open the full
+// view, while a plain mouse single-click does NOT navigate — only the
+// double-click does (the requested pointer UX).
+function onTitleActivate(event: MouseEvent, slug: string): void {
+  if (event.detail === 0) openFull(slug);
+}
+
+// ── Drag-to-reorder via pointer events. Native HTML5 DnD conflicted with
+//    the embedded views' own card drag-and-drop (e.g. kanban), so drops
+//    over a tile body were swallowed — pointer + elementFromPoint avoids
+//    that entirely, the same robust approach as the row resize. ──
+const dragIndex = ref<number | null>(null);
+const dropIndex = ref<number | null>(null);
+const isReordering = ref(false);
+let reorder: { startIndex: number; handle: HTMLElement; pointerId: number } | null = null;
+
+/** The tile index under a viewport point, or null when over no tile. */
+function tileIndexAtPoint(clientX: number, clientY: number): number | null {
+  const section = document.elementFromPoint(clientX, clientY)?.closest<HTMLElement>("[data-dashboard-index]");
+  if (!section) return null;
+  const index = Number(section.dataset.dashboardIndex);
+  return Number.isNaN(index) ? null : index;
+}
+
+function onReorderMove(event: PointerEvent): void {
+  if (!reorder) return;
+  event.preventDefault();
+  dropIndex.value = tileIndexAtPoint(event.clientX, event.clientY);
+}
+
+function teardownReorder(): void {
+  window.removeEventListener("pointermove", onReorderMove);
+  window.removeEventListener("pointerup", onReorderEnd);
+  window.removeEventListener("pointercancel", onReorderEnd);
+  isReordering.value = false;
+}
+
+function onReorderEnd(): void {
+  teardownReorder();
+  if (!reorder) return;
+  const { startIndex, handle, pointerId } = reorder;
+  const target = dropIndex.value;
+  reorder = null;
+  dragIndex.value = null;
+  dropIndex.value = null;
+  try {
+    handle.releasePointerCapture(pointerId);
+  } catch {
+    // Capture may already be gone (pointercancel) — ignore.
+  }
+  if (target === null || target === startIndex) return;
+  const next = [...tiles.value];
+  const [moved] = next.splice(startIndex, 1);
+  next.splice(target, 0, moved);
+  void setTiles(next);
+}
+
+function onReorderStart(index: number, event: PointerEvent): void {
+  const handle = event.currentTarget as HTMLElement;
+  try {
+    handle.setPointerCapture(event.pointerId);
+  } catch {
+    // Pointer capture unsupported — fall back to plain window listeners.
+  }
+  reorder = { startIndex: index, handle, pointerId: event.pointerId };
+  dragIndex.value = index;
+  isReordering.value = true;
+  window.addEventListener("pointermove", onReorderMove);
+  window.addEventListener("pointerup", onReorderEnd);
+  window.addEventListener("pointercancel", onReorderEnd);
+}
+
+// ── Drag-to-resize, per grid ROW (height is positional, not per tile) ──
+const DEFAULT_HEIGHT = 320;
+const MIN_HEIGHT = 160;
+const MAX_HEIGHT = 900;
+
+// Column count tracks the grid's responsive breakpoint (`sm:grid-cols-2`):
+// 1 column below 640px, 2 at/above. Row grouping must follow it so a
+// stacked tile in the single-column layout resizes on its own row instead
+// of sharing a height with its desktop pair.
+const SM_BREAKPOINT = "(min-width: 640px)";
+const columns = ref(2);
+let columnQuery: MediaQueryList | null = null;
+
+function syncColumns(): void {
+  columns.value = columnQuery?.matches ? 2 : 1;
+}
+
+function rowOf(index: number): number {
+  return Math.floor(index / columns.value);
+}
+
+// Live height during a drag (smooth, not yet persisted), keyed by
+// `"<columns>:<row>"` so an in-flight value can't bleed across layouts.
+const liveRowHeights = ref<Record<string, number>>({});
+
+function liveKey(cols: number, row: number): string {
+  return `${cols}:${row}`;
+}
+
+function rowHeight(index: number): number {
+  const row = rowOf(index);
+  const live = liveRowHeights.value[liveKey(columns.value, row)];
+  if (live !== undefined) return live;
+  const stored = rowHeights.value[String(columns.value)]?.[row];
+  return stored && stored > 0 ? stored : DEFAULT_HEIGHT;
+}
+
+// True while a drag is in progress — disables text selection so the drag
+// doesn't accidentally select tile content.
+const isResizing = ref(false);
+
+interface ResizeState {
+  cols: number;
+  row: number;
+  startY: number;
+  startHeight: number;
+  handle: HTMLElement;
+  pointerId: number;
+}
+let resize: ResizeState | null = null;
+// Latest pointer Y, applied once per frame (rAF-coalesced) so a flood of
+// pointermove events can't thrash re-renders of the embedded views.
+let pendingY: number | null = null;
+let rafId = 0;
+
+function applyResize(): void {
+  rafId = 0;
+  if (!resize || pendingY === null) return;
+  const next = Math.min(MAX_HEIGHT, Math.max(MIN_HEIGHT, resize.startHeight + (pendingY - resize.startY)));
+  liveRowHeights.value = { ...liveRowHeights.value, [liveKey(resize.cols, resize.row)]: next };
+}
+
+function onResizeMove(event: PointerEvent): void {
+  if (!resize) return;
+  event.preventDefault();
+  pendingY = event.clientY;
+  if (!rafId) rafId = requestAnimationFrame(applyResize);
+}
+
+function clearLiveRow(cols: number, row: number): void {
+  const key = liveKey(cols, row);
+  liveRowHeights.value = Object.fromEntries(Object.entries(liveRowHeights.value).filter(([entry]) => entry !== key));
+}
+
+// Persist the final height, then drop the live override so the stored
+// value (now identical) takes over without a flash.
+async function persistRowHeight(cols: number, row: number, height: number): Promise<void> {
+  await setRowHeight(cols, row, Math.round(height));
+  clearLiveRow(cols, row);
+}
+
+function teardownResize(): void {
+  window.removeEventListener("pointermove", onResizeMove);
+  window.removeEventListener("pointerup", onResizeEnd);
+  window.removeEventListener("pointercancel", onResizeEnd);
+  if (rafId) cancelAnimationFrame(rafId);
+  rafId = 0;
+  pendingY = null;
+  isResizing.value = false;
+}
+
+function onResizeEnd(): void {
+  teardownResize();
+  if (!resize) return;
+  const { cols, row, handle, pointerId } = resize;
+  resize = null;
+  try {
+    handle.releasePointerCapture(pointerId);
+  } catch {
+    // Capture may already be gone (pointercancel) — ignore.
+  }
+  const height = liveRowHeights.value[liveKey(cols, row)];
+  if (height !== undefined) void persistRowHeight(cols, row, height);
+}
+
+function onResizeStart(index: number, event: PointerEvent): void {
+  const handle = event.currentTarget as HTMLElement;
+  // Pointer capture routes every subsequent move/up to the handle even
+  // when the cursor passes over the embedded view (incl. iframes), which
+  // is what made the drag drop events and feel unstable.
+  try {
+    handle.setPointerCapture(event.pointerId);
+  } catch {
+    // Pointer capture unsupported — fall back to plain window listeners.
+  }
+  resize = { cols: columns.value, row: rowOf(index), startY: event.clientY, startHeight: rowHeight(index), handle, pointerId: event.pointerId };
+  isResizing.value = true;
+  window.addEventListener("pointermove", onResizeMove);
+  window.addEventListener("pointerup", onResizeEnd);
+  window.addEventListener("pointercancel", onResizeEnd);
+}
+
+onBeforeUnmount(() => {
+  teardownResize();
+  teardownReorder();
+  columnQuery?.removeEventListener("change", syncColumns);
+});
+
+// First load: fold favorites into the stored layout once both lists are
+// authoritatively loaded (so an empty pre-load list never prunes tiles).
+onMounted(async () => {
+  columnQuery = window.matchMedia(SM_BREAKPOINT);
+  syncColumns();
+  columnQuery.addEventListener("change", syncColumns);
+  await Promise.all([loadShortcuts(), loadDashboard()]);
+  await reconcile(favoriteSlugs.value);
+});
+
+// Later pin/unpin while on the page re-reconciles. Non-immediate so it
+// can't fire on the empty pre-load list.
+watch(favoriteSlugs, (slugs) => void reconcile(slugs));
+
+// Fetch each tile's schema as the layout settles.
+watch(tiles, (list) => list.forEach((tile) => void loadSchema(tile.slug)), { immediate: true });
+</script>

package/src/components/FileContentRenderer.vue

@@ -127,13 +127,24 @@
                 paths don't resolve under `srcdoc` (base URL is
                 `about:srcdoc`), but that's the historical behavior
                 for non-`artifacts/html/` HTML. -->
-        <iframe
-          v-else-if="isHtml && htmlPreviewUrl"
-          :src="htmlPreviewUrl"
-          class="w-full h-full border-0"
-          sandbox="allow-scripts"
-          :title="t('fileContentRenderer.htmlPreview')"
-        />
+        <div v-else-if="isHtml && htmlPreviewUrl" class="relative w-full h-full">
+          <!-- Only `.html` is packable (server gates on `isHtmlPath`); a
+               `.htm` preview shows no button so the action can't 400. -->
+          <div v-if="canDownloadZip" class="absolute top-2 right-2 z-10 flex flex-col items-end gap-1">
+            <button
+              class="px-2 py-1 text-xs rounded border border-gray-300 bg-white/90 text-gray-600 hover:bg-gray-50 disabled:opacity-50 shadow-sm"
+              :title="t('fileContentRenderer.downloadZip')"
+              :disabled="packing"
+              data-testid="file-html-download"
+              @click="downloadHtmlZip"
+            >
+              <span class="material-icons text-sm align-middle">download</span>
+              {{ t("fileContentRenderer.download") }}
+            </button>
+            <span v-if="packFailed" class="text-xs text-red-600 bg-white/90 px-1 rounded" role="alert">{{ t("fileContentRenderer.downloadError") }}</span>
+          </div>
+          <iframe :src="htmlPreviewUrl" class="w-full h-full border-0" sandbox="allow-scripts" :title="t('fileContentRenderer.htmlPreview')" />
+        </div>
         <iframe
           v-else-if="isHtml"
           :srcdoc="sandboxedHtml"
@@ -247,6 +258,7 @@ import type { JsonToken, JsonlLine } from "../utils/format/jsonSyntax";
 import { formatScalarField, type MarkdownDocView } from "../composables/useMarkdownDoc";
 import { rewriteMarkdownImageRefs } from "../utils/image/rewriteMarkdownImageRefs";
 import { API_ROUTES } from "../config/apiRoutes";
+import { useSharePack } from "../composables/useSharePack";
 import { descriptorForPath, jsonEditableByPolicy } from "../config/systemFileDescriptors";
 import { isMarpDocument } from "../utils/markdown/marpDetect";
 import { buildPdfFilename } from "../utils/files/filename";
@@ -289,6 +301,19 @@ const emit = defineEmits<{
 
 const systemDescriptor = computed(() => (props.selectedPath ? descriptorForPath(props.selectedPath) : null));
 
+const { packing, packFailed, downloadZip, reset: resetSharePack } = useSharePack();
+// `htmlPreviewUrl` also matches `.htm`, but the pack route only accepts
+// canonical `.html`, so gate the button on `.html` to match server policy.
+const canDownloadZip = computed(() => Boolean(props.isHtml && props.htmlPreviewUrl && props.selectedPath?.toLowerCase().endsWith(".html")));
+function downloadHtmlZip() {
+  if (props.selectedPath) void downloadZip(props.selectedPath);
+}
+// Drop a stale error banner when the user navigates to another file.
+watch(
+  () => props.selectedPath,
+  () => resetSharePack(),
+);
+
 const marpMode = computed(() => Boolean(props.mdFrontmatter && isMarpDocument(props.mdFrontmatter.meta)));
 
 const marpBaseDir = computed(() => {

package/src/components/JsonEditor.vue

@@ -104,7 +104,7 @@ function createState(doc: string): EditorState {
       labelCompartment.of(EditorView.contentAttributes.of({ "aria-label": props.editorLabel })),
       EditorView.theme({
         "&": { fontSize: "12px" },
-        ".cm-content": { fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace" },
+        ".cm-content": { fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, "MS Gothic", "BIZ UDGothic", monospace' },
         "&.cm-focused": { outline: "2px solid rgb(96 165 250)" },
         ".cm-scroller": { overflow: "auto" },
       }),