@bivy/bivy 0.17.3-staging.2 → 0.17.3-staging.21

package/dist/apps/service.js

@@ -1,23 +1,138 @@
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import { scanListeners } from "./listeners.js";
+import { takeShots } from "./screenshot.js";
+const NO_DISPLAYS = { unavailable: () => "Desktop app views aren't available on this machine.", ensure: () => Promise.reject(new Error("Desktop app views aren't available on this machine.")), stop: () => { } };
+/** How long a screenshot waits for a desktop app's first window. */
+const WINDOW_WAIT_MS = 15_000;
 /** Composes view providers; registry never spawns processes and the gateway
  * never knows about terminals. New providers can extend open/remove here. */
+/** A managed server that keeps exiting is left down after this many restarts
+ * in RESTART_WINDOW; opening the view again tries afresh. */
+const MAX_RESTARTS = 5;
+/** Compare keeps this many shots per view, taken after servers settle. */
+const COMPARE_KEEP = 4;
+const COMPARE_SETTLE_MS = 1_500;
+const RESTART_WINDOW = 10 * 60_000;
 export class AppService {
     registry;
     gateway;
     terminals;
     terminalStarts = new Map();
-    constructor(registry, gateway, terminals) {
+    servers = new Map();
+    scan;
+    serverWatchMs;
+    screenshots;
+    displays;
+    shooting = Promise.resolve();
+    constructor(registry, gateway, terminals, options = {}) {
         this.registry = registry;
         this.gateway = gateway;
         this.terminals = terminals;
+        this.scan = options.scan ?? scanListeners;
+        this.serverWatchMs = options.serverWatchMs ?? 5_000;
+        this.screenshots = { enabled: options.screenshots?.enabled ?? (() => false), take: options.screenshots?.take ?? takeShots };
+        this.displays = options.displays ?? NO_DISPLAYS;
     }
-    list(sessionId) { return { apps: this.registry.list(sessionId), previewAvailable: Boolean(this.gateway) && this.gateway?.available !== false }; }
-    publish(sessionId, workspace, manifest) { return this.registry.publish(sessionId, workspace, manifest); }
-    async open(sessionId, appId, viewId, returnTo) {
+    /** A session's apps, or every app on this machine when no session is given. */
+    list(sessionId) {
+        const available = Boolean(this.gateway) && this.gateway?.available !== false;
+        const apps = this.registry.list(sessionId);
+        for (const app of apps)
+            for (const view of app.views) {
+                if (view.kind !== "web")
+                    continue;
+                if (available)
+                    view.address = this.gateway?.address?.(view.id);
+                const entry = this.registry.getView(view.id);
+                if (entry?.notes?.length)
+                    view.notes = structuredClone(entry.notes);
+                if (entry?.stats)
+                    view.stats = structuredClone(entry.stats);
+            }
+        return { apps, previewAvailable: available };
+    }
+    publish(sessionId, workspace, manifest) {
+        // Tell the agent now, not on first open, when this machine can't show it.
+        const unavailable = manifest?.views?.some?.((view) => view?.kind === "display") && this.displays.unavailable();
+        if (unavailable)
+            throw new Error(unavailable);
+        return this.registry.publish(sessionId, workspace, manifest);
+    }
+    /** An agent turn changed files in this session's workspace. With agent
+     * screenshots on, Compare gets an "after" shot once servers have rebuilt. */
+    turnChanged(sessionId) {
+        const bumped = this.registry.touch(sessionId);
+        // Desktop apps that asked for it are restarted, so they run the new code.
+        for (const id of bumped) {
+            const entry = this.registry.getView(id);
+            const server = this.servers.get(id);
+            if (entry?.target.kind !== "display" || !server?.termId)
+                continue;
+            this.terminals.close(server.termId);
+            server.termId = undefined;
+            void this.ensureServer(entry).catch(() => { });
+        }
+        if (bumped.length && this.screenshots.enabled())
+            setTimeout(() => void this.capture(bumped), COMPARE_SETTLE_MS).unref?.();
+        return bumped;
+    }
+    /** One phone-width shot per view of the page last viewed, kept for Compare. */
+    async capture(viewIds) {
+        for (const id of viewIds) {
+            const entry = this.registry.getView(id);
+            if (!entry || entry.view.kind !== "web")
+                continue;
+            await this.windowShown(entry).catch(() => { });
+            const outDir = path.join(os.tmpdir(), "bivy-shots", "compare", id);
+            const run = this.shooting.catch(() => { }).then(() => this.screenshots.take([entry], { widths: [390], themes: ["light"], path: entry.lastPath ?? "/" }, outDir));
+            this.shooting = run;
+            try {
+                const [shot] = await run;
+                if (!shot)
+                    continue;
+                const png = fs.readFileSync(shot.file);
+                fs.rmSync(outDir, { recursive: true, force: true });
+                entry.shots = [...(entry.shots ?? []), { revision: entry.revision, at: Date.now(), png }].slice(-COMPARE_KEEP);
+            }
+            catch { /* a failed shot just leaves Compare without this turn */ }
+        }
+    }
+    /** Servers running in the workspace that this session doesn't preview yet. */
+    async offers(sessionId, workspace) {
+        const claimed = this.registry.claimedPorts(sessionId);
+        return { offers: (await this.scan(workspace)).filter((offer) => !claimed.has(offer.port)) };
+    }
+    /** Publish a detected server. Re-scanned so a client can't adopt an arbitrary port. */
+    async adopt(sessionId, workspace, port) {
+        const offer = (await this.offers(sessionId, workspace)).offers.find((item) => item.port === port);
+        if (!offer)
+            throw new Error(`Nothing in this session's workspace is listening on port ${port} any more.`);
+        return this.registry.publish(sessionId, workspace, { version: 1, name: `${offer.command} · :${port}`.slice(0, 100), views: [{ kind: "web", name: `Port ${port}`, source: { kind: "service", port } }] });
+    }
+    /** `direct` opens the app origin itself (no shell): a signed-in device
+     * returning to a view's stable address. */
+    /** `scale`: the opening device's pixel density, used if this starts a display. */
+    async open(sessionId, appId, viewId, returnTo, direct = false, scale) {
         const entry = this.registry.requireView(sessionId, appId, viewId);
+        if (entry.target.kind === "display" && !entry.display)
+            entry.displayScale = scale === 2 ? 2 : 1;
         if (entry.view.kind === "web") {
             if (!this.gateway)
                 throw new Error("Bivy's preview service is unavailable on this connection.");
-            return { kind: "web", url: this.gateway.open(viewId, returnTo) };
+            if (direct && !this.gateway.openDirect)
+                throw new Error("This machine can't open previews directly.");
+            const url = direct ? this.gateway.openDirect(viewId) : this.gateway.open(viewId, returnTo);
+            // Don't wait for a managed server to boot: the preview shows it starting
+            // and reloads itself once it answers.
+            if (this.servers.get(viewId))
+                this.servers.get(viewId).restarts = [];
+            void this.ensureServer(entry).catch(() => { });
+            // Compare needs a "before": take a baseline the first time it's opened.
+            if (!entry.shots?.length && this.screenshots.enabled())
+                setTimeout(() => void this.capture([viewId]), COMPARE_SETTLE_MS).unref?.();
+            return { kind: "web", url };
         }
         if (entry.target.kind !== "terminal")
             throw new Error("Unsupported app view provider.");
@@ -48,6 +163,125 @@ export class AppService {
             throw error;
         }
     }
+    /** Screenshots of a session's web views (one app, or all), for agents to
+     * check their own UI. One browser at a time node-wide; PNGs in a temp dir. */
+    async shot(sessionId, appId, input) {
+        if (!this.screenshots.enabled())
+            throw new Error("Agent screenshots are off on this machine. Turn on “Let agents screenshot their app previews” in Bivy → Settings → this machine, or run: bivy config set sessions.appScreenshots true");
+        const widths = input.widths ?? [390, 1280];
+        const themes = input.themes ?? ["light"];
+        const page = input.path ?? "/";
+        if (!Array.isArray(widths) || !widths.length || widths.length > 4 || widths.some((w) => !Number.isInteger(w) || w < 240 || w > 2560))
+            throw new Error("Widths must be 1–4 whole numbers between 240 and 2560.");
+        if (!Array.isArray(themes) || !themes.length || themes.some((t) => t !== "light" && t !== "dark"))
+            throw new Error("Themes must be light and/or dark.");
+        if (typeof page !== "string" || !page.startsWith("/") || page.startsWith("//") || page.length > 2048)
+            throw new Error("Path must start with /.");
+        const apps = appId ? [this.registry.require(sessionId, appId)] : this.registry.list(sessionId);
+        const views = apps.flatMap((app) => app.views).filter((view) => view.kind === "web").map((view) => this.registry.getView(view.id)).filter(Boolean);
+        if (!views.length)
+            throw new Error("This session has no web views to screenshot. Publish one with bivy app publish, or preview a detected server.");
+        await Promise.all(views.map((entry) => this.windowShown(entry)));
+        const outDir = path.join(os.tmpdir(), "bivy-shots", sessionId.replace(/[^A-Za-z0-9_-]/g, "_"), String(Date.now()));
+        const run = this.shooting.catch(() => { }).then(() => this.screenshots.take(views, { widths, themes: [...new Set(themes)], path: page }, outDir));
+        this.shooting = run;
+        return { shots: await run };
+    }
+    /** The managed server's output, as an attachable terminal (starts it if needed). */
+    async logs(sessionId, appId, viewId) {
+        const entry = this.registry.requireView(sessionId, appId, viewId);
+        const termId = await this.ensureServer(entry);
+        if (!termId)
+            throw new Error("Only views with a start command have server logs.");
+        return { kind: "terminal", termId };
+    }
+    /** A desktop app's display is up and showing a window (or gave up waiting),
+     * so a screenshot shows the app rather than an empty screen. */
+    async windowShown(entry) {
+        if (entry.target.kind !== "display")
+            return;
+        await this.ensureServer(entry);
+        const display = await this.displays.ensure(entry.view.id, entry.app.name, entry.displayScale);
+        for (const until = Date.now() + WINDOW_WAIT_MS; !display.wm.count && Date.now() < until;)
+            await new Promise((r) => setTimeout(r, 100));
+        await new Promise((r) => setTimeout(r, 800)); // first paint
+    }
+    /** The program Bivy runs for a view: a service's start command, or a desktop
+     * app on its display (started first). */
+    program(entry) {
+        const target = entry.target;
+        if (target.kind === "service" && target.start)
+            return { ...target.start, name: `${entry.app.name} · ${entry.view.name} server` };
+        if (target.kind !== "display")
+            throw new Error("This view has no program.");
+        return this.displays.ensure(entry.view.id, entry.app.name, entry.displayScale).then((display) => {
+            entry.display = display.socket;
+            return { command: target.command, args: target.args, workspace: target.workspace, env: display.env, name: `${entry.app.name} · ${entry.view.name}` };
+        });
+    }
+    /** Services start synchronously; a desktop app waits for its display. */
+    startProgram(entry) {
+        const program = this.program(entry);
+        return program instanceof Promise ? program.then((spec) => this.terminals.start(spec)) : this.terminals.start(program);
+    }
+    ensureServer(entry) {
+        if (!(entry.target.kind === "service" && entry.target.start) && entry.target.kind !== "display")
+            return Promise.resolve(undefined);
+        const id = entry.view.id;
+        let state = this.servers.get(id);
+        if (!state) {
+            state = { restarts: [] };
+            this.servers.set(id, state);
+        }
+        const server = state;
+        if (server.termId && this.terminals.has(server.termId))
+            return Promise.resolve(server.termId);
+        server.pending ??= this.startProgram(entry)
+            .then((termId) => {
+            if (!this.registry.getView(id)) {
+                this.terminals.close(termId);
+                throw new Error("App was removed while starting.");
+            }
+            server.termId = termId;
+            return termId;
+        })
+            .finally(() => { server.pending = undefined; });
+        // Watch for exits and restart, backing off a crash loop.
+        server.timer ??= setInterval(() => {
+            const current = this.registry.getView(id);
+            if (!current) {
+                this.stopServer(id);
+                return;
+            }
+            if (server.pending || !server.termId || this.terminals.has(server.termId))
+                return;
+            const now = Date.now();
+            server.restarts = server.restarts.filter((at) => now - at < RESTART_WINDOW);
+            if (server.restarts.length >= MAX_RESTARTS)
+                return;
+            server.restarts.push(now);
+            server.termId = undefined;
+            void this.ensureServer(current).catch(() => { });
+        }, this.serverWatchMs);
+        server.timer.unref?.();
+        return server.pending;
+    }
+    stopServer(id) {
+        this.displays.stop(id);
+        const entry = this.registry.getView(id);
+        if (entry) {
+            entry.display = undefined;
+            entry.displayScale = undefined;
+        }
+        const server = this.servers.get(id);
+        if (!server)
+            return;
+        clearInterval(server.timer);
+        if (server.termId)
+            this.terminals.close(server.termId);
+        void server.pending?.then((termId) => this.terminals.close(termId)).catch(() => { });
+        this.servers.delete(id);
+    }
     share(sessionId, appId, viewId) {
         if (this.registry.requireView(sessionId, appId, viewId).view.kind !== "web")
             throw new Error("Only web views have preview links.");
@@ -55,6 +289,10 @@ export class AppService {
             throw new Error("Bivy's preview service is unavailable on this connection.");
         return this.gateway.share(viewId);
     }
+    clearNotes(sessionId, appId, viewId) {
+        delete this.registry.requireView(sessionId, appId, viewId).notes;
+        return { ok: true };
+    }
     /** Ends every link, browser session and open connection for one view; the app stays. */
     revoke(sessionId, appId, viewId) {
         this.registry.requireView(sessionId, appId, viewId);
@@ -66,6 +304,7 @@ export class AppService {
         this.registry.remove(sessionId, appId);
         for (const view of app.views) {
             this.gateway?.revoke(view.id);
+            this.stopServer(view.id);
             const pending = this.terminalStarts.get(view.id);
             this.terminalStarts.delete(view.id);
             if (pending)

package/dist/apps/styles.css

@@ -551,6 +551,8 @@ input, textarea, select { font-family: inherit; font-size: 16px; }
 .hljs-addition { color: var(--syntax-addition); }
 .msg.system { align-self: center; color: var(--muted); font-size: 13px; font-style: italic; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
 .msg.system .system-text { display: block; }
+.entry-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); font-style: normal; }
+.msg.system .entry-actions { justify-content: center; }
 .msg.thinking { align-self: flex-start; color: var(--muted); font-size: 13px; border-left: 2px solid var(--line-strong); padding-left: 10px; }
 .msg.error {
   align-self: stretch; display: flex; gap: 8px; align-items: flex-start;
@@ -586,6 +588,12 @@ input, textarea, select { font-family: inherit; font-size: 16px; }
    discoverability pattern as .row-menu-btn — and a touch-friendly baseline
    opacity on devices with no hover. */
 .assistant-row { align-self: stretch; width: 100%; max-width: 680px; }
+/* The message "Show in chat" landed on (Artifacts / Apps pages). */
+.is-jump-target { border-radius: var(--radius-md); animation: jump-target 2.4s var(--ease-standard); }
+@keyframes jump-target {
+  0%, 50% { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 var(--space-2) color-mix(in srgb, var(--accent) 10%, transparent); }
+  100% { background: transparent; box-shadow: 0 0 0 var(--space-2) transparent; }
+}
 .msg-actions { display: flex; align-items: center; gap: 2px; margin-top: var(--space-1); margin-left: -6px; }
 .msg-copy-btn, .msg-speak-btn {
   border: 0; background: transparent; color: var(--muted);
@@ -1269,6 +1277,7 @@ button.sheet-action:last-child { border-bottom: 0; }
 .fork-select-field select { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); }
 .fork-toggle { display: flex; align-items: center; gap: 8px; padding: 10px 12px; font-size: 13px; color: var(--ink); }
 .fork-toggle input { width: 16px; height: 16px; }
+.fork-note { margin: 0; padding: var(--space-2) var(--space-3); color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
 .fork-error { margin: 4px 12px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--danger); font-size: 12px; }
 .fork-warn { margin: 4px 12px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--muted); font-size: 12px; }
 .fork-submit { width: calc(100% - 24px); margin: var(--space-2) var(--space-3); }
@@ -1393,7 +1402,12 @@ button.sheet-action:last-child { border-bottom: 0; }
   font-weight: var(--weight-semibold); cursor: pointer; white-space: nowrap;
 }
 .seg-btn:hover { color: var(--ink); }
-.seg-btn[aria-selected="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
+.seg-btn[aria-selected="true"], .seg-btn[aria-checked="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
+/* Chat | Terminal in the session topbar (SessionViewToggle). */
+.topbar-subline { display: flex; align-items: center; gap: var(--space-3); min-width: 0; margin-top: 2px; }
+.topbar-subline .node-switcher { flex: 0 1 auto; }
+.session-view-toggle { flex: none; padding: 2px; }
+.session-view-toggle .seg-btn { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); line-height: 1.25; }
 .automations-tabs {
   flex: none; align-self: center; max-width: calc(100% - var(--space-6));
   margin: var(--space-2) auto 0; overflow-x: auto;
@@ -1409,6 +1423,51 @@ button.sheet-action:last-child { border-bottom: 0; }
   .automations-view-head-actions > .btn.primary { padding: 9px 18px; }
   .automations-view-body { padding: 8px 24px max(48px, env(safe-area-inset-bottom)); }
 }
+/* Artifacts / Apps pages (LibraryView.tsx) share the Automations page shell:
+   a quiet image grid for files, a plain list for apps. */
+.library-view:focus { outline: none; }
+.library-view .automations-view-head { width: 100%; max-width: 1080px; margin: 0 auto; box-sizing: border-box; }
+.library-body { max-width: 1080px; }
+.library-toolbar { display: flex; margin: var(--space-2) 0 var(--space-4); }
+.library-loading { display: flex; justify-content: center; padding: var(--space-8) 0; }
+.library-body > .banner { margin: var(--space-2) 0; }
+.library-note { margin: var(--space-2) 0; font-size: var(--text-sm); color: var(--muted); }
+.library-grid {
+  list-style: none; margin: var(--space-2) 0 0; padding: 0;
+  display: grid; gap: var(--space-5) var(--space-3);
+  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+}
+.library-tile { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
+.library-tile-preview {
+  width: 100%; aspect-ratio: 4 / 3; padding: 0; overflow: hidden;
+  display: grid; place-items: center;
+  border: 1px solid var(--line); border-radius: var(--radius-lg);
+  background: var(--surface-2); color: var(--muted); font: inherit; cursor: pointer;
+  transition: border-color var(--dur-fast) var(--ease-standard);
+}
+.library-tile-preview:hover:not(:disabled) { border-color: var(--line-strong); }
+.library-tile-preview:disabled { cursor: progress; }
+.library-tile-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.library-tile-file { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
+.library-tile-ext { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; }
+.library-tile-caption { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 2px; }
+.library-tile-name {
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink);
+}
+.library-tile-note { font-size: var(--text-xs); color: var(--danger); }
+.library-source {
+  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-1);
+  max-width: 100%; min-width: 0; min-height: 28px; padding: 0; border: 0; background: transparent;
+  color: var(--muted); font: inherit; font-size: var(--text-xs); text-align: left; cursor: pointer;
+}
+.library-source:hover { color: var(--ink); }
+.library-source svg, .library-source-when { flex: none; }
+.library-source-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (min-width: 640px) {
+  .library-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-6) var(--space-4); }
+}
+
 .autom-section { margin-top: 26px; }
 .autom-section-head {
   display: flex; align-items: center; justify-content: space-between; gap: 10px;
@@ -2443,6 +2502,12 @@ textarea.picker-search { resize: vertical; font-family: ui-monospace, monospace;
   height: var(--app-h, 100dvh); z-index: var(--z-sheet); display: flex; flex-direction: column;
   background: var(--bg); padding-top: env(safe-area-inset-top);
 }
+/* The same terminal inside the session pane (Chat | Terminal toggle): in the
+   main column's flow under the topbar, not a fixed full-screen layer. */
+.term-overlay.term-embedded {
+  position: relative; top: auto; left: auto; width: auto; height: auto;
+  flex: 1 1 auto; min-height: 0; z-index: auto; padding-top: 0;
+}
 .term-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
 .term-title { font-weight: 700; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .term-status { color: var(--muted); font-weight: 400; margin-left: 8px; font-size: 12px; }
@@ -2490,6 +2555,10 @@ textarea.picker-search { resize: vertical; font-family: ui-monospace, monospace;
 }
 .term-out .xterm { height: 100%; }
 .term-out .xterm-viewport { overflow-y: auto; overscroll-behavior: contain; }
+/* xterm.css paints the viewport #000; the GPU renderers cover it with the theme
+   background, the DOM fallback does not — a light-theme sliver below the last
+   row. Match readTheme()'s background. */
+.term-out .xterm .xterm-viewport { background-color: var(--bg); }
 /* Smooth momentum scrolling for the terminal viewport on touch devices. */
 .term-out .xterm-viewport { -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
 
@@ -2850,6 +2919,9 @@ select.picker-search { appearance: auto; }
 .scrim { position: fixed; inset: 0; background: var(--overlay); z-index: var(--z-dropdown); }
 @media (max-width: 900px) {
   .app { grid-template-columns: 1fr; }
+  /* Share the subtitle line with the machine name: icons only (the accessible
+     name stays via aria-label). */
+  .session-view-label { display: none; }
   .only-mobile { display: inline-flex; }
   .sidebar {
     position: fixed; top: var(--app-top, 0px); left: 0; height: var(--app-h, 100dvh);
@@ -2951,15 +3023,53 @@ select.picker-search { appearance: auto; }
 
 /* Artifacts sheet (components/ArtifactsSheet.tsx) — agent-sent attachments,
    user uploads, and resolved inline images grouped by kind. */
-.app-views-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
-.app-views-heading .artifact-name, .app-message .artifact-name { white-space: normal; overflow-wrap: anywhere; }
-.app-view-row { flex-wrap: wrap; }
-.app-views-heading > .btn, .app-view-actions .btn { min-block-size: var(--space-7); flex-shrink: 0; }
-.app-view-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-inline-start: auto; }
-.app-view-notice { display: flex; flex-direction: column; gap: var(--space-2); flex-basis: 100%; min-width: 0; }
+/* An app, a view of it, or a server that could become one (AppRow.tsx): the
+   same tile, type and trailing action in the chat card, the Apps page and the
+   Apps sheet. Views nest inside their app's card as small rows. */
+.apps-card { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow-wrap: anywhere; }
+.apps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
+.app-row { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: var(--space-3); }
+.app-tile { flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-2); color: var(--ink); font-weight: var(--weight-semibold); }
+.app-row.small .app-tile { inline-size: 36px; block-size: 36px; border-radius: var(--radius-sm); color: var(--muted); }
+.app-tile-port { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ok); }
+.app-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.app-row-name { font-size: var(--text-base); font-weight: var(--weight-semibold); }
+.app-row.small .app-row-name { font-size: var(--text-sm); }
+.app-row-meta { color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
+.app-row-action { flex: none; display: flex; align-items: center; gap: var(--space-1); }
+.app-message { margin-block: var(--space-2); }
+
+/* Apps sheet (AppsSheet.tsx): one card per app, its views nested, one primary
+   action per view; secondary tools as quiet icon buttons; rare or destructive
+   actions behind ⋯ (MoreMenu, the canonical .menu). Status uses .banner. */
+.apps-sheet { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-4); }
+.apps-state { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-6) 0; color: var(--muted); font-size: var(--text-sm); }
+.apps-group { display: flex; flex-direction: column; gap: var(--space-2); }
+.apps-group-title { margin: 0; padding: 0 var(--space-1); color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
+.apps-view { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
+.apps-cmd { display: block; margin: 0 var(--space-3) var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font-family: var(--font-mono); font-size: var(--text-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
+.apps-view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0; padding: 0 var(--space-1) var(--space-1); }
+.apps-view-tools .btn { gap: 6px; padding-inline: var(--space-2); color: var(--muted); }
+.apps-view-tools .btn:hover:not(:disabled) { color: var(--ink); }
+.apps-more { position: relative; }
+.apps-view-tools .apps-more { margin-inline-start: auto; }
+.apps-more-menu { position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: var(--z-dropdown); }
+.apps-notice { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 var(--space-3) var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ok) 12%, transparent); font-size: var(--text-sm); }
+.apps-notice > svg { flex: none; margin-top: 1px; color: var(--ok); }
+.apps-notes { display: flex; flex-direction: column; gap: var(--space-2); margin: 0 var(--space-3) var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--line); }
+.apps-notes-head { display: flex; align-items: center; gap: var(--space-2); color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
+.apps-count { min-inline-size: 18px; padding: 0 6px; border-radius: var(--radius-full); background: var(--surface-3); color: var(--ink); text-align: center; letter-spacing: 0; }
+.apps-notes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
+.apps-note { display: flex; flex-direction: column; gap: 2px; padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--line-strong); }
+.apps-note-text { color: var(--ink); font-size: var(--text-sm); }
+.apps-notes-actions { display: flex; gap: var(--space-2); }
+.apps-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); color: var(--muted); font-size: var(--text-sm); text-align: center; }
+.apps-empty strong { color: var(--ink); font-size: var(--text-base); }
+.apps-empty p { margin: 0; max-inline-size: 34ch; }
+.apps-foot { margin: 0; padding: 0 var(--space-1); color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-xs); }
+/* Peek: an app preview framed in a drawer over the chat (PreviewPeek.tsx). */
+.preview-peek { display: block; inline-size: 100%; block-size: 100%; border: 0; border-radius: var(--radius-md); background: var(--bg); }
 .app-terminal-status { padding: var(--space-2) var(--space-4); margin: 0; color: var(--muted); font-size: var(--text-sm); }
-.app-view-command { overflow-wrap: anywhere; white-space: pre-wrap; font-size: var(--text-xs); color: var(--muted); }
-.app-view-row .artifact-main { flex-basis: 60%; }
 .artifacts-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
 .artifacts-group:last-child { margin-bottom: 0; }
 .artifacts-group-title { font-size: 12px; font-weight: 600; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.04em; }
@@ -3196,3 +3306,8 @@ select.picker-search { appearance: auto; }
   .automation-history-view .autom-section-head { align-items: flex-start; gap: var(--space-3); }
   .automation-history-view .autom-section-head > strong { min-width: 0; line-height: var(--lh-lg); }
 }
+
+/* Handoff notes above the composer (HandoffBanner, StandbyNotice): shaped like
+   the composer itself, with one line of another device's draft. */
+.handoff-banner { border-radius: var(--radius-md); }
+.handoff-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }