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

package/client/components/workspace-creator-styles.ts

@@ -0,0 +1,322 @@
+import { Platform, StyleSheet, type TextStyle, type ViewStyle } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { MAX_MENU_HEIGHT } from "../workspace-creator/constants";
+import { opaqueSurfaceColor } from "../workspace-creator/ui-utils";
+
+export function createComposerStyles(theme: PluginSurfaceProps["theme"]) {
+  const colors = theme.colors;
+  const surface1 = colors.surface1;
+  return StyleSheet.create({
+    panel: {
+      flexShrink: 0,
+      overflow: "visible",
+      backgroundColor: colors.surface0,
+      paddingHorizontal: 0,
+      paddingTop: 0,
+      paddingBottom: 0,
+    } as ViewStyle,
+    content: {
+      width: "100%",
+      maxWidth: 760,
+      alignSelf: "center",
+    } as ViewStyle,
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: 28,
+    } as ViewStyle,
+    headerText: {
+      flex: 1,
+      minWidth: 0,
+      paddingRight: 16,
+    } as ViewStyle,
+    title: {
+      color: colors.foreground,
+      fontSize: 24,
+      lineHeight: 32,
+      fontWeight: "400",
+    } as TextStyle,
+    formStackDesktop: {
+      position: "relative",
+      zIndex: 1,
+      flexDirection: "row",
+      alignItems: "center",
+      marginBottom: 16,
+      gap: 8,
+    } as ViewStyle,
+    controlAnchor: {
+      position: "relative",
+      flexShrink: 0,
+      overflow: "visible",
+    } as ViewStyle,
+    controlAnchorOpen: {
+      zIndex: 20,
+    } as ViewStyle,
+    hostBadge: {
+      flexDirection: "row",
+      alignItems: "center",
+      height: 28,
+      maxWidth: 240,
+      overflow: "hidden",
+      paddingHorizontal: 8,
+      borderRadius: 16,
+      gap: 8,
+    } as ViewStyle,
+    hostStatusDot: {
+      width: 8,
+      height: 8,
+      borderRadius: 4,
+      backgroundColor: "#3e704a",
+      flexShrink: 0,
+    } as ViewStyle,
+    hostText: {
+      minWidth: 0,
+      fontSize: 14,
+      lineHeight: 20,
+      color: colors.foregroundMuted,
+      flexShrink: 1,
+    } as TextStyle,
+    launchSpacer: {
+      flex: 1,
+    } as ViewStyle,
+    closeButton: {
+      width: 28,
+      height: 28,
+      borderRadius: 14,
+      alignItems: "center",
+      justifyContent: "center",
+    } as ViewStyle,
+    inputWrapper: {
+      position: "relative",
+      zIndex: 2,
+      flexDirection: "column",
+      gap: 12,
+      backgroundColor: surface1,
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 20,
+      paddingVertical: 16,
+      paddingHorizontal: 16,
+    } as ViewStyle,
+    menuRegionActive: {
+      zIndex: 10,
+    } as ViewStyle,
+    textInput: {
+      width: "100%",
+      minHeight: 46,
+      maxHeight: 160,
+      color: colors.foreground,
+      fontSize: 15,
+      lineHeight: 21,
+      fontWeight: "400",
+      borderWidth: 0,
+      backgroundColor: "transparent",
+      ...(Platform.OS === "web"
+        ? ({ outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent" } as object)
+        : {}),
+    } as TextStyle,
+    buttonRow: {
+      flexDirection: "row",
+      alignItems: "flex-end",
+      justifyContent: "space-between",
+      marginHorizontal: -6,
+    } as ViewStyle,
+    leftControls: {
+      flex: 1,
+      minWidth: 0,
+      flexDirection: "row",
+      alignItems: "flex-end",
+      flexWrap: "wrap",
+      gap: 0,
+    } as ViewStyle,
+    rightControls: {
+      flexShrink: 0,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 4,
+    } as ViewStyle,
+    pendingText: {
+      color: colors.foregroundMuted,
+      fontSize: 12,
+      lineHeight: 16,
+    } as TextStyle,
+    sendButton: {
+      width: 28,
+      height: 28,
+      borderRadius: 14,
+      backgroundColor: colors.accent,
+      alignItems: "center",
+      justifyContent: "center",
+    } as ViewStyle,
+    disabled: {
+      opacity: 0.5,
+    } as ViewStyle,
+    errorText: {
+      color: colors.statusDanger,
+      fontSize: 13,
+      lineHeight: 18,
+      marginTop: 10,
+    } as TextStyle,
+  });
+}
+
+export function createMenuStyles(theme: PluginSurfaceProps["theme"]) {
+  const colors = theme.colors;
+  const menuBackground = opaqueSurfaceColor(colors.surface0, colors.foreground);
+  return StyleSheet.create({
+    menu: {
+      position: "absolute",
+      maxHeight: MAX_MENU_HEIGHT,
+      zIndex: 30,
+      backgroundColor: menuBackground,
+      borderWidth: 1,
+      borderColor: colors.foregroundMuted + "22",
+      borderRadius: 12,
+      paddingVertical: 6,
+      shadowColor: "#000",
+      shadowOpacity: 0.18,
+      shadowRadius: 16,
+      shadowOffset: { width: 0, height: 8 },
+      elevation: 12,
+    } as ViewStyle,
+    menuAbove: {
+      bottom: 52,
+    } as ViewStyle,
+    menuBelow: {
+      top: 36,
+    } as ViewStyle,
+    menuScroll: {
+      maxHeight: MAX_MENU_HEIGHT - 12,
+      backgroundColor: menuBackground,
+    } as ViewStyle,
+    menuSearchRow: {
+      minHeight: 42,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      paddingHorizontal: 12,
+      backgroundColor: menuBackground,
+    } as ViewStyle,
+    menuSearchInput: {
+      flex: 1,
+      minWidth: 0,
+      height: 36,
+      padding: 0,
+      color: colors.foreground,
+      fontSize: 13,
+      lineHeight: 18,
+      borderWidth: 0,
+      backgroundColor: "transparent",
+      ...(Platform.OS === "web"
+        ? ({ outlineStyle: "none", outlineWidth: 0, outlineColor: "transparent" } as object)
+        : {}),
+    } as TextStyle,
+    menuEmptyText: {
+      color: colors.foregroundMuted,
+      fontSize: 13,
+      lineHeight: 18,
+      paddingHorizontal: 12,
+      paddingVertical: 14,
+      textAlign: "center",
+    } as TextStyle,
+    menuItem: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      gap: 12,
+      minHeight: 40,
+      paddingHorizontal: 12,
+      paddingVertical: 7,
+      backgroundColor: menuBackground,
+    } as ViewStyle,
+    menuItemSelected: {
+      backgroundColor: colors.foregroundMuted + "0d",
+    } as ViewStyle,
+    menuIconBox: {
+      width: 18,
+      height: 18,
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+    } as ViewStyle,
+    projectIconFallback: {
+      borderRadius: 4,
+      backgroundColor: colors.foregroundMuted + "20",
+    } as ViewStyle,
+    projectIconFallbackText: {
+      color: colors.foreground,
+      fontSize: 10,
+      lineHeight: 14,
+      fontWeight: "600",
+    } as TextStyle,
+    menuTextGroup: {
+      flex: 1,
+      minWidth: 0,
+    } as ViewStyle,
+    menuLabel: {
+      color: colors.foreground,
+      fontSize: 13,
+      lineHeight: 18,
+      fontWeight: "500",
+    } as TextStyle,
+    menuDetail: {
+      color: colors.foregroundMuted,
+      fontSize: 11,
+      lineHeight: 15,
+      marginTop: 2,
+    } as TextStyle,
+    modelBrowserMenu: {
+      width: 360,
+      maxHeight: 400,
+      overflow: "hidden",
+    } as ViewStyle,
+    modelBrowserHeader: {
+      minHeight: 44,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      paddingHorizontal: 12,
+    } as ViewStyle,
+    modelBrowserTitle: {
+      flex: 1,
+      minWidth: 0,
+      color: colors.foreground,
+      fontSize: 14,
+      lineHeight: 20,
+      fontWeight: "500",
+    } as TextStyle,
+    modelBrowserHeading: {
+      paddingHorizontal: 12,
+      paddingTop: 10,
+      paddingBottom: 6,
+    } as ViewStyle,
+    modelBrowserSectionLabel: {
+      color: colors.foregroundMuted,
+      fontSize: 11,
+      lineHeight: 15,
+      fontWeight: "500",
+    } as TextStyle,
+    modelBrowserSeparator: {
+      height: 1,
+      backgroundColor: colors.foregroundMuted + "18",
+    } as ViewStyle,
+    modelBrowserProviderRow: {
+      minHeight: 44,
+    } as ViewStyle,
+    modelBrowserProviderLabel: {
+      flex: 1,
+      minWidth: 0,
+    } as TextStyle,
+    modelBrowserCount: {
+      color: colors.foregroundMuted,
+      fontSize: 12,
+      lineHeight: 16,
+    } as TextStyle,
+    modelBrowserTrailing: {
+      width: 20,
+      alignItems: "center",
+      justifyContent: "center",
+    } as ViewStyle,
+  });
+}

package/client/hooks/useAgentActivityHeatmap.ts

@@ -0,0 +1,178 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { AppState } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import type { PaseoClient } from "../workspace-creator/types";
+import type { AgentEntry } from "../../shared/overview-types";
+
+export interface HeatmapAgent {
+  id: string;
+  title: string;
+  provider: string;
+  model: string | null;
+  status: string;
+  workspaceId?: string;
+}
+
+export interface HeatmapDay {
+  date: string; // YYYY-MM-DD
+  count: number;
+  agents: HeatmapAgent[];
+}
+
+const MONTH_LABELS = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
+export const WEEKDAY_LABELS = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+
+export function buildHeatmapGrid(days = 365) {
+  const endDate = new Date();
+  endDate.setHours(0, 0, 0, 0);
+  const startDate = new Date(endDate);
+  startDate.setDate(endDate.getDate() - days + 1);
+
+  // Use Monday as the first row. Convert JS Sunday=0…Saturday=6 to Monday=0…Sunday=6.
+  const leadingDays = (startDate.getDay() + 6) % 7;
+  const gridStart = new Date(startDate);
+  gridStart.setDate(gridStart.getDate() - leadingDays);
+
+  const totalWeeks = Math.ceil((leadingDays + days) / 7);
+
+  const monthLabels: { weekIndex: number; label: string }[] = [];
+  let lastMonth = -1;
+  for (let w = 0; w < totalWeeks; w++) {
+    const d = new Date(gridStart);
+    d.setDate(d.getDate() + w * 7);
+    const m = d.getMonth();
+    if (m !== lastMonth) {
+      monthLabels.push({ weekIndex: w, label: MONTH_LABELS[m] });
+      lastMonth = m;
+    }
+  }
+
+  return { gridStart, totalWeeks, monthLabels };
+}
+
+export function getColors(theme: PluginSurfaceProps["theme"]) {
+  const fallback = {
+    surface0: "#1e1e1e",
+    surface1: "#252526",
+    surface2: "#303033",
+    border: "#3f3f46",
+    foreground: "#ffffff",
+    foregroundMuted: "#888888",
+    accent: "#007acc",
+  };
+  if (!theme || !theme.colors) return fallback;
+  return { ...fallback, ...theme.colors };
+}
+
+export type ColorLevel = "none" | "low" | "medium" | "high" | "very-high";
+
+export function getColorLevel(count: number, maxCount: number): ColorLevel {
+  if (count === 0 || maxCount === 0) return "none";
+  const ratio = count / maxCount;
+  if (ratio < 0.25) return "low";
+  if (ratio < 0.5) return "medium";
+  if (ratio < 0.75) return "high";
+  return "very-high";
+}
+
+export function getCellColor(level: ColorLevel, theme: PluginSurfaceProps["theme"]): string {
+  const c = getColors(theme);
+  switch (level) {
+    case "none": return c.surface2;
+    case "low": return c.accent + "33";
+    case "medium": return c.accent + "66";
+    case "high": return c.accent + "aa";
+    case "very-high": return c.accent;
+  }
+}
+
+function formatDate(d: Date): string {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+/** Build daily activity counts from agent list metadata (no timeline fetch needed). */
+function buildDaysFromAgents(agents: AgentEntry[]): { days: HeatmapDay[]; hasData: boolean } {
+  const now = Date.now();
+  const cutoffMs = now - 365 * 24 * 60 * 60 * 1000;
+
+  const cells: HeatmapDay[] = Array.from({ length: 365 }, (_, i) => {
+    const d = new Date(now - (365 - 1 - i) * 86400000);
+    return { date: formatDate(d), count: 0, agents: [] };
+  });
+  const cellMap = new Map(cells.map((c) => [c.date, c]));
+
+  let totalActivity = 0;
+  for (const agent of agents) {
+    // Only real user-message activity belongs on the heatmap. updatedAt can
+    // change for status/metadata updates, and archivedAt records archival time;
+    // using either would move an old conversation onto the wrong day.
+    const iso = agent.lastUserMessageAt;
+    if (!iso) continue;
+    const ts = new Date(iso).getTime();
+    if (Number.isNaN(ts) || ts < cutoffMs) continue;
+    const key = formatDate(new Date(ts));
+    const cell = cellMap.get(key);
+    if (cell) {
+      cell.count += 1;
+      cell.agents.push({
+        id: agent.id,
+        title: agent.title?.trim() || "未命名 Agent",
+        provider: agent.provider,
+        model: agent.model,
+        status: agent.status,
+        workspaceId: agent.workspaceId,
+      });
+      totalActivity++;
+    }
+  }
+
+
+  return { days: cells, hasData: totalActivity > 0 };
+}
+
+export function useAgentActivityHeatmap(
+  paseo: PaseoClient,
+  agents: AgentEntry[],
+  theme: PluginSurfaceProps["theme"],
+) {
+  const [days, setDays] = useState<HeatmapDay[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [hasData, setHasData] = useState(false);
+  const maxCountRef = useRef(0);
+
+  const fetchData = useCallback(() => {
+    const { days: cells, hasData: dataExists } = buildDaysFromAgents(agents);
+    const max = cells.reduce((m, c) => Math.max(m, c.count), 0);
+    maxCountRef.current = max;
+    setDays(cells);
+    setHasData(dataExists);
+    setLoading(false);
+  }, [agents]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  // Refresh every 5 minutes, but only when app is active
+  const appStateRef = useRef(AppState.currentState);
+  useEffect(() => {
+    const timer = setInterval(() => { void fetchData(); }, 5 * 60 * 1000);
+    const subscription = AppState.addEventListener("change", (nextState) => {
+      appStateRef.current = nextState;
+      if (nextState === "active") {
+        clearInterval(timer);
+        void fetchData();
+      }
+    });
+    return () => {
+      clearInterval(timer);
+      subscription.remove();
+    };
+  }, [fetchData]);
+
+  return { days, loading, error, maxCount: maxCountRef.current, hasData };
+}

package/client/hooks/useFilter.ts

@@ -0,0 +1,107 @@
+import { useCallback, useMemo } from "react";
+import { type WorkspaceEntry, type AgentEntry } from "../../shared/overview-types";
+
+export const TIME_RANGES = [
+  { key: "24h", label: "近24小时", ms: 24 * 60 * 60 * 1000 },
+  { key: "3d",  label: "近3天",   ms: 3 * 24 * 60 * 60 * 1000 },
+  { key: "7d",  label: "近7天",   ms: 7 * 24 * 60 * 60 * 1000 },
+  { key: "30d", label: "近30天",  ms: 30 * 24 * 60 * 60 * 1000 },
+  { key: "all", label: "全部",    ms: Infinity },
+] as const;
+
+export type TimeRange = (typeof TIME_RANGES)[number]["key"];
+
+export function useFilter(
+  projects: Array<{
+    projectId: string;
+    projectDisplayName: string;
+    workspaces: WorkspaceEntry[];
+  }>,
+  agentsByWorkspace: Map<string, AgentEntry[]>,
+  timeRange: TimeRange,
+  showArchived: boolean,
+) {
+  const rangeMs = useMemo(
+    () => TIME_RANGES.find((r) => r.key === timeRange)!.ms,
+    [timeRange],
+  );
+
+  const isRecent = useCallback(
+    (iso: string | null | undefined) => {
+      if (!iso) return false;
+      const t = new Date(iso).getTime();
+      if (Number.isNaN(t)) return false;
+      return Date.now() - t < rangeMs;
+    },
+    [rangeMs],
+  );
+
+  const filteredProjects = useMemo(() => {
+    const result: Array<{
+      projectId: string;
+      projectDisplayName: string;
+      workspaces: WorkspaceEntry[];
+    }> = [];
+    for (const project of projects) {
+      const filteredWorkspaces = project.workspaces
+        .map((ws) => {
+          // Keep the workspace only if at least one agent has a user message
+          // in the selected window.  Do NOT fall back to ws.activityAt or
+          // ws.statusEnteredAt — those are workspace creation/status-change
+          // metadata, not actual user activity.
+          let wsAgents = (agentsByWorkspace.get(ws.id) ?? []);
+
+          // Filter out archived agents unless showArchived is true
+          if (!showArchived) {
+            wsAgents = wsAgents.filter((a) => !a.archivedAt);
+          }
+
+          if (timeRange !== "all") {
+            wsAgents = wsAgents.filter((a) => isRecent(a.lastUserMessageAt));
+          }
+
+          return wsAgents.length > 0 ? ws : null;
+        })
+        .filter((ws): ws is WorkspaceEntry => ws !== null);
+      if (filteredWorkspaces.length > 0) {
+        result.push({ ...project, workspaces: filteredWorkspaces });
+      }
+    }
+    return result;
+  }, [projects, agentsByWorkspace, timeRange, isRecent, showArchived]);
+
+  const filteredAgentsByWorkspace = useMemo(() => {
+    const map = new Map<string, AgentEntry[]>();
+    for (const project of filteredProjects) {
+      for (const ws of project.workspaces) {
+        let agents = (agentsByWorkspace.get(ws.id) ?? []);
+
+        // Filter out archived agents unless showArchived is true
+        if (!showArchived) {
+          agents = agents.filter((a) => !a.archivedAt);
+        }
+
+        if (timeRange !== "all") {
+          agents = agents.filter((a) => isRecent(a.lastUserMessageAt));
+        }
+
+        if (agents.length > 0) map.set(ws.id, agents);
+      }
+    }
+    return map;
+  }, [timeRange, filteredProjects, agentsByWorkspace, isRecent, showArchived]);
+
+  const autoExpand = useMemo(() => {
+    if (timeRange === "all") return {};
+    const result: Record<string, boolean> = {};
+    for (const project of filteredProjects) {
+      result[project.projectId] = true;
+      for (const ws of project.workspaces) {
+        result[ws.id] = true;
+      }
+    }
+    return result;
+  }, [timeRange, filteredProjects]);
+
+  return { filteredProjects, filteredAgentsByWorkspace, autoExpand };
+}

package/client/hooks/useKeyboardInset.ts

@@ -0,0 +1,37 @@
+import { useEffect, useState } from "react";
+import { Keyboard, Platform, type KeyboardEvent } from "react-native";
+
+function currentKeyboardHeight(): number {
+  if (Platform.OS === "web") return 0;
+  return Math.max(0, Keyboard.metrics()?.height ?? 0);
+}
+
+/**
+ * Returns the native keyboard height, including a keyboard that was already
+ * opened by an auto-focused input before the effect subscribed.
+ */
+export function useKeyboardInset(enabled: boolean): number {
+  const [height, setHeight] = useState(() => enabled ? currentKeyboardHeight() : 0);
+
+  useEffect(() => {
+    if (!enabled || Platform.OS === "web") {
+      setHeight(0);
+      return;
+    }
+
+    const showEvent = Platform.OS === "ios" ? "keyboardWillChangeFrame" : "keyboardDidShow";
+    const hideEvent = Platform.OS === "ios" ? "keyboardWillHide" : "keyboardDidHide";
+    const update = (event: KeyboardEvent) => setHeight(Math.max(0, event.endCoordinates.height));
+    const showSubscription = Keyboard.addListener(showEvent, update);
+    const hideSubscription = Keyboard.addListener(hideEvent, () => setHeight(0));
+
+    // autoFocus can open the keyboard before useEffect has attached listeners.
+    setHeight(currentKeyboardHeight());
+    return () => {
+      showSubscription.remove();
+      hideSubscription.remove();
+    };
+  }, [enabled]);
+
+  return height;
+}

package/client/hooks/useResizableWidth.ts

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { RefObject } from "react";
+import type { View } from "react-native";
+import { pointerX, trackHorizontalPointer } from "../web";
+
+export interface ResizableWidthOptions {
+  initialWidth: number;
+  minWidth: number;
+  maxWidth: number;
+  /** Direction the panel grows. "left" = dragging left increases width (right-edge panel). */
+  direction?: "left" | "right";
+}
+
+export interface ResizableWidthResult {
+  width: number;
+  isDragging: boolean;
+  isHovered: boolean;
+  panelRef: RefObject<View | null>;
+  onPointerDown: (e: unknown) => void;
+  onPointerEnter: () => void;
+  onPointerLeave: () => void;
+}
+
+/**
+ * Pointer-based resizable width hook.
+ *
+ * Uses document-level pointer tracking on web and remains inert on native.
+ */
+export function useResizableWidth({
+  initialWidth,
+  minWidth,
+  maxWidth,
+  direction = "left",
+}: ResizableWidthOptions): ResizableWidthResult {
+  const [width, setWidth] = useState(initialWidth);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const panelRef = useRef<View | null>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => () => cleanupRef.current?.(), []);
+
+  const onPointerDown = useCallback((event: unknown) => {
+    const startX = pointerX(event);
+    if (startX === null) return;
+    cleanupRef.current?.();
+    const startWidth = width;
+    setIsDragging(true);
+    cleanupRef.current = trackHorizontalPointer(
+      (clientX) => {
+        const delta = direction === "left" ? startX - clientX : clientX - startX;
+        setWidth(Math.max(minWidth, Math.min(maxWidth, startWidth + delta)));
+      },
+      () => {
+        cleanupRef.current = null;
+        setIsDragging(false);
+      },
+    );
+  }, [direction, maxWidth, minWidth, width]);
+
+  return {
+    width,
+    isDragging,
+    isHovered,
+    panelRef,
+    onPointerDown,
+    onPointerEnter: () => setIsHovered(true),
+    onPointerLeave: () => setIsHovered(false),
+  };
+}