@vibe80/vibe80 0.1.1

package/client/src/hooks/useTerminalSession.js

@@ -0,0 +1,328 @@
+import { useCallback, useEffect } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+
+const terminalWsUrl = (sessionId, worktreeId) => {
+  const params = new URLSearchParams();
+  if (sessionId) {
+    params.set("session", sessionId);
+  }
+  if (worktreeId) {
+    params.set("worktreeId", worktreeId);
+  }
+  return `/terminal-ws?${params.toString()}`;
+};
+
+export default function useTerminalSession({
+  activePane,
+  activeWorktreeId,
+  attachmentSessionId,
+  terminalEnabled,
+  terminalContainerRef,
+  terminalDisposableRef,
+  terminalFitRef,
+  terminalRef,
+  terminalSessionRef,
+  terminalSocketRef,
+  terminalWorktreeRef,
+  themeMode,
+  workspaceToken,
+}) {
+  const connectTerminal = useCallback(() => {
+    if (!terminalEnabled) {
+      return;
+    }
+    if (!workspaceToken) {
+      return;
+    }
+    const sessionId = attachmentSessionId;
+    if (!sessionId) {
+      return;
+    }
+    const worktreeId =
+      activeWorktreeId && activeWorktreeId !== "main"
+        ? activeWorktreeId
+        : null;
+    if (
+      terminalSocketRef.current &&
+      terminalSocketRef.current.readyState <= WebSocket.OPEN &&
+      terminalSessionRef.current === sessionId &&
+      terminalWorktreeRef.current === worktreeId
+    ) {
+      return;
+    }
+    if (terminalSocketRef.current) {
+      terminalSocketRef.current.close();
+    }
+    const term = terminalRef.current;
+    if (term) {
+      term.reset();
+    }
+    const socket = new WebSocket(terminalWsUrl(sessionId, worktreeId));
+    terminalSocketRef.current = socket;
+    terminalSessionRef.current = sessionId;
+    terminalWorktreeRef.current = worktreeId;
+    let authenticated = false;
+
+    socket.addEventListener("open", () => {
+      socket.send(JSON.stringify({ type: "auth", token: workspaceToken }));
+    });
+
+    socket.addEventListener("message", (event) => {
+      let payload = null;
+      try {
+        payload = JSON.parse(event.data);
+      } catch {
+        return;
+      }
+      if (!payload?.type) {
+        return;
+      }
+      if (payload.type === "auth_ok") {
+        if (authenticated) {
+          return;
+        }
+        authenticated = true;
+        const term = terminalRef.current;
+        const fitAddon = terminalFitRef.current;
+        if (term && fitAddon) {
+          fitAddon.fit();
+          socket.send(
+            JSON.stringify({ type: "init", cols: term.cols, rows: term.rows })
+          );
+        }
+        return;
+      }
+      if (!authenticated) {
+        return;
+      }
+      const term = terminalRef.current;
+      if (!term) {
+        return;
+      }
+      if (payload.type === "output" && typeof payload.data === "string") {
+        term.write(payload.data);
+        return;
+      }
+      if (payload.type === "exit") {
+        term.write(`\r\n[terminal exited ${payload.code}]\r\n`);
+      }
+    });
+
+    socket.addEventListener("close", () => {
+      const term = terminalRef.current;
+      if (term) {
+        term.write("\r\n[terminal disconnected]\r\n");
+      }
+    });
+  }, [
+    activeWorktreeId,
+    attachmentSessionId,
+    terminalEnabled,
+    terminalFitRef,
+    terminalRef,
+    terminalSessionRef,
+    terminalSocketRef,
+    terminalWorktreeRef,
+    workspaceToken,
+  ]);
+
+  useEffect(() => {
+    if (!terminalEnabled) {
+      return;
+    }
+    if (activePane !== "terminal") {
+      return;
+    }
+    if (!terminalContainerRef.current || terminalRef.current) {
+      return;
+    }
+    const isDark = themeMode === "dark";
+    const term = new Terminal({
+      fontFamily:
+        '"Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+      fontSize: 13,
+      cursorBlink: true,
+      theme: {
+        background: isDark ? "#0f1110" : "#fbf6ee",
+        foreground: isDark ? "#e6edf3" : "#2a2418",
+        cursor: isDark ? "#e6edf3" : "#2a2418",
+        selection: isDark
+          ? "rgba(255, 255, 255, 0.2)"
+          : "rgba(20, 19, 17, 0.15)",
+      },
+    });
+    if (typeof term.setOption !== "function") {
+      term.setOption = (key, value) => {
+        if (key && typeof key === "object") {
+          term.options = key;
+          return;
+        }
+        term.options = { [key]: value };
+      };
+    }
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    term.open(terminalContainerRef.current);
+    fitAddon.fit();
+    term.focus();
+    terminalRef.current = term;
+    terminalFitRef.current = fitAddon;
+    terminalDisposableRef.current = term.onData((data) => {
+      const socket = terminalSocketRef.current;
+      if (socket && socket.readyState === WebSocket.OPEN) {
+        socket.send(JSON.stringify({ type: "input", data }));
+      }
+    });
+  }, [
+    activePane,
+    terminalContainerRef,
+    terminalDisposableRef,
+    terminalEnabled,
+    terminalFitRef,
+    terminalRef,
+    terminalSocketRef,
+    themeMode,
+  ]);
+
+  useEffect(() => {
+    const term = terminalRef.current;
+    if (!term) {
+      return;
+    }
+    const theme =
+      themeMode === "dark"
+        ? {
+            background: "#15120d",
+            foreground: "#f2e9dc",
+            cursor: "#f2e9dc",
+          }
+        : {
+            background: "#fbf6ee",
+            foreground: "#2a2418",
+            cursor: "#2a2418",
+          };
+    if (typeof term.setOption === "function") {
+      term.setOption("theme", theme);
+    } else {
+      term.options = { theme };
+    }
+  }, [terminalRef, themeMode]);
+
+  useEffect(() => {
+    return () => {
+      if (terminalDisposableRef.current) {
+        terminalDisposableRef.current.dispose();
+        terminalDisposableRef.current = null;
+      }
+      if (terminalRef.current) {
+        terminalRef.current.dispose();
+        terminalRef.current = null;
+      }
+      terminalFitRef.current = null;
+    };
+  }, [terminalDisposableRef, terminalFitRef, terminalRef]);
+
+  useEffect(() => {
+    if (activePane !== "terminal") {
+      return;
+    }
+    if (!terminalEnabled) {
+      return;
+    }
+    if (terminalRef.current) {
+      const isDark = themeMode === "dark";
+      terminalRef.current.setOption("theme", {
+        background: isDark ? "#0f1110" : "#fbf6ee",
+        foreground: isDark ? "#e6edf3" : "#2a2418",
+        cursor: isDark ? "#e6edf3" : "#2a2418",
+        selection: isDark
+          ? "rgba(255, 255, 255, 0.2)"
+          : "rgba(20, 19, 17, 0.15)",
+      });
+    }
+    if (terminalFitRef.current) {
+      requestAnimationFrame(() => {
+        const fitAddon = terminalFitRef.current;
+        const term = terminalRef.current;
+        if (!fitAddon || !term) {
+          return;
+        }
+        fitAddon.fit();
+        term.focus();
+        const socket = terminalSocketRef.current;
+        if (socket && socket.readyState === WebSocket.OPEN) {
+          socket.send(
+            JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows })
+          );
+        }
+      });
+    }
+    connectTerminal();
+  }, [
+    activePane,
+    connectTerminal,
+    terminalEnabled,
+    terminalFitRef,
+    terminalRef,
+    terminalSocketRef,
+    themeMode,
+  ]);
+
+  useEffect(() => {
+    const handleResize = () => {
+      const term = terminalRef.current;
+      const fitAddon = terminalFitRef.current;
+      const socket = terminalSocketRef.current;
+      if (!term || !fitAddon) {
+        return;
+      }
+      fitAddon.fit();
+      if (socket && socket.readyState === WebSocket.OPEN) {
+        socket.send(
+          JSON.stringify({ type: "resize", cols: term.cols, rows: term.rows })
+        );
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [terminalFitRef, terminalRef, terminalSocketRef]);
+
+  useEffect(() => {
+    if (!attachmentSessionId && terminalSocketRef.current) {
+      terminalSocketRef.current.close();
+      terminalSocketRef.current = null;
+      terminalSessionRef.current = null;
+      terminalWorktreeRef.current = null;
+    }
+  }, [attachmentSessionId, terminalSessionRef, terminalSocketRef, terminalWorktreeRef]);
+
+  useEffect(() => {
+    if (terminalEnabled) {
+      return;
+    }
+    if (terminalSocketRef.current) {
+      terminalSocketRef.current.close();
+      terminalSocketRef.current = null;
+    }
+    terminalSessionRef.current = null;
+    terminalWorktreeRef.current = null;
+    if (terminalDisposableRef.current) {
+      terminalDisposableRef.current.dispose();
+      terminalDisposableRef.current = null;
+    }
+    if (terminalRef.current) {
+      terminalRef.current.dispose();
+      terminalRef.current = null;
+    }
+    terminalFitRef.current = null;
+  }, [
+    terminalDisposableRef,
+    terminalEnabled,
+    terminalFitRef,
+    terminalRef,
+    terminalSessionRef,
+    terminalSocketRef,
+    terminalWorktreeRef,
+  ]);
+}

package/client/src/hooks/useToolbarExport.js

@@ -0,0 +1,27 @@
+import { useEffect, useRef, useState } from "react";
+
+export default function useToolbarExport() {
+  const [toolbarExportOpen, setToolbarExportOpen] = useState(false);
+  const toolbarExportRef = useRef(null);
+
+  useEffect(() => {
+    if (!toolbarExportOpen) {
+      return;
+    }
+    const handlePointerDown = (event) => {
+      const target = event.target;
+      if (toolbarExportRef.current?.contains(target)) {
+        return;
+      }
+      setToolbarExportOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, [toolbarExportOpen]);
+
+  return {
+    toolbarExportOpen,
+    setToolbarExportOpen,
+    toolbarExportRef,
+  };
+}

package/client/src/hooks/useTurnInterrupt.js

@@ -0,0 +1,43 @@
+import { useCallback } from "react";
+
+export default function useTurnInterrupt({
+  activeWorktreeId,
+  isInWorktree,
+  currentTurnIdForActive,
+  socketRef,
+  setWorktrees,
+  setActivity,
+}) {
+  const interruptTurn = useCallback(() => {
+    if (!currentTurnIdForActive || !socketRef.current) {
+      return;
+    }
+    const payload = {
+      type: "turn_interrupt",
+      turnId: currentTurnIdForActive,
+      worktreeId: isInWorktree && activeWorktreeId ? activeWorktreeId : undefined,
+    };
+    socketRef.current.send(JSON.stringify(payload));
+    if (isInWorktree && activeWorktreeId) {
+      setWorktrees((current) => {
+        const next = new Map(current);
+        const wt = next.get(activeWorktreeId);
+        if (wt) {
+          next.set(activeWorktreeId, { ...wt, activity: "Interruption..." });
+        }
+        return next;
+      });
+      return;
+    }
+    setActivity("Interruption...");
+  }, [
+    activeWorktreeId,
+    currentTurnIdForActive,
+    isInWorktree,
+    setActivity,
+    setWorktrees,
+    socketRef,
+  ]);
+
+  return { interruptTurn };
+}

package/client/src/hooks/useVibe80Forms.js

@@ -0,0 +1,128 @@
+import { useCallback, useEffect, useState } from "react";
+
+export default function useVibe80Forms({
+  t,
+  choicesKey,
+  input,
+  setInput,
+  handleSendMessageRef,
+  draftAttachments,
+  setDraftAttachments,
+}) {
+  const [choiceSelections, setChoiceSelections] = useState({});
+  const [activeForm, setActiveForm] = useState(null);
+  const [activeFormValues, setActiveFormValues] = useState({});
+
+  useEffect(() => {
+    if (!choicesKey) {
+      setChoiceSelections({});
+      return;
+    }
+    try {
+      const stored = JSON.parse(localStorage.getItem(choicesKey) || "{}");
+      setChoiceSelections(
+        stored && typeof stored === "object" && !Array.isArray(stored)
+          ? stored
+          : {}
+      );
+    } catch (error) {
+      setChoiceSelections({});
+    }
+  }, [choicesKey]);
+
+  useEffect(() => {
+    if (!choicesKey) {
+      return;
+    }
+    localStorage.setItem(choicesKey, JSON.stringify(choiceSelections));
+  }, [choiceSelections, choicesKey]);
+
+  const openVibe80Form = useCallback((block, blockKey) => {
+    if (!block?.fields?.length) {
+      return;
+    }
+    const defaults = {};
+    block.fields.forEach((field) => {
+      if (field.type === "checkbox") {
+        defaults[field.id] = Boolean(field.defaultChecked);
+      } else if (field.type === "radio" || field.type === "select") {
+        defaults[field.id] = field.choices?.[0] || "";
+      } else {
+        defaults[field.id] = field.defaultValue || "";
+      }
+    });
+    setActiveForm({ ...block, key: blockKey });
+    setActiveFormValues(defaults);
+  }, []);
+
+  const closeVibe80Form = useCallback(() => {
+    setActiveForm(null);
+    setActiveFormValues({});
+  }, []);
+
+  const updateActiveFormValue = useCallback((fieldId, value) => {
+    setActiveFormValues((current) => ({
+      ...current,
+      [fieldId]: value,
+    }));
+  }, []);
+
+  const sendFormMessage = useCallback(
+    (text) => {
+      const preservedInput = input;
+      const preservedAttachments = draftAttachments;
+      handleSendMessageRef.current?.(text, []);
+      setInput(preservedInput);
+      setDraftAttachments(preservedAttachments);
+    },
+    [draftAttachments, handleSendMessageRef, input, setDraftAttachments, setInput]
+  );
+
+  const submitActiveForm = useCallback(
+    (event) => {
+      event?.preventDefault();
+      if (!activeForm) {
+        return;
+      }
+      const lines = activeForm.fields.map((field) => {
+        let value = activeFormValues[field.id];
+        if (field.type === "checkbox") {
+          value = value ? "1" : "0";
+        }
+        if (value === undefined || value === null) {
+          value = "";
+        }
+        return `${field.id}=${value}`;
+      });
+      sendFormMessage(lines.join("\n"));
+      closeVibe80Form();
+    },
+    [activeForm, activeFormValues, closeVibe80Form, sendFormMessage]
+  );
+
+  const handleChoiceClick = useCallback(
+    (choice, blockKey, choiceIndex) => {
+      setChoiceSelections((prev) => ({
+        ...prev,
+        [blockKey]: choiceIndex,
+      }));
+      setInput(choice);
+      handleSendMessageRef.current?.(choice);
+    },
+    [handleSendMessageRef, setInput]
+  );
+
+  return {
+    choiceSelections,
+    setChoiceSelections,
+    activeForm,
+    activeFormValues,
+    openVibe80Form,
+    closeVibe80Form,
+    updateActiveFormValue,
+    submitActiveForm,
+    handleChoiceClick,
+    setActiveForm,
+    setActiveFormValues,
+  };
+}