@vibe80/vibe80 0.1.1

package/client/src/hooks/useAttachments.jsx

@@ -0,0 +1,125 @@
+import { useCallback, useEffect, useState } from "react";
+
+export default function useAttachments({
+  attachmentSessionId,
+  workspaceToken,
+  normalizeAttachments,
+  isImageAttachment,
+  getAttachmentName,
+  attachmentIcon,
+  t,
+}) {
+  const [draftAttachments, setDraftAttachments] = useState([]);
+  const [attachmentsLoading, setAttachmentsLoading] = useState(false);
+  const [attachmentsError, setAttachmentsError] = useState("");
+  const [attachmentPreview, setAttachmentPreview] = useState(null);
+
+  const getAttachmentUrl = useCallback(
+    (attachment) => {
+      if (!attachmentSessionId) {
+        return "";
+      }
+      const url = new URL(
+        `/api/v1/sessions/${encodeURIComponent(attachmentSessionId)}/attachments/file`,
+        window.location.origin
+      );
+      if (workspaceToken) {
+        url.searchParams.set("token", workspaceToken);
+      }
+      if (attachment?.path) {
+        url.searchParams.set("path", attachment.path);
+      } else if (attachment?.name) {
+        url.searchParams.set("name", attachment.name);
+      }
+      return url.toString();
+    },
+    [attachmentSessionId, workspaceToken]
+  );
+
+  const renderMessageAttachments = useCallback(
+    (attachments = []) => {
+      const normalized = normalizeAttachments(attachments);
+      if (!normalized.length) {
+        return null;
+      }
+      return (
+        <div className="bubble-attachments">
+          {normalized.map((attachment) => {
+            const name = getAttachmentName(attachment);
+            const url = getAttachmentUrl(attachment);
+            const key = attachment?.path || attachment?.name || name;
+            if (isImageAttachment(attachment)) {
+              return (
+                <button
+                  type="button"
+                  key={key}
+                  className="attachment-card attachment-card--image"
+                  onClick={() =>
+                    url ? setAttachmentPreview({ url, name }) : null
+                  }
+                  disabled={!url}
+                >
+                  {url ? (
+                    <img
+                      src={url}
+                      alt={name || t("Attached image")}
+                      className="attachment-thumb"
+                      loading="lazy"
+                    />
+                  ) : (
+                    <div className="attachment-thumb attachment-thumb--empty" />
+                  )}
+                  <span className="attachment-name">{name}</span>
+                </button>
+              );
+            }
+            if (url) {
+              return (
+                <a
+                  key={key}
+                  className="attachment-card"
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <span className="attachment-icon" aria-hidden="true">
+                    {attachmentIcon}
+                  </span>
+                  <span className="attachment-name">{name}</span>
+                </a>
+              );
+            }
+            return (
+              <div key={key} className="attachment-card">
+                <span className="attachment-icon" aria-hidden="true">
+                  {attachmentIcon}
+                </span>
+                <span className="attachment-name">{name}</span>
+              </div>
+            );
+          })}
+        </div>
+      );
+    },
+    [getAttachmentName, getAttachmentUrl, isImageAttachment, normalizeAttachments, t]
+  );
+
+  useEffect(() => {
+    if (!attachmentSessionId) {
+      setDraftAttachments([]);
+    }
+  }, [attachmentSessionId]);
+
+  return {
+    attachmentPreview,
+    attachmentsError,
+    attachmentsLoading,
+    draftAttachments,
+    getAttachmentUrl,
+    renderMessageAttachments,
+    setAttachmentPreview,
+    setAttachmentsError,
+    setAttachmentsLoading,
+    setDraftAttachments,
+  };
+}

package/client/src/hooks/useBacklog.js

@@ -0,0 +1,254 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+const toIsoDateTime = (value) => {
+  if (value == null || value === "") {
+    return null;
+  }
+  const parsed = new Date(value);
+  return Number.isFinite(parsed.getTime()) ? parsed.toISOString() : null;
+};
+
+const normalizeBacklogItem = (item) => {
+  if (!item || typeof item !== "object") {
+    return item;
+  }
+  return {
+    ...item,
+    createdAt: toIsoDateTime(item.createdAt),
+    doneAt: toIsoDateTime(item.doneAt),
+  };
+};
+
+export default function useBacklog({
+  attachmentSessionId,
+  apiFetch,
+  normalizeAttachments,
+  sendMessage,
+  setInput,
+  setMessages,
+  setWorktrees,
+  setDraftAttachments,
+  input,
+  draftAttachments,
+  inputRef,
+  showToast,
+  t,
+}) {
+  const [backlog, setBacklog] = useState([]);
+
+  const backlogKey = useMemo(
+    () =>
+      attachmentSessionId ? `backlog:${attachmentSessionId}` : null,
+    [attachmentSessionId]
+  );
+
+  useEffect(() => {
+    if (!backlogKey) {
+      return;
+    }
+    try {
+      const stored = JSON.parse(localStorage.getItem(backlogKey) || "[]");
+      setBacklog(
+        Array.isArray(stored)
+          ? stored.map(normalizeBacklogItem).filter(Boolean)
+          : []
+      );
+    } catch {
+      setBacklog([]);
+    }
+  }, [backlogKey]);
+
+  useEffect(() => {
+    if (!backlogKey) {
+      return;
+    }
+    localStorage.setItem(backlogKey, JSON.stringify(backlog));
+  }, [backlog, backlogKey]);
+
+  const updateBacklogMessages = useCallback(
+    (updateFn) => {
+      setMessages((current) =>
+        current.map((message) => {
+          if (message?.type !== "backlog_view") {
+            return message;
+          }
+          const items = Array.isArray(message.backlog?.items)
+            ? message.backlog.items
+            : [];
+          const updatedItems = updateFn(items);
+          if (updatedItems === items) {
+            return message;
+          }
+          return {
+            ...message,
+            backlog: {
+              ...(message.backlog || {}),
+              items: updatedItems,
+            },
+          };
+        })
+      );
+      setWorktrees((current) => {
+        const next = new Map(current);
+        next.forEach((wt, id) => {
+          if (!Array.isArray(wt?.messages)) {
+            return;
+          }
+          let changed = false;
+          const updatedMessages = wt.messages.map((message) => {
+            if (message?.type !== "backlog_view") {
+              return message;
+            }
+            const items = Array.isArray(message.backlog?.items)
+              ? message.backlog.items
+              : [];
+            const updatedItems = updateFn(items);
+            if (updatedItems === items) {
+              return message;
+            }
+            changed = true;
+            return {
+              ...message,
+              backlog: {
+                ...(message.backlog || {}),
+                items: updatedItems,
+              },
+            };
+          });
+          if (changed) {
+            next.set(id, { ...wt, messages: updatedMessages });
+          }
+        });
+        return next;
+      });
+    },
+    [setMessages, setWorktrees]
+  );
+
+  const setBacklogMessagePage = useCallback(
+    (targetWorktreeId, messageId, page) => {
+      if (targetWorktreeId && targetWorktreeId !== "main") {
+        setWorktrees((current) => {
+          const next = new Map(current);
+          const wt = next.get(targetWorktreeId);
+          if (!wt) {
+            return current;
+          }
+          const updatedMessages = wt.messages.map((message) =>
+            message?.id === messageId && message.type === "backlog_view"
+              ? {
+                  ...message,
+                  backlog: {
+                    ...(message.backlog || {}),
+                    page,
+                  },
+                }
+              : message
+          );
+          next.set(targetWorktreeId, { ...wt, messages: updatedMessages });
+          return next;
+        });
+        return;
+      }
+      setMessages((current) =>
+        current.map((message) =>
+          message?.id === messageId && message.type === "backlog_view"
+            ? {
+                ...message,
+                backlog: {
+                  ...(message.backlog || {}),
+                  page,
+                },
+              }
+            : message
+        )
+      );
+    },
+    [setMessages, setWorktrees]
+  );
+
+  const markBacklogItemDone = useCallback(
+    async (itemId) => {
+      if (!attachmentSessionId) {
+        showToast?.(t("Session not found."), "error");
+        return;
+      }
+      try {
+        const response = await apiFetch(
+          `/api/v1/sessions/${encodeURIComponent(
+            attachmentSessionId
+          )}/backlog-items/${encodeURIComponent(itemId)}`,
+          {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ done: true }),
+          }
+        );
+        if (!response.ok) {
+          const payload = await response.json().catch(() => ({}));
+          throw new Error(payload?.error || t("Unable to update backlog."));
+        }
+        const payload = await response.json().catch(() => ({}));
+        const updatedItem = normalizeBacklogItem(payload?.item);
+        updateBacklogMessages((items) =>
+          items.map((item) =>
+            item?.id === itemId
+              ? { ...item, ...updatedItem, done: true }
+              : item
+          )
+        );
+      } catch (error) {
+        showToast?.(error.message || t("Unable to update backlog."), "error");
+      }
+    },
+    [apiFetch, attachmentSessionId, showToast, t, updateBacklogMessages]
+  );
+
+  const addToBacklog = useCallback(() => {
+    const trimmed = input.trim();
+    if (!trimmed) {
+      return;
+    }
+    const entry = {
+      id: `backlog-${Date.now()}-${Math.random().toString(16).slice(2, 8)}`,
+      text: trimmed,
+      createdAt: new Date().toISOString(),
+      attachments: draftAttachments,
+    };
+    setBacklog((current) => [entry, ...current]);
+    setInput("");
+  }, [draftAttachments, input, setInput]);
+
+  const removeFromBacklog = useCallback((id) => {
+    setBacklog((current) => current.filter((item) => item.id !== id));
+  }, []);
+
+  const editBacklogItem = useCallback(
+    (item) => {
+      setInput(item.text || "");
+      setDraftAttachments(normalizeAttachments(item.attachments || []));
+      inputRef?.current?.focus();
+    },
+    [inputRef, normalizeAttachments, setDraftAttachments, setInput]
+  );
+
+  const launchBacklogItem = useCallback(
+    (item) => {
+      sendMessage(item.text || "", item.attachments || []);
+      removeFromBacklog(item.id);
+    },
+    [removeFromBacklog, sendMessage]
+  );
+
+  return {
+    addToBacklog,
+    backlog,
+    markBacklogItemDone,
+    removeFromBacklog,
+    editBacklogItem,
+    launchBacklogItem,
+    setBacklog,
+    setBacklogMessagePage,
+    updateBacklogMessages,
+  };
+}

package/client/src/hooks/useChatClear.js

@@ -0,0 +1,90 @@
+import { useCallback } from "react";
+
+export default function useChatClear({
+  activeWorktreeId,
+  setToolbarExportOpen,
+  setWorktrees,
+  lastNotifiedIdRef,
+  attachmentSessionId,
+  apiFetch,
+  setMessages,
+  messageIndex,
+  commandIndex,
+  setChoiceSelections,
+  choicesKey,
+  setCommandPanelOpen,
+  setToolResultPanelOpen,
+  llmProvider,
+}) {
+  const handleClearChat = useCallback(async () => {
+    setToolbarExportOpen(false);
+    if (activeWorktreeId !== "main") {
+      setWorktrees((current) => {
+        const next = new Map(current);
+        const wt = next.get(activeWorktreeId);
+        if (wt) {
+          next.set(activeWorktreeId, { ...wt, messages: [] });
+        }
+        return next;
+      });
+      lastNotifiedIdRef.current = null;
+      if (attachmentSessionId) {
+        try {
+          await apiFetch(
+            `/api/v1/sessions/${encodeURIComponent(attachmentSessionId)}/clear`,
+            {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ worktreeId: activeWorktreeId }),
+            }
+          );
+        } catch (error) {
+          // Ignore clear failures; next refresh will resync.
+        }
+      }
+      return;
+    }
+
+    setMessages([]);
+    messageIndex.clear();
+    commandIndex.clear();
+    setChoiceSelections({});
+    if (choicesKey) {
+      localStorage.removeItem(choicesKey);
+    }
+    setCommandPanelOpen({});
+    setToolResultPanelOpen({});
+    lastNotifiedIdRef.current = null;
+    if (attachmentSessionId) {
+      try {
+        await apiFetch(
+          `/api/v1/sessions/${encodeURIComponent(attachmentSessionId)}/clear`,
+          {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ provider: llmProvider }),
+          }
+        );
+      } catch (error) {
+        // Ignore clear failures; next refresh will resync.
+      }
+    }
+  }, [
+    activeWorktreeId,
+    apiFetch,
+    attachmentSessionId,
+    choicesKey,
+    commandIndex,
+    llmProvider,
+    messageIndex,
+    setChoiceSelections,
+    setCommandPanelOpen,
+    setMessages,
+    setToolResultPanelOpen,
+    setToolbarExportOpen,
+    setWorktrees,
+    lastNotifiedIdRef,
+  ]);
+
+  return { handleClearChat };
+}

package/client/src/hooks/useChatCollapse.js

@@ -0,0 +1,42 @@
+import { useMemo, useState } from "react";
+
+export default function useChatCollapse({
+  activeChatKey,
+  displayedGroupedMessages,
+  CHAT_COLLAPSE_THRESHOLD,
+  CHAT_COLLAPSE_VISIBLE,
+}) {
+  const [showOlderMessagesByTab, setShowOlderMessagesByTab] = useState({});
+  const showOlderMessages = Boolean(showOlderMessagesByTab[activeChatKey]);
+  const collapsedMessages = useMemo(() => {
+    const total = displayedGroupedMessages.length;
+    const shouldCollapse = !showOlderMessages && total > CHAT_COLLAPSE_THRESHOLD;
+    if (!shouldCollapse) {
+      return {
+        visibleMessages: displayedGroupedMessages,
+        hiddenCount: 0,
+        isCollapsed: false,
+      };
+    }
+    const visibleMessages = displayedGroupedMessages.slice(
+      Math.max(0, total - CHAT_COLLAPSE_VISIBLE)
+    );
+    return {
+      visibleMessages,
+      hiddenCount: Math.max(0, total - visibleMessages.length),
+      isCollapsed: true,
+    };
+  }, [
+    displayedGroupedMessages,
+    showOlderMessages,
+    CHAT_COLLAPSE_THRESHOLD,
+    CHAT_COLLAPSE_VISIBLE,
+  ]);
+
+  return {
+    showOlderMessagesByTab,
+    setShowOlderMessagesByTab,
+    showOlderMessages,
+    collapsedMessages,
+  };
+}