@yuangc/paseo-plugin-workspace-overview 0.0.0-stage → 1.0.0

package/client/components/AgentConversationTimeline.tsx

@@ -0,0 +1,177 @@
+import React, { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, AppState, AppStateStatus, Pressable, ScrollView, Text, View } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import type { AgentTimelineEntry } from "./agent-conversation-types";
+import { PaseoTimelineItem } from "./PaseoTimelineItem";
+import { PaseoToolCallGroup } from "./PaseoToolCallGroup";
+import { AgentPermissionCard } from "./AgentQuestionCard";
+import type { AgentCapabilityFlags, AgentPermissionRequest, AgentPermissionResponse } from "@getpaseo/protocol/agent-types";
+
+type TimelineBlock =
+  | { kind: "entry"; entry: AgentTimelineEntry }
+  | { kind: "tools"; entries: AgentTimelineEntry[] };
+
+function timelineBlocks(entries: AgentTimelineEntry[]): TimelineBlock[] {
+  const blocks: TimelineBlock[] = [];
+  let tools: AgentTimelineEntry[] = [];
+  const flushTools = () => {
+    if (tools.length) blocks.push({ kind: "tools", entries: tools });
+    tools = [];
+  };
+  for (const entry of entries) {
+    const name = String(entry.item.name ?? "").toLowerCase();
+    const groupable = entry.item.type === "tool_call" && name !== "speak" && entry.item.detail?.type !== "plan";
+    if (groupable) tools.push(entry);
+    else { flushTools(); blocks.push({ kind: "entry", entry }); }
+  }
+  flushTools();
+  return blocks;
+}
+
+function assistantTiming(entries: AgentTimelineEntry[], entry: AgentTimelineEntry): { durationMs?: number; completedAt?: string } {
+  if (entry.item.type !== "assistant_message") return {};
+  const index = entries.findIndex((candidate) => candidate.seqStart === entry.seqStart);
+  if (index < 0) return {};
+  for (let cursor = index - 1; cursor >= 0; cursor -= 1) {
+    const candidate = entries[cursor];
+    if (entry.turnId && candidate.turnId && candidate.turnId !== entry.turnId) continue;
+    if (candidate.item.type !== "user_message") continue;
+    const startedAt = Date.parse(candidate.timestamp);
+    const completedAt = Date.parse(entry.timestamp);
+    if (!Number.isFinite(startedAt) || !Number.isFinite(completedAt)) return {};
+    return { durationMs: Math.max(0, completedAt - startedAt), completedAt: entry.timestamp };
+  }
+  return {};
+}
+
+function RunningTurnIndicator({ startedAt, color }: { startedAt: string | null; color: string }) {
+  const [now, setNow] = useState(Date.now());
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const appStateRef = useRef<AppStateStatus>(AppState.currentState);
+
+  useEffect(() => {
+    timerRef.current = setInterval(() => setNow(Date.now()), 1000);
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+      timerRef.current = null;
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleAppState = (nextState: AppStateStatus) => {
+      const prev = appStateRef.current;
+      appStateRef.current = nextState;
+      if (prev !== "active" && nextState === "active") {
+        if (!timerRef.current) timerRef.current = setInterval(() => setNow(Date.now()), 1000);
+      } else if (prev === "active" && nextState !== "active") {
+        if (timerRef.current) {
+          clearInterval(timerRef.current);
+          timerRef.current = null;
+        }
+      }
+    };
+    const subscription = AppState.addEventListener("change", handleAppState);
+    return () => {
+      subscription.remove();
+      if (timerRef.current) {
+        clearInterval(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+  }, []);
+
+  const elapsedSeconds = startedAt ? Math.max(0, Math.floor((now - Date.parse(startedAt)) / 1000)) : null;
+  return <View accessibilityLabel={elapsedSeconds == null ? "Agent 正在工作" : `Agent 已工作 ${elapsedSeconds} 秒`} style={{ flexDirection: "row", alignItems: "center", gap: 8, minHeight: 32, marginTop: 8 }}>
+    <ActivityIndicator size="small" color={color} />
+    {elapsedSeconds != null ? <Text style={{ color, fontSize: 11 }}>Working for {elapsedSeconds}s</Text> : null}
+  </View>;
+}
+
+export function AgentConversationTimeline({ entries, hasOlder, loadingOlder, onLoadOlder, scrollToEndVersion, isRunning, activeTurnStartedAt, pendingPermissions, respondingRequestId, onRespond, rewindCapabilities, rewindingMessageId, onRewind, theme, compact }: {
+  entries: AgentTimelineEntry[];
+  hasOlder: boolean;
+  loadingOlder: boolean;
+  onLoadOlder: () => void;
+  scrollToEndVersion: number;
+  isRunning: boolean;
+  activeTurnStartedAt: string | null;
+  pendingPermissions: AgentPermissionRequest[];
+  respondingRequestId: string | null;
+  onRespond: (requestId: string, response: AgentPermissionResponse) => void;
+  rewindCapabilities?: AgentCapabilityFlags | null;
+  rewindingMessageId: string | null;
+  onRewind: (messageId: string, text: string, mode: "conversation" | "files" | "both") => void;
+  theme: PluginSurfaceProps["theme"];
+  compact: boolean;
+}) {
+  const scrollRef = useRef<ScrollView | null>(null);
+  const isAtBottomRef = useRef(true);
+  const [isAtBottom, setIsAtBottom] = useState(true);
+  const [hasNewContent, setHasNewContent] = useState(false);
+  useEffect(() => {
+    if (!isAtBottomRef.current) {
+      setHasNewContent(true);
+      return;
+    }
+    const timer = setTimeout(() => scrollRef.current?.scrollToEnd({ animated: false }), 0);
+    return () => clearTimeout(timer);
+  }, [pendingPermissions.length, scrollToEndVersion]);
+  const scrollToBottom = () => {
+    scrollRef.current?.scrollToEnd({ animated: true });
+    isAtBottomRef.current = true;
+    setIsAtBottom(true);
+    setHasNewContent(false);
+  };
+  return (
+    <View style={{ flex: 1 }}>
+    <ScrollView
+      ref={scrollRef}
+      style={{ flex: 1 }}
+      scrollEventThrottle={50}
+      onScroll={({ nativeEvent }) => {
+        const bottomDistance = nativeEvent.contentSize.height - nativeEvent.layoutMeasurement.height - nativeEvent.contentOffset.y;
+        const nextAtBottom = bottomDistance <= 48;
+        isAtBottomRef.current = nextAtBottom;
+        setIsAtBottom(nextAtBottom);
+        if (nextAtBottom) setHasNewContent(false);
+      }}
+      contentContainerStyle={{ paddingHorizontal: 24, paddingTop: 14, paddingBottom: 24 }}
+    >
+      <View>
+        {hasOlder ? <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="加载更早消息"
+          disabled={loadingOlder}
+          onPress={onLoadOlder}
+          style={{ alignSelf: "center", minHeight: 32, paddingHorizontal: 12, marginBottom: 12, borderRadius: 6, borderWidth: 1, borderColor: theme.colors.border, alignItems: "center", justifyContent: "center", opacity: loadingOlder ? 0.65 : 1 }}
+        >
+          {loadingOlder ? <ActivityIndicator size="small" color={theme.colors.foregroundMuted} /> : <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>加载更早消息</Text>}
+        </Pressable> : null}
+        {timelineBlocks(entries).map((block) => block.kind === "tools"
+          ? <PaseoToolCallGroup key={`tools-${block.entries[0]?.seqStart}`} entries={block.entries} theme={theme} />
+          : <PaseoTimelineItem key={`${block.entry.seqStart}:${block.entry.item.type}`} entry={block.entry} theme={theme} rewindCapabilities={rewindCapabilities} rewinding={rewindingMessageId === block.entry.item.messageId} onRewind={onRewind} {...assistantTiming(entries, block.entry)} />)}
+        {pendingPermissions.length > 0 ? <View style={{ gap: 8 }}>
+          {pendingPermissions.map((request) => (
+            <AgentPermissionCard
+              key={request.id}
+              request={request}
+              theme={theme}
+              compact={compact}
+              responding={respondingRequestId === request.id}
+              onRespond={(response) => onRespond(request.id, response)}
+            />
+          ))}
+        </View> : null}
+        {isRunning && pendingPermissions.length === 0 ? <RunningTurnIndicator startedAt={activeTurnStartedAt} color={theme.colors.foregroundMuted} /> : null}
+      </View>
+    </ScrollView>
+    {!isAtBottom ? <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={hasNewContent ? "有新消息，回到底部" : "回到底部"}
+      onPress={scrollToBottom}
+      style={{ position: "absolute", bottom: 12, alignSelf: "center", width: 36, height: 36, borderRadius: 18, borderWidth: 1, borderColor: theme.colors.border, backgroundColor: theme.colors.surface1, alignItems: "center", justifyContent: "center", shadowColor: "#000", shadowOpacity: 0.18, shadowRadius: 8, shadowOffset: { width: 0, height: 3 }, elevation: 4 }}
+    ><Icon name="ChevronDown" size={20} color={theme.colors.foreground} /></Pressable> : null}
+    </View>
+  );
+}

package/client/components/AgentCreatorPanel.tsx

@@ -0,0 +1,152 @@
+import React, { useCallback, useMemo, useState } from "react";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Pressable, Text, View, type TextStyle, type ViewStyle } from "react-native";
+
+import type { WorkspaceEntry } from "../../shared/overview-types";
+import { providerModelId, buildSelection, providerById, selectableModels } from "../workspace-creator/provider-selection";
+import type { OpenMenu, PaseoClient } from "../workspace-creator/types";
+import { useProviderCatalog } from "../workspace-creator/useProviderCatalog";
+import { SharedComposerInput } from "./SharedComposerInput";
+import { ResizeHandle } from "./ResizeHandle";
+import { useKeyboardInset } from "../hooks/useKeyboardInset";
+import { ensureSelection } from "../workspace-creator/submit-workspace";
+import type { PastedImage } from "../web";
+
+interface AgentCreatorPanelProps {
+  workspace: WorkspaceEntry;
+  paseo: PaseoClient;
+  theme: PluginSurfaceProps["theme"];
+  compact: boolean;
+  initialPanelWidth?: number;
+  maxPanelWidth?: number;
+  onClose: () => void;
+  onCreated: (agent: { id: string }) => void;
+}
+
+export function AgentCreatorPanel({ workspace, paseo, theme, compact, initialPanelWidth = 480, maxPanelWidth = 800, onClose, onCreated }: AgentCreatorPanelProps) {
+  const [prompt, setPrompt] = useState("");
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [openMenu, setOpenMenu] = useState<OpenMenu>(null);
+  const [images, setImages] = useState<PastedImage[]>([]);
+  const keyboardInset = useKeyboardInset(compact);
+  const { snapshot, selection, setSelection, loading, error: providerError } = useProviderCatalog(
+    paseo,
+    workspace.workspaceDirectory,
+  );
+  const branchLabel = workspace.gitRuntime?.currentBranch?.replace(/^heads\//, "") ?? workspace.name;
+
+  const selectModel = useCallback((combinedId: string) => {
+    const separator = combinedId.indexOf("::");
+    const providerId = separator >= 0 ? combinedId.slice(0, separator) : selection?.providerId ?? "";
+    const modelId = separator >= 0 ? combinedId.slice(separator + 2) : combinedId;
+    const entry = providerById(snapshot, providerId);
+    const model = selectableModels(entry).find((item) => item.id === modelId);
+    if (entry && model) setSelection(buildSelection(entry, model));
+    setOpenMenu(null);
+  }, [selection?.providerId, setSelection, snapshot]);
+
+  const selectMode = useCallback((modeId: string) => {
+    const entry = providerById(snapshot, selection?.providerId ?? "");
+    const mode = entry?.modes?.find((item) => item.id === modeId);
+    setSelection((current) => current ? { ...current, modeId, modeLabel: mode?.label ?? modeId } : current);
+    setOpenMenu(null);
+  }, [selection?.providerId, setSelection, snapshot]);
+
+  const selectThinking = useCallback((thinkingOptionId: string) => {
+    const entry = providerById(snapshot, selection?.providerId ?? "");
+    const model = selectableModels(entry).find((item) => item.id === selection?.modelId);
+    const thinking = model?.thinkingOptions?.find((item) => item.id === thinkingOptionId);
+    setSelection((current) => current ? { ...current, thinkingOptionId, thinkingLabel: thinking?.label ?? thinkingOptionId } : current);
+    setOpenMenu(null);
+  }, [selection?.modelId, selection?.providerId, setSelection, snapshot]);
+
+  const submit = useCallback(async () => {
+    const nextPrompt = prompt.trim();
+    if (!nextPrompt && images.length === 0) return;
+    setPending(true);
+    setError(null);
+    try {
+      const resolvedSelection = await ensureSelection({
+        paseo,
+        projectDirectory: workspace.workspaceDirectory,
+        snapshot,
+        selection,
+      });
+      setSelection(resolvedSelection);
+      const agent = await paseo.workspaces.ref(workspace.id).agents.create({
+        config: {
+          provider: providerModelId(resolvedSelection),
+          ...(resolvedSelection.modeId ? { modeId: resolvedSelection.modeId } : {}),
+          ...(resolvedSelection.thinkingOptionId ? { thinkingOptionId: resolvedSelection.thinkingOptionId } : {}),
+        },
+        prompt: nextPrompt,
+        images: images.map(({ data, mimeType }) => ({ data, mimeType })),
+      });
+      setPrompt("");
+      setImages([]);
+      onCreated(agent);
+    } catch (submitError) {
+      setError(submitError instanceof Error ? submitError.message : String(submitError));
+    } finally {
+      setPending(false);
+    }
+  }, [images, onCreated, paseo, prompt, selection, setSelection, snapshot, workspace.id, workspace.workspaceDirectory]);
+
+  const styles = useMemo(() => ({
+    panel: { height: "100%", borderLeftWidth: 1, borderLeftColor: theme.colors.foregroundMuted + "22", backgroundColor: theme.colors.surface0 } as ViewStyle,
+    header: { height: 54, paddingHorizontal: 14, flexDirection: "row", alignItems: "center", gap: 8, borderBottomWidth: 1, borderBottomColor: theme.colors.foregroundMuted + "22" } as ViewStyle,
+    title: { flex: 1, color: theme.colors.foreground, fontSize: 14, fontWeight: "600" } as TextStyle,
+    subtitle: { color: theme.colors.foregroundMuted, fontSize: 11 } as TextStyle,
+    close: { width: 30, height: 30, alignItems: "center", justifyContent: "center" } as ViewStyle,
+    body: { flex: 1, justifyContent: "flex-end", paddingHorizontal: compact ? 12 : 20, paddingBottom: compact ? 12 + keyboardInset : 20 } as ViewStyle,
+    error: { color: (theme.colors as { statusDanger?: string }).statusDanger ?? "#ef4444", fontSize: 12, marginTop: 8 } as TextStyle,
+  }), [compact, keyboardInset, theme]);
+
+  const content = <>
+    <View style={styles.header}>
+      <Icon name="Plus" size={17} color={theme.colors.foregroundMuted} />
+      <View style={{ flex: 1, minWidth: 0 }}>
+        <Text numberOfLines={1} style={styles.title}>新建 Agent</Text>
+        <Text numberOfLines={1} style={styles.subtitle}>{branchLabel}</Text>
+      </View>
+      <Pressable accessibilityLabel="关闭新建 Agent" disabled={pending} onPress={onClose} style={styles.close}>
+        <Icon name="X" size={16} color={theme.colors.foregroundMuted} />
+      </Pressable>
+    </View>
+    <View style={styles.body}>
+      <SharedComposerInput
+        selection={selection}
+        snapshot={snapshot}
+        providerLoading={loading}
+        openMenu={openMenu}
+        onToggleMenu={setOpenMenu}
+        onSelectModel={selectModel}
+        onSelectMode={selectMode}
+        onSelectThinking={selectThinking}
+        isAgentRunning={false}
+        isCancelling={false}
+        onCancel={() => {}}
+        placeholder="给新 Agent 发第一条消息"
+        theme={theme}
+        disabled={pending}
+        autoFocus
+        inputNativeID="agent-create-prompt"
+        pendingLabel={pending ? "Creating" : null}
+        value={prompt}
+        onChangeText={setPrompt}
+        onSubmit={submit}
+        images={images}
+        onImagesChange={setImages}
+        onPasteError={setError}
+      />
+      {error ?? providerError ? <Text style={styles.error}>{error ?? providerError}</Text> : null}
+    </View>
+  </>;
+
+  if (compact) {
+    return <View style={[styles.panel, { flex: 1, width: "100%" }]}>{content}</View>;
+  }
+  return <ResizeHandle theme={theme} side="left" variant="grip" initialWidth={initialPanelWidth} minWidth={360} maxWidth={maxPanelWidth} style={styles.panel}>{content}</ResizeHandle>;
+}

package/client/components/AgentQuestionCard.tsx

@@ -0,0 +1,244 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { ActivityIndicator, Pressable, ScrollView, Text, TextInput, View, type PressableStateCallbackType, type TextStyle, type ViewStyle } from "react-native";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import type { AgentPermissionRequest, AgentPermissionResponse } from "@getpaseo/protocol/agent-types";
+import { PaseoAssistantMessage } from "./PaseoAssistantMessage";
+
+interface QuestionOption { label: string; description?: string }
+interface QuestionFormQuestion {
+  question: string; header: string; options: QuestionOption[]; multiSelect: boolean;
+  allowOther: boolean; allowEmpty: boolean; placeholder?: string; dismissLabel?: string;
+}
+type Selections = Record<number, ReadonlySet<number>>;
+type OtherTexts = Record<number, string>;
+
+function parseQuestions(input: unknown): QuestionFormQuestion[] | null {
+  if (typeof input !== "object" || input === null || !("questions" in input) || !Array.isArray((input as Record<string, unknown>).questions)) return null;
+  const questions: QuestionFormQuestion[] = [];
+  for (const raw of (input as Record<string, unknown>).questions as unknown[]) {
+    if (typeof raw !== "object" || raw === null) return null;
+    const question = raw as Record<string, unknown>;
+    if (typeof question.question !== "string" || typeof question.header !== "string" || !Array.isArray(question.options)) return null;
+    const options: QuestionOption[] = [];
+    for (const rawOption of question.options) {
+      if (typeof rawOption !== "object" || rawOption === null || typeof (rawOption as Record<string, unknown>).label !== "string") return null;
+      const option = rawOption as Record<string, unknown>;
+      options.push({ label: option.label as string, description: typeof option.description === "string" ? option.description : undefined });
+    }
+    questions.push({
+      question: question.question, header: question.header, options,
+      multiSelect: question.multiSelect === true,
+      allowOther: question.allowOther === true || question.isOther === true,
+      allowEmpty: question.allowEmpty === true,
+      placeholder: typeof question.placeholder === "string" ? question.placeholder : undefined,
+      dismissLabel: typeof question.dismissLabel === "string" ? question.dismissLabel : undefined,
+    });
+  }
+  return questions.length > 0 ? questions : null;
+}
+
+function showsTextInput(question: QuestionFormQuestion): boolean { return question.options.length === 0 || question.allowOther; }
+function isAnswered(question: QuestionFormQuestion, index: number, selections: Selections, otherTexts: OtherTexts): boolean {
+  if (selections[index]?.size) return true;
+  if (!showsTextInput(question)) return false;
+  return Boolean(otherTexts[index]?.trim()) || question.allowEmpty;
+}
+function buildAnswers(questions: QuestionFormQuestion[], selections: Selections, otherTexts: OtherTexts): Record<string, string> {
+  const answers: Record<string, string> = {};
+  questions.forEach((question, index) => {
+    const otherText = otherTexts[index]?.trim();
+    if (showsTextInput(question) && otherText) answers[question.header] = otherText;
+    else if (question.allowEmpty && question.options.length === 0) answers[question.header] = "";
+    else if (selections[index]?.size) answers[question.header] = Array.from(selections[index]).map((optionIndex) => question.options[optionIndex].label).join(", ");
+  });
+  return answers;
+}
+
+function QuestionFormCard({ request, theme, compact, responding, onRespond }: {
+  request: AgentPermissionRequest; theme: PluginSurfaceProps["theme"]; compact: boolean; responding: boolean;
+  onRespond: (response: AgentPermissionResponse) => void;
+}) {
+  const questions = useMemo(() => parseQuestions(request.input), [request.input]);
+  const [selections, setSelections] = useState<Record<number, Set<number>>>({});
+  const [otherTexts, setOtherTexts] = useState<Record<number, string>>({});
+  const [respondingAction, setRespondingAction] = useState<"submit" | "dismiss" | null>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const styles = useMemo(() => createStyles(theme), [theme]);
+  const borderAccent = (theme.colors as typeof theme.colors & { borderAccent?: string }).borderAccent ?? theme.colors.border;
+
+  const toggleOption = useCallback((questionIndex: number, optionIndex: number, multiSelect: boolean) => {
+    const current = selections[questionIndex] ?? new Set<number>();
+    const next = new Set(current);
+    if (multiSelect) { if (next.has(optionIndex)) next.delete(optionIndex); else next.add(optionIndex); }
+    else if (next.has(optionIndex)) next.clear();
+    else { next.clear(); next.add(optionIndex); }
+    setSelections((previous) => ({ ...previous, [questionIndex]: next }));
+    setOtherTexts((previous) => { if (!previous[questionIndex]) return previous; const nextTexts = { ...previous }; delete nextTexts[questionIndex]; return nextTexts; });
+    if (!multiSelect && next.size > 0 && questionIndex === activeIndex && questions) setActiveIndex(Math.min(questionIndex + 1, questions.length - 1));
+  }, [activeIndex, questions, selections]);
+  const setOtherText = useCallback((questionIndex: number, text: string) => {
+    setOtherTexts((previous) => ({ ...previous, [questionIndex]: text }));
+    if (text.length > 0) setSelections((previous) => previous[questionIndex]?.size ? { ...previous, [questionIndex]: new Set<number>() } : previous);
+  }, []);
+
+  if (!questions) return null;
+  const resolvedIndex = Math.min(activeIndex, questions.length - 1);
+  const activeQuestion = questions[resolvedIndex];
+  const activeAnswered = isAnswered(activeQuestion, resolvedIndex, selections, otherTexts);
+  const allAnswered = questions.every((question, index) => isAnswered(question, index, selections, otherTexts));
+  const isLastQuestion = resolvedIndex === questions.length - 1;
+  const primaryDisabled = responding || (isLastQuestion ? !allAnswered : !activeAnswered);
+  const selected = selections[resolvedIndex] ?? new Set<number>();
+  const submit = () => {
+    if (!allAnswered || responding) return;
+    setRespondingAction("submit");
+    onRespond({ behavior: "allow", updatedInput: { ...request.input, answers: buildAnswers(questions, selections, otherTexts) } });
+  };
+  const primaryAction = () => {
+    if (!isLastQuestion) { if (activeAnswered && !responding) setActiveIndex((index) => Math.min(index + 1, questions.length - 1)); return; }
+    submit();
+  };
+  const dismissLabel = questions.find((question) => question.dismissLabel)?.dismissLabel ?? "关闭";
+  const dismiss = () => {
+    setRespondingAction("dismiss");
+    if (questions.every((question) => question.allowEmpty && question.options.length === 0)) onRespond({ behavior: "allow", updatedInput: { ...request.input, answers: buildAnswers(questions, selections, otherTexts) } });
+    else onRespond({ behavior: "deny", message: "Dismissed by user" });
+  };
+
+  return <View style={styles.container} testID="question-form-card">
+    {questions.length > 1 ? <View style={styles.questionNav} accessibilityRole="tablist" testID="question-form-question-nav">
+      {questions.map((question, index) => {
+        const active = index === resolvedIndex;
+        return <Pressable key={question.header} accessibilityRole="tab" accessibilityLabel={`Question ${index + 1} of ${questions.length}`} accessibilityState={{ selected: active }} disabled={responding} onPress={() => setActiveIndex(index)} style={({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => [styles.questionNavButton, { backgroundColor: active || hovered ? theme.colors.surface2 : theme.colors.surface1, borderColor: active ? theme.colors.foregroundMuted : theme.colors.border }, pressed && styles.pressed]}>
+          {isAnswered(question, index, selections, otherTexts) ? <Icon name="Check" size={12} color={active ? theme.colors.foreground : theme.colors.foregroundMuted} /> : null}
+          <Text numberOfLines={1} style={[styles.questionNavText, { color: active ? theme.colors.foreground : theme.colors.foregroundMuted }]}>{question.header}</Text>
+        </Pressable>;
+      })}
+    </View> : null}
+    <View style={styles.questionHeader}><Text style={styles.questionText} testID="question-form-current-question">{activeQuestion.question}</Text></View>
+    <View key={activeQuestion.question} style={styles.questionBlock}>
+      {activeQuestion.options.length > 0 ? <View style={styles.optionsWrap} accessibilityRole={activeQuestion.multiSelect ? undefined : "radiogroup"} accessibilityLabel={activeQuestion.question}>
+        {activeQuestion.options.map((option, optionIndex) => {
+          const isSelected = selected.has(optionIndex);
+          return <Pressable key={option.label} disabled={responding} accessibilityRole={activeQuestion.multiSelect ? "checkbox" : "radio"} accessibilityLabel={option.label} accessibilityState={{ checked: isSelected }} onPress={() => toggleOption(resolvedIndex, optionIndex, activeQuestion.multiSelect)} style={({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => [styles.optionItem, (hovered || isSelected) && { backgroundColor: theme.colors.surface2 }, pressed && styles.pressed]}>
+            <View style={styles.optionItemContent}>
+              <View style={[styles.selectionControl, activeQuestion.multiSelect ? styles.checkbox : styles.radio, { borderColor: isSelected ? theme.colors.accent : theme.colors.foregroundMuted, backgroundColor: isSelected && activeQuestion.multiSelect ? theme.colors.accent : "transparent" }]}>
+                {isSelected && activeQuestion.multiSelect ? <Icon name="Check" size={12} color={theme.colors.accentForeground} /> : null}
+                {isSelected && !activeQuestion.multiSelect ? <View style={[styles.radioDot, { backgroundColor: theme.colors.accent }]} /> : null}
+              </View>
+              <View style={styles.optionTextBlock}><Text style={styles.optionLabel}>{option.label}</Text>{option.description ? <Text style={styles.optionDescription}>{option.description}</Text> : null}</View>
+            </View>
+          </Pressable>;
+        })}
+      </View> : null}
+      {showsTextInput(activeQuestion) ? <TextInput value={otherTexts[resolvedIndex] ?? ""} accessibilityLabel={activeQuestion.question} editable={!responding} blurOnSubmit={false} placeholder={activeQuestion.placeholder ?? (activeQuestion.options.length === 0 ? "输入你的回答..." : "其他...")} placeholderTextColor={theme.colors.foregroundMuted} onChangeText={(text) => setOtherText(resolvedIndex, text)} onSubmitEditing={primaryAction} style={[styles.otherInput, { borderColor: (otherTexts[resolvedIndex]?.length ?? 0) > 0 ? borderAccent : theme.colors.border }]} /> : null}
+    </View>
+    <View style={[styles.actionsContainer, !compact && styles.actionsContainerDesktop]}>
+      <Pressable accessibilityRole="button" accessibilityLabel={dismissLabel} disabled={responding} onPress={dismiss} style={({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => [styles.actionButton, { backgroundColor: hovered ? theme.colors.surface2 : theme.colors.surface1, borderColor: borderAccent }, pressed && styles.pressed]}>
+        {respondingAction === "dismiss" ? <ActivityIndicator size="small" color={theme.colors.foregroundMuted} /> : <View style={styles.actionContent}><Icon name="X" size={14} color={theme.colors.foregroundMuted} /><Text style={[styles.actionText, { color: theme.colors.foregroundMuted }]}>{dismissLabel}</Text></View>}
+      </Pressable>
+      <Pressable accessibilityRole="button" accessibilityLabel={isLastQuestion ? "提交" : "下一步"} disabled={primaryDisabled} onPress={primaryAction} style={({ pressed }) => [styles.actionButton, { backgroundColor: theme.colors.accent, borderColor: theme.colors.accent, opacity: primaryDisabled ? 0.5 : 1 }, pressed && !primaryDisabled && styles.pressed]}>
+        {respondingAction === "submit" ? <ActivityIndicator size="small" color={theme.colors.accentForeground} /> : <View style={styles.actionContent}><Icon name="Check" size={14} color={theme.colors.accentForeground} /><Text style={[styles.actionText, { color: theme.colors.accentForeground }]}>{isLastQuestion ? "提交" : "下一步"}</Text></View>}
+      </Pressable>
+    </View>
+  </View>;
+}
+
+function detailText(value: unknown): string {
+  if (value == null) return "";
+  if (typeof value === "string") return value;
+  try { return JSON.stringify(value, null, 2); } catch { return String(value); }
+}
+
+export function AgentPermissionCard({ request, theme, compact, responding, onRespond }: {
+  request: AgentPermissionRequest; theme: PluginSurfaceProps["theme"]; compact: boolean; responding: boolean;
+  onRespond: (response: AgentPermissionResponse) => void;
+}) {
+  const [respondingActionId, setRespondingActionId] = useState<string | null>(null);
+  const styles = useMemo(() => createPermissionStyles(theme), [theme]);
+  const borderAccent = (theme.colors as typeof theme.colors & { borderAccent?: string }).borderAccent ?? theme.colors.border;
+  if (request.kind === "question") return <QuestionFormCard request={request} theme={theme} compact={compact} responding={responding} onRespond={onRespond} />;
+
+  const isPlan = request.kind === "plan";
+  const planText = typeof request.metadata?.planText === "string" ? request.metadata.planText : typeof request.input?.plan === "string" ? request.input.plan : undefined;
+  const title = isPlan ? "Plan" : (request.title ?? request.name ?? "需要权限");
+  const actions = request.actions?.length ? request.actions : [
+    { id: "reject", label: "拒绝", behavior: "deny" as const, variant: "danger" as const },
+    { id: "accept", label: isPlan ? "实施" : "接受", behavior: "allow" as const, variant: "primary" as const },
+  ];
+  const detail = request.detail ?? { type: "unknown", input: request.input ?? null, output: null };
+  const pressAction = (action: (typeof actions)[number]) => {
+    setRespondingActionId(action.id);
+    onRespond(action.behavior === "allow" ? { behavior: "allow", selectedActionId: action.id } : { behavior: "deny", selectedActionId: action.id, message: "Denied by user" });
+  };
+  const footer = <>
+    <Text style={styles.question}>你想如何继续？</Text>
+    <View style={[styles.optionsContainer, !compact && styles.optionsContainerDesktop]}>
+      {actions.map((action) => {
+        const primary = action.variant === "primary";
+        return <Pressable key={action.id} accessibilityRole="button" disabled={responding} onPress={() => pressAction(action)} style={({ pressed, hovered }: PressableStateCallbackType & { hovered?: boolean }) => [styles.optionButton, { borderColor: borderAccent }, hovered && styles.optionButtonHovered, pressed && styles.pressed]}>
+          {respondingActionId === action.id ? <ActivityIndicator size="small" color={primary ? theme.colors.foreground : theme.colors.foregroundMuted} /> : <View style={styles.optionContent}><Icon name={action.behavior === "allow" ? "Check" : "X"} size={14} color={primary ? theme.colors.foreground : theme.colors.foregroundMuted} /><Text style={[styles.optionText, primary && styles.optionTextPrimary]}>{action.label}</Text></View>}
+        </Pressable>;
+      })}
+    </View>
+  </>;
+
+  return <View style={styles.container}>
+    <Text style={styles.title}>{title}</Text>
+    {request.description ? <Text style={styles.description}>{request.description}</Text> : null}
+    {planText ? <View style={styles.section}>{!isPlan ? <Text style={styles.sectionTitle}>建议计划</Text> : null}<PaseoAssistantMessage text={planText} theme={theme} /></View> : null}
+    {!isPlan ? <ScrollView style={styles.detail} nestedScrollEnabled><Text selectable style={styles.detailText}>{detailText(detail)}</Text></ScrollView> : null}
+    {footer}
+  </View>;
+}
+
+function createStyles(theme: PluginSurfaceProps["theme"]) {
+  return {
+    container: { padding: 12, borderRadius: 8, borderWidth: 1, gap: 12, backgroundColor: theme.colors.surface1, borderColor: theme.colors.border } as ViewStyle,
+    questionBlock: { gap: 8 } as ViewStyle,
+    questionHeader: { flexDirection: "row", alignItems: "center", gap: 8, paddingHorizontal: 12, paddingBottom: 4, flex: 1 } as ViewStyle,
+    questionText: { flex: 1, color: theme.colors.foreground, fontSize: 14, fontWeight: "500", lineHeight: 22 } as TextStyle,
+    optionsWrap: { gap: 4 } as ViewStyle,
+    questionNav: { flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 4, paddingHorizontal: 12 } as ViewStyle,
+    questionNavButton: { flexDirection: "row", alignItems: "center", gap: 4, minHeight: 28, paddingHorizontal: 8, paddingVertical: 4, borderRadius: 6, borderWidth: 1 } as ViewStyle,
+    questionNavText: { fontSize: 14, fontWeight: "500" } as TextStyle,
+    optionItem: { flexDirection: "row", alignItems: "center", paddingHorizontal: 12, paddingVertical: 8, borderRadius: 6 } as ViewStyle,
+    pressed: { opacity: 0.9 } as ViewStyle,
+    optionItemContent: { flex: 1, flexDirection: "row", alignItems: "flex-start", gap: 8 } as ViewStyle,
+    optionTextBlock: { flex: 1, gap: 4 } as ViewStyle,
+    optionLabel: { color: theme.colors.foreground, fontSize: 14, fontWeight: "600", lineHeight: 22 } as TextStyle,
+    optionDescription: { color: theme.colors.foregroundMuted, fontSize: 14, lineHeight: 20 } as TextStyle,
+    selectionControl: { width: 18, height: 18, alignItems: "center", justifyContent: "center", borderWidth: 1, marginTop: 2 } as ViewStyle,
+    checkbox: { borderRadius: 4 } as ViewStyle,
+    radio: { borderRadius: 999 } as ViewStyle,
+    radioDot: { width: 8, height: 8, borderRadius: 999 } as ViewStyle,
+    otherInput: { borderWidth: 1, borderRadius: 8, borderColor: theme.colors.border, paddingHorizontal: 12, paddingVertical: 12, fontSize: 14, color: theme.colors.foreground, backgroundColor: theme.colors.surface2 } as TextStyle,
+    actionsContainer: { gap: 8 } as ViewStyle,
+    actionsContainerDesktop: { flexDirection: "row", justifyContent: "flex-start", alignItems: "center" } as ViewStyle,
+    actionButton: { paddingVertical: 8, paddingHorizontal: 12, borderRadius: 6, alignItems: "center", borderWidth: 1 } as ViewStyle,
+    actionContent: { flexDirection: "row", alignItems: "center", gap: 8 } as ViewStyle,
+    actionText: { fontSize: 14 } as TextStyle,
+  };
+}
+
+function createPermissionStyles(theme: PluginSurfaceProps["theme"]) {
+  return {
+    container: { marginVertical: 12, padding: 12, borderRadius: 8, borderWidth: 1, gap: 8, backgroundColor: theme.colors.surface1, borderColor: theme.colors.border } as ViewStyle,
+    title: { fontSize: 14, lineHeight: 22, color: theme.colors.foreground } as TextStyle,
+    description: { fontSize: 14, lineHeight: 20, color: theme.colors.foregroundMuted } as TextStyle,
+    section: { gap: 8 } as ViewStyle,
+    sectionTitle: { fontSize: 12, color: theme.colors.foregroundMuted } as TextStyle,
+    question: { fontSize: 14, marginTop: 4, marginBottom: 4, color: theme.colors.foregroundMuted } as TextStyle,
+    optionsContainer: { gap: 8 } as ViewStyle,
+    optionsContainerDesktop: { flexDirection: "row", flexWrap: "wrap", justifyContent: "flex-start", alignItems: "center", width: "100%" } as ViewStyle,
+    optionButton: { paddingVertical: 8, paddingHorizontal: 12, borderRadius: 6, alignItems: "center", borderWidth: 1, backgroundColor: theme.colors.surface1 } as ViewStyle,
+    optionButtonHovered: { backgroundColor: theme.colors.surface2 } as ViewStyle,
+    pressed: { opacity: 0.9 } as ViewStyle,
+    optionContent: { flexDirection: "row", alignItems: "center", gap: 8 } as ViewStyle,
+    optionText: { fontSize: 14, fontWeight: "normal", color: theme.colors.foregroundMuted } as TextStyle,
+    optionTextPrimary: { color: theme.colors.foreground } as TextStyle,
+    detail: { maxHeight: 200, borderRadius: 6, backgroundColor: theme.colors.surface2, padding: 10 } as ViewStyle,
+    detailText: { color: theme.colors.foreground, fontSize: 12, lineHeight: 18, fontFamily: "monospace" } as TextStyle,
+  };
+}