tower-studio 0.1.1 → 0.1.3

package/src/components/task/code-editor.tsx

@@ -0,0 +1,376 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import dynamic from "next/dynamic";
+import { loader } from "@monaco-editor/react";
+import { useTheme } from "next-themes";
+import { useI18n } from "@/lib/i18n";
+import { toast } from "sonner";
+import { readFileContent, writeFileContent } from "@/actions/file-actions";
+import { EditorTabs } from "./editor-tabs";
+import type { EditorTab } from "./editor-tabs";
+import { DiffEditorView } from "./diff-editor";
+
+// Load Monaco from local public/vs (copied from node_modules by postinstall script)
+loader.config({
+  paths: { vs: "/vs" },
+});
+
+// Dynamic import prevents SSR crash (D-01)
+const MonacoEditor = dynamic(
+  () => import("@monaco-editor/react").then((m) => ({ default: m.default })),
+  { ssr: false }
+);
+
+const LANG_MAP: Record<string, string> = {
+  ts: "typescript",
+  tsx: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+  json: "json",
+  md: "markdown",
+  css: "css",
+  html: "html",
+  py: "python",
+  sh: "shell",
+  yaml: "yaml",
+  yml: "yaml",
+  vue: "html",
+  svelte: "html",
+  prisma: "prisma",
+  txt: "plaintext",
+};
+
+export interface DiffFileRequest {
+  relativePath: string;
+  originalContent: string;
+}
+
+export interface CodeEditorProps {
+  worktreePath: string;
+  selectedFilePath: string | null;
+  onFilePathChange?: (path: string | null) => void;
+  onSave?: () => void;
+  selectedLine?: number | null;
+  diffFileRequest?: DiffFileRequest | null;
+}
+
+export function CodeEditor({
+  worktreePath,
+  selectedFilePath,
+  onFilePathChange,
+  onSave,
+  selectedLine,
+  diffFileRequest,
+}: CodeEditorProps) {
+  const { t } = useI18n();
+  const { resolvedTheme } = useTheme();
+  const monacoTheme = resolvedTheme === "dark" ? "vs-dark" : "light";
+
+  const [tabs, setTabs] = useState<EditorTab[]>([]);
+  const [activeTabPath, setActiveTabPath] = useState<string | null>(null);
+  const editorRef = useRef<unknown>(null);
+  const monacoRef = useRef<unknown>(null);
+  const modelsRef = useRef<Map<string, unknown>>(new Map());
+  const activeTabRef = useRef<EditorTab | null>(null);
+  const onSaveRef = useRef<(() => void) | undefined>(undefined);
+  const latestFilePathRef = useRef<string | null>(null);
+
+  // Keep activeTabRef in sync with current state for use in Monaco action callbacks
+  useEffect(() => {
+    activeTabRef.current = tabs.find((t) => t.path === activeTabPath) ?? null;
+  }, [tabs, activeTabPath]);
+
+  // Keep onSaveRef in sync to avoid stale closure in Monaco addAction
+  useEffect(() => {
+    onSaveRef.current = onSave;
+  }, [onSave]);
+
+  function showToast(type: "success" | "error") {
+    if (type === "success") {
+      toast.success(t("editor.saveSuccess"));
+    } else {
+      toast.error(t("editor.saveError"));
+    }
+  }
+
+  // Sync Monaco theme when resolvedTheme changes (D-05)
+  useEffect(() => {
+    import("@monaco-editor/react").then(({ loader: l }) => {
+      l.init().then((monaco) => {
+        (monaco as { editor: { setTheme: (t: string) => void } }).editor.setTheme(monacoTheme);
+      });
+    });
+  }, [monacoTheme]);
+
+  // React to selectedFilePath changes (D-04)
+  useEffect(() => {
+    if (!selectedFilePath) return;
+
+    // Track latest request to ignore stale async completions
+    latestFilePathRef.current = selectedFilePath;
+
+    const existingTab = tabs.find((t) => t.path === selectedFilePath);
+    if (existingTab) {
+      setActiveTabPath(selectedFilePath);
+      onFilePathChange?.(selectedFilePath);
+      return;
+    }
+
+    // Derive relativePath (browser-safe, no path module)
+    const relativePath = selectedFilePath.startsWith(worktreePath + "/")
+      ? selectedFilePath.slice(worktreePath.length + 1)
+      : selectedFilePath;
+
+    const filename = relativePath.split("/").pop() ?? relativePath;
+    const requestedPath = selectedFilePath;
+
+    readFileContent(worktreePath, relativePath)
+      .then((content) => {
+        // Ignore if user has already clicked a different file
+        if (latestFilePathRef.current !== requestedPath) return;
+
+        const newTab: EditorTab = {
+          path: requestedPath,
+          relativePath,
+          filename,
+          content,
+          isDirty: false,
+        };
+
+        setTabs((prev) => {
+          if (prev.some((t) => t.path === requestedPath)) return prev;
+          return [...prev, newTab];
+        });
+        setActiveTabPath(requestedPath);
+        onFilePathChange?.(requestedPath);
+      })
+      .catch(() => {
+        // Silently fail — file may not be readable
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedFilePath, worktreePath]);
+
+  // React to diffFileRequest — open file in diff mode
+  useEffect(() => {
+    if (!diffFileRequest) return;
+    const { relativePath, originalContent } = diffFileRequest;
+    const absolutePath = worktreePath + "/" + relativePath;
+    const diffTabKey = "diff:" + absolutePath;
+    const filename = relativePath.split("/").pop() ?? relativePath;
+
+    // If diff tab already open, just switch to it
+    const existing = tabs.find((t) => t.path === diffTabKey);
+    if (existing) {
+      setActiveTabPath(diffTabKey);
+      return;
+    }
+
+    readFileContent(worktreePath, relativePath)
+      .then((modifiedContent) => {
+        const newTab: EditorTab = {
+          path: diffTabKey,
+          relativePath,
+          filename,
+          content: modifiedContent,
+          isDirty: false,
+          isDiff: true,
+          originalContent,
+        };
+        setTabs((prev) => {
+          if (prev.some((t) => t.path === diffTabKey)) return prev;
+          return [...prev, newTab];
+        });
+        setActiveTabPath(diffTabKey);
+      })
+      .catch(() => {
+        // file not readable
+      });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [diffFileRequest, worktreePath]);
+
+  // Scroll Monaco to selectedLine when it changes (or active tab changes)
+  useEffect(() => {
+    if (!selectedLine || !editorRef.current) return;
+    const editor = editorRef.current as {
+      revealLineInCenter: (line: number) => void;
+      setPosition: (pos: { lineNumber: number; column: number }) => void;
+    };
+    // Delay 50ms to let Monaco finish loading the model
+    const timer = setTimeout(() => {
+      editor.revealLineInCenter(selectedLine);
+      editor.setPosition({ lineNumber: selectedLine, column: 1 });
+    }, 50);
+    return () => clearTimeout(timer);
+  }, [selectedLine, activeTabPath]);
+
+  // Create / switch Monaco model on active tab change
+  useEffect(() => {
+    const editor = editorRef.current as {
+      setModel: (m: unknown) => void;
+    } | null;
+    const monaco = monacoRef.current as {
+      editor: {
+        createModel: (content: string, lang: string, uri: unknown) => unknown;
+        getModel: (uri: unknown) => unknown | null;
+      };
+      Uri: { parse: (uri: string) => unknown };
+    } | null;
+
+    if (!editor || !monaco || !activeTabPath) return;
+
+    const tab = tabs.find((t) => t.path === activeTabPath);
+    if (!tab) return;
+
+    const uri = monaco.Uri.parse("file://" + tab.path);
+    let model = modelsRef.current.get(tab.path);
+    if (!model) {
+      const ext = tab.filename.split(".").pop() ?? "";
+      const lang = LANG_MAP[ext] ?? "plaintext";
+      model = monaco.editor.createModel(tab.content, lang, uri);
+      modelsRef.current.set(tab.path, model);
+    }
+    editor.setModel(model);
+  }, [activeTabPath, tabs]);
+
+  function handleEditorMount(editor: unknown, monaco: unknown) {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
+
+    const e = editor as {
+      addAction: (action: {
+        id: string;
+        label: string;
+        keybindings: number[];
+        run: () => Promise<void>;
+      }) => void;
+    };
+    const m = monaco as {
+      KeyMod: { CtrlCmd: number };
+      KeyCode: { KeyS: number };
+    };
+
+    e.addAction({
+      id: "save-file",
+      label: "Save File",
+      keybindings: [m.KeyMod.CtrlCmd | m.KeyCode.KeyS],
+      run: async () => {
+        const tab = activeTabRef.current;
+        if (!tab || !tab.isDirty) return;
+        try {
+          await writeFileContent(worktreePath, tab.relativePath, tab.content);
+          setTabs((prev) =>
+            prev.map((t) =>
+              t.path === tab.path ? { ...t, isDirty: false } : t
+            )
+          );
+          showToast("success");
+          onSaveRef.current?.();
+        } catch {
+          showToast("error");
+        }
+      },
+    });
+  }
+
+  function handleTabClick(path: string) {
+    setActiveTabPath(path);
+    onFilePathChange?.(path);
+  }
+
+  function handleTabClose(path: string) {
+    // Dispose Monaco model
+    const model = modelsRef.current.get(path) as {
+      dispose?: () => void;
+    } | undefined;
+    if (model?.dispose) model.dispose();
+    modelsRef.current.delete(path);
+
+    setTabs((prev) => {
+      const filtered = prev.filter((t) => t.path !== path);
+      // If closing the active tab, switch to last remaining tab
+      if (activeTabPath === path) {
+        const newActive = filtered.length > 0 ? filtered[filtered.length - 1].path : null;
+        setActiveTabPath(newActive);
+        onFilePathChange?.(newActive);
+      }
+      return filtered;
+    });
+  }
+
+  const activeTab = tabs.find((t) => t.path === activeTabPath);
+
+  return (
+    <div className="flex flex-col h-full overflow-hidden relative">
+      <EditorTabs
+        tabs={tabs}
+        activeTabPath={activeTabPath}
+        onTabClick={handleTabClick}
+        onTabClose={handleTabClose}
+      />
+
+      {tabs.length === 0 ? (
+        <div className="flex h-full flex-col items-center justify-center text-center">
+          <p className="text-sm text-muted-foreground">
+            {t("editor.selectFile")}
+          </p>
+          <p className="text-xs text-muted-foreground mt-1">
+            {t("editor.selectFileHint")}
+          </p>
+        </div>
+      ) : activeTab?.isDiff ? (
+        <div className="flex-1 min-h-0">
+          <DiffEditorView
+            originalContent={activeTab.originalContent ?? ""}
+            modifiedContent={activeTab.content}
+            filePath={activeTab.relativePath}
+            onModifiedChange={(value) => {
+              setTabs((prev) =>
+                prev.map((t) =>
+                  t.path === activeTabPath
+                    ? { ...t, content: value, isDirty: true }
+                    : t
+                )
+              );
+            }}
+          />
+        </div>
+      ) : (
+        <div className="flex-1 min-h-0">
+          <MonacoEditor
+            height="100%"
+            theme={monacoTheme}
+            value={activeTab?.content ?? ""}
+            onMount={handleEditorMount}
+            onChange={(value) => {
+              if (value === undefined) return;
+              setTabs((prev) =>
+                prev.map((t) =>
+                  t.path === activeTabPath
+                    ? { ...t, content: value, isDirty: true }
+                    : t
+                )
+              );
+            }}
+            options={{
+              automaticLayout: true,
+              minimap: { enabled: false },
+              fontSize: 13,
+              fontFamily: '"JetBrains Mono", "Geist Mono", monospace',
+              lineNumbers: "on",
+              wordWrap: "off",
+              scrollBeyondLastLine: false,
+              tabSize: 2,
+            }}
+            loading={
+              <div className="flex h-full items-center justify-center bg-muted/20">
+                <span className="text-sm text-muted-foreground">Loading editor...</span>
+              </div>
+            }
+          />
+        </div>
+      )}
+
+    </div>
+  );
+}

package/src/components/task/code-search.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useState, useCallback, useRef } from "react";
+import { Search, Filter, Loader2 } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useI18n } from "@/lib/i18n";
+import { toast } from "sonner";
+import { searchCode } from "@/actions/search-code-actions";
+import type { SearchMatch } from "@/actions/search-code-actions";
+
+interface CodeSearchProps {
+  localPath: string | null;
+  onResultSelect: (absolutePath: string, lineNumber: number) => void;
+}
+
+function renderHighlighted(
+  lineText: string,
+  submatches: Array<{ start: number; end: number }>
+): React.ReactNode[] {
+  if (!submatches.length) return [<span key="0">{lineText}</span>];
+
+  const nodes: React.ReactNode[] = [];
+  let pos = 0;
+
+  for (const { start, end } of submatches) {
+    if (pos < start) {
+      nodes.push(<span key={`plain-${pos}`}>{lineText.slice(pos, start)}</span>);
+    }
+    nodes.push(
+      <span
+        key={`match-${start}`}
+        className="bg-yellow-400/30 text-yellow-200 rounded-[2px] px-[1px]"
+      >
+        {lineText.slice(start, end)}
+      </span>
+    );
+    pos = end;
+  }
+
+  if (pos < lineText.length) {
+    nodes.push(<span key={`plain-${pos}`}>{lineText.slice(pos)}</span>);
+  }
+
+  return nodes;
+}
+
+export function CodeSearch({ localPath, onResultSelect }: CodeSearchProps) {
+  const { t } = useI18n();
+  const [pattern, setPattern] = useState("");
+  const [glob, setGlob] = useState("");
+  const [results, setResults] = useState<SearchMatch[]>([]);
+  const [truncated, setTruncated] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isSearching, setIsSearching] = useState(false);
+  const [hasSearched, setHasSearched] = useState(false);
+  const generationRef = useRef(0);
+
+  const handleSearch = useCallback(async () => {
+    if (!localPath || !pattern.trim()) return;
+
+    // Increment generation to cancel any in-flight search
+    const thisGeneration = ++generationRef.current;
+
+    setIsSearching(true);
+    setError(null);
+    setHasSearched(true);
+
+    try {
+      const result = await searchCode(
+        localPath,
+        pattern.trim(),
+        glob.trim() || undefined
+      );
+
+      if (thisGeneration !== generationRef.current) return;
+
+      if (result.error) {
+        // Check if it's a rg-not-installed error
+        if (
+          result.error.toLowerCase().includes("ripgrep") ||
+          result.error.toLowerCase().includes("rg")
+        ) {
+          toast.error(t("codeSearch.rgNotInstalled"));
+          setError(t("codeSearch.rgNotInstalled"));
+        } else {
+          setError(result.error);
+        }
+        setResults([]);
+        setTruncated(false);
+      } else {
+        setResults(result.matches);
+        setTruncated(result.truncated);
+      }
+    } catch (err) {
+      if (thisGeneration !== generationRef.current) return;
+      setError(String(err));
+      setResults([]);
+      setTruncated(false);
+    } finally {
+      if (thisGeneration === generationRef.current) {
+        setIsSearching(false);
+      }
+    }
+  }, [localPath, pattern, glob, t]);
+
+  const handlePatternKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleSearch();
+      }
+    },
+    [handleSearch]
+  );
+
+  if (!localPath) {
+    return (
+      <div className="flex h-full flex-col items-center justify-center gap-2 p-4 text-center">
+        <Search className="h-8 w-8 text-muted-foreground" />
+        <p className="text-sm text-muted-foreground">{t("codeSearch.noPath")}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Search inputs */}
+      <div className="flex-shrink-0 px-2 py-1.5 space-y-1 border-b border-border">
+        {/* Pattern input */}
+        <div className="relative">
+          <Search className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            value={pattern}
+            placeholder={t("codeSearch.patternPlaceholder")}
+            className="w-full h-7 pl-7 pr-2 text-xs bg-muted/50 border border-border rounded-md outline-none focus:border-primary/50 focus:bg-background transition-colors placeholder:text-muted-foreground/60"
+            onChange={(e) => setPattern(e.target.value)}
+            onKeyDown={handlePatternKeyDown}
+          />
+        </div>
+
+        {/* Glob filter input */}
+        <div className="relative">
+          <Filter className="absolute left-2 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
+          <input
+            type="text"
+            value={glob}
+            placeholder={t("codeSearch.globPlaceholder")}
+            className="w-full h-7 pl-7 pr-2 text-xs bg-muted/50 border border-border rounded-md outline-none focus:border-primary/50 focus:bg-background transition-colors placeholder:text-muted-foreground/60"
+            onChange={(e) => setGlob(e.target.value)}
+          />
+        </div>
+      </div>
+
+      {/* Results area */}
+      <div className="flex-1 min-h-0 flex flex-col">
+        {isSearching ? (
+          <div className="flex flex-col items-center justify-center h-full gap-2">
+            <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+            <p className="text-xs text-muted-foreground">{t("codeSearch.searching")}</p>
+          </div>
+        ) : error ? (
+          <div className="px-3 py-4 text-xs text-destructive">
+            {error}
+          </div>
+        ) : !hasSearched ? (
+          <div className="flex h-full items-center justify-center">
+            <p className="text-xs text-muted-foreground text-center px-4">
+              {t("codeSearch.hint")}
+            </p>
+          </div>
+        ) : results.length === 0 ? (
+          <div className="flex h-full items-center justify-center">
+            <p className="text-xs text-muted-foreground">{t("codeSearch.noResults")}</p>
+          </div>
+        ) : (
+          <ScrollArea className="flex-1">
+            <div className="py-1">
+              {results.map((match, index) => (
+                <button
+                  key={`${match.filePath}:${match.lineNumber}:${index}`}
+                  type="button"
+                  className="w-full flex flex-col gap-0.5 px-2 py-1.5 text-left hover:bg-accent/50 cursor-pointer border-b border-border/30 last:border-b-0"
+                  aria-label={`Open ${match.filePath} at line ${match.lineNumber}`}
+                  onClick={() => {
+                    const absolutePath = localPath.endsWith("/")
+                      ? localPath + match.filePath
+                      : localPath + "/" + match.filePath;
+                    onResultSelect(absolutePath, match.lineNumber);
+                  }}
+                >
+                  {/* File path + line number row */}
+                  <div className="flex items-center gap-1.5 min-w-0">
+                    <span className="text-xs text-muted-foreground truncate flex-1">
+                      {match.filePath}
+                    </span>
+                    <span className="text-xs text-primary/80 flex-shrink-0 tabular-nums">
+                      :{match.lineNumber}
+                    </span>
+                  </div>
+                  {/* Line text with highlights */}
+                  <div className="text-xs text-foreground/80 font-mono truncate">
+                    {renderHighlighted(match.lineText, match.submatches)}
+                  </div>
+                </button>
+              ))}
+            </div>
+
+            {truncated && (
+              <div className="px-3 py-2 text-xs text-muted-foreground text-center border-t border-border/30">
+                {t("codeSearch.truncated")}
+              </div>
+            )}
+          </ScrollArea>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/task/diff-editor.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import dynamic from "next/dynamic";
+import { loader } from "@monaco-editor/react";
+import { useTheme } from "next-themes";
+
+// Load Monaco from local public/vs (copied from node_modules by postinstall script)
+loader.config({
+  paths: { vs: "/vs" },
+});
+
+const MonacoDiffEditor = dynamic(
+  () => import("@monaco-editor/react").then((m) => ({ default: m.DiffEditor })),
+  { ssr: false }
+);
+
+export interface DiffEditorViewProps {
+  originalContent: string;
+  modifiedContent: string;
+  filePath: string;
+  language?: string;
+  onModifiedChange?: (value: string) => void;
+  readOnly?: boolean;
+}
+
+const LANG_MAP: Record<string, string> = {
+  ts: "typescript", tsx: "typescript",
+  js: "javascript", jsx: "javascript",
+  json: "json", md: "markdown",
+  css: "css", html: "html",
+  py: "python", sh: "shell",
+  yaml: "yaml", yml: "yaml",
+  vue: "html", svelte: "html",
+  prisma: "prisma", txt: "plaintext",
+};
+
+function detectLanguage(filePath: string): string {
+  const ext = filePath.split(".").pop() ?? "";
+  return LANG_MAP[ext] ?? "plaintext";
+}
+
+export function DiffEditorView({
+  originalContent,
+  modifiedContent,
+  filePath,
+  language,
+  onModifiedChange,
+  readOnly = false,
+}: DiffEditorViewProps) {
+  const { resolvedTheme } = useTheme();
+  const monacoTheme = resolvedTheme === "dark" ? "vs-dark" : "light";
+  const lang = language ?? detectLanguage(filePath);
+  const editorRef = useRef<unknown>(null);
+
+  useEffect(() => {
+    import("@monaco-editor/react").then(({ loader: l }) => {
+      l.init().then((monaco) => {
+        (monaco as { editor: { setTheme: (t: string) => void } }).editor.setTheme(monacoTheme);
+      });
+    });
+  }, [monacoTheme]);
+
+  return (
+    <MonacoDiffEditor
+      height="100%"
+      theme={monacoTheme}
+      original={originalContent}
+      modified={modifiedContent}
+      language={lang}
+      onMount={(editor) => {
+        editorRef.current = editor;
+        if (onModifiedChange) {
+          const modifiedEditor = (editor as { getModifiedEditor: () => { onDidChangeModelContent: (cb: () => void) => void; getValue: () => string } }).getModifiedEditor();
+          modifiedEditor.onDidChangeModelContent(() => {
+            onModifiedChange(modifiedEditor.getValue());
+          });
+        }
+      }}
+      options={{
+        readOnly,
+        originalEditable: false,
+        automaticLayout: true,
+        minimap: { enabled: false },
+        fontSize: 13,
+        fontFamily: '"JetBrains Mono", "Geist Mono", monospace',
+        scrollBeyondLastLine: false,
+        renderSideBySide: true,
+      }}
+      loading={
+        <div className="flex h-full items-center justify-center bg-muted/20">
+          <span className="text-sm text-muted-foreground">Loading diff editor...</span>
+        </div>
+      }
+    />
+  );
+}