@cloudagentfleet/ui 0.1.1

package/dist/public/app.js

@@ -0,0 +1,997 @@
+(() => {
+  "use strict";
+
+  const {
+    createElement: h,
+    useCallback,
+    useEffect,
+    useMemo,
+    useRef,
+    useState,
+  } = React;
+
+  const TERMINAL_STATUSES = new Set(["completed", "failed", "stopped"]);
+  const STATUS_LABELS = {
+    starting: "Starting",
+    working: "Working",
+    waiting: "Needs input",
+    idle: "Idle",
+    completed: "Completed",
+    failed: "Failed",
+    stopped: "Stopped",
+  };
+
+  const TERMINAL_THEME = {
+    background: "#090c10",
+    foreground: "#d7dee7",
+    cursor: "#a7f3d0",
+    cursorAccent: "#090c10",
+    selectionBackground: "#334155",
+    black: "#20262e",
+    red: "#ff6b6b",
+    green: "#4ade80",
+    yellow: "#f5c451",
+    blue: "#63a4ff",
+    magenta: "#d084ff",
+    cyan: "#2dd4bf",
+    white: "#d7dee7",
+    brightBlack: "#64748b",
+    brightRed: "#ff8585",
+    brightGreen: "#75f0a8",
+    brightYellow: "#f8d477",
+    brightBlue: "#85b8ff",
+    brightMagenta: "#e0a3ff",
+    brightCyan: "#65e8db",
+    brightWhite: "#ffffff",
+  };
+
+  function csrfToken() {
+    const match = document.cookie.match(/(?:^|;\s*)hosted_agents_csrf=([^;]+)/);
+    return match ? decodeURIComponent(match[1]) : "";
+  }
+
+  function api(path, options) {
+    const request = { ...(options || {}) };
+    const method = String(request.method || "GET").toUpperCase();
+    if (request.body && typeof request.body !== "string") {
+      request.body = JSON.stringify(request.body);
+    }
+    const csrf = csrfToken();
+    return fetch(path, {
+      ...request,
+      credentials: "same-origin",
+      headers: {
+        accept: "application/json",
+        ...(request.body ? { "content-type": "application/json" } : {}),
+        ...(csrf && method !== "GET" && method !== "HEAD" ? { "x-csrf-token": csrf } : {}),
+        ...(options && options.headers ? options.headers : {}),
+      },
+    }).then(async (response) => {
+      if (response.status === 401) {
+        location.reload();
+        throw new Error("Authentication required — sign in again");
+      }
+      const body = response.status === 204 ? {} : await response.json().catch(() => ({}));
+      if (!response.ok) throw new Error(body.error || `Request failed (${response.status})`);
+      return body;
+    });
+  }
+
+  function formatTime(value) {
+    if (!value) return "Never";
+    const date = new Date(value);
+    if (Number.isNaN(date.getTime())) return "Unknown";
+    return new Intl.DateTimeFormat(undefined, {
+      month: "short",
+      day: "numeric",
+      hour: "numeric",
+      minute: "2-digit",
+    }).format(date);
+  }
+
+  function normalizeTerminalText(value) {
+    if (!value) return "";
+    return cleanLegacyTerminalBuffer(String(value))
+      .replace(/\u001b\][^\u0007]*(?:\u0007|\u001b\\)/g, "")
+      .replace(/\u001b\[[0-?]*[ -/]*[@-~]/g, "")
+      .replace(/\u001b[()][0-2A-Za-z]/g, "")
+      .replace(/\u001b[ -~]/g, "")
+      .replace(/\u001b[@-_]/g, "")
+      .replace(/\r\n/g, "\n")
+      .replace(/\r/g, "\n")
+      .replace(/\u0008/g, "")
+      .replace(/\n{3,}/g, "\n\n");
+  }
+
+  function cleanLegacyTerminalBuffer(value) {
+    const deviceReplyCount = (value.match(/0;276;0c1;2c/g) || []).length;
+    if (deviceReplyCount < 3) return value;
+    // Older Hub sessions persisted xterm's device replies as visible shell
+    // input. Their saved screen is not recoverable; new sessions are protected
+    // at the parser and PTY boundaries.
+    return "";
+  }
+
+  function suppressTerminalColorQueries(terminal) {
+    const parser = terminal.parser;
+    if (!parser || typeof parser.registerOscHandler !== "function") return;
+    for (const selector of [10, 11]) {
+      parser.registerOscHandler(selector, () => true);
+    }
+  }
+
+  function stripTerminalResponses(value) {
+    return value
+      // xterm.js emits these replies through its input event. They are
+      // terminal protocol, not operator input, and must not be written into
+      // Codeman's PTY where the shell would echo them as visible text.
+      .replace(/\u001b\](?:10|11);[^\u0007]*(?:\u0007|\u001b\\)/g, "")
+      .replace(/\u001b\[[?>=!]?[0-9;]*[cnt]/g, "");
+  }
+
+  function shortId(value) {
+    return String(value || "").slice(0, 8);
+  }
+
+  function StatusDot({ status }) {
+    return h("span", {
+      className: `status-dot status-dot--${status}`,
+      title: status,
+      "aria-label": status,
+    });
+  }
+
+  function StatusBadge({ status }) {
+    return h(
+      "span",
+      { className: `status-badge status-badge--${status}` },
+      h(StatusDot, { status }),
+      STATUS_LABELS[status] || status,
+    );
+  }
+
+  function EmptyState({ title, children, action }) {
+    return h(
+      "div",
+      { className: "empty-state" },
+      h("div", { className: "empty-state__icon", "aria-hidden": "true" }, "◇"),
+      h("h2", null, title),
+      children && h("p", null, children),
+      action,
+    );
+  }
+
+  function App() {
+    const [instances, setInstances] = useState([]);
+    const [sessions, setSessions] = useState([]);
+    const [terminalEvent, setTerminalEvent] = useState(null);
+    const [selectedInstanceId, setSelectedInstanceId] = useState(null);
+    const [selectedSessionKey, setSelectedSessionKey] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState("");
+    const [streamStatus, setStreamStatus] = useState("connecting");
+    const [showCreate, setShowCreate] = useState(false);
+    const [refreshing, setRefreshing] = useState(false);
+
+    const refresh = useCallback(async (quiet = false) => {
+      if (!quiet) setLoading(true);
+      else setRefreshing(true);
+      try {
+        const instanceData = await api("/api/instances");
+        const nextInstances = instanceData.instances || [];
+        const sessionResponses = await Promise.all(
+          nextInstances.map((instance) =>
+            api(`/api/instances/${encodeURIComponent(instance.id)}/sessions`),
+          ),
+        );
+        const nextSessions = sessionResponses.flatMap((result) => result.sessions || []);
+        setInstances(nextInstances);
+        setSessions(nextSessions);
+        setSelectedInstanceId((current) =>
+          current && nextInstances.some((instance) => instance.id === current)
+            ? current
+            : nextInstances[0]?.id || null,
+        );
+        setError("");
+      } catch (cause) {
+        setError(cause instanceof Error ? cause.message : "Unable to load fleet");
+      } finally {
+        setLoading(false);
+        setRefreshing(false);
+      }
+    }, []);
+
+    useEffect(() => {
+      void refresh();
+    }, [refresh]);
+
+    useEffect(() => {
+      const timer = setInterval(() => void refresh(true), 2000);
+      return () => clearInterval(timer);
+    }, [refresh]);
+
+    useEffect(() => {
+      const events = new EventSource("/api/events");
+      let refreshTimer = null;
+      const reload = () => {
+        if (refreshTimer !== null) return;
+        refreshTimer = setTimeout(() => {
+          refreshTimer = null;
+          void refresh(true);
+        }, 120);
+      };
+      events.addEventListener("open", () => setStreamStatus("live"));
+      events.addEventListener("snapshot", reload);
+      events.addEventListener("session", (message) => {
+        try {
+          const event = JSON.parse(message.data);
+          if (event.event === "output" && typeof event.data === "string") {
+            setTerminalEvent((current) => ({
+              ...event,
+              version: (current?.version || 0) + 1,
+            }));
+          }
+        } catch {
+          // The periodic refresh remains the recovery path for malformed events.
+        }
+        reload();
+      });
+      events.onerror = () => setStreamStatus("reconnecting");
+      return () => {
+        events.close();
+        if (refreshTimer !== null) clearTimeout(refreshTimer);
+      };
+    }, [refresh]);
+
+    const selectedInstance = instances.find((instance) => instance.id === selectedInstanceId) || null;
+    const selectedSession = sessions.find(
+      (session) => `${session.instanceId}/${session.id}` === selectedSessionKey,
+    ) || null;
+
+    useEffect(() => {
+      if (!selectedSessionKey && sessions[0]) {
+        setSelectedSessionKey(`${sessions[0].instanceId}/${sessions[0].id}`);
+      }
+      if (selectedSessionKey && !sessions.some(
+        (session) => `${session.instanceId}/${session.id}` === selectedSessionKey,
+      )) {
+        setSelectedSessionKey(null);
+      }
+    }, [sessions, selectedSessionKey]);
+
+    const sessionsByInstance = useMemo(() => {
+      const groups = new Map();
+      for (const instance of instances) groups.set(instance.id, []);
+      for (const session of sessions) {
+        if (!groups.has(session.instanceId)) groups.set(session.instanceId, []);
+        groups.get(session.instanceId).push(session);
+      }
+      return groups;
+    }, [instances, sessions]);
+
+    async function stopSession() {
+      if (!selectedSession || !selectedInstance) return;
+      try {
+        await api(
+          `/api/instances/${encodeURIComponent(selectedInstance.id)}/sessions/${encodeURIComponent(selectedSession.id)}/stop`,
+          { method: "POST" },
+        );
+        await refresh(true);
+      } catch (cause) {
+        setError(cause instanceof Error ? cause.message : "Unable to stop session");
+      }
+    }
+
+    async function removeSession() {
+      if (!selectedSession || !selectedInstance) return;
+      if (!TERMINAL_STATUSES.has(selectedSession.status)) return;
+      try {
+        await api(
+          `/api/instances/${encodeURIComponent(selectedInstance.id)}/sessions/${encodeURIComponent(selectedSession.id)}`,
+          { method: "DELETE" },
+        );
+        setSelectedSessionKey(null);
+        await refresh(true);
+      } catch (cause) {
+        setError(cause instanceof Error ? cause.message : "Unable to remove session");
+      }
+    }
+
+    return h(
+      "div",
+      { className: "app-shell" },
+      h(
+        "header",
+        { className: "topbar" },
+        h(
+          "div",
+          { className: "brand" },
+          h("span", { className: "brand__mark", "aria-hidden": "true" }, "✦"),
+          h("div", null, h("strong", null, "Codeman Fleet"), h("span", null, "Multi-host Hub")),
+        ),
+        h(
+          "div",
+          { className: "connection-state", "aria-live": "polite" },
+          h("span", { className: `connection-state__dot connection-state__dot--${streamStatus}` }),
+          streamStatus === "live" ? "Live updates" : "Reconnecting…",
+          refreshing && h("span", { className: "refresh-label" }, " · Refreshing"),
+        ),
+      ),
+      error && h(
+        "div",
+        { className: "alert", role: "alert" },
+        h("strong", null, "Couldn’t update the fleet"),
+        h("span", null, error),
+        h("button", { className: "button button--quiet", onClick: () => void refresh() }, "Try again"),
+      ),
+      h(
+        "div",
+        { className: "workspace-layout" },
+        h(
+          "aside",
+          { className: "sidebar", "aria-label": "Fleet instances and sessions" },
+          h(
+            "div",
+            { className: "sidebar__heading" },
+            h("div", null, h("span", { className: "eyebrow" }, "Fleet"), h("h1", null, "Instances")),
+            h(
+              "span",
+              { className: "count-pill", "aria-label": `${instances.length} instances` },
+              instances.length,
+            ),
+          ),
+          loading
+            ? h("div", { className: "skeleton-list", "aria-label": "Loading instances" }, h("span"), h("span"), h("span"))
+            : instances.length === 0
+              ? h(EmptyState, { title: "No instances yet" }, "Connect a Codeman host to see it here.")
+              : h(
+                "nav",
+                { className: "instance-list" },
+                instances.map((instance) => h(
+                  "div",
+                  { className: "instance-group", key: instance.id },
+                  h(
+                    "button",
+                    {
+                      className: `instance-card ${selectedInstanceId === instance.id ? "instance-card--selected" : ""}`,
+                      onClick: () => setSelectedInstanceId(instance.id),
+                      "aria-pressed": selectedInstanceId === instance.id,
+                    },
+                    h(StatusDot, { status: instance.status }),
+                    h(
+                      "span",
+                      { className: "instance-card__copy" },
+                      h("strong", null, instance.label),
+                      h("small", null, `${(sessionsByInstance.get(instance.id) || []).length} sessions`),
+                    ),
+                    h("span", { className: "instance-card__chevron", "aria-hidden": "true" }, "›"),
+                  ),
+                  (sessionsByInstance.get(instance.id) || []).map((session) => h(
+                    "button",
+                    {
+                      className: `session-row ${selectedSessionKey === `${session.instanceId}/${session.id}` ? "session-row--selected" : ""}`,
+                      key: session.id,
+                      onClick: () => {
+                        setSelectedInstanceId(instance.id);
+                        setSelectedSessionKey(`${session.instanceId}/${session.id}`);
+                      },
+                    },
+                    h("span", { className: `session-row__indicator session-row__indicator--${session.status}` }),
+                    h(
+                      "span",
+                      { className: "session-row__copy" },
+                      h("strong", null, session.title),
+                      h("small", null, `${session.agent.name} · ${shortId(session.id)} · ${STATUS_LABELS[session.status] || session.status}`),
+                    ),
+                    session.needsInput && h("span", { className: "needs-input-dot", title: "Needs input" }),
+                  )),
+                )),
+              ),
+          h(
+            "div",
+            { className: "sidebar__footer" },
+            h("span", null, `${instances.filter((instance) => instance.status === "online").length} online`),
+            h("span", null, `${sessions.length} total sessions`),
+          ),
+        ),
+        h(
+          "main",
+          { className: "main-content" },
+          selectedSession
+            ? h(
+              SessionDetail,
+              {
+                key: selectedSessionKey,
+                instance: instances.find((instance) => instance.id === selectedSession.instanceId),
+                session: selectedSession,
+                terminalEvent,
+                onStop: stopSession,
+                onRemove: removeSession,
+                onNewSession: () => setShowCreate(true),
+                setError,
+              },
+            )
+            : h(
+              "section",
+              { className: "welcome-panel" },
+              h(
+                "div",
+                { className: "welcome-panel__content" },
+                h("span", { className: "eyebrow" }, "Control plane"),
+                h("h2", null, "Operate every Codeman host from one place."),
+                h("p", null, "Choose an instance to inspect its work, or start a new session in a ready workspace."),
+                h(
+                  "button",
+                  {
+                    className: "button button--primary",
+                    onClick: () => setShowCreate(true),
+                    disabled: !selectedInstance,
+                  },
+                  "Start a session",
+                ),
+              ),
+              h("div", { className: "welcome-panel__orb", "aria-hidden": "true" }, "✦"),
+            ),
+          selectedInstance && !selectedSession && h(
+            "section",
+            { className: "instance-overview" },
+            h("span", { className: "eyebrow" }, "Selected instance"),
+            h("div", { className: "instance-overview__title" }, h("h2", null, selectedInstance.label), h(StatusBadge, { status: selectedInstance.status })),
+            h("p", null, selectedInstance.endpoint || "Connected through worker connector"),
+            h(
+              "div",
+              { className: "overview-grid" },
+              h("div", null, h("span", null, "Workspaces"), h("strong", null, selectedInstance.workspaces.length)),
+              h("div", null, h("span", null, "Agents ready"), h("strong", null, selectedInstance.agents.filter((agent) => agent.ready).length)),
+              h("div", null, h("span", null, "Last seen"), h("strong", null, formatTime(selectedInstance.lastSeenAt))),
+            ),
+            h(
+              "div",
+              { className: "overview-actions" },
+              h(
+                "button",
+                {
+                  className: "button button--quiet",
+                  onClick: () => {
+                    if (selectedInstance.connectionMode === "tailscale-url") {
+                      window.location.assign(
+                        `/api/fleet/select/${encodeURIComponent(selectedInstance.id)}`,
+                      );
+                    }
+                  },
+                  disabled: selectedInstance.connectionMode !== "tailscale-url",
+                  title: selectedInstance.connectionMode === "tailscale-url"
+                    ? "Open Codeman's native UI for this host. Use Fleet dashboard in the top bar to return."
+                    : "Native Codeman UI requires a Tailscale Codeman host",
+                },
+                "Open Codeman UI",
+              ),
+              h(
+                "button",
+                { className: "button button--quiet", onClick: async () => {
+                  try {
+                    await api(`/api/instances/${encodeURIComponent(selectedInstance.id)}/health`, { method: "POST" });
+                    await refresh(true);
+                  } catch (cause) {
+                    setError(cause instanceof Error ? cause.message : "Unable to check instance health");
+                  }
+                } },
+                "Check health",
+              ),
+              h(
+                "button",
+                { className: "button button--primary", onClick: () => setShowCreate(true), disabled: selectedInstance.status !== "online" },
+                selectedInstance.status === "online" ? "Start a session" : "Instance unavailable",
+              ),
+            ),
+          ),
+        ),
+      ),
+      showCreate && h(
+        CreateSessionDialog,
+        {
+          instances,
+          preferredInstanceId: selectedInstanceId,
+          onClose: () => setShowCreate(false),
+          onCreated: async (session) => {
+            setShowCreate(false);
+            setSelectedInstanceId(session.instanceId);
+            await refresh(true);
+            setSelectedSessionKey(`${session.instanceId}/${session.id}`);
+          },
+          setError,
+        },
+      ),
+    );
+  }
+
+  function SessionDetail({ instance, session, terminalEvent, onStop, onRemove, onNewSession, setError }) {
+    const terminalHostRef = useRef(null);
+    const terminalRef = useRef(null);
+    const inputQueueRef = useRef(Promise.resolve());
+    const pendingInputRef = useRef("");
+    const inputFlushTimerRef = useRef(null);
+    const resizeQueueRef = useRef(Promise.resolve());
+    const terminalSizeRef = useRef("");
+    const lastWrittenEventVersionRef = useRef(0);
+    const renderedTerminalBufferRef = useRef("");
+    const canInteract = instance && !TERMINAL_STATUSES.has(session.status);
+    const workspace = instance?.workspaces.find((item) => item.id === session.workspaceId);
+
+    const localEchoRef = useRef("");
+
+    const flushTerminalInput = useCallback(() => {
+      if (inputFlushTimerRef.current !== null) {
+        clearTimeout(inputFlushTimerRef.current);
+        inputFlushTimerRef.current = null;
+      }
+      const value = pendingInputRef.current;
+      pendingInputRef.current = "";
+      if (!value || !instance || !canInteract) return;
+      inputQueueRef.current = inputQueueRef.current
+        .catch(() => undefined)
+        .then(async () => {
+          const raw = /[^\u0020-\u007e\r]/.test(value) || !value.endsWith("\r");
+          await api(
+            `/api/instances/${encodeURIComponent(instance.id)}/sessions/${encodeURIComponent(session.id)}/input`,
+            { method: "POST", body: { input: value, raw } },
+          );
+        })
+        .catch((cause) => setError(cause instanceof Error ? cause.message : "Unable to send terminal input"));
+    }, [canInteract, instance?.id, session.id, setError]);
+
+    const writeLocalEcho = useCallback((value) => {
+      const terminal = terminalRef.current;
+      if (!terminal || !value) return;
+      // Echo printable text immediately so the UI tracks keystrokes without
+      // waiting on the network. Control keys are left to the remote PTY/TUI.
+      if (!/^[\u0020-\u007e]+$/.test(value)) return;
+      terminal.write(value);
+      localEchoRef.current += value;
+      if (localEchoRef.current.length > 4000) {
+        localEchoRef.current = localEchoRef.current.slice(-2000);
+      }
+    }, []);
+
+    const consumeRemoteEcho = useCallback((chunk) => {
+      if (!chunk || !localEchoRef.current) return chunk;
+      let remaining = chunk;
+      let pending = localEchoRef.current;
+      while (pending && remaining) {
+        if (remaining.startsWith(pending)) {
+          remaining = remaining.slice(pending.length);
+          pending = "";
+          break;
+        }
+        if (pending.startsWith(remaining)) {
+          pending = pending.slice(remaining.length);
+          remaining = "";
+          break;
+        }
+        // Divergence: drop one local-echo character and keep reconciling.
+        pending = pending.slice(1);
+      }
+      localEchoRef.current = pending;
+      return remaining;
+    }, []);
+
+    const sendTerminalInput = useCallback((value) => {
+      if (!value || !instance || !canInteract) return;
+      writeLocalEcho(value);
+      pendingInputRef.current += value;
+      // Printable typing is coalesced into one request. Control sequences
+      // must remain immediate so Ctrl-C, Enter, arrows, and escape-driven
+      // TUIs retain Codeman-like responsiveness.
+      if (/[\u0000-\u001f\u007f\u001b]/.test(value)) {
+        flushTerminalInput();
+        return;
+      }
+      if (inputFlushTimerRef.current === null) {
+        inputFlushTimerRef.current = setTimeout(flushTerminalInput, 32);
+      }
+    }, [canInteract, flushTerminalInput, instance?.id, writeLocalEcho]);
+
+    const sendTerminalResize = useCallback((cols, rows) => {
+      if (!instance || !canInteract || !Number.isInteger(cols) || !Number.isInteger(rows)) return;
+      const size = `${cols}x${rows}`;
+      if (terminalSizeRef.current === size) return;
+      terminalSizeRef.current = size;
+      resizeQueueRef.current = resizeQueueRef.current
+        .catch(() => undefined)
+        .then(async () => {
+          await api(
+            `/api/instances/${encodeURIComponent(instance.id)}/sessions/${encodeURIComponent(session.id)}/resize`,
+            { method: "POST", body: { cols, rows } },
+          );
+        })
+        .catch((cause) => setError(cause instanceof Error ? cause.message : "Unable to resize terminal"));
+    }, [canInteract, instance?.id, session.id, setError]);
+
+    useEffect(() => {
+      const TerminalConstructor = globalThis.Terminal;
+      if (!terminalHostRef.current || typeof TerminalConstructor !== "function") return undefined;
+      const terminal = new TerminalConstructor({
+        allowProposedApi: true,
+        convertEol: true,
+        disableStdin: !canInteract,
+        cursorBlink: false,
+        fontFamily: "ui-monospace, SFMono-Regular, Consolas, monospace",
+        fontSize: 13,
+        lineHeight: 1.35,
+        scrollback: 5000,
+        theme: TERMINAL_THEME,
+      });
+      suppressTerminalColorQueries(terminal);
+      const FitAddonConstructor = globalThis.FitAddon?.FitAddon;
+      const fitAddon = typeof FitAddonConstructor === "function"
+        ? new FitAddonConstructor()
+        : null;
+      if (fitAddon) terminal.loadAddon(fitAddon);
+      terminal.open(terminalHostRef.current);
+      const fitTerminal = () => {
+        fitAddon?.fit();
+        sendTerminalResize(terminal.cols, terminal.rows);
+        terminal.scrollToBottom();
+      };
+      fitTerminal();
+      const resizeObserver = typeof ResizeObserver === "function"
+        ? new ResizeObserver(fitTerminal)
+        : null;
+      resizeObserver?.observe(terminalHostRef.current);
+      if (canInteract) {
+        terminal.onData((data) => sendTerminalInput(stripTerminalResponses(data)));
+      }
+      terminalRef.current = terminal;
+      return () => {
+        resizeObserver?.disconnect();
+        if (inputFlushTimerRef.current !== null) {
+          clearTimeout(inputFlushTimerRef.current);
+          inputFlushTimerRef.current = null;
+        }
+        pendingInputRef.current = "";
+        localEchoRef.current = "";
+        terminal.dispose();
+        terminalRef.current = null;
+      };
+    }, [canInteract, sendTerminalInput, sendTerminalResize]);
+
+    useEffect(() => {
+      const terminal = terminalRef.current;
+      if (!terminal) return;
+      const terminalBuffer = cleanLegacyTerminalBuffer(session.terminalBuffer);
+      const renderedBuffer = renderedTerminalBufferRef.current;
+      if (terminalBuffer === renderedBuffer) return;
+      if (terminalBuffer && renderedBuffer && terminalBuffer.startsWith(renderedBuffer)) {
+        const delta = consumeRemoteEcho(terminalBuffer.slice(renderedBuffer.length));
+        if (delta) terminal.write(delta);
+      } else {
+        localEchoRef.current = "";
+        terminal.reset();
+        if (terminalBuffer) terminal.write(terminalBuffer);
+        else if (session.terminalBuffer) terminal.writeln("This legacy session has corrupted terminal output. Start a new session.");
+        else terminal.writeln("Waiting for terminal output…");
+      }
+      renderedTerminalBufferRef.current = terminalBuffer;
+      lastWrittenEventVersionRef.current = terminalEvent?.version || 0;
+      terminal.scrollToBottom();
+    }, [canInteract, consumeRemoteEcho, session.id, session.terminalBuffer]);
+
+    useEffect(() => {
+      const terminal = terminalRef.current;
+      if (
+        !terminal
+        || !terminalEvent
+        || terminalEvent.instanceId !== session.instanceId
+        || terminalEvent.sessionId !== session.id
+        || terminalEvent.version <= lastWrittenEventVersionRef.current
+      ) {
+        return;
+      }
+      const delta = consumeRemoteEcho(terminalEvent.data);
+      if (delta) terminal.write(delta);
+      renderedTerminalBufferRef.current += terminalEvent.data;
+      terminal.scrollToBottom();
+      lastWrittenEventVersionRef.current = terminalEvent.version;
+    }, [consumeRemoteEcho, session.id, session.instanceId, terminalEvent]);
+
+    return h(
+      "section",
+      { className: "session-detail" },
+      h(
+        "div",
+        { className: "session-detail__header" },
+        h(
+          "div",
+          null,
+          h("span", { className: "breadcrumb" }, instance?.label || "Unknown instance", " / ", workspace?.name || session.workspaceId),
+          h("h2", null, session.title),
+        h("div", { className: "session-meta" },
+          h(StatusBadge, { status: session.status }),
+          h("span", null, session.agent.name),
+          h("span", { className: "session-id", title: session.id }, `Session ${shortId(session.id)}`),
+          h("span", null, `Updated ${formatTime(session.lastEventAt)}`),
+        ),
+        ),
+        h("div", { className: "session-detail__actions" },
+          h(
+            "button",
+            { className: "button button--quiet", onClick: onNewSession, disabled: !instance || instance.status !== "online" },
+            "New session",
+          ),
+          h(
+            "button",
+            {
+              className: `button ${canInteract ? "button--danger" : "button--quiet"}`,
+              onClick: canInteract ? onStop : onRemove,
+              disabled: !canInteract && !TERMINAL_STATUSES.has(session.status),
+            },
+            canInteract ? "Stop session" : "Remove session",
+          ),
+        ),
+      ),
+      h(
+        "div",
+        { className: "terminal", "aria-label": "Session terminal output" },
+        h("div", { className: "terminal__bar" }, h("span", null, "OUTPUT"), h("span", null, session.id)),
+      h("div", {
+        ref: terminalHostRef,
+        className: "terminal__output",
+        onMouseDown: () => terminalRef.current?.focus(),
+      },
+          !globalThis.Terminal && (
+            normalizeTerminalText(session.terminalBuffer)
+              || h("span", { className: "terminal__placeholder" }, "Waiting for terminal output…")
+          ),
+        ),
+      ),
+    );
+  }
+
+  function CreateSessionDialog({ instances, preferredInstanceId, onClose, onCreated, setError }) {
+    const [instanceId, setInstanceId] = useState(preferredInstanceId || instances[0]?.id || "");
+    const instance = instances.find((item) => item.id === instanceId);
+    const readyWorkspaces = (instance?.workspaces || []).filter((workspace) => workspace.health === "ready");
+    const allAgents = instance?.agents || [];
+    const readyAgents = allAgents.filter((agent) => agent.ready);
+    const [workspaceSource, setWorkspaceSource] = useState("workspace");
+    const [workspaceId, setWorkspaceId] = useState(readyWorkspaces[0]?.id || "");
+    const [workspacePath, setWorkspacePath] = useState("");
+    const [pathSuggestions, setPathSuggestions] = useState([]);
+    const [activeSuggestion, setActiveSuggestion] = useState(-1);
+    const [suggesting, setSuggesting] = useState(false);
+    const [suggestionError, setSuggestionError] = useState("");
+    const [agentId, setAgentId] = useState(readyAgents[0]?.id || "");
+    const [title, setTitle] = useState("");
+    const [creating, setCreating] = useState(false);
+
+    useEffect(() => {
+      const nextWorkspaces = (instance?.workspaces || []).filter((workspace) => workspace.health === "ready");
+      const nextAgents = (instance?.agents || []).filter((agent) => agent.ready);
+      setWorkspaceSource("workspace");
+      setWorkspaceId(nextWorkspaces[0]?.id || "");
+      setWorkspacePath("");
+      setPathSuggestions([]);
+      setActiveSuggestion(-1);
+      setSuggestionError("");
+      setAgentId(nextAgents[0]?.id || "");
+    }, [instanceId]);
+
+    useEffect(() => {
+      if (workspaceSource !== "path" || !instance?.workspacePolicy) {
+        setPathSuggestions([]);
+        setSuggesting(false);
+        setSuggestionError("");
+        return undefined;
+      }
+      const controller = new AbortController();
+      const timer = setTimeout(async () => {
+        setSuggesting(true);
+        setSuggestionError("");
+        try {
+          const result = await api(
+            `/api/instances/${encodeURIComponent(instance.id)}/workspaces/suggestions?path=${encodeURIComponent(workspacePath)}`,
+            { signal: controller.signal },
+          );
+          setPathSuggestions(Array.isArray(result.suggestions) ? result.suggestions : []);
+          setActiveSuggestion(-1);
+        } catch (cause) {
+          if (cause?.name !== "AbortError") {
+            setPathSuggestions([]);
+            setSuggestionError(cause instanceof Error ? cause.message : "Unable to suggest paths");
+          }
+        } finally {
+          if (!controller.signal.aborted) setSuggesting(false);
+        }
+      }, 180);
+      return () => {
+        controller.abort();
+        clearTimeout(timer);
+      };
+    }, [instance?.id, workspacePath, workspaceSource]);
+
+    function choosePath(path) {
+      setWorkspacePath(path);
+      setActiveSuggestion(-1);
+      setSuggestionError("");
+    }
+
+    function handlePathKeyDown(event) {
+      if (!pathSuggestions.length) return;
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setActiveSuggestion((current) => (current + 1) % pathSuggestions.length);
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setActiveSuggestion((current) => (current <= 0 ? pathSuggestions.length - 1 : current - 1));
+      } else if (event.key === "Enter" && activeSuggestion >= 0) {
+        event.preventDefault();
+        choosePath(pathSuggestions[activeSuggestion].path);
+      } else if (event.key === "Escape") {
+        setActiveSuggestion(-1);
+      }
+    }
+
+    async function createSession(event) {
+      event.preventDefault();
+      const path = workspacePath.trim();
+      if (!instance || (!workspaceId && workspaceSource === "workspace") || (!path && workspaceSource === "path") || !agentId) return;
+      setCreating(true);
+      try {
+        const result = await api(`/api/instances/${encodeURIComponent(instance.id)}/sessions`, {
+          method: "POST",
+          body: {
+            agentId,
+            ...(workspaceSource === "path" ? { workspacePath: path } : { workspaceId }),
+            ...(title.trim() ? { title: title.trim() } : {}),
+          },
+        });
+        onCreated(result.session);
+      } catch (cause) {
+        setError(cause instanceof Error ? cause.message : "Unable to create session");
+      } finally {
+        setCreating(false);
+      }
+    }
+
+    return h(
+      "div",
+      { className: "dialog-backdrop", role: "presentation", onMouseDown: (event) => event.target === event.currentTarget && onClose() },
+      h(
+        "section",
+        { className: "dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": "create-session-title" },
+        h(
+          "div",
+          { className: "dialog__header" },
+          h("div", null, h("span", { className: "eyebrow" }, "New work"), h("h2", { id: "create-session-title" }, "Start a session")),
+          h("button", { className: "icon-button", onClick: onClose, "aria-label": "Close dialog" }, "×"),
+        ),
+        h(
+          "form",
+          { onSubmit: createSession },
+          h(
+            "label",
+            { className: "field" },
+            h("span", null, "Instance"),
+            h(
+              "select",
+              { value: instanceId, onChange: (event) => setInstanceId(event.target.value), required: true },
+              instances.map((item) => h("option", { value: item.id, key: item.id }, item.label)),
+            ),
+            instance && h("small", null, h(StatusBadge, { status: instance.status })),
+          ),
+          h(
+            "label",
+            { className: "field" },
+            h("span", null, "Workspace source"),
+            h(
+              "select",
+              { value: workspaceSource, onChange: (event) => setWorkspaceSource(event.target.value), required: true },
+              h("option", { value: "workspace" }, "Known workspace"),
+              h("option", { value: "path", disabled: !instance?.workspacePolicy }, "Enter a path (policy required)"),
+            ),
+          ),
+          workspaceSource === "workspace"
+            ? h(
+              "label",
+              { className: "field" },
+              h("span", null, "Workspace"),
+              h(
+                "select",
+                { value: workspaceId, onChange: (event) => setWorkspaceId(event.target.value), required: true, disabled: readyWorkspaces.length === 0 },
+                readyWorkspaces.length
+                  ? readyWorkspaces.map((workspace) => h("option", { value: workspace.id, key: `${workspace.id}:${workspace.canonicalPath}` }, workspace.name))
+                  : h("option", { value: "" }, "No ready workspaces"),
+              ),
+              workspaceId && h("small", null, readyWorkspaces.find((workspace) => workspace.id === workspaceId)?.canonicalPath),
+            )
+            : h(
+              "label",
+              { className: "field" },
+              h("span", null, "Workspace path"),
+              h(
+                "div",
+                { className: "path-picker" },
+                h("input", {
+                  value: workspacePath,
+                  onChange: (event) => {
+                    setWorkspacePath(event.target.value);
+                    setActiveSuggestion(-1);
+                  },
+                  onKeyDown: handlePathKeyDown,
+                  placeholder: instance?.workspacePolicy?.mode === "system" ? "/home/user/project" : "/approved/root/project",
+                  required: true,
+                  role: "combobox",
+                  "aria-autocomplete": "list",
+                  "aria-expanded": pathSuggestions.length > 0,
+                  "aria-controls": "workspace-path-suggestions",
+                }),
+                suggesting && h("small", { className: "path-picker__status" }, "Finding folders…"),
+                suggestionError && h("small", { className: "path-picker__error" }, suggestionError),
+                pathSuggestions.length > 0 && h(
+                  "div",
+                  { id: "workspace-path-suggestions", className: "path-picker__suggestions", role: "listbox" },
+                  pathSuggestions.map((suggestion, index) => h(
+                    "button",
+                    {
+                      type: "button",
+                      className: `path-picker__suggestion${index === activeSuggestion ? " path-picker__suggestion--active" : ""}`,
+                      role: "option",
+                      "aria-selected": index === activeSuggestion,
+                      key: suggestion.path,
+                      onMouseDown: (event) => event.preventDefault(),
+                      onClick: () => choosePath(suggestion.path),
+                    },
+                    h("strong", null, suggestion.name),
+                    h("small", null, suggestion.path),
+                  )),
+                ),
+              ),
+              h("small", null, instance?.workspacePolicy?.mode === "system"
+                ? "System access is enabled for this instance."
+                : `Must exist on that host and stay inside: ${(instance?.workspacePolicy?.roots || []).join(", ") || "approved folders"}.`),
+            ),
+          h(
+            "label",
+            { className: "field" },
+            h("span", null, "Agent"),
+            h(
+              "select",
+              { value: agentId, onChange: (event) => setAgentId(event.target.value), required: true, disabled: readyAgents.length === 0 },
+              readyAgents.length
+                ? allAgents.map((agent) => h(
+                  "option",
+                  { value: agent.id, key: agent.id, disabled: !agent.ready },
+                  agent.ready ? agent.name : `${agent.name} (not ready)`,
+                ))
+                : h("option", { value: "" }, "No ready agents"),
+            ),
+          ),
+          !readyAgents.length && allAgents.length > 0
+            && h("small", null, "Install and authenticate a provider CLI on this Worker before starting a session."),
+          h(
+            "label",
+            { className: "field" },
+            h("span", null, "Session name <em>optional</em>"),
+            h("input", { value: title, onChange: (event) => setTitle(event.target.value), placeholder: "e.g. Fix the auth flow", maxLength: 120 }),
+          ),
+          h(
+            "div",
+            { className: "dialog__actions" },
+            h("button", { className: "button button--quiet", type: "button", onClick: onClose }, "Cancel"),
+            h("button", {
+              className: "button button--primary",
+              type: "submit",
+              disabled: creating
+                || !instance
+                || instance.status !== "online"
+                || (workspaceSource === "workspace" ? !workspaceId : !workspacePath.trim())
+                || !agentId,
+            }, creating ? "Starting…" : "Start session"),
+          ),
+        ),
+      ),
+    );
+  }
+
+  ReactDOM.createRoot(document.getElementById("root")).render(h(App));
+})();

package/dist/public/fleet-host-switcher.js

@@ -0,0 +1,76 @@
+(() => {
+  "use strict";
+
+  const bar = document.createElement("div");
+  bar.id = "hosted-agents-fleet-bar";
+  bar.style.cssText = [
+    "position:fixed",
+    "top:0",
+    "left:0",
+    "right:0",
+    "z-index:2147483647",
+    "display:flex",
+    "align-items:center",
+    "gap:10px",
+    "height:36px",
+    "padding:0 12px",
+    "box-sizing:border-box",
+    "background:#101722",
+    "border-bottom:1px solid #2b384b",
+    "color:#d7dee7",
+    "font:13px system-ui,sans-serif",
+  ].join(";");
+  const label = document.createElement("strong");
+  label.textContent = "Hosted Agents";
+  const select = document.createElement("select");
+  select.setAttribute("aria-label", "Codeman host");
+  select.style.cssText = [
+    "min-width:190px",
+    "padding:4px 8px",
+    "border:1px solid #405069",
+    "border-radius:6px",
+    "background:#090c10",
+    "color:#d7dee7",
+  ].join(";");
+  select.addEventListener("change", () => {
+    if (select.value) window.location.assign(`/api/fleet/select/${encodeURIComponent(select.value)}`);
+  });
+  const back = document.createElement("a");
+  back.href = "/api/fleet/clear";
+  back.textContent = "Fleet dashboard";
+  back.style.cssText = [
+    "margin-left:auto",
+    "color:#9ec1ff",
+    "text-decoration:none",
+    "white-space:nowrap",
+  ].join(";");
+  bar.append(label, select, back);
+  document.body.prepend(bar);
+  document.documentElement.style.paddingTop = "36px";
+
+  fetch("/api/instances", { headers: { accept: "application/json" } })
+    .then((response) => response.ok ? response.json() : Promise.reject(new Error("Unable to load hosts")))
+    .then((payload) => {
+      const instances = Array.isArray(payload.instances) ? payload.instances : [];
+      return fetch("/api/fleet/current")
+        .then((response) => response.json())
+        .then((current) => ({ instances, current }));
+    })
+    .then(({ instances, current }) => {
+      for (const instance of instances) {
+        const option = document.createElement("option");
+        option.value = String(instance.id);
+        option.textContent = `${instance.label} · ${instance.status}`;
+        option.selected = instance.id === current.instanceId;
+        select.append(option);
+      }
+      if (instances.length === 0) {
+        select.disabled = true;
+        select.title = "No Codeman hosts are registered";
+      }
+    })
+    .catch(() => {
+      select.disabled = true;
+      select.title = "Unable to load Codeman hosts";
+    });
+})();

package/dist/public/index.html

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#10141c">
+    <title>Codeman Fleet</title>
+    <link rel="stylesheet" href="https://unpkg.com/xterm@5.3.0/css/xterm.css">
+    <link rel="stylesheet" href="/styles.css">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script crossorigin src="https://unpkg.com/react@18.3.1/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/xterm@5.3.0/lib/xterm.js"></script>
+    <script crossorigin src="https://unpkg.com/xterm-addon-fit@0.8.0/lib/xterm-addon-fit.js"></script>
+    <script src="/app.js"></script>
+  </body>
+</html>

package/dist/public/styles.css

@@ -0,0 +1,190 @@
+:root {
+  color-scheme: dark;
+  --bg: #0c0f14;
+  --panel: #121720;
+  --panel-raised: #171e2a;
+  --panel-hover: #1b2533;
+  --line: #273140;
+  --text: #eef2f7;
+  --muted: #8d9aad;
+  --subtle: #5f6c7d;
+  --accent: #a7f3d0;
+  --accent-strong: #39d98a;
+  --danger: #ff8b8b;
+  --warning: #f5c76b;
+  --shadow: 0 20px 60px rgb(0 0 0 / 25%);
+  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  background: var(--bg);
+  color: var(--text);
+}
+
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; background: var(--bg); }
+button, input, select { font: inherit; }
+button { cursor: pointer; }
+button:disabled, input:disabled, select:disabled { cursor: not-allowed; opacity: .5; }
+
+.app-shell { min-height: 100vh; }
+.topbar {
+  display: flex; align-items: center; justify-content: space-between; gap: 24px;
+  height: 72px; padding: 0 28px; border-bottom: 1px solid var(--line);
+  background: rgb(12 15 20 / 88%); backdrop-filter: blur(16px); position: sticky; top: 0; z-index: 3;
+}
+.brand { display: flex; align-items: center; gap: 12px; letter-spacing: -.02em; }
+.brand__mark {
+  display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #32634d;
+  border-radius: 10px; color: var(--accent); background: #123126; font-size: 17px;
+}
+.brand strong, .brand span { display: block; }
+.brand strong { font-size: 15px; }
+.brand span { margin-top: 3px; color: var(--muted); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
+.connection-state { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 7px; }
+.connection-state__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); }
+.connection-state__dot--live { background: var(--accent-strong); box-shadow: 0 0 0 4px #39d98a20; }
+.connection-state__dot--reconnecting { animation: pulse 1.5s infinite; }
+.refresh-label { color: var(--subtle); }
+.alert {
+  display: flex; align-items: center; gap: 14px; padding: 11px 28px; border-bottom: 1px solid #683d46;
+  background: #351c25; color: #ffd9dc; font-size: 13px;
+}
+.alert strong { white-space: nowrap; }
+.alert span { color: #eaaeb5; overflow: hidden; text-overflow: ellipsis; }
+.alert .button { margin-left: auto; }
+
+.workspace-layout { display: grid; grid-template-columns: 304px minmax(0, 1fr); min-height: calc(100vh - 72px); }
+.sidebar { display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #0f131a; min-width: 0; }
+.sidebar__heading { display: flex; align-items: end; justify-content: space-between; padding: 28px 20px 15px; }
+.eyebrow { display: block; color: var(--accent-strong); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
+h1, h2, p { margin: 0; }
+.sidebar h1 { margin-top: 6px; font-size: 21px; letter-spacing: -.04em; }
+.count-pill { display: grid; place-items: center; min-width: 25px; height: 25px; padding: 0 7px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; }
+.instance-list { padding: 0 10px; overflow: auto; }
+.instance-group { margin-bottom: 7px; }
+.instance-card, .session-row {
+  width: 100%; border: 0; color: var(--text); text-align: left; background: transparent;
+}
+.instance-card {
+  display: flex; align-items: center; gap: 10px; padding: 11px 10px; border-radius: 9px;
+}
+.instance-card:hover, .instance-card--selected { background: var(--panel-raised); }
+.instance-card--selected { box-shadow: inset 2px 0 var(--accent-strong); }
+.instance-card__copy, .session-row__copy { min-width: 0; flex: 1; }
+.instance-card strong, .session-row strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.instance-card small, .session-row small { display: block; margin-top: 4px; color: var(--subtle); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.instance-card__chevron { color: var(--subtle); font-size: 21px; line-height: 1; }
+.status-dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--subtle); }
+.status-dot--online, .status-dot--working { background: var(--accent-strong); }
+.status-dot--offline, .status-dot--stopped { background: var(--subtle); }
+.status-dot--unhealthy, .status-dot--waiting { background: var(--warning); }
+.status-dot--revoked, .status-dot--failed { background: var(--danger); }
+.session-row {
+  display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 29px; color: var(--muted); border-radius: 7px;
+}
+.session-row:hover, .session-row--selected { color: var(--text); background: #18202c; }
+.session-row__indicator { width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: var(--subtle); }
+.session-row__indicator--working { background: var(--accent-strong); }
+.session-row__indicator--waiting { background: var(--warning); }
+.session-row__indicator--failed { background: var(--danger); }
+.needs-input-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px #f5c76b18; }
+.sidebar__footer { display: flex; justify-content: space-between; gap: 10px; padding: 15px 20px; margin-top: auto; border-top: 1px solid var(--line); color: var(--subtle); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
+.skeleton-list { padding: 5px 20px; }
+.skeleton-list span { display: block; height: 51px; margin-bottom: 7px; border-radius: 9px; background: linear-gradient(90deg, #151b24, #202936, #151b24); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
+.empty-state { display: grid; justify-items: center; gap: 7px; padding: 36px 20px; text-align: center; }
+.empty-state__icon { color: var(--accent); font-size: 23px; }
+.empty-state h2 { font-size: 14px; }
+.empty-state p { max-width: 210px; color: var(--muted); font-size: 12px; line-height: 1.5; }
+
+.main-content { min-width: 0; padding: 40px clamp(22px, 5vw, 80px); background: radial-gradient(circle at 85% 15%, #17262a55, transparent 34%), var(--bg); }
+.welcome-panel, .instance-overview { max-width: 900px; margin: 8vh auto 0; }
+.welcome-panel { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 320px; padding: clamp(28px, 6vw, 68px); border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(130deg, #151c27, #10151d); box-shadow: var(--shadow); overflow: hidden; }
+.welcome-panel__content { max-width: 540px; position: relative; z-index: 1; }
+.welcome-panel h2 { margin: 12px 0 14px; max-width: 480px; font-size: clamp(28px, 4vw, 46px); line-height: 1.03; letter-spacing: -.06em; }
+.welcome-panel p { max-width: 490px; color: var(--muted); font-size: 15px; line-height: 1.65; }
+.welcome-panel .button { margin-top: 28px; }
+.welcome-panel__orb { display: grid; place-items: center; width: 200px; height: 200px; border: 1px solid #3e7f61; border-radius: 50%; color: var(--accent); background: radial-gradient(circle, #27533f, #15291f 57%, transparent 58%); box-shadow: 0 0 80px #42d28d22; font-size: 38px; opacity: .8; }
+.instance-overview { padding: 30px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
+.instance-overview__title { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
+.instance-overview h2 { font-size: 25px; letter-spacing: -.04em; }
+.instance-overview > p { margin-top: 10px; color: var(--muted); font-family: ui-monospace, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
+.overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px 0; }
+.overview-grid div { padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: #0e131a; }
+.overview-grid span, .overview-grid strong { display: block; }
+.overview-grid span { color: var(--subtle); font-size: 11px; }
+.overview-grid strong { margin-top: 5px; font-size: 16px; }
+.overview-actions { display: flex; flex-wrap: wrap; gap: 9px; }
+
+.session-detail { max-width: 1100px; margin: 0 auto; }
+.session-detail__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
+.session-detail__actions { display: flex; flex-wrap: wrap; gap: 9px; }
+.breadcrumb { display: block; color: var(--subtle); font-size: 12px; }
+.session-detail h2 { margin-top: 9px; font-size: clamp(23px, 3vw, 32px); letter-spacing: -.05em; }
+.session-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 12px; color: var(--muted); font-size: 12px; }
+.session-id { color: var(--subtle); font-family: ui-monospace, monospace; }
+.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 11px; }
+.status-badge--online, .status-badge--working { border-color: #32634d; color: var(--accent); }
+.status-badge--waiting { border-color: #6e5c31; color: var(--warning); }
+.status-badge--failed { border-color: #6e3943; color: var(--danger); }
+.terminal { height: min(68vh, 720px); min-height: 420px; display: flex; flex-direction: column; border: 1px solid #303b4a; border-radius: 12px; background: #090c10; box-shadow: var(--shadow); overflow: hidden; }
+.terminal__bar { display: flex; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid #202a36; color: var(--subtle); font-family: ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; }
+.terminal__output { flex: 1; min-height: 0; margin: 0; padding: 14px; color: #c7f9de; font: 13px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; }
+.terminal__output .xterm { height: 100%; padding: 10px 12px 0; }
+.terminal__output .xterm-viewport { overflow-y: auto !important; }
+.terminal__placeholder { color: var(--subtle); }
+
+.button { border: 1px solid transparent; border-radius: 8px; padding: 9px 13px; color: var(--text); font-size: 12px; font-weight: 600; transition: .15s ease; }
+.button:hover:not(:disabled) { transform: translateY(-1px); }
+.button--primary { border-color: #75d8aa; color: #07140e; background: var(--accent); }
+.button--quiet { border-color: var(--line); color: var(--muted); background: transparent; }
+.button--quiet:hover:not(:disabled) { color: var(--text); background: var(--panel-raised); }
+.button--danger { border-color: #713b46; color: var(--danger); background: #301a21; }
+.button--terminal { padding: 7px 10px; border-color: #32634d; color: var(--accent); background: #153126; }
+.icon-button { border: 0; color: var(--muted); background: transparent; font-size: 25px; line-height: 1; }
+.icon-button:hover { color: var(--text); }
+
+.dialog-backdrop { position: fixed; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgb(3 5 8 / 75%); backdrop-filter: blur(6px); }
+.dialog { width: min(100%, 480px); border: 1px solid var(--line); border-radius: 15px; background: var(--panel-raised); box-shadow: var(--shadow); }
+.dialog__header { display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 24px 10px; }
+.dialog h2 { margin-top: 6px; font-size: 23px; letter-spacing: -.04em; }
+.dialog form { padding: 12px 24px 24px; }
+.field { display: block; margin-top: 15px; }
+.field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
+.field em { color: var(--subtle); font-size: 10px; font-style: normal; font-weight: 400; }
+.field input, .field select { width: 100%; border: 1px solid var(--line); border-radius: 7px; outline: 0; padding: 10px; color: var(--text); background: #0e131a; font-size: 13px; }
+.field input:focus, .field select:focus { border-color: var(--accent-strong); box-shadow: 0 0 0 3px #39d98a20; }
+.field small { display: block; margin-top: 6px; color: var(--subtle); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.field small .status-badge { padding: 2px 5px; font-size: 10px; }
+.path-picker { position: relative; }
+.path-picker > input { position: relative; z-index: 1; }
+.path-picker__status, .path-picker__error { white-space: normal; }
+.path-picker__error { color: var(--danger) !important; }
+.path-picker__suggestions { position: absolute; inset: calc(100% - 5px) 0 auto; z-index: 2; max-height: 190px; overflow: auto; padding: 5px; border: 1px solid var(--line); border-radius: 0 0 8px 8px; background: #101720; box-shadow: var(--shadow); }
+.path-picker__suggestion { display: block; width: 100%; border: 0; border-radius: 5px; padding: 8px 9px; color: var(--text); text-align: left; background: transparent; }
+.path-picker__suggestion:hover, .path-picker__suggestion--active { background: var(--panel-hover); }
+.path-picker__suggestion strong, .path-picker__suggestion small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.path-picker__suggestion strong { font-size: 12px; font-weight: 600; }
+.path-picker__suggestion small { margin-top: 2px; color: var(--subtle); font-family: ui-monospace, monospace; font-size: 10px; }
+.dialog__actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 27px; }
+
+@keyframes shimmer { to { background-position: -200% 0; } }
+@keyframes pulse { 50% { opacity: .35; } }
+@media (max-width: 720px) {
+  .topbar { height: 62px; padding: 0 16px; }
+  .workspace-layout { grid-template-columns: 1fr; min-height: calc(100vh - 62px); }
+  .sidebar { max-height: 43vh; border-right: 0; border-bottom: 1px solid var(--line); }
+  .sidebar__heading { padding: 18px 16px 10px; }
+  .sidebar__footer { padding: 11px 16px; }
+  .instance-list { max-height: 29vh; }
+  .main-content { padding: 25px 16px 40px; }
+  .welcome-panel { margin-top: 15px; padding: 30px 23px; }
+  .welcome-panel__orb { display: none; }
+  .instance-overview { margin-top: 15px; padding: 22px; }
+  .overview-grid { grid-template-columns: repeat(3, 1fr); }
+  .overview-grid div { padding: 10px; }
+  .overview-grid strong { font-size: 14px; }
+  .session-detail__header { display: block; }
+  .session-detail__header .button { margin-top: 18px; }
+  .terminal { height: 58vh; min-height: 360px; }
+  .terminal__output { min-height: 0; padding: 8px; }
+  .alert { align-items: flex-start; flex-wrap: wrap; padding: 10px 16px; }
+  .alert .button { margin-left: 0; }
+}

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@cloudagentfleet/ui",
+  "version": "0.1.1",
+  "private": false,
+  "description": "Cloud Agent Fleet Hub UI assets.",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    "./public/*": "./dist/public/*"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "engines": {
+    "node": ">=22.6.0"
+  },
+  "scripts": {
+    "build": "node ../../scripts/build-release.mjs",
+    "dev": "node --watch --check public/app.js",
+    "test": "node --test",
+    "typecheck": "node --check public/app.js"
+  }
+}