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

package/client/components/AgentRow.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Easing, Text, TouchableOpacity, View, type ViewStyle, type TextStyle } from "react-native";
+import { type PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { copyText } from "@getpaseo/plugin/client/react-native";
+import { type AgentEntry } from "../../shared/overview-types";
+import { BadgeWithTooltip } from "./Tooltip";
+import { statusColor, statusRowBackground } from "./Tooltip";
+
+/** Format an ISO timestamp as a compact relative time like "3m ago" / "2h ago" / "5d ago". */
+function formatRelativeTime(iso: string | null | undefined): string {
+  if (!iso) return "";
+  const then = new Date(iso).getTime();
+  if (Number.isNaN(then)) return "";
+  const diffMs = Date.now() - then;
+  if (diffMs < 0) return "just now";
+  const sec = Math.floor(diffMs / 1000);
+  if (sec < 60) return "just now";
+  const min = Math.floor(sec / 60);
+  if (min < 60) return `${min}m ago`;
+  const hour = Math.floor(min / 60);
+  if (hour < 24) return `${hour}h ago`;
+  const day = Math.floor(hour / 24);
+  if (day < 30) return `${day}d ago`;
+  const month = Math.floor(day / 30);
+  if (month < 12) return `${month}mo ago`;
+  const year = Math.floor(month / 12);
+  return `${year}y ago`;
+}
+
+export function AgentRow({ agent, theme, compact, onSelect }: { agent: AgentEntry; theme: PluginSurfaceProps["theme"]; compact: boolean; onSelect: () => void }) {
+  const activityAt = agent.lastUserMessageAt ?? agent.updatedAt;
+  const activityLabel = formatRelativeTime(activityAt);
+  const activityTooltip = activityAt ? new Date(activityAt).toLocaleString() : "";
+
+  const isArchived = !!agent.archivedAt;
+
+  const rowBg = statusRowBackground(agent.status, agent.requiresAttention);
+  const [copied, setCopied] = useState(false);
+  const copyFade = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!copied) return;
+    Animated.timing(copyFade, { toValue: 1, duration: 150, easing: Easing.in(Easing.ease), useNativeDriver: true }).start();
+    const timer = setTimeout(() => {
+      Animated.timing(copyFade, { toValue: 0, duration: 300, easing: Easing.out(Easing.ease), useNativeDriver: true }).start();
+      setTimeout(() => setCopied(false), 300);
+    }, 1200);
+    return () => clearTimeout(timer);
+  }, [copied, copyFade]);
+
+  const styles = useMemo(
+    () =>
+      ({
+        row: {
+          flexDirection: "row" as const,
+          alignItems: "center" as const,
+          paddingHorizontal: 12,
+          paddingLeft: 32,
+          paddingVertical: 6,
+          backgroundColor: rowBg || undefined,
+          opacity: isArchived ? 0.5 : 1,
+        } as ViewStyle,
+        title: {
+          color: theme.colors.foreground,
+          fontSize: 12,
+          flex: 1,
+          textDecorationLine: isArchived ? "line-through" as const : "none" as const,
+        } as TextStyle,
+        meta: {
+          color: theme.colors.foregroundMuted,
+          fontSize: 11,
+          marginLeft: 8,
+        } as TextStyle,
+      }),
+    [theme, compact, rowBg, isArchived],
+  );
+
+  const handleLongPress = useCallback(() => {
+    void copyText(agent.id).then(() => setCopied(true)).catch(() => {});
+  }, [agent.id]);
+
+  return (
+    <TouchableOpacity onPress={onSelect} onLongPress={handleLongPress} activeOpacity={0.7}>
+      <View style={styles.row}>
+        <Text style={styles.title} numberOfLines={1}>
+          {agent.title ?? agent.id.slice(0, 8)}
+          {isArchived ? " (archived)" : ""}
+        </Text>
+        {activityLabel ? (
+        <BadgeWithTooltip
+          label={activityLabel}
+          tooltipLines={[{ key: "Last active", value: activityTooltip }]}
+          theme={theme}
+          color={statusColor(agent.status, theme, agent.requiresAttention)}
+          pulsing={
+            agent.status === "running" ||
+            agent.status === "needs_input" ||
+            agent.status === "initializing"
+          }
+        />
+      ) : null}
+        <Animated.View style={[{ position: "absolute", right: 8, top: 0, paddingHorizontal: 4, paddingVertical: 1, borderRadius: 3, backgroundColor: theme.colors.accent + "22" }, { opacity: copyFade }]}>
+          <Text style={{ color: theme.colors.accentForeground, fontSize: 10, fontWeight: "600" as const }}>Copied!</Text>
+        </Animated.View>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/client/components/BadgeWithTooltip.tsx

@@ -0,0 +1,119 @@
+import React, { useEffect, useMemo, useRef } from "react";
+import { Animated, Easing, Text, TouchableOpacity, View, type TextStyle, type ViewStyle } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import type { TooltipLine } from "../../shared/overview-types";
+import { useTooltip } from "./Tooltip";
+
+/**
+ * A badge that, on hover, asks the surface root to render a tooltip near the
+ * badge. Rendering at the root avoids being clipped by the card's
+ * `overflow: hidden`.
+ *
+ * Uses RN Web's `onMouseEnter`/`onMouseLeave` (not in the RN type defs) and
+ * `measureInWindow` to compute window coordinates.
+ */
+export function BadgeWithTooltip({
+  label,
+  tooltipLines,
+  theme,
+  color,
+  pulsing,
+  onPress,
+}: {
+  label: string;
+  tooltipLines: TooltipLine[];
+  theme: PluginSurfaceProps["theme"];
+  /** Optional semantic color; when provided, the badge uses it as a tinted
+   *  background with matching foreground. Falls back to neutral gray. */
+  color?: string;
+  /** Pulse the badge opacity — used for active (running/initializing) statuses. */
+  pulsing?: boolean;
+  /** Called when the badge is clicked/tapped. */
+  onPress?: () => void;
+}) {
+  const tooltipCtx = useTooltip();
+  const wrapperRef = useRef<View | null>(null);
+  const pulse = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    if (!pulsing) {
+      pulse.setValue(1);
+      return;
+    }
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(pulse, {
+          toValue: 0.45,
+          duration: 800,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(pulse, {
+          toValue: 1,
+          duration: 800,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [pulsing, pulse]);
+
+  const styles = useMemo(
+    () =>
+      ({
+        wrapper: {
+          marginLeft: 8,
+          flexShrink: 0,
+        } as ViewStyle,
+        badge: {
+          paddingHorizontal: 6,
+          paddingVertical: 2,
+          borderRadius: 4,
+          backgroundColor: color ? color + "22" : theme.colors.foregroundMuted + "14",
+        } as ViewStyle,
+        badgeText: {
+          color: color ?? theme.colors.foregroundMuted,
+          fontSize: 10,
+          fontWeight: color ? ("600" as const) : ("400" as const),
+        } as TextStyle,
+      }),
+    [theme, color],
+  );
+
+  const handleEnter = React.useCallback(() => {
+    if (!tooltipCtx || !wrapperRef.current) return;
+    wrapperRef.current.measureInWindow((x, y, width, height) => {
+      tooltipCtx.show({
+        x: x + width,
+        y: y + height,
+        lines: tooltipLines,
+      });
+    });
+  }, [tooltipCtx, tooltipLines]);
+
+  const handleLeave = React.useCallback(() => {
+    tooltipCtx?.hide();
+  }, [tooltipCtx]);
+
+  const handlePress = React.useCallback(() => {
+    onPress?.();
+  }, [onPress]);
+
+  return (
+    <TouchableOpacity
+      ref={wrapperRef}
+      style={styles.wrapper}
+      onPress={handlePress}
+      {...({
+        onMouseEnter: handleEnter,
+        onMouseLeave: handleLeave,
+      } as Record<string, unknown>)}
+    >
+      <Animated.View style={[styles.badge, pulsing ? { opacity: pulse } : null]}>
+        <Text style={styles.badgeText}>{label}</Text>
+      </Animated.View>
+    </TouchableOpacity>
+  );
+}

package/client/components/BranchRow.tsx

@@ -0,0 +1,121 @@
+import React, { useMemo } from "react";
+import { Text, TouchableOpacity, View, type ViewStyle, type TextStyle } from "react-native";
+import { type PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { type WorkspaceEntry, type AgentEntry, KIND_LABEL } from "../../shared/overview-types";
+import { BadgeWithTooltip, statusColor } from "./Tooltip";
+
+export function BranchRow({
+  workspace,
+  agents,
+  expanded,
+  onToggle,
+  onOpenDirectory,
+  onCreateAgent,
+  theme,
+  compact,
+  hostLabel,
+}: {
+  workspace: WorkspaceEntry;
+  agents: AgentEntry[];
+  expanded: boolean;
+  onToggle: () => void;
+  onOpenDirectory?: () => void;
+  onCreateAgent: () => void;
+  theme: PluginSurfaceProps["theme"];
+  compact: boolean;
+  hostLabel: string;
+}) {
+  const branchLabel = useMemo(() => {
+    const b = workspace.gitRuntime?.currentBranch;
+    if (b) return b.replace(/^heads\//, "");
+    return workspace.name;
+  }, [workspace.gitRuntime?.currentBranch, workspace.name]);
+
+  const styles = useMemo(
+    () =>
+      ({
+        row: {
+          flexDirection: "row" as const,
+          alignItems: "center" as const,
+          paddingHorizontal: 12,
+          paddingVertical: 8,
+        } as ViewStyle,
+        chevron: {
+          width: 16,
+          marginRight: 4,
+          alignItems: "center" as const,
+          justifyContent: "center" as const,
+        } as ViewStyle,
+        name: {
+          color: theme.colors.foreground,
+          fontSize: 13,
+          fontWeight: "500" as const,
+          flex: 1,
+        } as TextStyle,
+        createButton: {
+          width: 26,
+          height: 26,
+          marginLeft: 8,
+          alignItems: "center" as const,
+          justifyContent: "center" as const,
+        } as ViewStyle,
+      }),
+    [theme],
+  );
+
+  // Compose tooltip content as key/value rows.
+  const tooltipLines = useMemo(() => {
+    const lines: Array<{ key: string; value: string }> = [
+      { key: "Kind", value: KIND_LABEL[workspace.workspaceKind] ?? workspace.workspaceKind },
+      { key: "Branch", value: branchLabel },
+      { key: "Directory", value: workspace.workspaceDirectory },
+      { key: "Host", value: hostLabel },
+      { key: "Status", value: workspace.status },
+    ];
+    if (workspace.statusEnteredAt) {
+      lines.push({ key: "Since", value: new Date(workspace.statusEnteredAt).toLocaleString() });
+    }
+    if (agents.length > 0) {
+      lines.push({ key: "Agents", value: String(agents.length) });
+    }
+    return lines;
+  }, [workspace, branchLabel, hostLabel, agents.length]);
+
+  return (
+    <TouchableOpacity onPress={onToggle} activeOpacity={0.7}>
+      <View style={styles.row}>
+        <View style={styles.chevron}>
+          <Icon name={expanded ? "ChevronDown" : "ChevronRight"} color={theme.colors.foregroundMuted} size={10} />
+        </View>
+        <Text style={styles.name} numberOfLines={1}>
+          {branchLabel}
+        </Text>
+        <BadgeWithTooltip
+          label={KIND_LABEL[workspace.workspaceKind] ?? workspace.workspaceKind}
+          tooltipLines={tooltipLines}
+          theme={theme}
+          color={statusColor(workspace.status, theme)}
+          pulsing={
+            workspace.status === "running" ||
+            workspace.status === "needs_input" ||
+            workspace.status === "initializing"
+          }
+          onPress={onOpenDirectory}
+        />
+        <TouchableOpacity
+          accessibilityRole="button"
+          accessibilityLabel={`在 ${branchLabel} 新建 Agent`}
+          style={styles.createButton}
+          onPress={(event) => {
+            event.stopPropagation();
+            onCreateAgent();
+          }}
+          hitSlop={{ top: 6, bottom: 6, left: 6, right: 6 }}
+        >
+          <Icon name="Plus" color={theme.colors.foregroundMuted} size={18} />
+        </TouchableOpacity>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/client/components/ControlGlyph.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import type { OpenMenu } from "../workspace-creator/types";
+
+export function ControlGlyph({ kind, color }: { kind: Exclude<OpenMenu, null>; color: string }) {
+  const names: Record<Exclude<OpenMenu, null>, string> = {
+    project: "Folder",
+    host: "Circle",
+    isolation: "GitBranch",
+    base: "GitBranch",
+    launch: "MessageCircle",
+    provider: "Boxes",
+    model: "Atom",
+    mode: "ListFilter",
+    thinking: "Brain",
+  };
+  return <Icon name={names[kind]} color={color} size={16} />;
+}

package/client/components/HeatmapCalendar.tsx

@@ -0,0 +1,165 @@
+import React, { useMemo, useRef, useState } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import type { ColorLevel, HeatmapDay } from "../hooks/useAgentActivityHeatmap";
+import { buildHeatmapGrid, getColorLevel, getColors, getCellColor, WEEKDAY_LABELS } from "../hooks/useAgentActivityHeatmap";
+
+export interface HeatmapWorkspaceMeta {
+  projectId: string;
+  projectDisplayName: string;
+  projectOrder: number;
+}
+
+interface HeatmapCalendarProps {
+  days: HeatmapDay[];
+  maxCount: number;
+  theme: PluginSurfaceProps["theme"];
+  selectedDate: string | null;
+  onSelectDate: (date: string) => void;
+  workspaceMeta: Map<string, HeatmapWorkspaceMeta>;
+}
+
+function formatDisplayDate(date: string) {
+  const [year, month, day] = date.split("-");
+  return `${year}年${Number(month)}月${Number(day)}日`;
+}
+
+export const HeatmapCalendar = React.memo(function HeatmapCalendar({ days, maxCount, theme, selectedDate, onSelectDate, workspaceMeta }: HeatmapCalendarProps) {
+  const { gridStart, totalWeeks, monthLabels } = useMemo(() => buildHeatmapGrid(365), []);
+  const colors = getColors(theme);
+  const CELL = 12;
+  const GAP = 3;
+  const COLUMN_W = CELL + GAP;
+  const ROW_H = CELL + GAP;
+  const GRID_WIDTH = totalWeeks * COLUMN_W;
+  const TOOLTIP_WIDTH = 230;
+  // Left offset of the grid inside the outer container (weekday label column width + its padding)
+  const GRID_LEFT_OFFSET = 34;
+  // Height occupied by the month-label row above the heatmap grid (approx.)
+  const MONTH_LABEL_ROW_H = 24;
+  // Tooltip left base: GRID_LEFT_OFFSET + CELL (skip label col + one cell width)
+  const TOOLTIP_LEFT_BASE = GRID_LEFT_OFFSET + CELL;
+  // Tooltip vertical bounds
+  const TOOLTIP_TOP_MIN = 38;
+  const TOOLTIP_TOP_MAX_BASE = 60;
+  // Weekday label column width (reused for bottom-calculation as label-row height proxy)
+  const WEEKDAY_COL_W = 34;
+  // Height per project line in tooltip
+  const PROJECT_LINE_H = 19;
+  // Outer container padding
+  const OUTER_PAD = 12;
+  const [hoveredCell, setHoveredCell] = useState<{ day: HeatmapDay; week: number; weekday: number } | null>(null);
+  const [scrollX, setScrollX] = useState(0);
+  const [calendarSize, setCalendarSize] = useState({ width: 0, height: 0 });
+  const scrollRef = useRef<ScrollView | null>(null);
+  const didAutoScroll = useRef(false);
+  const hoveredDay = hoveredCell?.day ?? null;
+  const gridCenterOffset = Math.max(0, (calendarSize.width - MONTH_LABEL_ROW_H - GRID_LEFT_OFFSET - GRID_WIDTH) / 2);
+
+  const hoveredProjects = useMemo(() => {
+    if (!hoveredDay) return [];
+    const counts = new Map<string, { id: string; name: string; count: number; order: number }>();
+    for (const agent of hoveredDay.agents) {
+      const meta = agent.workspaceId ? workspaceMeta.get(agent.workspaceId) : undefined;
+      const key = meta?.projectId ?? "unknown";
+      const current = counts.get(key);
+      counts.set(key, { id: key, name: meta?.projectDisplayName ?? "其他项目", count: (current?.count ?? 0) + 1, order: meta?.projectOrder ?? Number.MAX_SAFE_INTEGER });
+    }
+    return [...counts.values()].sort((a, b) => a.order - b.order);
+  }, [hoveredDay, workspaceMeta]);
+
+  const rows = useMemo(() => {
+    const values = new Map(days.map((day) => [day.date, day]));
+    const firstDate = days[0]?.date;
+    const lastDate = days[days.length - 1]?.date;
+    return Array.from({ length: 7 }, (_, weekday) =>
+      Array.from({ length: totalWeeks }, (_, week) => {
+        const date = new Date(gridStart);
+        date.setDate(gridStart.getDate() + week * 7 + weekday);
+        const dateKey = [date.getFullYear(), String(date.getMonth() + 1).padStart(2, "0"), String(date.getDate()).padStart(2, "0")].join("-");
+        const isPadding = !firstDate || !lastDate || dateKey < firstDate || dateKey > lastDate;
+        const value = values.get(dateKey);
+        return { date: dateKey, count: isPadding ? 0 : (value?.count ?? 0), agents: isPadding ? [] : (value?.agents ?? []), isPadding };
+      }),
+    );
+  }, [days, gridStart, totalWeeks]);
+
+  return (
+    <View onLayout={(event) => setCalendarSize({ width: event.nativeEvent.layout.width, height: event.nativeEvent.layout.height })} style={{ marginBottom: OUTER_PAD, padding: OUTER_PAD, borderRadius: 10, borderWidth: 1, borderColor: colors.border, backgroundColor: colors.surface1, position: "relative" }}>
+      <View style={{ flexDirection: "row", alignItems: "baseline", justifyContent: "space-between", marginBottom: 12 }}>
+        <Text style={{ color: colors.foregroundMuted, fontSize: 11 }}>近一年每日 Agent 活动</Text>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: 4 }}>
+          <Text style={{ color: colors.foregroundMuted, fontSize: 9 }}>少</Text>
+          {(["none", "low", "medium", "high", "very-high"] as ColorLevel[]).map((level) => (
+            <View key={level} style={{ width: CELL, height: CELL, borderRadius: 3, backgroundColor: getCellColor(level, theme) }} />
+          ))}
+          <Text style={{ color: colors.foregroundMuted, fontSize: 9 }}>多</Text>
+        </View>
+      </View>
+
+      {hoveredCell ? (
+        <View pointerEvents="none" style={{ position: "absolute", left: (() => { const cellLeft = TOOLTIP_LEFT_BASE + gridCenterOffset + hoveredCell.week * COLUMN_W - scrollX; return cellLeft + CELL + 10 + TOOLTIP_WIDTH <= calendarSize.width - OUTER_PAD ? cellLeft + CELL + 10 : Math.max(OUTER_PAD, cellLeft - TOOLTIP_WIDTH - 10); })(), top: Math.max(TOOLTIP_TOP_MIN, Math.min(TOOLTIP_TOP_MAX_BASE + hoveredCell.weekday * ROW_H - 8, calendarSize.height - (WEEKDAY_COL_W + Math.max(1, hoveredProjects.length) * PROJECT_LINE_H) - OUTER_PAD)), zIndex: 20, width: TOOLTIP_WIDTH, paddingHorizontal: OUTER_PAD, paddingVertical: 10, borderRadius: 8, borderWidth: 1, borderColor: colors.border, backgroundColor: colors.surface0, shadowColor: "#000", shadowOpacity: 0.22, shadowRadius: 10, shadowOffset: { width: 0, height: 5 }, elevation: 10 }}>
+          <Text style={{ color: colors.foreground, fontSize: 11, fontWeight: "600" }}>{formatDisplayDate(hoveredCell.day.date)}</Text>
+          {hoveredProjects.length > 0 ? hoveredProjects.map((project) => (
+            <View key={project.id} style={{ flexDirection: "row", justifyContent: "space-between", gap: 16, marginTop: 5 }}>
+              <Text numberOfLines={1} style={{ color: colors.foregroundMuted, fontSize: 10, flex: 1 }}>{project.name}</Text>
+              <Text style={{ color: colors.foreground, fontSize: 10 }}>{project.count} 个 Agent</Text>
+            </View>
+          )) : <Text style={{ color: colors.foregroundMuted, fontSize: 10, marginTop: 5 }}>当天没有项目活动</Text>}
+        </View>
+      ) : null}
+
+      <View style={{ flexDirection: "row", justifyContent: gridCenterOffset > 0 ? "center" : "flex-start" }}>
+        <View style={{ width: WEEKDAY_COL_W, paddingTop: 20 }}>
+          {WEEKDAY_LABELS.map((label) => (
+            <View key={label} style={{ height: ROW_H, justifyContent: "center", alignItems: "flex-end", paddingRight: 6 }}>
+              <Text style={{ color: colors.foregroundMuted, fontSize: 9, lineHeight: ROW_H }}>{label}</Text>
+            </View>
+          ))}
+        </View>
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          scrollEventThrottle={16}
+          onLayout={(event) => {
+            const viewportWidth = event.nativeEvent.layout.width;
+            if (GRID_WIDTH <= viewportWidth) {
+              didAutoScroll.current = false;
+              return;
+            }
+            if (!didAutoScroll.current) {
+              didAutoScroll.current = true;
+              setTimeout(() => scrollRef.current?.scrollToEnd({ animated: false }), 0);
+            }
+          }}
+          onScroll={(event) => setScrollX(event.nativeEvent.contentOffset.x)}
+          style={{ flexGrow: 0 }}
+        >
+          <View style={{ width: GRID_WIDTH }}>
+            <View style={{ height: 20, position: "relative" }}>
+              {monthLabels.map(({ weekIndex, label }) => (
+                <Text key={weekIndex} style={{ position: "absolute", left: weekIndex * COLUMN_W, color: colors.foregroundMuted, fontSize: 9 }}>{label}</Text>
+              ))}
+            </View>
+            {rows.map((row, weekday) => (
+              <View key={weekday} style={{ flexDirection: "row", height: ROW_H, gap: GAP }}>
+                {row.map((cell, week) => (
+                  <Pressable key={cell.date} disabled={cell.isPadding} accessibilityRole="button" accessibilityLabel={`${cell.date}: ${cell.count} 个 Agent`} onHoverIn={() => setHoveredCell({ day: cell, week, weekday })} onHoverOut={() => setHoveredCell((current) => current?.day.date === cell.date ? null : current)} onFocus={() => setHoveredCell({ day: cell, week, weekday })} onBlur={() => setHoveredCell((current) => current?.day.date === cell.date ? null : current)} onPress={() => onSelectDate(cell.date)}>
+                    {selectedDate === cell.date ? (
+                      <View style={{ width: CELL + 2, height: CELL + 2, marginLeft: -1, marginTop: -1, borderRadius: 4, padding: 2, backgroundColor: colors.accent, shadowColor: colors.accent, shadowOpacity: 0.45, shadowRadius: 3, shadowOffset: { width: 0, height: 0 }, elevation: 4 }}>
+                        <View style={{ flex: 1, borderRadius: 2, backgroundColor: getCellColor(getColorLevel(cell.count, maxCount), theme) }} />
+                      </View>
+                    ) : (
+                      <View style={{ width: CELL, height: CELL, borderRadius: 3, backgroundColor: cell.isPadding ? colors.surface1 : getCellColor(getColorLevel(cell.count, maxCount), theme) }} />
+                    )}
+                  </Pressable>
+                ))}
+              </View>
+            ))}
+          </View>
+        </ScrollView>
+      </View>
+    </View>
+  );
+});

package/client/components/ModelBrowserMenu.tsx

@@ -0,0 +1,135 @@
+import React, { useMemo, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon, ScrollView, TextInput } from "@getpaseo/plugin/client/react-native";
+import { ProviderBrandIcon } from "./ProviderBrandIcon";
+import { selectableModels } from "../workspace-creator/provider-selection";
+import { opaqueSurfaceColor } from "../workspace-creator/ui-utils";
+import type { ComposerSelection, ProviderEntry } from "../workspace-creator/types";
+import { createMenuStyles } from "./workspace-creator-styles";
+
+export function ModelBrowserMenu({
+  providers,
+  selection,
+  onSelect,
+  theme,
+}: {
+  providers: ProviderEntry[];
+  selection: ComposerSelection | null;
+  onSelect: (id: string) => void;
+  theme: PluginSurfaceProps["theme"];
+}) {
+  const [providerId, setProviderId] = useState<string | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const styles = useMemo(() => createMenuStyles(theme), [theme]);
+  const backgroundColor = opaqueSurfaceColor(theme.colors.surface0, theme.colors.foreground);
+  const provider = providerId ? providers.find((entry) => entry.provider === providerId) ?? null : null;
+  const models = selectableModels(provider);
+  const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
+  const filteredModels = models.filter((model) =>
+    [model.label, model.id].some((value) => value.toLocaleLowerCase().includes(normalizedQuery)),
+  );
+  const filteredProviders = providers.filter((entry) => {
+    if (!normalizedQuery) return true;
+    if ([entry.label, entry.provider].some((value) => value?.toLocaleLowerCase().includes(normalizedQuery))) {
+      return true;
+    }
+    return selectableModels(entry).some((model) =>
+      [model.label, model.id].some((value) => value.toLocaleLowerCase().includes(normalizedQuery)),
+    );
+  });
+
+  const search = (
+    <>
+      <View style={[styles.menuSearchRow, { backgroundColor }]}>
+        <Icon name="Search" color={theme.colors.foregroundMuted} size={15} />
+        <TextInput
+          nativeID="workspace-create-model-search"
+          autoFocus
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          placeholder={provider ? "搜索 Model" : "搜索 Provider 或 Model"}
+          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} />
+    </>
+  );
+
+  return (
+    <View style={[styles.menu, styles.menuAbove, styles.modelBrowserMenu, { left: 0 }]}>
+      {provider ? (
+        <>
+          <Pressable onPress={() => setProviderId(null)} style={[styles.modelBrowserHeader, { backgroundColor }]}>
+            <Icon name="ChevronLeft" color={theme.colors.foregroundMuted} size={16} />
+            <ProviderBrandIcon providerId={provider.provider} color={theme.colors.foregroundMuted} size={16} />
+            <Text style={styles.modelBrowserTitle} numberOfLines={1}>{provider.label ?? provider.provider}</Text>
+          </Pressable>
+          <View style={styles.modelBrowserSeparator} />
+          {search}
+          <ScrollView style={[styles.menuScroll, { backgroundColor }]} contentContainerStyle={{ backgroundColor }}>
+            {filteredModels.map((model) => {
+              const selected = selection?.providerId === provider.provider && selection.modelId === model.id;
+              return (
+                <Pressable
+                  key={model.id}
+                  onPress={() => onSelect(`${provider.provider}::${model.id}`)}
+                  style={[styles.menuItem, { backgroundColor }]}
+                >
+                  <View style={styles.menuTextGroup}>
+                    <Text style={styles.menuLabel} numberOfLines={1}>{model.label}</Text>
+                    {model.id !== model.label ? <Text style={styles.menuDetail} numberOfLines={1}>{model.id}</Text> : null}
+                  </View>
+                  <View style={styles.modelBrowserTrailing}>
+                    {selected ? <Icon name="Check" color={theme.colors.foregroundMuted} size={16} /> : null}
+                  </View>
+                </Pressable>
+              );
+            })}
+            {filteredModels.length === 0 ? <Text style={styles.menuEmptyText}>没有匹配结果</Text> : null}
+          </ScrollView>
+        </>
+      ) : (
+        <>
+          <View style={[styles.modelBrowserHeading, { backgroundColor }]}>
+            <Text style={styles.modelBrowserSectionLabel}>Providers</Text>
+          </View>
+          {search}
+          <ScrollView style={[styles.menuScroll, { backgroundColor }]} contentContainerStyle={{ backgroundColor }}>
+            {filteredProviders.map((entry, index) => {
+              const count = selectableModels(entry).length;
+              return (
+                <View key={entry.provider}>
+                  {index > 0 ? <View style={styles.modelBrowserSeparator} /> : null}
+                  <Pressable
+                    onPress={() => {
+                      const providerMatches = [entry.label, entry.provider].some((value) =>
+                        value?.toLocaleLowerCase().includes(normalizedQuery),
+                      );
+                      if (providerMatches) setSearchQuery("");
+                      setProviderId(entry.provider);
+                    }}
+                    style={[styles.menuItem, styles.modelBrowserProviderRow, { backgroundColor }]}
+                  >
+                    <ProviderBrandIcon providerId={entry.provider} color={theme.colors.foregroundMuted} size={16} />
+                    <Text style={[styles.menuLabel, styles.modelBrowserProviderLabel]} numberOfLines={1}>{entry.label ?? entry.provider}</Text>
+                    <Text style={styles.modelBrowserCount}>{count} {count === 1 ? "model" : "models"}</Text>
+                    <Icon name="ChevronRight" color={theme.colors.foregroundMuted} size={16} />
+                  </Pressable>
+                </View>
+              );
+            })}
+            {filteredProviders.length === 0 ? <Text style={styles.menuEmptyText}>没有匹配结果</Text> : null}
+          </ScrollView>
+        </>
+      )}
+    </View>
+  );
+}