claude-code/packages/remote-control-server/web/components/chat/PlanView.tsx

import { useState } from "react";
import type { PlanDisplayEntry } from "../../src/lib/types";
import type { PlanEntry, PlanEntryPriority, PlanEntryStatus } from "../../src/acp/types";
import { cn } from "../../src/lib/utils";
import { CheckCircle2, Loader2, Circle } from "lucide-react";

// =============================================================================
// Plan 展示组件 — 执行计划可视化
// =============================================================================

interface PlanDisplayProps {
  entry: PlanDisplayEntry;
}

export function PlanDisplay({ entry }: PlanDisplayProps) {
  const [collapsed, setCollapsed] = useState(false);
  const { entries } = entry;

  if (entries.length === 0) return null;

  const completed = entries.filter((e) => e.status === "completed").length;
  const total = entries.length;
  const percentage = total > 0 ? Math.round((completed / total) * 100) : 0;

  return (
    <div className="pl-10">
      <div className="rounded-xl border border-border bg-brand/5 overflow-hidden">
        {/* Header */}
        <button
          type="button"
          className="w-full flex items-center gap-2 px-3 py-2.5 text-sm hover:bg-surface-1/50 transition-colors"
          onClick={() => setCollapsed(!collapsed)}
        >
          <svg
            width="12"
            height="12"
            viewBox="0 0 12 12"
            fill="none"
            className={cn("transition-transform text-text-muted flex-shrink-0", collapsed && "rotate-90")}
          >
            <path d="M4 2L8 6L4 10" stroke="currentColor" strokeWidth="1.5" fill="none" />
          </svg>

          <span className="text-xs font-display font-medium text-text-secondary">
            执行计划
          </span>

          <span className="text-[10px] text-text-muted font-mono">
            {completed}/{total}
          </span>

          {/* Progress bar */}
          <div className="flex-1 h-1 rounded-full bg-surface-1 overflow-hidden ml-1 mr-2">
            <div
              className="h-full rounded-full bg-brand/70 transition-all duration-500"
              style={{ width: `${percentage}%` }}
            />
          </div>

          <span className="text-[10px] text-text-muted font-mono">
            {percentage}%
          </span>
        </button>

        {/* Entry list */}
        {!collapsed && (
          <div className={cn(
            "border-t border-border px-3 py-1.5 space-y-0.5",
            total > 5 && "max-h-64 overflow-y-auto",
          )}>
            {entries.map((planEntry, i) => (
              <PlanEntryRow key={i} entry={planEntry} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

// =============================================================================
// 单条 Plan 条目
// =============================================================================

function PlanEntryRow({ entry }: { entry: PlanEntry }) {
  return (
    <div className="flex items-start gap-2 py-1.5 px-1">
      <span className="flex-shrink-0 mt-0.5">
        <StatusIcon status={entry.status} />
      </span>
      <span className={cn(
        "text-xs leading-relaxed flex-1",
        entry.status === "completed" ? "text-text-muted line-through" : "text-text-secondary",
        entry.status === "in_progress" && "text-text-primary font-medium",
      )}>
        {entry.content}
      </span>
      <PriorityBadge priority={entry.priority} />
    </div>
  );
}

// =============================================================================
// 状态图标
// =============================================================================

function StatusIcon({ status }: { status: PlanEntryStatus }) {
  switch (status) {
    case "completed":
      return <CheckCircle2 className="h-3.5 w-3.5 text-status-active" />;
    case "in_progress":
      return <Loader2 className="h-3.5 w-3.5 text-brand animate-spin" style={{ animationDuration: "2s" }} />;
    case "pending":
      return <Circle className="h-3.5 w-3.5 text-text-muted" />;
  }
}

// =============================================================================
// 优先级标签
// =============================================================================

function PriorityBadge({ priority }: { priority: PlanEntryPriority }) {
  const styles: Record<PlanEntryPriority, string> = {
    high: "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300",
    medium: "bg-brand/10 text-brand dark:bg-brand/20",
    low: "bg-surface-1 text-text-muted",
  };

  const labels: Record<PlanEntryPriority, string> = {
    high: "高",
    medium: "中",
    low: "低",
  };

  return (
    <span className={cn(
      "text-[9px] font-display rounded-full px-1.5 py-0.5 flex-shrink-0 leading-none",
      styles[priority],
    )}>
      {labels[priority]}
    </span>
  );
}