codebay 0.2.0 → 0.3.0

package/.mochi/svelte-compile/{Avatars-f7c6rp96.server.js → Avatars-p8gfef7x.server.js}

@@ -13,7 +13,8 @@ import {
 } from "./chunk-sxqys3nw.js";
 import {
   HydratableBoundary,
-  Icon
+  Icon,
+  emitIslandProps
 } from "./chunk-v6796ga4.js";
 import"./chunk-we0ggtws.js";
 
@@ -146,31 +147,7 @@ function toIssueUrl(art) {
 // src/components/AvatarEditor.svelte
 function AvatarEditor($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
-    const NAME_PROMPTS = [
-      "dragon",
-      "unicorn",
-      "cactus",
-      "comet",
-      "pretzel",
-      "volcano",
-      "narwhal",
-      "waffle",
-      "satellite",
-      "pineapple",
-      "kraken",
-      "yeti",
-      "moose",
-      "lighthouse",
-      "toaster",
-      "hedgehog",
-      "walrus",
-      "pumpkin",
-      "jellyfish",
-      "tornado",
-      "igloo",
-      "boomerang"
-    ];
-    const namePlaceholder = NAME_PROMPTS[Math.floor(Math.random() * NAME_PROMPTS.length)];
+    let { namePlaceholder } = $$props;
     let cells = Array(ROWS * COLS).fill(OFF);
     let avatarName = "";
     const slug = $5.derived(() => normalizeName(avatarName));
@@ -223,7 +200,7 @@ function AvatarEditor($$renderer, $$props) {
         dist_default.error(`Copy failed: ${err.message}`);
       }
     }
-    $$renderer2.push(`<section class="editor svelte-qu6vp4"><div class="head svelte-qu6vp4"><h2 class="svelte-qu6vp4">Draw your avatar</h2></div> <div class="body svelte-qu6vp4"><div class="grid-frame svelte-qu6vp4"><!--[-->`);
+    $$renderer2.push(`<section class="editor svelte-qu6vp4"><div class="head svelte-qu6vp4"><h2 class="svelte-qu6vp4">Draw your own avatar</h2></div> <div class="body svelte-qu6vp4"><div class="grid-frame svelte-qu6vp4"><!--[-->`);
     const each_array = $5.ensure_array_like(RING_CELLS);
     for (let i = 0, $$length = each_array.length;i < $$length; i++) {
       let { r, c } = each_array[i];
@@ -291,6 +268,7 @@ function AvatarEditor($$renderer, $$props) {
 // src/components/AvatarsView.svelte
 function AvatarsView($$renderer, $$props) {
   $$renderer.component(($$renderer2) => {
+    let { namePlaceholder } = $$props;
     $$renderer2.push(`<div class="page svelte-fkq7sr">`);
     AppBar($$renderer2, {
       children: ($$renderer3) => {
@@ -299,7 +277,7 @@ function AvatarsView($$renderer, $$props) {
       $$slots: { default: true }
     });
     $$renderer2.push(`<!----> <main class="content svelte-fkq7sr">`);
-    AvatarEditor($$renderer2, {});
+    AvatarEditor($$renderer2, { namePlaceholder });
     $$renderer2.push(`<!----> <section class="catalog svelte-fkq7sr"><header class="svelte-fkq7sr"><h2 class="svelte-fkq7sr">The set</h2> <p class="svelte-fkq7sr">${$6.escape(avatars.length)} hand-crafted 8\xD78 sprites</p></header> <ul class="svelte-fkq7sr"><!--[-->`);
     const each_array = $6.ensure_array_like(avatars);
     for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
@@ -319,32 +297,35 @@ function AvatarsView($$renderer, $$props) {
 }
 
 // src/pages/Avatars.svelte
-function Avatars($$renderer) {
-  if (true) {
-    let failed = function($$renderer2, error) {
-      $$renderer2.push(`<mochi-island-failure data-component="AvatarsView"${$7.attr("data-message", error.message)}></mochi-island-failure>`);
-    };
-    $$renderer.push("<!--[0-->");
-    $$renderer.boundary({ failed }, ($$renderer2) => {
-      $$renderer2.push(`<!--[-->`);
-      {
-        HydratableBoundary($$renderer2, {
-          children: ($$renderer3) => {
-            $$renderer3.push(`<mochi-hydratable-island component-name="AvatarsView_257s9yq1wwr4f" component-url="__MOCHI_COMPONENT_URL__AvatarsView_257s9yq1wwr4f__">`);
-            $$renderer3.push(`<!--[-->`);
-            {
-              AvatarsView($$renderer3, {});
-            }
-            $$renderer3.push(`<!--]-->`);
-            $$renderer3.push(`</mochi-hydratable-island>`);
-          },
-          $$slots: { default: true }
-        });
-      }
-      $$renderer2.push(`<!--]-->`);
-    });
-  }
-  $$renderer.push(`<!--]-->`);
+function Avatars($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { namePlaceholder } = $$props;
+    if (true) {
+      let failed = function($$renderer3, error) {
+        $$renderer3.push(`<mochi-island-failure data-component="AvatarsView"${$7.attr("data-message", error.message)}></mochi-island-failure>`);
+      };
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.boundary({ failed }, ($$renderer3) => {
+        $$renderer3.push(`<!--[-->`);
+        {
+          HydratableBoundary($$renderer3, {
+            children: ($$renderer4) => {
+              $$renderer4.push(`<mochi-hydratable-island component-name="AvatarsView_257s9yq1wwr4f" component-url="__MOCHI_COMPONENT_URL__AvatarsView_257s9yq1wwr4f__"${$7.attr("props-ref", emitIslandProps({ namePlaceholder }))}>`);
+              $$renderer4.push(`<!--[-->`);
+              {
+                AvatarsView($$renderer4, { namePlaceholder });
+              }
+              $$renderer4.push(`<!--]-->`);
+              $$renderer4.push(`</mochi-hydratable-island>`);
+            },
+            $$slots: { default: true }
+          });
+        }
+        $$renderer3.push(`<!--]-->`);
+      });
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
 }
 export {
   Avatars as default

package/.mochi/svelte-compile/{Instance-yvps12zg.server.js → Instance-atjwsczx.server.js}

@@ -3,8 +3,9 @@ import {
   StatusBadge,
   apiDelete,
   apiPost,
+  forwardedPortUrl,
   ideUrl
-} from "./chunk-dqgstte4.js";
+} from "./chunk-btmcxhqy.js";
 import {
   X
 } from "./chunk-4kwy539a.js";
@@ -285,7 +286,7 @@ function InstanceView($$renderer, $$props) {
       const each_array = $6.ensure_array_like(forwards());
       for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
         let f = each_array[$$index];
-        $$renderer2.push(`<li class="svelte-15fxkvm"><span class="cp svelte-15fxkvm">:${$6.escape(f.container_port)}</span> <span class="arr svelte-15fxkvm">\u2192</span> <a${$6.attr("href", `http://localhost:${f.host_port}`)} target="_blank" rel="noopener" class="svelte-15fxkvm">localhost:${$6.escape(f.host_port)} `);
+        $$renderer2.push(`<li class="svelte-15fxkvm"><span class="cp svelte-15fxkvm">:${$6.escape(f.container_port)}</span> <span class="arr svelte-15fxkvm">\u2192</span> <a${$6.attr("href", forwardedPortUrl(f.host_port))} target="_blank" rel="noopener" class="svelte-15fxkvm">${$6.escape(forwardedPortUrl(f.host_port).replace("http://", ""))} `);
         Arrow_up_right($$renderer2, { size: 12 });
         $$renderer2.push(`<!----></a> <button class="rm svelte-15fxkvm" title="Remove">\xD7</button></li>`);
       }

package/.mochi/svelte-compile/{Settings-jwg3httb.server.js → Settings-q88xw6h8.server.js}

@@ -367,7 +367,8 @@ function SettingsView($$renderer, $$props) {
       customEndpointModel,
       hostEnvVarsEnabled,
       hostEnvVarNames,
-      hostEnvVarPresence
+      hostEnvVarPresence,
+      version
     } = $$props;
     let sound = soundEnabled();
     let shuttingDown = false;
@@ -1060,7 +1061,7 @@ function SettingsView($$renderer, $$props) {
     }
     $$renderer2.push(`<!--]--></form></section> `);
     CoinButton($$renderer2, {});
-    $$renderer2.push(`<!----></main></div> `);
+    $$renderer2.push(`<!----> <div class="version svelte-1n6ht58">Codebay v${$17.escape(version)}</div></main></div> `);
     Toaster($$renderer2, {
       toastOptions: {
         style: "border:1px solid var(--ink); background:var(--bg-card); color:var(--ink); box-shadow:4px 4px 0 var(--ink); font-family:var(--font-mono); font-size:13px;"
@@ -1093,7 +1094,8 @@ function Settings($$renderer, $$props) {
       customEndpointModel,
       hostEnvVarsEnabled,
       hostEnvVarNames,
-      hostEnvVarPresence
+      hostEnvVarPresence,
+      version
     } = $$props;
     if (true) {
       let failed = function($$renderer3, error) {
@@ -1125,7 +1127,8 @@ function Settings($$renderer, $$props) {
                 customEndpointModel,
                 hostEnvVarsEnabled,
                 hostEnvVarNames,
-                hostEnvVarPresence
+                hostEnvVarPresence,
+                version
               }))}>`);
               $$renderer4.push(`<!--[-->`);
               {
@@ -1149,7 +1152,8 @@ function Settings($$renderer, $$props) {
                   customEndpointModel,
                   hostEnvVarsEnabled,
                   hostEnvVarNames,
-                  hostEnvVarPresence
+                  hostEnvVarPresence,
+                  version
                 });
               }
               $$renderer4.push(`<!--]-->`);

package/.mochi/svelte-compile/{chunk-dqgstte4.js → chunk-btmcxhqy.js}

@@ -35,6 +35,12 @@ function apiJson(method, url, body, fallbackMessage) {
   }, fallbackMessage);
 }
 
+// src/lib/links.ts
+function forwardedPortUrl(hostPort) {
+  const host = typeof window === "undefined" ? "localhost" : window.location.hostname;
+  return `http://${host}:${hostPort}`;
+}
+
 // src/components/StatusBadge.svelte
 import"svelte/internal/flags/async";
 import * as $ from "svelte/internal/server";
@@ -49,4 +55,4 @@ function StatusBadge($$renderer, $$props) {
   $$renderer.push(`<span${$.attr_class(`status ${$.stringify(status)}`, "svelte-1hqr9xd")}>${$.escape(label[status])}</span>`);
 }
 
-export { ideUrl, apiFetch, apiPost, apiDelete, StatusBadge };
+export { ideUrl, apiFetch, apiPost, apiDelete, forwardedPortUrl, StatusBadge };

package/.mochi/svelte-css/SettingsView-1nfdwnm16cpp2.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}.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)}.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

@@ -17,6 +17,7 @@ The UI opens at `http://localhost:6969`. State (SQLite DB + per-instance workspa
 - `PORT` — server port (default `6969`)
 - `DATA_DIR` — where state lives (default `~/.codebay`)
 - `DOCKER_HOST` — Docker socket/URL (defaults to your active Docker context)
+- `HOST` — bind address (default `127.0.0.1`). Set `0.0.0.0` to reach codebay from other machines; your instances' forwarded app ports are then published on all interfaces too. Each container's code-server port stays loopback-only regardless — it runs without a password of its own and is reached through the Basic-Auth-gated `/p/:id/` proxy instead. Existing instances need a **Restart** to pick up the new binding.
 - `BASIC_AUTH_PASSWORD` — enables HTTP Basic Auth over the whole UI (disabled when unset); required if you bind beyond loopback with `HOST=0.0.0.0`
 - `CODEBAY_CLAUDE_CODE_TOKEN` — Claude Code token to inject into every container (e.g. from `claude setup-token`) instead of discovering the host's credentials
 - `CODEBAY_GITHUB_TOKEN` — GitHub token to inject instead of reading `gh auth token` from the host

package/bin/codebay.ts

@@ -3,6 +3,7 @@
 // ./public, and the .mochi manifest relative to process.cwd(), so chdir into the
 // package root before booting. Dynamic import() of a relative specifier resolves
 // against this module's URL (not cwd), so the chdir doesn't affect it.
+import { readFileSync } from 'node:fs';
 import { fileURLToPath } from 'node:url';
 import { dirname, isAbsolute, join, resolve } from 'node:path';
 
@@ -11,6 +12,46 @@ if (typeof Bun === 'undefined') {
 	process.exit(1);
 }
 
+const pkgRoot = join(dirname(fileURLToPath(import.meta.url)), '..');
+
+function readVersion(): string {
+	try {
+		return JSON.parse(readFileSync(join(pkgRoot, 'package.json'), 'utf8')).version ?? 'unknown';
+	} catch {
+		return 'unknown';
+	}
+}
+
+const args = process.argv.slice(2);
+
+if (args.includes('--version') || args.includes('-v')) {
+	console.log(readVersion());
+	process.exit(0);
+}
+
+if (args.includes('--help') || args.includes('-h')) {
+	console.log(`codebay ${readVersion()} — spin up isolated devcontainers with a browser IDE.
+
+Usage: bunx codebay [options]
+
+Starts the web UI (default http://localhost:6969) and opens it in your browser.
+
+Options:
+  -h, --help       Show this help and exit
+  -v, --version    Print the version and exit
+
+Environment variables:
+  PORT                       Server port (default 6969)
+  DATA_DIR                   Where state lives (default ~/.codebay)
+  DOCKER_HOST                Docker socket/URL (defaults to your active Docker context)
+  HOST                       Bind address (default 127.0.0.1; set 0.0.0.0 for LAN access)
+  BASIC_AUTH_PASSWORD        Enable HTTP Basic Auth over the whole UI (required for 0.0.0.0)
+  CODEBAY_CLAUDE_CODE_TOKEN  Claude Code token to inject into every container
+  CODEBAY_GITHUB_TOKEN       GitHub token to inject into every container
+  DISABLE_OPEN_BROWSER=1     Skip opening the browser on startup`);
+	process.exit(0);
+}
+
 // config.server.ts resolves a relative DATA_DIR against process.cwd(). Pin it to the
 // directory the user actually ran the command from, before the chdir below moves cwd
 // into the (possibly npm-cached) package root.
@@ -18,5 +59,5 @@ if (process.env.DATA_DIR && !isAbsolute(process.env.DATA_DIR)) {
 	process.env.DATA_DIR = resolve(process.cwd(), process.env.DATA_DIR);
 }
 
-process.chdir(join(dirname(fileURLToPath(import.meta.url)), '..'));
+process.chdir(pkgRoot);
 await import('../src/index.ts');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "codebay",
-	"version": "0.2.0",
+	"version": "0.3.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",

package/src/avatars/name-prompts.ts

@@ -0,0 +1,30 @@
+// Lives outside the editor component so the route can roll the hint server-side —
+// rolling it during component init would re-roll it again at hydration.
+export const NAME_PROMPTS = [
+	'dragon',
+	'unicorn',
+	'cactus',
+	'comet',
+	'pretzel',
+	'volcano',
+	'narwhal',
+	'waffle',
+	'satellite',
+	'pineapple',
+	'kraken',
+	'yeti',
+	'moose',
+	'lighthouse',
+	'toaster',
+	'hedgehog',
+	'walrus',
+	'pumpkin',
+	'jellyfish',
+	'tornado',
+	'igloo',
+	'boomerang'
+];
+
+export function pickNamePrompt(): string {
+	return NAME_PROMPTS[Math.floor(Math.random() * NAME_PROMPTS.length)]!;
+}

package/src/components/AvatarEditor.svelte

@@ -14,32 +14,8 @@
 	import Avatar from './Avatar.svelte';
 	import Button from './Button.svelte';
 
-	// Picked randomly so the hint varies each time the page loads.
-	const NAME_PROMPTS = [
-		'dragon',
-		'unicorn',
-		'cactus',
-		'comet',
-		'pretzel',
-		'volcano',
-		'narwhal',
-		'waffle',
-		'satellite',
-		'pineapple',
-		'kraken',
-		'yeti',
-		'moose',
-		'lighthouse',
-		'toaster',
-		'hedgehog',
-		'walrus',
-		'pumpkin',
-		'jellyfish',
-		'tornado',
-		'igloo',
-		'boomerang'
-	];
-	const namePlaceholder = NAME_PROMPTS[Math.floor(Math.random() * NAME_PROMPTS.length)];
+	// Rolled by the route, not here, so hydration doesn't pick a different word.
+	let { namePlaceholder }: { namePlaceholder: string } = $props();
 
 	// Same shape `decode()` produces, so the two round-trip.
 	let cells = $state<number[]>(Array(ROWS * COLS).fill(OFF));
@@ -109,7 +85,7 @@
 
 <section class="editor">
 	<div class="head">
-		<h2>Draw your avatar</h2>
+		<h2>Draw your own avatar</h2>
 	</div>
 
 	<div class="body">

package/src/components/AvatarsView.svelte

@@ -4,6 +4,8 @@
 	import Avatar from './Avatar.svelte';
 	import AvatarEditor from './AvatarEditor.svelte';
 	import { avatars } from '../avatars/index.ts';
+
+	let { namePlaceholder }: { namePlaceholder: string } = $props();
 </script>
 
 <div class="page">
@@ -12,7 +14,7 @@
 	</AppBar>
 
 	<main class="content">
-		<AvatarEditor />
+		<AvatarEditor {namePlaceholder} />
 
 		<section class="catalog">
 			<header>

package/src/components/InstanceView.svelte

@@ -5,6 +5,7 @@
 	import HealthBox from './HealthBox.svelte';
 	import StatusBadge from './StatusBadge.svelte';
 	import Skeleton from './Skeleton.svelte';
+	import { forwardedPortUrl } from '../lib/links.ts';
 	import { liveSocket, liveStream } from '../live.ts';
 	import { apiPost, apiDelete } from '../api.ts';
 	import { enhance } from 'mochi-framework';
@@ -189,8 +190,9 @@
 						<li>
 							<span class="cp">:{f.container_port}</span>
 							<span class="arr">→</span>
-							<a href={`http://localhost:${f.host_port}`} target="_blank" rel="noopener"
-								>localhost:{f.host_port} <ArrowUpRight size={12} /></a
+							<a href={forwardedPortUrl(f.host_port)} target="_blank" rel="noopener"
+								>{forwardedPortUrl(f.host_port).replace('http://', '')}
+								<ArrowUpRight size={12} /></a
 							>
 							<button class="rm" title="Remove" onclick={() => removePort(f.container_port)}
 								>×</button

package/src/components/PortsBox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Cable from '@lucide/svelte/icons/cable';
+	import { forwardedPortUrl } from '../lib/links.ts';
 	import type { PortForward } from '../types.ts';
 
 	let { ports }: { ports: PortForward[] } = $props();
@@ -13,10 +14,10 @@
 				<a
 					class="fport"
 					class:open={f.open}
-					href={`http://localhost:${f.host_port}`}
+					href={forwardedPortUrl(f.host_port)}
 					target="_blank"
 					rel="noopener"
-					title={`container :${f.container_port} → http://localhost:${f.host_port} ${f.open ? '(open)' : '(not published yet)'}`}
+					title={`container :${f.container_port} → ${forwardedPortUrl(f.host_port)} ${f.open ? '(open)' : '(not published yet)'}`}
 					>{f.container_port}</a
 				>
 			{/each}

package/src/components/SettingsView.svelte

@@ -46,7 +46,8 @@
 		customEndpointModel,
 		hostEnvVarsEnabled,
 		hostEnvVarNames,
-		hostEnvVarPresence
+		hostEnvVarPresence,
+		version
 	}: {
 		defaultImage: string;
 		builtinImage: string;
@@ -68,6 +69,7 @@
 		hostEnvVarsEnabled: boolean;
 		hostEnvVarNames: string[];
 		hostEnvVarPresence: Record<string, boolean>;
+		version: string;
 	} = $props();
 
 	// Defaults to on during SSR, where localStorage doesn't exist.
@@ -1164,6 +1166,8 @@
 		</section>
 
 		<CoinButton />
+
+		<div class="version">Codebay v{version}</div>
 	</main>
 </div>
 
@@ -1218,6 +1222,12 @@
 		flex: none;
 		white-space: nowrap;
 	}
+	.version {
+		font-family: var(--font-mono);
+		font-size: 11px;
+		letter-spacing: 0.08em;
+		color: var(--ink-soft);
+	}
 	.shutting {
 		flex: none;
 		max-width: 200px;

package/src/lib/config.server.ts

@@ -37,6 +37,17 @@ export function ensureMochiKey(): void {
 	}
 }
 
+/** Read relative to this module, not cwd, because under `bunx codebay` cwd is the user's folder. */
+export const APP_VERSION: string = (() => {
+	try {
+		const path = join(dirname(fileURLToPath(import.meta.url)), '..', '..', 'package.json');
+		const version = JSON.parse(readFileSync(path, 'utf8')).version;
+		return typeof version === 'string' ? version : 'unknown';
+	} catch {
+		return 'unknown';
+	}
+})();
+
 /** Per-instance working copies live here: <INSTANCES_DIR>/<id>/workspace. */
 export const INSTANCES_DIR = join(DATA_DIR, 'instances');
 
@@ -58,6 +69,13 @@ export const BASIC_AUTH_PASSWORD = process.env.BASIC_AUTH_PASSWORD || '';
 /** Loopback by default so an instance with no password isn't exposed to the LAN. */
 export const HOST = process.env.HOST || '127.0.0.1';
 
+/**
+ * Forwarded app ports follow the server's bind; code-server's own port never does
+ * (it runs with auth disabled). Anything but `0.0.0.0` degrades to loopback rather
+ * than risking an appPort string Docker rejects.
+ */
+export const PUBLISH_HOST = HOST === '0.0.0.0' ? '0.0.0.0' : '127.0.0.1';
+
 export const PORT = Number(process.env.PORT) || 6969;
 
 /** Mochi's CSRF origin check compares against these; override when behind a proxy. */

package/src/lib/devcontainer.server.ts

@@ -3,7 +3,13 @@ import { existsSync, statSync } from 'node:fs';
 import { basename, dirname, join, relative } from 'node:path';
 import { homedir } from 'node:os';
 import { INSTALL_SCRIPT as TMUX_INSTALL_SCRIPT } from '../container-injections/tmux.ts';
-import { CODE_SERVER_PORT, DEFAULT_IMAGE, devcontainerBin, dockerEnv } from './config.server.ts';
+import {
+	CODE_SERVER_PORT,
+	DEFAULT_IMAGE,
+	PUBLISH_HOST,
+	devcontainerBin,
+	dockerEnv
+} from './config.server.ts';
 import { spawnCapture } from './spawn.server.ts';
 import type { PortForward } from '../types.ts';
 
@@ -294,9 +300,11 @@ export async function writeOverrideConfig(
 	};
 
 	// Rendered from scratch rather than merged, so removing a forward actually drops its mapping.
+	// code-server stays loopback even under HOST=0.0.0.0 — it has no auth of its own, so the LAN
+	// reaches it only through the Basic-Auth-gated /p/:id/ proxy.
 	config.appPort = [
 		`127.0.0.1:${hostPort}:${CODE_SERVER_PORT}`,
-		...forwards.map((f) => `127.0.0.1:${f.host_port}:${f.container_port}`)
+		...forwards.map((f) => `${PUBLISH_HOST}:${f.host_port}:${f.container_port}`)
 	];
 
 	// host.docker.internal isn't automatic on Colima/Linux Docker.

package/src/lib/links.ts

@@ -0,0 +1,9 @@
+/**
+ * Forwarded ports are published on the machine running codebay, which is only
+ * `localhost` when the browser is on that same machine — under HOST=0.0.0.0 it
+ * isn't. SSR has no `window`, so the first paint falls back to localhost.
+ */
+export function forwardedPortUrl(hostPort: number): string {
+	const host = typeof window === 'undefined' ? 'localhost' : window.location.hostname;
+	return `http://${host}:${hostPort}`;
+}

package/src/pages/Avatars.svelte

@@ -2,6 +2,8 @@
 	import '@fontsource-variable/doto';
 	import '@fontsource-variable/jetbrains-mono';
 	import AvatarsView from '../components/AvatarsView.svelte';
+
+	let { namePlaceholder }: { namePlaceholder: string } = $props();
 </script>
 
-<AvatarsView mochi:hydrate />
+<AvatarsView {namePlaceholder} mochi:hydrate />

package/src/pages/Settings.svelte

@@ -23,7 +23,8 @@
 		customEndpointModel,
 		hostEnvVarsEnabled,
 		hostEnvVarNames,
-		hostEnvVarPresence
+		hostEnvVarPresence,
+		version
 	}: {
 		defaultImage: string;
 		builtinImage: string;
@@ -45,6 +46,7 @@
 		hostEnvVarsEnabled: boolean;
 		hostEnvVarNames: string[];
 		hostEnvVarPresence: Record<string, boolean>;
+		version: string;
 	} = $props();
 </script>
 
@@ -69,5 +71,6 @@
 	{hostEnvVarsEnabled}
 	{hostEnvVarNames}
 	{hostEnvVarPresence}
+	{version}
 	mochi:hydrate
 />

package/src/routes.ts

@@ -20,6 +20,7 @@ import {
 } from './container-injections/claude-code-custom.ts';
 import { hostEnvVarPresence, parseHostEnvVarNames } from './container-injections/host-env-vars.ts';
 import { browse } from './lib/picker.server.ts';
+import { pickNamePrompt } from './avatars/name-prompts.ts';
 import {
 	addForwardedPort,
 	createInstance,
@@ -45,7 +46,7 @@ import {
 	listFolderHistory,
 	setOption
 } from './lib/db.server.ts';
-import { DEFAULT_COPY_IGNORE, DEFAULT_IMAGE } from './lib/config.server.ts';
+import { APP_VERSION, DEFAULT_COPY_IGNORE, DEFAULT_IMAGE } from './lib/config.server.ts';
 import { wsUpgradeAllowed } from './lib/auth.server.ts';
 import { clearAttention, setAttention } from './lib/bridge.server.ts';
 import { timingSafeEqualStr } from './lib/crypto.server.ts';
@@ -144,9 +145,11 @@ export const routes: Record<string, MochiRouteValue> = {
 		}
 	}),
 
-	// Reached from the settings page's coin; the sprite registry is a static client
-	// import, so there is nothing for the server to hand over.
-	'/avatars': Mochi.page('./src/pages/Avatars.svelte'),
+	// Reached from the settings page's coin. The name hint is rolled here rather than in
+	// the editor so hydration can't re-roll it and swap the word out mid-load.
+	'/avatars': Mochi.page('./src/pages/Avatars.svelte', {
+		serverProps: () => ({ namePlaceholder: pickNamePrompt() })
+	}),
 
 	// Settings mutations are Form actions rather than JSON routes, so each control
 	// still works without JS and `enhance` only upgrades it.
@@ -181,7 +184,8 @@ export const routes: Record<string, MochiRouteValue> = {
 				customEndpointModel: getOption('custom_endpoint_model') ?? DEFAULT_MODEL,
 				hostEnvVarsEnabled: getOption('host_env_vars_enabled') === '1',
 				hostEnvVarNames,
-				hostEnvVarPresence: hostEnvVarPresence(hostEnvVarNames)
+				hostEnvVarPresence: hostEnvVarPresence(hostEnvVarNames),
+				version: APP_VERSION
 			};
 		},
 		actions: {

package/.mochi/svelte-client/HydratableIsland-ps09gjy2.js

@@ -1 +0,0 @@
-import{Ta as a}from"/_mochi/client/chunk-kgn1b2t1.js";export{a as registerComponent};