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

package/client/agent-preview/PreviewActions.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback, useRef } from "react";
+import { Pressable, Text, View, type ViewStyle } from "react-native";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+
+import { useTooltip } from "../components/Tooltip";
+
+export function QuickActionButton({ icon, color, disabled, tooltip, accessibilityLabel, onPress, style }: {
+  icon: string; color: string; disabled?: boolean; tooltip: Array<{ key: string; value: string }>;
+  accessibilityLabel: string; onPress: () => void; style: ViewStyle;
+}) {
+  const tooltipContext = useTooltip();
+  const buttonRef = useRef<View | null>(null);
+  const showTooltip = useCallback(() => {
+    if (!tooltipContext || !buttonRef.current) return;
+    buttonRef.current.measureInWindow((x, y, width, height) => {
+      tooltipContext.show({ x: x + width, y: y + height, lines: tooltip });
+    });
+  }, [tooltip, tooltipContext]);
+  const hideTooltip = useCallback(() => tooltipContext?.hide(), [tooltipContext]);
+
+  return (
+    <Pressable
+      ref={buttonRef}
+      accessibilityLabel={accessibilityLabel}
+      onPress={onPress}
+      disabled={disabled}
+      style={[style, disabled && { opacity: 0.55 }]}
+      {...({ onMouseEnter: showTooltip, onMouseLeave: hideTooltip } as Record<string, unknown>)}
+    >
+      <Icon name={icon} size={14} color={color} />
+    </Pressable>
+  );
+}
+
+export function AutoCommitErrorToast({ message, copied, colors, containerStyle, copyButtonStyle, onDismiss, onCopy }: {
+  message: string; copied: boolean;
+  colors: { statusDanger: string; foregroundMuted: string; foreground: string };
+  containerStyle: ViewStyle; copyButtonStyle: ViewStyle; onDismiss: () => void; onCopy: () => void;
+}) {
+  return (
+    <View style={containerStyle}>
+      <View style={{ flexDirection: "row", alignItems: "flex-start" }}>
+        <Icon name="TriangleAlert" size={14} color={colors.statusDanger} />
+        <Text style={{ color: colors.statusDanger, fontSize: 12, fontWeight: "600", marginLeft: 7, flex: 1 }}>一键提交失败</Text>
+        <Pressable onPress={onDismiss} style={{ padding: 2 }}><Icon name="X" size={13} color={colors.foregroundMuted} /></Pressable>
+      </View>
+      <Text selectable numberOfLines={4} style={{ color: colors.foreground, fontSize: 12, lineHeight: 17, marginTop: 6 }}>{message}</Text>
+      <View style={{ flexDirection: "row", justifyContent: "flex-end", marginTop: 8 }}>
+        <Pressable onPress={onCopy} style={copyButtonStyle}>
+          <Icon name={copied ? "Check" : "Copy"} size={12} color={colors.foregroundMuted} />
+          <Text style={{ color: colors.foregroundMuted, fontSize: 11 }}>{copied ? "已复制" : "复制错误"}</Text>
+        </Pressable>
+      </View>
+    </View>
+  );
+}

package/client/agent-preview/useAutoCommit.ts

@@ -0,0 +1,91 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useRpc } from "@getpaseo/plugin/client";
+import { copyText } from "@getpaseo/plugin/client/react-native";
+
+import { autoCommitStartRpc, autoCommitStatusRpc } from "../../shared/auto-commit";
+
+export type AutoCommitState =
+  | { kind: "idle" }
+  | { kind: "preparing"; message: string }
+  | { kind: "running"; taskId: string; message: string }
+  | { kind: "done"; taskId: string; message: string }
+  | { kind: "error"; message: string; taskId?: string };
+
+export function useAutoCommit(cwd: string | undefined, onDone: () => void) {
+  const startTask = useRpc(autoCommitStartRpc);
+  const getTaskStatus = useRpc(autoCommitStatusRpc);
+  const [pending, setPending] = useState(false);
+  const [state, setState] = useState<AutoCommitState>({ kind: "idle" });
+  const [copied, setCopied] = useState(false);
+
+  const runRef = useRef<{ cancelled: boolean; cancelWait?: () => void } | null>(null);
+
+  useEffect(() => {
+    setPending(false);
+    setState({ kind: "idle" });
+    setCopied(false);
+    return () => {
+      const run = runRef.current;
+      if (run) {
+        run.cancelled = true;
+        run.cancelWait?.();
+      }
+      runRef.current = null;
+    };
+  }, [cwd]);
+
+  const start = useCallback(async () => {
+    if (runRef.current) return;
+    if (!cwd) {
+      setState({ kind: "error", message: "当前 agent 没有可用工作目录" });
+      return;
+    }
+    const run = { cancelled: false } as { cancelled: boolean; cancelWait?: () => void };
+    runRef.current = run;
+    setPending(true);
+    setCopied(false);
+    setState({ kind: "preparing", message: "正在启动 Pi 独立进程" });
+    try {
+      const { taskId } = await startTask({ cwd });
+      if (run.cancelled) return;
+      setState({ kind: "running", taskId, message: "Pi 已启动，正在提交" });
+      for (;;) {
+        await new Promise<void>((resolve) => {
+          const timer = setTimeout(resolve, 1_200);
+          run.cancelWait = () => { clearTimeout(timer); resolve(); };
+        });
+        run.cancelWait = undefined;
+        if (run.cancelled) return;
+        const status = await getTaskStatus({ taskId });
+        if (run.cancelled) return;
+        const message = status.output.trim().split("\n").filter(Boolean).slice(-1)[0] ?? "Pi 正在运行";
+        if (status.status === "running") {
+          setState({ kind: "running", taskId, message });
+          continue;
+        }
+        if (status.status === "done") {
+          setState({ kind: "done", taskId, message: message || "Pi 已完成提交" });
+          onDone();
+          return;
+        }
+        setState({ kind: "error", taskId, message: [status.error, status.output].filter(Boolean).join("\n").trim() || "Pi 提交失败" });
+        return;
+      }
+    } catch (error) {
+      if (run.cancelled) return;
+      setState({ kind: "error", message: error instanceof Error ? error.message : String(error) });
+    } finally {
+      if (runRef.current === run) {
+        runRef.current = null;
+        setPending(false);
+      }
+    }
+  }, [cwd, getTaskStatus, onDone, startTask]);
+
+  const copyError = useCallback(() => {
+    if (state.kind !== "error") return;
+    void copyText(state.message).then(() => setCopied(true)).catch(() => {});
+  }, [state]);
+
+  return { state, pending, copied, start, copyError, dismiss: () => setState({ kind: "idle" }) };
+}

package/client/components/AgentCommandMenu.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { ActivityIndicator, Pressable, ScrollView, Text, View } from "react-native";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+
+export interface AgentSlashCommand {
+  name: string;
+  description: string;
+  argumentHint: string;
+  kind?: "command" | "skill";
+}
+
+export function filterAgentCommands(commands: AgentSlashCommand[], query: string) {
+  const normalized = query.trim().toLowerCase();
+  return commands.filter((command) => command.name.toLowerCase().includes(normalized)).slice(0, 12);
+}
+
+export function AgentCommandMenu({ commands, query, loading, error, theme, activeIndex, onSelect }: {
+  commands: AgentSlashCommand[];
+  query: string;
+  loading: boolean;
+  error: string | null;
+  theme: PluginSurfaceProps["theme"];
+  activeIndex: number;
+  onSelect: (command: AgentSlashCommand) => void;
+}) {
+  const matches = filterAgentCommands(commands, query);
+  return <View style={{ maxHeight: 260, marginBottom: 8, borderWidth: 1, borderColor: theme.colors.border, borderRadius: 8, backgroundColor: theme.colors.surface1, overflow: "hidden" }}>
+    {loading ? <View style={{ minHeight: 52, alignItems: "center", justifyContent: "center" }}><ActivityIndicator size="small" color={theme.colors.foregroundMuted} /></View> : null}
+    {!loading && error ? <Text style={{ padding: 12, color: theme.colors.statusDanger, fontSize: 12 }}>{error}</Text> : null}
+    {!loading && !error && matches.length === 0 ? <Text style={{ padding: 12, color: theme.colors.foregroundMuted, fontSize: 12 }}>没有匹配的命令</Text> : null}
+    {!loading && !error ? <ScrollView keyboardShouldPersistTaps="handled">
+      {matches.map((command, index) => <Pressable
+        key={`${command.kind ?? "command"}:${command.name}`}
+        accessibilityRole="button"
+        accessibilityLabel={`选择命令 /${command.name}`}
+        onPress={() => onSelect(command)}
+        style={({ hovered, pressed }: { hovered?: boolean; pressed?: boolean }) => ({ paddingHorizontal: 12, paddingVertical: 9, flexDirection: "row", gap: 10, backgroundColor: index === activeIndex || hovered || pressed ? theme.colors.surface2 : theme.colors.surface1 })}
+      >
+        <Icon name={command.kind === "skill" ? "Sparkles" : "Terminal"} size={14} color={theme.colors.foregroundMuted} />
+        <View style={{ flex: 1, minWidth: 0 }}>
+          <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+            <Text style={{ color: theme.colors.foreground, fontSize: 13, fontWeight: "600" }}>/{command.name}</Text>
+            {command.argumentHint ? <Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>{command.argumentHint}</Text> : null}
+          </View>
+          {command.description ? <Text numberOfLines={2} style={{ color: theme.colors.foregroundMuted, fontSize: 12, marginTop: 2 }}>{command.description}</Text> : null}
+        </View>
+      </Pressable>)}
+    </ScrollView> : null}
+  </View>;
+}