codebay 0.3.0 → 0.4.0

package/.mochi/svelte-compile/{chunk-9bjk7yx6.js → chunk-6ghzacpg.js}

@@ -1,7 +1,7 @@
 // @bun
 import {
   Icon
-} from "./chunk-v6796ga4.js";
+} from "./chunk-fpe16ywq.js";
 
 // node_modules/@lucide/svelte/dist/icons/plus.svelte
 import"svelte/internal/flags/async";

package/.mochi/svelte-compile/{chunk-4kwy539a.js → chunk-bacb4b0r.js}

@@ -1,7 +1,7 @@
 // @bun
 import {
   Icon
-} from "./chunk-v6796ga4.js";
+} from "./chunk-fpe16ywq.js";
 
 // node_modules/@lucide/svelte/dist/icons/x.svelte
 import"svelte/internal/flags/async";

package/.mochi/svelte-compile/{chunk-sxqys3nw.js → chunk-dfe2km6a.js}

@@ -1,7 +1,7 @@
 // @bun
 import {
   Icon
-} from "./chunk-v6796ga4.js";
+} from "./chunk-fpe16ywq.js";
 
 // src/avatars/anchor.ts
 var art = {
@@ -916,6 +916,9 @@ function fnv1a(s) {
 function pickAvatar(id) {
   return avatars[fnv1a(id) % avatars.length];
 }
+function findAvatar(name) {
+  return name ? avatars.find((a) => a.name === name) : undefined;
+}
 
 // src/components/Avatar.svelte
 import"svelte/internal/flags/async";
@@ -1665,4 +1668,4 @@ function AppBar($$renderer, $$props) {
   $$renderer.push(`<!----></header>`);
 }
 
-export { OFF, ON, ROWS, COLS, avatars, Avatar, Button, Toaster, dist_default, AppBar };
+export { OFF, ON, ROWS, COLS, avatars, findAvatar, Avatar, Button, Toaster, dist_default, AppBar };

package/.mochi/svelte-compile/{chunk-v6796ga4.js → chunk-fpe16ywq.js}

@@ -1770,7 +1770,7 @@ import { randomUUID } from "crypto";
 // node_modules/mochi-framework/src/cache/cache-storage.ts
 import { mkdirSync, rmSync } from "fs";
 import { mkdir, open, readdir, rename, rm, stat, unlink } from "fs/promises";
-import { join, relative } from "path";
+import { join, relative, resolve } from "path";
 
 // node_modules/mochi-framework/src/events.ts
 var mochiEvents = pinGlobal("__mochi_events__", () => {
@@ -1799,6 +1799,7 @@ var mochiEvents = pinGlobal("__mochi_events__", () => {
 });
 
 // node_modules/mochi-framework/src/cache/cache-storage.ts
+var sweeperOwners = pinGlobal("__mochi_cache_sweeper_owners__", () => new Map);
 function isBlobRef(value) {
   return typeof value === "object" && value !== null && value.__mochiBlobRef === true;
 }
@@ -1927,6 +1928,8 @@ class FileStorage {
   offloadBinary;
   initialTimer;
   intervalTimer;
+  sweepKey;
+  sweepOwner;
   constructor(options) {
     this.directory = options.directory;
     this.maxAge = options.maxAge ?? 600000;
@@ -2080,7 +2083,7 @@ class FileStorage {
     }));
     return options.reportKeys ? { removed, removedKeys } : { removed };
   }
-  dispose() {
+  stopSweepTimers() {
     if (this.initialTimer) {
       clearTimeout(this.initialTimer);
     }
@@ -2090,6 +2093,14 @@ class FileStorage {
     this.initialTimer = undefined;
     this.intervalTimer = undefined;
   }
+  dispose() {
+    this.stopSweepTimers();
+    if (this.sweepKey !== undefined && sweeperOwners.get(this.sweepKey) === this.sweepOwner) {
+      sweeperOwners.delete(this.sweepKey);
+    }
+    this.sweepKey = undefined;
+    this.sweepOwner = undefined;
+  }
   async readKey(filePath) {
     try {
       const parsed = JSON.parse(await Bun.file(filePath).text());
@@ -2162,10 +2173,15 @@ class FileStorage {
         logger.warn(`Cache sweep failed: ${err instanceof Error ? err.message : String(err)}`);
       }
     };
+    const key = resolve(this.directory);
+    sweeperOwners.get(key)?.stop();
+    this.sweepKey = key;
+    this.sweepOwner = { stop: () => this.stopSweepTimers() };
     this.initialTimer = setTimeout(run2, 1000);
     this.intervalTimer = setInterval(run2, intervalMs);
     this.initialTimer.unref?.();
     this.intervalTimer.unref?.();
+    sweeperOwners.set(key, this.sweepOwner);
   }
 }
 
@@ -3057,13 +3073,13 @@ async function fetchImageSource(src, opts) {
     } catch {
       throw new ImageError(502, "Failed to fetch source image");
     }
-    const location = res.headers.get("location");
-    if (res.status >= 300 && res.status < 400 && location) {
+    const location2 = res.headers.get("location");
+    if (res.status >= 300 && res.status < 400 && location2) {
       if (hop >= maxRedirects) {
         throw new ImageError(502, "Too many redirects");
       }
       await res.body?.cancel();
-      target = new URL(location, url).href;
+      target = new URL(location2, url).href;
       continue;
     }
     break;
@@ -3214,6 +3230,12 @@ function HydratableBoundary($$renderer, $$props) {
     $$renderer2.push(`<!---->`);
   });
 }
+// src/lib/popup-nav.ts
+var POPUP_PARAM = "popup";
+function withPopupMarker(href) {
+  return `${href}?${POPUP_PARAM}=1`;
+}
+
 // node_modules/@lucide/svelte/dist/Icon.svelte
 import"svelte/internal/flags/async";
 import * as $2 from "svelte/internal/server";
@@ -3292,4 +3314,4 @@ function Icon($$renderer, $$props) {
   });
 }
 
-export { emitIslandProps, isDev, cookies, HydratableBoundary, Icon };
+export { emitIslandProps, isDev, cookies, HydratableBoundary, Icon, withPopupMarker };

package/.mochi/svelte-css/Brand-1bh2b800g5vrn.css

@@ -0,0 +1 @@
+.brand.svelte-94cd8h{display:inline-flex;font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;color:inherit;text-decoration:none;align-items: center;gap:11px;font-size:22px;font-weight:700}.logo.svelte-94cd8h{display:inline-flex;align-items: center}.words.svelte-94cd8h{display:inline-flex;align-items:baseline;gap:11px}.tagline.svelte-94cd8h{font-family:var(--font-sans);letter-spacing:.08em;color:var(--ink-soft);font-size:12px;font-weight:500}@media (max-width:640px){.tagline.svelte-94cd8h{display:none}}

package/.mochi/svelte-css/SettingsView-3uycxa8z548m4.css

@@ -0,0 +1 @@
+.page.svelte-1n6ht58{display:flex;flex-direction:column;min-height:100vh}.title.svelte-1n6ht58{display:inline-flex;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft);align-items: center;padding:0 14px;font-size:12px}.content.svelte-1n6ht58{display:flex;flex-direction:column;flex:1;align-items: center;gap:16px;padding:32px 20px}.card.svelte-1n6ht58{background:var(--bg-card);border:1px solid var(--rule);width:100%;max-width:560px;height:max-content}.danger-card.svelte-1n6ht58{border-color:var(--danger)}.disabled-card.svelte-1n6ht58{opacity:.55;pointer-events:none}.danger-card.svelte-1n6ht58 .btn{white-space:nowrap;flex:none}.version.svelte-1n6ht58{font-family:var(--font-mono);letter-spacing:.08em;color:var(--ink-soft);font-size:11px}.shutting.svelte-1n6ht58{font-family:var(--font-mono);color:var(--danger);text-align:right;flex:none;max-width:200px;font-size:12px;line-height:1.4}.row.svelte-1n6ht58{display:flex;justify-content:space-between;align-items: center;gap:16px;padding:18px}.row.divided.svelte-1n6ht58{border-top:1px solid var(--rule);align-items: flex-start}.row.divided.svelte-1n6ht58 .btn{white-space:nowrap;flex:none}.sub.svelte-1n6ht58{padding:0 18px 14px}code.svelte-1n6ht58{font-family:var(--font-mono);background:var(--bg);border:1px solid var(--rule);border-radius:3px;padding:1px 4px;font-size:.92em}.label.svelte-1n6ht58{display:flex;color:var(--ink);align-items: flex-start;gap:12px;min-width:0}.label.svelte-1n6ht58>svg{flex:none}.text.svelte-1n6ht58{min-width:0}.name.svelte-1n6ht58{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;font-size:13px}.arch.svelte-1n6ht58{letter-spacing:.04em;color:var(--ink-soft);border:1px solid var(--rule);vertical-align:middle;border-radius:3px;margin-left:8px;padding:2px 6px;font-size:11px}.tip.svelte-1n6ht58{color:var(--ink-soft);background:color-mix(in srgb,var(--info)10%,transparent);border:1px solid color-mix(in srgb,var(--info)35%,transparent);border-radius:4px;width:100%;margin-top:4px;padding:8px 10px}.desc.svelte-1n6ht58{font-family:var(--font-mono);color:var(--ink-faint);margin-top:4px;font-size:12px;line-height:1.4}.image-row.svelte-1n6ht58,.token-row.svelte-1n6ht58{flex-wrap:wrap}.image-controls.svelte-1n6ht58{display:flex;flex:1;justify-content:flex-end;align-items: center;gap:8px;min-width:220px}.image-input.svelte-1n6ht58{font-family:var(--font-mono);color:var(--ink);background:var(--bg);border:1px solid var(--rule);flex:1;min-width:0;padding:8px 10px;font-size:12px}.image-input.svelte-1n6ht58:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.image-controls.svelte-1n6ht58 .btn{flex:none}.msg.svelte-1n6ht58{font-family:var(--font-mono);width:100%;margin-top:2px;font-size:12px;line-height:1.4}.msg.error.svelte-1n6ht58{color:var(--danger)}.msg.ok.svelte-1n6ht58{color:var(--ink-soft)}.pets.svelte-1n6ht58{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px}.pets.svelte-1n6ht58 form:where(.svelte-1n6ht58){display:contents}.pet.svelte-1n6ht58:disabled{cursor:progress}.pet.svelte-1n6ht58{display:flex;appearance:none;cursor:pointer;background:0 0;border:1px solid #0000;justify-content:center;align-items: center;padding:4px}.pet.svelte-1n6ht58:hover{border-color:var(--rule)}.pet.selected.svelte-1n6ht58{border-color:var(--attn-done);background:var(--switch-on-bg)}.pet.svelte-1n6ht58:focus-visible{outline:2px solid var(--ink);outline-offset:1px}.switch.svelte-1n6ht58{position:relative;cursor:pointer;flex:none}.switch.svelte-1n6ht58 input:where(.svelte-1n6ht58){position:absolute;opacity:0;cursor:pointer;margin:0;inset:0}.track.svelte-1n6ht58{display:block;border:1px solid var(--rule);background:var(--bg);border-radius:999px;width:44px;height:24px;transition:background .15s}.thumb.svelte-1n6ht58{display:block;background:var(--ink-faint);border-radius:999px;width:18px;height:18px;margin:2px;transition:transform .15s,background .15s}.switch.svelte-1n6ht58 input:where(.svelte-1n6ht58):checked+.track:where(.svelte-1n6ht58){background:var(--switch-on-bg)}.switch.svelte-1n6ht58 input:where(.svelte-1n6ht58):checked+.track:where(.svelte-1n6ht58) .thumb:where(.svelte-1n6ht58){background:var(--ink);transform:translate(20px)}.switch.svelte-1n6ht58 input:where(.svelte-1n6ht58):focus-visible+.track:where(.svelte-1n6ht58){outline:2px solid var(--ink);outline-offset:2px}.model-fields.svelte-1n6ht58{display:flex;flex-direction:column;flex:1;gap:6px;min-width:220px}.model-row.svelte-1n6ht58{display:flex;align-items: center;gap:8px}.model-label.svelte-1n6ht58{font-family:var(--font-mono);color:var(--ink-soft);text-align:right;flex:none;width:72px;font-size:11px}.model-row.svelte-1n6ht58 .image-input:where(.svelte-1n6ht58){flex:1}.model-save-row.svelte-1n6ht58{display:flex;justify-content:flex-end;margin-top:4px}.var-row.svelte-1n6ht58{flex-direction:column;align-items:stretch;gap:10px}.var-list.svelte-1n6ht58{display:flex;flex-direction:column;gap:6px}.var-item.svelte-1n6ht58{display:flex;background:var(--bg);border:1px solid var(--rule);align-items: center;gap:8px;padding:6px 8px}.var-name.svelte-1n6ht58{font-family:var(--font-mono);color:var(--ink);word-break:break-all;flex:1;min-width:0;font-size:12px}.var-status.svelte-1n6ht58{font-family:var(--font-mono);letter-spacing:.04em;color:var(--danger);flex:none;font-size:11px}.var-status.present.svelte-1n6ht58{color:var(--ink-soft)}.var-remove.svelte-1n6ht58{display:inline-flex;color:var(--ink-soft);border:1px solid var(--rule);cursor:pointer;background:0 0;flex:none;justify-content:center;align-items: center;width:22px;height:22px;padding:0}.var-remove.svelte-1n6ht58:hover:not(:disabled){color:var(--danger);border-color:var(--danger)}.var-remove.svelte-1n6ht58:disabled{opacity:.4;cursor:not-allowed}.var-empty.svelte-1n6ht58{font-family:var(--font-mono);color:var(--ink-faint);font-size:12px}.var-add.svelte-1n6ht58{display:flex;gap:8px}.var-add.svelte-1n6ht58 .btn{flex:none}

package/README.md

@@ -23,6 +23,10 @@ The UI opens at `http://localhost:6969`. State (SQLite DB + per-instance workspa
 - `CODEBAY_GITHUB_TOKEN` — GitHub token to inject instead of reading `gh auth token` from the host
 - `DISABLE_OPEN_BROWSER=1` — skip opening the browser on startup
 
+## Troubleshooting
+
+- `warn: incorrect peer dependency "svelte@5.56.8"` on startup — harmless. It comes from `svelte-french-toast`, whose published peer range predates Svelte 5; the library works correctly on Svelte 5. Nothing to fix.
+
 ## Development
 
 ```sh

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "codebay",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"description": "Web UI for spinning up isolated devcontainer instances from any local folder, each with a browser-based VS Code (code-server) — built for parallel Claude Code workflows.",
 	"type": "module",
 	"license": "MIT",
@@ -60,12 +60,12 @@
 	},
 	"dependencies": {
 		"@devcontainers/cli": "^0.88.0",
-		"@fontsource-variable/doto": "^5.2.10",
-		"@fontsource-variable/jetbrains-mono": "^5.2.8",
-		"@lucide/svelte": "^1.27.0",
+		"@fontsource-variable/doto": "^5.3.0",
+		"@fontsource-variable/jetbrains-mono": "^5.3.0",
+		"@lucide/svelte": "^1.28.0",
 		"@zihaolam/bun-sqlite-migrations": "^1.0.3",
 		"dockerode": "^5.0.1",
-		"mochi-framework": "^0.9.0",
+		"mochi-framework": "^0.9.1",
 		"svelte": "^5.56.8",
 		"svelte-french-toast": "^1.2.0"
 	},
@@ -74,13 +74,13 @@
 		"@types/bun": "1.3.14",
 		"@types/dockerode": "^4.0.1",
 		"eslint": "^10.8.0",
-		"eslint-plugin-svelte": "^3.20.0",
+		"eslint-plugin-svelte": "^3.22.0",
 		"globals": "^17.8.0",
-		"prettier": "^3.9.4",
+		"prettier": "^3.9.6",
 		"prettier-plugin-svelte": "^4.1.1",
 		"svelte-check": "4.7.4",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.62.1"
+		"typescript-eslint": "^8.65.0"
 	},
 	"resolutions": {
 		"msgpackr-extract": "npm:@mochi-framework/msgpackr-extract-stub@*",

package/src/avatars/index.ts

@@ -124,5 +124,10 @@ export function pickAvatar(id: string): AvatarArt {
 	return avatars[fnv1a(id) % avatars.length]!;
 }
 
+/** Lookup by name, for sprites chosen by hand rather than hashed from an id. */
+export function findAvatar(name: string | undefined): AvatarArt | undefined {
+	return name ? avatars.find((a) => a.name === name) : undefined;
+}
+
 export { decode } from './types.ts';
 export type { AvatarArt } from './types.ts';

package/src/components/AppBar.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import House from '@lucide/svelte/icons/house';
+	import { onBackLinkClick } from '../lib/popup-nav.ts';
 
 	let { children }: { children?: Snippet } = $props();
 </script>
 
 <header class="bar">
-	<a class="home" href="/" title="All instances" aria-label="All instances"><House size={18} /></a>
+	<a
+		class="home"
+		href="/"
+		title="All instances"
+		aria-label="All instances"
+		onclick={onBackLinkClick}><House size={18} /></a
+	>
 	{@render children?.()}
 </header>
 

package/src/components/AppShell.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { ideUrl, type Instance, type Preflight } from '../types.ts';
+	import { findAvatar, type AvatarArt } from '../avatars/index.ts';
 	import { SvelteSet } from 'svelte/reactivity';
 	import DashboardView from './DashboardView.svelte';
 	import IdeBar from './IdeBar.svelte';
@@ -13,8 +14,14 @@
 	let {
 		preflight,
 		initialPath,
-		snapshot
-	}: { preflight: Preflight; initialPath: string; snapshot: Instance[] } = $props();
+		snapshot,
+		pet
+	}: {
+		preflight: Preflight;
+		initialPath: string;
+		snapshot: Instance[];
+		pet?: AvatarArt;
+	} = $props();
 
 	// Seeding from the SSR snapshot is intentional — the live stream overwrites it.
 	// svelte-ignore state_referenced_locally
@@ -22,6 +29,9 @@
 	// Auth is preserved across stream updates because it's only ever probed at SSR.
 	// svelte-ignore state_referenced_locally
 	let livePreflight = $state<Preflight>(preflight);
+	// Seeded from SSR, then updated live so changing the pet in settings swaps the header without a reload.
+	// svelte-ignore state_referenced_locally
+	let livePet = $state<AvatarArt | undefined>(pet);
 	// svelte-ignore state_referenced_locally
 	let loaded = $state(snapshot.length > 0);
 	const running = $derived(instances.filter((i) => i.status === 'running'));
@@ -147,6 +157,10 @@
 					livePreflight = { ...livePreflight, docker: msg.data.docker, cli: msg.data.cli };
 					return;
 				}
+				if (msg.type === 'pet') {
+					livePet = findAvatar(msg.data.name ?? undefined);
+					return;
+				}
 				if (msg.type === 'health') {
 					// A tick in flight when a rebuild starts probes the *old* container and
 					// reports it accessible, which would mount the iframe against the replacement too early.
@@ -223,7 +237,7 @@
 			oncancelrename={cancelRename}
 		/>
 	{:else}
-		<DashboardView preflight={livePreflight} {instances} {loaded} />
+		<DashboardView preflight={livePreflight} {instances} {loaded} pet={livePet} />
 	{/if}
 
 	<!-- Always mounted, only hidden, so the iframes survive navigation. -->

package/src/components/Brand.svelte

@@ -1,17 +1,23 @@
 <script lang="ts">
 	import Package from '@lucide/svelte/icons/package';
+	import Avatar from './Avatar.svelte';
+	import type { AvatarArt } from '../avatars/index.ts';
+
+	// Resolved server-side and threaded through props, so SSR and hydration agree and the logo can't flash.
+	let { pet }: { pet?: AvatarArt } = $props();
 </script>
 
 <a class="brand" href="/"
-	><span class="logo"><Package size={22} /></span><span>Codebay</span><span class="tagline"
-		>devcontainer manager</span
+	><span class="logo"
+		>{#if pet}<Avatar art={pet} name={pet.name} scale={4} />{:else}<Package size={22} />{/if}</span
+	><span class="words"><span>Codebay</span><span class="tagline">devcontainer manager</span></span
 	></a
 >
 
 <style>
 	.brand {
 		display: inline-flex;
-		align-items: baseline;
+		align-items: center;
 		gap: 11px;
 		font-family: var(--font-display);
 		font-weight: 700;
@@ -24,7 +30,12 @@
 	.logo {
 		display: inline-flex;
 		align-items: center;
-		align-self: center;
+	}
+	/* Keep the wordmark and tagline on a shared baseline, but center the group against the logo. */
+	.words {
+		display: inline-flex;
+		align-items: baseline;
+		gap: 11px;
 	}
 	.tagline {
 		font-family: var(--font-sans);

package/src/components/DashboardView.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { type Instance, type Preflight } from '../types.ts';
+	import type { AvatarArt } from '../avatars/index.ts';
 	import FolderBrowser from './FolderBrowser.svelte';
 	import InstanceCard from './InstanceCard.svelte';
 	import TopBar from './TopBar.svelte';
@@ -11,8 +12,9 @@
 	let {
 		preflight,
 		instances,
-		loaded
-	}: { preflight: Preflight; instances: Instance[]; loaded: boolean } = $props();
+		loaded,
+		pet
+	}: { preflight: Preflight; instances: Instance[]; loaded: boolean; pet?: AvatarArt } = $props();
 
 	let browserOpen = $state(false);
 	let creating = $state(false);
@@ -99,6 +101,7 @@
 
 <TopBar
 	auth={preflight.auth}
+	{pet}
 	canDelete={instances.length > 0}
 	{ready}
 	{creating}

package/src/components/IdeBar.svelte

@@ -3,6 +3,7 @@
 	import Settings from '@lucide/svelte/icons/settings';
 	import Avatar from './Avatar.svelte';
 	import AppBar from './AppBar.svelte';
+	import { withPopupMarker } from '../lib/popup-nav.ts';
 
 	let {
 		running,
@@ -69,7 +70,14 @@
 			{/each}
 		</nav>
 	{/if}
-	<a class="cog" href="/settings" title="Settings" aria-label="Settings"><Settings size={18} /></a>
+	<a
+		class="cog"
+		href={withPopupMarker('/settings')}
+		target="_blank"
+		rel="noopener noreferrer"
+		title="Settings"
+		aria-label="Settings"><Settings size={18} /></a
+	>
 </AppBar>
 
 <style>

package/src/components/InstanceCard.svelte

@@ -5,6 +5,7 @@
 	import PortsBox from './PortsBox.svelte';
 	import StatusBadge from './StatusBadge.svelte';
 	import Button from './Button.svelte';
+	import { withPopupMarker } from '../lib/popup-nav.ts';
 
 	let {
 		instance,
@@ -81,8 +82,11 @@
 		{:else if instance.status === 'stopped' || (instance.status === 'error' && instance.container_id)}
 			<Button size="sm" onclick={() => onact('start')}>Start</Button>
 		{:else if instance.status === 'creating'}
-			<Button size="sm" href={`/instances/${instance.id}`} target="_blank" rel="noopener noreferrer"
-				>View logs</Button
+			<Button
+				size="sm"
+				href={withPopupMarker(`/instances/${instance.id}`)}
+				target="_blank"
+				rel="noopener noreferrer">View logs</Button
 			>
 		{/if}
 		{#if canRebuild}
@@ -95,7 +99,7 @@
 		<Button
 			size="sm"
 			ghost
-			href={`/instances/${instance.id}`}
+			href={withPopupMarker(`/instances/${instance.id}`)}
 			target="_blank"
 			rel="noopener noreferrer">Details</Button
 		>

package/src/components/InstanceView.svelte

@@ -10,6 +10,7 @@
 	import { apiPost, apiDelete } from '../api.ts';
 	import { enhance } from 'mochi-framework';
 	import type { MochiEnhanceOptions } from 'mochi-framework';
+	import { onBackLinkClick, installPopupBackTrap } from '../lib/popup-nav.ts';
 
 	let { id, injectionChecks = 0 }: { id: string; injectionChecks?: number } = $props();
 
@@ -24,6 +25,8 @@
 		node.scrollTop = node.scrollHeight;
 	}
 
+	$effect(() => installPopupBackTrap());
+
 	// Reset on every connect, because the server replays its whole buffer each time.
 	$effect(() =>
 		liveSocket(
@@ -120,7 +123,7 @@
 </script>
 
 <header class="topbar">
-	<a class="back" href="/"><ArrowLeft size={15} /> All instances</a>
+	<a class="back" href="/" onclick={onBackLinkClick}><ArrowLeft size={15} /> All instances</a>
 	<div class="title">
 		<span class="name">{instance?.name ?? 'Instance'}</span>
 		{#if instance}

package/src/components/SettingsCog.svelte

@@ -1,8 +1,16 @@
 <script lang="ts">
 	import Settings from '@lucide/svelte/icons/settings';
+	import { withPopupMarker } from '../lib/popup-nav.ts';
 </script>
 
-<a class="cog" href="/settings" aria-label="Settings" title="Settings"><Settings size={16} /></a>
+<a
+	class="cog"
+	href={withPopupMarker('/settings')}
+	target="_blank"
+	rel="noopener noreferrer"
+	aria-label="Settings"
+	title="Settings"><Settings size={16} /></a
+>
 
 <style>
 	.cog {