tower-studio 0.1.1 → 0.1.3

package/src/components/missions/mission-card.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import dynamic from "next/dynamic";
+import { useRouter } from "next/navigation";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { GripVertical, ArrowUpRight, X, TerminalSquare } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+} from "@/components/ui/tooltip";
+import { Badge } from "@/components/ui/badge";
+import { useI18n } from "@/lib/i18n";
+import { openInTerminal } from "@/actions/preview-actions";
+import { toast } from "sonner";
+import type { ActiveExecutionInfo } from "@/actions/agent-actions";
+
+const TaskTerminal = dynamic(
+  () => import("@/components/task/task-terminal").then((m) => m.TaskTerminal),
+  { ssr: false, loading: () => <div className="h-full w-full bg-[#0a0a0a] animate-pulse" /> }
+);
+
+interface MissionCardProps {
+  execution: ActiveExecutionInfo;
+  isRemoving: boolean;
+  removeReason?: "stopped" | "completed";
+  onStop: (taskId: string) => void;
+  onSessionEnd?: (taskId: string, exitCode: number) => void;
+}
+
+export function MissionCard({
+  execution,
+  isRemoving,
+  removeReason,
+  onStop,
+  onSessionEnd,
+}: MissionCardProps) {
+  const { t } = useI18n();
+  const router = useRouter();
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id: execution.executionId });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isRemoving ? 0 : 1,
+  };
+
+  const [elapsed, setElapsed] = useState(() =>
+    execution.startedAt
+      ? Math.floor((Date.now() - new Date(execution.startedAt).getTime()) / 1000)
+      : 0
+  );
+
+  useEffect(() => {
+    if (isRemoving) return;
+    const interval = setInterval(() => {
+      setElapsed(
+        execution.startedAt
+          ? Math.floor((Date.now() - new Date(execution.startedAt).getTime()) / 1000)
+          : 0
+      );
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [execution.startedAt, isRemoving]);
+
+  const minutes = Math.floor(elapsed / 60);
+  const seconds = elapsed % 60;
+  const formattedTime = `${minutes}m ${seconds}s`;
+
+  async function handleOpenInTerminal() {
+    if (!execution.projectLocalPath) return;
+    try {
+      await openInTerminal(execution.projectLocalPath);
+    } catch {
+      toast.error(t("preview.terminalError"));
+    }
+  }
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className="border border-border rounded-lg overflow-hidden flex flex-col transition-opacity duration-300"
+      {...attributes}
+    >
+      {/* Header */}
+      <div className="h-10 px-3 flex items-center gap-1 border-b border-border bg-card shrink-0">
+        {/* Drag handle */}
+        <button
+          {...listeners}
+          aria-label={t("missions.dragHandle")}
+          aria-roledescription="sortable"
+          className="cursor-grab text-muted-foreground hover:text-foreground mr-1"
+        >
+          <GripVertical className="h-3.5 w-3.5" />
+        </button>
+
+        {/* Breadcrumb */}
+        <span className="text-[11px] text-muted-foreground truncate flex-1">
+          {execution.workspaceName} &#x203A;{" "}
+          {execution.projectAlias || execution.projectName} &#x203A;{" "}
+          <span className="text-foreground font-semibold">{execution.taskTitle}</span>
+        </span>
+
+        {/* Status badge */}
+        {isRemoving ? (
+          <Badge
+            variant="outline"
+            className="text-[11px] text-muted-foreground bg-muted ml-1 shrink-0"
+          >
+            {removeReason === "stopped"
+              ? t("missions.statusStopped")
+              : t("missions.statusCompleted")}
+          </Badge>
+        ) : (
+          <Badge
+            variant="outline"
+            className="text-[11px] text-primary border-primary/30 bg-primary/10 ml-1 shrink-0"
+          >
+            {t("missions.statusRunning")}
+          </Badge>
+        )}
+
+        {/* Running time */}
+        <span className="text-[11px] text-muted-foreground ml-1 shrink-0">
+          {formattedTime}
+        </span>
+
+        {/* Open in terminal — only when project has a localPath */}
+        {execution.projectLocalPath && (
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="ml-1 shrink-0 text-muted-foreground"
+                  onClick={handleOpenInTerminal}
+                />
+              }
+            >
+              <TerminalSquare className="h-3.5 w-3.5" />
+            </TooltipTrigger>
+            <TooltipContent>{t("missions.openInTerminal")}</TooltipContent>
+          </Tooltip>
+        )}
+
+        {/* Open full view */}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button
+                variant="ghost"
+                size="icon"
+                className="ml-1 shrink-0 text-muted-foreground"
+                onClick={() =>
+                  router.push(
+                    `/workspaces/${execution.workspaceId}/tasks/${execution.taskId}`
+                  )
+                }
+              />
+            }
+          >
+            <ArrowUpRight className="h-3.5 w-3.5" />
+          </TooltipTrigger>
+          <TooltipContent>{t("missions.openFullView")}</TooltipContent>
+        </Tooltip>
+
+        {/* Stop button */}
+        <Tooltip>
+          <TooltipTrigger
+            render={
+              <Button
+                variant="destructive"
+                size="icon"
+                className="ml-1 shrink-0"
+                onClick={() => onStop(execution.taskId)}
+                disabled={isRemoving}
+              />
+            }
+          >
+            <X className="h-3.5 w-3.5" />
+          </TooltipTrigger>
+          <TooltipContent>{t("missions.stopTask")}</TooltipContent>
+        </Tooltip>
+      </div>
+
+      {/* Terminal area */}
+      <div className="flex-1 overflow-hidden">
+        <TaskTerminal
+          taskId={execution.taskId}
+          worktreePath={execution.worktreePath ?? execution.projectLocalPath}
+          onSessionEnd={(exitCode) => onSessionEnd?.(execution.taskId, exitCode)}
+          useCanvasRenderer
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/missions/task-picker-dialog.tsx

@@ -0,0 +1,415 @@
+"use client";
+
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useI18n } from "@/lib/i18n";
+import { getWorkspacesWithRecentTasks } from "@/actions/workspace-actions";
+import { getProjectTasks } from "@/actions/task-actions";
+import { startPtyExecution, resumePtyExecution } from "@/actions/agent-actions";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+} from "@/components/ui/select";
+import { Play, RotateCcw } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+type TaskStatus = "TODO" | "IN_PROGRESS" | "IN_REVIEW" | "DONE" | "CANCELLED";
+type TaskPriority = "LOW" | "MEDIUM" | "HIGH" | "CRITICAL";
+
+interface TaskItem {
+  id: string;
+  title: string;
+  status: TaskStatus;
+  priority: TaskPriority;
+  executions?: Array<{ sessionId: string | null }>;
+}
+
+interface ProjectItem {
+  id: string;
+  name: string;
+  alias: string | null;
+  tasks: TaskItem[];
+  _count: { tasks: number };
+}
+
+interface WorkspaceItem {
+  id: string;
+  name: string;
+  projects: ProjectItem[];
+}
+
+interface TaskPickerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onLaunched: (taskId: string) => void;
+  runningTaskIds?: Set<string>;
+  anchorRef?: React.RefObject<HTMLElement | null>;
+}
+
+const STATUS_LABELS: Record<string, string> = {
+  TODO: "TODO",
+  IN_PROGRESS: "Running",
+  IN_REVIEW: "Review",
+};
+
+const PRIORITY_LABELS: Record<string, string> = {
+  LOW: "Low",
+  MEDIUM: "Med",
+  HIGH: "High",
+  CRITICAL: "Crit",
+};
+
+function StatusBadge({ status }: { status: string }) {
+  const colorMap: Record<string, string> = {
+    TODO: "bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400",
+    IN_PROGRESS: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
+    IN_REVIEW: "bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400",
+  };
+  return (
+    <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${colorMap[status] ?? "bg-slate-100 text-slate-600"}`}>
+      {STATUS_LABELS[status] ?? status}
+    </span>
+  );
+}
+
+/** Task row with Continue / New launch actions */
+function TaskRow({
+  task,
+  isRunning,
+  launchingId,
+  onLaunchNew,
+  onResume,
+  t,
+}: {
+  task: TaskItem;
+  isRunning: boolean;
+  launchingId: string | null;
+  onLaunchNew: (taskId: string) => void;
+  onResume: (taskId: string, sessionId: string) => void;
+  t: ReturnType<typeof useI18n>["t"];
+}) {
+  const lastSessionId = task.executions?.[0]?.sessionId;
+  const isLaunching = launchingId === task.id;
+
+  return (
+    <div className="group/task flex items-center gap-2 px-3 py-1.5 hover:bg-accent/50 cursor-default">
+      <div className="flex-1 min-w-0">
+        <p className={`text-sm truncate ${isRunning ? "italic text-muted-foreground" : ""}`}>
+          {task.title}
+        </p>
+        <div className="flex items-center gap-1.5 mt-0.5">
+          <StatusBadge status={task.status} />
+          <span className="text-[10px] text-muted-foreground">
+            {PRIORITY_LABELS[task.priority] ?? task.priority}
+          </span>
+        </div>
+      </div>
+      {isRunning ? (
+        <span className="text-[10px] italic text-muted-foreground shrink-0">
+          {t("missions.alreadyMonitored")}
+        </span>
+      ) : (
+        <div className="flex items-center gap-1 opacity-0 group-hover/task:opacity-100 transition-opacity shrink-0">
+          {lastSessionId && (
+            <Button
+              variant="outline"
+              className="h-6 px-2 text-xs"
+              onClick={() => onResume(task.id, lastSessionId)}
+              disabled={isLaunching}
+              title={t("missions.continueSession")}
+            >
+              <RotateCcw className="h-3 w-3 mr-1" />
+              {t("missions.continueLabel")}
+            </Button>
+          )}
+          <Button
+            variant="outline"
+            className="h-6 px-2 text-xs"
+            onClick={() => onLaunchNew(task.id)}
+            disabled={isLaunching}
+            title={t("missions.launchNew")}
+          >
+            <Play className="h-3 w-3 mr-1" />
+            {isLaunching ? "..." : t("missions.launchNewLabel")}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Full task selector Dialog — opened from popover footer */
+function FullTaskDialog({
+  open,
+  onOpenChange,
+  onLaunchNew,
+  onResume,
+  runningTaskIds,
+  launchingId,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onLaunchNew: (taskId: string) => void;
+  onResume: (taskId: string, sessionId: string) => void;
+  runningTaskIds: Set<string>;
+  launchingId: string | null;
+}) {
+  const { t } = useI18n();
+  const [workspaces, setWorkspaces] = useState<WorkspaceItem[]>([]);
+  const [selectedWsId, setSelectedWsId] = useState("");
+  const [selectedProjectId, setSelectedProjectId] = useState("");
+  const [tasks, setTasks] = useState<TaskItem[]>([]);
+
+  useEffect(() => {
+    if (!open) return;
+    setSelectedWsId("");
+    setSelectedProjectId("");
+    setTasks([]);
+    getWorkspacesWithRecentTasks(100)
+      .then(setWorkspaces)
+      .catch(() => toast.error(t("missions.error.launchFailed")));
+  }, [open, t]);
+
+  useEffect(() => {
+    if (!selectedProjectId) { setTasks([]); return; }
+    getProjectTasks(selectedProjectId)
+      .then((all) => {
+        setTasks(
+          all.filter(
+            (tk) => tk.status === "TODO" || tk.status === "IN_PROGRESS" || tk.status === "IN_REVIEW"
+          ) as TaskItem[]
+        );
+      })
+      .catch(() => toast.error(t("missions.error.launchFailed")));
+  }, [selectedProjectId, t]);
+
+  const selectedWs = workspaces.find((w) => w.id === selectedWsId);
+  const projects = selectedWs?.projects ?? [];
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg max-h-[70vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>{t("missions.fullPickerTitle")}</DialogTitle>
+        </DialogHeader>
+        <div className="flex items-center gap-2 shrink-0">
+          <Select value={selectedWsId} onValueChange={(v) => { setSelectedWsId(v ?? ""); setSelectedProjectId(""); }}>
+            <SelectTrigger id="full-picker-ws" className="w-48 h-8">
+              <span className="truncate">
+                {workspaces.find((w) => w.id === selectedWsId)?.name ?? t("missions.launcher.selectWorkspace")}
+              </span>
+            </SelectTrigger>
+            <SelectContent>
+              {workspaces.map((ws) => (
+                <SelectItem key={ws.id} value={ws.id}>{ws.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          <Select value={selectedProjectId} onValueChange={(v) => setSelectedProjectId(v ?? "")} disabled={!selectedWsId}>
+            <SelectTrigger id="full-picker-proj" className="w-48 h-8">
+              <span className="truncate">
+                {projects.find((p) => p.id === selectedProjectId)?.name ?? t("missions.launcher.selectProject")}
+              </span>
+            </SelectTrigger>
+            <SelectContent>
+              {projects.map((p) => (
+                <SelectItem key={p.id} value={p.id}>{p.alias ?? p.name}</SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <ScrollArea className="flex-1 min-h-0 -mx-2">
+          {tasks.length === 0 && selectedProjectId ? (
+            <p className="text-sm text-muted-foreground text-center py-8">{t("missions.launcher.noTasks")}</p>
+          ) : tasks.length === 0 ? (
+            <p className="text-sm text-muted-foreground text-center py-8">{t("missions.fullPickerHint")}</p>
+          ) : (
+            tasks.map((task) => (
+              <TaskRow
+                key={task.id}
+                task={task}
+                isRunning={runningTaskIds.has(task.id)}
+                launchingId={launchingId}
+                onLaunchNew={onLaunchNew}
+                onResume={onResume}
+                t={t}
+              />
+            ))
+          )}
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export function TaskPickerDialog({
+  open,
+  onOpenChange,
+  onLaunched,
+  runningTaskIds = new Set(),
+  anchorRef,
+}: TaskPickerProps) {
+  const { t } = useI18n();
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const [workspaces, setWorkspaces] = useState<WorkspaceItem[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [launchingId, setLaunchingId] = useState<string | null>(null);
+  const [fullDialogOpen, setFullDialogOpen] = useState(false);
+
+  // Load data when opened
+  useEffect(() => {
+    if (!open) return;
+    setLoading(true);
+    getWorkspacesWithRecentTasks(3)
+      .then(setWorkspaces)
+      .catch(() => toast.error(t("missions.error.launchFailed")))
+      .finally(() => setLoading(false));
+  }, [open, t]);
+
+  // Click-outside to close (fallback for when hover doesn't apply)
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      const target = e.target as Node;
+      if (popoverRef.current && !popoverRef.current.contains(target)) {
+        if (anchorRef?.current && anchorRef.current.contains(target)) return;
+        onOpenChange(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open, onOpenChange, anchorRef]);
+
+  const handleLaunchNew = useCallback(async (taskId: string) => {
+    try {
+      setLaunchingId(taskId);
+      await startPtyExecution(taskId, "");
+      onLaunched(taskId);
+      onOpenChange(false);
+      setFullDialogOpen(false);
+    } catch {
+      toast.error(t("missions.error.launchFailed"));
+    } finally {
+      setLaunchingId(null);
+    }
+  }, [onLaunched, onOpenChange, t]);
+
+  const handleResume = useCallback(async (taskId: string, sessionId: string) => {
+    try {
+      setLaunchingId(taskId);
+      await resumePtyExecution(taskId, sessionId);
+      onLaunched(taskId);
+      onOpenChange(false);
+      setFullDialogOpen(false);
+    } catch {
+      toast.error(t("missions.error.launchFailed"));
+    } finally {
+      setLaunchingId(null);
+    }
+  }, [onLaunched, onOpenChange, t]);
+
+  const handleOpenFullDialog = useCallback(() => {
+    onOpenChange(false);
+    setFullDialogOpen(true);
+  }, [onOpenChange]);
+
+  if (!open && !fullDialogOpen) return null;
+
+  return (
+    <>
+      {/* Quick picker popover */}
+      {open && (
+        <div
+          ref={popoverRef}
+          className="absolute right-0 z-50 mt-1 w-96 rounded-lg border border-border bg-popover shadow-xl flex flex-col overflow-hidden"
+          style={{ maxHeight: "480px" }}
+        >
+          {/* Header */}
+          <div className="px-3 py-2 border-b border-border shrink-0">
+            <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+              {t("missions.pickerTitle")}
+            </p>
+          </div>
+
+          {/* Tree list */}
+          <ScrollArea className="flex-1 min-h-0">
+            {loading ? (
+              <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+                Loading...
+              </div>
+            ) : workspaces.length === 0 ? (
+              <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
+                {t("missions.noAvailableTasks")}
+              </div>
+            ) : (
+              workspaces.map((ws) => (
+                <div key={ws.id}>
+                  {/* Workspace header */}
+                  <div className="sticky top-0 z-10 px-3 py-1.5 bg-popover border-b border-border/50">
+                    <span className="text-[11px] font-semibold text-muted-foreground uppercase tracking-wider">
+                      {ws.name}
+                    </span>
+                  </div>
+
+                  {ws.projects.map((project) => {
+                    if (project._count.tasks === 0) return null;
+                    return (
+                      <div key={project.id} className="mb-1">
+                        <div className="px-3 pt-2 pb-0.5">
+                          <span className="text-xs font-medium text-foreground">
+                            {project.alias ?? project.name}
+                          </span>
+                        </div>
+                        {project.tasks.map((task) => (
+                          <TaskRow
+                            key={task.id}
+                            task={task}
+                            isRunning={runningTaskIds.has(task.id)}
+                            launchingId={launchingId}
+                            onLaunchNew={handleLaunchNew}
+                            onResume={handleResume}
+                            t={t}
+                          />
+                        ))}
+                      </div>
+                    );
+                  })}
+                </div>
+              ))
+            )}
+          </ScrollArea>
+
+          {/* Footer — clickable to open full dialog */}
+          <div className="shrink-0 border-t border-border">
+            <Button
+              variant="ghost"
+              className="w-full rounded-none text-xs text-primary font-medium"
+              onClick={handleOpenFullDialog}
+            >
+              {t("missions.showMoreTasks")}
+            </Button>
+          </div>
+        </div>
+      )}
+
+      {/* Full task selector dialog */}
+      <FullTaskDialog
+        open={fullDialogOpen}
+        onOpenChange={setFullDialogOpen}
+        onLaunchNew={handleLaunchNew}
+        onResume={handleResume}
+        runningTaskIds={runningTaskIds}
+        launchingId={launchingId}
+      />
+    </>
+  );
+}

package/src/components/notes/category-filter.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { NOTE_CATEGORIES_PRESET } from "@/lib/constants";
+import { useI18n } from "@/lib/i18n";
+import { cn } from "@/lib/utils";
+
+interface CategoryFilterProps {
+  active: string;
+  onSelect: (cat: string) => void;
+}
+
+export function CategoryFilter({ active, onSelect }: CategoryFilterProps) {
+  const { t } = useI18n();
+
+  return (
+    <div className="flex flex-wrap items-center gap-1.5">
+      <button
+        onClick={() => onSelect("all")}
+        className={cn(
+          "rounded-lg px-3 py-1 text-xs font-medium transition-colors",
+          active === "all"
+            ? "bg-primary/15 text-primary ring-1 ring-primary/20"
+            : "text-muted-foreground hover:bg-accent"
+        )}
+      >
+        {t("notes.allCategories")}
+      </button>
+      {NOTE_CATEGORIES_PRESET.map((cat) => (
+        <button
+          key={cat}
+          onClick={() => onSelect(cat)}
+          className={cn(
+            "rounded-lg px-3 py-1 text-xs font-medium transition-colors",
+            active === cat
+              ? "bg-primary/15 text-primary ring-1 ring-primary/20"
+              : "text-muted-foreground hover:bg-accent"
+          )}
+        >
+          {cat}
+        </button>
+      ))}
+    </div>
+  );
+}