@vibe80/vibe80 0.1.1

package/client/src/hooks/useGitIdentity.js

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useState } from "react";
+
+export default function useGitIdentity({ t, apiFetch, attachmentSessionId }) {
+  const [gitIdentityName, setGitIdentityName] = useState("");
+  const [gitIdentityEmail, setGitIdentityEmail] = useState("");
+  const [gitIdentityGlobal, setGitIdentityGlobal] = useState({
+    name: "",
+    email: "",
+  });
+  const [gitIdentityRepo, setGitIdentityRepo] = useState({
+    name: "",
+    email: "",
+  });
+  const [gitIdentityLoading, setGitIdentityLoading] = useState(false);
+  const [gitIdentitySaving, setGitIdentitySaving] = useState(false);
+  const [gitIdentityError, setGitIdentityError] = useState("");
+  const [gitIdentityMessage, setGitIdentityMessage] = useState("");
+
+  const loadGitIdentity = useCallback(async () => {
+    if (!attachmentSessionId) {
+      return;
+    }
+    setGitIdentityLoading(true);
+    setGitIdentityError("");
+    setGitIdentityMessage("");
+    try {
+      const response = await apiFetch(
+        `/api/v1/sessions/${encodeURIComponent(attachmentSessionId)}/git-identity`
+      );
+      if (!response.ok) {
+        throw new Error(t("Unable to load Git identity."));
+      }
+      const payload = await response.json();
+      const globalName = payload?.global?.name || "";
+      const globalEmail = payload?.global?.email || "";
+      const repoName = payload?.repo?.name || "";
+      const repoEmail = payload?.repo?.email || "";
+      setGitIdentityGlobal({ name: globalName, email: globalEmail });
+      setGitIdentityRepo({ name: repoName, email: repoEmail });
+      setGitIdentityName(repoName || globalName);
+      setGitIdentityEmail(repoEmail || globalEmail);
+    } catch (error) {
+      setGitIdentityError(error?.message || t("Error during loading."));
+    } finally {
+      setGitIdentityLoading(false);
+    }
+  }, [attachmentSessionId, apiFetch, t]);
+
+  const handleSaveGitIdentity = useCallback(async () => {
+    if (!attachmentSessionId) {
+      return;
+    }
+    const name = gitIdentityName.trim();
+    const email = gitIdentityEmail.trim();
+    if (!name || !email) {
+      setGitIdentityError(t("Name and email required."));
+      return;
+    }
+    setGitIdentitySaving(true);
+    setGitIdentityError("");
+    setGitIdentityMessage("");
+    try {
+      const response = await apiFetch(
+        `/api/v1/sessions/${encodeURIComponent(attachmentSessionId)}/git-identity`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ name, email }),
+        }
+      );
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({}));
+        throw new Error(payload?.error || t("Update failed."));
+      }
+      const payload = await response.json().catch(() => ({}));
+      const repoName = payload?.repo?.name || name;
+      const repoEmail = payload?.repo?.email || email;
+      setGitIdentityRepo({ name: repoName, email: repoEmail });
+      setGitIdentityMessage(t("Repository Git identity updated."));
+    } catch (error) {
+      setGitIdentityError(error?.message || t("Update failed."));
+    } finally {
+      setGitIdentitySaving(false);
+    }
+  }, [
+    attachmentSessionId,
+    apiFetch,
+    gitIdentityEmail,
+    gitIdentityName,
+    t,
+  ]);
+
+  useEffect(() => {
+    if (!attachmentSessionId) {
+      return;
+    }
+    loadGitIdentity();
+  }, [attachmentSessionId, loadGitIdentity]);
+
+  return {
+    gitIdentityName,
+    gitIdentityEmail,
+    gitIdentityGlobal,
+    gitIdentityRepo,
+    gitIdentityLoading,
+    gitIdentitySaving,
+    gitIdentityError,
+    gitIdentityMessage,
+    setGitIdentityName,
+    setGitIdentityEmail,
+    loadGitIdentity,
+    handleSaveGitIdentity,
+  };
+}

package/client/src/hooks/useLayoutMode.js

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react";
+
+export default function useLayoutMode({ themeMode, setSideOpen }) {
+  const [isMobileLayout, setIsMobileLayout] = useState(() =>
+    window.matchMedia("(max-width: 1024px)").matches
+  );
+
+  useEffect(() => {
+    const query = window.matchMedia("(max-width: 1024px)");
+    const update = () => setIsMobileLayout(query.matches);
+    update();
+    if (query.addEventListener) {
+      query.addEventListener("change", update);
+      return () => query.removeEventListener("change", update);
+    }
+    query.addListener(update);
+    return () => query.removeListener(update);
+  }, []);
+
+  useEffect(() => {
+    document.documentElement.dataset.theme = themeMode;
+  }, [themeMode]);
+
+  useEffect(() => {
+    if (isMobileLayout) {
+      setSideOpen(false);
+    }
+  }, [isMobileLayout, setSideOpen]);
+
+  return { isMobileLayout };
+}

package/client/src/hooks/useLocalPreferences.js

@@ -0,0 +1,131 @@
+import { useEffect } from "react";
+
+export default function useLocalPreferences({
+  authMode,
+  llmProvider,
+  selectedProviders,
+  openAiAuthMode,
+  showChatCommands,
+  showToolResults,
+  notificationsEnabled,
+  themeMode,
+  repoHistory,
+  debugMode,
+  setLlmProvider,
+  setOpenAiLoginError,
+  setClaudeLoginError,
+  AUTH_MODE_KEY,
+  LLM_PROVIDER_KEY,
+  LLM_PROVIDERS_KEY,
+  OPENAI_AUTH_MODE_KEY,
+  CHAT_COMMANDS_VISIBLE_KEY,
+  TOOL_RESULTS_VISIBLE_KEY,
+  NOTIFICATIONS_ENABLED_KEY,
+  THEME_MODE_KEY,
+  REPO_HISTORY_KEY,
+  DEBUG_MODE_KEY,
+}) {
+  useEffect(() => {
+    try {
+      localStorage.setItem(AUTH_MODE_KEY, authMode);
+    } catch (error) {
+      // Ignore storage errors (private mode, quota).
+    }
+  }, [AUTH_MODE_KEY, authMode]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(LLM_PROVIDER_KEY, llmProvider);
+    } catch (error) {
+      // Ignore storage errors (private mode, quota).
+    }
+  }, [LLM_PROVIDER_KEY, llmProvider]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(LLM_PROVIDERS_KEY, JSON.stringify(selectedProviders));
+    } catch (error) {
+      // Ignore storage errors (private mode, quota).
+    }
+  }, [LLM_PROVIDERS_KEY, selectedProviders]);
+
+  useEffect(() => {
+    setOpenAiLoginError("");
+    setClaudeLoginError("");
+  }, [llmProvider, setClaudeLoginError, setOpenAiLoginError]);
+
+  useEffect(() => {
+    if (selectedProviders.includes(llmProvider)) {
+      return;
+    }
+    const fallback = selectedProviders[0] || "codex";
+    if (fallback !== llmProvider) {
+      setLlmProvider(fallback);
+    }
+  }, [selectedProviders, llmProvider, setLlmProvider]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(OPENAI_AUTH_MODE_KEY, openAiAuthMode);
+    } catch (error) {
+      // Ignore storage errors (private mode, quota).
+    }
+  }, [OPENAI_AUTH_MODE_KEY, openAiAuthMode]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(
+        CHAT_COMMANDS_VISIBLE_KEY,
+        showChatCommands ? "true" : "false"
+      );
+    } catch (error) {
+      // Ignore storage errors (private mode, quota).
+    }
+  }, [CHAT_COMMANDS_VISIBLE_KEY, showChatCommands]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(
+        TOOL_RESULTS_VISIBLE_KEY,
+        showToolResults ? "true" : "false"
+      );
+    } catch (error) {
+      // Ignore storage errors (private mode, quota).
+    }
+  }, [TOOL_RESULTS_VISIBLE_KEY, showToolResults]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(
+        NOTIFICATIONS_ENABLED_KEY,
+        notificationsEnabled ? "true" : "false"
+      );
+    } catch (error) {
+      // Ignore storage errors (private mode, quota).
+    }
+  }, [NOTIFICATIONS_ENABLED_KEY, notificationsEnabled]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(THEME_MODE_KEY, themeMode);
+    } catch (error) {
+      // Ignore storage errors (private mode, quota).
+    }
+  }, [THEME_MODE_KEY, themeMode]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(REPO_HISTORY_KEY, JSON.stringify(repoHistory));
+    } catch (error) {
+      // Ignore storage errors (private mode, quota).
+    }
+  }, [REPO_HISTORY_KEY, repoHistory]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem(DEBUG_MODE_KEY, debugMode ? "true" : "false");
+    } catch (error) {
+      // Ignore storage errors (private mode, quota).
+    }
+  }, [DEBUG_MODE_KEY, debugMode]);
+}

package/client/src/hooks/useMessageSync.js

@@ -0,0 +1,30 @@
+import { useCallback } from "react";
+
+export default function useMessageSync({ socketRef, messagesRef }) {
+  const requestMessageSync = useCallback(() => {
+    const socket = socketRef.current;
+    if (!socket || socket.readyState !== WebSocket.OPEN) {
+      return;
+    }
+    const lastSeenMessageId = (() => {
+      if (!Array.isArray(messagesRef.current)) {
+        return null;
+      }
+      for (let i = messagesRef.current.length - 1; i >= 0; i -= 1) {
+        if (messagesRef.current[i]?.id) {
+          return messagesRef.current[i].id;
+        }
+      }
+      return null;
+    })();
+    socket.send(
+      JSON.stringify({
+        type: "worktree_messages_sync",
+        worktreeId: "main",
+        lastSeenMessageId,
+      })
+    );
+  }, [messagesRef, socketRef]);
+
+  return { requestMessageSync };
+}

package/client/src/hooks/useNotifications.js

@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useRef } from "react";
+
+export default function useNotifications({ notificationsEnabled, t }) {
+  const lastNotifiedIdRef = useRef(null);
+  const audioContextRef = useRef(null);
+  const soundEnabled = notificationsEnabled;
+
+  const ensureNotificationPermission = useCallback(async () => {
+    if (!("Notification" in window)) {
+      return "unsupported";
+    }
+    if (Notification.permission === "default") {
+      try {
+        return await Notification.requestPermission();
+      } catch (error) {
+        return Notification.permission;
+      }
+    }
+    return Notification.permission;
+  }, []);
+
+  const primeAudioContext = useCallback(() => {
+    const AudioContext = window.AudioContext || window.webkitAudioContext;
+    if (!AudioContext) {
+      return;
+    }
+    let ctx = audioContextRef.current;
+    if (!ctx) {
+      ctx = new AudioContext();
+      audioContextRef.current = ctx;
+    }
+    if (ctx.state === "suspended") {
+      ctx.resume().catch(() => {});
+    }
+  }, []);
+
+  const playNotificationSound = useCallback(() => {
+    if (!soundEnabled) {
+      return;
+    }
+    const AudioContext = window.AudioContext || window.webkitAudioContext;
+    if (!AudioContext) {
+      return;
+    }
+    let ctx = audioContextRef.current;
+    if (!ctx) {
+      ctx = new AudioContext();
+      audioContextRef.current = ctx;
+    }
+    if (ctx.state === "suspended") {
+      ctx.resume().catch(() => {});
+    }
+    const oscillator = ctx.createOscillator();
+    const gain = ctx.createGain();
+    oscillator.type = "sine";
+    oscillator.frequency.value = 740;
+    gain.gain.value = 0.0001;
+    gain.gain.exponentialRampToValueAtTime(0.12, ctx.currentTime + 0.01);
+    gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.25);
+    oscillator.connect(gain).connect(ctx.destination);
+    oscillator.start();
+    oscillator.stop(ctx.currentTime + 0.26);
+  }, [soundEnabled]);
+
+  const stripMarkdownForNotification = useCallback((value) => {
+    if (!value) {
+      return "";
+    }
+    let output = String(value);
+    const vibe80Marker = output.match(/<!--\s*vibe80:/i);
+    if (typeof vibe80Marker?.index === "number") {
+      output = output.slice(0, vibe80Marker.index);
+    }
+    output = output.replace(/```([\s\S]*?)```/g, "$1");
+    output = output.replace(/`([^`]+)`/g, "$1");
+    output = output.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, "$1");
+    output = output.replace(/\[([^\]]+)\]\(([^)]+)\)/g, "$1");
+    output = output.replace(/^\s{0,3}#{1,6}\s+/gm, "");
+    output = output.replace(/^\s{0,3}>\s?/gm, "");
+    output = output.replace(/^\s{0,3}[-*+]\s+/gm, "");
+    output = output.replace(/^\s{0,3}\d+\.\s+/gm, "");
+    output = output.replace(/[*_~]{1,3}/g, "");
+    output = output.replace(/\s+/g, " ").trim();
+    return output;
+  }, []);
+
+  const maybeNotify = useCallback(
+    (message) => {
+      if (!notificationsEnabled) {
+        return;
+      }
+      if (!("Notification" in window)) {
+        return;
+      }
+      if (Notification.permission !== "granted") {
+        return;
+      }
+      if (!message?.id || lastNotifiedIdRef.current === message.id) {
+        return;
+      }
+      if (!document.hidden) {
+        return;
+      }
+      lastNotifiedIdRef.current = message.id;
+      const body = stripMarkdownForNotification(message.text || "").slice(
+        0,
+        180
+      );
+      try {
+        new Notification(t("New message"), { body });
+      } catch (error) {
+        // Ignore notification failures (permissions or browser quirks).
+      }
+      playNotificationSound();
+    },
+    [notificationsEnabled, playNotificationSound, stripMarkdownForNotification, t]
+  );
+
+  useEffect(() => {
+    if (!notificationsEnabled) {
+      return;
+    }
+    void ensureNotificationPermission();
+    primeAudioContext();
+  }, [ensureNotificationPermission, primeAudioContext, notificationsEnabled]);
+
+  return {
+    ensureNotificationPermission,
+    maybeNotify,
+    lastNotifiedIdRef,
+  };
+}

package/client/src/hooks/usePaneNavigation.js

@@ -0,0 +1,67 @@
+import { useCallback, useEffect } from "react";
+
+export default function usePaneNavigation({
+  activePane,
+  activeWorktreeId,
+  debugMode,
+  rpcLogsEnabled,
+  terminalEnabled,
+  setPaneByTab,
+  setToolbarExportOpen,
+  lastPaneByTabRef,
+}) {
+  const handleViewSelect = useCallback(
+    (nextPane) => {
+      if ((!debugMode || !rpcLogsEnabled) && nextPane === "logs") {
+        return;
+      }
+      if (!terminalEnabled && nextPane === "terminal") {
+        return;
+      }
+      const key = activeWorktreeId || "main";
+      setPaneByTab((current) => ({
+        ...current,
+        [key]: nextPane,
+      }));
+      setToolbarExportOpen(false);
+    },
+    [
+      activeWorktreeId,
+      debugMode,
+      rpcLogsEnabled,
+      setPaneByTab,
+      setToolbarExportOpen,
+      terminalEnabled,
+    ]
+  );
+
+  const handleOpenSettings = useCallback(() => {
+    if (activePane !== "settings") {
+      const key = activeWorktreeId || "main";
+      lastPaneByTabRef.current.set(key, activePane);
+    }
+    handleViewSelect("settings");
+  }, [activePane, activeWorktreeId, handleViewSelect, lastPaneByTabRef]);
+
+  const handleSettingsBack = useCallback(() => {
+    const key = activeWorktreeId || "main";
+    const previousPane = lastPaneByTabRef.current.get(key);
+    const fallbackPane =
+      previousPane && previousPane !== "settings" ? previousPane : "chat";
+    handleViewSelect(fallbackPane);
+  }, [activeWorktreeId, handleViewSelect, lastPaneByTabRef]);
+
+  useEffect(() => {
+    if ((!debugMode || !rpcLogsEnabled) && activePane === "logs") {
+      handleViewSelect("chat");
+    }
+  }, [activePane, debugMode, handleViewSelect, rpcLogsEnabled]);
+
+  useEffect(() => {
+    if (!terminalEnabled && activePane === "terminal") {
+      handleViewSelect("chat");
+    }
+  }, [activePane, handleViewSelect, terminalEnabled]);
+
+  return { handleViewSelect, handleOpenSettings, handleSettingsBack };
+}

package/client/src/hooks/usePanelState.js

@@ -0,0 +1,13 @@
+import { useState } from "react";
+
+export default function usePanelState() {
+  const [commandPanelOpen, setCommandPanelOpen] = useState({});
+  const [toolResultPanelOpen, setToolResultPanelOpen] = useState({});
+
+  return {
+    commandPanelOpen,
+    setCommandPanelOpen,
+    toolResultPanelOpen,
+    setToolResultPanelOpen,
+  };
+}

package/client/src/hooks/useProviderSelection.js

@@ -0,0 +1,70 @@
+import { useCallback } from "react";
+
+export default function useProviderSelection({
+  attachmentSessionId,
+  socketRef,
+  availableProviders,
+  llmProvider,
+  providerSwitching,
+  processing,
+  setProviderSwitching,
+  setStatus,
+  setSelectedProviders,
+  setLlmProvider,
+  t,
+}) {
+  const handleProviderSwitch = useCallback(
+    (newProvider) => {
+      if (!socketRef.current || socketRef.current.readyState !== WebSocket.OPEN) {
+        return;
+      }
+      if (!availableProviders.includes(newProvider)) {
+        return;
+      }
+      if (newProvider === llmProvider || providerSwitching || processing) {
+        return;
+      }
+      setProviderSwitching(true);
+      setStatus(t("Switching to {{provider}}...", { provider: newProvider }));
+      socketRef.current.send(
+        JSON.stringify({ type: "switch_provider", provider: newProvider })
+      );
+    },
+    [
+      availableProviders,
+      llmProvider,
+      processing,
+      providerSwitching,
+      setProviderSwitching,
+      setStatus,
+      socketRef,
+      t,
+    ]
+  );
+
+  const toggleProviderSelection = useCallback(
+    (provider) => {
+      if (attachmentSessionId) {
+        return;
+      }
+      setSelectedProviders((current) => {
+        const exists = current.includes(provider);
+        const next = exists
+          ? current.filter((item) => item !== provider)
+          : [...current, provider];
+        if (!exists) {
+          setLlmProvider(provider);
+        } else if (provider === llmProvider) {
+          const fallback = next[0] || provider;
+          if (fallback !== llmProvider) {
+            setLlmProvider(fallback);
+          }
+        }
+        return next;
+      });
+    },
+    [attachmentSessionId, llmProvider, setLlmProvider, setSelectedProviders]
+  );
+
+  return { handleProviderSwitch, toggleProviderSelection };
+}