tower-studio 0.1.1 → 0.1.3

package/src/components/assistant/assistant-provider.tsx

@@ -0,0 +1,512 @@
+"use client";
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+} from "react";
+import { toast } from "sonner";
+import { getConfigValue } from "@/actions/config-actions";
+import { ASSISTANT_SESSION_KEY } from "@/lib/assistant-constants";
+import type { ChatMessage, MessageRole } from "@/hooks/use-assistant-chat";
+import {
+  type AssistantSession,
+  getSessions,
+  addSession,
+  deleteSession,
+  getActiveSessionId,
+  setActiveSessionId,
+  buildSessionTitle,
+} from "@/lib/assistant-sessions";
+
+// ---------------------------------------------------------------------------
+// Context types
+// ---------------------------------------------------------------------------
+
+interface AssistantContextValue {
+  isOpen: boolean;
+  isStarting: boolean;
+  displayMode: "sidebar" | "dialog";
+  worktreePath: string | null;
+  toggleAssistant: () => void;
+  closeAssistant: () => void;
+  // Chat state — persisted at provider level so it survives route changes
+  chatMessages: ChatMessage[];
+  chatStatus: "idle" | "connecting" | "streaming" | "error";
+  isChatThinking: boolean;
+  isLoadingHistory: boolean;
+  sendChatMessage: (text: string, options?: { imageFilenames?: string[] }) => void;
+  cancelChat: () => string | null;
+  // Session management
+  sessions: AssistantSession[];
+  activeSessionId: string | null;
+  createNewSession: () => void;
+  switchSession: (sessionId: string) => void;
+  removeSession: (sessionId: string) => void;
+  refreshSessions: () => Promise<void>;
+}
+
+const AssistantContext = createContext<AssistantContextValue | null>(null);
+
+// ---------------------------------------------------------------------------
+// ID generator (same as in use-assistant-chat.ts)
+// ---------------------------------------------------------------------------
+
+function nextId(): string {
+  return typeof crypto !== "undefined" && crypto.randomUUID
+    ? crypto.randomUUID()
+    : `msg-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+
+// ---------------------------------------------------------------------------
+// sessionStorage image cache — preserves imageFilenames across page reload
+// ---------------------------------------------------------------------------
+
+const IMAGE_CACHE_KEY = "assistant-image-cache";
+
+function cacheMessageImages(sessionId: string, userMsgIndex: number, filenames: string[]): void {
+  try {
+    const raw = sessionStorage.getItem(IMAGE_CACHE_KEY);
+    const cache: Record<string, Record<number, string[]>> = raw ? JSON.parse(raw) : {};
+    if (!cache[sessionId]) cache[sessionId] = {};
+    cache[sessionId][userMsgIndex] = filenames;
+    sessionStorage.setItem(IMAGE_CACHE_KEY, JSON.stringify(cache));
+  } catch { /* sessionStorage unavailable */ }
+}
+
+function getCachedImages(sessionId: string): Record<number, string[]> {
+  try {
+    const raw = sessionStorage.getItem(IMAGE_CACHE_KEY);
+    if (!raw) return {};
+    const cache = JSON.parse(raw) as Record<string, Record<number, string[]>>;
+    return cache[sessionId] ?? {};
+  } catch { return {}; }
+}
+
+// ---------------------------------------------------------------------------
+// SSE event type
+// ---------------------------------------------------------------------------
+
+interface SSEEvent {
+  type: "text" | "text_delta" | "tool_use" | "tool_start" | "tool_result" | "error" | "done";
+  content?: string;
+  sessionId?: string;
+  toolInput?: unknown;
+  toolOutput?: string;
+}
+
+// ---------------------------------------------------------------------------
+// Provider
+// ---------------------------------------------------------------------------
+
+export function AssistantProvider({ children }: { children: ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isStarting, setIsStarting] = useState(false);
+  const [displayMode, setDisplayMode] = useState<"sidebar" | "dialog">("sidebar");
+  const [worktreePath, setWorktreePath] = useState<string | null>(null);
+
+  // Chat state — lives here so it persists across route changes
+  const [chatMessages, setChatMessages] = useState<ChatMessage[]>([]);
+  const [chatStatus, setChatStatus] = useState<"idle" | "connecting" | "streaming" | "error">("idle");
+  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+  const msgsRef = useRef<ChatMessage[]>([]);
+  const sessionIdRef = useRef<string | null>(null);
+  const abortRef = useRef<AbortController | null>(null);
+
+  // Session management state
+  const [sessions, setSessions] = useState<AssistantSession[]>([]);
+  const [activeSessionId, setActiveSessionIdState] = useState<string | null>(null);
+  // Track whether the current session record has been created
+  const sessionCreatedRef = useRef(false);
+
+  const flushChat = useCallback(() => {
+    setChatMessages([...msgsRef.current]);
+  }, []);
+
+  // Read config
+  const refreshConfig = useCallback(async () => {
+    const dm = await getConfigValue<string>("assistant.displayMode", "sidebar");
+    setDisplayMode(dm === "dialog" ? "dialog" : "sidebar");
+  }, []);
+
+  useEffect(() => { refreshConfig(); }, [refreshConfig]);
+
+  // Session list from localStorage registry (not SDK — avoids cross-project leakage)
+  const refreshSessions = useCallback(async () => {
+    setSessions(getSessions());
+  }, []);
+
+  // Fetch history messages for a session from SDK via API
+  const loadSessionHistory = useCallback(async (sessionId: string) => {
+    setIsLoadingHistory(true);
+    try {
+      const res = await fetch(
+        `/api/internal/assistant/sessions?sessionId=${encodeURIComponent(sessionId)}`
+      );
+      if (!res.ok) return;
+      const data = await res.json();
+      if (Array.isArray(data.messages)) {
+        msgsRef.current = data.messages;
+        // Restore imageFilenames from sessionStorage cache
+        const imgCache = getCachedImages(sessionId);
+        if (Object.keys(imgCache).length > 0) {
+          let userIdx = 0;
+          msgsRef.current = msgsRef.current.map((m) => {
+            if (m.role === "user") {
+              const filenames = imgCache[userIdx];
+              userIdx++;
+              if (filenames?.length) return { ...m, imageFilenames: filenames };
+            }
+            return m;
+          });
+        }
+        setChatMessages([...msgsRef.current]);
+      }
+    } catch {
+      // Silently fail — user can still send new messages
+    } finally {
+      setIsLoadingHistory(false);
+    }
+  }, []);
+
+  // Load sessions on mount
+  useEffect(() => {
+    refreshSessions();
+    const activeId = getActiveSessionId();
+    if (activeId) {
+      setActiveSessionIdState(activeId);
+      sessionIdRef.current = activeId;
+      loadSessionHistory(activeId);
+    }
+  }, [refreshSessions, loadSessionHistory]);
+
+  const createNewSession = useCallback(() => {
+    abortRef.current?.abort();
+    sessionIdRef.current = null;
+    sessionCreatedRef.current = false;
+    setActiveSessionIdState(null);
+    setActiveSessionId(null);
+    msgsRef.current = [];
+    setChatMessages([]);
+    setChatStatus("idle");
+  }, []);
+
+  const switchSession = useCallback((sessionId: string) => {
+    abortRef.current?.abort();
+    sessionIdRef.current = sessionId;
+    sessionCreatedRef.current = true;
+    setActiveSessionIdState(sessionId);
+    setActiveSessionId(sessionId);
+    // Clear then load history from SDK
+    msgsRef.current = [];
+    setChatMessages([]);
+    setChatStatus("idle");
+    loadSessionHistory(sessionId);
+  }, [loadSessionHistory]);
+
+  const removeSession = useCallback((sessionId: string) => {
+    deleteSession(sessionId);
+    setSessions(getSessions());
+    if (activeSessionId === sessionId) {
+      createNewSession();
+    }
+  }, [activeSessionId, createNewSession]);
+
+  const openAssistant = useCallback(async () => {
+    setIsStarting(true);
+    try {
+      await refreshConfig();
+      setIsOpen(true);
+    } finally {
+      setIsStarting(false);
+    }
+  }, [refreshConfig]);
+
+  const closeAssistant = useCallback(() => {
+    setIsOpen(false);
+    // Abort any in-flight chat request
+    abortRef.current?.abort();
+  }, []);
+
+  const toggleAssistant = useCallback(() => {
+    if (isOpen || isStarting) {
+      closeAssistant();
+    } else {
+      openAssistant();
+    }
+  }, [isOpen, isStarting, closeAssistant, openAssistant]);
+
+  // Keyboard shortcut: Cmd+L / Ctrl+L
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "l") {
+        e.preventDefault();
+        toggleAssistant();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [toggleAssistant]);
+
+  // -------------------------------------------------------------------------
+  // Chat message sender — lives at provider level for persistence
+  // -------------------------------------------------------------------------
+  const sendChatMessage = useCallback(async (text: string, options?: { imageFilenames?: string[] }) => {
+    if (!text.trim() && !(options?.imageFilenames?.length)) return;
+
+    abortRef.current?.abort();
+    const controller = new AbortController();
+    abortRef.current = controller;
+
+    // Capture the first message text for session title
+    const isFirstMessage = msgsRef.current.length === 0 && !sessionCreatedRef.current;
+    const firstMessageText = isFirstMessage ? text : null;
+
+    const thinkingId = nextId();
+    msgsRef.current = [
+      ...msgsRef.current,
+      {
+        id: nextId(),
+        role: "user" as MessageRole,
+        content: text,
+        imageFilenames: options?.imageFilenames?.length ? options.imageFilenames : undefined,
+      },
+      { id: thinkingId, role: "thinking" as MessageRole, content: "", isStreaming: true },
+    ];
+    flushChat();
+    // Cache imageFilenames so they survive session reload
+    if (options?.imageFilenames?.length && sessionIdRef.current) {
+      const userMsgCount = msgsRef.current.filter((m) => m.role === "user").length - 1;
+      cacheMessageImages(sessionIdRef.current, userMsgCount, options.imageFilenames);
+    }
+    setChatStatus("connecting");
+
+    let assistantMsgId: string | null = null;
+
+    try {
+      const res = await fetch("/api/internal/assistant/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          message: text,
+          sessionId: sessionIdRef.current,
+          imageFilenames: options?.imageFilenames ?? [],
+        }),
+        signal: controller.signal,
+      });
+
+      if (!res.ok || !res.body) throw new Error(`HTTP ${res.status}`);
+      setChatStatus("streaming");
+
+      const reader = res.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() ?? "";
+
+        for (const line of lines) {
+          if (!line.startsWith("data: ")) continue;
+          let event: SSEEvent;
+          try { event = JSON.parse(line.slice(6).trim()); } catch { continue; }
+          if (event.sessionId) {
+            const prevSessionId = sessionIdRef.current;
+            sessionIdRef.current = event.sessionId;
+            // Create session record on first sessionId received
+            if (firstMessageText && !sessionCreatedRef.current && event.sessionId !== prevSessionId) {
+              sessionCreatedRef.current = true;
+              const now = new Date().toISOString();
+              const newSession: AssistantSession = {
+                id: event.sessionId,
+                title: buildSessionTitle(firstMessageText),
+                createdAt: now,
+                updatedAt: now,
+              };
+              addSession(newSession);
+              setSessions(getSessions());
+              setActiveSessionIdState(event.sessionId);
+              setActiveSessionId(event.sessionId);
+              // Migrate cached images from the pre-session (null) key to the real sessionId
+              if (options?.imageFilenames?.length) {
+                cacheMessageImages(event.sessionId, 0, options.imageFilenames);
+              }
+            }
+          }
+
+          switch (event.type) {
+            case "text_delta": {
+              // Incremental streaming chunk — append to current assistant message
+              const filtered = msgsRef.current.filter((m) => m.id !== thinkingId);
+              if (assistantMsgId) {
+                msgsRef.current = filtered.map((m) =>
+                  m.id === assistantMsgId
+                    ? { ...m, content: m.content + (event.content ?? ""), isStreaming: true }
+                    : m
+                );
+              } else {
+                assistantMsgId = nextId();
+                msgsRef.current = [...filtered, {
+                  id: assistantMsgId, role: "assistant" as MessageRole,
+                  content: event.content ?? "", isStreaming: true,
+                }];
+              }
+              flushChat();
+              break;
+            }
+            case "text": {
+              // Complete message block — replace/finalize the assistant message
+              const filtered = msgsRef.current.filter((m) => m.id !== thinkingId);
+              if (assistantMsgId) {
+                // If we already have streaming content, finalize it rather than replace
+                msgsRef.current = filtered.map((m) =>
+                  m.id === assistantMsgId
+                    ? { ...m, content: event.content ?? m.content, isStreaming: true }
+                    : m
+                );
+              } else {
+                assistantMsgId = nextId();
+                msgsRef.current = [...filtered, {
+                  id: assistantMsgId, role: "assistant" as MessageRole,
+                  content: event.content ?? "", isStreaming: true,
+                }];
+              }
+              flushChat();
+              break;
+            }
+            case "tool_start": {
+              // Tool call starting — show indicator (streaming)
+              const filtered = msgsRef.current.filter((m) => m.id !== thinkingId);
+              if (assistantMsgId) {
+                msgsRef.current = filtered.map((m) =>
+                  m.id === assistantMsgId ? { ...m, isStreaming: false } : m
+                );
+                assistantMsgId = null;
+              } else {
+                msgsRef.current = filtered;
+              }
+              msgsRef.current = [...msgsRef.current, {
+                id: nextId(), role: "tool" as MessageRole,
+                content: `Calling ${event.content ?? "tool"}...`,
+                toolName: event.content,
+                isStreaming: true,
+              }];
+              flushChat();
+              break;
+            }
+            case "tool_use": {
+              const filtered = msgsRef.current.filter((m) => m.id !== thinkingId);
+              const updated = assistantMsgId
+                ? filtered.map((m) => m.id === assistantMsgId ? { ...m, isStreaming: false } : m)
+                : filtered;
+              assistantMsgId = null;
+              msgsRef.current = [...updated, {
+                id: nextId(), role: "tool" as MessageRole,
+                content: JSON.stringify(event.toolInput ?? {}, null, 2),
+                toolName: event.content,
+              }];
+              flushChat();
+              break;
+            }
+            case "tool_result": {
+              msgsRef.current = [...msgsRef.current, {
+                id: nextId(), role: "tool" as MessageRole,
+                content: String(event.toolOutput ?? ""),
+                toolName: `${event.content ?? "tool"} (result)`,
+              }];
+              flushChat();
+              break;
+            }
+            case "error": {
+              msgsRef.current = [...msgsRef.current.filter((m) => m.id !== thinkingId), {
+                id: nextId(), role: "assistant" as MessageRole,
+                content: `Error: ${event.content ?? "Unknown error"}`,
+              }];
+              flushChat();
+              setChatStatus("error");
+              break;
+            }
+            case "done": {
+              if (assistantMsgId) {
+                msgsRef.current = msgsRef.current.map((m) =>
+                  m.id === assistantMsgId ? { ...m, isStreaming: false } : m
+                );
+              }
+              msgsRef.current = msgsRef.current.filter((m) => m.id !== thinkingId);
+              flushChat();
+              setChatStatus("idle");
+              break;
+            }
+          }
+        }
+      }
+
+      // Final cleanup
+      msgsRef.current = msgsRef.current.filter((m) => m.id !== thinkingId);
+      flushChat();
+      setChatStatus((s) => (s === "streaming" ? "idle" : s));
+      // Refresh session list from SDK (picks up newly created sessions)
+      refreshSessions();
+    } catch (err: unknown) {
+      if ((err as Error).name === "AbortError") return;
+      msgsRef.current = [...msgsRef.current.filter((m) => m.id !== thinkingId), {
+        id: nextId(), role: "assistant" as MessageRole,
+        content: `Connection error: ${(err as Error).message ?? "Unknown error"}`,
+      }];
+      flushChat();
+      setChatStatus("error");
+    }
+  }, [flushChat, refreshSessions]);
+
+  // Cancel in-flight request, remove the last user message + assistant response,
+  // and return the user message text so the UI can restore it to the input box.
+  const cancelChat = useCallback((): string | null => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+
+    // Find the last user message to restore
+    const lastUserMsg = [...msgsRef.current].reverse().find((m) => m.role === "user");
+    const restoredText = lastUserMsg?.content ?? null;
+
+    if (lastUserMsg) {
+      // Remove everything from the last user message onward (user + thinking + assistant partial)
+      const lastUserIdx = msgsRef.current.lastIndexOf(lastUserMsg);
+      msgsRef.current = msgsRef.current.slice(0, lastUserIdx);
+      setChatMessages([...msgsRef.current]);
+    }
+
+    setChatStatus("idle");
+    return restoredText;
+  }, []);
+
+  const lastMsg = chatMessages[chatMessages.length - 1];
+  const isChatThinking =
+    chatStatus === "connecting" || chatStatus === "streaming" ||
+    (lastMsg?.role === "thinking" && lastMsg.isStreaming === true);
+
+  return (
+    <AssistantContext.Provider
+      value={{
+        isOpen, isStarting, displayMode, worktreePath,
+        toggleAssistant, closeAssistant,
+        chatMessages, chatStatus, isChatThinking, isLoadingHistory, sendChatMessage, cancelChat,
+        sessions, activeSessionId, createNewSession, switchSession, removeSession, refreshSessions,
+      }}
+    >
+      {children}
+    </AssistantContext.Provider>
+  );
+}
+
+export function useAssistant(): AssistantContextValue {
+  const ctx = useContext(AssistantContext);
+  if (!ctx) throw new Error("useAssistant must be used within an AssistantProvider");
+  return ctx;
+}

package/src/components/assistant/image-preview-modal.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { X } from "lucide-react";
+import { Dialog, DialogContent, DialogClose } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { useI18n } from "@/lib/i18n";
+
+interface ImagePreviewModalProps {
+  imageUrl: string | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function ImagePreviewModal({
+  imageUrl,
+  open,
+  onOpenChange,
+}: ImagePreviewModalProps) {
+  const { t } = useI18n();
+  const [zoomed, setZoomed] = useState(false);
+
+  // Reset zoom when dialog opens/closes
+  useEffect(() => {
+    setZoomed(false);
+  }, [open]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent
+        showCloseButton={false}
+        className="max-w-[90vw] max-h-[90vh] p-0 overflow-hidden bg-black/90 ring-0"
+      >
+        <DialogClose
+          render={
+            <Button
+              variant="ghost"
+              className="absolute top-2 right-2 z-10 h-8 w-8 p-0 text-white hover:bg-white/20 hover:text-white"
+            />
+          }
+          aria-label={t("assistant.closePreview")}
+        >
+          <X className="h-4 w-4" />
+        </DialogClose>
+        {imageUrl && (
+          <img
+            src={imageUrl}
+            alt=""
+            onClick={() => setZoomed((z) => !z)}
+            className={
+              zoomed
+                ? "w-auto h-auto max-w-none cursor-zoom-out"
+                : "max-w-full max-h-[85vh] object-contain cursor-zoom-in mx-auto"
+            }
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/assistant/image-thumbnail-strip.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import { AlertCircle, X } from "lucide-react";
+import { useI18n } from "@/lib/i18n";
+import type { PendingImage } from "@/hooks/use-image-upload";
+
+interface ImageThumbnailStripProps {
+  pendingImages: PendingImage[];
+  onRemove: (id: string) => void;
+  onPreview: (image: PendingImage) => void;
+}
+
+export function ImageThumbnailStrip({
+  pendingImages,
+  onRemove,
+  onPreview,
+}: ImageThumbnailStripProps) {
+  const { t } = useI18n();
+
+  if (pendingImages.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-row gap-2 px-4 pt-2 pb-0">
+      {pendingImages.map((image) => (
+        <div
+          key={image.id}
+          className={`relative h-12 w-12 shrink-0 rounded-md overflow-hidden ring-1 ${
+            image.status === "error" ? "ring-destructive" : "ring-border"
+          }`}
+        >
+          {/* Thumbnail image — clickable for preview */}
+          <button
+            type="button"
+            className={`h-full w-full p-0 border-0 bg-transparent ${
+              image.status === "uploading" ? "cursor-wait" : "cursor-pointer"
+            }`}
+            disabled={image.status === "uploading"}
+            aria-label={t("assistant.previewImage")}
+            onClick={() => onPreview(image)}
+          >
+            <img
+              src={image.blobUrl}
+              className="h-full w-full object-cover"
+              alt=""
+            />
+          </button>
+
+          {/* Progress overlay — visible while status === "uploading" */}
+          {image.status === "uploading" && (
+            <div className="absolute inset-0 flex flex-col justify-end bg-black/30">
+              <div
+                role="progressbar"
+                aria-valuenow={image.progress}
+                aria-valuemin={0}
+                aria-valuemax={100}
+                className="h-1 bg-primary transition-all duration-150"
+                style={{ width: `${image.progress}%` }}
+              />
+              <span className="absolute inset-0 flex items-center justify-center text-[10px] font-semibold text-white">
+                {image.progress}%
+              </span>
+            </div>
+          )}
+
+          {/* Error overlay — visible when status === "error" */}
+          {image.status === "error" && (
+            <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+              <AlertCircle className="h-4 w-4 text-white" />
+            </div>
+          )}
+
+          {/* X remove button — always visible */}
+          <button
+            className="absolute top-1 right-1 h-4 w-4 rounded-full bg-black/60 text-white flex items-center justify-center hover:bg-black/80 transition-colors"
+            aria-label={t("assistant.removeImage")}
+            title={
+              image.status === "error"
+                ? t("assistant.uploadFailedRemoveHint")
+                : undefined
+            }
+            onClick={(e) => {
+              e.stopPropagation();
+              onRemove(image.id);
+            }}
+          >
+            <X className="h-2.5 w-2.5" />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}