@polpo-ai/dashboard 0.1.3 → 0.15.8

package/components/dashboard/mission-graph.tsx

@@ -1,262 +0,0 @@
-"use client";
-
-import { useMemo } from "react";
-import {
-  ReactFlow,
-  Background,
-  BackgroundVariant,
-  Controls,
-  MarkerType,
-  type Node,
-  type Edge,
-  type NodeProps,
-  Position,
-  useNodesState,
-  useEdgesState,
-  Handle,
-} from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
-import type { Task } from "@polpo-ai/core";
-import Link from "next/link";
-
-// ── Status config ──
-
-const STATUS_CONFIG: Record<string, { bg: string; border: string; dot: string; text: string }> = {
-  done:              { bg: "bg-emerald-500/5",       border: "border-emerald-500/40", dot: "bg-emerald-500",         text: "text-emerald-500" },
-  completed:         { bg: "bg-emerald-500/5",       border: "border-emerald-500/40", dot: "bg-emerald-500",         text: "text-emerald-500" },
-  in_progress:       { bg: "bg-blue-500/5",          border: "border-blue-500/40",    dot: "bg-blue-500",            text: "text-blue-500" },
-  review:            { bg: "bg-amber-500/5",         border: "border-amber-500/40",   dot: "bg-amber-500",           text: "text-amber-500" },
-  pending:           { bg: "bg-card/90",             border: "border-border",         dot: "bg-muted-foreground/30", text: "text-muted-foreground" },
-  assigned:          { bg: "bg-card/90",             border: "border-border",         dot: "bg-muted-foreground/50", text: "text-muted-foreground" },
-  draft:             { bg: "bg-card/90",             border: "border-border/60",      dot: "bg-muted-foreground/20", text: "text-muted-foreground/60" },
-  failed:            { bg: "bg-red-500/5",           border: "border-red-500/40",     dot: "bg-red-500",             text: "text-red-500" },
-  awaiting_approval: { bg: "bg-amber-500/5",         border: "border-amber-500/40",   dot: "bg-amber-500",           text: "text-amber-500" },
-};
-
-const DEFAULT_CFG = { bg: "bg-card/90", border: "border-border", dot: "bg-muted-foreground/30", text: "text-muted-foreground" };
-
-// ── Task Node ──
-
-interface TaskNodeData {
-  task: Task;
-  index: number;
-  projectId: string;
-  readonly?: boolean;
-  [key: string]: unknown;
-}
-
-function TaskNode({ data }: NodeProps<Node<TaskNodeData>>) {
-  const { task, index, projectId, readonly: isReadonly } = data;
-  const cfg = STATUS_CONFIG[task.status] ?? DEFAULT_CFG;
-  const duration = task.result?.duration != null ? `${Math.round(task.result.duration / 1000)}s` : null;
-
-  return (
-    <>
-      <Handle type="target" position={Position.Top} className="!bg-muted-foreground/40 !border-none !w-2 !h-2" />
-      <div className={`rounded-xl border-2 ${cfg.border} ${cfg.bg} px-4 py-3 min-w-[220px] max-w-[280px] shadow-sm backdrop-blur-sm`}>
-        {/* Header */}
-        <div className="flex items-center gap-2 mb-1.5">
-          <span className="text-[10px] font-mono text-muted-foreground/60">#{index + 1}</span>
-          <span className={`h-2.5 w-2.5 rounded-full ${cfg.dot} ${task.status === "in_progress" ? "animate-pulse" : ""}`} />
-          <span className={`text-[10px] font-medium ${cfg.text}`}>{task.status.replace(/_/g, " ")}</span>
-          {task.phase && task.status === "in_progress" && (
-            <span className="text-[9px] text-muted-foreground/50">({task.phase})</span>
-          )}
-          {duration && (
-            <span className="text-[9px] text-muted-foreground ml-auto font-mono">{duration}</span>
-          )}
-        </div>
-
-        {/* Title */}
-        {isReadonly ? (
-          <span className="text-xs font-semibold leading-tight line-clamp-2 block">{task.title}</span>
-        ) : (
-          <Link
-            href={`/projects/${projectId}/tasks/${task.id}`}
-            className="text-xs font-semibold leading-tight line-clamp-2 hover:underline underline-offset-2 block"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {task.title}
-          </Link>
-        )}
-
-        {/* Footer */}
-        <div className="mt-2 flex items-center gap-2">
-          <span className="rounded bg-secondary/80 px-1.5 py-0.5 text-[9px] font-mono text-muted-foreground">
-            {task.assignTo}
-          </span>
-          {task.dependsOn && task.dependsOn.length > 0 && (
-            <span className="text-[9px] text-muted-foreground/50">
-              {task.dependsOn.length} dep{task.dependsOn.length > 1 ? "s" : ""}
-            </span>
-          )}
-          {task.result?.assessment?.globalScore != null && (
-            <span className={`text-[9px] font-medium ml-auto ${task.result.assessment.globalScore >= 0.7 ? "text-emerald-500" : "text-red-400"}`}>
-              {Math.round(task.result.assessment.globalScore * 100)}%
-            </span>
-          )}
-        </div>
-      </div>
-      <Handle type="source" position={Position.Bottom} className="!bg-muted-foreground/40 !border-none !w-2 !h-2" />
-    </>
-  );
-}
-
-const nodeTypes = { task: TaskNode };
-
-// ── Layout ──
-
-const NODE_WIDTH = 240;
-const NODE_HEIGHT = 120;
-const H_GAP = 60;
-const V_GAP = 80;
-
-function layoutNodes(tasks: Task[], projectId: string): { nodes: Node<TaskNodeData>[]; edges: Edge[] } {
-  const taskMap = new Map(tasks.map(t => [t.id, t]));
-
-  // Compute depth per task
-  const depths = new Map<string, number>();
-
-  function getDepth(taskId: string, visited = new Set<string>()): number {
-    if (depths.has(taskId)) return depths.get(taskId)!;
-    if (visited.has(taskId)) return 0;
-    visited.add(taskId);
-
-    const task = taskMap.get(taskId);
-    if (!task?.dependsOn?.length) {
-      depths.set(taskId, 0);
-      return 0;
-    }
-
-    const maxParent = Math.max(...task.dependsOn.map(d => getDepth(d, visited)));
-    const depth = maxParent + 1;
-    depths.set(taskId, depth);
-    return depth;
-  }
-
-  for (const task of tasks) getDepth(task.id);
-
-  // Group by depth
-  const layers = new Map<number, Task[]>();
-  for (const task of tasks) {
-    const d = depths.get(task.id) ?? 0;
-    if (!layers.has(d)) layers.set(d, []);
-    layers.get(d)!.push(task);
-  }
-
-  const maxDepth = Math.max(...layers.keys(), 0);
-  const nodes: Node<TaskNodeData>[] = [];
-
-  // Track task index globally
-  let globalIndex = 0;
-
-  for (let depth = 0; depth <= maxDepth; depth++) {
-    const layerTasks = layers.get(depth) ?? [];
-    const totalWidth = layerTasks.length * NODE_WIDTH + (layerTasks.length - 1) * H_GAP;
-    const startX = -totalWidth / 2;
-
-    layerTasks.forEach((task, i) => {
-      nodes.push({
-        id: task.id,
-        type: "task",
-        position: {
-          x: startX + i * (NODE_WIDTH + H_GAP),
-          y: depth * (NODE_HEIGHT + V_GAP),
-        },
-        data: { task, index: globalIndex++, projectId },
-      });
-    });
-  }
-
-  // Edges with arrows
-  const edges: Edge[] = [];
-  for (const task of tasks) {
-    if (!task.dependsOn) continue;
-    for (const depId of task.dependsOn) {
-      const sourceTask = taskMap.get(depId);
-      if (!sourceTask) continue;
-
-      const isDone = sourceTask.status === "done";
-      const isFailed = sourceTask.status === "failed";
-      const isActive = sourceTask.status === "in_progress";
-
-      const edgeColor = "#888";
-
-      edges.push({
-        id: `${depId}->${task.id}`,
-        source: depId,
-        target: task.id,
-        type: "smoothstep",
-        animated: isActive,
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          width: 14,
-          height: 14,
-          color: edgeColor,
-        },
-        style: {
-          stroke: edgeColor,
-          strokeWidth: 1.5,
-          strokeDasharray: isActive ? undefined : "6 4",
-        },
-      });
-    }
-  }
-
-  return { nodes, edges };
-}
-
-// ── Component ──
-
-interface MissionGraphProps {
-  tasks: Task[];
-  projectId: string;
-  readonly?: boolean;
-}
-
-export function MissionGraph({ tasks, projectId, readonly = false }: MissionGraphProps) {
-  const { nodes: initialNodes, edges: initialEdges } = useMemo(() => {
-    const layout = layoutNodes(tasks, projectId);
-    if (readonly) {
-      for (const node of layout.nodes) {
-        node.data.readonly = true;
-      }
-    }
-    return layout;
-  }, [tasks, projectId, readonly]);
-
-  const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, , onEdgesChange] = useEdgesState(initialEdges);
-
-  return (
-    <div className="h-[600px] w-full rounded-xl border border-border overflow-hidden">
-      <ReactFlow
-        nodes={nodes}
-        edges={edges}
-        onNodesChange={onNodesChange}
-        onEdgesChange={onEdgesChange}
-        nodeTypes={nodeTypes}
-        fitView
-        fitViewOptions={{ padding: 0.3 }}
-        minZoom={0.2}
-        maxZoom={2}
-        proOptions={{ hideAttribution: true }}
-        nodesDraggable
-        nodesConnectable={false}
-        defaultEdgeOptions={{ type: "smoothstep" }}
-        style={{ background: "hsl(var(--card))" }}
-      >
-        <Background
-          variant={BackgroundVariant.Dots}
-          gap={20}
-          size={1.5}
-          color="#555"
-        />
-        <Controls
-          showInteractive={false}
-          className="!bg-card !border-border !shadow-none [&>button]:!bg-card [&>button]:!border-border [&>button]:!text-muted-foreground [&>button:hover]:!bg-secondary"
-        />
-      </ReactFlow>
-    </div>
-  );
-}

package/components/dashboard/nav-tabs.tsx

@@ -1,86 +0,0 @@
-"use client";
-
-import { usePathname } from "next/navigation";
-import Link from "next/link";
-import type { LucideIcon } from "lucide-react";
-
-interface Tab {
-  label: string;
-  href: string;
-  icon?: LucideIcon;
-}
-
-export function NavTabs({
-  basePath,
-  tabs,
-  className,
-  orientation = "horizontal",
-}: {
-  basePath: string;
-  tabs: Tab[];
-  className?: string;
-  orientation?: "horizontal" | "vertical";
-}) {
-  const pathname = usePathname();
-  const vertical = orientation === "vertical";
-
-  return (
-    <div
-      data-testid="nav-tabs"
-      className={
-        vertical
-          ? `flex flex-col gap-0.5 ${className ?? ""}`
-          : `flex gap-1 border-b border-border overflow-x-auto scrollbar-none ${className ?? ""}`
-      }
-    >
-      {tabs.map((tab) => {
-        const href = `${basePath}${tab.href}`;
-        const active = tab.href === ""
-          ? pathname === basePath
-          : pathname.startsWith(href);
-
-        if (vertical) {
-          const Icon = tab.icon;
-          return (
-            <Link
-              key={tab.label}
-              href={href}
-              data-testid={`tab-${tab.label.toLowerCase().replace(/\s+/g, "-")}`}
-              className={`relative flex items-center gap-2.5 border-l-2 px-3 py-1.5 text-sm transition-colors ${
-                active
-                  ? "border-foreground bg-foreground/5 font-medium text-foreground"
-                  : "border-transparent text-muted-foreground hover:border-border hover:text-foreground"
-              }`}
-            >
-              {Icon && (
-                <Icon
-                  className={`h-4 w-4 shrink-0 ${active ? "text-foreground" : "text-muted-foreground/60"}`}
-                  strokeWidth={1.5}
-                />
-              )}
-              {tab.label}
-            </Link>
-          );
-        }
-
-        return (
-          <Link
-            key={tab.label}
-            href={href}
-            data-testid={`tab-${tab.label.toLowerCase().replace(/\s+/g, "-")}`}
-            className={`relative px-3 py-2 text-sm transition-colors whitespace-nowrap ${
-              active
-                ? "text-foreground font-medium"
-                : "text-muted-foreground hover:text-foreground"
-            }`}
-          >
-            {tab.label}
-            {active && (
-              <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-foreground" />
-            )}
-          </Link>
-        );
-      })}
-    </div>
-  );
-}