sh3-core 0.13.1 → 0.13.3

package/dist/BrandSlot.svelte

@@ -1,19 +1,24 @@
 <script lang="ts">
   /*
-   * BrandSlot — top-bar context indicator. Three states:
-   *   - 'brand'      → renders <span>SH3</span>
-   *   - 'app'        → renders <span>{label}</span>
-   *   - 'breadcrumb' → renders SH3 + separator + <button>{label}</button>
+   * BrandSlot — top-bar context indicator. Mode resolves from the
+   * (activeAppId, breadcrumbAppId, activeProjectId) triple:
    *
-   * State derives from (activeAppId, breadcrumbAppId). Click on the
-   * breadcrumb's app button re-launches the app (existing handler).
+   *   brand              → SH3
+   *   app                → [App Name]
+   *   breadcrumb         → SH3 › [App Name]    (clickable app)
+   *   project-home       → SH3 › [Project]     (clickable SH3 → exit project)
+   *   project-app        → [Project] › [App]   (no SH3 — use home button to exit)
+   *   project-breadcrumb → SH3 › [Project] › [App]  (clickable SH3, project, app)
    */
   import { getLiveDispatcherState } from './actions/state.svelte';
-  import { launchApp } from './apps/lifecycle';
+  import { launchApp, returnToHome } from './apps/lifecycle';
   import { getBreadcrumbAppId, getRegisteredApp } from './apps/registry.svelte';
+  import { sessionState, setActiveProjectId } from './projects/session-state.svelte';
+  import { projectsState } from './projects-shard/projectsShard.svelte';
 
   const activeAppId = $derived(getLiveDispatcherState().activeAppId);
   const breadcrumbId = $derived(getBreadcrumbAppId());
+  const projectId = $derived(sessionState.activeProjectId);
 
   const activeLabel = $derived(
     activeAppId ? getRegisteredApp(activeAppId)?.manifest.label ?? activeAppId : null,
@@ -21,16 +26,34 @@
   const breadcrumbLabel = $derived(
     breadcrumbId ? getRegisteredApp(breadcrumbId)?.manifest.label ?? breadcrumbId : null,
   );
+  const projectLabel = $derived(
+    projectId ? projectsState.projects.find((p) => p.id === projectId)?.name ?? projectId : null,
+  );
+
+  type Mode = 'brand' | 'app' | 'breadcrumb' | 'project-home' | 'project-app' | 'project-breadcrumb';
 
-  const mode: 'brand' | 'app' | 'breadcrumb' = $derived.by(() => {
+  const mode: Mode = $derived.by(() => {
+    if (projectId) {
+      if (activeAppId) return 'project-app';
+      if (breadcrumbId) return 'project-breadcrumb';
+      return 'project-home';
+    }
     if (activeAppId) return 'app';
     if (breadcrumbId) return 'breadcrumb';
     return 'brand';
   });
 
-  function reopen() {
+  function reopenApp() {
     if (breadcrumbId) void launchApp(breadcrumbId);
   }
+
+  function exitProject() {
+    setActiveProjectId(null);
+  }
+
+  function reenterProjectHome() {
+    if (activeAppId) void returnToHome();
+  }
 </script>
 
 <div class="sh3-brand-slot">
@@ -38,12 +61,24 @@
     <span class="sh3-brand">SH3</span>
   {:else if mode === 'app'}
     <span class="sh3-brand sh3-brand-app">{activeLabel}</span>
-  {:else}
+  {:else if mode === 'breadcrumb'}
     <span class="sh3-brand">SH3</span>
     <span class="sh3-brand-sep" aria-hidden="true">›</span>
-    <button type="button" class="sh3-brand-crumb" onclick={reopen}>
-      {breadcrumbLabel}
-    </button>
+    <button type="button" class="sh3-brand-crumb" onclick={reopenApp}>{breadcrumbLabel}</button>
+  {:else if mode === 'project-home'}
+    <button type="button" class="sh3-brand sh3-brand-clickable" onclick={exitProject} title="Exit project">SH3</button>
+    <span class="sh3-brand-sep" aria-hidden="true">›</span>
+    <span class="sh3-brand-project">{projectLabel}</span>
+  {:else if mode === 'project-app'}
+    <span class="sh3-brand sh3-brand-project">{projectLabel}</span>
+    <span class="sh3-brand-sep" aria-hidden="true">›</span>
+    <span class="sh3-brand sh3-brand-app">{activeLabel}</span>
+  {:else if mode === 'project-breadcrumb'}
+    <button type="button" class="sh3-brand sh3-brand-clickable" onclick={exitProject} title="Exit project">SH3</button>
+    <span class="sh3-brand-sep" aria-hidden="true">›</span>
+    <button type="button" class="sh3-brand-crumb" onclick={reenterProjectHome}>{projectLabel}</button>
+    <span class="sh3-brand-sep" aria-hidden="true">›</span>
+    <button type="button" class="sh3-brand-crumb" onclick={reopenApp}>{breadcrumbLabel}</button>
   {/if}
 </div>
 
@@ -61,6 +96,9 @@
   .sh3-brand-app {
     color: var(--shell-fg);
   }
+  .sh3-brand-project {
+    color: var(--shell-fg);
+  }
   .sh3-brand-sep {
     color: var(--shell-fg-muted);
     margin: 0 4px;
@@ -77,4 +115,15 @@
   .sh3-brand-crumb:hover {
     background: var(--shell-bg-elevated);
   }
+  .sh3-brand-clickable {
+    background: transparent;
+    border: 0;
+    font: inherit;
+    cursor: pointer;
+    padding: 2px 6px;
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .sh3-brand-clickable:hover {
+    background: var(--shell-bg-elevated);
+  }
 </style>

package/dist/__test__/setup-dom.js

@@ -1,4 +1,9 @@
 import '@testing-library/jest-dom/vitest';
+import { afterEach } from 'vitest';
+import { cleanup } from '@testing-library/svelte';
+// @testing-library/svelte v5 only auto-registers cleanup when vitest
+// globals are enabled. We use globals: false, so wire it manually.
+afterEach(() => cleanup());
 /**
  * happy-dom creates per-window Comment subclasses (via WindowContextClassExtender)
  * but actually instantiates nodes from the base CommentImplementation class. This

package/dist/actions/MenuButton.svelte

@@ -19,6 +19,7 @@
   import { getLiveDispatcherState } from './state.svelte';
   import type { DispatcherState } from './dispatcher.svelte';
   import { resolveSubmenuItems, type MenuBarItem } from './menuBarModel';
+  import { resolveLabel } from './types';
   import type { MenuContainer } from '../apps/types';
 
   let { container, items }: {
@@ -47,7 +48,7 @@
     if (!entry || typeof entry.action.run !== 'function') return;
     try {
       void entry.action.run({
-        action: { id, label: entry.action.label },
+        action: { id, label: resolveLabel(entry.action) },
         appId: state.activeAppId,
         viewId: state.focusedViewId ?? undefined,
         selection: state.selection ?? undefined,

package/dist/actions/contextMenuModel.d.ts

@@ -1,6 +1,6 @@
 import type { ActionEntry } from './registry';
 import { type DispatcherState, type TierName } from './dispatcher.svelte';
-import type { AtomicScope } from './types';
+import { type AtomicScope } from './types';
 export interface MenuItem {
     id: string;
     label: string;

package/dist/actions/contextMenuModel.js

@@ -9,6 +9,7 @@
 import { TIER_ORDER, isScopeActive, } from './dispatcher.svelte';
 import { effectiveShortcut } from './bindings';
 import { scopeToTier, innermostActiveScope, scopeEquals, normalizeScope, } from './scope-helpers';
+import { resolveLabel } from './types';
 function evalFlag(v) {
     if (v === undefined)
         return false;
@@ -18,7 +19,7 @@ function toMenuItem(entry, state) {
     var _a;
     return {
         id: entry.action.id,
-        label: entry.action.label,
+        label: resolveLabel(entry.action),
         shortcut: effectiveShortcut(entry.action, state.bindings, state.platform),
         group: (_a = entry.action.group) !== null && _a !== void 0 ? _a : '',
         icon: entry.action.icon,

package/dist/actions/dispatcher.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { AtomicScope, Selection } from './types';
+import { type AtomicScope, type Selection } from './types';
 import type { ActionEntry } from './registry';
 import type { Platform } from './shortcuts';
 export interface DispatcherState {

package/dist/actions/dispatcher.svelte.js

@@ -4,6 +4,7 @@
  * This module exposes testable state transitions; listeners feed it
  * state snapshots.
  */
+import { resolveLabel } from './types';
 import { effectiveShortcut } from './bindings';
 import { scopeToTier, normalizeScope } from './scope-helpers';
 export const TIER_ORDER = ['element', 'focus', 'view', 'app', 'home'];
@@ -91,7 +92,7 @@ export function dispatchKeydown(env) {
             return null;
         }
         env.runAction(id, {
-            action: { id: entry.action.id, label: entry.action.label },
+            action: { id: entry.action.id, label: resolveLabel(entry.action) },
             appId: env.state.activeAppId,
             viewId: (_a = env.state.focusedViewId) !== null && _a !== void 0 ? _a : undefined,
             selection: (_b = env.state.selection) !== null && _b !== void 0 ? _b : undefined,

package/dist/actions/listActive.d.ts

@@ -1,4 +1,4 @@
 import type { ActionEntry } from './registry';
 import { type DispatcherState } from './dispatcher.svelte';
-import type { ActiveActionDescriptor } from './types';
+import { type ActiveActionDescriptor } from './types';
 export declare function listActiveFromEntries(entries: ActionEntry[], state: DispatcherState): ActiveActionDescriptor[];

package/dist/actions/listActive.js

@@ -11,6 +11,7 @@
 import { TIER_ORDER, } from './dispatcher.svelte';
 import { effectiveShortcutWithSource } from './bindings';
 import { innermostActiveScope, scopeBadge, scopeToTier } from './scope-helpers';
+import { resolveLabel } from './types';
 export function listActiveFromEntries(entries, state) {
     const byTier = {
         element: [], focus: [], view: [], app: [], home: [],
@@ -26,7 +27,7 @@ export function listActiveFromEntries(entries, state) {
         const { shortcut, source } = effectiveShortcutWithSource(entry.action, state.bindings, state.platform);
         byTier[scopeToTier(winning)].push({
             id: entry.action.id,
-            label: entry.action.label,
+            label: resolveLabel(entry.action),
             effectiveShortcut: shortcut,
             bindingSource: source,
             scope: winning,

package/dist/actions/listeners.d.ts

@@ -1,4 +1,4 @@
-import type { AtomicScope } from './types';
+import { type AtomicScope } from './types';
 export interface OpenContextMenuOpts {
     x: number;
     y: number;

package/dist/actions/listeners.js

@@ -8,6 +8,7 @@ import { listActions } from './registry';
 import { dispatchKeydown } from './dispatcher.svelte';
 import { getLiveDispatcherState, setFocusedViewId, } from './state.svelte';
 import { eventToShortcut } from './shortcuts';
+import { resolveLabel } from './types';
 import ContextMenu from './ContextMenu.svelte';
 import { buildContextMenuModel, buildContextMenuSubmenu } from './contextMenuModel';
 import ActionPanel from './ActionPanel.svelte';
@@ -83,7 +84,7 @@ function chainedDispatch(actionId) {
     }
     const state = getLiveDispatcherState();
     runAction(actionId, {
-        action: { id: entry.action.id, label: entry.action.label },
+        action: { id: entry.action.id, label: resolveLabel(entry.action) },
         appId: state.activeAppId,
         viewId: (_a = state.focusedViewId) !== null && _a !== void 0 ? _a : undefined,
         selection: (_b = state.selection) !== null && _b !== void 0 ? _b : undefined,
@@ -132,7 +133,7 @@ function openContextSubmenu(parentId, state, handle, anchor) {
                     return;
                 try {
                     void child.action.run({
-                        action: { id: cid, label: child.action.label },
+                        action: { id: cid, label: resolveLabel(child.action) },
                         appId: state.activeAppId,
                         viewId: (_a = state.focusedViewId) !== null && _a !== void 0 ? _a : undefined,
                         selection: (_b = state.selection) !== null && _b !== void 0 ? _b : undefined,
@@ -174,7 +175,7 @@ function onContextMenu(ev) {
                 return;
             try {
                 void entry.action.run({
-                    action: { id, label: entry.action.label },
+                    action: { id, label: resolveLabel(entry.action) },
                     appId: state.activeAppId,
                     viewId: (_a = state.focusedViewId) !== null && _a !== void 0 ? _a : undefined,
                     selection: (_b = state.selection) !== null && _b !== void 0 ? _b : undefined,
@@ -246,7 +247,7 @@ export function openContextMenu(opts) {
                 return;
             try {
                 void entry.action.run({
-                    action: { id, label: entry.action.label },
+                    action: { id, label: resolveLabel(entry.action) },
                     appId: state.activeAppId,
                     viewId: (_a = state.focusedViewId) !== null && _a !== void 0 ? _a : undefined,
                     selection: (_b = state.selection) !== null && _b !== void 0 ? _b : undefined,
@@ -293,7 +294,7 @@ export function openPalette(opts) {
                 return;
             try {
                 void entry.action.run({
-                    action: { id, label: entry.action.label },
+                    action: { id, label: resolveLabel(entry.action) },
                     appId: state.activeAppId,
                     viewId: (_a = state.focusedViewId) !== null && _a !== void 0 ? _a : undefined,
                     selection: (_b = state.selection) !== null && _b !== void 0 ? _b : undefined,

package/dist/actions/menuBarModel.js

@@ -6,6 +6,7 @@
  */
 import { effectiveShortcut } from './bindings';
 import { innermostActiveScope } from './scope-helpers';
+import { resolveLabel } from './types';
 import { DEFAULT_MENU_CONTAINERS } from './defaultMenuContainers';
 function evalFlag(v) {
     if (v === undefined)
@@ -64,7 +65,7 @@ export function resolveMenuItems(entries, state, containerId) {
         seen.add(entry.action.id);
         out.push({
             id: entry.action.id,
-            label: entry.action.label,
+            label: resolveLabel(entry.action),
             shortcut: effectiveShortcut(entry.action, state.bindings, state.platform),
             group: (_a = entry.action.group) !== null && _a !== void 0 ? _a : '',
             icon: entry.action.icon,
@@ -97,7 +98,7 @@ export function resolveSubmenuItems(entries, state, parentId) {
         seen.add(entry.action.id);
         out.push({
             id: entry.action.id,
-            label: entry.action.label,
+            label: resolveLabel(entry.action),
             shortcut: effectiveShortcut(entry.action, state.bindings, state.platform),
             group: (_a = entry.action.group) !== null && _a !== void 0 ? _a : '',
             icon: entry.action.icon,

package/dist/actions/paletteModel.js

@@ -14,6 +14,7 @@
  */
 import { effectiveShortcut } from './bindings';
 import { innermostActiveScope, scopeBadge } from './scope-helpers';
+import { resolveLabel } from './types';
 function evalFlag(v) {
     if (v === undefined)
         return false;
@@ -39,7 +40,7 @@ export function buildPaletteCandidates(entries, state, opts = {}) {
         seen.add(entry.action.id);
         out.push({
             id: entry.action.id,
-            label: entry.action.label,
+            label: resolveLabel(entry.action),
             shortcut: effectiveShortcut(entry.action, state.bindings, state.platform),
             scopeBadge: scopeBadge(winning),
             submenu: entry.action.submenu === true,

package/dist/actions/resolveLabel.test.js

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest';
+import { resolveLabel } from './types';
+describe('resolveLabel', () => {
+    it('returns string label as-is', () => {
+        const a = { id: 'x', label: 'Hello', scope: 'app' };
+        expect(resolveLabel(a)).toBe('Hello');
+    });
+    it('calls function label and returns the result', () => {
+        let n = 0;
+        const a = { id: 'x', label: () => `n=${++n}`, scope: 'app' };
+        expect(resolveLabel(a)).toBe('n=1');
+        expect(resolveLabel(a)).toBe('n=2');
+    });
+});

package/dist/actions/types.d.ts

@@ -4,7 +4,13 @@ export type AtomicScope = 'home' | 'app' | `view:${string}` | `focus:${string}`
 export type ActionScope = AtomicScope | AtomicScope[];
 export interface Action {
     id: string;
-    label: string;
+    /**
+     * Display label. May be a function for live-evaluated labels (re-read on
+     * each menu derive — same cadence as `disabled`/`checked`). Function form
+     * is appropriate for runtime-suffixed labels (e.g. `· admin only`); static
+     * strings are still the common case.
+     */
+    label: string | (() => string);
     scope: ActionScope;
     contextItem?: boolean;
     paletteItem?: boolean;
@@ -143,3 +149,8 @@ export interface ActiveActionDescriptor {
     paletteItem: boolean;
     contextItem: boolean;
 }
+/**
+ * Resolve an Action's label to a string. Function labels are called on each
+ * read; string labels are returned unchanged.
+ */
+export declare function resolveLabel(action: Pick<Action, 'label'>): string;

package/dist/actions/types.js

@@ -4,4 +4,10 @@
  * context menu, or command palette. See the spec at
  * docs/superpowers/specs/2026-04-22-actions-contexts-design.md.
  */
-export {};
+/**
+ * Resolve an Action's label to a string. Function labels are called on each
+ * read; string labels are returned unchanged.
+ */
+export function resolveLabel(action) {
+    return typeof action.label === 'function' ? action.label() : action.label;
+}

package/dist/api.d.ts

@@ -55,6 +55,7 @@ export declare const FRAMEWORK_SHARD_IDS: readonly string[];
 export { setTokenOverrides, clearTokenOverrides, getTokenOverrides, } from './theme';
 export { default as Button } from './primitives/Button.svelte';
 export { provideIcons, getIconSprite, type ButtonVariant } from './primitives/icon-context';
+export { default as Collapsible } from './primitives/Collapsible.svelte';
 export { default as Field } from './primitives/widgets/Field.svelte';
 export { default as Textarea } from './primitives/widgets/Textarea.svelte';
 export { default as NumberInput } from './primitives/widgets/NumberInput.svelte';
@@ -69,3 +70,5 @@ export { default as FilePicker } from './primitives/widgets/FilePicker.svelte';
 export type { FilePickerValue } from './primitives/widgets/FilePicker';
 export { default as Select } from './primitives/widgets/Select.svelte';
 export type { SelectOption } from './primitives/widgets/Select';
+export { default as AppPicker } from './primitives/widgets/AppPicker.svelte';
+export { default as UserPicker } from './primitives/widgets/UserPicker.svelte';

package/dist/api.js

@@ -73,6 +73,7 @@ export { setTokenOverrides, clearTokenOverrides, getTokenOverrides, } from './th
 // `import { Button } from 'sh3-core'` against the runtime shim in loader.ts.
 export { default as Button } from './primitives/Button.svelte';
 export { provideIcons, getIconSprite } from './primitives/icon-context';
+export { default as Collapsible } from './primitives/Collapsible.svelte';
 // Controllable widget primitives (ADR-022).
 export { default as Field } from './primitives/widgets/Field.svelte';
 export { default as Textarea } from './primitives/widgets/Textarea.svelte';
@@ -85,3 +86,5 @@ export { default as SliderGroup } from './primitives/widgets/SliderGroup.svelte'
 export { default as ColorSwatch } from './primitives/widgets/ColorSwatch.svelte';
 export { default as FilePicker } from './primitives/widgets/FilePicker.svelte';
 export { default as Select } from './primitives/widgets/Select.svelte';
+export { default as AppPicker } from './primitives/widgets/AppPicker.svelte';
+export { default as UserPicker } from './primitives/widgets/UserPicker.svelte';

package/dist/app/store/AppUpdateAvailableModal.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  /*
+   * Confirms an available update for an app launched via the home-card
+   * "Check for updates" action. If the user clicks Update, onConfirm runs
+   * (which performs the actual storeContext.updatePackage call); the
+   * permission-diff prompt — when needed — is opened by updatePackage's
+   * own confirmPermissionChange callback. Cancel just closes.
+   */
+
+  interface Props {
+    appId: string;
+    appLabel: string;
+    fromVersion: string;
+    toVersion: string;
+    onConfirm: () => Promise<void>;
+    close: () => void;
+  }
+
+  let { appId, appLabel, fromVersion, toVersion, onConfirm, close }: Props = $props();
+  let busy = $state(false);
+  let error = $state<string | null>(null);
+
+  async function confirm() {
+    if (busy) return;
+    busy = true;
+    error = null;
+    try {
+      await onConfirm();
+      close();
+    } catch (e) {
+      error = (e as Error).message;
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<div class="app-update-modal">
+  <h2>Update available</h2>
+  <p>
+    <strong>{appLabel}</strong> can be updated from <code>v{fromVersion}</code>
+    to <code>v{toVersion}</code>.
+  </p>
+  <p class="hint">Package id: <code>{appId}</code></p>
+  {#if error}<p class="error">{error}</p>{/if}
+  <div class="actions">
+    <button type="button" class="primary" onclick={confirm} disabled={busy}>
+      {busy ? 'Updating…' : 'Update'}
+    </button>
+    <button type="button" onclick={close} disabled={busy}>Cancel</button>
+  </div>
+</div>
+
+<style>
+  .app-update-modal {
+    padding: 16px 20px;
+    max-width: 460px;
+    color: var(--shell-fg);
+    background: var(--shell-bg);
+    font: inherit;
+  }
+  h2 { margin: 0 0 8px; font-size: 16px; }
+  p { margin: 4px 0; font-size: 13px; }
+  .hint { color: var(--shell-fg-muted); font-size: 12px; }
+  .error { color: var(--shell-error, #c33); }
+  code {
+    font-family: var(--shell-font-mono, monospace);
+    background: var(--shell-bg-elevated);
+    padding: 0 4px;
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .actions { display: flex; gap: 8px; margin-top: 16px; }
+  .actions button {
+    background: var(--shell-bg-elevated);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+    padding: 6px 14px; font: inherit; cursor: pointer;
+  }
+  .actions button.primary {
+    background: var(--shell-accent);
+    color: #fff;
+    border-color: var(--shell-accent);
+  }
+  .actions button:hover { border-color: var(--shell-accent); }
+  .actions button:disabled { opacity: 0.5; cursor: not-allowed; }
+</style>

package/dist/app/store/AppUpdateAvailableModal.svelte.d.ts

@@ -0,0 +1,11 @@
+interface Props {
+    appId: string;
+    appLabel: string;
+    fromVersion: string;
+    toVersion: string;
+    onConfirm: () => Promise<void>;
+    close: () => void;
+}
+declare const AppUpdateAvailableModal: import("svelte").Component<Props, {}, "">;
+type AppUpdateAvailableModal = ReturnType<typeof AppUpdateAvailableModal>;
+export default AppUpdateAvailableModal;

package/dist/app/store/InstalledView.svelte

@@ -10,7 +10,7 @@
   import { storeContext } from './storeShard.svelte';
   import { uninstallPackage } from '../../registry/installer';
   import { serverUninstallPackage } from '../../env/client';
-  import PermissionConfirmModal from './PermissionConfirmModal.svelte';
+  import { openPermissionConfirmModal } from './permissionConfirm';
   import type { InstalledPackage } from '../../registry/types';
 
   const ctx = storeContext;
@@ -19,14 +19,6 @@
   let updatingIds = $state<Set<string>>(new Set());
   let updateError = $state<string | null>(null);
 
-  let updateModal = $state<null | {
-    pkg: InstalledPackage;
-    toVersion: string;
-    added: string[];
-    removed: string[];
-    resolve: (ok: boolean) => void;
-  }>(null);
-
   async function handleUninstall(id: string) {
     if (uninstallingIds.has(id)) return;
 
@@ -46,29 +38,16 @@
 
   async function handleUpdate(id: string) {
     if (updatingIds.has(id)) return;
-
     updatingIds = new Set([...updatingIds, id]);
     updateError = null;
-
     try {
-      await ctx.updatePackage(id, (added, removed) => {
-        return new Promise<boolean>((resolve) => {
-          const pkg = ctx.state.ephemeral.installed.find(
-            (p: InstalledPackage) => p.id === id,
-          );
-          const target = ctx.state.ephemeral.updatable[id];
-          if (!pkg || !target) {
-            resolve(true); // Falls through to the existing behavior.
-            return;
-          }
-          updateModal = {
-            pkg,
-            toVersion: target.latest.version,
-            added,
-            removed,
-            resolve,
-          };
-        });
+      await ctx.updatePackage(id, async (added, removed) => {
+        const pkg = ctx.state.ephemeral.installed.find(
+          (p: InstalledPackage) => p.id === id,
+        );
+        const target = ctx.state.ephemeral.updatable[id];
+        if (!pkg || !target) return true;
+        return openPermissionConfirmModal(pkg, target.latest.version, added, removed);
       });
     } catch (err) {
       updateError = err instanceof Error ? err.message : String(err);
@@ -79,20 +58,6 @@
     }
   }
 
-  function confirmUpdate() {
-    const m = updateModal;
-    if (!m) return;
-    updateModal = null;
-    m.resolve(true);
-  }
-
-  function cancelUpdate() {
-    const m = updateModal;
-    if (!m) return;
-    updateModal = null;
-    m.resolve(false);
-  }
-
   function handleRefresh() {
     ctx.refreshInstalled();
   }
@@ -164,17 +129,6 @@
     </ul>
   {/if}
 
-  {#if updateModal}
-    <PermissionConfirmModal
-      mode="update"
-      pkg={{ label: updateModal.pkg.id, version: updateModal.toVersion }}
-      fromVersion={updateModal.pkg.version}
-      added={updateModal.added}
-      removed={updateModal.removed}
-      onConfirm={confirmUpdate}
-      onCancel={cancelUpdate}
-    />
-  {/if}
 </div>
 
 <style>