replicas-cli 0.2.39 → 0.2.40

package/dist/interactive-NB2QAJE2.mjs

@@ -0,0 +1,1925 @@
+#!/usr/bin/env bun
+import {
+  buildGroups,
+  createMockWorkspaceRecord,
+  createUserMessage,
+  filterDisplayMessages,
+  getOrganizationId,
+  getValidToken,
+  isAgentBackendEvent,
+  parseAgentEvents
+} from "./chunk-WCKZW4VV.mjs";
+
+// src/interactive/index.tsx
+import { createCliRenderer } from "@opentui/core";
+import { createRoot } from "@opentui/react";
+
+// src/interactive/App.tsx
+import { useState as useState5, useEffect as useEffect3, useMemo as useMemo3, useCallback as useCallback5, useRef as useRef3 } from "react";
+import { useKeyboard as useKeyboard3, useRenderer, useTerminalDimensions as useTerminalDimensions3 } from "@opentui/react";
+import { QueryClient } from "@tanstack/react-query";
+
+// ../shared/src/hooks/auth-context.ts
+import { createContext, useContext } from "react";
+var ReplicasAuthContext = createContext(null);
+var ReplicasAuthProvider = ReplicasAuthContext.Provider;
+function useReplicasAuth() {
+  const ctx = useContext(ReplicasAuthContext);
+  if (!ctx) {
+    throw new Error("useReplicasAuth must be used within a ReplicasAuthProvider");
+  }
+  return ctx;
+}
+
+// ../shared/src/hooks/fetch.ts
+import { useCallback } from "react";
+var REDIRECT_STATUSES = /* @__PURE__ */ new Set([301, 302, 303, 307, 308]);
+var MAX_REDIRECTS = 5;
+async function fetchWithRedirects(url, init, attempt = 0) {
+  const response = await fetch(url, { ...init, redirect: "manual" });
+  if (REDIRECT_STATUSES.has(response.status)) {
+    if (attempt >= MAX_REDIRECTS) {
+      throw new Error("Too many redirects while contacting the Replicas API");
+    }
+    const location = response.headers.get("location");
+    if (!location) {
+      throw new Error(`Redirect status ${response.status} missing Location header`);
+    }
+    const nextUrl = new URL(location, url).toString();
+    const shouldForceGet = response.status === 303 && init.method !== void 0 && init.method.toUpperCase() !== "GET";
+    const nextInit = {
+      ...init,
+      method: shouldForceGet ? "GET" : init.method,
+      body: shouldForceGet ? void 0 : init.body
+    };
+    return fetchWithRedirects(nextUrl, nextInit, attempt + 1);
+  }
+  return response;
+}
+function useOrgFetch() {
+  const auth = useReplicasAuth();
+  return useCallback(
+    async function orgFetch(url, options) {
+      const token = await auth.getAccessToken();
+      const orgId = auth.getOrganizationId();
+      const headers = {
+        "Authorization": `Bearer ${token}`,
+        "Replicas-Org-Id": orgId,
+        "Content-Type": "application/json",
+        ...options?.headers || {}
+      };
+      const absoluteUrl = `${auth.monolithUrl}${url}`;
+      const requestInit = {
+        ...options,
+        headers,
+        body: options?.body !== void 0 ? JSON.stringify(options.body) : void 0
+      };
+      const response = await fetchWithRedirects(absoluteUrl, requestInit);
+      if (!response.ok) {
+        const error = await response.json().catch(() => ({ error: "Request failed" }));
+        throw new Error(error.error || `Request failed with status ${response.status}`);
+      }
+      return response.json();
+    },
+    [auth]
+  );
+}
+function useRawOrgFetch() {
+  const auth = useReplicasAuth();
+  return useCallback(
+    async function rawOrgFetch(url, options) {
+      const token = await auth.getAccessToken();
+      const orgId = auth.getOrganizationId();
+      const headers = {
+        "Authorization": `Bearer ${token}`,
+        "Replicas-Org-Id": orgId,
+        ...options?.headers || {}
+      };
+      const absoluteUrl = `${auth.monolithUrl}${url}`;
+      return fetch(absoluteUrl, { ...options, headers });
+    },
+    [auth]
+  );
+}
+
+// ../shared/src/hooks/useWorkspaces.ts
+import { useQuery, useMutation } from "@tanstack/react-query";
+function useWorkspaces(page = 1, limit = 100, scope = "organization") {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  const orgId = auth.getOrganizationId();
+  return useQuery({
+    queryKey: ["workspaces", orgId, scope, page, limit],
+    queryFn: () => orgFetch(`/v1/workspaces?scope=${scope}&page=${page}&limit=${limit}`),
+    enabled: !!orgId
+  }, auth.queryClient);
+}
+function useCreateWorkspace() {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  const orgId = auth.getOrganizationId();
+  return useMutation({
+    mutationFn: (request) => orgFetch("/v1/workspaces", {
+      method: "POST",
+      body: request
+    }),
+    onSettled: () => {
+      auth.queryClient.invalidateQueries({ queryKey: ["workspaces", orgId] });
+    }
+  }, auth.queryClient);
+}
+function useDeleteWorkspace() {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  const orgId = auth.getOrganizationId();
+  return useMutation({
+    mutationFn: (workspaceId) => orgFetch(`/v1/workspaces/${workspaceId}`, {
+      method: "DELETE"
+    }),
+    onSuccess: (_data, deletedWorkspaceId) => {
+      auth.queryClient.invalidateQueries({ queryKey: ["workspaces", orgId] });
+      auth.queryClient.removeQueries({ queryKey: ["workspace-status", deletedWorkspaceId] });
+      auth.queryClient.removeQueries({ queryKey: ["workspace-chats", deletedWorkspaceId] });
+      auth.queryClient.removeQueries({ queryKey: ["chat-history", deletedWorkspaceId] });
+      auth.queryClient.removeQueries({ queryKey: ["workspace-previews", deletedWorkspaceId] });
+    }
+  }, auth.queryClient);
+}
+function useGenerateWorkspaceName() {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  return useMutation({
+    mutationFn: ({ workspaceId, prompt }) => orgFetch(`/v1/workspaces/${workspaceId}/generate-name`, {
+      method: "POST",
+      body: { prompt }
+    }),
+    onSuccess: () => {
+      auth.queryClient.invalidateQueries({ queryKey: ["workspaces"] });
+    }
+  }, auth.queryClient);
+}
+
+// ../shared/src/hooks/useWorkspaceEngine.ts
+import { useCallback as useCallback2, useEffect, useMemo, useState } from "react";
+import { useQuery as useQuery2, useMutation as useMutation2 } from "@tanstack/react-query";
+function upsertChat(chats, chat) {
+  const existingIndex = chats.findIndex((item) => item.id === chat.id);
+  if (existingIndex === -1) {
+    return [chat, ...chats].sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+  }
+  const next = [...chats];
+  next[existingIndex] = chat;
+  return next.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt));
+}
+function patchChat(chats, chatId, patch) {
+  let changed = false;
+  const next = chats.map((chat) => {
+    if (chat.id !== chatId) return chat;
+    changed = true;
+    return { ...chat, ...patch };
+  });
+  return changed ? next.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt)) : chats;
+}
+function parseSseEvent(raw) {
+  for (const line of raw.split("\n")) {
+    if (line.startsWith("data: ")) {
+      try {
+        return JSON.parse(line.slice(6));
+      } catch {
+        return null;
+      }
+    }
+  }
+  return null;
+}
+function getEventSignature(value) {
+  const normalize = (input) => {
+    if (Array.isArray(input)) return input.map(normalize);
+    if (input && typeof input === "object") {
+      const entries = Object.entries(input).sort(([a], [b]) => a.localeCompare(b)).map(([key, val]) => [key, normalize(val)]);
+      return Object.fromEntries(entries);
+    }
+    return input;
+  };
+  try {
+    return JSON.stringify(normalize(value));
+  } catch {
+    return String(value);
+  }
+}
+function useWorkspaceChats(workspaceId) {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  return useQuery2({
+    queryKey: ["workspace-chats", workspaceId],
+    queryFn: () => orgFetch(`/v1/workspaces/${workspaceId}/chats`),
+    enabled: !!workspaceId,
+    staleTime: 6e4
+  }, auth.queryClient);
+}
+function useChatHistory(workspaceId, chatId) {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  return useQuery2({
+    queryKey: ["chat-history", workspaceId, chatId],
+    queryFn: () => orgFetch(`/v1/workspaces/${workspaceId}/chats/${chatId}/history`),
+    enabled: !!workspaceId && !!chatId
+  }, auth.queryClient);
+}
+function useSendChatMessage(workspaceId, chatId) {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  return useMutation2({
+    mutationFn: (body) => {
+      if (!workspaceId || !chatId) throw new Error("No chat selected");
+      return orgFetch(
+        `/v1/workspaces/${workspaceId}/chats/${chatId}/messages`,
+        { method: "POST", body }
+      );
+    }
+  }, auth.queryClient);
+}
+function useInterruptChat(workspaceId, chatId) {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  return useMutation2({
+    mutationFn: () => {
+      if (!workspaceId || !chatId) throw new Error("No chat selected");
+      return orgFetch(
+        `/v1/workspaces/${workspaceId}/chats/${chatId}/interrupt`,
+        { method: "POST" }
+      );
+    }
+  }, auth.queryClient);
+}
+function useWorkspaceStatus(workspaceId, options) {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  const includeDiffs = options?.includeDiffs ?? false;
+  const enabled = options?.enabled ?? true;
+  return useQuery2({
+    queryKey: ["workspace-status", workspaceId, includeDiffs],
+    queryFn: () => {
+      const url = `/v1/workspaces/${workspaceId}/status${includeDiffs ? "?includeDiffs=true" : ""}`;
+      return orgFetch(url);
+    },
+    enabled: !!workspaceId && enabled,
+    staleTime: 3e3,
+    retry: 2,
+    placeholderData: (previousData) => previousData
+  }, auth.queryClient);
+}
+function useWorkspacePreviews(workspaceId) {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  return useQuery2({
+    queryKey: ["workspace-previews", workspaceId],
+    queryFn: () => orgFetch(`/v1/workspaces/${workspaceId}/previews`),
+    enabled: !!workspaceId,
+    staleTime: 5e3,
+    retry: 2
+  }, auth.queryClient);
+}
+function useWorkspaceEvents(workspaceId, enabled = true) {
+  const auth = useReplicasAuth();
+  const rawFetch = useRawOrgFetch();
+  const qc = auth.queryClient;
+  const [connected, setConnected] = useState(false);
+  const handleEvent = useCallback2((event) => {
+    if (!workspaceId) return;
+    const chatsKey = ["workspace-chats", workspaceId];
+    if (event.type === "chat.created" || event.type === "chat.updated") {
+      qc.setQueryData(chatsKey, (current) => {
+        if (!current) return { chats: [event.payload.chat] };
+        return { chats: upsertChat(current.chats, event.payload.chat) };
+      });
+      return;
+    }
+    if (event.type === "chat.deleted") {
+      qc.setQueryData(chatsKey, (current) => {
+        if (!current) return current;
+        return { chats: current.chats.filter((chat) => chat.id !== event.payload.chatId) };
+      });
+      qc.removeQueries({ queryKey: ["chat-history", workspaceId, event.payload.chatId] });
+      return;
+    }
+    if (event.type === "chat.turn.accepted") {
+      if (!event.payload.queued) {
+        qc.setQueryData(chatsKey, (current) => {
+          if (!current) return current;
+          return { chats: patchChat(current.chats, event.payload.chatId, { processing: true, updatedAt: event.ts }) };
+        });
+      }
+      return;
+    }
+    if (event.type === "chat.turn.started") {
+      qc.setQueryData(chatsKey, (current) => {
+        if (!current) return current;
+        return { chats: patchChat(current.chats, event.payload.chatId, { processing: true, updatedAt: event.ts }) };
+      });
+      return;
+    }
+    if (event.type === "chat.turn.completed" || event.type === "chat.interrupted") {
+      qc.setQueryData(chatsKey, (current) => {
+        if (!current) return current;
+        return { chats: patchChat(current.chats, event.payload.chatId, { processing: false, updatedAt: event.ts }) };
+      });
+      qc.invalidateQueries({ queryKey: ["chat-history", workspaceId, event.payload.chatId] });
+      return;
+    }
+    if (event.type === "chat.turn.delta") {
+      qc.setQueryData(
+        ["chat-history", workspaceId, event.payload.chatId],
+        (current) => {
+          const incomingSignature = getEventSignature(event.payload.event);
+          if (!current) {
+            return { thread_id: null, events: [event.payload.event] };
+          }
+          const hasDuplicate = current.events.some((e) => getEventSignature(e) === incomingSignature);
+          if (hasDuplicate) return current;
+          return { ...current, events: [...current.events, event.payload.event] };
+        }
+      );
+      return;
+    }
+    if (event.type === "repo.status.changed") {
+      qc.setQueryData(["workspace-status", workspaceId, false], (current) => {
+        if (!current) return current;
+        return { ...current, repoStatuses: event.payload.repos };
+      });
+      return;
+    }
+    if (event.type === "preview.changed") {
+      qc.setQueryData(["workspace-previews", workspaceId], {
+        previews: event.payload.previews
+      });
+      return;
+    }
+  }, [qc, workspaceId]);
+  useEffect(() => {
+    if (!workspaceId || !enabled) return;
+    const controller = new AbortController();
+    let cancelled = false;
+    const connect = async () => {
+      try {
+        const response = await rawFetch(`/v1/workspaces/${workspaceId}/events`, {
+          headers: { "Accept": "text/event-stream" },
+          signal: controller.signal
+        });
+        if (!response.ok || !response.body) {
+          setConnected(false);
+          return false;
+        }
+        setConnected(true);
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = "";
+        while (!cancelled) {
+          const { done, value } = await reader.read();
+          if (done) return false;
+          buffer += decoder.decode(value, { stream: true });
+          const chunks = buffer.split("\n\n");
+          buffer = chunks.pop() ?? "";
+          for (const chunk of chunks) {
+            const event = parseSseEvent(chunk);
+            if (event) handleEvent(event);
+          }
+        }
+        return false;
+      } catch {
+        setConnected(false);
+        return false;
+      }
+    };
+    const run = async () => {
+      while (!cancelled) {
+        await connect();
+        if (cancelled) break;
+        await new Promise((resolve) => setTimeout(resolve, 1e3));
+      }
+    };
+    run().catch(() => setConnected(false));
+    return () => {
+      cancelled = true;
+      controller.abort();
+      setConnected(false);
+    };
+  }, [enabled, handleEvent, rawFetch, workspaceId]);
+  return useMemo(() => ({ connected }), [connected]);
+}
+
+// ../shared/src/hooks/useRepositories.ts
+import { useQuery as useQuery3 } from "@tanstack/react-query";
+function useRepositories() {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  const orgId = auth.getOrganizationId();
+  return useQuery3({
+    queryKey: ["repositories", orgId],
+    queryFn: () => orgFetch("/v1/repositories"),
+    enabled: !!orgId,
+    staleTime: 2 * 60 * 1e3
+  }, auth.queryClient);
+}
+function useRepositorySets() {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  const orgId = auth.getOrganizationId();
+  return useQuery3({
+    queryKey: ["repository-sets", orgId],
+    queryFn: () => orgFetch("/v1/repository-sets"),
+    enabled: !!orgId
+  }, auth.queryClient);
+}
+
+// ../shared/src/hooks/useEnvironment.ts
+import { useQuery as useQuery4 } from "@tanstack/react-query";
+function useEnvironmentSkills() {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  const orgId = auth.getOrganizationId();
+  return useQuery4({
+    queryKey: ["env-skills", orgId],
+    queryFn: () => orgFetch("/v1/environment/skills"),
+    enabled: !!orgId
+  }, auth.queryClient);
+}
+function useEnvironmentVariables() {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  const orgId = auth.getOrganizationId();
+  return useQuery4({
+    queryKey: ["env-variables", orgId],
+    queryFn: () => orgFetch("/v1/environment/variables"),
+    enabled: !!orgId
+  }, auth.queryClient);
+}
+function useEnvironmentFiles() {
+  const auth = useReplicasAuth();
+  const orgFetch = useOrgFetch();
+  const orgId = auth.getOrganizationId();
+  return useQuery4({
+    queryKey: ["env-files", orgId],
+    queryFn: () => orgFetch("/v1/environment/files"),
+    enabled: !!orgId
+  }, auth.queryClient);
+}
+
+// src/interactive/components/StatusBar.tsx
+import { jsx, jsxs } from "@opentui/react/jsx-runtime";
+var KEYBINDS = {
+  sidebar: "j/k nav  \u21B5 select  d del  a add",
+  "chat-tabs": "\u2190/\u2192 switch tabs",
+  "chat-history": "j/k scroll",
+  "chat-input": "\u21B5 send  \u21E5 plan/build",
+  info: "j/k scroll  o dashboard"
+};
+function StatusBar({ focusPanel }) {
+  return /* @__PURE__ */ jsxs(
+    "box",
+    {
+      height: 1,
+      backgroundColor: "#111111",
+      paddingX: 1,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      width: "100%",
+      children: [
+        /* @__PURE__ */ jsx("text", { children: /* @__PURE__ */ jsx("span", { fg: "#66bb6a", children: /* @__PURE__ */ jsx("strong", { children: "Replicas" }) }) }),
+        /* @__PURE__ */ jsxs("text", { children: [
+          /* @__PURE__ */ jsxs("span", { fg: "#555555", children: [
+            KEYBINDS[focusPanel],
+            "  "
+          ] }),
+          /* @__PURE__ */ jsxs("span", { fg: "#888888", children: [
+            "\u21E7",
+            "Tab"
+          ] }),
+          /* @__PURE__ */ jsx("span", { fg: "#555555", children: " panels  " }),
+          /* @__PURE__ */ jsx("span", { fg: "#888888", children: "^C" }),
+          /* @__PURE__ */ jsx("span", { fg: "#555555", children: " quit" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/interactive/components/WorkspaceSidebar.tsx
+import { useState as useState2, useMemo as useMemo2, useCallback as useCallback3 } from "react";
+import { useKeyboard, useTerminalDimensions } from "@opentui/react";
+import { jsx as jsx2, jsxs as jsxs2 } from "@opentui/react/jsx-runtime";
+function flattenGroups(groups, expandedGroups) {
+  const items = [];
+  for (const group of groups) {
+    if (group.id === "__ungrouped__" && group.workspaces.length === 0) continue;
+    const expanded = expandedGroups.has(group.id);
+    items.push({ type: "group", id: group.id, name: group.name, groupType: group.type, expanded });
+    if (expanded) {
+      for (const ws of group.workspaces) {
+        items.push({
+          type: "workspace",
+          workspaceId: ws.id,
+          name: ws.name,
+          status: ws.status,
+          isMock: ws.status === "preparing"
+        });
+      }
+      if (group.id !== "__ungrouped__") {
+        items.push({ type: "add", groupId: group.id, groupType: group.type });
+      }
+    }
+  }
+  return items;
+}
+function truncate(text, maxLen) {
+  return text.length > maxLen ? text.slice(0, maxLen - 1) + "\u2026" : text;
+}
+function WorkspaceSidebar({
+  groups,
+  selectedWorkspaceId,
+  mockIds,
+  onSelectWorkspace,
+  onCreateWorkspace,
+  onDeleteWorkspace,
+  focused,
+  loading
+}) {
+  const { height: termHeight } = useTerminalDimensions();
+  const [expandedGroups, setExpandedGroups] = useState2(
+    () => new Set(groups.map((g) => g.id))
+  );
+  const [cursorIndex, setCursorIndex] = useState2(0);
+  const [scrollOffset, setScrollOffset] = useState2(0);
+  const [confirmDelete, setConfirmDelete] = useState2(null);
+  const expandedWithNew = useMemo2(() => {
+    const next = new Set(expandedGroups);
+    for (const g of groups) {
+      if (!next.has(g.id)) next.add(g.id);
+    }
+    return next;
+  }, [expandedGroups, groups]);
+  const items = useMemo2(() => flattenGroups(groups, expandedWithNew), [groups, expandedWithNew]);
+  const clampedCursor = Math.min(cursorIndex, Math.max(0, items.length - 1));
+  if (clampedCursor !== cursorIndex) {
+    setCursorIndex(clampedCursor);
+  }
+  const visibleHeight = Math.max(1, termHeight - 4);
+  const adjustScroll = useCallback3(
+    (newCursor) => {
+      let newOffset = scrollOffset;
+      if (newCursor < newOffset) {
+        newOffset = newCursor;
+      } else if (newCursor >= newOffset + visibleHeight) {
+        newOffset = newCursor - visibleHeight + 1;
+      }
+      setScrollOffset(newOffset);
+    },
+    [scrollOffset, visibleHeight]
+  );
+  const moveCursor = useCallback3(
+    (next) => {
+      const clamped = Math.max(0, Math.min(items.length - 1, next));
+      setCursorIndex(clamped);
+      adjustScroll(clamped);
+    },
+    [items.length, adjustScroll]
+  );
+  const handleAction = useCallback3(
+    (item) => {
+      if (item.type === "group") {
+        setExpandedGroups((prev) => {
+          const next = new Set(prev);
+          if (next.has(item.id)) {
+            next.delete(item.id);
+          } else {
+            next.add(item.id);
+          }
+          return next;
+        });
+      } else if (item.type === "workspace") {
+        onSelectWorkspace(item.workspaceId);
+      } else if (item.type === "add") {
+        onCreateWorkspace(item.groupId, item.groupType);
+      }
+    },
+    [onSelectWorkspace, onCreateWorkspace]
+  );
+  const handleDelete = useCallback3(() => {
+    const item = items[cursorIndex];
+    if (!item || item.type !== "workspace") return;
+    if (item.isMock) return;
+    if (confirmDelete === item.workspaceId) {
+      onDeleteWorkspace(item.workspaceId);
+      setConfirmDelete(null);
+    } else {
+      setConfirmDelete(item.workspaceId);
+    }
+  }, [items, cursorIndex, confirmDelete, onDeleteWorkspace]);
+  const moveCursorAndClearConfirm = useCallback3(
+    (next) => {
+      setConfirmDelete(null);
+      moveCursor(next);
+    },
+    [moveCursor]
+  );
+  useKeyboard((key) => {
+    if (!focused) return;
+    if (confirmDelete) {
+      if (key.name === "y") {
+        onDeleteWorkspace(confirmDelete);
+        setConfirmDelete(null);
+        return;
+      }
+      if (key.name === "n" || key.name === "escape") {
+        setConfirmDelete(null);
+        return;
+      }
+      return;
+    }
+    if (key.name === "up" || key.name === "k") {
+      moveCursorAndClearConfirm(cursorIndex - 1);
+      return;
+    }
+    if (key.name === "down" || key.name === "j") {
+      moveCursorAndClearConfirm(cursorIndex + 1);
+      return;
+    }
+    if (key.name === "g" && !key.shift) {
+      moveCursorAndClearConfirm(0);
+      return;
+    }
+    if (key.name === "g" && key.shift) {
+      moveCursorAndClearConfirm(items.length - 1);
+      return;
+    }
+    if (key.name === "enter" || key.name === "return" || key.name === "l") {
+      const item = items[cursorIndex];
+      if (item) handleAction(item);
+      return;
+    }
+    if (key.name === "h") {
+      const item = items[cursorIndex];
+      if (item?.type === "group" && item.expanded) {
+        handleAction(item);
+      }
+      return;
+    }
+    if (key.name === "d" || key.name === "x" || key.name === "delete") {
+      handleDelete();
+      return;
+    }
+    if (key.name === "a") {
+      const item = items[cursorIndex];
+      if (item?.type === "add") {
+        onCreateWorkspace(item.groupId, item.groupType);
+      }
+      return;
+    }
+  });
+  const handleItemClick = useCallback3(
+    (globalIndex) => {
+      setConfirmDelete(null);
+      setCursorIndex(globalIndex);
+      const item = items[globalIndex];
+      if (item) handleAction(item);
+    },
+    [items, handleAction]
+  );
+  const handleDeleteClick = useCallback3(
+    (workspaceId, e) => {
+      e?.preventDefault?.();
+      if (confirmDelete === workspaceId) {
+        onDeleteWorkspace(workspaceId);
+        setConfirmDelete(null);
+      } else {
+        setConfirmDelete(workspaceId);
+      }
+    },
+    [confirmDelete, onDeleteWorkspace]
+  );
+  const visibleItems = items.slice(scrollOffset, scrollOffset + visibleHeight);
+  if (loading) {
+    return /* @__PURE__ */ jsx2(
+      "box",
+      {
+        width: 28,
+        border: true,
+        borderStyle: "rounded",
+        borderColor: "#333333",
+        title: "Workspaces",
+        titleAlignment: "center",
+        flexDirection: "column",
+        backgroundColor: "#000000",
+        children: /* @__PURE__ */ jsx2("text", { fg: "#666666", children: "Loading..." })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "box",
+    {
+      width: 28,
+      border: true,
+      borderStyle: "rounded",
+      borderColor: focused ? "#66bb6a" : "#333333",
+      title: "Workspaces",
+      titleAlignment: "center",
+      flexDirection: "column",
+      backgroundColor: "#000000",
+      children: [
+        items.length === 0 ? /* @__PURE__ */ jsx2("text", { fg: "#666666", paddingX: 1, children: "No repositories" }) : visibleItems.map((item, vi) => {
+          const globalIndex = scrollOffset + vi;
+          const isCursor = globalIndex === cursorIndex;
+          if (item.type === "group") {
+            const chevron = item.expanded ? "\u25BE" : "\u25B8";
+            const label = truncate(item.name, 20);
+            const suffix = item.groupType === "set" ? " Set" : "";
+            return /* @__PURE__ */ jsx2(
+              "box",
+              {
+                height: 1,
+                backgroundColor: isCursor ? "#1a1a1a" : "#151515",
+                paddingX: 1,
+                onMouseDown: () => handleItemClick(globalIndex),
+                children: /* @__PURE__ */ jsxs2("text", { children: [
+                  /* @__PURE__ */ jsxs2("span", { fg: isCursor ? "#ffffff" : "#888888", children: [
+                    chevron,
+                    " "
+                  ] }),
+                  /* @__PURE__ */ jsx2("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx2("strong", { children: label }) }),
+                  suffix && /* @__PURE__ */ jsxs2("span", { fg: "#555555", children: [
+                    " ",
+                    suffix
+                  ] })
+                ] })
+              },
+              `g-${item.id}`
+            );
+          }
+          if (item.type === "workspace") {
+            const isSelected = item.workspaceId === selectedWorkspaceId;
+            const isConfirming = confirmDelete === item.workspaceId;
+            const dot = item.status === "active" ? "\u25CF" : item.status === "preparing" ? "\u25CC" : "\u25CB";
+            const dotColor = item.status === "active" ? "#66bb6a" : item.status === "preparing" ? "#ffaa00" : "#666666";
+            const nameColor = isSelected ? "#66bb6a" : "#cccccc";
+            const itemBg = isConfirming ? "#331111" : isCursor ? "#1a1a1a" : isSelected ? "#0a1a0a" : "#0a0a0a";
+            if (isConfirming) {
+              return /* @__PURE__ */ jsxs2("box", { height: 1, backgroundColor: "#331111", paddingX: 1, flexDirection: "row", gap: 1, children: [
+                /* @__PURE__ */ jsx2("text", { children: /* @__PURE__ */ jsx2("span", { fg: "#ff4444", children: "Delete?" }) }),
+                /* @__PURE__ */ jsx2("box", { onMouseDown: () => {
+                  onDeleteWorkspace(item.workspaceId);
+                  setConfirmDelete(null);
+                }, children: /* @__PURE__ */ jsx2("text", { children: /* @__PURE__ */ jsx2("span", { fg: "#66bb6a", children: "[y]" }) }) }),
+                /* @__PURE__ */ jsx2("box", { onMouseDown: () => setConfirmDelete(null), children: /* @__PURE__ */ jsx2("text", { children: /* @__PURE__ */ jsx2("span", { fg: "#ff4444", children: "[n]" }) }) })
+              ] }, `w-${item.workspaceId}`);
+            }
+            return /* @__PURE__ */ jsxs2(
+              "box",
+              {
+                height: 1,
+                backgroundColor: itemBg,
+                paddingX: 1,
+                flexDirection: "row",
+                justifyContent: "space-between",
+                onMouseDown: () => handleItemClick(globalIndex),
+                children: [
+                  /* @__PURE__ */ jsxs2("text", { children: [
+                    /* @__PURE__ */ jsxs2("span", { fg: dotColor, children: [
+                      " ",
+                      dot,
+                      " "
+                    ] }),
+                    /* @__PURE__ */ jsx2("span", { fg: nameColor, children: truncate(item.name, 17) })
+                  ] }),
+                  !item.isMock && /* @__PURE__ */ jsx2("box", { onMouseDown: (e) => handleDeleteClick(item.workspaceId, e), children: /* @__PURE__ */ jsx2("text", { children: /* @__PURE__ */ jsx2("span", { fg: isCursor ? "#ff4444" : "#222222", children: "\u2717" }) }) })
+                ]
+              },
+              `w-${item.workspaceId}`
+            );
+          }
+          return /* @__PURE__ */ jsx2(
+            "box",
+            {
+              height: 1,
+              backgroundColor: isCursor ? "#1a1a1a" : "#0a0a0a",
+              paddingX: 1,
+              onMouseDown: () => handleItemClick(globalIndex),
+              children: /* @__PURE__ */ jsxs2("text", { children: [
+                /* @__PURE__ */ jsx2("span", { fg: isCursor ? "#66bb6a" : "#444444", children: " + " }),
+                /* @__PURE__ */ jsx2("span", { fg: isCursor ? "#888888" : "#333333", children: "New workspace" })
+              ] })
+            },
+            `a-${item.groupId}`
+          );
+        }),
+        focused && /* @__PURE__ */ jsx2("box", { height: 1, paddingX: 1, backgroundColor: "#111111", children: /* @__PURE__ */ jsxs2("text", { children: [
+          /* @__PURE__ */ jsx2("span", { fg: "#555555", children: "j/k:nav " }),
+          /* @__PURE__ */ jsx2("span", { fg: "#555555", children: "d:del " }),
+          /* @__PURE__ */ jsx2("span", { fg: "#555555", children: "a:add" })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/interactive/components/ChatArea.tsx
+import { useRef, useEffect as useEffect2 } from "react";
+import { useKeyboard as useKeyboard2 } from "@opentui/react";
+
+// src/interactive/components/ChatMessage.tsx
+import { useState as useState3 } from "react";
+import { SyntaxStyle } from "@opentui/core";
+
+// src/interactive/components/Spinner.tsx
+import "opentui-spinner/react";
+import { createPulse } from "opentui-spinner";
+import { jsx as jsx3, jsxs as jsxs3 } from "@opentui/react/jsx-runtime";
+var thinkingColor = createPulse(["#66bb6a", "#4caf50", "#2e7d32"], 0.5);
+function SpinnerLabel({ color, label }) {
+  return /* @__PURE__ */ jsxs3("box", { flexDirection: "row", gap: 1, children: [
+    /* @__PURE__ */ jsx3("spinner", { name: "dots", color: color ?? thinkingColor, interval: 80 }),
+    label && /* @__PURE__ */ jsx3("text", { children: /* @__PURE__ */ jsx3("span", { fg: color ?? "#66bb6a", children: label }) })
+  ] });
+}
+
+// src/interactive/components/ChatMessage.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "@opentui/react/jsx-runtime";
+var sharedSyntaxStyle = null;
+function getSyntaxStyle() {
+  if (!sharedSyntaxStyle) {
+    sharedSyntaxStyle = SyntaxStyle.fromTheme([
+      // Markdown text styling
+      { scope: ["markup.heading", "markup.heading.1", "markup.heading.2", "markup.heading.3"], style: { foreground: "#66bb6a", bold: true } },
+      { scope: ["markup.bold", "markup.strong"], style: { foreground: "#ffffff", bold: true } },
+      { scope: ["markup.italic", "markup.emphasis"], style: { foreground: "#e0e0e0", italic: true } },
+      { scope: ["markup.link"], style: { foreground: "#7dcfff", underline: true } },
+      { scope: ["markup.link.url"], style: { foreground: "#7dcfff", underline: true } },
+      { scope: ["markup.link.text"], style: { foreground: "#66bb6a", underline: true } },
+      { scope: ["markup.link.label"], style: { foreground: "#66bb6a", underline: true } },
+      { scope: ["markup.list"], style: { foreground: "#66bb6a" } },
+      { scope: ["markup.quote"], style: { foreground: "#888888", italic: true } },
+      { scope: ["markup.raw", "markup.raw.block"], style: { foreground: "#bb9af7" } },
+      { scope: ["markup.raw.inline"], style: { foreground: "#bb9af7", background: "#1a1a2e" } },
+      // Code syntax highlighting
+      { scope: ["keyword", "keyword.control", "keyword.operator"], style: { foreground: "#bb9af7" } },
+      { scope: ["string", "string.quoted"], style: { foreground: "#9ece6a" } },
+      { scope: ["comment", "comment.line", "comment.block"], style: { foreground: "#555555", italic: true } },
+      { scope: ["constant", "constant.numeric", "constant.language"], style: { foreground: "#ff9e64" } },
+      { scope: ["entity.name.function", "support.function"], style: { foreground: "#7aa2f7" } },
+      { scope: ["entity.name.type", "support.type"], style: { foreground: "#2ac3de" } },
+      { scope: ["variable", "variable.other"], style: { foreground: "#c0caf5" } },
+      { scope: ["punctuation"], style: { foreground: "#888888" } }
+    ]);
+  }
+  return sharedSyntaxStyle;
+}
+var AGENT_LABELS = {
+  claude: "Claude",
+  codex: "Codex"
+};
+function truncate2(text, maxLen) {
+  return text.length > maxLen ? text.slice(0, maxLen - 1) + "\u2026" : text;
+}
+function StatusIcon({ status }) {
+  if (status === "completed") return /* @__PURE__ */ jsxs4("span", { fg: "#66bb6a", children: [
+    " ",
+    "\u2713"
+  ] });
+  if (status === "failed") return /* @__PURE__ */ jsxs4("span", { fg: "#ff4444", children: [
+    " ",
+    "\u2717"
+  ] });
+  if (status === "in_progress") return /* @__PURE__ */ jsxs4("span", { fg: "#ffaa00", children: [
+    " ",
+    "\u2026"
+  ] });
+  return null;
+}
+function ActionLine({
+  label,
+  arg,
+  status,
+  expandable,
+  onToggle,
+  expanded
+}) {
+  return /* @__PURE__ */ jsxs4(
+    "box",
+    {
+      paddingX: 1,
+      flexDirection: "row",
+      justifyContent: "space-between",
+      onMouseDown: onToggle,
+      children: [
+        /* @__PURE__ */ jsxs4("text", { children: [
+          /* @__PURE__ */ jsx4("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx4("strong", { children: label }) }),
+          /* @__PURE__ */ jsxs4("span", { fg: "#cccccc", children: [
+            " ",
+            arg.replace(/\n/g, " ").replace(/\s+/g, " ")
+          ] }),
+          /* @__PURE__ */ jsx4(StatusIcon, { status })
+        ] }),
+        expandable && /* @__PURE__ */ jsx4("text", { children: /* @__PURE__ */ jsx4("span", { fg: "#555555", children: expanded ? "\u25BE" : "\u25B8" }) })
+      ]
+    }
+  );
+}
+function ExpandableAction({
+  label,
+  arg,
+  status,
+  children
+}) {
+  const [expanded, setExpanded] = useState3(false);
+  return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx4(
+      ActionLine,
+      {
+        label,
+        arg,
+        status,
+        expandable: true,
+        expanded,
+        onToggle: () => setExpanded((e) => !e)
+      }
+    ),
+    expanded && children
+  ] });
+}
+function ChatMessage({ message, provider }) {
+  switch (message.type) {
+    case "user":
+      if (message.content === "Request interrupted") {
+        return /* @__PURE__ */ jsx4("box", { paddingX: 1, justifyContent: "center", children: /* @__PURE__ */ jsx4("text", { fg: "#555555", children: "--- Request interrupted ---" }) });
+      }
+      return /* @__PURE__ */ jsxs4(
+        "box",
+        {
+          flexDirection: "column",
+          backgroundColor: "#151515",
+          paddingX: 2,
+          paddingY: 1,
+          marginX: 1,
+          children: [
+            /* @__PURE__ */ jsx4("text", { children: /* @__PURE__ */ jsx4("span", { fg: "#66bb6a", children: /* @__PURE__ */ jsx4("strong", { children: "You" }) }) }),
+            /* @__PURE__ */ jsx4("text", { fg: "#ffffff", selectable: true, children: message.content })
+          ]
+        }
+      );
+    case "agent":
+      return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", paddingX: 1, children: [
+        /* @__PURE__ */ jsx4("text", { children: /* @__PURE__ */ jsx4("span", { fg: "#66bb6a", children: /* @__PURE__ */ jsx4("strong", { children: AGENT_LABELS[provider] }) }) }),
+        /* @__PURE__ */ jsx4(
+          "markdown",
+          {
+            content: message.content,
+            streaming: true,
+            syntaxStyle: getSyntaxStyle(),
+            conceal: true,
+            fg: "#ffffff",
+            bg: "#000000"
+          }
+        )
+      ] });
+    case "reasoning":
+      return /* @__PURE__ */ jsx4("box", { paddingX: 1, children: /* @__PURE__ */ jsx4(SpinnerLabel, { color: "#555555", label: "thinking" }) });
+    case "command": {
+      const cmdArg = truncate2(message.command, 60);
+      const exitSuffix = message.exitCode !== void 0 && message.exitCode !== 0 ? ` (exit ${message.exitCode})` : "";
+      if (!message.output) {
+        return /* @__PURE__ */ jsx4(ActionLine, { label: "Command", arg: cmdArg + exitSuffix, status: message.status });
+      }
+      return /* @__PURE__ */ jsx4(ExpandableAction, { label: "Command", arg: cmdArg + exitSuffix, status: message.status, children: /* @__PURE__ */ jsx4("box", { paddingLeft: 2, paddingX: 1, children: /* @__PURE__ */ jsx4("text", { fg: "#888888", selectable: true, children: message.output.length > 500 ? message.output.slice(0, 500) + "\n\u2026" : message.output }) }) });
+    }
+    case "file_change": {
+      const count = message.changes.length;
+      return /* @__PURE__ */ jsx4(ExpandableAction, { label: "Files", arg: `${count}`, status: message.status, children: /* @__PURE__ */ jsx4("box", { flexDirection: "column", paddingLeft: 2, paddingX: 1, children: message.changes.map((change, i) => /* @__PURE__ */ jsxs4("text", { children: [
+        /* @__PURE__ */ jsx4(
+          "span",
+          {
+            fg: change.kind === "add" ? "#66bb6a" : change.kind === "delete" ? "#ff4444" : "#ffaa00",
+            children: change.kind === "add" ? "+" : change.kind === "delete" ? "-" : "~"
+          }
+        ),
+        /* @__PURE__ */ jsxs4("span", { fg: "#cccccc", children: [
+          " ",
+          change.path
+        ] })
+      ] }, i)) }) });
+    }
+    case "tool_call": {
+      const toolArg = truncate2(message.tool, 50);
+      if (message.output || message.input) {
+        return /* @__PURE__ */ jsx4(ExpandableAction, { label: "Tool", arg: toolArg, status: message.status, children: /* @__PURE__ */ jsxs4("box", { flexDirection: "column", paddingLeft: 2, paddingX: 1, children: [
+          message.input && /* @__PURE__ */ jsx4("text", { fg: "#888888", selectable: true, children: typeof message.input === "string" ? truncate2(message.input, 300) : truncate2(JSON.stringify(message.input, null, 2), 300) }),
+          message.output && /* @__PURE__ */ jsx4("text", { fg: "#888888", selectable: true, children: truncate2(message.output, 300) })
+        ] }) });
+      }
+      return /* @__PURE__ */ jsx4(ActionLine, { label: "Tool", arg: toolArg, status: message.status });
+    }
+    case "web_search":
+      return /* @__PURE__ */ jsx4(ActionLine, { label: "Search", arg: truncate2(message.query, 50), status: message.status });
+    case "todo_list": {
+      const completed = message.items.filter((i) => i.completed).length;
+      const total = message.items.length;
+      return /* @__PURE__ */ jsxs4("box", { flexDirection: "column", paddingX: 1, children: [
+        /* @__PURE__ */ jsx4("text", { children: /* @__PURE__ */ jsx4("span", { fg: "#888888", children: /* @__PURE__ */ jsxs4("strong", { children: [
+          "Plan (",
+          completed,
+          "/",
+          total,
+          ")"
+        ] }) }) }),
+        message.items.map((item, i) => /* @__PURE__ */ jsxs4("text", { children: [
+          /* @__PURE__ */ jsx4("span", { fg: item.completed ? "#66bb6a" : "#555555", children: item.completed ? "  \u2611" : "  \u2610" }),
+          /* @__PURE__ */ jsxs4("span", { fg: "#ffffff", children: [
+            " ",
+            item.text
+          ] })
+        ] }, i))
+      ] });
+    }
+    case "subagent":
+      return /* @__PURE__ */ jsx4(ActionLine, { label: "Agent", arg: truncate2(message.description, 50), status: message.status });
+    case "error":
+      return /* @__PURE__ */ jsx4("box", { paddingX: 1, children: /* @__PURE__ */ jsx4("text", { fg: "#ff4444", selectable: true, children: message.message }) });
+    case "skill":
+      return /* @__PURE__ */ jsx4(ActionLine, { label: "Skill", arg: message.skillName + (message.args ? ` ${message.args}` : ""), status: message.status });
+    case "patch": {
+      const opCount = message.operations.length;
+      return /* @__PURE__ */ jsx4(ExpandableAction, { label: "Patch", arg: `${opCount}`, children: /* @__PURE__ */ jsx4("box", { flexDirection: "column", paddingLeft: 2, paddingX: 1, children: message.operations.map((op, i) => /* @__PURE__ */ jsxs4("text", { children: [
+        /* @__PURE__ */ jsx4(
+          "span",
+          {
+            fg: op.action === "add" ? "#66bb6a" : op.action === "delete" ? "#ff4444" : "#ffaa00",
+            children: op.action === "add" ? "+" : op.action === "delete" ? "-" : "~"
+          }
+        ),
+        /* @__PURE__ */ jsxs4("span", { fg: "#cccccc", children: [
+          " ",
+          op.path
+        ] })
+      ] }, i)) }) });
+    }
+    default:
+      return null;
+  }
+}
+
+// src/interactive/components/ChatArea.tsx
+import { jsx as jsx5, jsxs as jsxs5 } from "@opentui/react/jsx-runtime";
+var textareaKeyBindings = [
+  { name: "return", action: "submit" },
+  { name: "return", shift: true, action: "newline" },
+  { name: "return", ctrl: true, action: "newline" },
+  { name: "return", meta: true, action: "newline" }
+];
+var MODE_COLORS = {
+  build: { border: "#66bb6a", text: "#66bb6a" },
+  plan: { border: "#d97706", text: "#d97706" }
+};
+function ChatArea({
+  chats,
+  selectedChatId,
+  displayMessages,
+  onSelectChat,
+  onSendMessage,
+  onFocus,
+  focusPanel,
+  taskMode,
+  isProcessing,
+  loading
+}) {
+  const textareaRef = useRef(null);
+  const scrollboxRef = useRef(null);
+  const isAtBottomRef = useRef(true);
+  const onSendMessageRef = useRef(onSendMessage);
+  onSendMessageRef.current = onSendMessage;
+  const inputFocused = focusPanel === "chat-input";
+  const tabsFocused = focusPanel === "chat-tabs";
+  const historyFocused = focusPanel === "chat-history";
+  const anyFocused = inputFocused || tabsFocused || historyFocused;
+  const modeColors = MODE_COLORS[taskMode];
+  useEffect2(() => {
+    const scrollbox = scrollboxRef.current;
+    if (!scrollbox) return;
+    let lastScrollHeight = 0;
+    const tick = () => {
+      const viewportHeight = scrollbox.viewport?.height ?? 0;
+      const atBottom = scrollbox.scrollTop + viewportHeight >= scrollbox.scrollHeight - 3;
+      if (atBottom) {
+        isAtBottomRef.current = true;
+      } else if (scrollbox.scrollHeight === lastScrollHeight) {
+        isAtBottomRef.current = false;
+      }
+      if (isAtBottomRef.current && scrollbox.scrollHeight > lastScrollHeight) {
+        scrollbox.scrollTo(scrollbox.scrollHeight);
+      }
+      lastScrollHeight = scrollbox.scrollHeight;
+    };
+    const interval = setInterval(tick, 100);
+    return () => clearInterval(interval);
+  }, []);
+  useEffect2(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.onSubmit = () => {
+      const message = textarea.plainText.trim();
+      if (message) {
+        isAtBottomRef.current = true;
+        onSendMessageRef.current(message);
+        textarea.setText("");
+      }
+    };
+    return () => {
+      textarea.onSubmit = void 0;
+    };
+  }, []);
+  useKeyboard2((key) => {
+    if (!historyFocused) return;
+    const scrollbox = scrollboxRef.current;
+    if (!scrollbox) return;
+    if (key.name === "j" || key.name === "down") {
+      scrollbox.scrollBy(3);
+      return;
+    }
+    if (key.name === "k" || key.name === "up") {
+      scrollbox.scrollBy(-3);
+      return;
+    }
+  });
+  useKeyboard2((key) => {
+    if (!tabsFocused || chats.length <= 1 || !selectedChatId) return;
+    if (key.name === "left" || key.name === "right" || key.name === "tab" && !key.shift) {
+      const currentIdx = chats.findIndex((c) => c.id === selectedChatId);
+      if (currentIdx >= 0) {
+        const nextIdx = key.name === "left" ? (currentIdx - 1 + chats.length) % chats.length : (currentIdx + 1) % chats.length;
+        onSelectChat(chats[nextIdx].id);
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs5(
+    "box",
+    {
+      flexGrow: 1,
+      border: true,
+      borderStyle: "rounded",
+      borderColor: anyFocused ? "#66bb6a" : "#333333",
+      title: "Chat",
+      titleAlignment: "center",
+      flexDirection: "column",
+      backgroundColor: "#000000",
+      children: [
+        chats.length > 1 && /* @__PURE__ */ jsx5(
+          "box",
+          {
+            height: 3,
+            paddingX: 1,
+            marginX: 1,
+            border: true,
+            borderColor: tabsFocused ? "#66bb6a" : "#333333",
+            backgroundColor: "#000000",
+            flexDirection: "row",
+            gap: 1,
+            alignItems: "center",
+            onMouseDown: () => onFocus("chat-tabs"),
+            children: chats.map((chat) => {
+              const isSelected = chat.id === selectedChatId;
+              const label = `${chat.title}${chat.processing ? " ..." : ""}`;
+              return /* @__PURE__ */ jsx5(
+                "box",
+                {
+                  backgroundColor: isSelected ? "#1a1a1a" : void 0,
+                  paddingX: 1,
+                  onMouseDown: () => {
+                    onSelectChat(chat.id);
+                    onFocus("chat-tabs");
+                  },
+                  children: /* @__PURE__ */ jsx5("text", { children: /* @__PURE__ */ jsx5("span", { fg: isSelected ? modeColors.text : "#666666", children: label }) })
+                },
+                chat.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          "scrollbox",
+          {
+            ref: scrollboxRef,
+            flexGrow: 1,
+            focused: historyFocused,
+            paddingX: 1,
+            paddingY: 1,
+            onMouseDown: () => onFocus("chat-history"),
+            children: loading ? /* @__PURE__ */ jsx5("box", { paddingX: 1, children: /* @__PURE__ */ jsx5("text", { fg: "#666666", children: "Loading messages..." }) }) : displayMessages.length === 0 ? /* @__PURE__ */ jsx5("box", { paddingX: 1, children: /* @__PURE__ */ jsx5("text", { fg: "#666666", children: "No messages yet. Send a message to start chatting." }) }) : (() => {
+              const activeChat = chats.find((c) => c.id === selectedChatId);
+              const provider = activeChat?.provider ?? "claude";
+              const primaryTypes = /* @__PURE__ */ new Set(["user", "agent", "todo_list"]);
+              return displayMessages.map((msg, i) => {
+                const prev = i > 0 ? displayMessages[i - 1] : null;
+                const needsSpacing = prev && (primaryTypes.has(msg.type) || primaryTypes.has(prev.type));
+                return /* @__PURE__ */ jsxs5("box", { flexDirection: "column", children: [
+                  needsSpacing && /* @__PURE__ */ jsx5("box", { height: 1 }),
+                  /* @__PURE__ */ jsx5(ChatMessage, { message: msg, provider })
+                ] }, msg.id || `msg-${i}`);
+              });
+            })()
+          }
+        ),
+        /* @__PURE__ */ jsxs5(
+          "box",
+          {
+            flexDirection: "column",
+            flexShrink: 0,
+            border: true,
+            borderColor: inputFocused ? modeColors.border : "#333333",
+            backgroundColor: "#111111",
+            onMouseDown: () => onFocus("chat-input"),
+            children: [
+              /* @__PURE__ */ jsx5("box", { height: 6, paddingX: 1, children: /* @__PURE__ */ jsx5(
+                "textarea",
+                {
+                  ref: textareaRef,
+                  keyBindings: textareaKeyBindings,
+                  placeholder: "Type a message... (Enter to send, Shift+Enter for newline)",
+                  focused: inputFocused,
+                  backgroundColor: "#111111",
+                  textColor: "#ffffff",
+                  focusedBackgroundColor: "#111111",
+                  placeholderColor: "#555555",
+                  width: "100%",
+                  height: 5
+                }
+              ) }),
+              /* @__PURE__ */ jsxs5(
+                "box",
+                {
+                  height: 1,
+                  paddingX: 1,
+                  flexDirection: "row",
+                  justifyContent: "space-between",
+                  children: [
+                    /* @__PURE__ */ jsx5("text", { children: /* @__PURE__ */ jsx5("span", { fg: modeColors.text, children: taskMode === "build" ? "Build" : "Plan" }) }),
+                    isProcessing && /* @__PURE__ */ jsx5(SpinnerLabel, { color: "#ffaa00", label: "thinking" })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/interactive/components/WorkspaceInfo.tsx
+import React4 from "react";
+import open from "open";
+import { Fragment, jsx as jsx6, jsxs as jsxs6 } from "@opentui/react/jsx-runtime";
+var WEB_APP_URL = process.env.REPLICAS_WEB_URL || "https://replicas.dev";
+var AUTH_METHOD_LABELS = {
+  oauth: "OAuth",
+  api_key: "API Key",
+  bedrock: "Bedrock",
+  none: null
+};
+function StatusDot({ status }) {
+  if (status === true || status === "yes") {
+    return /* @__PURE__ */ jsx6("span", { fg: "#66bb6a", children: "\u2713" });
+  }
+  if (status === false || status === "no") {
+    return /* @__PURE__ */ jsx6("span", { fg: "#ff4444", children: "\u2717" });
+  }
+  return /* @__PURE__ */ jsx6("span", { fg: "#555555", children: "-" });
+}
+function SectionLabel({ title }) {
+  return /* @__PURE__ */ jsx6("box", { backgroundColor: "#151515", paddingX: 1, children: /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#666666", children: /* @__PURE__ */ jsx6("strong", { children: title.toUpperCase() }) }) }) });
+}
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsxs6("box", { flexDirection: "column", marginBottom: 1, children: [
+    /* @__PURE__ */ jsx6(SectionLabel, { title }),
+    /* @__PURE__ */ jsx6("box", { flexDirection: "column", backgroundColor: "#0a0a0a", children })
+  ] });
+}
+function CardItem({ label, status }) {
+  return /* @__PURE__ */ jsxs6(
+    "box",
+    {
+      flexDirection: "row",
+      justifyContent: "space-between",
+      paddingX: 1,
+      backgroundColor: "#111111",
+      marginBottom: 0,
+      children: [
+        /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#cccccc", children: label }) }),
+        /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6(StatusDot, { status }) })
+      ]
+    }
+  );
+}
+function DetailList({
+  expected,
+  actual
+}) {
+  const uniqueExpected = Array.from(new Set(expected)).sort((a, b) => a.localeCompare(b));
+  const actualSet = new Set(actual);
+  const rows = uniqueExpected.length > 0 ? uniqueExpected : Array.from(actualSet).sort((a, b) => a.localeCompare(b));
+  if (rows.length === 0) return null;
+  return /* @__PURE__ */ jsx6(Fragment, { children: rows.map((item, i) => /* @__PURE__ */ jsx6(CardItem, { label: item, status: actualSet.has(item) }, i)) });
+}
+function WorkspaceInfo({ status, workspaceName, workspaceId, focused, loading, envConfig, previews }) {
+  const borderColor = focused ? "#66bb6a" : "#333333";
+  if (!workspaceName) {
+    return /* @__PURE__ */ jsx6(
+      "box",
+      {
+        width: 30,
+        border: true,
+        borderStyle: "rounded",
+        borderColor,
+        title: "Info",
+        titleAlignment: "center",
+        flexDirection: "column",
+        paddingX: 1,
+        backgroundColor: "#000000",
+        children: /* @__PURE__ */ jsx6("text", { fg: "#666666", children: "Select a workspace" })
+      }
+    );
+  }
+  if (loading || !status) {
+    return /* @__PURE__ */ jsx6(
+      "box",
+      {
+        width: 30,
+        border: true,
+        borderStyle: "rounded",
+        borderColor,
+        title: "Info",
+        titleAlignment: "center",
+        flexDirection: "column",
+        paddingX: 1,
+        backgroundColor: "#000000",
+        children: /* @__PURE__ */ jsx6("text", { fg: "#666666", children: "Loading..." })
+      }
+    );
+  }
+  const statusColor = status.status === "active" ? "#66bb6a" : status.status === "sleeping" ? "#ffaa00" : "#ff4444";
+  const env = status.environmentDetails;
+  const expectedSkills = (envConfig.skills?.environment_skills ?? []).map((s) => s.source);
+  const expectedGlobalVars = (envConfig.variables?.environment_variables ?? []).filter((v) => v.scope_type === "global").map((v) => v.key);
+  const expectedGlobalFiles = (envConfig.files?.environment_files ?? []).filter((f) => f.scope_type === "global").map((f) => f.path);
+  return /* @__PURE__ */ jsx6(
+    "box",
+    {
+      width: 30,
+      border: true,
+      borderStyle: "rounded",
+      borderColor,
+      title: "Info",
+      titleAlignment: "center",
+      flexDirection: "column",
+      backgroundColor: "#000000",
+      children: /* @__PURE__ */ jsxs6("scrollbox", { focused, flexGrow: 1, children: [
+        /* @__PURE__ */ jsx6("box", { backgroundColor: "#111111", paddingX: 1, marginBottom: 1, children: /* @__PURE__ */ jsxs6("box", { flexDirection: "column", children: [
+          /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx6("strong", { children: workspaceName }) }) }),
+          /* @__PURE__ */ jsxs6("text", { children: [
+            /* @__PURE__ */ jsxs6("span", { fg: statusColor, children: [
+              "\u25CF",
+              " ",
+              status.status
+            ] }),
+            env && /* @__PURE__ */ jsxs6("span", { fg: "#555555", children: [
+              " ",
+              "\u2502",
+              " ",
+              env.engineVersion
+            ] })
+          ] }),
+          workspaceId && /* @__PURE__ */ jsx6(
+            "box",
+            {
+              onMouseDown: () => {
+                open(`${WEB_APP_URL}/dashboard?workspaceId=${workspaceId}`).catch(() => {
+                });
+              },
+              children: /* @__PURE__ */ jsxs6("text", { children: [
+                /* @__PURE__ */ jsxs6("span", { fg: "#7dcfff", children: [
+                  "\u2197",
+                  " Open in Dashboard"
+                ] }),
+                /* @__PURE__ */ jsx6("span", { fg: "#555555", children: " (o)" })
+              ] })
+            }
+          )
+        ] }) }),
+        (status.isClaudeProcessing || status.isCodexProcessing) && /* @__PURE__ */ jsxs6("box", { backgroundColor: "#1a1500", paddingX: 1, marginX: 1, marginBottom: 1, children: [
+          status.isClaudeProcessing && /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsxs6("span", { fg: "#ffaa00", children: [
+            "\u25C6",
+            " Claude thinking..."
+          ] }) }),
+          status.isCodexProcessing && /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsxs6("span", { fg: "#ffaa00", children: [
+            "\u25C6",
+            " Codex thinking..."
+          ] }) })
+        ] }),
+        env && /* @__PURE__ */ jsxs6(Section, { title: "Agents", children: [
+          /* @__PURE__ */ jsxs6("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
+            /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#cccccc", children: "Claude" }) }),
+            /* @__PURE__ */ jsx6("text", { children: AUTH_METHOD_LABELS[env.claudeAuthMethod] ? /* @__PURE__ */ jsx6("span", { fg: "#66bb6a", children: AUTH_METHOD_LABELS[env.claudeAuthMethod] }) : /* @__PURE__ */ jsx6("span", { fg: "#ff4444", children: "\u2717" }) })
+          ] }),
+          /* @__PURE__ */ jsxs6("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
+            /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#cccccc", children: "Codex" }) }),
+            /* @__PURE__ */ jsx6("text", { children: AUTH_METHOD_LABELS[env.codexAuthMethod] ? /* @__PURE__ */ jsx6("span", { fg: "#66bb6a", children: AUTH_METHOD_LABELS[env.codexAuthMethod] }) : /* @__PURE__ */ jsx6("span", { fg: "#ff4444", children: "\u2717" }) })
+          ] })
+        ] }),
+        env && /* @__PURE__ */ jsxs6(Section, { title: "Integrations", children: [
+          /* @__PURE__ */ jsx6(CardItem, { label: "GitHub", status: env.githubAccessConfigured }),
+          /* @__PURE__ */ jsx6(CardItem, { label: "Slack", status: env.slackAccessConfigured }),
+          /* @__PURE__ */ jsx6(CardItem, { label: "Linear", status: env.linearAccessConfigured })
+        ] }),
+        previews.length > 0 && /* @__PURE__ */ jsx6(Section, { title: "Previews", children: previews.map((preview, i) => /* @__PURE__ */ jsxs6("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
+          /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsxs6("span", { fg: "#cccccc", children: [
+            ":",
+            preview.port
+          ] }) }),
+          /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("a", { href: preview.publicUrl, children: /* @__PURE__ */ jsx6("span", { fg: "#66bb6a", children: "\u2197" }) }) })
+        ] }, i)) }),
+        status.repoStatuses && status.repoStatuses.length > 0 && /* @__PURE__ */ jsx6(Section, { title: "Repositories", children: status.repoStatuses.map((repo, i) => /* @__PURE__ */ jsxs6(React4.Fragment, { children: [
+          /* @__PURE__ */ jsx6("box", { backgroundColor: "#111111", paddingX: 1, children: /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx6("strong", { children: repo.name }) }) }) }),
+          /* @__PURE__ */ jsx6("box", { backgroundColor: "#111111", paddingX: 1, flexDirection: "row", justifyContent: "space-between", children: /* @__PURE__ */ jsxs6("text", { children: [
+            /* @__PURE__ */ jsxs6("span", { fg: "#555555", children: [
+              "\u2514",
+              " "
+            ] }),
+            /* @__PURE__ */ jsx6("span", { fg: repo.currentBranch !== repo.defaultBranch ? "#ffaa00" : "#66bb6a", children: repo.currentBranch })
+          ] }) }),
+          repo.gitDiff && (repo.gitDiff.added > 0 || repo.gitDiff.removed > 0) && /* @__PURE__ */ jsx6("box", { backgroundColor: "#111111", paddingX: 1, flexDirection: "row", children: /* @__PURE__ */ jsxs6("text", { children: [
+            /* @__PURE__ */ jsx6("span", { fg: "#555555", children: "  " }),
+            /* @__PURE__ */ jsxs6("span", { fg: "#66bb6a", children: [
+              "+",
+              repo.gitDiff.added
+            ] }),
+            /* @__PURE__ */ jsx6("span", { fg: "#444444", children: " / " }),
+            /* @__PURE__ */ jsxs6("span", { fg: "#ff4444", children: [
+              "-",
+              repo.gitDiff.removed
+            ] })
+          ] }) }),
+          repo.prUrl && /* @__PURE__ */ jsx6("box", { backgroundColor: "#111111", paddingX: 1, children: /* @__PURE__ */ jsxs6("text", { children: [
+            /* @__PURE__ */ jsx6("span", { fg: "#555555", children: "  " }),
+            /* @__PURE__ */ jsx6("a", { href: repo.prUrl, children: /* @__PURE__ */ jsxs6("span", { fg: "#66bb6a", children: [
+              "View PR ",
+              "\u2197"
+            ] }) })
+          ] }) })
+        ] }, i)) }),
+        env && /* @__PURE__ */ jsxs6(Section, { title: "Hooks", children: [
+          /* @__PURE__ */ jsx6(CardItem, { label: "Global warm", status: env.globalWarmHookCompleted.status }),
+          env.repositories.map((repo, i) => /* @__PURE__ */ jsxs6(React4.Fragment, { children: [
+            /* @__PURE__ */ jsx6("box", { backgroundColor: "#111111", paddingX: 1, children: /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6("span", { fg: "#ffffff", children: /* @__PURE__ */ jsx6("strong", { children: repo.repositoryName }) }) }) }),
+            /* @__PURE__ */ jsxs6("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
+              /* @__PURE__ */ jsxs6("text", { children: [
+                /* @__PURE__ */ jsxs6("span", { fg: "#555555", children: [
+                  "\u251C",
+                  " "
+                ] }),
+                /* @__PURE__ */ jsx6("span", { fg: "#cccccc", children: "warm" })
+              ] }),
+              /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6(StatusDot, { status: repo.warmHookCompleted }) })
+            ] }),
+            /* @__PURE__ */ jsxs6("box", { flexDirection: "row", justifyContent: "space-between", paddingX: 1, backgroundColor: "#111111", children: [
+              /* @__PURE__ */ jsxs6("text", { children: [
+                /* @__PURE__ */ jsxs6("span", { fg: "#555555", children: [
+                  "\u2514",
+                  " "
+                ] }),
+                /* @__PURE__ */ jsx6("span", { fg: "#cccccc", children: "start" })
+              ] }),
+              /* @__PURE__ */ jsx6("text", { children: /* @__PURE__ */ jsx6(StatusDot, { status: repo.startHookCompleted }) })
+            ] })
+          ] }, i))
+        ] }),
+        env && (expectedSkills.length > 0 || env.skillsInstalled.length > 0) && /* @__PURE__ */ jsx6(Section, { title: "Skills", children: /* @__PURE__ */ jsx6(DetailList, { expected: expectedSkills, actual: env.skillsInstalled }) }),
+        env && (expectedGlobalVars.length > 0 || env.envVarsSet.length > 0) && /* @__PURE__ */ jsx6(Section, { title: "Env Vars", children: /* @__PURE__ */ jsx6(DetailList, { expected: expectedGlobalVars, actual: env.envVarsSet }) }),
+        env && (expectedGlobalFiles.length > 0 || env.filesUploaded.length > 0) && /* @__PURE__ */ jsx6(Section, { title: "Files", children: /* @__PURE__ */ jsx6(DetailList, { expected: expectedGlobalFiles, actual: env.filesUploaded }) })
+      ] })
+    }
+  );
+}
+
+// src/interactive/components/Toast.tsx
+import { useTerminalDimensions as useTerminalDimensions2 } from "@opentui/react";
+
+// src/interactive/toast-context.tsx
+import { createContext as createContext2, useContext as useContext2, useState as useState4, useCallback as useCallback4, useRef as useRef2 } from "react";
+import { jsx as jsx7 } from "@opentui/react/jsx-runtime";
+var ToastContext = createContext2(null);
+function useToast() {
+  const ctx = useContext2(ToastContext);
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
+  return ctx;
+}
+function ToastProvider({ children }) {
+  const [current, setCurrent] = useState4(null);
+  const timeoutRef = useRef2(null);
+  const show = useCallback4((options) => {
+    const { message, variant = "info", duration = 3e3 } = options;
+    setCurrent({ message, variant });
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setCurrent(null);
+    }, duration);
+  }, []);
+  const error = useCallback4((err) => {
+    const message = err instanceof Error ? err.message : "An error occurred";
+    show({ message, variant: "error", duration: 5e3 });
+  }, [show]);
+  return /* @__PURE__ */ jsx7(ToastContext.Provider, { value: { current, show, error }, children });
+}
+
+// src/interactive/components/Toast.tsx
+import { jsx as jsx8 } from "@opentui/react/jsx-runtime";
+var VARIANT_COLORS = {
+  info: { border: "#66bb6a", bg: "#0a1a0a" },
+  success: { border: "#66bb6a", bg: "#0a1a0a" },
+  warning: { border: "#ffaa00", bg: "#1a1a0a" },
+  error: { border: "#ff4444", bg: "#1a0a0a" }
+};
+function Toast() {
+  const { current } = useToast();
+  const { width } = useTerminalDimensions2();
+  if (!current) return null;
+  const colors = VARIANT_COLORS[current.variant] ?? VARIANT_COLORS.info;
+  const toastWidth = Math.min(60, width - 4);
+  return /* @__PURE__ */ jsx8(
+    "box",
+    {
+      position: "absolute",
+      bottom: 2,
+      right: 2,
+      width: toastWidth,
+      paddingX: 2,
+      paddingY: 1,
+      backgroundColor: colors.bg,
+      borderColor: colors.border,
+      border: true,
+      borderStyle: "rounded",
+      zIndex: 100,
+      children: /* @__PURE__ */ jsx8("text", { fg: "#ffffff", selectable: true, children: current.message })
+    }
+  );
+}
+
+// src/interactive/App.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "@opentui/react/jsx-runtime";
+var FOCUS_ORDER = ["sidebar", "chat-tabs", "chat-history", "chat-input", "info"];
+var MOCK_CHATS = [
+  { id: "mock-claude", provider: "claude", title: "Claude Code", createdAt: "", updatedAt: "", processing: false },
+  { id: "mock-codex", provider: "codex", title: "Codex", createdAt: "", updatedAt: "", processing: false }
+];
+var MONOLITH_URL = process.env.REPLICAS_MONOLITH_URL || "https://api.replicas.dev";
+var queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false
+    }
+  }
+});
+var authValue = {
+  getAccessToken: () => getValidToken(),
+  getOrganizationId: () => getOrganizationId(),
+  monolithUrl: MONOLITH_URL,
+  queryClient
+};
+function App() {
+  return /* @__PURE__ */ jsx9(ReplicasAuthProvider, { value: authValue, children: /* @__PURE__ */ jsxs7(ToastProvider, { children: [
+    /* @__PURE__ */ jsx9(AppInner, {}),
+    /* @__PURE__ */ jsx9(Toast, {})
+  ] }) });
+}
+function AppInner() {
+  const renderer = useRenderer();
+  const { width } = useTerminalDimensions3();
+  const toast = useToast();
+  useEffect3(() => {
+    const handler = (selection) => {
+      const text = selection.getSelectedText();
+      if (text) {
+        renderer.copyToClipboardOSC52(text);
+        toast.show({ message: "Copied to clipboard", variant: "info", duration: 1500 });
+      }
+    };
+    renderer.on("selection", handler);
+    return () => {
+      renderer.off("selection", handler);
+    };
+  }, [renderer, toast]);
+  const [selectedWorkspaceId, setSelectedWorkspaceId] = useState5(null);
+  const [selectedChatId, setSelectedChatId] = useState5(null);
+  const [focusPanel, setFocusPanel] = useState5("sidebar");
+  const [taskMode, setTaskMode] = useState5("build");
+  const [mockWorkspaces, setMockWorkspaces] = useState5([]);
+  const mockToRealRef = useRef3(/* @__PURE__ */ new Map());
+  const mockGroupRef = useRef3(/* @__PURE__ */ new Map());
+  const [mockMessages, setMockMessages] = useState5([]);
+  const [mockThinking, setMockThinking] = useState5(false);
+  const pendingMessageRef = useRef3(/* @__PURE__ */ new Map());
+  const mockIds = useMemo3(() => new Set(mockWorkspaces.map((m) => m.id)), [mockWorkspaces]);
+  const isMockSelected = selectedWorkspaceId ? mockIds.has(selectedWorkspaceId) : false;
+  const { data: workspacesData, isLoading: loadingWorkspaces } = useWorkspaces(1, 100, "organization");
+  const { data: reposData } = useRepositories();
+  const { data: setsData } = useRepositorySets();
+  const { data: envSkills } = useEnvironmentSkills();
+  const { data: envVariables } = useEnvironmentVariables();
+  const { data: envFiles } = useEnvironmentFiles();
+  const { data: statusData, isLoading: loadingStatus } = useWorkspaceStatus(
+    isMockSelected ? null : selectedWorkspaceId,
+    { includeDiffs: true }
+  );
+  const { data: chatsData } = useWorkspaceChats(isMockSelected ? null : selectedWorkspaceId);
+  const { data: historyData, isLoading: loadingMessages } = useChatHistory(
+    isMockSelected ? null : selectedWorkspaceId,
+    selectedChatId?.startsWith("mock-") ? null : selectedChatId
+  );
+  const { data: previewsData } = useWorkspacePreviews(isMockSelected ? null : selectedWorkspaceId);
+  const { connected: sseConnected } = useWorkspaceEvents(
+    isMockSelected ? null : selectedWorkspaceId
+  );
+  const createWorkspaceMutation = useCreateWorkspace();
+  const deleteWorkspaceMutation = useDeleteWorkspace();
+  const generateNameMutation = useGenerateWorkspaceName();
+  const sendMessageMutation = useSendChatMessage(selectedWorkspaceId, selectedChatId);
+  const interruptMutation = useInterruptChat(selectedWorkspaceId, selectedChatId);
+  const workspaces = workspacesData?.workspaces ?? [];
+  const repositories = reposData?.repositories ?? [];
+  const repositorySets = setsData?.repository_sets ?? [];
+  const chats = isMockSelected ? MOCK_CHATS : chatsData?.chats ?? [];
+  const previews = previewsData?.previews ?? [];
+  const allWorkspaces = useMemo3(() => [...mockWorkspaces, ...workspaces], [mockWorkspaces, workspaces]);
+  const groups = useMemo3(
+    () => buildGroups(allWorkspaces, workspacesData, repositories, repositorySets, mockGroupRef.current),
+    [allWorkspaces, workspacesData, repositories, repositorySets]
+  );
+  const selectedWorkspace = allWorkspaces.find((ws) => ws.id === selectedWorkspaceId) ?? null;
+  const selectedChat = chats.find((c) => c.id === selectedChatId) ?? null;
+  const isProcessing = mockThinking || (selectedChat?.processing ?? false);
+  const displayMessages = useMemo3(() => {
+    if (isMockSelected) return mockMessages;
+    const rawEvents = historyData?.events ?? [];
+    const events = rawEvents.filter(isAgentBackendEvent);
+    if (events.length === 0) return [];
+    const provider = selectedChat?.provider ?? "claude";
+    const parsed = parseAgentEvents(events, provider);
+    return filterDisplayMessages(parsed, provider);
+  }, [isMockSelected, mockMessages, historyData, selectedChat?.provider]);
+  const showInfoPanel = width >= 100;
+  const showWorkspacePanel = width >= 60;
+  useEffect3(() => {
+    if (!selectedWorkspaceId && workspaces.length > 0) {
+      setSelectedWorkspaceId(workspaces[0].id);
+    }
+  }, [workspaces, selectedWorkspaceId]);
+  useEffect3(() => {
+    if (chats.length > 0 && !selectedChatId) {
+      setSelectedChatId(chats[0].id);
+    } else if (chats.length > 0 && selectedChatId && !chats.find((c) => c.id === selectedChatId)) {
+      setSelectedChatId(chats[0].id);
+    }
+  }, [chats, selectedChatId]);
+  useEffect3(() => {
+    setMockMessages([]);
+    setMockThinking(false);
+    setSelectedChatId(null);
+  }, [selectedWorkspaceId]);
+  useEffect3(() => {
+    if (mockWorkspaces.length === 0) return;
+    const realIds = new Set(workspaces.map((w) => w.id));
+    let changed = false;
+    const remaining = mockWorkspaces.filter((mock) => {
+      const realId = mockToRealRef.current.get(mock.id);
+      if (realId && realIds.has(realId)) {
+        if (selectedWorkspaceId === mock.id) {
+          setSelectedWorkspaceId(realId);
+        }
+        const pending = pendingMessageRef.current.get(mock.id);
+        if (pending) {
+          pendingMessageRef.current.delete(mock.id);
+          pendingMessageRef.current.set(realId, pending);
+        }
+        mockToRealRef.current.delete(mock.id);
+        mockGroupRef.current.delete(mock.id);
+        setMockMessages([]);
+        setMockThinking(false);
+        changed = true;
+        return false;
+      }
+      return true;
+    });
+    if (changed) setMockWorkspaces(remaining);
+  }, [workspaces, mockWorkspaces, selectedWorkspaceId]);
+  useEffect3(() => {
+    if (!selectedWorkspaceId || isMockSelected) return;
+    if (!selectedChatId || selectedChatId.startsWith("mock-")) return;
+    if (statusData?.status !== "active") return;
+    const pending = pendingMessageRef.current.get(selectedWorkspaceId);
+    if (!pending) return;
+    pendingMessageRef.current.delete(selectedWorkspaceId);
+    const noBranches = statusData?.repoStatuses && statusData.repoStatuses.length > 0 && statusData.repoStatuses.every((r) => r.currentBranch === r.defaultBranch);
+    if (noBranches) {
+      generateNameMutation.mutateAsync({ workspaceId: selectedWorkspaceId, prompt: pending }).catch(() => {
+      });
+    }
+    sendMessageMutation.mutate({ message: pending });
+  }, [selectedWorkspaceId, selectedChatId, isMockSelected, statusData?.status]);
+  useEffect3(() => {
+    if (mockWorkspaces.length === 0) return;
+    const interval = setInterval(() => {
+      queryClient.invalidateQueries({ queryKey: ["workspaces"] });
+    }, 5e3);
+    return () => clearInterval(interval);
+  }, [mockWorkspaces.length]);
+  useKeyboard3((key) => {
+    if (key.name === "f12") {
+      renderer.console.toggle();
+      return;
+    }
+    if (key.ctrl && key.name === "c") {
+      renderer.destroy();
+      return;
+    }
+    if (key.name === "escape") {
+      if (isProcessing && selectedWorkspaceId && selectedChatId) {
+        interruptMutation.mutate();
+      }
+      return;
+    }
+    if (key.shift && key.name === "tab") {
+      setFocusPanel((current) => {
+        const availablePanels = FOCUS_ORDER.filter((p) => {
+          if (p === "sidebar" && !showWorkspacePanel) return false;
+          if ((p === "chat-tabs" || p === "chat-history" || p === "chat-input") && !selectedWorkspaceId) return false;
+          if (p === "chat-tabs" && chats.length <= 1) return false;
+          if (p === "info" && !showInfoPanel) return false;
+          return true;
+        });
+        const idx = availablePanels.indexOf(current);
+        return availablePanels[(idx + 1) % availablePanels.length];
+      });
+      return;
+    }
+    if (key.name === "tab" && focusPanel === "chat-input") {
+      setTaskMode((m) => m === "build" ? "plan" : "build");
+      return;
+    }
+    if (key.name === "o" && focusPanel === "info" && selectedWorkspaceId) {
+      const webUrl = process.env.REPLICAS_WEB_URL || "https://replicas.dev";
+      import("open").then((mod) => mod.default(`${webUrl}/dashboard?workspaceId=${selectedWorkspaceId}`)).catch(() => {
+      });
+      return;
+    }
+    if (focusPanel === "chat-input") return;
+  });
+  const handleSelectWorkspace = useCallback5((workspaceId) => {
+    setSelectedWorkspaceId(workspaceId);
+    setFocusPanel("chat-input");
+  }, []);
+  const handleFocus = useCallback5((panel) => {
+    setFocusPanel(panel);
+  }, []);
+  const handleCreateWorkspace = useCallback5(
+    async (groupId, groupType) => {
+      const orgId = getOrganizationId() ?? "";
+      const mock = createMockWorkspaceRecord(orgId);
+      mockGroupRef.current.set(mock.id, groupId);
+      setMockWorkspaces((prev) => [mock, ...prev]);
+      setSelectedWorkspaceId(mock.id);
+      try {
+        const request = groupType === "set" ? { repository_set_id: groupId.replace(/^set:/, ""), name: mock.name, placeholder: true } : { repository_ids: [groupId], name: mock.name, placeholder: true };
+        const result = await createWorkspaceMutation.mutateAsync(request);
+        mockToRealRef.current.set(mock.id, result.workspace.id);
+      } catch (err) {
+        mockGroupRef.current.delete(mock.id);
+        setMockWorkspaces((prev) => prev.filter((m) => m.id !== mock.id));
+        toast.error(err);
+      }
+    },
+    [createWorkspaceMutation, toast]
+  );
+  const handleDeleteWorkspace = useCallback5(
+    async (workspaceId) => {
+      if (mockIds.has(workspaceId)) {
+        mockGroupRef.current.delete(workspaceId);
+        mockToRealRef.current.delete(workspaceId);
+        setMockWorkspaces((prev) => prev.filter((m) => m.id !== workspaceId));
+        if (selectedWorkspaceId === workspaceId) setSelectedWorkspaceId(null);
+        return;
+      }
+      try {
+        await deleteWorkspaceMutation.mutateAsync(workspaceId);
+        if (selectedWorkspaceId === workspaceId) setSelectedWorkspaceId(null);
+        toast.show({ message: "Workspace deleted", variant: "info" });
+      } catch (err) {
+        toast.error(err);
+      }
+    },
+    [mockIds, selectedWorkspaceId, deleteWorkspaceMutation]
+  );
+  const handleSelectChat = useCallback5((chatId) => {
+    setSelectedChatId(chatId);
+  }, []);
+  const handleSendMessage = useCallback5(
+    async (message) => {
+      if (!selectedWorkspaceId || !selectedChatId) return;
+      if (isMockSelected) {
+        const { message: userMsg } = createUserMessage(message);
+        setMockMessages((prev) => [...prev, userMsg]);
+        pendingMessageRef.current.set(selectedWorkspaceId, message);
+        setMockThinking(true);
+        return;
+      }
+      sendMessageMutation.mutate({
+        message,
+        permissionMode: taskMode === "plan" ? "read" : void 0
+      });
+    },
+    [selectedWorkspaceId, selectedChatId, isMockSelected, sendMessageMutation, taskMode]
+  );
+  return /* @__PURE__ */ jsxs7("box", { flexDirection: "column", width: "100%", height: "100%", backgroundColor: "#000000", children: [
+    /* @__PURE__ */ jsxs7("box", { flexDirection: "row", flexGrow: 1, backgroundColor: "#000000", children: [
+      showWorkspacePanel && /* @__PURE__ */ jsx9(
+        WorkspaceSidebar,
+        {
+          groups,
+          selectedWorkspaceId,
+          mockIds,
+          onSelectWorkspace: handleSelectWorkspace,
+          onCreateWorkspace: handleCreateWorkspace,
+          onDeleteWorkspace: handleDeleteWorkspace,
+          focused: focusPanel === "sidebar",
+          loading: loadingWorkspaces
+        }
+      ),
+      selectedWorkspaceId ? /* @__PURE__ */ jsx9(
+        ChatArea,
+        {
+          chats,
+          selectedChatId,
+          displayMessages,
+          onSelectChat: handleSelectChat,
+          onSendMessage: handleSendMessage,
+          onFocus: handleFocus,
+          focusPanel,
+          taskMode,
+          isProcessing,
+          loading: loadingMessages
+        }
+      ) : /* @__PURE__ */ jsx9(
+        "box",
+        {
+          flexGrow: 1,
+          border: true,
+          borderStyle: "rounded",
+          borderColor: "#333333",
+          backgroundColor: "#000000",
+          justifyContent: "center",
+          alignItems: "center",
+          children: /* @__PURE__ */ jsx9("text", { fg: "#555555", children: "Create a workspace to begin building!" })
+        }
+      ),
+      showInfoPanel && /* @__PURE__ */ jsx9(
+        WorkspaceInfo,
+        {
+          status: statusData ?? null,
+          workspaceName: selectedWorkspace?.name ?? null,
+          workspaceId: selectedWorkspaceId,
+          focused: focusPanel === "info",
+          loading: loadingStatus,
+          envConfig: {
+            skills: envSkills ?? null,
+            variables: envVariables ?? null,
+            files: envFiles ?? null
+          },
+          previews
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx9(
+      StatusBar,
+      {
+        focusPanel
+      }
+    )
+  ] });
+}
+
+// src/interactive/index.tsx
+import { jsx as jsx10 } from "@opentui/react/jsx-runtime";
+async function launchInteractive() {
+  const renderer = await createCliRenderer({
+    exitOnCtrlC: false
+  });
+  createRoot(renderer).render(/* @__PURE__ */ jsx10(App, {}));
+}
+export {
+  launchInteractive
+};