@vibe80/vibe80 0.1.1

package/client/src/hooks/useChatCommands.js

@@ -0,0 +1,294 @@
+import { useCallback, useEffect } from "react";
+
+export default function useChatCommands({
+  activeProvider,
+  activeWorktreeId,
+  addToBacklog,
+  apiFetch,
+  attachmentSessionId,
+  captureScreenshot,
+  connected,
+  handleSendMessageRef,
+  handleViewSelect,
+  input,
+  isWorktreeStopped,
+  isCodexReady,
+  isInWorktree,
+  openPathInExplorer,
+  requestRepoDiff,
+  requestWorktreeDiff,
+  sendMessage,
+  sendWorktreeMessage,
+  buildAnnotatedMessage,
+  clearScopedAnnotations,
+  setAnnotationMode,
+  setCommandMenuOpen,
+  setDraftAttachments,
+  setInput,
+  setMessages,
+  setWorktrees,
+  socketRef,
+  t,
+  showToast,
+}) {
+  const handleSendMessage = useCallback(
+    (textOverride, attachmentsOverride) => {
+      const rawText = (textOverride ?? input).trim();
+      if (!rawText) {
+        return;
+      }
+      const annotationMatch = rawText.match(/^\/annotation\s+(on|off)\s*$/i);
+      if (annotationMatch) {
+        const nextValue = annotationMatch[1].toLowerCase() === "on";
+        setAnnotationMode(nextValue);
+        showToast(
+          nextValue
+            ? t("Annotation mode enabled.")
+            : t("Annotation mode disabled."),
+          "info"
+        );
+        setInput("");
+        setDraftAttachments([]);
+        setCommandMenuOpen(false);
+        return;
+      }
+      if (rawText.startsWith("/annotation")) {
+        showToast(t("Usage: /annotation on|off"), "info");
+        return;
+      }
+      if (isWorktreeStopped) {
+        showToast(t("Worktree is stopped. Wake it up before sending a message."), "info");
+        return;
+      }
+      if (activeProvider === "codex" && !isCodexReady) {
+        showToast(t("Codex is starting. Please wait."), "info");
+        return;
+      }
+      if (rawText === "/diff" || rawText.startsWith("/diff ")) {
+        handleViewSelect("diff");
+        if (activeWorktreeId && activeWorktreeId !== "main") {
+          requestWorktreeDiff(activeWorktreeId);
+        } else {
+          requestRepoDiff();
+        }
+        setInput("");
+        setDraftAttachments([]);
+        setCommandMenuOpen(false);
+        return;
+      }
+      if (rawText.startsWith("/backlog")) {
+        if (!attachmentSessionId) {
+          showToast(t("Session not found."), "error");
+          return;
+        }
+        void (async () => {
+          try {
+            const response = await apiFetch(
+              `/api/v1/sessions/${encodeURIComponent(attachmentSessionId)}/backlog-items`
+            );
+            if (!response.ok) {
+              const payload = await response.json().catch(() => null);
+              throw new Error(payload?.error || t("Unable to load backlog."));
+            }
+            const payload = await response.json().catch(() => ({}));
+            const items = Array.isArray(payload?.items) ? payload.items : [];
+            const messageId = `backlog-${Date.now()}-${Math.random()
+              .toString(16)
+              .slice(2, 8)}`;
+            const backlogMessage = {
+              id: messageId,
+              role: "assistant",
+              type: "backlog_view",
+              text: "Backlog",
+              backlog: {
+                items,
+                page: 0,
+              },
+            };
+            if (isInWorktree && activeWorktreeId) {
+              setWorktrees((current) => {
+                const next = new Map(current);
+                const wt = next.get(activeWorktreeId);
+                if (wt) {
+                  next.set(activeWorktreeId, {
+                    ...wt,
+                    messages: [...(wt.messages || []), backlogMessage],
+                  });
+                }
+                return next;
+              });
+            } else {
+              setMessages((current) => [...current, backlogMessage]);
+            }
+          } catch (error) {
+            showToast(error.message || t("Unable to load backlog."), "error");
+          }
+        })();
+        setInput("");
+        setDraftAttachments([]);
+        setCommandMenuOpen(false);
+        return;
+      }
+      if (rawText.startsWith("/open")) {
+        const targetPath = rawText.replace(/^\/open\s*/i, "").trim();
+        if (!targetPath) {
+          showToast(t("Path required."), "error");
+          return;
+        }
+        openPathInExplorer(targetPath)
+          .then(() => {
+            setInput("");
+            setDraftAttachments([]);
+            setCommandMenuOpen(false);
+          })
+          .catch(() => null);
+        return;
+      }
+      if (rawText.startsWith("/todo")) {
+        const action = rawText.replace(/^\/todo\s*/i, "").trim();
+        if (!action) {
+          showToast(t("Todo text required."), "error");
+          return;
+        }
+        if (!attachmentSessionId) {
+          showToast(t("Session not found."), "error");
+          return;
+        }
+        void (async () => {
+          try {
+            const response = await apiFetch(
+              `/api/v1/sessions/${encodeURIComponent(attachmentSessionId)}/backlog-items`,
+              {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ text: action }),
+              }
+            );
+            if (!response.ok) {
+              const payload = await response.json().catch(() => null);
+              throw new Error(payload?.error || t("Unable to update backlog."));
+            }
+            showToast(t("Added to backlog."));
+          } catch (error) {
+            showToast(
+              error.message || t("Unable to update backlog."),
+              "error"
+            );
+          }
+        })();
+        setInput("");
+        setDraftAttachments([]);
+        setCommandMenuOpen(false);
+        return;
+      }
+      if (rawText.startsWith("/run")) {
+        const command = rawText.replace(/^\/run\s*/i, "").trim();
+        if (!command) {
+          showToast(t("Command required."), "error");
+          return;
+        }
+        if (!socketRef.current || !connected) {
+          showToast(t("Disconnected"), "error");
+          return;
+        }
+        const targetWorktreeId =
+          isInWorktree && activeWorktreeId ? activeWorktreeId : null;
+        socketRef.current.send(
+          JSON.stringify({
+            type: "action_request",
+            request: "run",
+            arg: command,
+            worktreeId: targetWorktreeId || undefined,
+          })
+        );
+        setInput("");
+        setDraftAttachments([]);
+        setCommandMenuOpen(false);
+        return;
+      }
+      if (rawText.startsWith("/screenshot")) {
+        captureScreenshot()
+          .then(() => {
+            setInput("");
+            setCommandMenuOpen(false);
+          })
+          .catch(() => null);
+        return;
+      }
+      if (rawText.startsWith("/git")) {
+        const command = rawText.replace(/^\/git\s*/i, "").trim();
+        if (!command) {
+          showToast(t("Git command required."), "error");
+          return;
+        }
+        if (!socketRef.current || !connected) {
+          showToast(t("Disconnected"), "error");
+          return;
+        }
+        const targetWorktreeId =
+          isInWorktree && activeWorktreeId ? activeWorktreeId : null;
+        socketRef.current.send(
+          JSON.stringify({
+            type: "action_request",
+            request: "git",
+            arg: command,
+            worktreeId: targetWorktreeId || undefined,
+          })
+        );
+        setInput("");
+        setDraftAttachments([]);
+        setCommandMenuOpen(false);
+        return;
+      }
+      const transportText = buildAnnotatedMessage
+        ? buildAnnotatedMessage(rawText)
+        : rawText;
+      if (isInWorktree && activeWorktreeId) {
+        sendWorktreeMessage(
+          activeWorktreeId,
+          rawText,
+          attachmentsOverride,
+          transportText
+        );
+      } else {
+        sendMessage(rawText, attachmentsOverride, transportText);
+      }
+      clearScopedAnnotations?.();
+    },
+    [
+      activeProvider,
+      activeWorktreeId,
+      apiFetch,
+      attachmentSessionId,
+      buildAnnotatedMessage,
+      captureScreenshot,
+      clearScopedAnnotations,
+      connected,
+      handleViewSelect,
+      input,
+      isWorktreeStopped,
+      isCodexReady,
+      isInWorktree,
+      openPathInExplorer,
+      requestRepoDiff,
+      requestWorktreeDiff,
+      sendMessage,
+      sendWorktreeMessage,
+      setAnnotationMode,
+      setCommandMenuOpen,
+      setDraftAttachments,
+      setInput,
+      showToast,
+      socketRef,
+      t,
+    ]
+  );
+
+  useEffect(() => {
+    handleSendMessageRef.current = handleSendMessage;
+  }, [handleSendMessage, handleSendMessageRef]);
+
+  return {
+    handleSendMessage,
+  };
+}

package/client/src/hooks/useChatExport.js

@@ -0,0 +1,144 @@
+import { useCallback } from "react";
+
+export default function useChatExport({
+  currentMessages,
+  attachmentRepoUrl,
+  repoUrl,
+  isInWorktree,
+  activeWorktree,
+  t,
+  normalizeAttachments,
+  downloadTextFile,
+  formatExportName,
+  extractRepoName,
+  setToolbarExportOpen,
+}) {
+  const handleExportChat = useCallback(
+    (format) => {
+      setToolbarExportOpen(false);
+      const exportMessages = Array.isArray(currentMessages)
+        ? currentMessages
+        : [];
+      if (!exportMessages.length) {
+        return;
+      }
+      setToolbarExportOpen(false);
+      const baseName = extractRepoName(attachmentRepoUrl || repoUrl || "");
+      const tabLabel =
+        isInWorktree && activeWorktree
+          ? `${activeWorktree.name || t("Worktree")} (${activeWorktree.branchName || activeWorktree.id})`
+          : t("Main");
+      if (format === "markdown") {
+        const lines = [
+          `# ${t("Chat history")}`,
+          "",
+          `${t("Export")}: ${new Date().toISOString()}`,
+          `${t("Tab")}: ${tabLabel}`,
+          "",
+        ];
+        exportMessages.forEach((message) => {
+          if (message.role === "commandExecution") {
+            lines.push(`## ${t("Command")}`);
+            lines.push(`\`${message.command || t("Command")}\``);
+            if (message.output) {
+              lines.push("```");
+              lines.push(message.output);
+              lines.push("```");
+            }
+            lines.push("");
+            return;
+          }
+          if (message.role === "tool_result") {
+            const toolName =
+              message.toolResult?.name || message.toolResult?.tool || t("Tool");
+            const toolOutput = message.toolResult?.output || message.text || "";
+            lines.push(`## ${t("Tool result")}`);
+            lines.push(`\`${toolName}\``);
+            if (toolOutput) {
+              lines.push("```");
+              lines.push(toolOutput);
+              lines.push("```");
+            }
+            lines.push("");
+            return;
+          }
+          const roleLabel =
+            message.role === "user" ? t("Username") : t("Assistant");
+          lines.push(`## ${roleLabel}`);
+          lines.push(message.text || "");
+          const attachmentNames = normalizeAttachments(
+            message.attachments || []
+          )
+            .map((item) => item?.name || item?.path)
+            .filter(Boolean);
+          if (attachmentNames.length) {
+            lines.push(`${t("Attachments")}: ${attachmentNames.join(", ")}`);
+          }
+          lines.push("");
+        });
+        const content = lines.join("\n").trim() + "\n";
+        downloadTextFile(
+          formatExportName(baseName, "md"),
+          content,
+          "text/markdown"
+        );
+        return;
+      }
+      const payload = {
+        exportedAt: new Date().toISOString(),
+        repoUrl: attachmentRepoUrl || repoUrl || "",
+        tab: {
+          type: isInWorktree ? "worktree" : "main",
+          worktreeId: activeWorktree?.id || null,
+          worktreeName: activeWorktree?.name || null,
+          branchName: activeWorktree?.branchName || null,
+        },
+        messages: exportMessages.map((message) => {
+          if (message.role === "commandExecution") {
+            return {
+              id: message.id,
+              role: message.role,
+              command: message.command || "",
+              output: message.output || "",
+              status: message.status || "",
+            };
+          }
+          if (message.role === "tool_result") {
+            return {
+              id: message.id,
+              role: message.role,
+              text: message.text || "",
+              toolResult: message.toolResult || null,
+            };
+          }
+          return {
+            id: message.id,
+            role: message.role,
+            text: message.text || "",
+            attachments: normalizeAttachments(message.attachments || []),
+          };
+        }),
+      };
+      downloadTextFile(
+        formatExportName(baseName, "json"),
+        JSON.stringify(payload, null, 2),
+        "application/json"
+      );
+    },
+    [
+      activeWorktree,
+      attachmentRepoUrl,
+      currentMessages,
+      downloadTextFile,
+      extractRepoName,
+      formatExportName,
+      isInWorktree,
+      normalizeAttachments,
+      repoUrl,
+      setToolbarExportOpen,
+      t,
+    ]
+  );
+
+  return { handleExportChat };
+}

package/client/src/hooks/useChatMessagesState.js

@@ -0,0 +1,69 @@
+import { useCallback } from "react";
+
+export default function useChatMessagesState({
+  normalizeAttachments,
+  messageIndex,
+  commandIndex,
+  messagesRef,
+  setMessages,
+  setCommandPanelOpen,
+  setToolResultPanelOpen,
+}) {
+  const applyMessages = useCallback(
+    (items = []) => {
+      const normalized = items.map((item, index) => ({
+        ...item,
+        id: item.id || `history-${index}`,
+        role: item.role,
+        text: item.text,
+        toolResult: item.toolResult,
+        attachments: normalizeAttachments(item.attachments || []),
+      }));
+      messageIndex.clear();
+      commandIndex.clear();
+      normalized.forEach((item, index) => {
+        if (item.role === "assistant") {
+          messageIndex.set(item.id, index);
+        }
+      });
+      setMessages(normalized);
+      setCommandPanelOpen({});
+      setToolResultPanelOpen({});
+    },
+    [
+      commandIndex,
+      messageIndex,
+      normalizeAttachments,
+      setCommandPanelOpen,
+      setMessages,
+      setToolResultPanelOpen,
+    ]
+  );
+
+  const mergeAndApplyMessages = useCallback(
+    (incoming = []) => {
+      if (!Array.isArray(incoming) || incoming.length === 0) {
+        return;
+      }
+      const current = Array.isArray(messagesRef.current)
+        ? messagesRef.current
+        : [];
+      const seen = new Set(current.map((item) => item?.id).filter(Boolean));
+      const merged = [...current];
+      for (const item of incoming) {
+        const id = item?.id;
+        if (id && seen.has(id)) {
+          continue;
+        }
+        if (id) {
+          seen.add(id);
+        }
+        merged.push(item);
+      }
+      applyMessages(merged);
+    },
+    [applyMessages, messagesRef]
+  );
+
+  return { applyMessages, mergeAndApplyMessages };
+}

package/client/src/hooks/useChatSend.js

@@ -0,0 +1,158 @@
+import { useCallback } from "react";
+
+export default function useChatSend({
+  input,
+  setInput,
+  setMessages,
+  setDraftAttachments,
+  socketRef,
+  connected,
+  normalizeAttachments,
+  draftAttachments,
+  setWorktrees,
+  setProcessing,
+  setActivity,
+  processingLabel,
+  handleSendMessageRef,
+  ensureNotificationPermission,
+}) {
+  const sendMessage = useCallback(
+    (textOverride, attachmentsOverride, transportTextOverride) => {
+      const displayText = (textOverride ?? input).trim();
+      if (!displayText || !socketRef.current || !connected) {
+        return;
+      }
+      const rawTransportText = (transportTextOverride ?? displayText).trim();
+      if (!rawTransportText) {
+        return;
+      }
+
+      void ensureNotificationPermission?.();
+      const resolvedAttachments = normalizeAttachments(
+        attachmentsOverride ?? draftAttachments
+      );
+      const selectedPaths = resolvedAttachments
+        .map((item) => item?.path)
+        .filter(Boolean);
+      const suffix =
+        selectedPaths.length > 0
+          ? `;; attachments: ${JSON.stringify(selectedPaths)}`
+          : "";
+      const text = `${rawTransportText}${suffix}`;
+      setMessages((current) => [
+        ...current,
+        {
+          id: `user-${Date.now()}`,
+          role: "user",
+          text: displayText,
+          attachments: resolvedAttachments,
+        },
+      ]);
+      setProcessing?.(true);
+      setActivity?.(processingLabel || "Processing...");
+      socketRef.current.send(
+        JSON.stringify({
+          type: "worktree_send_message",
+          worktreeId: "main",
+          text,
+          displayText,
+          attachments: resolvedAttachments,
+        })
+      );
+      setInput("");
+      setDraftAttachments([]);
+    },
+    [
+      connected,
+      draftAttachments,
+      input,
+      normalizeAttachments,
+      setDraftAttachments,
+      setInput,
+      setMessages,
+      socketRef,
+    ]
+  );
+
+  const sendCommitMessage = useCallback(
+    (text) => {
+      if (!handleSendMessageRef.current) {
+        return;
+      }
+      handleSendMessageRef.current(text, []);
+    },
+    [handleSendMessageRef]
+  );
+
+  const sendWorktreeMessage = useCallback(
+    (worktreeId, textOverride, attachmentsOverride, transportTextOverride) => {
+      const displayText = (textOverride ?? input).trim();
+      if (!displayText || !socketRef.current || !connected || !worktreeId) return;
+      const rawTransportText = (transportTextOverride ?? displayText).trim();
+      if (!rawTransportText) {
+        return;
+      }
+
+      const resolvedAttachments = normalizeAttachments(
+        attachmentsOverride ?? draftAttachments
+      );
+      const selectedPaths = resolvedAttachments
+        .map((item) => item?.path)
+        .filter(Boolean);
+      const suffix =
+        selectedPaths.length > 0
+          ? `;; attachments: ${JSON.stringify(selectedPaths)}`
+          : "";
+      const text = `${rawTransportText}${suffix}`;
+
+      setWorktrees((current) => {
+        const next = new Map(current);
+        if (worktreeId === "main") {
+          return next;
+        }
+        const wt = next.get(worktreeId);
+        if (wt) {
+          const messages = [
+            ...wt.messages,
+            {
+              id: `user-${Date.now()}`,
+              role: "user",
+              text: displayText,
+              attachments: resolvedAttachments,
+            },
+          ];
+          next.set(worktreeId, { ...wt, messages, status: "processing" });
+        }
+        return next;
+      });
+      if (worktreeId === "main") {
+        setProcessing?.(true);
+        setActivity?.(processingLabel || "Processing...");
+      }
+
+      socketRef.current.send(
+        JSON.stringify({
+          type: "worktree_send_message",
+          worktreeId,
+          text,
+          displayText,
+          attachments: resolvedAttachments,
+        })
+      );
+      setInput("");
+      setDraftAttachments([]);
+    },
+    [
+      connected,
+      draftAttachments,
+      input,
+      normalizeAttachments,
+      setDraftAttachments,
+      setInput,
+      setWorktrees,
+      socketRef,
+    ]
+  );
+
+  return { sendMessage, sendCommitMessage, sendWorktreeMessage };
+}