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

package/client/components/WorkspaceCreateComposer.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo } from "react";
+import { Text, View } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Badge } from "./WorkspaceBadge";
+import { Menu } from "./WorkspaceMenu";
+import type { ComposerSelection, Isolation, LaunchTarget, MenuOption, OpenMenu, ProviderSnapshot, TerminalProfile, WorkspaceProjectOption } from "../workspace-creator/types";
+import { createComposerStyles } from "./workspace-creator-styles";
+import { ProviderBrandIcon } from "./ProviderBrandIcon";
+import { WorkspaceLaunchMenu } from "./WorkspaceLaunchMenu";
+import { SharedComposerInput } from "./SharedComposerInput";
+import type { PastedImage } from "../web";
+
+export function WorkspaceCreateComposer({
+  project,
+  isolation,
+  baseBranch,
+  pending,
+  error,
+  providerLoading,
+  snapshot,
+  selection,
+  launchTarget,
+  terminalProfiles,
+  openMenu,
+  onToggleMenu,
+  onSelectIsolation,
+  onSelectBase,
+  onSelectModel,
+  onSelectMode,
+  onSelectThinking,
+  onSelectLaunchTarget,
+  theme,
+  prompt,
+  onPromptChange,
+  onSubmit,
+  compact,
+  images,
+  onImagesChange,
+}: {
+  project: WorkspaceProjectOption | null;
+  isolation: Isolation;
+  baseBranch: string;
+  pending: boolean;
+  error: string | null;
+  providerLoading: boolean;
+  snapshot: ProviderSnapshot | null;
+  selection: ComposerSelection | null;
+  launchTarget: LaunchTarget;
+  terminalProfiles: TerminalProfile[];
+  openMenu: OpenMenu;
+  onToggleMenu: (menu: OpenMenu) => void;
+  onSelectIsolation: (isolation: Isolation) => void;
+  onSelectBase: (branch: string) => void;
+  onSelectModel: (modelId: string) => void;
+  onSelectMode: (modeId: string) => void;
+  onSelectThinking: (thinkingId: string) => void;
+  onSelectLaunchTarget: (target: LaunchTarget) => void;
+  theme: PluginSurfaceProps["theme"];
+  prompt: string;
+  onPromptChange: (value: string) => void;
+  onSubmit: () => void | Promise<void>;
+  compact: boolean;
+  images: PastedImage[];
+  onImagesChange: (images: PastedImage[]) => void;
+}) {
+  const styles = useMemo(() => createComposerStyles(theme), [theme]);
+
+  const selectedTerminalProfile = launchTarget.kind === "terminal"
+    ? terminalProfiles.find((profile) => profile.id === launchTarget.profileId) ?? null
+    : null;
+  const launchLabel = launchTarget.kind === "chat"
+    ? "Chat"
+    : selectedTerminalProfile ? `Terminal ${selectedTerminalProfile.name}` : "Terminal";
+
+  const isolationOptions: MenuOption[] = [
+    { id: "worktree", label: "新建 worktree", detail: "创建隔离分支 workspace", iconName: "GitBranch" },
+    { id: "local", label: "Local", detail: "在项目目录中创建 workspace", iconName: "Folder" },
+  ];
+  const baseOptions = (project?.branches.length
+    ? project.branches
+    : [{ id: "main", label: "main", detail: "本地分支" }]
+  ).map((branch) => ({
+    id: branch.id,
+    label: branch.label,
+    detail: branch.detail,
+    iconName: "GitBranch",
+  }));
+  const topMenuOpen = openMenu === "isolation" || openMenu === "base" || openMenu === "launch";
+  if (!project) return null;
+
+  return (
+    <View style={[styles.panel, compact && { paddingHorizontal: 0, paddingVertical: 4, borderTopWidth: 0 }]}>
+      <View style={styles.content}>
+        <View style={[styles.formStackDesktop, compact && { flexWrap: "wrap", marginBottom: 16 }, topMenuOpen && styles.menuRegionActive]}>
+          <View nativeID="workspace-create-dropdown-isolation" style={[styles.controlAnchor, openMenu === "isolation" && styles.controlAnchorOpen]}>
+            <Badge
+              icon={<Icon name="GitBranch" color={theme.colors.foregroundMuted} size={16} />}
+              label={isolation === "worktree" ? "新建 worktree" : "Local"}
+              selectable
+              disabled={pending}
+              onPress={() => onToggleMenu(openMenu === "isolation" ? null : "isolation")}
+              theme={theme}
+            />
+            {openMenu === "isolation" ? (
+              <Menu kind="isolation" placement="above" options={isolationOptions} selectedId={isolation} onSelect={(id) => onSelectIsolation(id === "local" ? "local" : "worktree")} theme={theme} />
+            ) : null}
+          </View>
+          <View nativeID="workspace-create-dropdown-base" style={[styles.controlAnchor, openMenu === "base" && styles.controlAnchorOpen]}>
+            <Badge
+              icon={<Icon name="GitBranch" color={theme.colors.foregroundMuted} size={16} />}
+              label={isolation === "worktree" ? baseBranch : project.projectDisplayName}
+              selectable={isolation === "worktree" && baseOptions.length > 1}
+              disabled={pending || isolation !== "worktree"}
+              onPress={() => onToggleMenu(openMenu === "base" ? null : "base")}
+              theme={theme}
+            />
+            {openMenu === "base" ? (
+              <Menu kind="base" placement="above" options={baseOptions} selectedId={baseBranch} onSelect={onSelectBase} theme={theme} />
+            ) : null}
+          </View>
+          <View style={styles.launchSpacer} />
+          <View nativeID="workspace-create-dropdown-launch" style={[styles.controlAnchor, openMenu === "launch" && styles.controlAnchorOpen]}>
+            <Badge
+              icon={launchTarget.kind === "chat"
+                ? <Icon name="MessageCircle" color={theme.colors.foregroundMuted} size={16} />
+                : selectedTerminalProfile
+                  ? <ProviderBrandIcon providerId={selectedTerminalProfile.icon ?? selectedTerminalProfile.id} color={theme.colors.foregroundMuted} size={16} />
+                  : <Icon name="SquareTerminal" color={theme.colors.foregroundMuted} size={16} />}
+              label={launchLabel}
+              selectable
+              disabled={pending}
+              onPress={() => onToggleMenu(openMenu === "launch" ? null : "launch")}
+              theme={theme}
+            />
+            {openMenu === "launch" ? (
+              <WorkspaceLaunchMenu target={launchTarget} profiles={terminalProfiles} onSelect={onSelectLaunchTarget} theme={theme} />
+            ) : null}
+          </View>
+        </View>
+
+        <SharedComposerInput
+          selection={selection}
+          snapshot={snapshot}
+          providerLoading={providerLoading}
+          openMenu={openMenu}
+          onToggleMenu={onToggleMenu}
+          onSelectModel={onSelectModel}
+          onSelectMode={onSelectMode}
+          onSelectThinking={onSelectThinking}
+          isAgentRunning={false}
+          isCancelling={false}
+          onCancel={() => {}}
+          placeholder={launchTarget.kind === "chat" ? "给 Agent 发消息，标记 @files，或使用 /commands 和 /skills" : selectedTerminalProfile ? "输入启动提示词" : "输入终端命令"}
+          theme={theme}
+          disabled={pending}
+          showAgentControls={launchTarget.kind === "chat"}
+          autoFocus
+          pendingLabel={pending ? "Sending" : null}
+          value={prompt}
+          onChangeText={onPromptChange}
+          onSubmit={onSubmit}
+          images={images}
+          onImagesChange={onImagesChange}
+        />
+        {error ? <Text style={styles.errorText}>{error}</Text> : null}
+      </View>
+    </View>
+  );
+}

package/client/components/WorkspaceCreatorPanel.tsx

@@ -0,0 +1,256 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { useRpc } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Pressable, Text, View, type TextStyle, type ViewStyle } from "react-native";
+import { WorkspaceCreateComposer } from "./WorkspaceCreateComposer";
+import { ResizeHandle } from "./ResizeHandle";
+import { buildSelection, providerById, selectableModels } from "../workspace-creator/provider-selection";
+import { submitWorkspacePrompt } from "../workspace-creator/submit-workspace";
+import type { Isolation, LaunchTarget, OpenMenu, WorkspaceCreatorPanelProps } from "../workspace-creator/types";
+import { terminalLaunchRpc } from "../../shared/terminal-launch";
+import { useProviderCatalog, useTerminalProfiles } from "../workspace-creator/useProviderCatalog";
+import { useKeyboardInset } from "../hooks/useKeyboardInset";
+import type { PastedImage } from "../web";
+
+export function WorkspaceCreatorPanel({
+  projectId,
+  projectDisplayName,
+  projectDirectory,
+  hostId,
+  navigation,
+  projects,
+  paseo,
+  onClose,
+  onCreate,
+  initialPanelWidth = 480,
+  maxPanelWidth = 800,
+  theme,
+  layout,
+}: WorkspaceCreatorPanelProps) {
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [openMenu, setOpenMenu] = useState<OpenMenu>(null);
+  const [prompt, setPrompt] = useState("");
+  const [images, setImages] = useState<PastedImage[]>([]);
+  const [isolation, setIsolation] = useState<Isolation>("worktree");
+  const [baseBranch, setBaseBranch] = useState(() => {
+    const initialProject = projects.find((project) => project.projectId === projectId);
+    return initialProject?.defaultBranch ?? initialProject?.branches[0]?.id ?? "main";
+  });
+  const [launchTarget, setLaunchTarget] = useState<LaunchTarget>({ kind: "chat" });
+  const launchTerminal = useRpc(terminalLaunchRpc);
+  const keyboardInset = useKeyboardInset(layout.compact);
+
+  const selectedProject = useMemo(
+    () =>
+      projects.find((project) => project.projectId === projectId) ?? {
+        projectId,
+        projectDisplayName,
+        projectDirectory: projectDirectory ?? "",
+        branches: [{ id: "main", label: "main", detail: "本地分支" }],
+        defaultBranch: "main",
+      },
+    [projectDirectory, projectDisplayName, projectId, projects],
+  );
+  const terminalProfiles = useTerminalProfiles(paseo);
+  const providerCatalog = useProviderCatalog(paseo, selectedProject.projectDirectory);
+  const { snapshot, selection, setSelection, loading: providerLoading } = providerCatalog;
+  const visibleError = error ?? providerCatalog.error;
+
+  const selectBase = useCallback((branch: string) => {
+    setBaseBranch(branch);
+    setOpenMenu(null);
+  }, []);
+
+  const selectIsolation = useCallback((nextIsolation: Isolation) => {
+    setIsolation(nextIsolation);
+    setOpenMenu(null);
+  }, []);
+
+  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) ?? null;
+      if (entry && model) {
+        setSelection(buildSelection(entry, model));
+      }
+      setOpenMenu(null);
+    },
+    [selection?.providerId, 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, 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, snapshot],
+  );
+
+  const submit = useCallback(async () => {
+    const submitted = await submitWorkspacePrompt({
+        project: selectedProject.projectDirectory ? selectedProject : null,
+        isolation,
+        baseBranch,
+        paseo,
+        snapshot,
+        selection,
+        launchTarget,
+        terminalProfiles,
+        launchTerminal,
+        openAgent: (agentId) => navigation.openAgent({ agentId }),
+        serverId: hostId,
+        setSelection,
+        setPending,
+        setError,
+        onDone: () => {
+          onCreate?.();
+          onClose();
+        },
+        images,
+    }, prompt);
+    if (submitted) {
+      setPrompt("");
+      setImages([]);
+    }
+  },
+    [baseBranch, hostId, images, isolation, launchTarget, launchTerminal, navigation, onClose, onCreate, paseo, prompt, selectedProject, selection, snapshot, terminalProfiles],
+  );
+
+  const close = useCallback(() => {
+    if (pending) return;
+    setOpenMenu(null);
+    setError(null);
+    onClose();
+  }, [onClose, pending]);
+
+  const panelStyles = 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,
+    closeButton: {
+      width: 30,
+      height: 30,
+      alignItems: "center",
+      justifyContent: "center",
+    } as ViewStyle,
+    body: {
+      flex: 1,
+      justifyContent: "flex-end",
+      paddingHorizontal: layout.compact ? 12 : 20,
+      paddingBottom: layout.compact ? 12 + keyboardInset : 20,
+    } as ViewStyle,
+  }), [keyboardInset, layout.compact, theme]);
+
+  const content = (
+    <>
+      <View style={panelStyles.header}>
+        <Icon name="Plus" size={17} color={theme.colors.foregroundMuted} />
+        <Text numberOfLines={1} style={panelStyles.title}>新建 Workspace</Text>
+        <Pressable accessibilityLabel="关闭新建 Workspace" disabled={pending} onPress={close} style={panelStyles.closeButton}>
+          <Icon name="X" size={16} color={theme.colors.foregroundMuted} />
+        </Pressable>
+      </View>
+      <View style={panelStyles.body}>
+        <WorkspaceCreateComposer
+          project={selectedProject.projectDirectory ? selectedProject : null}
+          isolation={isolation}
+          baseBranch={baseBranch}
+          pending={pending}
+          error={visibleError}
+          providerLoading={providerLoading}
+          snapshot={snapshot}
+          selection={selection}
+          launchTarget={launchTarget}
+          terminalProfiles={terminalProfiles}
+          openMenu={openMenu}
+          onToggleMenu={setOpenMenu}
+          onSelectIsolation={selectIsolation}
+          onSelectBase={selectBase}
+          onSelectModel={selectModel}
+          onSelectMode={selectMode}
+          onSelectThinking={selectThinking}
+          onSelectLaunchTarget={(target) => {
+            setLaunchTarget(target);
+            setOpenMenu(null);
+          }}
+          theme={theme}
+          prompt={prompt}
+          onPromptChange={setPrompt}
+          onSubmit={submit}
+          compact={layout.compact}
+          images={launchTarget.kind === "chat" ? images : []}
+          onImagesChange={launchTarget.kind === "chat" ? setImages : () => {}}
+        />
+      </View>
+    </>
+  );
+
+  if (layout.compact) {
+    return <View style={[panelStyles.panel, { flex: 1, width: "100%" }]}>{content}</View>;
+  }
+
+  return (
+    <ResizeHandle
+      theme={theme}
+      side="left"
+      variant="grip"
+      initialWidth={initialPanelWidth}
+      minWidth={360}
+      maxWidth={maxPanelWidth}
+      style={panelStyles.panel}
+    >
+      {content}
+    </ResizeHandle>
+  );
+}

package/client/components/WorkspaceLaunchMenu.tsx

@@ -0,0 +1,76 @@
+import React, { useMemo } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon, ScrollView } from "@getpaseo/plugin/client/react-native";
+import { opaqueSurfaceColor } from "../workspace-creator/ui-utils";
+import { createMenuStyles } from "./workspace-creator-styles";
+import { ProviderBrandIcon } from "./ProviderBrandIcon";
+import type { LaunchTarget, TerminalProfile } from "../workspace-creator/types";
+
+export function WorkspaceLaunchMenu({
+  target,
+  profiles,
+  onSelect,
+  theme,
+}: {
+  target: LaunchTarget;
+  profiles: TerminalProfile[];
+  onSelect: (target: LaunchTarget) => void;
+  theme: PluginSurfaceProps["theme"];
+}) {
+  const styles = useMemo(() => createMenuStyles(theme), [theme]);
+  const backgroundColor = opaqueSurfaceColor(theme.colors.surface0, theme.colors.foreground);
+
+  return (
+    <View style={[styles.menu, styles.menuAbove, { left: 0, width: 260, maxHeight: 360, backgroundColor }]}>
+      <ScrollView style={{ maxHeight: 350 }} contentContainerStyle={{ backgroundColor }}>
+      <Pressable
+        accessibilityRole="menuitem"
+        accessibilityState={{ selected: target.kind === "chat" }}
+        onPress={() => onSelect({ kind: "chat" })}
+        style={[styles.menuItem, target.kind === "chat" && styles.menuItemSelected, { backgroundColor }]}
+      >
+        <View style={styles.menuIconBox}>
+          <Icon name="MessageCircle" color={theme.colors.foreground} size={16} />
+        </View>
+        <View style={styles.menuTextGroup}>
+          <Text style={styles.menuLabel}>Chat</Text>
+        </View>
+        {target.kind === "chat" ? <Icon name="Check" color={theme.colors.accent} size={13} /> : null}
+      </Pressable>
+      <View style={styles.modelBrowserHeading}><Text style={styles.modelBrowserSectionLabel}>Terminal</Text></View>
+      <Pressable
+        accessibilityRole="menuitem"
+        accessibilityState={{ selected: target.kind === "terminal" && target.profileId === "blank" }}
+        onPress={() => onSelect({ kind: "terminal", profileId: "blank" })}
+        style={[styles.menuItem, target.kind === "terminal" && target.profileId === "blank" && styles.menuItemSelected, { backgroundColor }]}
+      >
+        <View style={styles.menuIconBox}><Icon name="SquareTerminal" color={theme.colors.foreground} size={16} /></View>
+        <View style={styles.menuTextGroup}><Text style={styles.menuLabel}>Terminal</Text></View>
+        {target.kind === "terminal" && target.profileId === "blank" ? <Icon name="Check" color={theme.colors.accent} size={13} /> : null}
+      </Pressable>
+      {profiles.map((profile) => {
+        const selected = target.kind === "terminal" && target.profileId === profile.id;
+        return (
+          <Pressable
+            key={profile.id}
+            accessibilityRole="menuitem"
+            accessibilityState={{ selected }}
+            onPress={() => onSelect({ kind: "terminal", profileId: profile.id })}
+            style={[styles.menuItem, selected && styles.menuItemSelected, { backgroundColor }]}
+          >
+            <View style={styles.menuIconBox}>
+              <ProviderBrandIcon providerId={profile.icon ?? profile.id} color={theme.colors.foreground} size={16} />
+            </View>
+            <View style={styles.menuTextGroup}>
+              <Text style={styles.menuLabel} numberOfLines={1}>{profile.name}</Text>
+              <Text style={styles.menuDetail} numberOfLines={1}>{[profile.command, ...profile.args].join(" ")}</Text>
+            </View>
+            {selected ? <Icon name="Check" color={theme.colors.accent} size={13} /> : null}
+          </Pressable>
+        );
+      })}
+      </ScrollView>
+    </View>
+  );
+}

package/client/components/WorkspaceMenu.tsx

@@ -0,0 +1,116 @@
+import React, { useMemo, useState } from "react";
+import { Pressable, Text, useWindowDimensions, View } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon, ScrollView, TextInput } from "@getpaseo/plugin/client/react-native";
+import { MAX_MENU_HEIGHT, MENU_WIDTH_BY_KIND } from "../workspace-creator/constants";
+import { opaqueSurfaceColor } from "../workspace-creator/ui-utils";
+import type { MenuOption, OpenMenu } from "../workspace-creator/types";
+import { createMenuStyles } from "./workspace-creator-styles";
+import { ProjectIcon } from "./ProjectIcon";
+
+export function Menu({
+  kind,
+  placement = "above",
+  options,
+  selectedId,
+  onSelect,
+  theme,
+}: {
+  kind: Exclude<OpenMenu, null>;
+  placement?: "above" | "below";
+  options: MenuOption[];
+  selectedId: string | null;
+  onSelect: (id: string) => void;
+  theme: PluginSurfaceProps["theme"];
+}) {
+  const styles = useMemo(() => createMenuStyles(theme), [theme]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const window = useWindowDimensions();
+  const menuBackground = opaqueSurfaceColor(theme.colors.surface0, theme.colors.foreground);
+  const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
+  const filteredOptions = useMemo(
+    () =>
+      normalizedQuery
+        ? options.filter((option) =>
+            [option.label, option.detail, option.id].some((value) =>
+              value?.toLocaleLowerCase().includes(normalizedQuery),
+            ),
+          )
+        : options,
+    [normalizedQuery, options],
+  );
+  const menuWidth = Math.min(MENU_WIDTH_BY_KIND[kind], Math.max(180, window.width - 80));
+  const menuHeight = Math.min(
+    placement === "below" ? 160 : MAX_MENU_HEIGHT,
+    Math.max(120, window.height * 0.45),
+  );
+  return (
+    <View
+      style={[
+        styles.menu,
+        placement === "below" ? styles.menuBelow : styles.menuAbove,
+        { left: 0 },
+        { width: menuWidth, maxHeight: menuHeight },
+      ]}
+    >
+      <View style={styles.menuSearchRow}>
+        <Icon name="Search" color={theme.colors.foregroundMuted} size={15} />
+        <TextInput
+          nativeID={`workspace-create-menu-search-${kind}`}
+          autoFocus
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          placeholder="搜索"
+          placeholderTextColor={theme.colors.foregroundMuted}
+          selectionColor={theme.colors.accent}
+          style={styles.menuSearchInput}
+        />
+        {searchQuery ? (
+          <Pressable accessibilityLabel="清除搜索" onPress={() => setSearchQuery("")}>
+            <Icon name="X" color={theme.colors.foregroundMuted} size={14} />
+          </Pressable>
+        ) : null}
+      </View>
+      <View style={styles.modelBrowserSeparator} />
+      <ScrollView
+        style={[styles.menuScroll, { maxHeight: menuHeight - 12 }]}
+        contentContainerStyle={{ backgroundColor: menuBackground }}
+      >
+        {filteredOptions.map((option) => {
+          const selected = option.id === selectedId;
+          return (
+            <Pressable
+              key={option.id}
+              accessibilityRole="menuitem"
+              accessibilityState={{ selected }}
+              onPress={() => onSelect(option.id)}
+              style={[styles.menuItem, selected && styles.menuItemSelected]}
+            >
+              {option.projectIconDataUri !== undefined ? (
+                <View style={styles.menuIconBox}>
+                  <ProjectIcon dataUri={option.projectIconDataUri} label={option.label} theme={theme} />
+                </View>
+              ) : option.iconName ? (
+                <View style={styles.menuIconBox}>
+                  <Icon name={option.iconName} color={theme.colors.foreground} size={16} />
+                </View>
+              ) : null}
+              <View style={styles.menuTextGroup}>
+                <Text style={styles.menuLabel} numberOfLines={1}>
+                  {option.label}
+                </Text>
+                {option.detail ? (
+                  <Text style={styles.menuDetail} numberOfLines={1}>
+                    {option.detail}
+                  </Text>
+                ) : null}
+              </View>
+              {selected ? <Icon name="Check" color={theme.colors.accent} size={13} /> : null}
+            </Pressable>
+          );
+        })}
+        {filteredOptions.length === 0 ? <Text style={styles.menuEmptyText}>没有匹配结果</Text> : null}
+      </ScrollView>
+    </View>
+  );
+}

package/client/components/WorkspaceSelectControl.tsx

@@ -0,0 +1,52 @@
+import React, { useMemo } from "react";
+import { Pressable, Text } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { ControlGlyph } from "./ControlGlyph";
+import { ProviderBrandIcon } from "./ProviderBrandIcon";
+import type { OpenMenu } from "../workspace-creator/types";
+import { createControlStyles } from "../workspace-creator/control-styles";
+
+export function SelectControl({
+  kind,
+  value,
+  disabled,
+  open,
+  onPress,
+  theme,
+  iconName,
+  providerId,
+}: {
+  kind: Exclude<OpenMenu, null>;
+  value: string;
+  disabled?: boolean;
+  open: boolean;
+  onPress: () => void;
+  theme: PluginSurfaceProps["theme"];
+  iconName?: string;
+  providerId?: string | null;
+}) {
+  const styles = useMemo(() => createControlStyles(theme), [theme]);
+  const iconColor = theme.colors.foregroundMuted;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`切换 ${value}`}
+      disabled={disabled}
+      onPress={onPress}
+      style={[styles.control, open && styles.controlOpen, disabled && styles.controlDisabled]}
+    >
+      {kind === "model" && providerId ? (
+        <ProviderBrandIcon providerId={providerId} color={iconColor} size={16} />
+      ) : kind === "provider" ? null : iconName ? (
+        <Icon name={iconName} color={iconColor} size={16} />
+      ) : (
+        <ControlGlyph kind={kind} color={iconColor} />
+      )}
+      <Text style={styles.controlValue} numberOfLines={1}>
+        {value}
+      </Text>
+      <Icon name="ChevronDown" color={iconColor} size={12} />
+    </Pressable>
+  );
+}

package/client/components/agent-conversation-types.ts

@@ -0,0 +1,7 @@
+export interface AgentTimelineEntry {
+  item: { type: string; [key: string]: any };
+  timestamp: string;
+  seqStart: number;
+  turnId?: string;
+}
+