@polpo-ai/dashboard 0.1.3 → 0.15.8

package/app/(dashboard)/projects/[id]/tasks/[taskId]/view.tsx

@@ -1,137 +0,0 @@
-import type { Task } from "@polpo-ai/core";
-import { ManualRefreshButton } from "../../../../../../components/dashboard/manual-refresh-button";
-import type { BlueprintContext } from "./blueprint";
-
-const statusColor: Record<string, string> = {
-  done: "bg-brand",
-  in_progress: "bg-foreground animate-pulse",
-  pending: "bg-muted-foreground/30",
-  failed: "bg-destructive",
-  review: "bg-yellow-500",
-  assigned: "bg-muted-foreground/50",
-  draft: "bg-muted-foreground/20",
-  awaiting_approval: "bg-yellow-500",
-};
-
-export default function TaskOverviewView({
-  task,
-  blueprint,
-}: {
-  task: Task | null;
-  blueprint?: BlueprintContext;
-}) {
-  if (!task) {
-    return (
-      <div className="mt-4 border border-border p-8 text-center text-sm text-muted-foreground">
-        Task not found.
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      {blueprint && (
-        <div className="mt-4 rounded-md border border-border bg-muted/40 px-4 py-3 text-xs">
-          <p className="font-medium text-foreground">
-            Blueprint task
-            {blueprint.missionStatus === "recurring" && " — recurring mission"}
-            {blueprint.missionStatus === "draft" && " — draft mission"}
-          </p>
-          <p className="mt-1 text-muted-foreground">
-            This is the template definition of a task from mission{" "}
-            <span className="font-mono">{blueprint.missionName}</span>. It isn&rsquo;t a real run —
-            a fresh task instance is created each time the mission is executed
-            {blueprint.missionStatus === "recurring" ? " on its schedule" : ""}. Status,
-            retries, expectations and outputs only fill in once an instance starts.
-          </p>
-        </div>
-      )}
-
-      {/* Header */}
-      <div className={blueprint ? "mt-4 flex items-start justify-between gap-4" : "flex items-start justify-between gap-4"}>
-        <div className="flex items-center gap-3">
-          <span className={`h-2.5 w-2.5 rounded-full ${statusColor[task.status ?? "pending"]}`} />
-          <h2 className="text-lg font-extrabold tracking-tight">{task.title}</h2>
-        </div>
-        <ManualRefreshButton className="mt-1 shrink-0" />
-      </div>
-      <p className="mt-2 text-sm text-muted-foreground">{task.description}</p>
-
-      {/* Meta */}
-      <div className="mt-6 grid grid-cols-2 gap-3 sm:gap-4 sm:grid-cols-4">
-        {[
-          ["Agent", task.assignTo ?? "\u2014"],
-          ["Status", task.status ?? "\u2014"],
-          ["Phase", task.phase ?? "\u2014"],
-          ["Retries", `${task.retries ?? 0}/${task.maxRetries ?? 3}`],
-        ].map(([label, value]) => (
-          <div key={label} className="border border-border bg-card p-4">
-            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">{label}</p>
-            <p className="mt-1 text-sm font-medium">{value}</p>
-          </div>
-        ))}
-      </div>
-
-      {/* Expectations */}
-      {task.expectations && task.expectations.length > 0 && (
-        <section className="mt-8">
-          <h3 className="text-sm font-semibold">Expectations</h3>
-          <div className="mt-3 border border-border overflow-hidden">
-            {task.expectations.map((exp, i) => (
-              <div key={i} className="flex items-center justify-between border-b border-border last:border-0 px-4 py-3">
-                <div>
-                  <span className="font-mono text-xs">{exp.type}</span>
-                  <p className="mt-0.5 text-[11px] text-muted-foreground">
-                    {"command" in exp ? exp.command : "paths" in exp ? (exp.paths as string[]).join(", ") : ""}
-                  </p>
-                </div>
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* Expected outcomes */}
-      {task.expectedOutcomes && task.expectedOutcomes.length > 0 && (
-        <section className="mt-8">
-          <h3 className="text-sm font-semibold">Expected outcomes</h3>
-          <div className="mt-3 border border-border overflow-hidden">
-            {task.expectedOutcomes.map((o, i) => (
-              <div key={i} className="border-b border-border last:border-0 px-4 py-3">
-                <div className="flex items-center gap-2">
-                  <span className="rounded bg-secondary px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider text-muted-foreground">{o.type}</span>
-                  <span className="text-sm font-medium">{o.label}</span>
-                </div>
-                {o.description && <p className="mt-1 text-xs text-muted-foreground">{o.description}</p>}
-              </div>
-            ))}
-          </div>
-        </section>
-      )}
-
-      {/* Config */}
-      <section className="mt-8">
-        <h3 className="text-sm font-semibold">Details</h3>
-        <div className="mt-3 border border-border bg-card overflow-hidden overflow-x-auto">
-          <table className="w-full text-sm min-w-[320px]">
-            <tbody>
-              {[
-                ["Mission", task.missionId ?? "\u2014"],
-                ["Dependencies", task.dependsOn?.join(", ") || "none"],
-                ["Side effects", task.sideEffects ? "yes" : "no"],
-                ["Session", task.sessionId ?? "\u2014"],
-                ["Created", task.createdAt ?? "\u2014"],
-                ["Updated", task.updatedAt ?? "\u2014"],
-              ].map(([label, value]) => (
-                <tr key={label} className="border-b border-border last:border-0">
-                  <td className="px-4 py-2.5 text-xs text-muted-foreground w-32">{label}</td>
-                  <td className="px-4 py-2.5 text-xs font-mono">{value}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </section>
-    </div>
-  );
-}

package/app/(dashboard)/projects/[id]/tasks/page.tsx

@@ -1,40 +0,0 @@
-import { Suspense } from "react";
-import { dataApi } from "../../../../../lib/api";
-import type { Task, Mission } from "@polpo-ai/core";
-import { TasksListSkeleton } from "../../../../../components/dashboard/skeletons";
-import TasksView from "./view";
-
-async function TasksData({ id }: { id: string }) {
-  let tasks: Task[] = [];
-  let missions: Mission[] = [];
-
-  try {
-    const [tasksRes, missionsRes] = await Promise.all([
-      dataApi<{ ok: boolean; data: Task[] }>(id, "/v1/tasks").catch(() => ({
-        ok: false,
-        data: [] as Task[],
-      })),
-      dataApi<{ ok: boolean; data: Mission[] }>(id, "/v1/missions").catch(
-        () => ({ ok: false, data: [] as Mission[] }),
-      ),
-    ]);
-    tasks = tasksRes.data ?? [];
-    missions = missionsRes.data ?? [];
-  } catch {}
-
-  return <TasksView initialTasks={tasks} initialMissions={missions} />;
-}
-
-export default async function TasksPage({
-  params,
-}: {
-  params: Promise<{ id: string }>;
-}) {
-  const { id } = await params;
-
-  return (
-    <Suspense fallback={<TasksListSkeleton />}>
-      <TasksData id={id} />
-    </Suspense>
-  );
-}

package/app/(dashboard)/projects/[id]/tasks/view.tsx

@@ -1,421 +0,0 @@
-"use client";
-
-import { useQuery } from "@tanstack/react-query";
-import { useParams } from "next/navigation";
-import { useState, useMemo } from "react";
-import Link from "next/link";
-import { ChevronRight, RefreshCw, X, ListFilter, Search } from "lucide-react";
-// Mixed imports — SDK 0.7.9 Task is missing `missionId` (present in core).
-// Mission from SDK is fine. Track in OSS issue: SDK types should re-export from core.
-import type { Task } from "@polpo-ai/core";
-import type { Mission } from "@polpo-ai/sdk";
-import { usePolpoClient } from "../../../../../lib/polpo-client";
-import { Button } from "../../../../../components/ui/button";
-import { Badge } from "../../../../../components/ui/badge";
-import { Popover, PopoverContent, PopoverTrigger } from "../../../../../components/ui/popover";
-import {
-  Command, CommandInput, CommandList, CommandEmpty,
-  CommandGroup, CommandItem,
-} from "../../../../../components/ui/command";
-
-const ALL_STATUSES = [
-  "draft", "pending", "awaiting_approval", "assigned",
-  "in_progress", "review", "done", "failed",
-] as const;
-
-const statusColor: Record<string, string> = {
-  done: "bg-brand",
-  in_progress: "bg-foreground animate-pulse",
-  pending: "bg-muted-foreground/30",
-  failed: "bg-destructive",
-  review: "bg-yellow-500",
-  assigned: "bg-muted-foreground/50",
-  draft: "bg-muted-foreground/20",
-  awaiting_approval: "bg-yellow-500",
-};
-
-const LIVE_STATUSES = new Set(["pending", "assigned", "in_progress", "review", "awaiting_approval"]);
-
-function timeAgo(date?: string) {
-  if (!date) return "\u2014";
-  const diff = Date.now() - new Date(date).getTime();
-  const min = Math.floor(diff / 60000);
-  if (min < 60) return `${min}m ago`;
-  const hours = Math.floor(min / 60);
-  if (hours < 24) return `${hours}h ago`;
-  return `${Math.floor(hours / 24)}d ago`;
-}
-
-function duration(ms?: number) {
-  if (!ms) return "\u2014";
-  const s = Math.floor(ms / 1000);
-  if (s < 60) return `${s}s`;
-  const m = Math.floor(s / 60);
-  return `${m}m ${s % 60}s`;
-}
-
-export default function TasksView({
-  initialTasks,
-  initialMissions,
-}: {
-  initialTasks: Task[];
-  initialMissions: Mission[];
-}) {
-  const { id } = useParams<{ id: string }>();
-  const [filterStatus, setFilterStatus] = useState<string | null>(null);
-  const [filterMission, setFilterMission] = useState<string | null>(null);
-  const [filterAgent, setFilterAgent] = useState<string | null>(null);
-  const [search, setSearch] = useState("");
-  const [page, setPage] = useState(0);
-  const [statusOpen, setStatusOpen] = useState(false);
-  const [missionOpen, setMissionOpen] = useState(false);
-  const [agentOpen, setAgentOpen] = useState(false);
-  const PER_PAGE = 15;
-
-  const polpo = usePolpoClient(id);
-  const { data: tasks = [], isFetching, refetch } = useQuery({
-    queryKey: ["tasks", id],
-    queryFn: () => polpo.getTasks() as unknown as Promise<Task[]>,
-    initialData: initialTasks,
-    refetchInterval: (query) => {
-      const rows = query.state.data ?? [];
-      return rows.some((task) => LIVE_STATUSES.has(task.status)) ? 5000 : false;
-    },
-  });
-
-  const { data: missions = [] } = useQuery({
-    queryKey: ["missions", id],
-    queryFn: () => polpo.getMissions(),
-    initialData: initialMissions,
-  });
-
-  const activeStatuses = useMemo(
-    () => [...new Set(tasks.map(t => t.status).filter(Boolean))].sort(
-      (a, b) => ALL_STATUSES.indexOf(a as typeof ALL_STATUSES[number]) - ALL_STATUSES.indexOf(b as typeof ALL_STATUSES[number])
-    ),
-    [tasks]
-  );
-
-  const taskMissionIds = useMemo(
-    () => [...new Set(tasks.map(t => t.missionId).filter(Boolean))] as string[],
-    [tasks]
-  );
-
-  const activeAgents = useMemo(
-    () => [...new Set(tasks.map(t => t.assignTo).filter(Boolean))].sort() as string[],
-    [tasks]
-  );
-
-  const missionMap = useMemo(() => {
-    const map = new Map<string, string>();
-    for (const m of missions) map.set(m.id, m.name ?? m.id.slice(0, 8));
-    return map;
-  }, [missions]);
-
-  const filtered = useMemo(() => {
-    let result = tasks;
-    if (filterStatus) result = result.filter(t => t.status === filterStatus);
-    if (filterMission === "__none__") result = result.filter(t => !t.missionId);
-    else if (filterMission) result = result.filter(t => t.missionId === filterMission);
-    if (filterAgent) result = result.filter(t => t.assignTo === filterAgent);
-    if (search) {
-      const q = search.toLowerCase();
-      result = result.filter(t =>
-        (t.title ?? "").toLowerCase().includes(q) ||
-        (t.assignTo ?? "").toLowerCase().includes(q) ||
-        t.id.toLowerCase().includes(q)
-      );
-    }
-    return result;
-  }, [tasks, filterStatus, filterMission, filterAgent, search]);
-
-  const hasFilters = filterStatus !== null || filterMission !== null || filterAgent !== null;
-  const paged = filtered.slice(page * PER_PAGE, (page + 1) * PER_PAGE);
-  const totalPages = Math.ceil(filtered.length / PER_PAGE);
-
-  return (
-    <div>
-      {/* Header */}
-      <div>
-        <h2 className="text-lg font-semibold tracking-tight">Tasks</h2>
-        <p className="mt-1 text-xs text-muted-foreground">{tasks.length} total</p>
-      </div>
-
-      {/* Filters + Search */}
-      {tasks.length > 0 && (
-        <div className="mt-3 flex items-center gap-2 flex-wrap">
-          {/* Search */}
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground" />
-            <input
-              type="text"
-              value={search}
-              onChange={(e) => { setSearch(e.target.value); setPage(0); }}
-              placeholder="Search..."
-              className="w-48 border border-border bg-transparent pl-9 pr-3 py-1.5 text-xs placeholder:text-muted-foreground/40 focus:border-foreground/30 focus:outline-none transition-colors"
-            />
-          </div>
-
-          {/* Status filter */}
-          <Popover open={statusOpen} onOpenChange={setStatusOpen}>
-            <PopoverTrigger
-              render={
-                <Button variant="outline" size="sm" data-testid="filter-status">
-                  <ListFilter className="h-3 w-3" />
-                  {filterStatus ? (
-                    <>
-                      Status: <Badge variant="secondary" className="ml-1 font-normal">{filterStatus.replace(/_/g, " ")}</Badge>
-                    </>
-                  ) : (
-                    "Status"
-                  )}
-                </Button>
-              }
-            />
-            <PopoverContent className="w-52 p-0" align="start">
-              <Command>
-                <CommandInput placeholder="Search status..." />
-                <CommandList>
-                  <CommandEmpty>No status found.</CommandEmpty>
-                  <CommandGroup>
-                    {activeStatuses.map(s => (
-                      <CommandItem
-                        key={s}
-                        value={s}
-                        data-checked={filterStatus === s || undefined}
-                        onSelect={() => {
-                          setFilterStatus(filterStatus === s ? null : s);
-                          setStatusOpen(false);
-                        }}
-                      >
-                        <span className={`h-2 w-2 rounded-full shrink-0 ${statusColor[s]}`} />
-                        {s.replace(/_/g, " ")}
-                      </CommandItem>
-                    ))}
-                  </CommandGroup>
-                </CommandList>
-              </Command>
-            </PopoverContent>
-          </Popover>
-
-          {/* Mission filter */}
-          {taskMissionIds.length > 0 && (
-            <Popover open={missionOpen} onOpenChange={setMissionOpen}>
-              <PopoverTrigger
-                render={
-                  <Button variant="outline" size="sm" data-testid="filter-mission">
-                    <ListFilter className="h-3 w-3" />
-                    {filterMission ? (
-                      <>
-                        Mission: <Badge variant="secondary" className="ml-1 font-normal">
-                          {filterMission === "__none__" ? "No mission" : (missionMap.get(filterMission) ?? filterMission.slice(0, 8))}
-                        </Badge>
-                      </>
-                    ) : (
-                      "Mission"
-                    )}
-                  </Button>
-                }
-              />
-              <PopoverContent className="w-56 p-0" align="start">
-                <Command>
-                  <CommandInput placeholder="Search mission..." />
-                  <CommandList>
-                    <CommandEmpty>No mission found.</CommandEmpty>
-                    <CommandGroup>
-                      <CommandItem
-                        value="__none__"
-                        data-checked={filterMission === "__none__" || undefined}
-                        onSelect={() => {
-                          setFilterMission(filterMission === "__none__" ? null : "__none__");
-                          setMissionOpen(false);
-                        }}
-                      >
-                        <span className="text-muted-foreground">No mission</span>
-                      </CommandItem>
-                      {taskMissionIds.map(mid => (
-                        <CommandItem
-                          key={mid}
-                          value={missionMap.get(mid) ?? mid}
-                          data-checked={filterMission === mid || undefined}
-                          onSelect={() => {
-                            setFilterMission(filterMission === mid ? null : mid);
-                            setMissionOpen(false);
-                          }}
-                        >
-                          {missionMap.get(mid) ?? mid.slice(0, 8)}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          )}
-
-          {/* Agent filter */}
-          {activeAgents.length > 1 && (
-            <Popover open={agentOpen} onOpenChange={setAgentOpen}>
-              <PopoverTrigger
-                render={
-                  <Button variant="outline" size="sm" data-testid="filter-agent">
-                    <ListFilter className="h-3 w-3" />
-                    {filterAgent ? (
-                      <>
-                        Agent: <Badge variant="secondary" className="ml-1 font-normal">{filterAgent}</Badge>
-                      </>
-                    ) : (
-                      "Agent"
-                    )}
-                  </Button>
-                }
-              />
-              <PopoverContent className="w-52 p-0" align="start">
-                <Command>
-                  <CommandInput placeholder="Search agent..." />
-                  <CommandList>
-                    <CommandEmpty>No agent found.</CommandEmpty>
-                    <CommandGroup>
-                      {activeAgents.map(a => (
-                        <CommandItem
-                          key={a}
-                          value={a}
-                          data-checked={filterAgent === a || undefined}
-                          onSelect={() => {
-                            setFilterAgent(filterAgent === a ? null : a);
-                            setAgentOpen(false);
-                            setPage(0);
-                          }}
-                        >
-                          {a}
-                        </CommandItem>
-                      ))}
-                    </CommandGroup>
-                  </CommandList>
-                </Command>
-              </PopoverContent>
-            </Popover>
-          )}
-
-          {/* Active filter badges + clear */}
-          {hasFilters && (
-            <>
-              <span className="text-xs text-muted-foreground">
-                {filtered.length} of {tasks.length}
-              </span>
-              <Button
-                variant="ghost"
-                size="xs"
-                onClick={() => { setFilterStatus(null); setFilterMission(null); setFilterAgent(null); setSearch(""); setPage(0); }}
-                data-testid="clear-filters"
-              >
-                <X className="h-3 w-3" />
-                Clear
-              </Button>
-            </>
-          )}
-
-          {/* Refresh */}
-          <button
-            onClick={() => refetch()}
-            disabled={isFetching}
-            data-testid="refresh-btn"
-            className="ml-auto inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
-          >
-            <RefreshCw className={`h-3 w-3 ${isFetching ? "animate-spin" : ""}`} />
-            Refresh
-          </button>
-        </div>
-      )}
-
-      {/* Table */}
-      {filtered.length > 0 ? (
-        <div data-testid="tasks-table" className="mt-4 border border-border overflow-hidden overflow-x-auto min-w-[600px]">
-          <div className="flex items-center border-b border-border bg-secondary/50 text-left text-xs font-medium text-muted-foreground">
-            <span className="px-4 py-2.5 w-28">Status</span>
-            <span className="px-4 py-2.5 flex-1">Task</span>
-            <span className="px-4 py-2.5 w-24">Agent</span>
-            <span className="px-4 py-2.5 w-20">Duration</span>
-            <span className="px-4 py-2.5 w-16">Retries</span>
-            <span className="px-4 py-2.5 w-20 text-right">Updated</span>
-            <span className="w-8" />
-          </div>
-          {paged.map((task) => (
-            <Link
-              key={task.id}
-              href={`/projects/${id}/tasks/${task.id}`}
-              data-testid={`task-row-${task.id}`}
-              className="flex items-center border-b border-border last:border-0 hover:bg-secondary/30 transition-colors group"
-            >
-              <span className="px-4 py-3 w-28">
-                <span className="inline-flex items-center gap-1.5">
-                  <span className={`h-2 w-2 rounded-full ${statusColor[task.status ?? "pending"]}`} />
-                  <span className="text-xs text-muted-foreground">{task.status}</span>
-                </span>
-              </span>
-              <span className="px-4 py-3 flex-1">
-                <span className="text-sm font-medium block">{task.title}</span>
-                {task.missionId && (
-                  <span className="block mt-0.5 text-[11px] text-muted-foreground/50">
-                    mission: {missionMap.get(task.missionId) ?? task.missionId.slice(0, 8)}
-                  </span>
-                )}
-                {task.dependsOn && task.dependsOn.length > 0 && (
-                  <span className="block mt-0.5 text-[11px] text-muted-foreground/50">
-                    depends on: {task.dependsOn.join(", ")}
-                  </span>
-                )}
-              </span>
-              <span className="px-4 py-3 w-24 font-mono text-xs text-muted-foreground">
-                {task.assignTo ?? "\u2014"}
-              </span>
-              <span className="px-4 py-3 w-20 font-mono text-xs text-muted-foreground">
-                {duration(task.result?.duration)}
-              </span>
-              <span className="px-4 py-3 w-16 text-xs text-muted-foreground">
-                {task.retries ?? 0}/{task.maxRetries ?? 3}
-              </span>
-              <span className="px-4 py-3 w-20 text-right text-xs text-muted-foreground">
-                {timeAgo(task.updatedAt)}
-              </span>
-              <span className="px-2 py-3 w-8">
-                <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/30 group-hover:text-muted-foreground transition-colors" />
-              </span>
-            </Link>
-          ))}
-          {totalPages > 1 && (
-            <div className="flex items-center justify-between px-4 py-2.5 border-t border-border">
-              <span className="text-xs text-muted-foreground">
-                {page * PER_PAGE + 1}–{Math.min((page + 1) * PER_PAGE, filtered.length)} of {filtered.length}
-              </span>
-              <div className="flex items-center gap-1">
-                <button
-                  onClick={() => setPage((p) => Math.max(0, p - 1))}
-                  disabled={page === 0}
-                  className="px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground border border-border transition-colors disabled:opacity-30 disabled:pointer-events-none"
-                >
-                  Prev
-                </button>
-                <button
-                  onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))}
-                  disabled={page >= totalPages - 1}
-                  className="px-2.5 py-1 text-xs text-muted-foreground hover:text-foreground border border-border transition-colors disabled:opacity-30 disabled:pointer-events-none"
-                >
-                  Next
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-      ) : tasks.length > 0 ? (
-        <div className="mt-4 border border-border p-8 text-center text-sm text-muted-foreground">
-          {search ? "No tasks matching your search." : "No tasks match the current filters."}
-        </div>
-      ) : (
-        <div data-testid="tasks-empty" className="mt-4 border border-border p-8 text-center text-sm text-muted-foreground">
-          No tasks yet.
-        </div>
-      )}
-    </div>
-  );
-}