claude-dashboard 0.1.0

package/src/components/agent/AgentOutput.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useAutoScroll } from "@/hooks/useAutoScroll";
+import type { AgentActivity } from "@/lib/workflow/types";
+
+function ActivityIndicator({ activity }: { activity: AgentActivity }) {
+  switch (activity.kind) {
+    case "thinking":
+      return (
+        <span className="flex items-center gap-2">
+          <span className="w-1.5 h-1.5 bg-amber-400 rounded-full animate-pulse" />
+          Thinking...
+        </span>
+      );
+    case "tool_use":
+      return (
+        <span className="flex items-center gap-2">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75" />
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500" />
+          </span>
+          Using {activity.toolName}...
+        </span>
+      );
+    case "text":
+      return (
+        <span className="flex items-center gap-2">
+          <span className="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse" />
+          Writing response...
+        </span>
+      );
+    case "idle":
+    default:
+      return (
+        <span className="flex items-center gap-2">
+          <span className="relative flex h-2 w-2">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+            <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+          </span>
+          Waiting for output...
+        </span>
+      );
+  }
+}
+
+interface AgentOutputProps {
+  output: string;
+  isStreaming: boolean;
+  activity?: AgentActivity;
+}
+
+export function AgentOutput({
+  output,
+  isStreaming,
+  activity,
+}: AgentOutputProps) {
+  const { ref, handleScroll } = useAutoScroll<HTMLDivElement>([output]);
+
+  if (!output) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full gap-2 text-xs text-muted-foreground">
+        {isStreaming ? (
+          <ActivityIndicator activity={activity ?? { kind: "idle" }} />
+        ) : (
+          "No output yet"
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      onScroll={handleScroll}
+      className="agent-output overflow-y-auto h-full px-2 py-1"
+    >
+      <div className="prose prose-invert prose-sm max-w-none">
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{output}</ReactMarkdown>
+      </div>
+      {isStreaming && (
+        <span className="inline-block w-1.5 h-3 bg-emerald-400 animate-pulse ml-0.5" />
+      )}
+    </div>
+  );
+}

package/src/components/agent/AgentStatusBadge.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import type { StepStatus } from "@/lib/workflow/types";
+
+const statusConfig: Record<StepStatus, { label: string; className: string }> = {
+  pending: { label: "Pending", className: "bg-gray-500/20 text-gray-400" },
+  running: { label: "Running", className: "bg-emerald-500/20 text-emerald-400 animate-pulse" },
+  completed: { label: "Done", className: "bg-blue-500/20 text-blue-400" },
+  failed: { label: "Failed", className: "bg-red-500/20 text-red-400" },
+  skipped: { label: "Skipped", className: "bg-gray-500/20 text-gray-500" },
+};
+
+export function AgentStatusBadge({ status }: { status: StepStatus }) {
+  const config = statusConfig[status];
+  return (
+    <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium ${config.className}`}>
+      {config.label}
+    </span>
+  );
+}

package/src/components/events/EventLog.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useEventStore } from "@/stores/eventStore";
+import { useAutoScroll } from "@/hooks/useAutoScroll";
+import { EventLogItem } from "./EventLogItem";
+
+export function EventLog() {
+  const events = useEventStore((s) => s.events);
+  const parentRef = useRef<HTMLDivElement>(null);
+  const { ref: scrollRef, handleScroll } = useAutoScroll<HTMLDivElement>([
+    events.length,
+  ]);
+
+  const virtualizer = useVirtualizer({
+    count: events.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 28,
+    overscan: 20,
+  });
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-border">
+        <span className="text-xs font-medium">Event Log</span>
+        <span className="text-[10px] text-muted-foreground">
+          {events.length} events
+        </span>
+      </div>
+      <div
+        ref={(el) => {
+          (parentRef as any).current = el;
+          (scrollRef as any).current = el;
+        }}
+        onScroll={handleScroll}
+        className="flex-1 overflow-auto"
+      >
+        <div
+          style={{
+            height: `${virtualizer.getTotalSize()}px`,
+            width: "100%",
+            position: "relative",
+          }}
+        >
+          {virtualizer.getVirtualItems().map((virtualItem) => (
+            <div
+              key={virtualItem.key}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: `${virtualItem.size}px`,
+                transform: `translateY(${virtualItem.start}px)`,
+              }}
+            >
+              <EventLogItem event={events[virtualItem.index]} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/events/EventLogItem.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import type { EventLogItem as EventLogItemType } from "@/types";
+import { AGENT_CONFIG } from "@/lib/workflow/types";
+
+const typeStyles: Record<string, string> = {
+  info: "text-gray-400",
+  warning: "text-yellow-400",
+  error: "text-red-400",
+  success: "text-emerald-400",
+};
+
+export function EventLogItem({ event }: { event: EventLogItemType }) {
+  const time = new Date(event.timestamp).toLocaleTimeString("en-US", {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+  });
+
+  const agentColor = event.role ? AGENT_CONFIG[event.role]?.color : undefined;
+
+  return (
+    <div className="flex items-start gap-2 px-3 py-1 text-xs hover:bg-white/5">
+      <span className="text-muted-foreground shrink-0 font-mono">{time}</span>
+      {event.role && (
+        <span
+          className="shrink-0 font-medium"
+          style={{ color: agentColor }}
+        >
+          [{AGENT_CONFIG[event.role]?.label}]
+        </span>
+      )}
+      <span className={typeStyles[event.type] || "text-gray-400"}>
+        {event.message}
+      </span>
+    </div>
+  );
+}

package/src/components/history/HistoryTable.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { Workflow } from "@/lib/workflow/types";
+
+const statusColors: Record<string, string> = {
+  pending: "text-gray-400",
+  running: "text-emerald-400",
+  paused: "text-yellow-400",
+  completed: "text-blue-400",
+  failed: "text-red-400",
+  cancelled: "text-gray-500",
+};
+
+export function HistoryTable() {
+  const [workflows, setWorkflows] = useState<Workflow[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("/api/workflows")
+      .then((r) => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+      })
+      .then((data) => {
+        setWorkflows(data.workflows || []);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message || "Failed to load workflows");
+        setLoading(false);
+      });
+  }, []);
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center p-8 text-sm text-muted-foreground">
+        Loading...
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center p-8 text-sm text-red-400">
+        Failed to load workflows: {error}
+      </div>
+    );
+  }
+
+  if (workflows.length === 0) {
+    return (
+      <div className="flex items-center justify-center p-8 text-sm text-muted-foreground">
+        No workflows yet. Start one from the Dashboard.
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-auto">
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="border-b border-border text-muted-foreground">
+            <th className="text-left py-2 px-3 font-medium">Title</th>
+            <th className="text-left py-2 px-3 font-medium">Status</th>
+            <th className="text-left py-2 px-3 font-medium">Created</th>
+            <th className="text-left py-2 px-3 font-medium">Duration</th>
+          </tr>
+        </thead>
+        <tbody>
+          {workflows.map((w) => (
+            <tr
+              key={w.id}
+              className="border-b border-border/50 hover:bg-white/5 cursor-pointer"
+            >
+              <td className="py-2 px-3 truncate max-w-[400px]">{w.title}</td>
+              <td className={`py-2 px-3 ${statusColors[w.status] || ""}`}>
+                {w.status}
+              </td>
+              <td className="py-2 px-3 text-muted-foreground">
+                {new Date(w.createdAt).toLocaleString()}
+              </td>
+              <td className="py-2 px-3 text-muted-foreground">
+                {w.completedAt
+                  ? formatDuration(
+                      new Date(w.completedAt).getTime() -
+                        new Date(w.createdAt).getTime()
+                    )
+                  : "-"}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+function formatDuration(ms: number): string {
+  const s = Math.floor(ms / 1000);
+  const m = Math.floor(s / 60);
+  if (m > 0) return `${m}m ${s % 60}s`;
+  return `${s}s`;
+}

package/src/components/layout/DashboardShell.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import { TopNav } from "./TopNav";
+
+export function DashboardShell({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="h-screen flex flex-col overflow-hidden">
+      <TopNav />
+      <main className="flex-1 overflow-hidden flex flex-col">{children}</main>
+    </div>
+  );
+}

package/src/components/layout/TopNav.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useWorkflowStore } from "@/stores/workflowStore";
+import { useAgentStore } from "@/stores/agentStore";
+import { AGENT_ORDER } from "@/lib/workflow/types";
+import { UsageIndicator } from "@/components/layout/UsageIndicator";
+
+function formatDuration(ms: number): string {
+  const s = Math.floor(ms / 1000);
+  const m = Math.floor(s / 60);
+  if (m > 0) return `${m}m ${s % 60}s`;
+  return `${s}s`;
+}
+
+function LiveElapsed({ startedAt }: { startedAt: number }) {
+  const [now, setNow] = useState(Date.now());
+
+  useEffect(() => {
+    const timer = setInterval(() => setNow(Date.now()), 1000);
+    return () => clearInterval(timer);
+  }, [startedAt]);
+
+  return (
+    <span className="text-xs text-muted-foreground tabular-nums">
+      {formatDuration(now - startedAt)}
+    </span>
+  );
+}
+
+export function TopNav() {
+  const { status, title, startedAt, completedAt } = useWorkflowStore();
+  const agents = useAgentStore((s) => s.agents);
+
+  const completedCount = AGENT_ORDER.filter(
+    (r) => agents[r].status === "completed"
+  ).length;
+
+  const statusColors: Record<string, string> = {
+    pending: "bg-gray-500/20 text-gray-400",
+    running: "bg-emerald-500/20 text-emerald-400",
+    paused: "bg-yellow-500/20 text-yellow-400",
+    completed: "bg-blue-500/20 text-blue-400",
+    failed: "bg-red-500/20 text-red-400",
+    cancelled: "bg-gray-500/20 text-gray-400",
+  };
+
+  return (
+    <header className="h-12 border-b border-border bg-card flex items-center justify-between px-4">
+      <div className="flex items-center gap-3 min-w-0">
+        <h1 className="text-sm font-semibold tracking-tight whitespace-nowrap">
+          Claude Dashboard
+        </h1>
+        {title && (
+          <span className="text-xs text-muted-foreground truncate max-w-[300px]">
+            {title}
+          </span>
+        )}
+        <div className="hidden md:block h-4 w-px bg-border" />
+        <UsageIndicator />
+      </div>
+
+      <div className="flex items-center gap-3">
+        {status !== "pending" && (
+          <>
+            <span
+              className={`text-xs px-2 py-0.5 rounded-full font-medium ${statusColors[status] || ""}`}
+            >
+              {status.toUpperCase()}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {completedCount}/{AGENT_ORDER.length} agents
+            </span>
+            {startedAt && (
+              status === "running" || status === "paused"
+                ? <LiveElapsed startedAt={startedAt} />
+                : <span className="text-xs text-muted-foreground tabular-nums">
+                    {formatDuration((completedAt ?? Date.now()) - startedAt)}
+                  </span>
+            )}
+          </>
+        )}
+      </div>
+    </header>
+  );
+}

package/src/components/layout/UsageIndicator.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { useUsage } from "@/hooks/useUsage";
+import { Tooltip } from "@/components/ui/tooltip";
+
+/**
+ * Returns Tailwind color classes based on usage percentage thresholds.
+ *  - < 50%  → emerald (normal)
+ *  - 50-80% → yellow (warning)
+ *  - > 80%  → red (danger)
+ */
+function getUsageColor(utilization: number | null | undefined): string {
+  if (utilization == null) return "text-muted-foreground";
+  if (utilization > 80) return "text-red-400";
+  if (utilization >= 50) return "text-yellow-400";
+  return "text-emerald-400";
+}
+
+/**
+ * Formats a utilization number to a display string.
+ * Returns "--" if the value is unavailable.
+ */
+function formatPercent(utilization: number | null | undefined): string {
+  if (utilization == null) return "--";
+  return `${Math.round(utilization)}%`;
+}
+
+/**
+ * Formats an ISO 8601 date string into a localized reset time string.
+ * Example: "2026-02-13 14:00"
+ */
+function formatResetTime(resetsAt: string | null | undefined): string {
+  if (!resetsAt) return "N/A";
+  try {
+    const date = new Date(resetsAt);
+    return date.toLocaleString("zh-TW", {
+      month: "2-digit",
+      day: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+    });
+  } catch {
+    return "N/A";
+  }
+}
+
+/** Single usage metric item props */
+interface UsageItemProps {
+  label: string;
+  utilization: number | null | undefined;
+  resetsAt: string | null | undefined;
+  tooltipLabel: string;
+}
+
+/**
+ * A single usage metric with tooltip showing reset time.
+ */
+function UsageItem({ label, utilization, resetsAt, tooltipLabel }: UsageItemProps) {
+  const tooltipContent = (
+    <div className="text-xs">
+      <div className="font-medium mb-0.5">{tooltipLabel}</div>
+      <div className="text-muted-foreground">
+        Usage: {formatPercent(utilization)}
+      </div>
+      <div className="text-muted-foreground">
+        Resets: {formatResetTime(resetsAt)}
+      </div>
+    </div>
+  );
+
+  return (
+    <Tooltip content={tooltipContent} side="bottom" delayMs={150}>
+      <span
+        className={`${getUsageColor(utilization)} cursor-default`}
+        aria-label={`${tooltipLabel}: ${formatPercent(utilization)}`}
+      >
+        {label}: {formatPercent(utilization)}
+      </span>
+    </Tooltip>
+  );
+}
+
+/**
+ * Compact usage indicator showing three Claude Code usage metrics
+ * inline in the header. Designed to fit within h-12 without increasing height.
+ *
+ * Displays: Session | Week | Sonnet with color-coded percentages
+ * and tooltips showing reset times on hover.
+ */
+export function UsageIndicator() {
+  const { data, loading } = useUsage();
+
+  // Show subtle loading skeleton while fetching initial data
+  if (loading) {
+    return (
+      <div
+        className="hidden md:flex items-center gap-2 text-xs text-muted-foreground"
+        aria-label="Loading usage data"
+      >
+        <span className="animate-pulse opacity-50">Session: --</span>
+        <span className="text-border opacity-30">|</span>
+        <span className="animate-pulse opacity-50">Week: --</span>
+        <span className="text-border opacity-30">|</span>
+        <span className="animate-pulse opacity-50">Sonnet: --</span>
+      </div>
+    );
+  }
+
+  const session = data?.five_hour?.utilization ?? null;
+  const week = data?.seven_day?.utilization ?? null;
+  const sonnet = data?.seven_day_sonnet?.utilization ?? null;
+
+  // If there's an error and no data at all, show a subtle indicator
+  if (data?.error && session == null && week == null && sonnet == null) {
+    return (
+      <Tooltip
+        content={
+          <div className="text-xs text-muted-foreground">
+            {data.error}
+          </div>
+        }
+        side="bottom"
+      >
+        <div
+          className="hidden md:flex items-center gap-2 text-xs text-muted-foreground"
+          aria-label="Usage data unavailable"
+        >
+          <span className="opacity-50">Usage: --</span>
+        </div>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <div
+      className="hidden md:flex items-center gap-2 text-xs tabular-nums"
+      role="status"
+      aria-label="Claude Code usage metrics"
+    >
+      <UsageItem
+        label="Session"
+        utilization={session}
+        resetsAt={data?.five_hour?.resets_at}
+        tooltipLabel="Current Session (5h window)"
+      />
+      <span className="text-border select-none" aria-hidden="true">|</span>
+      <UsageItem
+        label="Week"
+        utilization={week}
+        resetsAt={data?.seven_day?.resets_at}
+        tooltipLabel="Weekly All Models (7 days)"
+      />
+      <span className="text-border select-none" aria-hidden="true">|</span>
+      <UsageItem
+        label="Sonnet"
+        utilization={sonnet}
+        resetsAt={data?.seven_day_sonnet?.resets_at}
+        tooltipLabel="Weekly Sonnet (7 days)"
+      />
+    </div>
+  );
+}

package/src/components/pipeline/PipelineBar.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useWorkflowStore } from "@/stores/workflowStore";
+import { useAgentStore } from "@/stores/agentStore";
+import { PIPELINE_STAGES } from "@/lib/workflow/types";
+import { cn } from "@/lib/utils";
+import { PipelineNode } from "./PipelineNode";
+
+export function PipelineBar() {
+  const { currentStageIndex, status } = useWorkflowStore();
+  const agents = useAgentStore((s) => s.agents);
+
+  return (
+    <div className="h-10 border-b border-border bg-card/50 flex items-center px-4 gap-1">
+      {PIPELINE_STAGES.map((stage, stageIdx) => (
+        <div key={stage.index} className="flex items-center">
+          {stageIdx > 0 && (
+            <div className="w-6 h-px bg-border mx-1" />
+          )}
+          {stage.roles.length > 1 ? (
+            /* Multi-agent stage: group with a border */
+            <div className="flex items-center border border-border/50 rounded-lg px-1 gap-0.5">
+              {stage.roles.map((role, roleIdx) => (
+                <div key={role} className="flex items-center">
+                  {roleIdx > 0 && (
+                    <div className="w-px h-4 bg-border mx-0.5" />
+                  )}
+                  <PipelineNode
+                    role={role}
+                    status={agents[role].status}
+                    isCurrent={stageIdx === currentStageIndex && status === "running"}
+                  />
+                </div>
+              ))}
+            </div>
+          ) : (
+            /* Single-agent stage */
+            <PipelineNode
+              role={stage.roles[0]}
+              status={agents[stage.roles[0]].status}
+              isCurrent={stageIdx === currentStageIndex && status === "running"}
+            />
+          )}
+        </div>
+      ))}
+      <div className="w-6 h-px bg-border mx-1" />
+      <div
+        className={cn(
+          "px-3 py-1.5 rounded-md border text-xs font-medium",
+          status === "completed"
+            ? "border-emerald-500 bg-emerald-500/10 text-emerald-400"
+            : "border-gray-600 bg-gray-800/50 text-gray-500"
+        )}
+      >
+        Done
+      </div>
+    </div>
+  );
+}