tower-studio 0.1.1 → 0.1.3

package/src/components/task/task-merge-confirm-dialog.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { GitMerge, Loader2 } from "lucide-react";
+
+interface TaskMergeConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  taskId: string;
+  taskTitle: string;
+  baseBranch: string;
+  fileCount: number;
+  commitCount: number;
+  commitLog?: string[];
+  onMergeComplete: () => void;
+}
+
+export function TaskMergeConfirmDialog({
+  open,
+  onOpenChange,
+  taskId,
+  taskTitle,
+  baseBranch,
+  fileCount,
+  commitCount,
+  commitLog = [],
+  onMergeComplete,
+}: TaskMergeConfirmDialogProps) {
+  const router = useRouter();
+  const [isMerging, setIsMerging] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const handleConfirmMerge = async () => {
+    setIsMerging(true);
+    setErrorMessage(null);
+    try {
+      const res = await fetch(`/api/tasks/${taskId}/merge`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({}),
+      });
+
+      if (res.ok) {
+        onOpenChange(false);
+        onMergeComplete();
+        router.refresh();
+        return;
+      }
+
+      const data = await res.json().catch(() => ({ error: "Merge failed" }));
+
+      if (res.status === 409) {
+        setErrorMessage(
+          `Merge conflicts detected: ${Array.isArray(data.conflictFiles) ? data.conflictFiles.join(", ") : "unknown files"}`
+        );
+      } else {
+        setErrorMessage(data.error ?? "Merge failed");
+      }
+    } catch {
+      setErrorMessage("Network error — merge failed");
+    } finally {
+      setIsMerging(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent showCloseButton className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <GitMerge className="h-4 w-4 text-emerald-400" />
+            Confirm Merge
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-3 py-2">
+          <div className="rounded-lg border border-border bg-muted/30 p-3 space-y-2.5">
+            <div className="flex items-start justify-between gap-4">
+              <span className="text-xs text-muted-foreground whitespace-nowrap">Target branch</span>
+              <code className="text-xs font-mono bg-muted px-2 py-0.5 rounded text-foreground">
+                {baseBranch}
+              </code>
+            </div>
+            <div className="flex items-start justify-between gap-4">
+              <span className="text-xs text-muted-foreground whitespace-nowrap">Changed files</span>
+              <span className="text-xs font-medium text-foreground">{fileCount}</span>
+            </div>
+            <div className="flex items-start justify-between gap-4">
+              <span className="text-xs text-muted-foreground whitespace-nowrap">Commits</span>
+              <span className="text-xs font-medium text-foreground">{commitCount}</span>
+            </div>
+          </div>
+
+          {commitLog.length > 0 && (
+            <div>
+              <span className="text-xs text-muted-foreground mb-1 block">Commits</span>
+              <div className="rounded-md border border-border bg-muted/30 p-2 space-y-1 max-h-32 overflow-y-auto">
+                {commitLog.map((line, i) => (
+                  <div key={i} className="text-xs font-mono text-foreground/80">{line}</div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {errorMessage && (
+            <div className="rounded-lg border border-red-500/20 bg-red-500/10 px-3 py-2">
+              <p className="text-xs text-red-400">{errorMessage}</p>
+            </div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <Button
+            variant="outline"
+           
+            onClick={() => onOpenChange(false)}
+            disabled={isMerging}
+          >
+            Cancel
+          </Button>
+          <Button
+           
+            onClick={handleConfirmMerge}
+            disabled={isMerging}
+            className="gap-2"
+          >
+            {isMerging ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Merging...
+              </>
+            ) : (
+              <>
+                <GitMerge className="h-4 w-4" />
+                Confirm Merge
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/task/task-metadata.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { ArrowLeft, GitBranch, Sparkles } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { formatRelativeTime } from "@/lib/utils";
+import { useI18n } from "@/lib/i18n";
+
+interface TaskMetadataProps {
+  title: string;
+  description?: string;
+  branch?: string;
+  baseBranch?: string | null;
+  hasConversation: boolean;
+  updatedAt: Date;
+  onBack: () => void;
+}
+
+export function TaskMetadata({
+  title,
+  description,
+  branch,
+  baseBranch,
+  hasConversation,
+  updatedAt,
+  onBack,
+}: TaskMetadataProps) {
+  const { t } = useI18n();
+  return (
+    <div className="border-b border-border px-4 py-3">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <Sparkles className="h-3.5 w-3.5 text-primary" />
+          <span className="text-xs font-semibold text-primary">{t("taskDetail.title")}</span>
+        </div>
+        <Button
+          variant="ghost"
+          onClick={onBack}
+          className="flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground h-auto px-2 py-1"
+        >
+          <ArrowLeft className="h-3.5 w-3.5" />
+          {t("taskDetail.back")}
+        </Button>
+      </div>
+
+      <h2 className="mt-2.5 text-lg font-bold tracking-tight text-foreground">{title}</h2>
+
+      {description && (
+        <p className="mt-1 text-xs text-muted-foreground line-clamp-2">{description}</p>
+      )}
+
+      <div className="mt-3 flex flex-wrap items-center gap-2">
+        {baseBranch ? (
+          <Badge variant="secondary" className="bg-muted text-muted-foreground text-[10px] font-mono border border-border">
+            <GitBranch className="mr-1 h-3 w-3" />
+            {baseBranch} · worktree
+          </Badge>
+        ) : branch ? (
+          <Badge variant="secondary" className="bg-muted text-muted-foreground text-[10px] font-mono border border-border">
+            {t("taskDetail.directMode")}
+          </Badge>
+        ) : null}
+        {hasConversation && (
+          <Badge variant="secondary" className="bg-emerald-500/10 text-emerald-400 text-[10px] border border-emerald-500/20">
+            {t("taskDetail.hasConversation")}
+          </Badge>
+        )}
+        <span className="text-[11px] text-muted-foreground">
+          {t("taskDetail.updatedAt")} {formatRelativeTime(updatedAt)}
+        </span>
+      </div>
+    </div>
+  );
+}

package/src/components/task/task-notes-panel.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { Plus, Trash2, Upload, FileText, Paperclip, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useI18n } from "@/lib/i18n";
+import { createNote, getTaskNotes, deleteNote } from "@/actions/note-actions";
+import { getTaskAssets, uploadAsset, deleteAsset } from "@/actions/asset-actions";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface TaskNotesPanelProps {
+  taskId: string;
+  projectId: string;
+}
+
+interface NoteItem {
+  id: string;
+  title: string;
+  content: string;
+  createdAt: Date;
+}
+
+interface AssetItem {
+  id: string;
+  filename: string;
+  size: number | null;
+  createdAt: Date;
+}
+
+export function TaskNotesPanel({ taskId, projectId }: TaskNotesPanelProps) {
+  const { t } = useI18n();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [notes, setNotes] = useState<NoteItem[]>([]);
+  const [assets, setAssets] = useState<AssetItem[]>([]);
+  const [showAddNote, setShowAddNote] = useState(false);
+  const [noteTitle, setNoteTitle] = useState("");
+  const [noteContent, setNoteContent] = useState("");
+  const [uploading, setUploading] = useState(false);
+
+  useEffect(() => {
+    getTaskNotes(taskId).then(setNotes);
+    getTaskAssets(taskId).then(setAssets);
+  }, [taskId]);
+
+  async function handleAddNote() {
+    if (!noteTitle.trim()) return;
+    await createNote({
+      title: noteTitle.trim(),
+      content: noteContent.trim(),
+      projectId,
+      taskId,
+      category: "task",
+    });
+    setNoteTitle("");
+    setNoteContent("");
+    setShowAddNote(false);
+    getTaskNotes(taskId).then(setNotes);
+  }
+
+  async function handleDeleteNote(noteId: string) {
+    await deleteNote(noteId);
+    setNotes((prev) => prev.filter((n) => n.id !== noteId));
+  }
+
+  async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    setUploading(true);
+    try {
+      const formData = new FormData();
+      formData.set("file", file);
+      formData.set("projectId", projectId);
+      formData.set("taskId", taskId);
+      await uploadAsset(formData);
+      getTaskAssets(taskId).then(setAssets);
+    } finally {
+      setUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
+  }
+
+  async function handleDeleteAsset(assetId: string) {
+    await deleteAsset(assetId);
+    setAssets((prev) => prev.filter((a) => a.id !== assetId));
+  }
+
+  function formatSize(bytes: number | null) {
+    if (!bytes) return "";
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  }
+
+  return (
+    <ScrollArea className="h-full"><div className="flex flex-col">
+      {/* Notes section */}
+      <div className="border-b border-border px-4 py-3">
+        <div className="flex items-center justify-between">
+          <h3 className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            <FileText className="h-3.5 w-3.5" />
+            {t("taskPage.notes")}
+          </h3>
+          <Button
+            variant="ghost"
+           
+            className="h-6 gap-1 px-2 text-xs"
+            onClick={() => setShowAddNote(!showAddNote)}
+          >
+            {showAddNote ? <X className="h-3 w-3" /> : <Plus className="h-3 w-3" />}
+            {showAddNote ? "" : t("taskPage.addNote")}
+          </Button>
+        </div>
+
+        {/* Add note form */}
+        {showAddNote && (
+          <div className="mt-3 space-y-2">
+            <input
+              type="text"
+              value={noteTitle}
+              onChange={(e) => setNoteTitle(e.target.value)}
+              placeholder={t("taskPage.noteTitle")}
+              className="h-8 w-full rounded-md border border-border bg-background px-3 text-sm focus:outline-none focus:ring-1 focus:ring-primary"
+              autoFocus
+            />
+            <textarea
+              value={noteContent}
+              onChange={(e) => setNoteContent(e.target.value)}
+              placeholder={t("taskPage.noteContent")}
+              rows={3}
+              className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary resize-none"
+            />
+            <Button className="text-xs" onClick={handleAddNote} disabled={!noteTitle.trim()}>
+              {t("taskPage.addNote")}
+            </Button>
+          </div>
+        )}
+
+        {/* Notes list */}
+        <div className="mt-2 space-y-2">
+          {notes.length === 0 && !showAddNote && (
+            <p className="text-xs text-muted-foreground py-2">{t("taskPage.noNotes")}</p>
+          )}
+          {notes.map((note) => (
+            <div key={note.id} className="group rounded-md border border-border bg-card p-3">
+              <div className="flex items-start justify-between gap-2">
+                <div className="min-w-0 flex-1">
+                  <h4 className="text-sm font-medium truncate">{note.title}</h4>
+                  {note.content && (
+                    <p className="mt-1 text-xs text-muted-foreground line-clamp-3 whitespace-pre-wrap">{note.content}</p>
+                  )}
+                  <p className="mt-1 text-[10px] text-muted-foreground">
+                    {new Date(note.createdAt).toLocaleString()}
+                  </p>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  onClick={() => handleDeleteNote(note.id)}
+                  className="shrink-0 text-muted-foreground opacity-0 hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100"
+                  title={t("taskPage.deleteNote")}
+                >
+                  <Trash2 className="h-3.5 w-3.5" />
+                </Button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Attachments section */}
+      <div className="px-4 py-3">
+        <div className="flex items-center justify-between">
+          <h3 className="flex items-center gap-1.5 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+            <Paperclip className="h-3.5 w-3.5" />
+            {t("taskPage.attachments")}
+          </h3>
+          <Button
+            variant="ghost"
+           
+            className="h-6 gap-1 px-2 text-xs"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={uploading}
+          >
+            <Upload className="h-3 w-3" />
+            {t("taskPage.uploadFile")}
+          </Button>
+          <input
+            ref={fileInputRef}
+            type="file"
+            className="hidden"
+            onChange={handleUpload}
+          />
+        </div>
+
+        <div className="mt-2 space-y-1.5">
+          {assets.length === 0 && (
+            <p className="text-xs text-muted-foreground py-2">{t("taskPage.noAttachments")}</p>
+          )}
+          {assets.map((asset) => (
+            <div key={asset.id} className="group flex items-center gap-2 rounded-md border border-border bg-card px-3 py-2">
+              <Paperclip className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
+              <span className="flex-1 truncate text-sm">{asset.filename}</span>
+              <span className="shrink-0 text-[10px] text-muted-foreground">{formatSize(asset.size)}</span>
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                onClick={() => handleDeleteAsset(asset.id)}
+                className="shrink-0 text-muted-foreground opacity-0 hover:bg-destructive/10 hover:text-destructive group-hover:opacity-100"
+                title={t("taskPage.deleteAttachment")}
+              >
+                <Trash2 className="h-3 w-3" />
+              </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div></ScrollArea>
+  );
+}

package/src/components/task/task-overview-drawer.tsx

@@ -0,0 +1,172 @@
+"use client";
+
+import { useEffect, useState, useTransition } from "react";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui/sheet";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Badge } from "@/components/ui/badge";
+import { useI18n } from "@/lib/i18n";
+import { getTaskOverview } from "@/actions/task-actions";
+import type { TaskOverviewData } from "@/actions/task-actions";
+import { BOARD_COLUMNS, PRIORITY_CONFIG } from "@/lib/constants";
+import { Calendar, Package, PlayCircle } from "lucide-react";
+
+interface TaskOverviewDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  taskId: string | null;
+}
+
+export function TaskOverviewDrawer({
+  open,
+  onOpenChange,
+  taskId,
+}: TaskOverviewDrawerProps) {
+  const { t } = useI18n();
+  const [task, setTask] = useState<TaskOverviewData | null>(null);
+  const [isPending, startTransition] = useTransition();
+
+  useEffect(() => {
+    if (!taskId || !open) {
+      setTask(null);
+      return;
+    }
+    startTransition(async () => {
+      const data = await getTaskOverview(taskId);
+      if (data) {
+        setTask(data);
+      }
+    });
+  }, [taskId, open]);
+
+  const statusCol = task
+    ? BOARD_COLUMNS.find((c) => c.id === task.status)
+    : null;
+  const priorityConfig = task ? PRIORITY_CONFIG[task.priority] : null;
+  const lastExecution = task?.executions?.[0] ?? null;
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent side="right" className="w-[380px] sm:max-w-[380px] p-0">
+        <SheetHeader className="px-4 pt-4 pb-3 border-b border-border">
+          <SheetTitle className="text-base font-semibold leading-tight pr-8">
+            {task?.title ?? ""}
+          </SheetTitle>
+          <SheetDescription className="sr-only">
+            {t("taskDrawer.title")}
+          </SheetDescription>
+          {task && (
+            <div className="flex items-center gap-2 mt-2">
+              {statusCol && (
+                <Badge variant="secondary" className="text-xs">
+                  <span
+                    className={`inline-block w-2 h-2 rounded-full mr-1.5 ${statusCol.color}`}
+                  />
+                  {statusCol.label}
+                </Badge>
+              )}
+              {priorityConfig && (
+                <Badge
+                  variant="secondary"
+                  className={`text-xs ${priorityConfig.color}`}
+                >
+                  {priorityConfig.label}
+                </Badge>
+              )}
+            </div>
+          )}
+        </SheetHeader>
+
+        <ScrollArea className="flex-1 h-[calc(100%-80px)]">
+          {isPending && !task ? (
+            <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
+              {t("assets.loading")}
+            </div>
+          ) : task ? (
+            <div className="p-4 space-y-4">
+              {/* Description */}
+              <section>
+                <h4 className="text-xs font-medium text-muted-foreground mb-1">
+                  {t("taskDrawer.description")}
+                </h4>
+                <p className="text-sm text-foreground whitespace-pre-wrap">
+                  {task.description || t("taskDrawer.noDescription")}
+                </p>
+              </section>
+
+              {/* Labels */}
+              {task.labels.length > 0 && (
+                <section>
+                  <h4 className="text-xs font-medium text-muted-foreground mb-1.5">
+                    {t("taskDrawer.labels")}
+                  </h4>
+                  <div className="flex flex-wrap gap-1.5">
+                    {task.labels.map((tl) => (
+                      <Badge
+                        key={tl.label.id}
+                        variant="secondary"
+                        className="text-xs"
+                        style={{
+                          backgroundColor: `${tl.label.color}20`,
+                          color: tl.label.color,
+                          borderColor: `${tl.label.color}40`,
+                        }}
+                      >
+                        {tl.label.name}
+                      </Badge>
+                    ))}
+                  </div>
+                </section>
+              )}
+
+              {/* Created at */}
+              <section className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Calendar className="h-3.5 w-3.5" />
+                <span>{t("taskDrawer.createdAt")}</span>
+                <span className="text-foreground">
+                  {new Date(task.createdAt).toLocaleDateString()}
+                </span>
+              </section>
+
+              {/* Resource count */}
+              <section className="flex items-center gap-2 text-sm text-muted-foreground">
+                <Package className="h-3.5 w-3.5" />
+                <span>{t("taskDrawer.resources")}</span>
+                <span className="text-foreground">{task._count.assets}</span>
+              </section>
+
+              {/* Last execution */}
+              <section>
+                <h4 className="text-xs font-medium text-muted-foreground mb-1.5 flex items-center gap-1.5">
+                  <PlayCircle className="h-3.5 w-3.5" />
+                  {t("taskDrawer.lastExecution")}
+                </h4>
+                {lastExecution ? (
+                  <div className="rounded-md border border-border p-2.5 text-sm">
+                    <Badge variant="secondary" className="text-xs mb-1.5">
+                      {lastExecution.status}
+                    </Badge>
+                    {lastExecution.summary && (
+                      <p className="text-xs text-muted-foreground line-clamp-4">
+                        {lastExecution.summary.slice(0, 200)}
+                      </p>
+                    )}
+                  </div>
+                ) : (
+                  <p className="text-xs text-muted-foreground">
+                    {t("taskDrawer.noExecution")}
+                  </p>
+                )}
+              </section>
+            </div>
+          ) : null}
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}