sh3-core 0.13.4 → 0.14.3

package/dist/api.d.ts

@@ -50,6 +50,9 @@ export type { Verb, VerbContext, ShellApi } from './verbs/types';
 export type { Scrollback } from './shell-shard/scrollback.svelte';
 export type { SessionClient } from './shell-shard/session-client.svelte';
 export { listVerbs } from './shards/registry';
+export { registerShellMode } from './shell-shard/registerShellMode';
+export type { ShellModeDescriptor, ShellModeOutput, ShellModeDispatchHandler, ShellModeDispatchInput, ShellModeRunsOn, RichEntryHandle, StreamHandle, } from './shell-shard/contract';
+export { SHELL_MODE_CONTRIBUTION_POINT } from './shell-shard/contract';
 export { VERSION } from './version';
 export declare const FRAMEWORK_SHARD_IDS: readonly string[];
 export { setTokenOverrides, clearTokenOverrides, getTokenOverrides, } from './theme';

package/dist/api.js

@@ -56,6 +56,9 @@ export const capabilities = {
     hotInstall: typeof Blob !== 'undefined' && typeof URL.createObjectURL === 'function',
 };
 export { listVerbs } from './shards/registry';
+// Shell mode contributions (external shards extend the shell with new modes).
+export { registerShellMode } from './shell-shard/registerShellMode';
+export { SHELL_MODE_CONTRIBUTION_POINT } from './shell-shard/contract';
 // Package version.
 export { VERSION } from './version';
 // Framework shard IDs — shards that are always present (built-in to sh3-core).

package/dist/host.js

@@ -31,6 +31,7 @@ import { storeApp } from './app/store/storeApp';
 import { adminShard } from './app/admin/adminShard.svelte';
 import { adminApp } from './app/admin/adminApp';
 import { runShellRenameMigration, } from './migrations/shell-rename';
+import { runModeIdRenameMigration } from './migrations/mode-id-rename';
 import { setLifecycleHandlers } from './navigation/back-stack';
 import { installWebEmitter } from './navigation/platform-web';
 import { returnToHome } from './apps/lifecycle';
@@ -60,6 +61,7 @@ export async function bootstrap(config) {
     // already in place when shards activate.
     if (typeof globalThis.localStorage !== 'undefined') {
         runShellRenameMigration(createWorkspaceZoneAdapter(), globalThis.localStorage);
+        runModeIdRenameMigration(globalThis.localStorage);
         // Per ADR-002 amendment, app workspace state is keyed by (scopeId, appId).
         // Rewrite legacy unkeyed entries to the personal scope namespace.
         const { migrateLegacyWorkspaceKeys } = await import('./apps/workspace-rekey');

package/dist/layout/LayoutRenderer.svelte

@@ -230,7 +230,7 @@
   {:else}
     {@const slot = asSlot(node)!}
     <div class="leaf-slot-wrapper">
-      <SlotContainer node={slot} />
+      <SlotContainer node={slot} meta={slot.meta} />
       <SlotDropZone {rootRef} path={path} />
     </div>
   {/if}

package/dist/layout/tree-walk.js

@@ -15,7 +15,12 @@ export function collectSlotRefs(tree) {
     const out = [];
     const walk = (node) => {
         if (node.type === 'slot') {
-            out.push({ slotId: node.slotId, viewId: node.viewId, label: node.viewId || node.slotId });
+            out.push({
+                slotId: node.slotId,
+                viewId: node.viewId,
+                label: node.viewId || node.slotId,
+                meta: node.meta,
+            });
             return;
         }
         if (node.type === 'tabs') {

package/dist/layout/types.d.ts

@@ -86,6 +86,13 @@ export interface SlotNode {
     slotId: string;
     /** View id to mount into this slot, or null for an empty slot. */
     viewId: string | null;
+    /**
+     * Caller-supplied instance data, threaded to `MountContext.meta`.
+     * Ephemeral — not serialized with the layout tree. Mirrors
+     * `TabEntry.meta` for the bare-slot case (e.g. dismissable floats whose
+     * content is a single slot rather than a TabsNode).
+     */
+    meta?: Record<string, unknown>;
 }
 /**
  * Union of all layout node kinds. The recursive tree is composed entirely of

package/dist/migrations/mode-id-rename.d.ts

@@ -0,0 +1,9 @@
+interface MinimalStorage {
+    getItem(key: string): string | null;
+    setItem(key: string, value: string): void;
+    removeItem(key: string): void;
+}
+export declare function runModeIdRenameMigration(storage: MinimalStorage & {
+    _keys?: () => string[];
+}): void;
+export {};

package/dist/migrations/mode-id-rename.js

@@ -0,0 +1,39 @@
+/*
+ * One-shot migration: rewrites persisted shell-mode preferences from the
+ * pre-rename ids (`dev`, `user`) to the new ids (`bash`, `sh3`). Idempotent —
+ * gated by a localStorage flag, safe to call on every boot.
+ *
+ * Persistence shape: localStorage keys of the form `sh3.shell.lastMode.<userId>`
+ * (see packages/sh3-core/src/shell-shard/modes/prefs.ts).
+ */
+const FLAG_KEY = 'sh3:migrations:mode-id-rename:done';
+const KEY_PREFIX = 'sh3.shell.lastMode.';
+const REWRITES = { dev: 'bash', user: 'sh3' };
+function listKeys(storage) {
+    if (typeof storage._keys === 'function')
+        return storage._keys();
+    const ls = storage;
+    if (typeof ls.length === 'number' && typeof ls.key === 'function') {
+        const out = [];
+        for (let i = 0; i < ls.length; i++) {
+            const k = ls.key(i);
+            if (k !== null)
+                out.push(k);
+        }
+        return out;
+    }
+    return [];
+}
+export function runModeIdRenameMigration(storage) {
+    if (storage.getItem(FLAG_KEY))
+        return;
+    for (const key of listKeys(storage)) {
+        if (!key.startsWith(KEY_PREFIX))
+            continue;
+        const value = storage.getItem(key);
+        if (value && Object.prototype.hasOwnProperty.call(REWRITES, value)) {
+            storage.setItem(key, REWRITES[value]);
+        }
+    }
+    storage.setItem(FLAG_KEY, '1');
+}

package/dist/migrations/mode-id-rename.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/migrations/mode-id-rename.test.js

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest';
+import { runModeIdRenameMigration } from './mode-id-rename';
+function makeStorage(initial = {}) {
+    const map = new Map(Object.entries(initial));
+    return {
+        getItem: (k) => (map.has(k) ? map.get(k) : null),
+        setItem: (k, v) => { map.set(k, v); },
+        removeItem: (k) => { map.delete(k); },
+        _dump: () => Object.fromEntries(map),
+        _keys: () => [...map.keys()],
+    };
+}
+describe('runModeIdRenameMigration', () => {
+    it('rewrites dev → bash for every user-keyed pref', () => {
+        const s = makeStorage({
+            'sh3.shell.lastMode.alice': 'dev',
+            'sh3.shell.lastMode.bob': 'dev',
+        });
+        runModeIdRenameMigration(s);
+        expect(s._dump()).toMatchObject({
+            'sh3.shell.lastMode.alice': 'bash',
+            'sh3.shell.lastMode.bob': 'bash',
+        });
+    });
+    it('rewrites user → sh3 for every user-keyed pref', () => {
+        const s = makeStorage({ 'sh3.shell.lastMode.alice': 'user' });
+        runModeIdRenameMigration(s);
+        expect(s.getItem('sh3.shell.lastMode.alice')).toBe('sh3');
+    });
+    it('leaves unknown values untouched', () => {
+        const s = makeStorage({ 'sh3.shell.lastMode.alice': 'gemini' });
+        runModeIdRenameMigration(s);
+        expect(s.getItem('sh3.shell.lastMode.alice')).toBe('gemini');
+    });
+    it('is idempotent (gated by a done flag)', () => {
+        const s = makeStorage({ 'sh3.shell.lastMode.alice': 'dev' });
+        runModeIdRenameMigration(s);
+        s.setItem('sh3.shell.lastMode.alice', 'dev');
+        runModeIdRenameMigration(s);
+        expect(s.getItem('sh3.shell.lastMode.alice')).toBe('dev');
+    });
+    it('ignores unrelated keys', () => {
+        const s = makeStorage({
+            'sh3.shell.lastMode.alice': 'dev',
+            'sh3.unrelated': 'dev',
+            'random': 'user',
+        });
+        runModeIdRenameMigration(s);
+        expect(s.getItem('sh3.unrelated')).toBe('dev');
+        expect(s.getItem('random')).toBe('user');
+    });
+});

package/dist/overlays/FloatFrame.svelte

@@ -42,14 +42,20 @@
   // stacking context — so a picker opened from inside a modal stacks above
   // that modal without writing any z-index. The Svelte component lifecycle
   // is unaffected; we're only relocating the rendered DOM node.
+  //
+  // The cleanup removes frameEl directly: Svelte's keyed-each iteration
+  // removal walks the anchor range left in FloatLayer to clear the DOM, and
+  // the portal moved frameEl out of that range — re-parenting it back to
+  // FloatLayer would orphan it (Svelte's removal pass clears the empty
+  // anchor range and misses the re-deposited frame). Effect deps are stable
+  // (frameEl, entry.id), so cleanup only fires on destroy.
   $effect(() => {
     if (!frameEl) return;
     const host = getFloatParentHost(entry.id);
     if (!host) return;
-    const original = frameEl.parentNode;
     host.appendChild(frameEl);
     return () => {
-      if (frameEl?.parentNode === host && original) original.appendChild(frameEl);
+      if (frameEl?.parentNode === host) frameEl.remove();
     };
   });
 

package/dist/overlays/float.js

@@ -86,13 +86,16 @@ function openFloat(viewId, options = {}) {
     let content;
     if (options.dismissable) {
         // Picker float: render the view directly as a leaf slot. No tab strip,
-        // no tabs wrapper, no drag-to-dock handle. Note: options.meta cannot
-        // thread through a bare SlotNode — only TabEntry carries meta.
-        content = {
+        // no tabs wrapper, no drag-to-dock handle. SlotNode.meta carries
+        // options.meta through to MountContext, mirroring TabEntry.meta.
+        const slot = {
             type: 'slot',
             slotId,
             viewId,
         };
+        if (options.meta)
+            slot.meta = options.meta;
+        content = slot;
     }
     else {
         const label = (_a = options.title) !== null && _a !== void 0 ? _a : viewId;

package/dist/overlays/float.test.js

@@ -388,6 +388,32 @@ describe('floats — F.7 anchor portals to enclosing overlay host', () => {
         const frame = container.querySelector('[role="dialog"][aria-label="NoAnchor"]');
         expect(frame).toBeTruthy();
     });
+    // Regression: Svelte's keyed-each iteration removal walks the anchor range
+    // left in FloatLayer to clear the DOM. The portal moved frameEl out of that
+    // range, so a re-parent-back-to-original cleanup orphans the empty frame
+    // in FloatLayer when the float is dismissed. Cleanup must remove frameEl
+    // directly.
+    it('removes the portaled frame on dismiss (no orphan in FloatLayer)', async () => {
+        const { container } = renderWithShell(FloatLayer, {});
+        const fakeModalHost = document.createElement('div');
+        fakeModalHost.className = 'fake-modal-host';
+        fakeModalHost.dataset.shellOverlayHost = 'modal';
+        const anchor = document.createElement('button');
+        fakeModalHost.appendChild(anchor);
+        document.body.appendChild(fakeModalHost);
+        const id = floatManager.open('test:view', {
+            dismissable: true,
+            anchor,
+            title: 'Picker',
+        });
+        await tick();
+        expect(fakeModalHost.querySelector('.sh3-float-frame')).not.toBeNull();
+        floatManager.close(id);
+        await tick();
+        const layerDiv = container.querySelector('.sh3-float-layer');
+        expect(layerDiv === null || layerDiv === void 0 ? void 0 : layerDiv.querySelector('.sh3-float-frame')).toBeNull();
+        expect(document.querySelectorAll('.sh3-float-frame').length).toBe(0);
+    });
 });
 // ---------------------------------------------------------------------------
 // F.8 — overlay host marker on FloatFrame
@@ -406,3 +432,48 @@ describe('floats — F.8 overlay host marker', () => {
         expect(frame.dataset.shellOverlayHost).toBe('float');
     });
 });
+// ---------------------------------------------------------------------------
+// F.9 — meta threading from floatManager.open into MountContext
+// ---------------------------------------------------------------------------
+import { registerView } from '../shards/registry';
+describe('floats — F.9 meta threads to MountContext', () => {
+    beforeEach(() => {
+        resetFramework();
+        bindManagerToStore();
+    });
+    it('non-dismissable: ctx.meta receives options.meta on mount', async () => {
+        let captured;
+        registerView('test:meta-view', {
+            mount(_container, ctx) {
+                captured = ctx.meta;
+                return { unmount: () => { } };
+            },
+        });
+        renderWithShell(FloatLayer, {});
+        floatManager.open('test:meta-view', { title: 'M', meta: { kind: 'tab', n: 1 } });
+        await tick();
+        // acquireSlotHost defers factory.mount via queueMicrotask — flush it.
+        await Promise.resolve();
+        await tick();
+        expect(captured).toEqual({ kind: 'tab', n: 1 });
+    });
+    it('dismissable: ctx.meta receives options.meta on mount', async () => {
+        let captured;
+        registerView('test:meta-view', {
+            mount(_container, ctx) {
+                captured = ctx.meta;
+                return { unmount: () => { } };
+            },
+        });
+        renderWithShell(FloatLayer, {});
+        floatManager.open('test:meta-view', {
+            dismissable: true,
+            title: 'P',
+            meta: { kind: 'picker', color: '#abc' },
+        });
+        await tick();
+        await Promise.resolve();
+        await tick();
+        expect(captured).toEqual({ kind: 'picker', color: '#abc' });
+    });
+});

package/dist/primitives/widgets/IconToggleGroup.svelte

@@ -78,7 +78,10 @@
     color: var(--shell-fg);
     filter: none;
   }
-  .sh3-itg__btn--active {
+  /* Selector includes `.sh3-itg button` so specificity (0,2,1) beats the
+     base `.sh3-itg button` rule (0,1,1) — otherwise `background: transparent`
+     and `color: var(--shell-fg-muted)` would shadow the accent fill. */
+  .sh3-itg button.sh3-itg__btn--active {
     background: var(--shell-accent);
     color: var(--shell-fg-on-accent);
     font-weight: 600;

package/dist/primitives/widgets/Segmented.svelte

@@ -75,7 +75,10 @@
     color: var(--shell-fg);
     filter: none;
   }
-  .sh3-seg__btn--active {
+  /* Selector includes `.sh3-seg button` so specificity (0,2,1) beats the
+     base `.sh3-seg button` rule (0,1,1) — otherwise `background: transparent`
+     and `color: var(--shell-fg-muted)` would shadow the accent fill. */
+  .sh3-seg button.sh3-seg__btn--active {
     background: var(--shell-accent);
     color: var(--shell-fg-on-accent);
     font-weight: 600;

package/dist/sh3core-shard/AppInfoView.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+  /*
+   * Read-only details modal for an app, opened by the home-card `app.info`
+   * action. Pulls the manifest from listRegisteredApps() and — when the app
+   * was installed from a registry — augments it with the catalog entry
+   * (description, author) and the InstalledPackage record (source registry,
+   * install date, contract version). Built-in apps show only manifest fields.
+   */
+
+  import type { AppManifest } from '../apps/types';
+  import type { InstalledPackage, PackageEntry } from '../registry/types';
+
+  interface Props {
+    manifest: AppManifest;
+    installed: InstalledPackage | null;
+    catalogEntry: PackageEntry | null;
+    close: () => void;
+  }
+
+  let { manifest, installed, catalogEntry, close }: Props = $props();
+
+  let installedDate = $derived.by(() => {
+    if (!installed) return null;
+    const d = new Date(installed.installedAt);
+    return isNaN(d.getTime()) ? installed.installedAt : d.toLocaleString();
+  });
+</script>
+
+<div class="app-info-modal">
+  <header>
+    <h2>{manifest.label}</h2>
+    <code class="id">{manifest.id}</code>
+  </header>
+
+  <p class="version">
+    <span class="label">Version</span>
+    <code>v{manifest.version}</code>
+    {#if !installed}<span class="badge built-in">built-in</span>{/if}
+  </p>
+
+  {#if catalogEntry?.description}
+    <section class="description">
+      <span class="label">Description</span>
+      <p>{catalogEntry.description}</p>
+    </section>
+  {/if}
+
+  {#if catalogEntry?.author?.name}
+    <p class="row">
+      <span class="label">Author</span>
+      <span>{catalogEntry.author.name}</span>
+    </p>
+  {/if}
+
+  {#if manifest.requiredShards.length > 0}
+    <section class="row">
+      <span class="label">Required shards</span>
+      <ul class="chips">
+        {#each manifest.requiredShards as shard}
+          <li><code>{shard}</code></li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
+
+  {#if manifest.permissions && manifest.permissions.length > 0}
+    <section class="row">
+      <span class="label">Permissions</span>
+      <ul class="chips">
+        {#each manifest.permissions as perm}
+          <li><code>{perm}</code></li>
+        {/each}
+      </ul>
+    </section>
+  {/if}
+
+  {#if installed}
+    <section class="installed">
+      <p class="row"><span class="label">Source registry</span><code>{installed.sourceRegistry}</code></p>
+      {#if installedDate}
+        <p class="row"><span class="label">Installed</span><span>{installedDate}</span></p>
+      {/if}
+      <p class="row"><span class="label">Contract</span><code>v{installed.contractVersion}</code></p>
+    </section>
+  {/if}
+
+  <div class="actions">
+    <button type="button" onclick={close}>Close</button>
+  </div>
+</div>
+
+<style>
+  .app-info-modal {
+    padding: 16px 20px;
+    min-width: 360px;
+    max-width: 520px;
+    color: var(--shell-fg);
+    background: var(--shell-bg);
+    font: inherit;
+  }
+  header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
+  header h2 { margin: 0; font-size: 16px; }
+  header .id {
+    font-size: 12px;
+    color: var(--shell-fg-muted);
+  }
+  .version { margin: 4px 0 12px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
+  .description { margin: 8px 0 12px; }
+  .description p {
+    margin: 4px 0 0;
+    font-size: 13px;
+    line-height: 1.5;
+    white-space: pre-wrap;
+  }
+  .row { margin: 6px 0; font-size: 13px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+  .label {
+    color: var(--shell-fg-muted);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    flex: 0 0 auto;
+    min-width: 90px;
+  }
+  .chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
+  .chips code {
+    padding: 1px 6px;
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-radius-sm, 3px);
+  }
+  .badge {
+    font-size: 11px;
+    padding: 1px 6px;
+    border-radius: var(--shell-radius-sm, 3px);
+    background: var(--shell-bg-elevated);
+    color: var(--shell-fg-muted);
+    border: 1px solid var(--shell-border);
+  }
+  .installed { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--shell-border); }
+  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; justify-content: flex-end; }
+  .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:hover { border-color: var(--shell-accent); }
+</style>

package/dist/sh3core-shard/AppInfoView.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { AppManifest } from '../apps/types';
+import type { InstalledPackage, PackageEntry } from '../registry/types';
+interface Props {
+    manifest: AppManifest;
+    installed: InstalledPackage | null;
+    catalogEntry: PackageEntry | null;
+    close: () => void;
+}
+declare const AppInfoView: import("svelte").Component<Props, {}, "">;
+type AppInfoView = ReturnType<typeof AppInfoView>;
+export default AppInfoView;

package/dist/sh3core-shard/appActions.js

@@ -5,7 +5,8 @@
  * 'app' (see ShellHome.svelte).
  *
  * Three actions are registered here:
- *   - app.info        : info-only row showing "<id> v<version>" (always disabled).
+ *   - app.info        : open the AppInfoView modal with manifest + (when
+ *                       installed) catalog/install metadata. Always enabled.
  *   - app.checkUpdate : refresh catalog, then prompt update or toast up-to-date.
  *   - app.uninstall   : open uninstall confirm dialog.
  *
@@ -25,6 +26,7 @@ import { modalManager } from '../overlays/modal';
 import { toastManager } from '../overlays/toast';
 import AppUpdateAvailableModal from '../app/store/AppUpdateAvailableModal.svelte';
 import UninstallAppDialog from '../app/store/UninstallAppDialog.svelte';
+import AppInfoView from './AppInfoView.svelte';
 export function computeAppActionDisabled(g) {
     return !g.admin || g.builtin;
 }
@@ -50,6 +52,22 @@ function isBuiltin(appId) {
 function gateFor(appId) {
     return { admin: isAdmin(), builtin: isBuiltin(appId) };
 }
+function runShowInfo(_ctx) {
+    var _a, _b, _c;
+    const ref = readSelection();
+    if (!ref)
+        return;
+    const manifest = findApp(ref.appId);
+    if (!manifest)
+        return;
+    const installed = (_a = storeContext.state.ephemeral.installed.find((p) => p.id === ref.appId)) !== null && _a !== void 0 ? _a : null;
+    // Catalog entry only exists for apps fetched from a registry — built-in
+    // apps will fall through to null and the modal will hide registry-only
+    // fields (description, author).
+    const catalogEntry = (_c = (_b = storeContext.state.ephemeral.catalog.find((p) => p.entry.id === ref.appId)) === null || _b === void 0 ? void 0 : _b.entry) !== null && _c !== void 0 ? _c : null;
+    const props = { manifest, installed, catalogEntry };
+    modalManager.open(AppInfoView, props);
+}
 async function runCheckUpdate(_ctx) {
     var _a, _b;
     const ref = readSelection();
@@ -124,11 +142,11 @@ export function registerAppActions(ctx) {
     const infoLabel = () => {
         const ref = readSelection();
         if (!ref)
-            return '';
+            return 'Info…';
         const m = findApp(ref.appId);
         if (!m)
-            return ref.appId;
-        return `${m.id} v${m.version}`;
+            return `Info — ${ref.appId}`;
+        return `Info — ${m.label} v${m.version}`;
     };
     const updateLabel = () => {
         const ref = readSelection();
@@ -155,7 +173,7 @@ export function registerAppActions(ctx) {
             scope: { element: 'app' },
             contextItem: true,
             group: 'info',
-            disabled: true,
+            run: runShowInfo,
         },
         {
             id: 'app.checkUpdate',

package/dist/shell-shard/ScrollbackView.svelte

@@ -11,30 +11,51 @@
   let { scrollback }: Props = $props();
 
   let container: HTMLDivElement | null = $state(null);
+  let content: HTMLDivElement | null = $state(null);
+  let stuck = true;
 
-  // Auto-scroll to bottom on new entries
+  // scrollHeight - scrollTop - clientHeight can settle on small non-zero
+  // values from sub-pixel rounding even when visually at the bottom.
+  const STICK_THRESHOLD_PX = 4;
+
+  function isAtBottom(el: HTMLElement): boolean {
+    return el.scrollHeight - el.scrollTop - el.clientHeight <= STICK_THRESHOLD_PX;
+  }
+
+  function handleScroll(): void {
+    if (container) stuck = isAtBottom(container);
+  }
+
+  // ResizeObserver on the inner content wrapper fires on any layout-affecting
+  // change regardless of source: text-chunk pushes, mutated rich-entry props
+  // (output.stream() / output.rich() handles), image or font load. A reactivity-
+  // driven approach (depending on entries.length or chunk counts) misses rich
+  // streaming because props are mutated via Object.assign and the outer view
+  // never reads them.
   $effect(() => {
-    // Depend on entries length so the effect re-runs
-    const _len = scrollback.entries.length;
-    void _len;
-    if (container) {
-      container.scrollTop = container.scrollHeight;
-    }
+    if (!content || !container) return;
+    const ro = new ResizeObserver(() => {
+      if (container && stuck) container.scrollTop = container.scrollHeight;
+    });
+    ro.observe(content);
+    return () => ro.disconnect();
   });
 </script>
 
-<div class="shell-scrollback" bind:this={container}>
-  {#each scrollback.entries as entry (entry.id)}
-    {#if entry.kind === 'text'}
-      <TextEntry stream={entry.stream} chunks={entry.chunks} />
-    {:else if entry.kind === 'prompt'}
-      <PromptEntry cwd={entry.cwd} line={entry.line} />
-    {:else if entry.kind === 'status'}
-      <StatusEntry text={entry.text} level={entry.level} />
-    {:else if entry.kind === 'rich'}
-      <RichEntry component={entry.component} componentProps={entry.props} />
-    {/if}
-  {/each}
+<div class="shell-scrollback" bind:this={container} onscroll={handleScroll}>
+  <div class="content" bind:this={content}>
+    {#each scrollback.entries as entry (entry.id)}
+      {#if entry.kind === 'text'}
+        <TextEntry stream={entry.stream} chunks={entry.chunks} />
+      {:else if entry.kind === 'prompt'}
+        <PromptEntry cwd={entry.cwd} line={entry.line} />
+      {:else if entry.kind === 'status'}
+        <StatusEntry text={entry.text} level={entry.level} />
+      {:else if entry.kind === 'rich'}
+        <RichEntry component={entry.component} componentProps={entry.props} />
+      {/if}
+    {/each}
+  </div>
 </div>
 
 <style>