@steerable/agent-ui 0.2.3 → 0.2.4

package/src/cards/OrchestrationPlanCard.tsx

@@ -0,0 +1,328 @@
+/**
+ * `<OrchestrationPlanCard />`
+ *
+ * The visible surface of an otherwise invisible Coordinator agent. Renders
+ * one row per worker task with a status dot driven by `taskStatuses` (a map
+ * the parent computes off sibling assistant bubbles tagged with the same
+ * orchestrationGroupId + orchestrationTaskId).
+ *
+ * Three top-level shells are supported via mutually-exclusive flags so the
+ * Coordinator can express its lifecycle without forcing the caller to render
+ * three different components:
+ *   - `loading` + optional `loadingHint`   — Coordinator is still planning.
+ *   - `failed` + optional `failure`        — planning errored.
+ *   - default                              — `payload.tasks` are rendered.
+ *
+ * Slots:
+ *   - `renderAbove` / `renderBelowHeader`  — out-of-flow rails for badges and
+ *      context-load lines that deeppath wants to ride along.
+ *   - `renderTaskRow(task, status)`        — full row override (deeppath uses
+ *      it to draw the per-agent colored chip + monospaced task id + right-
+ *      aligned status label).
+ *   - `headerLabel`, `headerSecondary`     — override the default
+ *      "编排计划 · N 个子任务" header label/subline.
+ *   - `hideMode`, `hideHeaderCounts`       — drop the optional header chips
+ *      when the host UI does not want them (deeppath hides both).
+ *   - controlled `expanded` + `onExpandedChange`.
+ */
+import * as React from 'react';
+import type { OrchestrationPlanPayload } from '@steerable/agent-protocol';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  GitBranchIcon,
+  LoaderIcon,
+  AlertIcon,
+} from './icons.js';
+import { asReactNode, type RenderSlotResult } from './types.js';
+
+export type OrchestrationTaskStatus =
+  | 'pending'
+  | 'running'
+  | 'ok'
+  | 'skipped'
+  | 'failed'
+  | 'ask_user_paused';
+
+export type OrchestrationTask = OrchestrationPlanPayload['tasks'][number];
+
+export interface OrchestrationPlanCardProps {
+  payload: OrchestrationPlanPayload;
+  /** Status of each task, keyed by `payload.tasks[i].id`. Missing → pending. */
+  taskStatuses?: Record<string, OrchestrationTaskStatus>;
+  /** Lookup of agentId → display name; falls back to the raw id. */
+  agentNameFor?: (agentId: string) => string;
+  className?: string;
+  defaultExpanded?: boolean;
+  expanded?: boolean;
+  onExpandedChange?: (next: boolean) => void;
+
+  // Lifecycle shells -- mutually exclusive with each other & the default body
+  loading?: boolean;
+  loadingHint?: React.ReactNode;
+  failed?: boolean;
+  failure?: React.ReactNode;
+
+  // Header customisation
+  headerLabel?: React.ReactNode;
+  headerSecondary?: React.ReactNode;
+  hideMode?: boolean;
+  hideHeaderCounts?: boolean;
+
+  // Out-of-flow rails
+  renderAbove?: () => RenderSlotResult;
+  renderBelowHeader?: () => RenderSlotResult;
+
+  // Per-row override
+  renderTaskRow?: (task: OrchestrationTask, status: OrchestrationTaskStatus) => RenderSlotResult;
+}
+
+const STATUS_LABEL: Record<OrchestrationTaskStatus, string> = {
+  pending: '排队中',
+  running: '执行中',
+  ok: '已完成',
+  skipped: '已跳过',
+  failed: '失败',
+  ask_user_paused: '等待用户',
+};
+
+const DOT_CLASS: Record<OrchestrationTaskStatus, string> = {
+  pending: 'bg-[var(--agent-muted-foreground,#9ca3af)]',
+  running: 'bg-amber-500 animate-pulse',
+  ok: 'bg-emerald-500',
+  skipped: 'bg-[var(--agent-muted-foreground,#d1d5db)]',
+  failed: 'bg-rose-500',
+  ask_user_paused: 'bg-sky-500',
+};
+
+export const OrchestrationPlanCard: React.FC<OrchestrationPlanCardProps> = ({
+  payload,
+  taskStatuses,
+  agentNameFor,
+  className,
+  defaultExpanded = true,
+  expanded: expandedProp,
+  onExpandedChange,
+  loading,
+  loadingHint,
+  failed,
+  failure,
+  headerLabel,
+  headerSecondary,
+  hideMode,
+  hideHeaderCounts,
+  renderAbove,
+  renderBelowHeader,
+  renderTaskRow,
+}) => {
+  const [expandedState, setExpandedState] = React.useState(defaultExpanded);
+  const isControlled = expandedProp !== undefined;
+  const expanded = isControlled ? Boolean(expandedProp) : expandedState;
+  const setExpanded = (next: boolean) => {
+    if (!isControlled) setExpandedState(next);
+    onExpandedChange?.(next);
+  };
+
+  const above = renderAbove ? asReactNode(renderAbove()) : null;
+  const belowHeader = renderBelowHeader ? asReactNode(renderBelowHeader()) : null;
+
+  // ---------------- loading shell ----------------
+  if (loading) {
+    return (
+      <div
+        className={[
+          'steerable-orchestration-plan',
+          className,
+        ].filter(Boolean).join(' ')}
+      >
+        {above}
+        <div className="rounded-lg border border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-card-bg,#fff)] text-sm shadow-sm">
+          <div className="flex w-full items-center gap-2 px-3 py-2 text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+            <LoaderIcon size={14} className="shrink-0 animate-spin" />
+            <GitBranchIcon size={14} className="shrink-0" />
+            <span className="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap">
+              {headerLabel ?? (
+                <span className="font-medium text-[var(--agent-foreground,#111827)]">协调员</span>
+              )}
+              <span className="text-[var(--agent-muted-foreground,#9ca3af)]">·</span>
+              <span>{loadingHint ?? '正在规划'}</span>
+            </span>
+          </div>
+          {belowHeader}
+        </div>
+      </div>
+    );
+  }
+
+  // ---------------- failed shell ----------------
+  if (failed) {
+    return (
+      <div
+        className={[
+          'steerable-orchestration-plan',
+          className,
+        ].filter(Boolean).join(' ')}
+      >
+        {above}
+        <div className="rounded-lg border border-rose-500/30 bg-rose-500/5 text-sm shadow-sm">
+          <div className="flex w-full items-start gap-2 px-3 py-2 text-xs">
+            <AlertIcon size={14} className="mt-0.5 shrink-0 text-rose-500" />
+            <GitBranchIcon size={14} className="mt-0.5 shrink-0 text-[var(--agent-muted-foreground,#6b7280)]" />
+            <div className="min-w-0 flex-1">
+              <div className="inline-flex items-center gap-1.5 whitespace-nowrap">
+                {headerLabel ?? (
+                  <span className="font-medium text-[var(--agent-foreground,#111827)]">协调员</span>
+                )}
+                <span className="text-[var(--agent-muted-foreground,#9ca3af)]">·</span>
+                <span className="text-rose-500">规划失败</span>
+              </div>
+              {failure && (
+                <div className="mt-1 break-words leading-relaxed text-[var(--agent-muted-foreground,#6b7280)]">
+                  {failure}
+                </div>
+              )}
+            </div>
+          </div>
+          {belowHeader}
+        </div>
+      </div>
+    );
+  }
+
+  // ---------------- default ready shell ----------------
+  const tasks = payload.tasks ?? [];
+
+  const counts = React.useMemo(() => {
+    const c = { running: 0, ok: 0, failed: 0, paused: 0, total: tasks.length };
+    for (const t of tasks) {
+      const s = (taskStatuses?.[t.id] ?? 'pending') as OrchestrationTaskStatus;
+      if (s === 'running') c.running += 1;
+      else if (s === 'ok') c.ok += 1;
+      else if (s === 'failed') c.failed += 1;
+      else if (s === 'ask_user_paused') c.paused += 1;
+    }
+    return c;
+  }, [tasks, taskStatuses]);
+
+  return (
+    <div
+      className={[
+        'steerable-orchestration-plan',
+        className,
+      ].filter(Boolean).join(' ')}
+    >
+      {above}
+      <div className="rounded-lg border border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-card-bg,#fff)] text-sm shadow-sm">
+        <button
+          type="button"
+          onClick={() => setExpanded(!expanded)}
+          className="flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-xs text-[var(--agent-muted-foreground,#6b7280)] transition-all duration-200 hover:text-[var(--agent-foreground,#111827)]"
+        >
+          <span className="flex min-w-0 items-center gap-2">
+            {expanded ? <ChevronDownIcon size={14} /> : <ChevronRightIcon size={14} />}
+            <GitBranchIcon size={14} className="shrink-0" />
+            <span className="inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap">
+              {headerLabel ?? (
+                <span className="font-medium text-[var(--agent-foreground,#111827)]">编排计划</span>
+              )}
+              {headerSecondary !== undefined ? (
+                <>
+                  <span className="text-[var(--agent-muted-foreground,#9ca3af)]">·</span>
+                  <span>{headerSecondary}</span>
+                </>
+              ) : (
+                <>
+                  <span className="text-[var(--agent-muted-foreground,#9ca3af)]">·</span>
+                  <span>{tasks.length} 个子任务</span>
+                </>
+              )}
+              {!hideMode && payload.mode && (
+                <span className="ml-1 rounded-full bg-[var(--agent-muted,#f3f4f6)] px-2 py-0.5 text-[10px] uppercase tracking-wider text-[var(--agent-muted-foreground,#6b7280)]">
+                  {payload.mode}
+                </span>
+              )}
+            </span>
+            {payload.rationale && !expanded && (
+              <span className="min-w-0 flex-1 truncate text-[var(--agent-muted-foreground,#9ca3af)]">
+                {payload.rationale}
+              </span>
+            )}
+          </span>
+          {!hideHeaderCounts && (
+            <span className="flex shrink-0 items-center gap-2">
+              {counts.running > 0 && (
+                <span className="flex items-center gap-1">
+                  <LoaderIcon size={12} className="text-amber-500" /> {counts.running}
+                </span>
+              )}
+              {counts.failed > 0 && (
+                <span className="flex items-center gap-1 text-rose-600">
+                  <AlertIcon size={12} /> {counts.failed}
+                </span>
+              )}
+              <span>
+                {counts.ok}/{counts.total}
+              </span>
+            </span>
+          )}
+        </button>
+
+        {belowHeader}
+
+        {expanded && (
+          <div className="px-3 pb-3">
+            {payload.rationale && (
+              <p className="pb-2 text-xs leading-relaxed text-[var(--agent-muted-foreground,#6b7280)]">
+                {payload.rationale}
+              </p>
+            )}
+            <ul className="space-y-1.5">
+              {tasks.map((t) => {
+                const status = (taskStatuses?.[t.id] ?? 'pending') as OrchestrationTaskStatus;
+                if (renderTaskRow) {
+                  return (
+                    <React.Fragment key={t.id}>
+                      {asReactNode(renderTaskRow(t, status))}
+                    </React.Fragment>
+                  );
+                }
+                return (
+                  <li key={t.id} className="flex items-start gap-2 text-sm">
+                    <span
+                      className={`mt-1.5 h-2 w-2 flex-shrink-0 rounded-full ${DOT_CLASS[status]}`}
+                      aria-hidden
+                    />
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <span className="font-medium text-[var(--agent-foreground,#111827)]">
+                          {agentNameFor ? agentNameFor(t.agentId) : t.agentId}
+                        </span>
+                        <span className="text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+                          {STATUS_LABEL[status]}
+                        </span>
+                      </div>
+                      {t.prompt && (
+                        <p className="mt-0.5 line-clamp-2 text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+                          {t.prompt}
+                        </p>
+                      )}
+                      {(t.dependsOn?.length ?? 0) > 0 && (
+                        <p className="mt-0.5 text-[10px] uppercase tracking-wider text-[var(--agent-muted-foreground,#9ca3af)]">
+                          依赖：{t.dependsOn!.join(', ')}
+                        </p>
+                      )}
+                    </div>
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { STATUS_LABEL as ORCHESTRATION_STATUS_LABEL, DOT_CLASS as ORCHESTRATION_DOT_CLASS };
+
+export default OrchestrationPlanCard;

package/src/cards/PlanSelectorCard.tsx

@@ -0,0 +1,312 @@
+/**
+ * `<PlanSelectorCard />`
+ *
+ * Two-to-four candidate plans with effort / risk metrics and pros/cons.
+ *
+ * Calls `onSelect(planId)` once the user picks one. If `payload.selectedPlan`
+ * is filled in by the backend the card switches to read-only mode and
+ * highlights the chosen plan.
+ *
+ * Behaviour switches:
+ *  - `expandableDetails` (default `false`): when on, only the plan summary +
+ *    metrics + select button are visible by default; approach / pros / cons
+ *    sit behind a "查看详情" toggle.
+ *
+ * Slots:
+ *  - `renderHeader(plansCount)` -- replace the "候选方案 / 为你准备了 N 个方案"
+ *    label area.
+ *  - `renderBottomHint({ submitted })` -- swap the hint shown below the list.
+ *  - `existingGoalPrefix`, `newGoalPrefix` -- localise goal-attribution
+ *    phrasing.
+ */
+import * as React from 'react';
+import type { PlanSelectorPayload } from '@steerable/agent-protocol';
+import {
+  ClockIcon,
+  FlameIcon,
+  ShieldIcon,
+  CheckIcon,
+  TargetIcon,
+  AlertIcon,
+  ThumbsUpIcon,
+  LoaderIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from './icons.js';
+import { asReactNode, type RenderSlotResult } from './types.js';
+
+type Level = 'low' | 'medium' | 'high';
+
+const EFFORT_CONFIG: Record<Level, { label: string; text: string; bg: string }> = {
+  low: {
+    label: '低投入',
+    text: 'text-green-600 dark:text-green-400',
+    bg: 'bg-green-50 dark:bg-green-950/30',
+  },
+  medium: {
+    label: '中投入',
+    text: 'text-amber-600 dark:text-amber-400',
+    bg: 'bg-amber-50 dark:bg-amber-950/30',
+  },
+  high: {
+    label: '高投入',
+    text: 'text-red-600 dark:text-red-400',
+    bg: 'bg-red-50 dark:bg-red-950/30',
+  },
+};
+const RISK_CONFIG: Record<Level, { label: string; text: string; bg: string }> = {
+  low: {
+    label: '低风险',
+    text: 'text-green-600 dark:text-green-400',
+    bg: 'bg-green-50 dark:bg-green-950/30',
+  },
+  medium: {
+    label: '中风险',
+    text: 'text-amber-600 dark:text-amber-400',
+    bg: 'bg-amber-50 dark:bg-amber-950/30',
+  },
+  high: {
+    label: '高风险',
+    text: 'text-red-600 dark:text-red-400',
+    bg: 'bg-red-50 dark:bg-red-950/30',
+  },
+};
+
+export interface PlanSelectorCardProps {
+  payload: PlanSelectorPayload;
+  isComplete?: boolean;
+  onSelect?: (planId: string) => void;
+  className?: string;
+  expandableDetails?: boolean;
+  existingGoalPrefix?: string;
+  newGoalPrefix?: string;
+  renderHeader?: (plansCount: number) => RenderSlotResult;
+  renderBottomHint?: (args: { submitted: boolean }) => RenderSlotResult;
+}
+
+export const PlanSelectorCard: React.FC<PlanSelectorCardProps> = ({
+  payload,
+  isComplete,
+  onSelect,
+  className,
+  expandableDetails = false,
+  existingGoalPrefix = '归属目标：',
+  newGoalPrefix = '新目标：',
+  renderHeader,
+  renderBottomHint,
+}) => {
+  const isReadOnly = Boolean(isComplete || payload.selectedPlan);
+  const plans = payload.plans ?? [];
+  const [submittingFor, setSubmittingFor] = React.useState<string | null>(null);
+  const [expandedId, setExpandedId] = React.useState<string | null>(null);
+
+  const goalLabel = (() => {
+    const g = payload.goalAttribution;
+    if (!g) return null;
+    if (g.type === 'existing') return `${existingGoalPrefix}${g.existingGoalTitle ?? ''}`;
+    return `${newGoalPrefix}${g.newGoalTitle ?? ''}`;
+  })();
+
+  const handleSelect = (planId: string) => {
+    if (!onSelect || isReadOnly) return;
+    setSubmittingFor(planId);
+    try {
+      onSelect(planId);
+    } finally {
+      setSubmittingFor(null);
+    }
+  };
+
+  return (
+    <div
+      className={[
+        'steerable-plan-selector rounded-lg border border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-card-bg,#fff)] text-sm text-[var(--agent-foreground,#111827)]',
+        className,
+      ].filter(Boolean).join(' ')}
+    >
+      <div className="space-y-3 p-3">
+        {renderHeader ? (
+          <div>{asReactNode(renderHeader(plans.length))}</div>
+        ) : (
+          <div className="flex items-center gap-2">
+            <TargetIcon size={14} className="text-blue-500" />
+            <span className="text-sm font-medium">候选方案</span>
+            {goalLabel && (
+              <span className="text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+                · {goalLabel}
+              </span>
+            )}
+          </div>
+        )}
+        {renderHeader && goalLabel && (
+          <p className="text-xs text-[var(--agent-muted-foreground,#6b7280)]">{goalLabel}</p>
+        )}
+
+        <div className="space-y-2">
+          {plans.map((p) => {
+            const isSelected = payload.selectedPlan === p.id;
+            const effort = EFFORT_CONFIG[p.metrics?.effortLevel || 'medium'];
+            const risk = RISK_CONFIG[p.metrics?.riskLevel || 'medium'];
+            const isExpanded = expandableDetails ? expandedId === p.id : true;
+
+            return (
+              <div
+                key={p.id}
+                className={[
+                  'rounded-lg border transition-all duration-200',
+                  isSelected
+                    ? 'border-blue-400 dark:border-blue-600 bg-blue-50/50 dark:bg-blue-950/20 ring-1 ring-blue-200 dark:ring-blue-800'
+                    : 'border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-background,#fff)] hover:border-[var(--agent-border,#e5e7eb)]/80',
+                  isReadOnly && !isSelected ? 'opacity-50' : '',
+                ].filter(Boolean).join(' ')}
+              >
+                <div className="p-3">
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="min-w-0 flex-1">
+                      <div className="flex items-center gap-2">
+                        <h4 className="truncate text-sm font-medium">{p.name}</h4>
+                        {isSelected && (
+                          <span className="inline-flex items-center gap-0.5 rounded-full bg-blue-100 px-1.5 py-0.5 text-[10px] font-medium text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
+                            <CheckIcon size={10} /> 已选择
+                          </span>
+                        )}
+                      </div>
+                      <p className="mt-1 text-xs leading-relaxed text-[var(--agent-muted-foreground,#6b7280)]">
+                        {p.summary}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="mt-2 flex flex-wrap items-center gap-2">
+                    {p.metrics?.duration && (
+                      <span className="inline-flex items-center gap-1 rounded-full bg-[var(--agent-muted,#f3f4f6)] px-2 py-0.5 text-[10px] font-medium text-[var(--agent-muted-foreground,#6b7280)]">
+                        <ClockIcon size={11} />
+                        {p.metrics.duration}
+                      </span>
+                    )}
+                    <span
+                      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium ${effort.bg} ${effort.text}`}
+                    >
+                      <FlameIcon size={11} />
+                      {effort.label}
+                    </span>
+                    <span
+                      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-medium ${risk.bg} ${risk.text}`}
+                    >
+                      <ShieldIcon size={11} />
+                      {risk.label}
+                    </span>
+                  </div>
+
+                  <div className="mt-2 flex items-center justify-between">
+                    {expandableDetails ? (
+                      <button
+                        type="button"
+                        onClick={() => setExpandedId(isExpanded ? null : p.id)}
+                        className="inline-flex items-center gap-1 text-[11px] text-[var(--agent-muted-foreground,#6b7280)] transition-colors duration-200 hover:text-[var(--agent-foreground,#111827)]"
+                      >
+                        {isExpanded ? (
+                          <>
+                            <ChevronUpIcon size={11} /> 收起详情
+                          </>
+                        ) : (
+                          <>
+                            <ChevronDownIcon size={11} /> 查看详情
+                          </>
+                        )}
+                      </button>
+                    ) : (
+                      <span />
+                    )}
+
+                    {!isReadOnly && onSelect && (
+                      <button
+                        type="button"
+                        onClick={() => handleSelect(p.id)}
+                        disabled={submittingFor !== null}
+                        className="inline-flex items-center gap-1 rounded-full bg-[var(--agent-primary,#18181b)] px-3 py-1 text-xs font-medium text-[var(--agent-primary-foreground,#fff)] shadow-sm transition-all duration-200 hover:opacity-90 disabled:opacity-50"
+                      >
+                        {submittingFor === p.id && <LoaderIcon size={10} />}
+                        选择此方案
+                      </button>
+                    )}
+                  </div>
+                </div>
+
+                {isExpanded && (
+                  <div className="space-y-2 border-t border-[var(--agent-border,#e5e7eb)]/50 px-3 pb-3 pt-2">
+                    {p.approach && (
+                      <p className="text-xs leading-relaxed">{p.approach}</p>
+                    )}
+                    <div className="grid grid-cols-2 gap-2">
+                      {(p.pros?.length ?? 0) > 0 && (
+                        <div className="space-y-1">
+                          <div className="flex items-center gap-1 text-[10px] font-medium text-green-600 dark:text-green-400">
+                            <ThumbsUpIcon size={11} />
+                            优势
+                          </div>
+                          {p.pros!.map((pro, i) => (
+                            <p
+                              key={`pro-${i}`}
+                              className="pl-4 text-[11px] text-[var(--agent-muted-foreground,#6b7280)]"
+                            >
+                              {pro}
+                            </p>
+                          ))}
+                        </div>
+                      )}
+                      {(p.cons?.length ?? 0) > 0 && (
+                        <div className="space-y-1">
+                          <div className="flex items-center gap-1 text-[10px] font-medium text-amber-600 dark:text-amber-400">
+                            <AlertIcon size={11} />
+                            注意
+                          </div>
+                          {p.cons!.map((con, i) => (
+                            <p
+                              key={`con-${i}`}
+                              className="pl-4 text-[11px] text-[var(--agent-muted-foreground,#6b7280)]"
+                            >
+                              {con}
+                            </p>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                    {p.bestFor && (
+                      <p className="text-[11px] italic text-[var(--agent-muted-foreground,#6b7280)]">
+                        适合：{p.bestFor}
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+
+        {payload.comparison && (
+          <p className="text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+            {payload.comparison}
+          </p>
+        )}
+
+        <div className="flex items-center justify-between pt-1">
+          {renderBottomHint
+            ? asReactNode(renderBottomHint({ submitted: isReadOnly }))
+            : !isReadOnly
+              ? <span className="text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+                  点击选择方案
+                </span>
+              : <div className="flex items-center gap-1.5">
+                  <CheckIcon size={12} className="text-blue-500" />
+                  <span className="text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+                    方案已选择
+                  </span>
+                </div>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PlanSelectorCard;

package/src/cards/PlanStepsCard.tsx

@@ -0,0 +1,52 @@
+/**
+ * `<PlanStepsCard />`
+ *
+ * Compact horizontal checklist of skill names: `step1 / step2 / step3`. Used
+ * to show what the agent intends to do this turn. Pure render off
+ * `PlanStepsPayload`; the parent passes `isStreaming` if it wants the pulsing
+ * cursor dot at the end.
+ */
+import * as React from 'react';
+import type { PlanStepsPayload } from '@steerable/agent-protocol';
+import { ListChecksIcon } from './icons.js';
+
+export interface PlanStepsCardProps {
+  payload: PlanStepsPayload;
+  isStreaming?: boolean;
+  className?: string;
+}
+
+export const PlanStepsCard: React.FC<PlanStepsCardProps> = ({ payload, isStreaming, className }) => {
+  const steps = payload.steps ?? [];
+  if (steps.length === 0 && !isStreaming) return null;
+
+  return (
+    <div
+      className={[
+        'steerable-plan-steps flex items-start gap-2 rounded-lg border px-3 py-2 transition-all duration-200',
+        isStreaming
+          ? 'border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-card-bg,#f9fafb)] shadow-sm'
+          : 'border-[var(--agent-border,#e5e7eb)] bg-[var(--agent-muted,#f3f4f6)]',
+        className,
+      ].filter(Boolean).join(' ')}
+    >
+      <ListChecksIcon size={14} className="mt-0.5 flex-shrink-0 text-[var(--agent-muted-foreground,#6b7280)]" />
+      <div className="flex flex-wrap items-center gap-1 text-xs text-[var(--agent-muted-foreground,#6b7280)]">
+        {steps.map((step, idx) => (
+          <React.Fragment key={`${idx}-${step}`}>
+            {idx > 0 && <span aria-hidden className="select-none opacity-40">/</span>}
+            <span className="whitespace-nowrap">{step}</span>
+          </React.Fragment>
+        ))}
+        {isStreaming && (
+          <span
+            aria-hidden
+            className="ml-1 inline-block h-1.5 w-1.5 translate-y-[1px] animate-pulse rounded-full bg-current"
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PlanStepsCard;