tower-studio 0.1.1 → 0.1.3

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

@@ -0,0 +1,68 @@
+"use client";
+
+import { X } from "lucide-react";
+import { useI18n } from "@/lib/i18n";
+
+export interface EditorTab {
+  path: string;
+  relativePath: string;
+  filename: string;
+  content: string;
+  isDirty: boolean;
+  isDiff?: boolean;
+  originalContent?: string;
+}
+
+export interface EditorTabsProps {
+  tabs: EditorTab[];
+  activeTabPath: string | null;
+  onTabClick: (path: string) => void;
+  onTabClose: (path: string) => void;
+}
+
+export function EditorTabs({ tabs, activeTabPath, onTabClick, onTabClose }: EditorTabsProps) {
+  const { t } = useI18n();
+
+  if (tabs.length === 0) return null;
+
+  return (
+    <div className="header-xs flex items-stretch overflow-x-auto bg-card flex-shrink-0">
+      {tabs.map((tab) => {
+        const isActive = tab.path === activeTabPath;
+        return (
+          <div
+            key={tab.path}
+            role="tab"
+            aria-selected={isActive}
+            onClick={() => onTabClick(tab.path)}
+            className={[
+              "flex items-center gap-1.5 px-3 text-sm whitespace-nowrap cursor-pointer select-none border-b-2",
+              isActive
+                ? "border-primary text-foreground font-medium"
+                : "border-transparent text-muted-foreground hover:text-foreground",
+            ].join(" ")}
+          >
+            {tab.isDiff && (
+              <span className="text-amber-400 text-[10px] font-mono font-bold">M</span>
+            )}
+            {tab.isDirty && (
+              <span className="text-primary text-xs">●</span>
+            )}
+            <span>{tab.filename}</span>
+            <button
+              type="button"
+              aria-label={t("editor.closeTab")}
+              onClick={(e) => {
+                e.stopPropagation();
+                onTabClose(tab.path);
+              }}
+              className="text-muted-foreground hover:text-foreground ml-0.5 flex items-center"
+            >
+              <X className="w-3 h-3" />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/task/execution-timeline.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import { useState } from "react";
+import { ChevronDown, ChevronUp, CheckCircle2, XCircle, Loader2, Clock, PlayCircle, RotateCcw, Lightbulb, History } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { EmptyState } from "@/components/ui/empty-state";
+import { useI18n } from "@/lib/i18n";
+
+interface Execution {
+  id: string;
+  status: string;
+  summary?: string | null;
+  sessionId?: string | null;
+  gitLog?: string | null;
+  gitStats?: string | null;
+  exitCode?: number | null;
+  terminalLog?: string | null;
+  startedAt?: Date | string | null;
+  endedAt?: Date | string | null;
+  insightNote?: {
+    id: string;
+    title: string;
+    content: string;
+  } | null;
+}
+
+interface ExecutionTimelineProps {
+  executions: Execution[];
+  onResume?: (sessionId: string) => void;
+  onContinueLatest?: () => void;
+}
+
+interface GitStats {
+  commits?: number;
+  filesChanged?: number;
+  insertions?: number;
+  deletions?: number;
+}
+
+function parseGitStats(raw: string | null): GitStats | null {
+  if (!raw) return null;
+  try {
+    return JSON.parse(raw) as GitStats;
+  } catch {
+    return null;
+  }
+}
+
+function formatDuration(start: Date | string | null, end: Date | string | null): string {
+  if (!start || !end) return "";
+  const ms = new Date(end).getTime() - new Date(start).getTime();
+  if (ms < 0) return "";
+  const totalSec = Math.floor(ms / 1000);
+  if (totalSec < 60) return `${totalSec}s`;
+  const min = Math.floor(totalSec / 60);
+  const sec = totalSec % 60;
+  if (min < 60) return `${min}m ${sec}s`;
+  const hr = Math.floor(min / 60);
+  return `${hr}h ${min % 60}m`;
+}
+
+function formatTime(date: Date | string | null, locale: string = "zh"): string {
+  if (!date) return "";
+  const d = new Date(date);
+  const now = new Date();
+  const diffMs = now.getTime() - d.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  const loc = locale === "zh" ? "zh-CN" : "en-US";
+  const time = d.toLocaleTimeString(loc, { hour: "2-digit", minute: "2-digit" });
+
+  if (diffDays === 0) return time;
+  if (diffDays === 1) return locale === "zh" ? `昨天 ${time}` : `Yesterday ${time}`;
+  if (diffDays < 7) return locale === "zh" ? `${diffDays}天前 ${time}` : `${diffDays}d ago ${time}`;
+  return d.toLocaleDateString(loc, { month: "2-digit", day: "2-digit" }) + " " + time;
+}
+
+function StatusIcon({ status }: { status: string }) {
+  switch (status) {
+    case "COMPLETED":
+      return <CheckCircle2 className="h-4 w-4 text-emerald-400" />;
+    case "FAILED":
+      return <XCircle className="h-4 w-4 text-red-400" />;
+    case "RUNNING":
+      return <Loader2 className="h-4 w-4 text-blue-400 animate-spin" />;
+    default:
+      return <Clock className="h-4 w-4 text-neutral-500" />;
+  }
+}
+
+function statusLabel(status: string, t: (key: "execution.success" | "execution.failed" | "execution.running") => string): string {
+  switch (status) {
+    case "COMPLETED": return t("execution.success");
+    case "FAILED": return t("execution.failed");
+    case "RUNNING": return t("execution.running");
+    default: return status;
+  }
+}
+
+function statusColor(status: string): string {
+  switch (status) {
+    case "COMPLETED": return "text-emerald-400";
+    case "FAILED": return "text-red-400";
+    case "RUNNING": return "text-blue-400";
+    default: return "text-neutral-400";
+  }
+}
+
+export function ExecutionTimeline({ executions, onResume, onContinueLatest }: ExecutionTimelineProps) {
+  const { t, locale } = useI18n();
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [insightExpandedId, setInsightExpandedId] = useState<string | null>(null);
+
+  if (executions.length === 0) {
+    return <EmptyState icon={History} title={t("execution.noHistory")} />;
+  }
+
+  return (
+    <div className="space-y-2 p-3">
+      <p className="px-1 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+        {t("execution.history")}
+      </p>
+      {executions.map((exec) => {
+        const stats = parseGitStats(exec.gitStats ?? null);
+        const duration = formatDuration(exec.startedAt ?? null, exec.endedAt ?? null);
+        const isExpanded = expandedId === exec.id;
+
+        return (
+          <div
+            key={exec.id}
+            className="rounded-lg border border-border bg-background/50 overflow-hidden"
+          >
+            {/* Card content */}
+            <div className="p-3">
+              {/* Line 1: status icon + status + time + duration */}
+              <div className="flex items-center gap-2 text-xs">
+                <StatusIcon status={exec.status} />
+                <span className={`font-medium ${statusColor(exec.status)}`}>
+                  {statusLabel(exec.status, t)}
+                </span>
+                <span className="text-muted-foreground">{formatTime(exec.startedAt ?? null, locale)}</span>
+                {duration && (
+                  <span className="text-muted-foreground/60">({duration})</span>
+                )}
+              </div>
+              {/* Line 2: summary */}
+              <p className="mt-1.5 text-sm text-foreground/80 line-clamp-2">
+                {exec.summary || t("execution.noSummary")}
+              </p>
+              {/* Line 3: git stats */}
+              {stats && (stats.commits || stats.filesChanged) && (
+                <div className="mt-1.5 flex items-center gap-2 text-[11px] text-muted-foreground font-mono">
+                  {stats.commits ? <span>{stats.commits} {t("execution.commits")}</span> : null}
+                  {stats.filesChanged ? (
+                    <>
+                      <span>·</span>
+                      <span>{stats.filesChanged} {t("execution.files")}</span>
+                    </>
+                  ) : null}
+                  {(stats.insertions || stats.deletions) ? (
+                    <>
+                      <span>·</span>
+                      {stats.insertions ? <span className="text-emerald-500">+{stats.insertions}</span> : null}
+                      {stats.deletions ? <span className="text-red-400">-{stats.deletions}</span> : null}
+                    </>
+                  ) : null}
+                </div>
+              )}
+              {/* Insight row */}
+              {exec.insightNote && (
+                <div className="mt-2">
+                  <button
+                    onClick={() => setInsightExpandedId(insightExpandedId === exec.id ? null : exec.id)}
+                    className="flex items-center gap-1.5 text-xs text-primary/90 hover:text-primary transition-colors"
+                  >
+                    <Lightbulb className="h-3.5 w-3.5" />
+                    <span className="font-medium">{t("execution.insight")}:</span>
+                    <span className="text-foreground/70 truncate max-w-[200px]">{exec.insightNote.title}</span>
+                    {insightExpandedId === exec.id ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
+                  </button>
+                  {insightExpandedId === exec.id && (
+                    <div className="mt-2 rounded-md bg-primary/[0.06] border border-primary/10 p-3 text-xs text-foreground/80 whitespace-pre-wrap">
+                      {exec.insightNote.content}
+                    </div>
+                  )}
+                </div>
+              )}
+              {/* Action buttons */}
+              <div className="mt-2.5 flex items-center gap-2">
+                {exec.sessionId && onResume ? (
+                  <Button
+                    size="sm"
+                    onClick={() => onResume(exec.sessionId!)}
+                    className="bg-primary/10 text-primary ring-1 ring-primary/20 hover:bg-primary/15"
+                  >
+                    <PlayCircle className="h-3.5 w-3.5" />
+                    {t("execution.resume")}
+                  </Button>
+                ) : !exec.sessionId && exec.status === "FAILED" && exec.id === executions[0]?.id && onContinueLatest ? (
+                  <Button
+                    size="sm"
+                    onClick={onContinueLatest}
+                    className="bg-blue-500/15 text-blue-300 ring-1 ring-blue-500/20 hover:bg-blue-500/25"
+                  >
+                    <RotateCcw className="h-3.5 w-3.5" />
+                    {t("execution.tryRecover")}
+                  </Button>
+                ) : null}
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setExpandedId(isExpanded ? null : exec.id)}
+                  className="bg-muted text-muted-foreground"
+                >
+                  {isExpanded ? <ChevronUp className="h-3.5 w-3.5" /> : <ChevronDown className="h-3.5 w-3.5" />}
+                  {isExpanded ? t("execution.collapse") : t("execution.details")}
+                </Button>
+              </div>
+            </div>
+
+            {/* Expanded detail */}
+            {isExpanded && (
+              <div className="border-t border-border px-3 pb-3 space-y-3">
+                {exec.gitLog && (
+                  <div className="mt-3">
+                    <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-1.5">
+                      {t("execution.gitLog")}
+                    </p>
+                    <pre className="rounded-md bg-muted/50 p-2.5 text-xs font-mono text-foreground/70 overflow-x-auto whitespace-pre-wrap">
+                      {exec.gitLog.split("\n").slice(0, 3).join("\n")}
+                    </pre>
+                  </div>
+                )}
+
+                {exec.terminalLog && (
+                  <div>
+                    <p className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground mb-1.5">
+                      {t("execution.terminalOutput")}
+                    </p>
+                    <pre className="rounded-md bg-[#0f1419] p-2.5 text-xs font-mono text-neutral-300 overflow-x-auto max-h-48 overflow-y-auto whitespace-pre-wrap">
+                      {exec.terminalLog}
+                    </pre>
+                  </div>
+                )}
+
+                {exec.status === "FAILED" && exec.exitCode != null && (
+                  <p className="text-xs text-red-400/70">
+                    Exit code: {exec.exitCode}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/task/file-tree-context-menu.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useI18n } from "@/lib/i18n";
+import type { FileEntry } from "@/actions/file-actions";
+
+interface FileTreeContextMenuProps {
+  entry: FileEntry;
+  x: number;
+  y: number;
+  onClose: () => void;
+  onNewFile: (entry: FileEntry) => void;
+  onNewFolder: (entry: FileEntry) => void;
+  onRename: (entry: FileEntry) => void;
+  onDelete: (entry: FileEntry) => void;
+  onRevealInFinder?: (entry: FileEntry) => void;
+}
+
+export function FileTreeContextMenu({
+  entry,
+  x,
+  y,
+  onClose,
+  onNewFile,
+  onNewFolder,
+  onRename,
+  onDelete,
+  onRevealInFinder,
+}: FileTreeContextMenuProps) {
+  const { t } = useI18n();
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleMouseDown = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+
+  const isGitDir =
+    entry.name === ".git" || entry.relativePath === ".git";
+
+  const itemClass =
+    "flex items-center px-3 py-1.5 text-xs cursor-pointer hover:bg-accent rounded-sm w-full text-left";
+
+  const menu = (
+    <div
+      ref={menuRef}
+      style={{ position: "fixed", top: y, left: x, zIndex: 9999 }}
+      className="bg-popover border border-border rounded-md shadow-md py-1 min-w-[160px]"
+    >
+      <button
+        type="button"
+        className={itemClass}
+        onClick={() => { onNewFile(entry); onClose(); }}
+      >
+        {t("taskPage.fileTree.newFile")}
+      </button>
+      <button
+        type="button"
+        className={itemClass}
+        onClick={() => { onNewFolder(entry); onClose(); }}
+      >
+        {t("taskPage.fileTree.newFolder")}
+      </button>
+      <hr className="my-1 border-border" />
+      <button
+        type="button"
+        className={itemClass}
+        onClick={() => { onRename(entry); onClose(); }}
+      >
+        {t("taskPage.fileTree.rename")}
+      </button>
+      {onRevealInFinder && (
+        <button
+          type="button"
+          className={itemClass}
+          onClick={() => { onRevealInFinder(entry); onClose(); }}
+        >
+          {t("taskPage.fileTree.revealInFinder")}
+        </button>
+      )}
+      {!isGitDir && (
+        <>
+          <hr className="my-1 border-border" />
+          <button
+            type="button"
+            className={`${itemClass} text-destructive hover:bg-destructive/10`}
+            onClick={() => { onDelete(entry); onClose(); }}
+          >
+            {t("taskPage.fileTree.delete")}
+          </button>
+        </>
+      )}
+    </div>
+  );
+
+  if (typeof document === "undefined") return null;
+  return createPortal(menu, document.body);
+}