codebay 0.15.0 → 0.16.0

package/.mochi/svelte-compile/{chunk-g0eravvj.js → chunk-zk4a9zms.js}

@@ -1,36 +1,44 @@
 // @bun
 import {
   Icon
-} from "./chunk-60mpagr9.js";
+} from "./chunk-gnf5cnct.js";
 
 // node_modules/@lucide/svelte/dist/icons/layout-template.svelte
 import"svelte/internal/flags/async";
 import * as $ from "svelte/internal/server";
 function Layout_template($$renderer, $$props) {
   let { $$slots, $$events, ...props } = $$props;
-  const iconNode = [
-    [
-      "rect",
-      { width: "18", height: "7", x: "3", y: "3", rx: "1" }
-    ],
-    [
-      "rect",
-      { width: "9", height: "7", x: "3", y: "14", rx: "1" }
-    ],
-    [
-      "rect",
-      { width: "5", height: "7", x: "16", y: "14", rx: "1" }
+  const iconData = {
+    name: "layout-template",
+    size: 24,
+    node: [
+      [
+        "rect",
+        { width: "18", height: "7", x: "3", y: "3", rx: "1" }
+      ],
+      [
+        "rect",
+        { width: "9", height: "7", x: "3", y: "14", rx: "1" }
+      ],
+      [
+        "rect",
+        { width: "5", height: "7", x: "16", y: "14", rx: "1" }
+      ]
     ]
-  ];
-  Icon($$renderer, $.spread_props([{ name: "layout-template" }, props, { iconNode }]));
+  };
+  Icon($$renderer, $.spread_props([props, { icon: iconData }]));
 }
 // node_modules/@lucide/svelte/dist/icons/plus.svelte
 import"svelte/internal/flags/async";
 import * as $2 from "svelte/internal/server";
 function Plus($$renderer, $$props) {
   let { $$slots, $$events, ...props } = $$props;
-  const iconNode = [["path", { d: "M5 12h14" }], ["path", { d: "M12 5v14" }]];
-  Icon($$renderer, $2.spread_props([{ name: "plus" }, props, { iconNode }]));
+  const iconData = {
+    name: "plus",
+    size: 24,
+    node: [["path", { d: "M5 12h14" }], ["path", { d: "M12 5v14" }]]
+  };
+  Icon($$renderer, $2.spread_props([props, { icon: iconData }]));
 }
 // src/settings.ts
 var SOUND_KEY = "codebay.sound";

package/.mochi/svelte-css/DropZone-1zeitd761uwyd.css

@@ -0,0 +1 @@
+.dropzone.svelte-1b5cnjl{--gutter:16px;position:absolute;z-index:5;display:flex;background:color-mix(in srgb,var(--bg)80%,transparent);color:var(--ink);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;pointer-events:none;justify-content:center;align-items: center;font-size:13px;font-weight:600;inset:0}.dropzone.catches.svelte-1b5cnjl{pointer-events:auto}.frame.svelte-1b5cnjl{position:absolute;top:var(--gutter);left:var(--gutter);width:calc(100% - 2*var(--gutter));height:calc(100% - 2*var(--gutter));overflow:visible}.dots.svelte-1b5cnjl{fill:none;stroke:currentColor;stroke-width:4;stroke-dasharray:4 12;animation:svelte-1b5cnjl-segment 2s step-end infinite}.dots.odd.svelte-1b5cnjl{stroke-dashoffset:8;animation-delay:-1s}@keyframes svelte-1b5cnjl-segment{50%{opacity:0}}@media (prefers-reduced-motion:reduce){.dots.svelte-1b5cnjl{animation:none}}.label.svelte-1b5cnjl{position:relative}

package/.mochi/svelte-css/IdeBar-d3un7kuigxc5.css

@@ -0,0 +1 @@
+.right.svelte-r39acv{display:flex;align-items:stretch;margin-left:auto}.cog.svelte-r39acv,.reload.svelte-r39acv{display:inline-flex;color:var(--ink);border-left:1px solid var(--rule);flex:none;justify-content:center;align-items: center;width:48px}.reload.svelte-r39acv{appearance:none;cursor:pointer;background:0 0;border-top:0;border-bottom:0;border-right:0;padding:0}.cog.svelte-r39acv:hover,.reload.svelte-r39acv:hover{background:var(--fill);color:var(--fill-ink)}.strip.svelte-r39acv{display:flex;align-items:stretch;min-width:0}.viewport.svelte-r39acv{display:flex;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;min-width:0}.viewport.svelte-r39acv::-webkit-scrollbar{display:none}@media (prefers-reduced-motion:reduce){.viewport.svelte-r39acv{scroll-behavior:auto}}.tabs.svelte-r39acv{display:flex;flex:none;align-items:stretch}.page.svelte-r39acv{display:inline-flex;appearance:none;border:0;border-right:1px solid var(--rule);background:var(--bg-card);color:var(--ink);cursor:pointer;flex:none;justify-content:center;align-items: center;width:28px;margin:0;padding:0}.page.trailing.svelte-r39acv{border-right:0;border-left:1px solid var(--rule)}.page.svelte-r39acv:hover:not(:disabled){background:var(--fill);color:var(--fill-ink)}.page.svelte-r39acv:disabled{opacity:var(--dim);cursor:default}.page.svelte-r39acv:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.tab-slot.svelte-r39acv{display:inline-flex;border-right:1px solid var(--rule);flex:none;align-items:stretch}.tab-slot.active.svelte-r39acv{background:var(--fill);color:var(--fill-ink);box-shadow:inset 0 3px 0 var(--bg)}.tab-slot.svelte-r39acv:not(.active):hover,.tab-slot.drop-target.svelte-r39acv:not(.active){background:color-mix(in srgb,var(--ink)12%,transparent)}.tab-slot.drop-target.svelte-r39acv{outline:2px dashed;outline-offset:-5px}.drop-tip.svelte-r39acv{position:fixed;z-index:20;background:var(--bg-card);color:var(--ink);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;pointer-events:none;padding:6px 10px;font-size:12px;font-weight:600;transform:translateY(6px)}.tab.svelte-r39acv{display:inline-flex;appearance:none;color:var(--ink-soft);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;background:0 0;border:0;flex:none;align-items: center;gap:10px;max-width:240px;margin:0;padding:0 12px;transition:background 80ms steps(2,end);font-size:13px;font-weight:700}.tab-slot.svelte-r39acv:not(.active):hover .tab:where(.svelte-r39acv){color:var(--ink)}.tab.active.svelte-r39acv{color:var(--fill-ink);cursor:default}.tab.svelte-r39acv:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.tab.active.svelte-r39acv:focus-visible{outline-color:var(--fill-ink)}.tab-name.svelte-r39acv{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tab-stop.svelte-r39acv{display:inline-flex;appearance:none;color:inherit;opacity:.55;cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-items: center;margin:0;padding:0 10px 0 0}.tab-slot.svelte-r39acv:not(.active) .tab-stop:where(.svelte-r39acv){color:var(--ink-soft)}.tab-stop.svelte-r39acv:hover:not(:disabled){opacity:1;color:var(--danger)}.tab-stop.svelte-r39acv:disabled{opacity:var(--dim);cursor:default}.tab-stop.svelte-r39acv:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}.tab-slot.active.svelte-r39acv .tab-stop:where(.svelte-r39acv):focus-visible{outline-color:var(--fill-ink)}.tab-mode.svelte-r39acv{display:inline-flex;opacity:.7;border:1px solid;flex:none;justify-content:center;align-items: center;width:18px;height:18px}.attn.svelte-r39acv{border:1px solid var(--edge);animation:svelte-r39acv-tab-attn-pulse 1.4s ease-in-out infinite;flex:none;width:10px;height:10px}.attn.done.svelte-r39acv{background:var(--attn-done);color:var(--attn-done)}.attn.waiting.svelte-r39acv{background:var(--attn-waiting);color:var(--attn-waiting)}@keyframes svelte-r39acv-tab-attn-pulse{0%,to{box-shadow:0 0 #0000;filter:brightness(.85)}50%{box-shadow:0 0 6px 2px color-mix(in srgb,currentColor 60%,transparent);filter:brightness(1.15)}}@media (prefers-reduced-motion:reduce){.attn.svelte-r39acv{animation:none;filter:none}}.tab.editing.svelte-r39acv{cursor:default}.tab-name-edit.svelte-r39acv{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--ink);background:var(--bg);color:var(--ink);width:148px;margin:0;padding:3px 6px;font-size:12px}.tab-name-edit.svelte-r39acv:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}

package/.mochi/svelte-css/InstanceView-3ucotech5097w.css

@@ -0,0 +1 @@
+.topbar.svelte-15fxkvm{display:flex;border-bottom:1px solid var(--rule);align-items: center;gap:18px;padding:16px 24px}.back.svelte-15fxkvm{display:inline-flex;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);text-decoration:none;align-items: center;gap:5px;font-size:12px}.back.svelte-15fxkvm:hover{color:var(--ink)}.title.svelte-15fxkvm{display:flex;flex:1;align-items: center;gap:12px}.name.svelte-15fxkvm{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.03em;font-size:20px;font-weight:700}.open.svelte-15fxkvm{display:inline-flex;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);text-decoration:none;border:1px solid var(--edge);align-items: center;gap:6px;padding:7px 12px;font-size:12px;font-weight:600}.open.svelte-15fxkvm:hover{background:var(--fill);border-color:var(--fill);color:var(--fill-ink)}.restart.svelte-15fxkvm{display:inline-flex;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink);background:var(--bg);border:1px solid var(--edge);cursor:pointer;align-items: center;gap:6px;padding:7px 12px;font-size:12px;font-weight:600}.restart.svelte-15fxkvm:hover:not(:disabled){background:var(--fill);border-color:var(--fill);color:var(--fill-ink)}.restart.svelte-15fxkvm:disabled{opacity:var(--dim-panel);cursor:not-allowed}.restart-err.svelte-15fxkvm{font-family:var(--font-mono);color:var(--danger);margin:0;padding:8px 24px 0;font-size:12px}.stage.svelte-15fxkvm{position:relative;max-width:1200px;margin:0 auto;padding:20px 24px 40px}.meta.svelte-15fxkvm{display:grid;grid-template-columns:max-content 1fr;align-items: center;gap:6px 14px;margin-bottom:18px}.meta.svelte-15fxkvm .k:where(.svelte-15fxkvm){font-family:var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);font-size:12px;font-weight:700}.meta.svelte-15fxkvm code:where(.svelte-15fxkvm){font-family:var(--font-mono);color:var(--ink-soft);font-size:13px}.meta.svelte-15fxkvm code.muted:where(.svelte-15fxkvm){color:var(--ink-faint)}.healthslot.svelte-15fxkvm,.ports.svelte-15fxkvm{margin-bottom:18px}.ports-bar.svelte-15fxkvm{display:flex;justify-content:space-between;align-items: center}.rebuild.svelte-15fxkvm{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;background:var(--fill-ink);color:var(--fill);border:1px solid var(--fill-ink);cursor:pointer;padding:4px 9px;font-size:10px;font-weight:600}.rebuild.svelte-15fxkvm:hover:not(:disabled){color:var(--fill-ink);background:0 0}.rebuild.svelte-15fxkvm:disabled{opacity:var(--dim-panel);cursor:not-allowed}.ports-body.svelte-15fxkvm{background:var(--bg-card);padding:12px 14px 14px}.port-list.svelte-15fxkvm{list-style:none;display:flex;flex-direction:column;gap:6px;margin:0 0 12px;padding:0}.port-list.svelte-15fxkvm li:where(.svelte-15fxkvm){display:flex;font-family:var(--font-mono);align-items: center;gap:8px;font-size:13px}.port-list.svelte-15fxkvm .cp:where(.svelte-15fxkvm){color:var(--ink);font-weight:600}.port-list.svelte-15fxkvm .arr:where(.svelte-15fxkvm){color:var(--ink-faint)}.port-list.svelte-15fxkvm a:where(.svelte-15fxkvm){display:inline-flex;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--ink-faint);align-items: center;gap:4px}.port-list.svelte-15fxkvm a:where(.svelte-15fxkvm):hover{border-bottom-color:var(--ink)}.rm.svelte-15fxkvm{border:1px solid var(--ink-faint);color:var(--ink-soft);cursor:pointer;background:0 0;width:20px;height:20px;margin-left:auto;font-size:15px;line-height:1}.rm.svelte-15fxkvm:hover{border-color:var(--danger);color:var(--danger)}.empty.svelte-15fxkvm{font-family:var(--font-mono);color:var(--ink-faint);margin:0 0 12px;font-size:12px}.add.svelte-15fxkvm{display:flex;gap:8px}.add.svelte-15fxkvm input:where(.svelte-15fxkvm){font-family:var(--font-mono);border:1px solid var(--ink);background:var(--bg);color:var(--ink);outline:none;flex:1;min-width:0;padding:6px 9px;font-size:13px}.add.svelte-15fxkvm button:where(.svelte-15fxkvm){font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;border:1px solid var(--edge);background:var(--bg-card);color:var(--ink);cursor:pointer;padding:6px 14px;font-size:12px;font-weight:600}.add.svelte-15fxkvm button:where(.svelte-15fxkvm):hover{background:var(--fill);border-color:var(--fill);color:var(--fill-ink)}.port-err.svelte-15fxkvm{font-family:var(--font-mono);color:var(--danger);margin:10px 0 0;font-size:12px}.hint.svelte-15fxkvm{font-family:var(--font-mono);color:var(--ink-faint);margin:10px 0 0;font-size:11px}.hint.pending.svelte-15fxkvm{color:var(--ink-soft)}.hint.svelte-15fxkvm code:where(.svelte-15fxkvm){color:var(--ink)}.logwrap.svelte-15fxkvm{overflow:hidden}.log-bar.svelte-15fxkvm{display:flex;justify-content:space-between;align-items: center}.log-actions.svelte-15fxkvm{display:flex;align-items: center;gap:6px}.copy.svelte-15fxkvm{display:inline-flex;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;background:var(--fill-ink);color:var(--fill);border:1px solid var(--fill-ink);cursor:pointer;align-items: center;gap:5px;padding:4px 9px;font-size:10px;font-weight:600}.copy.svelte-15fxkvm:hover:not(:disabled),.copy.active.svelte-15fxkvm{color:var(--fill-ink);background:0 0}.dot.svelte-15fxkvm{background:var(--live-dot);border-radius:50%;flex:none;width:6px;height:6px}.copy.svelte-15fxkvm:disabled{opacity:var(--dim-panel);cursor:not-allowed}.logs.svelte-15fxkvm{position:relative;background:repeating-linear-gradient(0deg,var(--screen-line)0 1px,transparent 1px 3px),var(--screen-bg);color:var(--screen-ink);overflow:auto;overflow-anchor:none;height:calc(100vh - 320px);min-height:360px;padding:14px}.logs.svelte-15fxkvm pre:where(.svelte-15fxkvm){font-family:var(--font-mono);white-space:pre-wrap;word-break:break-word;margin:0;font-size:12.5px;line-height:1.5}@keyframes svelte-15fxkvm-lcd-blink{50%{background:0 0}}.caret.svelte-15fxkvm{display:inline-block;background:var(--screen-ink);vertical-align:text-bottom;animation:svelte-15fxkvm-lcd-blink 1.05s steps(1)infinite;width:.6em;height:1.05em;margin-left:2px}.err.svelte-15fxkvm{background:var(--bg-card);color:var(--ink);border-top:2px solid var(--ink);font-family:var(--font-mono);padding:12px 14px;font-size:13px}

package/README.md

@@ -19,7 +19,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.
+- `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. Note that a plain-`http` LAN address is not a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts), so browsers refuse clipboard access there and copying out of an instance's VS Code terminal does nothing — reach codebay over `localhost` (e.g. `ssh -L 6969:localhost:6969 <host>`) or allow the origin under `chrome://flags/#unsafely-treat-insecure-origin-as-secure`.
 - `PUBLIC_ORIGIN` — the origin you actually load codebay from (default `http://localhost:<PORT>`). Every form POST — creating an instance, restarting one, saving settings — is checked against it, so reaching the UI at any other address (a LAN IP, a hostname, or a reverse proxy / tunnel that terminates TLS) makes those actions fail with a `403 Cross-site POST form submissions are forbidden` until you set this. Give the exact scheme + host + port your browser shows, with no trailing slash — `PUBLIC_ORIGIN=http://192.168.1.50:6969` or `PUBLIC_ORIGIN=https://codebay.example.com`. Behind a TLS-terminating proxy this is the public `https://` URL, not the loopback address the proxy forwards to.
 - `TRUSTED_ORIGINS` — comma-separated extra origins accepted alongside `PUBLIC_ORIGIN`, for when the UI is legitimately reachable at more than one address (e.g. `http://localhost:6969,http://192.168.1.50:6969`)
 - `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`
@@ -45,8 +45,11 @@ it is the one place that does not use `BASIC_AUTH_PASSWORD` — MCP clients send
 
 The tools cover the whole loop: `create_sandbox`, `run_agent`, `get_run`, `list_runs`, `stop_run`,
 `get_diff`, `read_file`, `write_file`, `exec_command`, `git_push`, `create_pr`, `get_logs`,
-`list_sandboxes`, `get_sandbox` and `delete_sandbox`. Runs are asynchronous — `run_agent` hands back
-a run id and the work continues in the background, surviving a manager restart.
+`list_sandboxes`, `get_sandbox`, `rename_sandbox`, `stop_sandbox`, `start_sandbox`,
+`rebuild_sandbox`, `add_port_forward`, `remove_port_forward` and `delete_sandbox`. Runs are
+asynchronous — `run_agent` hands back a run id and the work continues in the background, surviving a
+manager restart. `stop_sandbox` / `start_sandbox` cycle the container without losing the workspace,
+and `rebuild_sandbox` recreates it (which is what applies a port forward).
 
 Sandboxes created this way are ordinary instances: they show up on the dashboard with a live
 "agent running" line, and you can open the IDE to watch. They persist until an agent (or you)
@@ -56,6 +59,12 @@ deletes them.
 > credentials, with permission prompts bypassed inside the container.** Treat it like a password, and
 > regenerate it from Settings if it leaks.
 
+## Workspace uploads
+
+Turn on Settings → **Drop files into the workspace** to drag-and-drop or paste files/images onto an
+instance and save them under `codebay-inbox/` in its workspace (git-excluded), so Claude Code inside
+can `Read` them. Off by default.
+
 ## Troubleshooting
 
 - `403 Cross-site POST form submissions are forbidden` when clicking anything that saves — codebay is being reached at an origin other than `http://localhost:<PORT>`. Set `PUBLIC_ORIGIN` to the URL in your browser's address bar and restart (see Configuration).
@@ -69,7 +78,7 @@ bun run dev        # dev server, local ./.codebay DATA_DIR, no browser launch
 bun run checks     # format + typecheck + tests
 ```
 
-The repo also ships a minimal Bun devcontainer (`.devcontainer/`) for a containerized setup. New to authoring devcontainers? See the general [Devcontainer guide](./DEVCONTAINER_GUIDE.md).
+The repo also ships a Bun devcontainer (`.devcontainer/`) for a containerized setup; it runs a nested Docker daemon, so codebay itself can boot instances from inside it. New to authoring devcontainers? See the general [Devcontainer guide](./DEVCONTAINER_GUIDE.md).
 
 ## License
 

package/migrations/0011_agent_run_rejected_structured_output.sql

@@ -0,0 +1,2 @@
+-- The last StructuredOutput payload the schema rejected, so a caller can salvage a run that exhausted its retries.
+ALTER TABLE agent_runs ADD COLUMN rejected_structured_output TEXT;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "codebay",
-	"version": "0.15.0",
+	"version": "0.16.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",
@@ -62,7 +62,7 @@
 		"@devcontainers/cli": "^0.88.0",
 		"@fontsource-variable/doto": "^5.3.0",
 		"@fontsource-variable/jetbrains-mono": "^5.3.0",
-		"@lucide/svelte": "^1.31.0",
+		"@lucide/svelte": "^1.48.0",
 		"@tmcp/adapter-valibot": "^0.1.6",
 		"@tmcp/transport-http": "^0.9.0",
 		"@xterm/addon-fit": "^0.11.0",
@@ -70,26 +70,26 @@
 		"@zihaolam/bun-sqlite-migrations": "^1.0.3",
 		"dockerode": "^5.0.1",
 		"mochi-framework": "^0.9.1",
-		"svelte": "^5.56.9",
+		"svelte": "^5.57.1",
 		"svelte-french-toast": "^1.2.0",
 		"tmcp": "^1.20.0",
-		"valibot": "^1.1.0"
+		"valibot": "^1.5.0"
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",
 		"@types/bun": "1.3.14",
 		"@types/dockerode": "^4.0.1",
-		"eslint": "^10.8.1",
+		"eslint": "^10.11.0",
 		"eslint-plugin-svelte": "^3.23.0",
-		"globals": "^17.11.0",
-		"prettier": "^3.9.6",
+		"globals": "^17.12.0",
+		"prettier": "^3.9.9",
 		"prettier-plugin-svelte": "^4.1.1",
 		"svelte-check": "4.7.4",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.67.0"
+		"typescript-eslint": "^8.70.1"
 	},
 	"resolutions": {
 		"msgpackr-extract": "npm:@mochi-framework/msgpackr-extract-stub@*",
-		"svelte": "5.56.9"
+		"svelte": "5.57.1"
 	}
 }

package/src/__fixtures__/IdeBarStrip.svelte

@@ -0,0 +1,41 @@
+<!-- Renders the IDE tab strip with a stop button per tab for src/index.isolated.test.ts. -->
+<script lang="ts">
+	import IdeBar from '../components/IdeBar.svelte';
+	import type { Instance } from '../types.ts';
+
+	const tab = (id: string): Instance => ({
+		id,
+		name: id,
+		source_path: `/src/${id}`,
+		workspace_path: `/data/${id}`,
+		host_port: 8001,
+		container_id: null,
+		remote_workspace_folder: null,
+		status: 'running',
+		error: null,
+		created_at: 0,
+		image_source: null,
+		avatar: null,
+		mode: 'ide',
+		terminal_split: 0,
+		git_branch: null,
+		attention: null,
+		forwarded_ports: [],
+		active_run: null
+	});
+
+	let editingName = $state('');
+</script>
+
+<IdeBar
+	running={[tab('alpha'), tab('beta')]}
+	active="beta"
+	attention={{}}
+	editingId={null}
+	bind:editingName
+	onselect={() => {}}
+	onstop={() => {}}
+	onstartrename={() => {}}
+	oncommitrename={() => {}}
+	oncancelrename={() => {}}
+/>

package/src/avatars/dog.ts

@@ -6,7 +6,7 @@ const art: AvatarArt = {
 		'..######',
 		'.#######',
 		'####.###',
-		'##.###.#',
+		'##.###..',
 		'#######.',
 		'##.##..#',
 		'##.##..#',

package/src/avatars/lightning.ts

@@ -2,16 +2,15 @@ import type { AvatarArt } from './types.ts';
 
 const art: AvatarArt = {
 	name: 'lightning',
-	robot: true,
 	pixels: [
-		'...#####',
-		'..####..',
-		'.####...',
-		'.#######',
-		'..######',
-		'...#####',
-		'..####..',
-		'.###....'
+		'....###.',
+		'...###..',
+		'..###...',
+		'.###....',
+		'#######.',
+		'...###..',
+		'..##....',
+		'.#......'
 	]
 };
 

package/src/avatars/rocket.ts

@@ -2,16 +2,15 @@ import type { AvatarArt } from './types.ts';
 
 const art: AvatarArt = {
 	name: 'rocket',
-	robot: true,
 	pixels: [
 		'...##...',
 		'..####..',
-		'..#..#..',
+		'..#+.#..',
+		'..#+.#..',
 		'..####..',
 		'.######.',
-		'##.##.##',
-		'..#..#..',
-		'...##...'
+		'.#.++.#.',
+		'..+.++..'
 	]
 };
 

package/src/components/AppShell.svelte

@@ -5,6 +5,7 @@
 	import { SvelteSet } from 'svelte/reactivity';
 	import { nextTabIndex } from '../lib/tab-nav.ts';
 	import DashboardView from './DashboardView.svelte';
+	import DropZone from './DropZone.svelte';
 	import IdeBar from './IdeBar.svelte';
 	import IdeLoader from './IdeLoader.svelte';
 	import TerminalSplit from './TerminalSplit.svelte';
@@ -15,6 +16,7 @@
 	import { syncTheme } from '../theme.ts';
 	import toast, { Toaster } from 'svelte-french-toast';
 	import { TOAST_OPTIONS } from '../toast.ts';
+	import { filesFrom, uploadFile } from '../lib/upload.ts';
 
 	// `snapshot` seeds the live state so neither view renders a loading flash first.
 	let {
@@ -56,6 +58,22 @@
 	let editingId = $state<string | null>(null);
 	let editingName = $state('');
 
+	// The tab only vanishes once the stream drops the instance from `running`, so the
+	// button stays disabled across the round-trip rather than flickering back to armed.
+	const stopping = new SvelteSet<string>();
+
+	async function stopTab(id: string) {
+		if (stopping.has(id)) return;
+		stopping.add(id);
+		try {
+			await apiPost(`/api/instances/${id}/stop`, undefined, 'Failed to stop instance');
+			// The live stream removes the tab once the container is down.
+		} catch (err) {
+			toast.error((err as Error).message);
+			stopping.delete(id);
+		}
+	}
+
 	function startRename(instance: Instance) {
 		editingId = instance.id;
 		editingName = instance.name;
@@ -250,6 +268,72 @@
 		};
 	});
 
+	// Sequential, so the response order (and the toast order) matches the drop order.
+	async function handleUpload(id: string, files: File[]) {
+		for (const file of files) {
+			try {
+				const saved = await uploadFile(id, file);
+				toast.success(`Saved ${saved.containerPath}`);
+				void navigator.clipboard.writeText(saved.containerPath).catch(() => {});
+			} catch (err) {
+				toast.error((err as Error).message);
+			}
+		}
+	}
+
+	let dropping = $state(false);
+
+	function onDrop(e: DragEvent) {
+		e.preventDefault();
+		dropping = false;
+		void handleUpload(active, filesFrom(e.dataTransfer));
+	}
+
+	// Covering the code-server iframe hijacks VS Code's own drops, so there only the tab takes a
+	// file; a terminal pane lives in this document and gets the full overlay.
+	$effect(() => {
+		if (!livePreflight.uploadEnabled || !onIde) return;
+		const hasFiles = (e: DragEvent) => e.dataTransfer?.types.includes('Files') ?? false;
+		const enter = (e: DragEvent) => {
+			if (hasFiles(e)) dropping = true;
+		};
+		// A drop target already claimed the drag; anywhere else refuses it, since the browser's
+		// default is to open the file in a new tab.
+		const over = (e: DragEvent) => {
+			if (!hasFiles(e) || e.defaultPrevented) return;
+			e.preventDefault();
+			e.dataTransfer!.dropEffect = 'none';
+		};
+		const drop = (e: DragEvent) => {
+			if (hasFiles(e)) e.preventDefault();
+			dropping = false;
+		};
+		const leave = (e: DragEvent) => {
+			if (e.relatedTarget === null) dropping = false;
+		};
+		// Capture phase: only fires for events that originate in the parent document (xterm's
+		// textarea, the tab bar) — paste inside the iframe never reaches here.
+		const paste = (e: ClipboardEvent) => {
+			const files = filesFrom(e.clipboardData);
+			if (files.length && active) {
+				e.preventDefault();
+				void handleUpload(active, files);
+			}
+		};
+		window.addEventListener('dragenter', enter);
+		window.addEventListener('dragover', over);
+		window.addEventListener('dragleave', leave);
+		window.addEventListener('drop', drop);
+		window.addEventListener('paste', paste, true);
+		return () => {
+			window.removeEventListener('dragenter', enter);
+			window.removeEventListener('dragover', over);
+			window.removeEventListener('dragleave', leave);
+			window.removeEventListener('drop', drop);
+			window.removeEventListener('paste', paste, true);
+		};
+	});
+
 	$effect(() => {
 		// The re-seed after a reconnect is a baseline, not a change — otherwise it replays chimes.
 		let primed = false;
@@ -271,6 +355,10 @@
 					livePreflight = { ...livePreflight, defaultMode: msg.data.mode };
 					return;
 				}
+				if (msg.type === 'upload-enabled') {
+					livePreflight = { ...livePreflight, uploadEnabled: msg.data.enabled };
+					return;
+				}
 				if (msg.type === 'theme') {
 					syncTheme(msg.data.value);
 					return;
@@ -301,6 +389,7 @@
 				for (const id of [...everReady]) if (!live.has(id)) everReady.delete(id);
 				for (const id of [...forced]) if (!live.has(id)) forced.delete(id);
 				for (const id of [...loadedFrames]) if (!live.has(id)) loadedFrames.delete(id);
+				for (const id of [...stopping]) if (!live.has(id)) stopping.delete(id);
 				const nextAttention: Record<string, 'done' | 'waiting' | null> = {};
 				for (const inst of next) nextAttention[inst.id] = inst.attention;
 				if (primed) {
@@ -356,10 +445,15 @@
 			{attention}
 			{editingId}
 			bind:editingName
+			stopping={[...stopping]}
 			onreload={activeInstance && activeInstance.mode !== 'terminal' && mountable(active)
 				? reloadActive
 				: undefined}
 			onselect={(id) => navigate(`/ide/${id}`)}
+			onstop={stopTab}
+			ondropfiles={livePreflight.uploadEnabled
+				? (id, files) => void handleUpload(id, files)
+				: undefined}
 			onstartrename={startRename}
 			oncommitrename={commitRename}
 			oncancelrename={cancelRename}
@@ -382,7 +476,7 @@
 				<div
 					class="pane"
 					class:active={inst.id === active}
-					role="tabpanel"
+					role="region"
 					aria-labelledby="tab-{inst.id}"
 				>
 					{#if mountable(inst.id)}
@@ -393,10 +487,13 @@
 								initialOpen={inst.terminal_split === 1}
 							/>
 						{:else}
+							<!-- code-server answers a terminal's OSC 52 through the Clipboard API, which
+							     Permissions Policy gates per-frame. -->
 							<iframe
 								bind:this={frames[inst.id]}
 								src={ideUrl(inst)}
 								title={inst.name}
+								allow="clipboard-read; clipboard-write"
 								onload={() => loadedFrames.add(inst.id)}
 							></iframe>
 						{/if}
@@ -413,6 +510,9 @@
 					{:else if inst.mode !== 'terminal' && !loadedFrames.has(inst.id)}
 						<IdeLoader />
 					{/if}
+					{#if dropping && inst.id === active && inst.mode === 'terminal'}
+						<DropZone ondrop={onDrop} />
+					{/if}
 				</div>
 			{/if}
 		{/each}

package/src/components/DropZone.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	// With a drop handler the overlay takes the drop itself (an iframe beneath would swallow it);
+	// without one it stays inert and the drop lands on whatever is underneath.
+	let { ondrop }: { ondrop?: (e: DragEvent) => void } = $props();
+</script>
+
+<div
+	class="dropzone"
+	class:catches={ondrop}
+	role="presentation"
+	ondragover={ondrop ? (e) => e.preventDefault() : undefined}
+	{ondrop}
+>
+	<!-- Two interleaved dot patterns taking turns, like alternating LCD segments. -->
+	<svg class="frame" aria-hidden="true">
+		<rect class="dots" width="100%" height="100%" />
+		<rect class="dots odd" width="100%" height="100%" />
+	</svg>
+	<span class="label">Drop to save into codebay-inbox/</span>
+</div>
+
+<style>
+	.dropzone {
+		--gutter: 16px;
+		position: absolute;
+		inset: 0;
+		z-index: 5;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: color-mix(in srgb, var(--bg) 80%, transparent);
+		color: var(--ink);
+		font-family: var(--font-mono);
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		font-size: 13px;
+		pointer-events: none;
+	}
+	.dropzone.catches {
+		pointer-events: auto;
+	}
+	/* An inline svg sizes like a replaced element, so insets alone won't stretch it. */
+	.frame {
+		position: absolute;
+		top: var(--gutter);
+		left: var(--gutter);
+		width: calc(100% - 2 * var(--gutter));
+		height: calc(100% - 2 * var(--gutter));
+		overflow: visible;
+	}
+	.dots {
+		fill: none;
+		stroke: currentColor;
+		stroke-width: 4;
+		stroke-dasharray: 4 12;
+		animation: segment 2s step-end infinite;
+	}
+	.dots.odd {
+		stroke-dashoffset: 8;
+		animation-delay: -1s;
+	}
+	@keyframes segment {
+		50% {
+			opacity: 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.dots {
+			animation: none;
+		}
+	}
+	/* Positioned so it paints above the frame, which comes first in source order. */
+	.label {
+		position: relative;
+	}
+</style>

package/src/components/HealthBox.svelte

@@ -31,13 +31,14 @@
 	] as const);
 
 	// The value word stays uniform because the tick/cross icon already conveys pass vs fail.
-	const checks = $derived.by((): { label: string; ok: boolean; value: string }[] => {
+	// Keyed by id, not label: a repeated label would make the keyed each throw and freeze the panel.
+	const checks = $derived.by((): { key: string; label: string; ok: boolean; value: string }[] => {
 		if (!health) return [];
 		const v = (ok: boolean) => ({ ok, value: ok ? 'OK' : '—' });
 		return [
-			{ label: FIXED_CHECKS[0], ...v(health.containerRunning) },
-			{ label: FIXED_CHECKS[1], ...v(health.codeServerAccessible) },
-			...health.injections.map((i) => ({ label: i.label, ...v(i.ok) }))
+			{ key: 'container', label: FIXED_CHECKS[0], ...v(health.containerRunning) },
+			{ key: 'surface', label: FIXED_CHECKS[1], ...v(health.codeServerAccessible) },
+			...health.injections.map((i) => ({ key: i.id, label: i.label, ...v(i.ok) }))
 		];
 	});
 
@@ -64,7 +65,7 @@
 	<div class="panel-bar">Health</div>
 	<div class="health">
 		{#if health}
-			{#each checks as check (check.label)}
+			{#each checks as check (check.key)}
 				<div class="hrow">
 					<span class="box {check.ok ? 'ok' : 'bad'}">
 						{#if check.ok}<Check size={12} strokeWidth={3} />{:else}<X