@steerable/agent-shell-web 0.6.15

package/src/components/chat/ModelPicker.tsx

@@ -0,0 +1,289 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { LuChevronDown, LuRefreshCw } from 'react-icons/lu';
+import { ModelCapabilityChips } from '@/components/settings/ModelCapabilityChips';
+import {
+  getLlmModels,
+  getLlmSettings,
+  type GatewayModelCatalog,
+  type GatewayModelEntry,
+} from '@/lib/local-api';
+
+/**
+ * ModelPicker — 聊天输入框的模型/档位选择器。
+ *
+ * 数据源是网关活目录（`GET /api/v2/llm/models` → sidecar `models.list`）：
+ * 网关真正接受的 id，经 models.dev 能力表 join 出 reasoning 档位。目录
+ * 只做发现、不做路由白名单——设置里的模型即使不在目录里也照常显示、
+ * 照常可发（capabilities: 'unknown' 只是没有档位可选）。
+ *
+ * 目录状态按载荷如实披露：live 不标；stale 标「缓存」；offline 标
+ * 「目录不可用」（此时选择器仍可用，只是没有目录行）。
+ *
+ * 选择语义：model 为 null = 跟随全局设置（LocalLlmSettingsModal）；
+ * effort 为 null = 自动（厂商预制/服务端默认）。显式选择的档位随每轮
+ * 请求下发，sidecar 严格校验——模型不支持的档位在流启动时就报错，
+ * 不会静默丢弃。
+ */
+
+export interface ModelPickerProps {
+  /** 当前每轮覆盖的模型；null = 跟随全局设置。 */
+  model: string | null;
+  /** 当前每轮 reasoning 档位；null = 自动。 */
+  reasoningEffort: string | null;
+  onSelectModel: (model: string | null) => void;
+  onSelectEffort: (effort: string | null) => void;
+  disabled?: boolean;
+}
+
+export function ModelPicker({
+  model,
+  reasoningEffort,
+  onSelectModel,
+  onSelectEffort,
+  disabled = false,
+}: ModelPickerProps) {
+  const [catalog, setCatalog] = useState<GatewayModelCatalog | null>(null);
+  const [settingsModel, setSettingsModel] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+  const [modelMenuOpen, setModelMenuOpen] = useState(false);
+  const [effortMenuOpen, setEffortMenuOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  const refresh = useCallback(async () => {
+    setLoading(true);
+    try {
+      const [modelsResult, settingsResult] = await Promise.all([
+        getLlmModels(),
+        getLlmSettings(),
+      ]);
+      setCatalog(modelsResult);
+      setSettingsModel(settingsResult.model);
+    } catch {
+      // 桥不可达（浏览器预览等）：视同目录不可用，选择器退化为纯展示。
+      setCatalog({ models: [], catalogStatus: 'offline' });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  // 点击组件外部时收起两个弹层。
+  useEffect(() => {
+    if (!modelMenuOpen && !effortMenuOpen) return;
+    const onPointerDown = (event: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) {
+        setModelMenuOpen(false);
+        setEffortMenuOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onPointerDown);
+    return () => document.removeEventListener('mousedown', onPointerDown);
+  }, [modelMenuOpen, effortMenuOpen]);
+
+  const effectiveModel = model ?? settingsModel;
+  const selectedEntry: GatewayModelEntry | undefined = useMemo(
+    () => catalog?.models.find((entry) => entry.id === effectiveModel),
+    [catalog, effectiveModel],
+  );
+  const reasoningLevels = selectedEntry?.reasoningLevels ?? [];
+
+  const status = catalog?.catalogStatus ?? 'offline';
+  const statusBadge =
+    status === 'offline' ? (
+      <span className="inline-flex items-center gap-1 rounded-full border border-amber-400/50 bg-amber-400/10 px-1.5 py-0.5 text-[10px] text-amber-700 dark:text-amber-300">
+        目录不可用
+      </span>
+    ) : status === 'stale' ? (
+      <span className="inline-flex items-center gap-1 rounded-full border border-agent-border bg-agent-muted px-1.5 py-0.5 text-[10px] text-agent-muted-foreground">
+        缓存
+      </span>
+    ) : null;
+
+  return (
+    <div ref={rootRef} className="flex min-w-0 items-center gap-1">
+      <div className="relative">
+        <button
+          type="button"
+          onClick={() => {
+            const next = !modelMenuOpen;
+            setModelMenuOpen(next);
+            setEffortMenuOpen(false);
+            // 打开时若目录不可用/还没拉到，重试一次（网关可能刚恢复）。
+            if (next && status !== 'live' && !loading) void refresh();
+          }}
+          disabled={disabled}
+          className="inline-flex h-7 max-w-[160px] items-center gap-1.5 rounded-full border border-agent-border bg-agent-canvas px-2 text-xs text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70 @sm:max-w-[220px]"
+          title={
+            status === 'offline'
+              ? `模型目录不可用${catalog?.error ? `：${catalog.error}` : ''}（仍可手动指定模型）`
+              : `当前模型：${effectiveModel || '未配置'}`
+          }
+          aria-haspopup="menu"
+          aria-expanded={modelMenuOpen}
+        >
+          <span className="truncate">{effectiveModel || '选择模型'}</span>
+          {model != null && (
+            <span className="inline-flex shrink-0 items-center rounded bg-agent-foreground/10 px-1 py-0.5 text-[9px] font-medium text-agent-foreground">
+              本会话
+            </span>
+          )}
+          <LuChevronDown className="h-3 w-3 shrink-0 text-agent-muted-foreground" />
+        </button>
+
+        {modelMenuOpen && (
+          <div
+            role="menu"
+            className="absolute bottom-full left-0 z-50 mb-1 max-h-72 w-80 overflow-y-auto rounded-agent-md border border-agent-border bg-agent-canvas p-1 shadow-lg"
+          >
+            <div className="flex items-center justify-between gap-2 px-2 py-1">
+              <span className="text-[10px] font-semibold uppercase tracking-wider text-agent-muted-foreground">
+                模型（网关目录）
+              </span>
+              <span className="flex items-center gap-1">
+                {statusBadge}
+                <button
+                  type="button"
+                  onClick={() => void refresh()}
+                  className="flex h-4 w-4 items-center justify-center rounded text-agent-muted-foreground transition-colors hover:text-agent-foreground"
+                  title="刷新目录"
+                  aria-label="刷新目录"
+                >
+                  <LuRefreshCw className={`h-3 w-3 ${loading ? 'animate-spin' : ''}`} />
+                </button>
+              </span>
+            </div>
+            <button
+              type="button"
+              role="menuitem"
+              onClick={() => {
+                onSelectModel(null);
+                setModelMenuOpen(false);
+              }}
+              className={[
+                'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors',
+                model == null
+                  ? 'bg-agent-foreground/10 text-agent-foreground'
+                  : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
+              ].join(' ')}
+            >
+              <span className="min-w-0 flex-1 truncate">
+                跟随设置{settingsModel ? `（${settingsModel}）` : ''}
+              </span>
+            </button>
+            {catalog?.models.map((entry) => {
+              const isActive = entry.id === effectiveModel && model != null;
+              const displayName =
+                entry.name && entry.name !== entry.id ? entry.name : null;
+              return (
+                <button
+                  key={entry.id}
+                  type="button"
+                  role="menuitem"
+                  onClick={() => {
+                    onSelectModel(entry.id);
+                    // 换模型后旧档位未必支持：清掉让 sidecar 按新模型的
+                    // 目录校验，而不是把旧档位硬发给新模型。
+                    onSelectEffort(null);
+                    setModelMenuOpen(false);
+                  }}
+                  className={[
+                    'flex w-full items-center gap-2 rounded px-2 py-1.5 text-left text-xs transition-colors',
+                    isActive
+                      ? 'bg-agent-foreground/10 text-agent-foreground'
+                      : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
+                  ].join(' ')}
+                >
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate font-medium">{entry.id}</span>
+                    {(displayName || entry.capabilities) && (
+                      <span className="mt-0.5 flex min-w-0 flex-wrap items-center gap-1">
+                        {displayName ? (
+                          <span className="truncate text-[10px] text-agent-muted-foreground">
+                            {displayName}
+                          </span>
+                        ) : null}
+                        <ModelCapabilityChips entry={entry} />
+                      </span>
+                    )}
+                  </span>
+                </button>
+              );
+            })}
+            {catalog != null && catalog.models.length === 0 && (
+              <div className="px-2 py-2 text-[11px] text-agent-muted-foreground">
+                目录为空——{status === 'offline' ? '网关不可达，仍按设置里的模型发送' : '网关未报告任何模型'}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {reasoningLevels.length > 0 && (
+        <div className="relative">
+          <button
+            type="button"
+            onClick={() => {
+              setEffortMenuOpen(!effortMenuOpen);
+              setModelMenuOpen(false);
+            }}
+            disabled={disabled}
+            className="inline-flex h-7 items-center gap-1 rounded-full border border-agent-border bg-agent-canvas px-2 text-xs text-agent-foreground transition-colors hover:bg-agent-foreground/5 disabled:cursor-not-allowed disabled:opacity-70"
+            title="推理档位（随每轮请求下发；模型不支持会直接报错）"
+            aria-haspopup="menu"
+            aria-expanded={effortMenuOpen}
+          >
+            <span className="truncate">{reasoningEffort ?? '自动'}</span>
+            <LuChevronDown className="h-3 w-3 shrink-0 text-agent-muted-foreground" />
+          </button>
+          {effortMenuOpen && (
+            <div
+              role="menu"
+              className="absolute bottom-full left-0 z-50 mb-1 w-36 overflow-y-auto rounded-agent-md border border-agent-border bg-agent-canvas p-1 shadow-lg"
+            >
+              <button
+                type="button"
+                role="menuitem"
+                onClick={() => {
+                  onSelectEffort(null);
+                  setEffortMenuOpen(false);
+                }}
+                className={[
+                  'flex w-full rounded px-2 py-1.5 text-left text-xs transition-colors',
+                  reasoningEffort == null
+                    ? 'bg-agent-foreground/10 text-agent-foreground'
+                    : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
+                ].join(' ')}
+              >
+                自动
+              </button>
+              {reasoningLevels.map((level) => (
+                <button
+                  key={level}
+                  type="button"
+                  role="menuitem"
+                  onClick={() => {
+                    onSelectEffort(level);
+                    setEffortMenuOpen(false);
+                  }}
+                  className={[
+                    'flex w-full rounded px-2 py-1.5 text-left text-xs transition-colors',
+                    reasoningEffort === level
+                      ? 'bg-agent-foreground/10 text-agent-foreground'
+                      : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground',
+                  ].join(' ')}
+                >
+                  {level}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ModelPicker;

package/src/components/chat/OrchestrationChildrenCard.tsx

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { OrchestrationPlanCard } from '@steerable/agent-ui/cards';
+import {
+  childrenToCardModel,
+  type ChildInfo,
+} from './orchestration-children-model';
+
+/**
+ * OrchestrationChildrenCard — the desktop surface of the framework's P3.1
+ * multi-agent orchestration. Adapts the live `ChildInfo` list (accumulated
+ * from `orchestration_child` SSE events) onto the framework's
+ * `OrchestrationPlanCard`: one row per child, status dot per row. The card
+ * payload is synthesized from spawn events, so there is no separate "plan"
+ * step: the plan IS the set of spawned children.
+ *
+ * The mapping logic lives in `./orchestration-children-model` (pure,
+ * runtime-dependency-free) so node-side tests do not pull the agent-ui
+ * dist build.
+ */
+
+export type { ChildInfo } from './orchestration-children-model';
+
+export function OrchestrationChildrenCard({ children }: { children: ChildInfo[] }) {
+  const { payload, taskStatuses } = useMemo(
+    () => childrenToCardModel(children),
+    [children],
+  );
+
+  if (children.length === 0) return null;
+  return (
+    <OrchestrationPlanCard
+      payload={payload}
+      taskStatuses={taskStatuses}
+      agentNameFor={(id) => id}
+      defaultExpanded
+    />
+  );
+}
+
+export default OrchestrationChildrenCard;

package/src/components/chat/PlanTodoList.tsx

@@ -0,0 +1,121 @@
+import { LuCircle, LuCircleCheck, LuListChecks } from 'react-icons/lu';
+
+/**
+ * PlanTodoList — renders the ```plan fenced block that the plan-mode skill
+ * instructs the model to emit, as a visual todolist card instead of a raw
+ * code block.
+ *
+ * Expected fence content (see src/local-backend/skills/70-plan-mode):
+ *
+ *   # 一句话计划标题
+ *   - [ ] 第一步……
+ *   - [x] 已完成的步骤（执行回顾时可能出现）
+ *
+ * The parser is intentionally forgiving: numbered lists (`1. …`), plain
+ * dashes (`- …`) and bare `[ ] …` lines all count as steps, so a slightly
+ * off-spec local model still gets a proper todolist instead of a wall of
+ * monospace text. Unclosed fences during streaming parse the same way, so
+ * steps appear progressively as tokens arrive.
+ */
+
+interface PlanItem {
+  text: string;
+  done: boolean;
+}
+
+interface ParsedPlan {
+  title: string | null;
+  items: PlanItem[];
+  notes: string[];
+}
+
+const CHECKBOX_RE = /^(?:[-*]\s*)?\[([ xX])\]\s*(.*)$/;
+const BULLET_RE = /^[-*]\s+(.*)$/;
+const NUMBERED_RE = /^\d+[.、)]\s*(.*)$/;
+
+export function parsePlanContent(raw: string): ParsedPlan {
+  const plan: ParsedPlan = { title: null, items: [], notes: [] };
+  for (const line of raw.split('\n')) {
+    const trimmed = line.trim();
+    if (!trimmed) continue;
+
+    if (trimmed.startsWith('#')) {
+      const title = trimmed.replace(/^#+\s*/, '');
+      if (title && plan.title === null) plan.title = title;
+      continue;
+    }
+
+    const checkbox = trimmed.match(CHECKBOX_RE);
+    if (checkbox) {
+      const text = checkbox[2].trim();
+      if (text) plan.items.push({ text, done: checkbox[1] !== ' ' });
+      continue;
+    }
+
+    const bullet = trimmed.match(BULLET_RE) ?? trimmed.match(NUMBERED_RE);
+    if (bullet) {
+      const text = bullet[1].trim();
+      if (text) plan.items.push({ text, done: false });
+      continue;
+    }
+
+    plan.notes.push(trimmed);
+  }
+  return plan;
+}
+
+export function PlanTodoList({ content }: { content: string }) {
+  const { title, items, notes } = parsePlanContent(content);
+
+  return (
+    <div
+      className="my-2 overflow-hidden rounded-agent-lg border border-amber-400/50 bg-amber-400/5 not-italic dark:border-amber-500/30"
+      data-testid="plan-todo-list"
+    >
+      <div className="flex items-center gap-2 border-b border-amber-400/30 bg-amber-400/10 px-3 py-2 dark:border-amber-500/20">
+        <LuListChecks className="h-4 w-4 shrink-0 text-amber-600 dark:text-amber-400" />
+        <span className="flex-1 truncate text-[13px] font-semibold text-amber-800 dark:text-amber-200">
+          {title || '执行计划'}
+        </span>
+        {items.length > 0 && (
+          <span className="shrink-0 rounded-full bg-amber-400/20 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 dark:text-amber-300">
+            {items.filter((i) => i.done).length}/{items.length}
+          </span>
+        )}
+      </div>
+      {items.length > 0 && (
+        <ol className="m-0 list-none space-y-1 px-3 py-2">
+          {items.map((item, idx) => (
+            <li key={idx} className="flex items-start gap-2 text-[13px] leading-relaxed">
+              {item.done ? (
+                <LuCircleCheck className="mt-[3px] h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400" />
+              ) : (
+                <LuCircle className="mt-[3px] h-3.5 w-3.5 shrink-0 text-amber-500/60" />
+              )}
+              <span
+                className={
+                  item.done
+                    ? 'text-agent-muted-foreground line-through'
+                    : 'text-agent-foreground'
+                }
+              >
+                {item.text}
+              </span>
+            </li>
+          ))}
+        </ol>
+      )}
+      {notes.length > 0 && (
+        <div className="border-t border-amber-400/20 px-3 py-1.5 text-[12px] text-agent-muted-foreground">
+          {notes.map((note, idx) => (
+            <p key={idx} className="my-0.5">
+              {note}
+            </p>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default PlanTodoList;

package/src/components/chat/ProjectTrustBanner.tsx

@@ -0,0 +1,91 @@
+/**
+ * W6-5 项目信任门控的 UI 入口。
+ *
+ * 项目目录里的 `AGENTS.md` / `CLAUDE.md` 等规则文件是「项目作者写给 agent
+ * 的指令」，属于不可信输入——打开恶意仓库时一段构造的规则就能劫持 agent。
+ * 因此规则文件只在用户显式信任该项目后才注入模型上下文。本横幅在「会话绑定
+ * 了项目、项目里有规则文件、但尚未信任」时提示用户授权；已信任时提供一个
+ * 低调的「撤销」入口。信任状态持久化在后端（agent-projects.json）。
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { LuShieldAlert, LuShieldCheck } from 'react-icons/lu';
+import type { LocalProject } from '@/lib/local-api';
+import { getChatProjectContext, setProjectTrusted } from '@/lib/local-api';
+
+export interface ProjectTrustBannerProps {
+  chatId: string;
+  project: LocalProject | null;
+  /** 信任状态变化后回调（重新拉项目列表，让徽章/设置同步）。 */
+  onTrustChanged?: () => void;
+}
+
+export function ProjectTrustBanner({ chatId, project, onTrustChanged }: ProjectTrustBannerProps) {
+  const [ruleFileCount, setRuleFileCount] = useState(0);
+  const [busy, setBusy] = useState(false);
+
+  const refresh = useCallback(async () => {
+    try {
+      const res = await getChatProjectContext(chatId);
+      setRuleFileCount(res.ruleFileCount ?? 0);
+    } catch {
+      setRuleFileCount(0);
+    }
+  }, [chatId]);
+
+  useEffect(() => {
+    setRuleFileCount(0);
+    if (project) void refresh();
+  }, [project, refresh]);
+
+  if (!project || ruleFileCount === 0) return null;
+  const trusted = project.trusted === true;
+
+  const toggle = async () => {
+    setBusy(true);
+    try {
+      await setProjectTrusted(project.id, !trusted);
+      onTrustChanged?.();
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!trusted) {
+    return (
+      <div className="mx-3 mb-1 flex items-center justify-between gap-3 rounded-agent-md border border-sky-400/40 bg-sky-400/10 px-3 py-2 text-xs">
+        <div className="flex items-center gap-2 text-sky-700 dark:text-sky-300">
+          <LuShieldAlert className="h-4 w-4 shrink-0" />
+          <span>
+            项目「{project.name}」包含 {ruleFileCount} 个规则文件（AGENTS.md / CLAUDE.md）。
+            信任前这些项目方指令<strong>不会</strong>注入模型。
+          </span>
+        </div>
+        <button
+          type="button"
+          disabled={busy}
+          onClick={() => void toggle()}
+          className="inline-flex shrink-0 items-center gap-1 rounded-full bg-agent-foreground px-3 py-1 font-medium text-agent-canvas transition hover:opacity-90 disabled:opacity-50"
+        >
+          信任并加载
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mx-3 mb-1 flex items-center justify-between gap-3 rounded-agent-md border border-agent-border bg-agent-muted/30 px-3 py-1.5 text-[11px] text-agent-muted-foreground">
+      <div className="flex items-center gap-1.5">
+        <LuShieldCheck className="h-3.5 w-3.5 shrink-0 text-emerald-500" />
+        <span>已加载项目「{project.name}」的 {ruleFileCount} 个规则文件</span>
+      </div>
+      <button
+        type="button"
+        disabled={busy}
+        onClick={() => void toggle()}
+        className="shrink-0 rounded px-1.5 py-0.5 transition-colors hover:text-agent-destructive disabled:opacity-50"
+      >
+        撤销信任
+      </button>
+    </div>
+  );
+}