codebay 0.14.0 → 0.15.0

package/.mochi/svelte-compile/Instance-yfw7s5mp.server.js

@@ -0,0 +1,627 @@
+// @bun
+import {
+  Chevron_right,
+  StatusBadge,
+  forwardedPortUrl
+} from "./chunk-2qzc07gt.js";
+import {
+  Bot
+} from "./chunk-f9td8ej2.js";
+import {
+  Message_square
+} from "./chunk-ef3hvegw.js";
+import {
+  Terminal,
+  apiDelete,
+  apiFetch,
+  apiPost,
+  ideUrl
+} from "./chunk-0y3wrae9.js";
+import {
+  HydratableBoundary,
+  Icon,
+  X,
+  emitIslandProps
+} from "./chunk-60mpagr9.js";
+import"./chunk-xpt1a7jm.js";
+
+// src/pages/Instance.svelte
+import"svelte/internal/flags/async";
+import * as $11 from "svelte/internal/server";
+
+// src/components/InstanceView.svelte
+import"svelte/internal/flags/async";
+import * as $10 from "svelte/internal/server";
+
+// node_modules/@lucide/svelte/dist/icons/arrow-left.svelte
+import"svelte/internal/flags/async";
+import * as $ from "svelte/internal/server";
+function Arrow_left($$renderer, $$props) {
+  let { $$slots, $$events, ...props } = $$props;
+  const iconNode = [
+    ["path", { d: "m12 19-7-7 7-7" }],
+    ["path", { d: "M19 12H5" }]
+  ];
+  Icon($$renderer, $.spread_props([{ name: "arrow-left" }, props, { iconNode }]));
+}
+// node_modules/@lucide/svelte/dist/icons/arrow-up-right.svelte
+import"svelte/internal/flags/async";
+import * as $2 from "svelte/internal/server";
+function Arrow_up_right($$renderer, $$props) {
+  let { $$slots, $$events, ...props } = $$props;
+  const iconNode = [["path", { d: "M7 7h10v10" }], ["path", { d: "M7 17 17 7" }]];
+  Icon($$renderer, $2.spread_props([{ name: "arrow-up-right" }, props, { iconNode }]));
+}
+// src/components/HealthBox.svelte
+import"svelte/internal/flags/async";
+import * as $5 from "svelte/internal/server";
+
+// node_modules/@lucide/svelte/dist/icons/check.svelte
+import"svelte/internal/flags/async";
+import * as $3 from "svelte/internal/server";
+function Check($$renderer, $$props) {
+  let { $$slots, $$events, ...props } = $$props;
+  const iconNode = [["path", { d: "M20 6 9 17l-5-5" }]];
+  Icon($$renderer, $3.spread_props([{ name: "check" }, props, { iconNode }]));
+}
+// src/components/Skeleton.svelte
+import"svelte/internal/flags/async";
+import * as $4 from "svelte/internal/server";
+function Skeleton($$renderer, $$props) {
+  let { variant = "text", width } = $$props;
+  $$renderer.push(`<span${$4.attr_class(`skel ${$4.stringify(variant)}`, "svelte-tl058d")}${$4.attr_style("", { width })}></span>`);
+}
+
+// src/components/HealthBox.svelte
+function HealthBox($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let {
+      health = null,
+      lastFetchedAt = null,
+      active = true,
+      injectionChecks = 0,
+      mode = "ide"
+    } = $$props;
+    const FIXED_CHECKS = $5.derived(() => [
+      "Container running",
+      mode === "terminal" ? "Terminal reachable" : "Code-server reachable"
+    ]);
+    const checks = $5.derived(() => {
+      if (!health)
+        return [];
+      const v = (ok) => ({ ok, value: ok ? "OK" : "\u2014" });
+      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) }))
+      ];
+    });
+    function getNumberOfChecks() {
+      return health ? checks().length : FIXED_CHECKS().length + injectionChecks;
+    }
+    let now = Date.now();
+    const agoLabel = $5.derived(() => {
+      if (!active && !health)
+        return "Container not running";
+      if (!lastFetchedAt)
+        return "Waiting for first check\u2026";
+      const secs = Math.max(0, Math.round((now - lastFetchedAt) / 1000));
+      return `Updated ${secs}s ago`;
+    });
+    $$renderer2.push(`<div${$5.attr_class("healthwrap panel svelte-1hnopyv", undefined, { dim: !active && !health })}><div class="panel-bar">Health</div> <div class="health svelte-1hnopyv">`);
+    if (health) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<!--[-->`);
+      const each_array = $5.ensure_array_like(checks());
+      for (let $$index = 0, $$length = each_array.length;$$index < $$length; $$index++) {
+        let check = each_array[$$index];
+        $$renderer2.push(`<div class="hrow svelte-1hnopyv"><span${$5.attr_class(`box ${check.ok ? "ok" : "bad"}`, "svelte-1hnopyv")}>`);
+        if (check.ok) {
+          $$renderer2.push("<!--[0-->");
+          Check($$renderer2, { size: 12, strokeWidth: 3 });
+        } else {
+          $$renderer2.push("<!--[-1-->");
+          X($$renderer2, { size: 12, strokeWidth: 3 });
+        }
+        $$renderer2.push(`<!--]--></span> <span class="hlabel svelte-1hnopyv">${$5.escape(check.label)}</span> <span class="hvalue svelte-1hnopyv">${$5.escape(check.value)}</span></div>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else if (active) {
+      $$renderer2.push("<!--[1-->");
+      $$renderer2.push(`<!--[-->`);
+      const each_array_1 = $5.ensure_array_like(Array(getNumberOfChecks()));
+      for (let i = 0, $$length = each_array_1.length;i < $$length; i++) {
+        let _ = each_array_1[i];
+        $$renderer2.push(`<div class="hrow svelte-1hnopyv"><span class="box idle svelte-1hnopyv"></span> `);
+        Skeleton($$renderer2, { width: "120px" });
+        $$renderer2.push(`<!----> `);
+        Skeleton($$renderer2, { variant: "pill" });
+        $$renderer2.push(`<!----></div>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<!--[-->`);
+      const each_array_2 = $5.ensure_array_like(FIXED_CHECKS());
+      for (let $$index_2 = 0, $$length = each_array_2.length;$$index_2 < $$length; $$index_2++) {
+        let label = each_array_2[$$index_2];
+        $$renderer2.push(`<div class="hrow svelte-1hnopyv"><span class="box idle svelte-1hnopyv"></span> <span class="hlabel svelte-1hnopyv">${$5.escape(label)}</span> <span class="hvalue svelte-1hnopyv">\u2014</span></div>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    }
+    $$renderer2.push(`<!--]--></div> <div class="hfoot svelte-1hnopyv">${$5.escape(agoLabel())}</div></div>`);
+  });
+}
+
+// src/components/AgentLogBox.svelte
+import"svelte/internal/flags/async";
+import * as $9 from "svelte/internal/server";
+
+// node_modules/@lucide/svelte/dist/icons/refresh-cw.svelte
+import"svelte/internal/flags/async";
+import * as $6 from "svelte/internal/server";
+function Refresh_cw($$renderer, $$props) {
+  let { $$slots, $$events, ...props } = $$props;
+  const iconNode = [
+    [
+      "path",
+      { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }
+    ],
+    ["path", { d: "M21 3v5h-5" }],
+    [
+      "path",
+      { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }
+    ],
+    ["path", { d: "M8 16H3v5" }]
+  ];
+  Icon($$renderer, $6.spread_props([{ name: "refresh-cw" }, props, { iconNode }]));
+}
+// node_modules/@lucide/svelte/dist/icons/circle-check.svelte
+import"svelte/internal/flags/async";
+import * as $7 from "svelte/internal/server";
+function Circle_check($$renderer, $$props) {
+  let { $$slots, $$events, ...props } = $$props;
+  const iconNode = [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["path", { d: "m9 12 2 2 4-4" }]
+  ];
+  Icon($$renderer, $7.spread_props([{ name: "circle-check" }, props, { iconNode }]));
+}
+// node_modules/@lucide/svelte/dist/icons/circle-x.svelte
+import"svelte/internal/flags/async";
+import * as $8 from "svelte/internal/server";
+function Circle_x($$renderer, $$props) {
+  let { $$slots, $$events, ...props } = $$props;
+  const iconNode = [
+    ["circle", { cx: "12", cy: "12", r: "10" }],
+    ["path", { d: "m15 9-6 6" }],
+    ["path", { d: "m9 9 6 6" }]
+  ];
+  Icon($$renderer, $8.spread_props([{ name: "circle-x" }, props, { iconNode }]));
+}
+// src/components/AgentLogBox.svelte
+import { untrack } from "svelte";
+function AgentLogBox($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { id, bump = 0 } = $$props;
+    let runs = [];
+    let timelines = {};
+    let open = [];
+    let newest = null;
+    let loaded = false;
+    let error = null;
+    const isOpen = (runId) => open.includes(runId);
+    async function load() {
+      try {
+        const q = open.length ? `?run_ids=${encodeURIComponent(open.join(","))}` : "";
+        const data = await apiFetch(`/api/instances/${id}/agent-log${q}`, undefined, "Could not load the agent log");
+        runs = Array.isArray(data.runs) ? data.runs : [];
+        timelines = { ...timelines, ...data.timelines ?? {} };
+        const top = data.runs[0]?.id ?? null;
+        if (top && top !== newest) {
+          newest = top;
+          open = [top];
+        }
+        error = null;
+      } catch (err) {
+        error = err.message;
+      } finally {
+        loaded = true;
+      }
+    }
+    function toggle(runId) {
+      const opening = !isOpen(runId);
+      open = opening ? [...open, runId] : open.filter((r) => r !== runId);
+      if (opening && !timelines[runId])
+        load();
+    }
+    const ICONS = {
+      tool: Terminal,
+      text: Message_square,
+      retry: Refresh_cw,
+      result: Circle_check
+    };
+    const isLive = (run) => run.status === "running" || run.status === "queued";
+    const newestFirst = (entries) => entries.map((entry, index) => ({ entry, index })).reverse();
+    const modelOf = (run) => run.model ?? run.requested_model;
+    function modelTitle(run) {
+      if (run.model && run.requested_model && run.model !== run.requested_model) {
+        return `Requested as ${run.requested_model}`;
+      }
+      return run.model ? undefined : "Requested; Claude has not reported the model it is using yet";
+    }
+    const sessionOf = (run) => run.session_id ?? run.resume_session_id;
+    const shortSession = (sid) => sid.slice(0, 8);
+    function sessionTitle(run) {
+      const sid = sessionOf(run);
+      if (!sid)
+        return "";
+      const lead = run.resume_session_id ? "Continues an earlier run in this session" : "New session, started by this run";
+      return `${lead}
+Session ${sid}${run.session_id ? "" : " (requested; not started yet)"}`;
+    }
+    function when(run) {
+      return new Date(run.created_at).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+    }
+    function meta(run) {
+      const bits = [];
+      if (run.num_turns != null)
+        bits.push(`${run.num_turns} turns`);
+      if (run.cost_usd != null)
+        bits.push(`$${run.cost_usd.toFixed(4)}`);
+      if (run.duration_ms != null)
+        bits.push(`${(run.duration_ms / 1000).toFixed(1)}s`);
+      return bits.join(" \xB7 ");
+    }
+    function peek(run) {
+      if (run.status === "queued")
+        return "Queued";
+      if (isLive(run))
+        return (run.last_activity ?? "Working\u2026").replace(/\s+/g, " ").trim();
+      return (run.error ?? run.result ?? run.prompt).replace(/\s+/g, " ").trim();
+    }
+    if (loaded && runs.length > 0) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<section class="agentwrap panel svelte-rfwj7e"><div class="agent-bar panel-bar svelte-rfwj7e"><span class="svelte-rfwj7e">`);
+      Bot($$renderer2, { size: 14 });
+      $$renderer2.push(`<!----> Agent log</span> <span class="count svelte-rfwj7e">${$9.escape(runs.length)} run${$9.escape(runs.length === 1 ? "" : "s")}</span></div> <!--[-->`);
+      const each_array = $9.ensure_array_like(runs);
+      for (let $$index_1 = 0, $$length = each_array.length;$$index_1 < $$length; $$index_1++) {
+        let run = each_array[$$index_1];
+        const expanded = isOpen(run.id);
+        $$renderer2.push(`<div class="run svelte-rfwj7e"><button type="button" class="run-head svelte-rfwj7e"${$9.attr("aria-expanded", expanded)}><span${$9.attr_class("chev svelte-rfwj7e", undefined, { down: expanded })}>`);
+        Chevron_right($$renderer2, { size: 14 });
+        $$renderer2.push(`<!----></span> <span class="when svelte-rfwj7e">${$9.escape(when(run))}</span> <span${$9.attr_class("status svelte-rfwj7e", undefined, { bad: run.is_error, live: isLive(run) })}>`);
+        if (isLive(run)) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<span class="pulse svelte-rfwj7e"></span>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--> ${$9.escape(run.status)}</span> `);
+        if (modelOf(run)) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<span class="model svelte-rfwj7e"${$9.attr("title", modelTitle(run))}>${$9.escape(modelOf(run))}</span>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--> `);
+        if (sessionOf(run)) {
+          $$renderer2.push("<!--[0-->");
+          const sid = sessionOf(run);
+          $$renderer2.push(`<span${$9.attr_class("session svelte-rfwj7e", undefined, { resumed: run.resume_session_id })}${$9.attr("title", sessionTitle(run))}>${$9.escape(run.resume_session_id ? "\u2937" : "\u25C6")}
+							${$9.escape(shortSession(sid))}</span>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--> `);
+        if (!expanded) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<span class="peek svelte-rfwj7e">${$9.escape(peek(run))}</span>`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--> <span class="run-meta svelte-rfwj7e">${$9.escape(meta(run))}</span></button> `);
+        if (expanded) {
+          $$renderer2.push("<!--[0-->");
+          $$renderer2.push(`<div class="prompt svelte-rfwj7e"><div class="ptitle svelte-rfwj7e">Initial prompt</div> <div class="ptext svelte-rfwj7e">${$9.escape(run.prompt)}</div></div> <ol class="steps svelte-rfwj7e">`);
+          if (isLive(run)) {
+            $$renderer2.push("<!--[0-->");
+            $$renderer2.push(`<li class="step svelte-rfwj7e"><span class="ico svelte-rfwj7e"><span class="pulse svelte-rfwj7e"></span></span> <span class="body svelte-rfwj7e"><span class="text svelte-rfwj7e">${$9.escape(run.status === "queued" ? "Queued \u2014 waiting for the sandbox" : "Working\u2026")}</span></span></li>`);
+          } else if ((timelines[run.id] ?? []).length === 0) {
+            $$renderer2.push("<!--[1-->");
+            $$renderer2.push(`<li class="step svelte-rfwj7e"><span class="body svelte-rfwj7e"><span class="text svelte-rfwj7e">No steps recorded.</span></span></li>`);
+          } else {
+            $$renderer2.push("<!--[-1-->");
+          }
+          $$renderer2.push(`<!--]--> <!--[-->`);
+          const each_array_1 = $9.ensure_array_like(newestFirst(timelines[run.id] ?? []));
+          for (let $$index = 0, $$length2 = each_array_1.length;$$index < $$length2; $$index++) {
+            let { entry, index } = each_array_1[$$index];
+            $$renderer2.push(`<li${$9.attr_class("step svelte-rfwj7e", undefined, { sub: entry.subagent })}><span${$9.attr_class("ico svelte-rfwj7e", undefined, { bad: entry.kind === "result" && entry.isError })}>`);
+            if (entry.kind === "result" && entry.isError) {
+              $$renderer2.push("<!--[0-->");
+              Circle_x($$renderer2, { size: 14 });
+            } else {
+              $$renderer2.push("<!--[-1-->");
+              const Icon2 = ICONS[entry.kind];
+              if (Icon2) {
+                $$renderer2.push("<!--[-->");
+                Icon2($$renderer2, { size: 14 });
+                $$renderer2.push("<!--]-->");
+              } else {
+                $$renderer2.push("<!--[!-->");
+                $$renderer2.push("<!--]-->");
+              }
+            }
+            $$renderer2.push(`<!--]--></span> <span class="body svelte-rfwj7e">`);
+            if (entry.name) {
+              $$renderer2.push("<!--[0-->");
+              $$renderer2.push(`<span class="tool svelte-rfwj7e">${$9.escape(entry.name)}</span>`);
+            } else {
+              $$renderer2.push("<!--[-1-->");
+            }
+            $$renderer2.push(`<!--]--> <span class="text svelte-rfwj7e">${$9.escape(entry.text)}</span></span></li>`);
+          }
+          $$renderer2.push(`<!--]--></ol> `);
+          if (run.error && !isLive(run)) {
+            $$renderer2.push("<!--[0-->");
+            $$renderer2.push(`<div class="err svelte-rfwj7e">${$9.escape(run.error)}</div>`);
+          } else {
+            $$renderer2.push("<!--[-1-->");
+          }
+          $$renderer2.push(`<!--]-->`);
+        } else {
+          $$renderer2.push("<!--[-1-->");
+        }
+        $$renderer2.push(`<!--]--></div>`);
+      }
+      $$renderer2.push(`<!--]--> `);
+      if (error) {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<div class="err svelte-rfwj7e">${$9.escape(error)}</div>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+      }
+      $$renderer2.push(`<!--]--></section>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+
+// src/components/InstanceView.svelte
+import { tick } from "svelte";
+function InstanceView($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { id, injectionChecks = 0 } = $$props;
+    let instance = null;
+    let health = null;
+    let lastFetchedAt = null;
+    let logs = "";
+    let runBump = 0;
+    let logEl = null;
+    let following = true;
+    async function scrollToBottom() {
+      await tick();
+      logEl?.scrollTo(0, logEl.scrollHeight);
+    }
+    function toggleFollow() {
+      following = !following;
+      if (following)
+        scrollToBottom();
+    }
+    const url = $10.derived(() => instance ? ideUrl(instance) : "#");
+    let newPort = "";
+    let portError = null;
+    let pendingRebuild = false;
+    const forwards = $10.derived(() => instance?.forwarded_ports ?? []);
+    const building = $10.derived(() => instance?.status === "creating");
+    async function portAction(run) {
+      portError = null;
+      try {
+        await run();
+        return true;
+      } catch (err) {
+        portError = err.message;
+        return false;
+      }
+    }
+    async function addPort(e) {
+      e.preventDefault();
+      const port = Number.parseInt(newPort, 10);
+      if (!Number.isInteger(port) || port < 1 || port > 65535) {
+        portError = "Enter a port number between 1 and 65535";
+        return;
+      }
+      const ok = await portAction(() => apiPost(`/api/instances/${id}/ports`, { port }));
+      if (ok) {
+        newPort = "";
+        pendingRebuild = true;
+      }
+    }
+    async function removePort(port) {
+      const ok = await portAction(() => apiDelete(`/api/instances/${id}/ports/${port}`));
+      if (ok)
+        pendingRebuild = true;
+    }
+    async function restart() {
+      const ok = await portAction(() => apiPost(`/api/instances/${id}/rebuild`));
+      if (ok)
+        pendingRebuild = false;
+    }
+    let restartError = null;
+    let restarting = false;
+    const restartOpts = {
+      onPending: (v) => restarting = v,
+      submit: () => {
+        restartError = null;
+        return ({ result }) => {
+          if (result.type === "failure") {
+            restartError = result.data?.error ?? "Restart failed";
+          } else if (result.type === "error") {
+            restartError = "Network error. Try again.";
+          }
+        };
+      }
+    };
+    let copied = false;
+    let copyTimer;
+    async function copyLogs() {
+      await navigator.clipboard.writeText(logs);
+      copied = true;
+      clearTimeout(copyTimer);
+      copyTimer = setTimeout(() => copied = false, 2000);
+    }
+    $$renderer2.push(`<header class="topbar svelte-15fxkvm"><a class="back svelte-15fxkvm" href="/">`);
+    Arrow_left($$renderer2, { size: 15 });
+    $$renderer2.push(`<!----> All instances</a> <div class="title svelte-15fxkvm"><span class="name svelte-15fxkvm">${$10.escape(instance?.name ?? "Instance")}</span> `);
+    if (instance) {
+      $$renderer2.push("<!--[0-->");
+      StatusBadge($$renderer2, { status: instance.status });
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      Skeleton($$renderer2, { variant: "pill" });
+    }
+    $$renderer2.push(`<!--]--></div> `);
+    if (instance?.status === "running") {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<form method="POST" action="?/restart" class="svelte-15fxkvm"><button class="restart svelte-15fxkvm" type="submit"${$10.attr("disabled", restarting || building(), true)}>${$10.escape(restarting || building() ? "Restarting\u2026" : "Restart container")}</button></form> <a class="open svelte-15fxkvm"${$10.attr("href", url())} target="_blank" rel="noopener">Open in new tab `);
+      Arrow_up_right($$renderer2, { size: 15 });
+      $$renderer2.push(`<!----></a>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></header> `);
+    if (restartError) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p class="restart-err svelte-15fxkvm">${$10.escape(restartError)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <main class="stage svelte-15fxkvm"><div class="meta svelte-15fxkvm"><span class="k svelte-15fxkvm">Source</span> `);
+    if (instance) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<code class="svelte-15fxkvm">${$10.escape(instance.source_path)}</code>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      Skeleton($$renderer2, { variant: "wide" });
+    }
+    $$renderer2.push(`<!--]--> <span class="k svelte-15fxkvm">Image</span> `);
+    if (instance) {
+      $$renderer2.push("<!--[0-->");
+      if (instance.image_source === "local") {
+        $$renderer2.push("<!--[0-->");
+        $$renderer2.push(`<code class="svelte-15fxkvm">local (project devcontainer.json)</code>`);
+      } else if (instance.image_source) {
+        $$renderer2.push("<!--[1-->");
+        $$renderer2.push(`<code class="svelte-15fxkvm">${$10.escape(instance.image_source)}</code>`);
+      } else {
+        $$renderer2.push("<!--[-1-->");
+        $$renderer2.push(`<code class="muted svelte-15fxkvm">\u2014</code>`);
+      }
+      $$renderer2.push(`<!--]-->`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      Skeleton($$renderer2, { variant: "wide" });
+    }
+    $$renderer2.push(`<!--]--></div> <div class="healthslot svelte-15fxkvm">`);
+    HealthBox($$renderer2, {
+      health,
+      lastFetchedAt,
+      injectionChecks,
+      active: !instance || instance.status === "running",
+      mode: instance?.mode ?? "ide"
+    });
+    $$renderer2.push(`<!----></div> <section class="ports panel svelte-15fxkvm"><div class="ports-bar panel-bar svelte-15fxkvm"><span class="svelte-15fxkvm">Forwarded ports</span> `);
+    if (pendingRebuild) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<button class="rebuild svelte-15fxkvm"${$10.attr("disabled", building(), true)}>${$10.escape(building() ? "Restarting\u2026" : "Restart to apply")}</button>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div> <div class="ports-body svelte-15fxkvm">`);
+    if (forwards().length) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<ul class="port-list svelte-15fxkvm"><!--[-->`);
+      const each_array = $10.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">:${$10.escape(f.container_port)}</span> <span class="arr svelte-15fxkvm">\u2192</span> <a${$10.attr("href", forwardedPortUrl(f.host_port))} target="_blank" rel="noopener" class="svelte-15fxkvm">${$10.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>`);
+      }
+      $$renderer2.push(`<!--]--></ul>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+      $$renderer2.push(`<p class="empty svelte-15fxkvm">No ports forwarded yet.</p>`);
+    }
+    $$renderer2.push(`<!--]--> <form class="add svelte-15fxkvm"><input type="number" min="1" max="65535" placeholder="container port (e.g. 3000)"${$10.attr("value", newPort)} spellcheck="false" class="svelte-15fxkvm"/> <button type="submit" class="svelte-15fxkvm">Add</button></form> `);
+    if (portError) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p class="port-err svelte-15fxkvm">${$10.escape(portError)}</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> `);
+    if (pendingRebuild) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<p class="hint pending svelte-15fxkvm">Port changes apply when you <strong class="svelte-15fxkvm">Restart</strong> (recreates the container).</p>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> <p class="hint svelte-15fxkvm">Your app must bind to <code class="svelte-15fxkvm">0.0.0.0</code> inside the container to be reachable.</p></div></section> `);
+    AgentLogBox($$renderer2, { id, bump: runBump });
+    $$renderer2.push(`<!----> <div class="logwrap panel svelte-15fxkvm"><div class="log-bar panel-bar svelte-15fxkvm"><span class="svelte-15fxkvm">Boot log</span> <div class="log-actions svelte-15fxkvm"><button${$10.attr_class("copy svelte-15fxkvm", undefined, { active: following })}${$10.attr("aria-pressed", following)}${$10.attr("title", following ? "Following \u2014 click to pause" : "Paused \u2014 click to follow new output")}>`);
+    if (following) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<span class="dot svelte-15fxkvm"></span>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--> ${$10.escape(following ? "Following" : "Follow log")}</button> <button class="copy svelte-15fxkvm"${$10.attr("disabled", !logs, true)}>${$10.escape(copied ? "Copied!" : "Copy logs")}</button></div></div> <div class="logs svelte-15fxkvm"><pre class="svelte-15fxkvm">${$10.escape(logs || "Waiting for output\u2026")}<span class="caret svelte-15fxkvm"></span></pre></div> `);
+    if (instance?.status === "error" && instance.error) {
+      $$renderer2.push("<!--[0-->");
+      $$renderer2.push(`<div class="err svelte-15fxkvm">${$10.escape(instance.error)}</div>`);
+    } else {
+      $$renderer2.push("<!--[-1-->");
+    }
+    $$renderer2.push(`<!--]--></div></main>`);
+  });
+}
+
+// src/pages/Instance.svelte
+function Instance($$renderer, $$props) {
+  $$renderer.component(($$renderer2) => {
+    let { id, injectionChecks } = $$props;
+    if (true) {
+      let failed = function($$renderer3, error) {
+        $$renderer3.push(`<mochi-island-failure data-component="InstanceView"${$11.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="InstanceView_2ma45l9bybfhl" component-url="__MOCHI_COMPONENT_URL__InstanceView_2ma45l9bybfhl__"${$11.attr("props-ref", emitIslandProps({ id, injectionChecks }))}>`);
+              $$renderer4.push(`<!--[-->`);
+              {
+                InstanceView($$renderer4, { id, injectionChecks });
+              }
+              $$renderer4.push(`<!--]-->`);
+              $$renderer4.push(`</mochi-hydratable-island>`);
+            },
+            $$slots: { default: true }
+          });
+        }
+        $$renderer3.push(`<!--]-->`);
+      });
+    }
+    $$renderer2.push(`<!--]-->`);
+  });
+}
+export {
+  Instance as default
+};