@vibe80/vibe80 0.1.1

package/client/src/components/Chat/ChatToolbar.jsx

@@ -0,0 +1,109 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faBroom,
+  faCodeCompare,
+  faComments,
+  faFolderTree,
+  faTerminal,
+} from "@fortawesome/free-solid-svg-icons";
+
+export default function ChatToolbar({
+  t,
+  activePane,
+  handleViewSelect,
+  handleDiffSelect,
+  terminalEnabled,
+  hasMessages,
+  handleClearChat,
+}) {
+  if (activePane === "settings") {
+    return null;
+  }
+
+  return (
+    <div className="chat-toolbar" role="toolbar" aria-label={t("Chat tools")}>
+      <div className="chat-toolbar-group">
+        <button
+          type="button"
+          className={`chat-toolbar-button ${activePane === "chat" ? "is-active" : ""}`}
+          onClick={() => handleViewSelect("chat")}
+          aria-pressed={activePane === "chat"}
+          aria-label={t("Messages")}
+          title={t("Messages")}
+        >
+          <span className="chat-toolbar-icon-wrap" aria-hidden="true">
+            <span className="chat-toolbar-icon">
+              <FontAwesomeIcon icon={faComments} />
+            </span>
+          </span>
+          <span className="chat-toolbar-label">{t("Messages")}</span>
+        </button>
+        <button
+          type="button"
+          className={`chat-toolbar-button ${activePane === "diff" ? "is-active" : ""}`}
+          onClick={handleDiffSelect}
+          aria-pressed={activePane === "diff"}
+          aria-label={t("Diff")}
+          title={t("Diff")}
+        >
+          <span className="chat-toolbar-icon-wrap" aria-hidden="true">
+            <span className="chat-toolbar-icon">
+              <FontAwesomeIcon icon={faCodeCompare} />
+            </span>
+          </span>
+          <span className="chat-toolbar-label">{t("Diff")}</span>
+        </button>
+        <button
+          type="button"
+          className={`chat-toolbar-button ${activePane === "explorer" ? "is-active" : ""}`}
+          onClick={() => handleViewSelect("explorer")}
+          aria-pressed={activePane === "explorer"}
+          aria-label={t("Explorer")}
+          title={t("Explorer")}
+        >
+          <span className="chat-toolbar-icon-wrap" aria-hidden="true">
+            <span className="chat-toolbar-icon">
+              <FontAwesomeIcon icon={faFolderTree} />
+            </span>
+          </span>
+          <span className="chat-toolbar-label">{t("Explorer")}</span>
+        </button>
+        <button
+          type="button"
+          className={`chat-toolbar-button ${activePane === "terminal" ? "is-active" : ""}`}
+          onClick={() => handleViewSelect("terminal")}
+          aria-pressed={activePane === "terminal"}
+          aria-label={t("Terminal")}
+          title={t("Terminal")}
+          disabled={!terminalEnabled}
+        >
+          <span className="chat-toolbar-icon-wrap" aria-hidden="true">
+            <span className="chat-toolbar-icon">
+              <FontAwesomeIcon icon={faTerminal} />
+            </span>
+          </span>
+          <span className="chat-toolbar-label">{t("Terminal")}</span>
+        </button>
+      </div>
+      <div className="chat-toolbar-divider" />
+      <div className="chat-toolbar-group">
+        <button
+          type="button"
+          className="chat-toolbar-button is-danger"
+          onClick={() => handleClearChat()}
+          aria-label={t("Clear")}
+          title={t("Clear")}
+          disabled={!hasMessages}
+        >
+          <span className="chat-toolbar-icon-wrap" aria-hidden="true">
+            <span className="chat-toolbar-icon" aria-hidden="true">
+              <FontAwesomeIcon icon={faBroom} />
+            </span>
+          </span>
+          <span className="chat-toolbar-label">{t("Clear")}</span>
+        </button>
+      </div>
+    </div>
+  );
+}

package/client/src/components/Chat/useChatComposer.js

@@ -0,0 +1,462 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+export default function useChatComposer({
+  t,
+  input,
+  setInput,
+  inputRef,
+  handleSendMessageRef,
+  attachmentSession,
+  apiFetch,
+  normalizeAttachments,
+  setDraftAttachments,
+  draftAttachments,
+  setAttachmentsLoading,
+  setAttachmentsError,
+  showToast,
+  uploadInputRef,
+  attachmentsLoading,
+  conversationRef,
+  composerRef,
+  isMobileLayout,
+}) {
+  const [commandMenuOpen, setCommandMenuOpen] = useState(false);
+  const [commandQuery, setCommandQuery] = useState("");
+  const [commandSelection, setCommandSelection] = useState(null);
+  const [isDraggingAttachments, setIsDraggingAttachments] = useState(false);
+  const dragCounterRef = useRef(0);
+
+  const commandOptions = useMemo(
+    () => [
+      {
+        id: "todo",
+        label: "/todo",
+        description: t("Add to backlog"),
+        insert: "/todo ",
+      },
+      {
+        id: "backlog",
+        label: "/backlog",
+        description: t("Show backlog"),
+        insert: "/backlog",
+      },
+      {
+        id: "open",
+        label: "/open",
+        description: t("Open path"),
+        insert: "/open ",
+      },
+      {
+        id: "run",
+        label: "/run",
+        description: t("Run shell command"),
+        insert: "/run ",
+      },
+      {
+        id: "screenshot",
+        label: "/screenshot",
+        description: t("Capture screenshot"),
+        insert: "/screenshot",
+      },
+      {
+        id: "git",
+        label: "/git",
+        description: t("Run git command"),
+        insert: "/git ",
+      },
+      {
+        id: "diff",
+        label: "/diff",
+        description: t("Open diff view"),
+        insert: "/diff",
+      },
+      {
+        id: "annotation",
+        label: "/annotation",
+        description: t("Toggle annotation mode (EXPERIMENTAL)"),
+        insert: "/annotation on",
+      },
+    ],
+    [t]
+  );
+
+  const filteredCommands = useMemo(() => {
+    const query = commandQuery.trim().toLowerCase();
+    if (!query) {
+      return commandOptions;
+    }
+    return commandOptions.filter((cmd) =>
+      cmd.label.toLowerCase().includes(query)
+    );
+  }, [commandOptions, commandQuery]);
+
+  useEffect(() => {
+    if (!commandMenuOpen) {
+      setCommandSelection(null);
+      return;
+    }
+    if (!filteredCommands.length) {
+      setCommandSelection(null);
+      return;
+    }
+    setCommandSelection((current) =>
+      filteredCommands.some((cmd) => cmd.id === current)
+        ? current
+        : filteredCommands[0].id
+    );
+  }, [commandMenuOpen, filteredCommands]);
+
+  const handleInputChange = useCallback(
+    (event) => {
+      const { value } = event.target;
+      setInput(value);
+      if (value.startsWith("/") && !value.includes(" ")) {
+        setCommandMenuOpen(true);
+        setCommandQuery(value.slice(1));
+      } else {
+        setCommandMenuOpen(false);
+        setCommandQuery("");
+      }
+      if (!inputRef.current) {
+        return;
+      }
+      inputRef.current.style.height = "auto";
+      inputRef.current.style.height = `${inputRef.current.scrollHeight}px`;
+    },
+    [inputRef, setInput]
+  );
+
+  const handleComposerKeyDown = useCallback(
+    (event) => {
+      if (commandMenuOpen) {
+        if (event.key === "Escape") {
+          event.preventDefault();
+          setCommandMenuOpen(false);
+          return;
+        }
+        if (event.key === "ArrowDown") {
+          event.preventDefault();
+          if (!filteredCommands.length) {
+            return;
+          }
+          const index = filteredCommands.findIndex(
+            (cmd) => cmd.id === commandSelection
+          );
+          const nextIndex =
+            index === -1 || index === filteredCommands.length - 1
+              ? 0
+              : index + 1;
+          setCommandSelection(filteredCommands[nextIndex].id);
+          return;
+        }
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          if (!filteredCommands.length) {
+            return;
+          }
+          const index = filteredCommands.findIndex(
+            (cmd) => cmd.id === commandSelection
+          );
+          const nextIndex =
+            index <= 0 ? filteredCommands.length - 1 : index - 1;
+          setCommandSelection(filteredCommands[nextIndex].id);
+          return;
+        }
+        if (event.key === "Enter" && !event.shiftKey) {
+          if (commandSelection) {
+            event.preventDefault();
+            const selected = filteredCommands.find(
+              (cmd) => cmd.id === commandSelection
+            );
+            if (selected) {
+              setInput(selected.insert);
+              setCommandMenuOpen(false);
+              setCommandQuery("");
+              inputRef.current?.focus();
+            }
+            return;
+          }
+        }
+      }
+      if (event.isComposing) {
+        return;
+      }
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        handleSendMessageRef.current?.();
+      }
+    },
+    [
+      commandMenuOpen,
+      filteredCommands,
+      commandSelection,
+      handleSendMessageRef,
+      inputRef,
+      setInput,
+    ]
+  );
+
+  useEffect(() => {
+    if (!inputRef.current) {
+      return;
+    }
+    inputRef.current.style.height = "auto";
+    inputRef.current.style.height = `${inputRef.current.scrollHeight}px`;
+  }, [input, isMobileLayout, inputRef]);
+
+  useEffect(() => {
+    if (!conversationRef.current || !composerRef.current) {
+      return undefined;
+    }
+    const updateComposerSpace = () => {
+      if (!conversationRef.current || !composerRef.current) {
+        return;
+      }
+      const rect = composerRef.current.getBoundingClientRect();
+      const extra = isMobileLayout ? 12 : 16;
+      conversationRef.current.style.setProperty(
+        "--composer-space",
+        `${Math.ceil(rect.height + extra)}px`
+      );
+    };
+    updateComposerSpace();
+    let observer;
+    if (typeof ResizeObserver !== "undefined") {
+      observer = new ResizeObserver(updateComposerSpace);
+      observer.observe(composerRef.current);
+    }
+    window.addEventListener("resize", updateComposerSpace);
+    return () => {
+      window.removeEventListener("resize", updateComposerSpace);
+      if (observer) {
+        observer.disconnect();
+      }
+    };
+  }, [isMobileLayout, draftAttachments.length, conversationRef, composerRef]);
+
+  const uploadFiles = useCallback(
+    async (files) => {
+      if (!files.length || !attachmentSession?.sessionId) {
+        return;
+      }
+      try {
+        setAttachmentsLoading(true);
+        setAttachmentsError("");
+        const formData = new FormData();
+        files.forEach((file) => formData.append("files", file));
+        const response = await apiFetch(
+          `/api/v1/sessions/${encodeURIComponent(
+            attachmentSession.sessionId
+          )}/attachments/upload`,
+          {
+            method: "POST",
+            body: formData,
+          }
+        );
+        if (!response.ok) {
+          throw new Error("Upload failed.");
+        }
+        const data = await response.json();
+        const uploaded = normalizeAttachments(data.files || []);
+        setDraftAttachments((current) => [...current, ...uploaded]);
+      } catch (error) {
+        setAttachmentsError(error.message || t("Unable to upload attachments."));
+      } finally {
+        setAttachmentsLoading(false);
+      }
+    },
+    [
+      apiFetch,
+      attachmentSession?.sessionId,
+      normalizeAttachments,
+      setAttachmentsError,
+      setAttachmentsLoading,
+      setDraftAttachments,
+      t,
+    ]
+  );
+
+  const captureScreenshot = useCallback(async () => {
+    if (!attachmentSession?.sessionId) {
+      showToast(t("Session not found."), "error");
+      return;
+    }
+    if (!navigator.mediaDevices?.getDisplayMedia) {
+      showToast(t("Screenshot failed."), "error");
+      return;
+    }
+    try {
+      const stream = await navigator.mediaDevices.getDisplayMedia({
+        video: { cursor: "never" },
+        audio: false,
+      });
+      const video = document.createElement("video");
+      video.srcObject = stream;
+      await new Promise((resolve) => {
+        video.onloadedmetadata = () => resolve();
+      });
+      await video.play();
+      const canvas = document.createElement("canvas");
+      canvas.width = video.videoWidth || 1;
+      canvas.height = video.videoHeight || 1;
+      const ctx = canvas.getContext("2d");
+      if (!ctx) {
+        throw new Error("Canvas unavailable");
+      }
+      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
+      stream.getTracks().forEach((track) => track.stop());
+      const blob = await new Promise((resolve, reject) => {
+        canvas.toBlob(
+          (result) =>
+            result ? resolve(result) : reject(new Error("Blob failed")),
+          "image/png"
+        );
+      });
+      const filename = `screenshot-${Date.now()}.png`;
+      const file = new File([blob], filename, { type: "image/png" });
+      await uploadFiles([file]);
+      showToast(t("Screenshot captured."));
+    } catch (error) {
+      showToast(error?.message || t("Screenshot failed."), "error");
+    }
+  }, [attachmentSession?.sessionId, showToast, t, uploadFiles]);
+
+  const onUploadAttachments = useCallback(
+    async (event) => {
+      const files = Array.from(event.target.files || []);
+      await uploadFiles(files);
+      event.target.value = "";
+    },
+    [uploadFiles]
+  );
+
+  const onPasteAttachments = useCallback(
+    async (event) => {
+      if (!attachmentSession?.sessionId) {
+        return;
+      }
+      const items = Array.from(event.clipboardData?.items || []);
+      const files = items
+        .filter((item) => item.kind === "file")
+        .map((item) => item.getAsFile())
+        .filter(Boolean);
+      if (!files.length) {
+        return;
+      }
+      event.preventDefault();
+      await uploadFiles(files);
+    },
+    [attachmentSession?.sessionId, uploadFiles]
+  );
+
+  const onDragOverComposer = useCallback(
+    (event) => {
+      if (!attachmentSession?.sessionId) {
+        return;
+      }
+      if (event.dataTransfer?.types?.includes("Files")) {
+        event.preventDefault();
+      }
+    },
+    [attachmentSession?.sessionId]
+  );
+
+  const onDragEnterComposer = useCallback(
+    (event) => {
+      if (!attachmentSession?.sessionId) {
+        return;
+      }
+      if (event.dataTransfer?.types?.includes("Files")) {
+        event.preventDefault();
+        dragCounterRef.current += 1;
+        setIsDraggingAttachments(true);
+      }
+    },
+    [attachmentSession?.sessionId]
+  );
+
+  const onDragLeaveComposer = useCallback(
+    (event) => {
+      if (!attachmentSession?.sessionId) {
+        return;
+      }
+      if (event.dataTransfer?.types?.includes("Files")) {
+        event.preventDefault();
+        dragCounterRef.current = Math.max(0, dragCounterRef.current - 1);
+        if (dragCounterRef.current === 0) {
+          setIsDraggingAttachments(false);
+        }
+      }
+    },
+    [attachmentSession?.sessionId]
+  );
+
+  const onDropAttachments = useCallback(
+    async (event) => {
+      if (!attachmentSession?.sessionId) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      dragCounterRef.current = 0;
+      setIsDraggingAttachments(false);
+      const files = Array.from(event.dataTransfer?.files || []);
+      if (!files.length) {
+        return;
+      }
+      await uploadFiles(files);
+    },
+    [attachmentSession?.sessionId, uploadFiles]
+  );
+
+  const removeDraftAttachment = useCallback(
+    (identifier) => {
+      if (!identifier) {
+        return;
+      }
+      setDraftAttachments((current) =>
+        current.filter((item) => {
+          const key = item?.path || item?.name;
+          return key !== identifier;
+        })
+      );
+    },
+    [setDraftAttachments]
+  );
+
+  const triggerAttachmentPicker = useCallback(() => {
+    if (!attachmentSession || attachmentsLoading) {
+      return;
+    }
+    requestAnimationFrame(() => {
+      uploadInputRef.current?.click();
+    });
+  }, [attachmentSession, attachmentsLoading, uploadInputRef]);
+
+  const onSubmit = useCallback((event) => {
+    event.preventDefault();
+    handleSendMessageRef.current?.();
+  }, [handleSendMessageRef]);
+
+  return {
+    commandMenuOpen,
+    setCommandMenuOpen,
+    commandQuery,
+    setCommandQuery,
+    commandSelection,
+    filteredCommands,
+    isDraggingAttachments,
+    handleInputChange,
+    handleComposerKeyDown,
+    onSubmit,
+    onUploadAttachments,
+    onPasteAttachments,
+    onDragOverComposer,
+    onDragEnterComposer,
+    onDragLeaveComposer,
+    onDropAttachments,
+    removeDraftAttachment,
+    triggerAttachmentPicker,
+    captureScreenshot,
+  };
+}

package/client/src/components/Diff/DiffPanel.jsx

@@ -0,0 +1,129 @@
+import React from "react";
+import { Diff, Hunk } from "react-diff-view";
+
+export default function DiffPanel({
+  t,
+  activePane,
+  isInWorktree,
+  diffStatusLines,
+  connected,
+  currentProcessing,
+  hasCurrentChanges,
+  sendCommitMessage,
+  diffFiles,
+  currentDiff,
+  untrackedFilePanels,
+  untrackedLoading,
+}) {
+  const hasUntrackedPanels = Array.isArray(untrackedFilePanels) && untrackedFilePanels.length > 0;
+  const renderUntrackedText = (content) => {
+    const lines = String(content || "").split(/\r?\n/);
+    return (
+      <table className="diff-view untracked-diff-view">
+        <tbody>
+          {lines.map((line, index) => (
+            <tr key={`line-${index}`} className="diff-line diff-line-add">
+              <td className="diff-gutter diff-gutter-added">
+                <span className="diff-line-number">{index + 1}</span>
+              </td>
+              <td className="diff-code diff-code-added">
+                {line.length > 0 ? line : "\u00a0"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    );
+  };
+
+  return (
+    <div className={`diff-panel ${activePane === "diff" ? "" : "is-hidden"}`}>
+      <div className="diff-header">
+        <div className="diff-title">
+          {isInWorktree ? t("Worktree diff") : t("Repository diff")}
+        </div>
+        {diffStatusLines.length > 0 && (
+          <div className="diff-count">
+            {t("{{count}} files modified", {
+              count: diffStatusLines.length,
+            })}
+          </div>
+        )}
+        <div className="diff-actions">
+          <button
+            type="button"
+            className="diff-action-button"
+            onClick={() => sendCommitMessage("Commit")}
+            disabled={!connected || currentProcessing || !hasCurrentChanges}
+            title={t("Send 'Commit' in chat")}
+          >
+            {t("Commit")}
+          </button>
+          <button
+            type="button"
+            className="diff-action-button primary"
+            onClick={() => sendCommitMessage("Commit & Push")}
+            disabled={!connected || currentProcessing || !hasCurrentChanges}
+            title={t("Send 'Commit & Push' in chat")}
+          >
+            {t("Commit & Push")}
+          </button>
+        </div>
+      </div>
+      {diffStatusLines.length > 0 && (
+        <div className="diff-status">
+          {diffStatusLines.map((line, index) => (
+            <div key={`${line}-${index}`}>{line}</div>
+          ))}
+        </div>
+      )}
+      {diffFiles.length > 0 || hasUntrackedPanels ? (
+        <div className="diff-body">
+          {diffFiles.map((file) => {
+            const fileLabel = file.newPath || file.oldPath || t("Diff");
+            return (
+              <div
+                key={`${file.oldPath}-${file.newPath}-${file.type}`}
+                className="diff-file"
+              >
+                <div className="diff-file-header">{fileLabel}</div>
+                <Diff viewType="unified" diffType={file.type} hunks={file.hunks}>
+                  {(hunks) =>
+                    hunks.map((hunk) => (
+                      <Hunk key={hunk.content} hunk={hunk} />
+                    ))
+                  }
+                </Diff>
+              </div>
+            );
+          })}
+          {hasUntrackedPanels &&
+            untrackedFilePanels.map((panel) => (
+              <div key={`untracked-${panel.path}`} className="diff-file">
+                <div className="diff-file-header">{`?? ${panel.path}`}</div>
+                {panel.error ? (
+                  <pre className="diff-fallback">{t("Unable to load file.")}</pre>
+                ) : panel.binary ? (
+                  <pre className="diff-fallback">{t("binary data")}</pre>
+                ) : (
+                  <>
+                    {renderUntrackedText(panel.content || "")}
+                    {panel.truncated && (
+                      <div className="diff-file-note">{t("File truncated for display.")}</div>
+                    )}
+                  </>
+                )}
+              </div>
+            ))}
+          {untrackedLoading && (
+            <div className="diff-file-note">{t("Loading untracked files...")}</div>
+          )}
+        </div>
+      ) : currentDiff.diff ? (
+        <pre className="diff-fallback">{currentDiff.diff}</pre>
+      ) : (
+        <div className="diff-empty">{t("No changes detected.")}</div>
+      )}
+    </div>
+  );
+}