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

package/client/components/SharedComposerInput.tsx

@@ -0,0 +1,383 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Image, Platform, Pressable, Text, View, useWindowDimensions, type NativeSyntheticEvent, type TextInputKeyPressEventData } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon, Modal, TextInput } from "@getpaseo/plugin/client/react-native";
+import { ModelBrowserMenu } from "./ModelBrowserMenu";
+import { Menu } from "./WorkspaceMenu";
+import { SelectControl } from "./WorkspaceSelectControl";
+import {
+  providerById,
+  readyProviders,
+  selectableModels,
+  defaultModel,
+} from "../workspace-creator/provider-selection";
+import { formatControlValue } from "../workspace-creator/ui-utils";
+import type {
+  ComposerSelection,
+  OpenMenu,
+  ProviderSnapshot,
+} from "../workspace-creator/types";
+import { createComposerStyles } from "./workspace-creator-styles";
+import { subscribeToImagePaste, subscribeToImeEnter, type PastedImage } from "../web";
+
+function getColors(theme: PluginSurfaceProps["theme"]) {
+  if (!theme || !theme.colors) {
+    return {
+      surface0: "#1e1e1e",
+      surface1: "#252526",
+      foreground: "#ffffff",
+      foregroundMuted: "#888888",
+      accent: "#007acc",
+      accentForeground: "#ffffff",
+      statusWarning: "#f59e0b",
+      statusDanger: "#ef4444",
+    };
+  }
+  return theme.colors;
+}
+
+function PastedImagePill({
+  image,
+  disabled,
+  onRemove,
+  theme,
+}: {
+  image: PastedImage;
+  disabled: boolean;
+  onRemove: () => void;
+  theme: PluginSurfaceProps["theme"];
+}) {
+  const [hovered, setHovered] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
+  const { height } = useWindowDimensions();
+  const showRemove = Platform.OS !== "web" || hovered;
+  return (
+    <View style={{ position: "relative" }}>
+      <Modal title={image.fileName} open={previewOpen} onOpenChange={setPreviewOpen}>
+        <Modal.Content scrollable={false}>
+          <Image
+            accessibilityLabel={`图片预览 ${image.fileName}`}
+            source={{ uri: image.dataUrl }}
+            resizeMode="contain"
+            style={{ width: "100%", height: Math.max(120, Math.min(640, height * 0.65)) }}
+          />
+        </Modal.Content>
+      </Modal>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={`打开图片 ${image.fileName}`}
+        onPress={() => setPreviewOpen(true)}
+        disabled={disabled}
+        onHoverIn={() => setHovered(true)}
+        onHoverOut={() => setHovered(false)}
+        style={{
+          width: 50,
+          height: 50,
+          borderRadius: 8,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          overflow: "hidden",
+        }}
+      >
+        <Image source={{ uri: image.dataUrl }} style={{ width: 48, height: 48 }} resizeMode="cover" />
+      </Pressable>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={`移除图片 ${image.fileName}`}
+        disabled={disabled}
+        hitSlop={8}
+        onHoverIn={() => setHovered(true)}
+        onHoverOut={() => setHovered(false)}
+        onPress={onRemove}
+        style={{
+          position: "absolute",
+          top: -8,
+          left: -8,
+          width: 24,
+          height: 24,
+          borderRadius: 12,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.surface2,
+          alignItems: "center",
+          justifyContent: "center",
+          opacity: showRemove ? 1 : 0,
+          pointerEvents: showRemove ? "auto" : "none",
+          zIndex: 1,
+        }}
+      >
+        <Icon name="X" size={12} color={theme.colors.foregroundMuted} />
+      </Pressable>
+    </View>
+  );
+}
+
+export interface SharedComposerInputProps {
+  /** Current selection state (provider/model/mode/thinking) */
+  selection: ComposerSelection | null;
+  /** Provider snapshot with all available providers */
+  snapshot: ProviderSnapshot | null;
+  /** Whether providers are still loading */
+  providerLoading: boolean;
+  /** Currently open dropdown menu */
+  openMenu: OpenMenu;
+  /** Callback to toggle/close menus */
+  onToggleMenu: (menu: OpenMenu) => void;
+  /** Callback when selection changes */
+  onSelectModel: (combinedId: string) => void;
+  onSelectMode: (modeId: string) => void;
+  onSelectThinking: (thinkingId: string) => void;
+  /** Whether agent is currently running (shows stop button instead of send) */
+  isAgentRunning: boolean;
+  /** Whether a cancel operation is in progress */
+  isCancelling: boolean;
+  /** Callback to cancel the running agent */
+  onCancel: () => void;
+  /** Placeholder text for the input */
+  placeholder: string;
+  /** Theme from plugin surface */
+  theme: PluginSurfaceProps["theme"];
+  /** Optional: disable the send button (e.g., when pending) */
+  disabled?: boolean;
+  showAgentControls?: boolean;
+  autoFocus?: boolean;
+  inputNativeID?: string;
+  pendingLabel?: string | null;
+  value: string;
+  onChangeText: (value: string) => void;
+  onSubmit: () => void | Promise<void>;
+  images?: PastedImage[];
+  onImagesChange?: (images: PastedImage[]) => void;
+  onPasteError?: (message: string) => void;
+  usage?: { contextWindowMaxTokens?: number; contextWindowUsedTokens?: number; totalCostUsd?: number } | null;
+  onKeyPress?: (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => void;
+}
+
+export function SharedComposerInput({
+  selection,
+  snapshot,
+  providerLoading,
+  openMenu,
+  onToggleMenu,
+  onSelectModel,
+  onSelectMode,
+  onSelectThinking,
+  isAgentRunning,
+  isCancelling,
+  onCancel,
+  placeholder,
+  theme,
+  disabled = false,
+  showAgentControls = true,
+  autoFocus = false,
+  inputNativeID = "workspace-create-prompt",
+  pendingLabel = null,
+  value,
+  onChangeText,
+  onSubmit,
+  images = [],
+  onImagesChange,
+  onPasteError,
+  usage = null,
+  onKeyPress,
+}: SharedComposerInputProps) {
+  const [usageOpen, setUsageOpen] = useState(false);
+  const colors = getColors(theme);
+  const styles = useMemo(() => createComposerStyles(theme), [theme]);
+  const hasInput = value.trim().length > 0 || images.length > 0;
+  const usagePercentage = usage?.contextWindowMaxTokens && usage.contextWindowUsedTokens != null
+    ? Math.max(0, Math.min(100, Math.round((usage.contextWindowUsedTokens / usage.contextWindowMaxTokens) * 100)))
+    : null;
+  const usageColor = usagePercentage != null && usagePercentage > 90
+    ? colors.statusDanger
+    : usagePercentage != null && usagePercentage >= 70
+      ? colors.statusWarning
+      : colors.foregroundMuted;
+
+  // Derived state for selectors (mirrors WorkspaceCreateComposer)
+  const currentProvider = providerById(snapshot, selection?.providerId ?? "");
+  const models = selectableModels(currentProvider);
+  const modes = currentProvider?.modes ?? [];
+  const selectedMode = modes.find((item) => item.id === selection?.modeId) ?? null;
+  const model = models.find((item) => item.id === selection?.modelId) ?? defaultModel(currentProvider);
+  const thinkingOptions = model?.thinkingOptions ?? [];
+
+  const providers = readyProviders(snapshot ?? { entries: [] });
+  const modelOptions = providers.flatMap((entry) =>
+    selectableModels(entry).map((item) => ({
+      id: `${entry.provider}::${item.id}`,
+      label: item.label,
+      detail: entry.label ?? entry.provider,
+    })),
+  );
+  const modeOptions = (modes.length > 0
+    ? modes
+    : selection?.modeId ? [{ id: selection.modeId, label: selection.modeLabel ?? selection.modeId }] : []
+  ).map((item) => ({
+    id: item.id,
+    label: item.label ?? item.id,
+    detail: item.description,
+    iconName: item.icon,
+  }));
+  const thinkingOptionsForMenu = (thinkingOptions.length > 0
+    ? thinkingOptions
+    : selection?.thinkingOptionId ? [{ id: selection.thinkingOptionId, label: selection.thinkingLabel ?? selection.thinkingOptionId }] : []
+  ).map((item) => ({
+    id: item.id,
+    label: item.label ?? item.id,
+    iconName: "Brain",
+  }));
+
+  const composerMenuOpen =
+    openMenu === "model" || openMenu === "mode" || openMenu === "thinking";
+
+  useEffect(() => subscribeToImagePaste(
+    inputNativeID,
+    (pasted) => onImagesChange?.([...images, ...pasted]),
+    (message) => onPasteError?.(message),
+  ), [images, inputNativeID, onImagesChange, onPasteError]);
+
+  useEffect(() => subscribeToImeEnter(inputNativeID), [inputNativeID]);
+
+  return (
+    <View style={[styles.inputWrapper, composerMenuOpen && styles.menuRegionActive]}>
+      {images.length > 0 ? (
+        <View accessibilityLabel="图片附件" style={{ flexDirection: "row", flexWrap: "wrap", gap: 8 }}>
+          {images.map((image, index) => (
+            <PastedImagePill
+              key={`${image.fileName}-${index}`}
+              image={image}
+              disabled={disabled}
+              onRemove={() => onImagesChange?.(images.filter((_, imageIndex) => imageIndex !== index))}
+              theme={theme}
+            />
+          ))}
+        </View>
+      ) : null}
+
+      <TextInput
+        nativeID={inputNativeID}
+        style={styles.textInput}
+        placeholder={placeholder}
+        placeholderTextColor={colors.foregroundMuted + "66"}
+        multiline
+        autoFocus={autoFocus}
+        editable={!disabled}
+        value={value}
+        onChangeText={onChangeText}
+        onKeyPress={onKeyPress}
+      />
+
+      <View style={styles.buttonRow}>
+        {showAgentControls ? (
+          <View style={styles.leftControls}>
+            <View nativeID="workspace-create-dropdown-model" style={[styles.controlAnchor, openMenu === "model" && styles.controlAnchorOpen]}>
+              <SelectControl
+                kind="model"
+                providerId={selection?.providerId}
+                value={formatControlValue(selection?.modelLabel ?? null, "Model")}
+                disabled={disabled || providerLoading}
+                open={openMenu === "model"}
+                onPress={() => onToggleMenu(openMenu === "model" ? null : "model")}
+                theme={theme}
+              />
+              {openMenu === "model" ? (
+                <ModelBrowserMenu
+                  providers={providers}
+                  selection={selection}
+                  onSelect={onSelectModel}
+                  theme={theme}
+                />
+              ) : null}
+            </View>
+
+            {thinkingOptionsForMenu.length > 0 ? (
+              <View nativeID="workspace-create-dropdown-thinking" style={[styles.controlAnchor, openMenu === "thinking" && styles.controlAnchorOpen]}>
+                <SelectControl
+                  kind="thinking"
+                  value={formatControlValue(selection?.thinkingLabel ?? null, "Thinking")}
+                  disabled={disabled || providerLoading}
+                  open={openMenu === "thinking"}
+                  onPress={() => onToggleMenu(openMenu === "thinking" ? null : "thinking")}
+                  theme={theme}
+                />
+                {openMenu === "thinking" ? (
+                  <Menu
+                    kind="thinking"
+                    options={thinkingOptionsForMenu}
+                    selectedId={selection?.thinkingOptionId ?? null}
+                    onSelect={onSelectThinking}
+                    theme={theme}
+                  />
+                ) : null}
+              </View>
+            ) : null}
+
+            {modeOptions.length > 0 ? (
+              <View nativeID="workspace-create-dropdown-mode" style={[styles.controlAnchor, openMenu === "mode" && styles.controlAnchorOpen]}>
+                <SelectControl
+                  kind="mode"
+                  iconName={selectedMode?.icon ?? "Bot"}
+                  value={formatControlValue(selection?.modeLabel ?? null, "Mode")}
+                  disabled={disabled || providerLoading}
+                  open={openMenu === "mode"}
+                  onPress={() => onToggleMenu(openMenu === "mode" ? null : "mode")}
+                  theme={theme}
+                />
+                {openMenu === "mode" ? (
+                  <Menu
+                    kind="mode"
+                    options={modeOptions}
+                    selectedId={selection?.modeId ?? null}
+                    onSelect={onSelectMode}
+                    theme={theme}
+                  />
+                ) : null}
+              </View>
+            ) : null}
+          </View>
+        ) : (
+          <View style={styles.leftControls} />
+        )}
+
+        <View style={styles.rightControls}>
+          {usagePercentage != null ? <View style={{ position: "relative" }}><Pressable
+            accessibilityRole="button"
+            accessibilityLabel={`上下文已使用 ${usagePercentage}%${usage?.totalCostUsd ? `，费用 $${usage.totalCostUsd.toFixed(usage.totalCostUsd < 0.01 ? 4 : 2)}` : ""}`}
+            onPress={() => setUsageOpen((open) => !open)}
+            style={{ flexDirection: "row", alignItems: "center", gap: 5 }}
+          >
+            <View style={{ width: 12, height: 12, borderRadius: 6, borderWidth: 2, borderColor: usageColor }} />
+            <Text style={{ color: colors.foregroundMuted, fontSize: 11 }}>{usagePercentage}%</Text>
+          </Pressable>{usageOpen ? <View accessibilityLabel="上下文用量详情" style={{ position: "absolute", right: 0, bottom: 24, minWidth: 210, padding: 10, gap: 5, borderRadius: 8, borderWidth: 1, borderColor: colors.foregroundMuted + "44", backgroundColor: colors.surface1, zIndex: 50 }}>
+            <Text style={{ color: colors.foreground, fontSize: 12, fontWeight: "600" }}>Context usage</Text>
+            <Text style={{ color: colors.foregroundMuted, fontSize: 11 }}>Used: {(usage?.contextWindowUsedTokens ?? 0).toLocaleString()} tokens</Text>
+            <Text style={{ color: colors.foregroundMuted, fontSize: 11 }}>Window: {(usage?.contextWindowMaxTokens ?? 0).toLocaleString()} tokens</Text>
+            {usage?.totalCostUsd != null ? <Text style={{ color: colors.foregroundMuted, fontSize: 11 }}>Cost: ${usage.totalCostUsd.toFixed(usage.totalCostUsd < 0.01 ? 4 : 2)}</Text> : null}
+          </View> : null}</View> : null}
+          {pendingLabel ? <Text style={styles.pendingText}>{pendingLabel}</Text> : null}
+          {isAgentRunning && !hasInput ? (
+            <Pressable
+              accessibilityLabel={isCancelling ? "正在停止…" : "停止 Agent"}
+              onPress={onCancel}
+              disabled={isCancelling}
+              style={[styles.sendButton, disabled && styles.disabled]}
+            >
+              <Icon name={isCancelling ? "Loader" : "Square"} color="#fff" size={14} />
+            </Pressable>
+          ) : hasInput ? (
+            <Pressable
+              accessibilityRole="button"
+              accessibilityLabel="发送"
+              disabled={disabled || !hasInput}
+              onPress={() => void onSubmit()}
+              style={[styles.sendButton, (disabled || !hasInput) && styles.disabled]}
+            >
+              <Icon name="CornerDownLeft" color={colors.accentForeground} size={16} />
+            </Pressable>
+          ) : null}
+        </View>
+      </View>
+    </View>
+  );
+}

package/client/components/Tooltip.tsx

@@ -0,0 +1,49 @@
+import React, { createContext, useContext } from "react";
+import { type PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { type TooltipContextValue } from "../../shared/overview-types";
+
+/**
+ * Semantic status colors, chosen to read clearly on both light and dark themes.
+ * Independent of theme.colors because the theme palette is limited.
+ */
+const STATUS_COLORS = {
+  active: "#60a5fa", // light blue: running
+  pending: "#86efac", // light green: needs_input, attention
+  starting: "#3b82f6", // blue-500: initializing
+  danger: "#ef4444", // red-500: error, failed
+  warning: "#f97316", // orange-500: attention / requiresAttention (legacy)
+  idle: "#9ca3af", // gray-400: everything else
+} as const;
+
+export function statusColor(status: string, theme: PluginSurfaceProps["theme"], requiresAttention?: boolean): string {
+  if (requiresAttention || status === "attention" || status === "needs_input") return STATUS_COLORS.pending;
+  if (status === "running") return STATUS_COLORS.active;
+  if (status === "initializing") return STATUS_COLORS.starting;
+  if (status === "error" || status === "failed") return STATUS_COLORS.danger;
+  return theme.colors.foregroundMuted;
+}
+
+export function statusRowBackground(status: string, requiresAttention: boolean | undefined): string {
+  if (requiresAttention || status === "attention" || status === "needs_input") return STATUS_COLORS.pending + "18";
+  if (status === "error" || status === "failed") return STATUS_COLORS.danger + "22";
+  if (status === "running") return STATUS_COLORS.active + "12";
+  if (status === "initializing") return STATUS_COLORS.starting + "12";
+  return "";
+}
+
+const TooltipContext = createContext<TooltipContextValue | null>(null);
+
+export function useTooltip(): TooltipContextValue | null {
+  return useContext(TooltipContext);
+}
+
+export function TooltipProvider({ children, value }: { children: React.ReactNode; value: TooltipContextValue }) {
+  return (
+    <TooltipContext.Provider value={value}>
+      {children}
+    </TooltipContext.Provider>
+  );
+}
+
+
+export { BadgeWithTooltip } from "./BadgeWithTooltip";

package/client/components/WorkspaceAgentRow.tsx

@@ -0,0 +1,93 @@
+import React, { useMemo } from "react";
+import { Text, TouchableOpacity, View, type TextStyle, type ViewStyle } from "react-native";
+import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
+
+export function WorkspaceAgentRow({
+  agent,
+  theme,
+  compact,
+  navigation,
+}: {
+  agent: {
+    id: string;
+    title: string | null;
+    provider: string;
+    model: string | null;
+    status: string;
+    requiresAttention?: boolean;
+    archivedAt?: string | null;
+  };
+  theme: PluginWorkspacePanelProps["theme"];
+  compact: boolean;
+  navigation: NonNullable<PluginWorkspacePanelProps["navigation"]>;
+}) {
+  const isArchived = !!agent.archivedAt;
+
+  const styles = useMemo(
+    () =>
+      ({
+        row: {
+          flexDirection: "row" as const,
+          alignItems: "flex-start" as const,
+          padding: compact ? 8 : 10,
+          borderRadius: 6,
+          marginBottom: 4,
+          backgroundColor: agent.requiresAttention ? theme.colors.statusDanger + "20" : theme.colors.surface0,
+          opacity: isArchived ? 0.5 : 1,
+        } as ViewStyle,
+        dot: {
+          width: 8,
+          height: 8,
+          borderRadius: 4,
+          backgroundColor:
+            agent.status === "running"
+              ? theme.colors.accent
+              : agent.status === "idle"
+                ? theme.colors.foregroundMuted
+                : theme.colors.statusDanger,
+          marginTop: 5,
+          marginRight: 8,
+          flexShrink: 0,
+          opacity: isArchived ? 0.5 : 1,
+        } as ViewStyle,
+        info: { flex: 1 } as ViewStyle,
+        title: {
+          color: theme.colors.foreground,
+          fontSize: compact ? 13 : 14,
+          fontWeight: "500" as const,
+          textDecorationLine: isArchived ? "line-through" as const : "none" as const,
+        } as TextStyle,
+        meta: {
+          color: theme.colors.foregroundMuted,
+          fontSize: 11,
+          marginTop: 2,
+          textDecorationLine: isArchived ? "line-through" as const : "none" as const,
+        } as TextStyle,
+        provider: {
+          color: theme.colors.foregroundMuted,
+          fontSize: 10,
+          marginTop: 1,
+          textDecorationLine: isArchived ? "line-through" as const : "none" as const,
+        } as TextStyle,
+      }),
+    [theme, compact, agent.requiresAttention, agent.status, isArchived],
+  );
+
+  return (
+    <TouchableOpacity onPress={() => navigation.openAgent({ agentId: agent.id })} activeOpacity={0.7}>
+      <View style={styles.row}>
+        <View style={styles.dot} />
+        <View style={styles.info}>
+          <Text style={styles.title} numberOfLines={1}>
+            {agent.title ?? agent.id.slice(0, 8)}
+          </Text>
+          <Text style={styles.meta}>{agent.status}{isArchived ? " (archived)" : ""}</Text>
+          <Text style={styles.provider}>
+            {agent.provider}
+            {agent.model ? ` · ${agent.model}` : ""}
+          </Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+}

package/client/components/WorkspaceBadge.tsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { createBadgeStyles } from "../workspace-creator/badge-styles";
+
+export function Badge({
+  icon,
+  label,
+  selectable = false,
+  disabled = false,
+  onPress,
+  theme,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  selectable?: boolean;
+  disabled?: boolean;
+  onPress?: () => void;
+  theme: PluginSurfaceProps["theme"];
+}) {
+  const styles = useMemo(() => createBadgeStyles(theme), [theme]);
+  return (
+    <Pressable
+      accessibilityRole={selectable ? "button" : undefined}
+      accessibilityLabel={selectable ? `切换 ${label}` : undefined}
+      accessibilityState={{ disabled: !selectable || disabled }}
+      disabled={!selectable || disabled}
+      onPress={onPress}
+      style={[styles.badge, selectable && styles.badgeSelectable, disabled && styles.badgeDisabled]}
+    >
+      <View style={styles.badgeIcon}>{icon}</View>
+      <Text style={styles.badgeText} numberOfLines={1}>
+        {label}
+      </Text>
+      {selectable ? <Icon name="ChevronDown" color={theme.colors.foregroundMuted} size={12} /> : null}
+    </Pressable>
+  );
+}