@vibe80/vibe80 0.1.1

package/client/src/hooks/useSessionHandoff.js

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useState } from "react";
+export default function useSessionHandoff({ t, apiFetch, attachmentSessionId }) {
+  const [handoffOpen, setHandoffOpen] = useState(false);
+  const [handoffQrDataUrl, setHandoffQrDataUrl] = useState("");
+  const [handoffExpiresAt, setHandoffExpiresAt] = useState(null);
+  const [handoffLoading, setHandoffLoading] = useState(false);
+  const [handoffError, setHandoffError] = useState("");
+  const [handoffRemaining, setHandoffRemaining] = useState(null);
+
+  const buildHandoffPayload = (token, expiresAt) =>
+    JSON.stringify({
+      type: "vibe80_handoff",
+      handoffToken: token,
+      baseUrl: window.location.origin,
+      expiresAt,
+    });
+
+  const requestHandoffQr = useCallback(async () => {
+    if (!attachmentSessionId) {
+      return;
+    }
+    setHandoffLoading(true);
+    setHandoffError("");
+    try {
+      const response = await apiFetch("/api/v1/sessions/handoff", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ sessionId: attachmentSessionId }),
+      });
+      if (!response.ok) {
+        const payload = await response.json().catch(() => ({}));
+        throw new Error(payload?.error || t("Unable to generate the QR code."));
+      }
+      const data = await response.json();
+      const token = data?.handoffToken;
+      if (!token) {
+        throw new Error(t("Invalid resume token."));
+      }
+      const expiresAt = data?.expiresAt ?? null;
+      const payload = buildHandoffPayload(token, expiresAt);
+      const { default: QRCode } = await import("qrcode");
+      const qrDataUrl = await QRCode.toDataURL(payload, {
+        width: 260,
+        margin: 1,
+      });
+      setHandoffQrDataUrl(qrDataUrl);
+      setHandoffExpiresAt(expiresAt);
+      setHandoffOpen(true);
+    } catch (error) {
+      setHandoffError(error?.message || t("Error during generation."));
+    } finally {
+      setHandoffLoading(false);
+    }
+  }, [attachmentSessionId, apiFetch, t]);
+
+  const closeHandoffQr = useCallback(() => {
+    setHandoffOpen(false);
+    setHandoffError("");
+    setHandoffQrDataUrl("");
+    setHandoffExpiresAt(null);
+    setHandoffRemaining(null);
+  }, []);
+
+  useEffect(() => {
+    if (!handoffOpen || !handoffExpiresAt) {
+      setHandoffRemaining(null);
+      return;
+    }
+    const expiresAtMs =
+      typeof handoffExpiresAt === "number"
+        ? handoffExpiresAt
+        : new Date(handoffExpiresAt).getTime();
+    if (!Number.isFinite(expiresAtMs)) {
+      setHandoffRemaining(null);
+      return;
+    }
+    const tick = () => {
+      const remainingMs = expiresAtMs - Date.now();
+      const remainingSeconds = Math.max(0, Math.ceil(remainingMs / 1000));
+      setHandoffRemaining(remainingSeconds);
+    };
+    tick();
+    const intervalId = setInterval(tick, 1000);
+    return () => clearInterval(intervalId);
+  }, [handoffOpen, handoffExpiresAt]);
+
+  return {
+    handoffOpen,
+    handoffQrDataUrl,
+    handoffExpiresAt,
+    handoffLoading,
+    handoffError,
+    handoffRemaining,
+    requestHandoffQr,
+    closeHandoffQr,
+  };
+}

package/client/src/hooks/useSessionLifecycle.js

@@ -0,0 +1,287 @@
+import { useCallback, useEffect } from "react";
+
+const getSessionIdFromUrl = () =>
+  new URLSearchParams(window.location.search).get("session");
+
+export default function useSessionLifecycle({
+  t,
+  apiFetch,
+  workspaceToken,
+  handleLeaveWorkspace,
+  repoUrl,
+  setRepoUrl,
+  repoInput,
+  sessionNameInput,
+  repoAuth,
+  setRepoAuth,
+  authMode,
+  sshKeyInput,
+  httpUsername,
+  httpPassword,
+  sessionMode,
+  sessionRequested,
+  setSessionRequested,
+  defaultInternetAccess,
+  defaultDenyGitCredentialsAccess,
+  attachmentSession,
+  setAttachmentSession,
+  setAttachmentsLoading,
+  setAttachmentsError,
+  setWorkspaceToken,
+  setWorkspaceMode,
+  setWorkspaceError,
+  setOpenAiLoginPending,
+  setOpenAiLoginRequest,
+}) {
+  useEffect(() => {
+    const sessionId = getSessionIdFromUrl();
+    if (!sessionId || !workspaceToken || attachmentSession?.sessionId) {
+      return;
+    }
+    const resumeSession = async () => {
+      try {
+        setSessionRequested(true);
+        setAttachmentsError("");
+        const response = await apiFetch(
+          `/api/v1/sessions/${encodeURIComponent(sessionId)}`
+        );
+        if (!response.ok) {
+          throw new Error(t("Session not found."));
+        }
+        const data = await response.json();
+        setAttachmentSession(data);
+      } catch (error) {
+        setAttachmentsError(
+          error.message || t("Unable to resume the session.")
+        );
+        setSessionRequested(false);
+      }
+    };
+
+    resumeSession();
+  }, [
+    workspaceToken,
+    attachmentSession?.sessionId,
+    apiFetch,
+    handleLeaveWorkspace,
+    setAttachmentSession,
+    setAttachmentsError,
+    setSessionRequested,
+    t,
+  ]);
+
+  useEffect(() => {
+    if (!repoUrl || attachmentSession?.sessionId || sessionMode !== "new") {
+      return;
+    }
+    const createAttachmentSession = async () => {
+      try {
+        setAttachmentsLoading(true);
+        setAttachmentsError("");
+        const payload = {
+          repoUrl,
+          defaultInternetAccess,
+          defaultDenyGitCredentialsAccess,
+        };
+        const trimmedName = sessionNameInput.trim();
+        if (trimmedName) {
+          payload.name = trimmedName;
+        }
+        if (repoAuth) {
+          payload.auth = repoAuth;
+        }
+        const response = await apiFetch("/api/v1/sessions", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(payload),
+        });
+        if (!response.ok) {
+          let details = "";
+          let errorType = "";
+          try {
+            const errorPayload = await response.json();
+            if (typeof errorPayload?.error === "string") {
+              details = errorPayload.error;
+            } else if (typeof errorPayload?.message === "string") {
+              details = errorPayload.message;
+            } else if (typeof errorPayload === "string") {
+              details = errorPayload;
+            }
+            if (typeof errorPayload?.error_type === "string") {
+              errorType = errorPayload.error_type;
+            }
+          } catch (parseError) {
+            try {
+              details = await response.text();
+            } catch (readError) {
+              details = "";
+            }
+          }
+          const isInvalidToken =
+            response.status === 401 &&
+            (errorType === "WORKSPACE_TOKEN_INVALID" ||
+              (typeof details === "string" &&
+                details.toLowerCase().includes("invalid workspace token")));
+          if (isInvalidToken) {
+            setWorkspaceToken("");
+            setWorkspaceMode("existing");
+            setWorkspaceError(
+              t("Invalid workspace token. Please sign in again.")
+            );
+            setAttachmentsError("");
+            return;
+          }
+          const suffix = details ? `: ${details}` : "";
+          if (response.status === 401 || response.status === 403) {
+            throw new Error(
+              t("Git authentication failed{{suffix}}.", { suffix })
+            );
+          }
+          if (response.status === 404) {
+            throw new Error(
+              t("Git repository not found{{suffix}}.", { suffix })
+            );
+          }
+          throw new Error(
+            t(
+              "Impossible de creer la session de pieces jointes (HTTP {{status}}{{statusText}}){{suffix}}.",
+              {
+                status: response.status,
+                statusText: response.statusText ? ` ${response.statusText}` : "",
+                suffix,
+              }
+            )
+          );
+        }
+        const data = await response.json();
+        setAttachmentSession(data);
+      } catch (error) {
+        setAttachmentsError(
+          error.message || t("Unable to create the attachment session.")
+        );
+        setOpenAiLoginPending(false);
+        setOpenAiLoginRequest(null);
+      } finally {
+        setAttachmentsLoading(false);
+        setSessionRequested(false);
+      }
+    };
+
+    createAttachmentSession();
+  }, [
+    repoUrl,
+    repoAuth,
+    attachmentSession?.sessionId,
+    apiFetch,
+    sessionMode,
+    defaultInternetAccess,
+    defaultDenyGitCredentialsAccess,
+    sessionNameInput,
+    setAttachmentSession,
+    setAttachmentsError,
+    setAttachmentsLoading,
+    setOpenAiLoginPending,
+    setOpenAiLoginRequest,
+    setSessionRequested,
+    setWorkspaceError,
+    setWorkspaceMode,
+    setWorkspaceToken,
+    t,
+  ]);
+
+  useEffect(() => {
+    if (!attachmentSession?.sessionId) {
+      return;
+    }
+    const url = new URL(window.location.href);
+    url.searchParams.set("session", attachmentSession.sessionId);
+    window.history.replaceState({}, "", url);
+  }, [attachmentSession?.sessionId]);
+
+  const handleResumeSession = useCallback(
+    async (sessionId) => {
+      if (!sessionId) {
+        return;
+      }
+      try {
+        setSessionRequested(true);
+        setAttachmentsError("");
+        const response = await apiFetch(
+          `/api/v1/sessions/${encodeURIComponent(sessionId)}`
+        );
+        if (!response.ok) {
+          throw new Error(t("Session not found."));
+        }
+        const data = await response.json();
+        setAttachmentSession(data);
+      } catch (error) {
+        setAttachmentsError(
+          error.message || t("Unable to resume the session.")
+        );
+        setSessionRequested(false);
+      }
+    },
+    [
+      apiFetch,
+      setAttachmentSession,
+      setAttachmentsError,
+      setSessionRequested,
+      t,
+    ]
+  );
+
+  const onRepoSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      const hasSession = Boolean(attachmentSession?.sessionId);
+      const trimmed = repoInput.trim();
+      if (!hasSession && !trimmed) {
+        setAttachmentsError("URL de depot git requise pour demarrer.");
+        return;
+      }
+      let auth = null;
+      if (!hasSession) {
+        if (authMode === "ssh") {
+          const trimmedKey = sshKeyInput.trim();
+          if (!trimmedKey) {
+            setAttachmentsError("Cle SSH privee requise pour demarrer.");
+            return;
+          }
+          auth = { type: "ssh", privateKey: trimmedKey };
+        }
+        if (authMode === "http") {
+          const user = httpUsername.trim();
+          if (!user || !httpPassword) {
+            setAttachmentsError(t("Username and password required."));
+            return;
+          }
+          auth = { type: "http", username: user, password: httpPassword };
+        }
+      }
+      setAttachmentsError("");
+      if (!hasSession) {
+        setSessionRequested(true);
+        setRepoAuth(auth);
+        setRepoUrl(trimmed);
+      }
+    },
+    [
+      attachmentSession?.sessionId,
+      authMode,
+      httpPassword,
+      httpUsername,
+      repoInput,
+      setAttachmentsError,
+      setRepoAuth,
+      setRepoUrl,
+      setSessionRequested,
+      sshKeyInput,
+      t,
+    ]
+  );
+
+  return {
+    handleResumeSession,
+    onRepoSubmit,
+  };
+}

package/client/src/hooks/useSessionReset.js

@@ -0,0 +1,63 @@
+import { useCallback } from "react";
+
+export default function useSessionReset({
+  setAttachmentSession,
+  setRepoUrl,
+  setRepoInput,
+  setRepoAuth,
+  setSessionRequested,
+  setAttachmentsError,
+  setAttachmentsLoading,
+  setMessages,
+  setRepoDiff,
+  setRpcLogs,
+  setRpcLogsEnabled,
+  setRepoLastCommit,
+  setWorktreeLastCommitById,
+  setCurrentTurnId,
+  setActivity,
+  setDefaultDenyGitCredentialsAccess,
+}) {
+  const handleLeaveSession = useCallback(() => {
+    setAttachmentSession(null);
+    setRepoUrl("");
+    setRepoInput("");
+    setRepoAuth(null);
+    setSessionRequested(false);
+    setAttachmentsError("");
+    setAttachmentsLoading(false);
+    setMessages([]);
+    setRepoDiff({ status: "", diff: "" });
+    setRpcLogs([]);
+    setRpcLogsEnabled(true);
+    setRepoLastCommit(null);
+    setWorktreeLastCommitById(new Map());
+    setCurrentTurnId(null);
+    setActivity("");
+    if (typeof setDefaultDenyGitCredentialsAccess === "function") {
+      setDefaultDenyGitCredentialsAccess(false);
+    }
+    const url = new URL(window.location.href);
+    url.searchParams.delete("session");
+    window.history.replaceState({}, "", url);
+  }, [
+    setActivity,
+    setAttachmentSession,
+    setAttachmentsError,
+    setAttachmentsLoading,
+    setCurrentTurnId,
+    setMessages,
+    setRepoAuth,
+    setRepoDiff,
+    setRepoInput,
+    setRepoLastCommit,
+    setRepoUrl,
+    setRpcLogs,
+    setRpcLogsEnabled,
+    setSessionRequested,
+    setDefaultDenyGitCredentialsAccess,
+    setWorktreeLastCommitById,
+  ]);
+
+  return { handleLeaveSession };
+}

package/client/src/hooks/useSessionResync.js

@@ -0,0 +1,77 @@
+import { useCallback } from "react";
+
+export default function useSessionResync({
+  attachmentSessionId,
+  apiFetch,
+  llmProvider,
+  setLlmProvider,
+  setSelectedProviders,
+  setOpenAiReady,
+  setClaudeReady,
+  setRepoDiff,
+  setRpcLogsEnabled,
+  setRpcLogs,
+  setTerminalEnabled,
+  loadMainWorktreeSnapshot,
+}) {
+  const resyncSession = useCallback(async () => {
+    if (!attachmentSessionId) {
+      return;
+    }
+    try {
+      const response = await apiFetch(
+        `/api/v1/sessions/${encodeURIComponent(attachmentSessionId)}`
+      );
+      if (!response.ok) {
+        return;
+      }
+      const data = await response.json();
+      if (data?.defaultProvider && data.defaultProvider !== llmProvider) {
+        setLlmProvider(data.defaultProvider);
+      }
+      if (Array.isArray(data?.providers) && data.providers.length) {
+        const filtered = data.providers.filter(
+          (entry) => entry === "codex" || entry === "claude"
+        );
+        if (filtered.length) {
+          setSelectedProviders(filtered);
+          setOpenAiReady(filtered.includes("codex"));
+          setClaudeReady(filtered.includes("claude"));
+        }
+      }
+      if (data?.repoDiff) {
+        setRepoDiff(data.repoDiff);
+      }
+      if (typeof data?.rpcLogsEnabled === "boolean") {
+        setRpcLogsEnabled(data.rpcLogsEnabled);
+        if (!data.rpcLogsEnabled) {
+          setRpcLogs([]);
+        }
+      }
+      if (Array.isArray(data?.rpcLogs) && data?.rpcLogsEnabled !== false) {
+        setRpcLogs(data.rpcLogs);
+      }
+      if (typeof data?.terminalEnabled === "boolean") {
+        setTerminalEnabled(data.terminalEnabled);
+      }
+      void loadMainWorktreeSnapshot();
+    } catch (error) {
+      // Ignore resync failures; reconnect loop will retry.
+    }
+  }, [
+    attachmentSessionId,
+    apiFetch,
+    llmProvider,
+    loadMainWorktreeSnapshot,
+    setClaudeReady,
+    setLlmProvider,
+    setOpenAiReady,
+    setRepoDiff,
+    setRpcLogs,
+    setRpcLogsEnabled,
+    setSelectedProviders,
+    setTerminalEnabled,
+  ]);
+
+  return { resyncSession };
+}