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

package/client/hooks/useWorkspaces.ts

@@ -0,0 +1,128 @@
+import { useQuery } from "@tanstack/react-query";
+import { usePaseo } from "@getpaseo/plugin/client";
+import { useCallback, useMemo } from "react";
+import { type WorkspaceEntry, type AgentEntry } from "../../shared/overview-types";
+import { agentActivityMs } from "../../shared/agent-activity";
+
+/** Type guard: verify an object is a valid WorkspaceEntry at runtime. */
+function isWorkspaceEntry(obj: unknown): obj is WorkspaceEntry {
+  return (
+    typeof obj === "object" &&
+    obj !== null &&
+    "id" in obj &&
+    "projectId" in obj &&
+    "projectDisplayName" in obj &&
+    "name" in obj &&
+    "status" in obj &&
+    "workspaceKind" in obj &&
+    "workspaceDirectory" in obj
+  );
+}
+
+export interface UseWorkspacesResult {
+  projects: Array<{
+    projectId: string;
+    projectDisplayName: string;
+    workspaces: WorkspaceEntry[];
+  }>;
+  agentsByWorkspace: Map<string, AgentEntry[]>;
+  isLoading: boolean;
+  error: unknown;
+  refetch: () => void;
+}
+
+export function useWorkspaces(hostId: string): UseWorkspacesResult {
+  const paseo = usePaseo();
+
+  const { data: wsResult, isLoading: wsLoading, error: wsError, refetch: refetchWorkspaces } = useQuery({
+    queryKey: ["ws-list", hostId],
+    queryFn: () => paseo.workspaces.list({ subscribe: {} }),
+    refetchInterval: 5000,
+    staleTime: 3000,
+  });
+
+  const { data: agResult, isLoading: agLoading, error: agError, refetch: refetchAgents } = useQuery({
+    queryKey: ["ag-list", hostId],
+    queryFn: () => paseo.agents.list({ filter: { includeArchived: true } }),
+    refetchInterval: 5000,
+    staleTime: 3000,
+  });
+
+  const refetch = useCallback(() => {
+    void Promise.all([refetchWorkspaces(), refetchAgents()]);
+  }, [refetchWorkspaces, refetchAgents]);
+
+  const { projects, agentsByWorkspace } = useMemo(() => {
+    const workspaces = (wsResult?.entries ?? []).filter(isWorkspaceEntry);
+    const agents = (agResult?.entries ?? []) as Array<{ agent: AgentEntry }>;
+
+    const agentsByWs = new Map<string, AgentEntry[]>();
+    for (const entry of agents) {
+      const wsId = entry.agent.workspaceId;
+      if (!wsId) continue;
+      const list = agentsByWs.get(wsId) ?? [];
+      list.push(entry.agent);
+      agentsByWs.set(wsId, list);
+    }
+    // Sort agents inside each workspace by last activity, newest first.
+    for (const list of agentsByWs.values()) {
+      list.sort((a, b) => agentActivityMs(b) - agentActivityMs(a));
+    }
+
+    const byProject = new Map<string, { projectId: string; projectDisplayName: string; workspaces: WorkspaceEntry[] }>();
+    for (const ws of workspaces) {
+      const pid = ws.projectId || ws.id;
+      const existing = byProject.get(pid);
+      if (existing) {
+        existing.workspaces.push(ws);
+      } else {
+        byProject.set(pid, {
+          projectId: pid,
+          projectDisplayName: ws.projectDisplayName || pid,
+          workspaces: [ws],
+        });
+      }
+    }
+
+    // Compute each workspace's "last activity" timestamp (ms since epoch).
+    // Prefer the latest agent activity; fall back to workspace activityAt,
+    // then statusEnteredAt. Returns 0 when nothing is known (sorts last).
+    const workspaceActivity = (ws: WorkspaceEntry): number => {
+      const agents = agentsByWs.get(ws.id) ?? [];
+      let latest = 0;
+      for (const a of agents) {
+        const t = agentActivityMs(a);
+        if (t > latest) latest = t;
+      }
+      if (latest > 0) return latest;
+      const fallbackIso = ws.activityAt ?? ws.statusEnteredAt;
+      if (fallbackIso) {
+        const t = new Date(fallbackIso).getTime();
+        if (!Number.isNaN(t)) return t;
+      }
+      return 0;
+    };
+
+    // Sort workspaces inside each project by last activity, newest first.
+    for (const project of byProject.values()) {
+      project.workspaces.sort((a, b) => workspaceActivity(b) - workspaceActivity(a));
+    }
+
+    // Sort projects by their own last activity (max over their workspaces), newest first.
+    const projects = Array.from(byProject.values()).sort((a, b) => {
+      const aMax = a.workspaces.reduce((m, ws) => Math.max(m, workspaceActivity(ws)), 0);
+      const bMax = b.workspaces.reduce((m, ws) => Math.max(m, workspaceActivity(ws)), 0);
+      return bMax - aMax;
+    });
+
+    return { projects, agentsByWorkspace: agentsByWs };
+  }, [wsResult, agResult]);
+
+  return {
+    projects,
+    agentsByWorkspace,
+    isLoading: wsLoading || agLoading,
+    error: wsError ?? agError,
+    refetch,
+  };
+}

package/client/overview/useProjectOptions.ts

@@ -0,0 +1,73 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
+
+import type { WorkspaceEntry } from "../../shared/overview-types";
+import { gitBranchesRpc } from "../../shared/git-branches";
+import { projectIconRpc } from "../../shared/project-icon";
+
+function projectSourceDirectory(workspaces: WorkspaceEntry[]): string | undefined {
+  return workspaces.find((workspace) => workspace.workspaceKind !== "worktree")?.workspaceDirectory
+    ?? workspaces[0]?.workspaceDirectory;
+}
+
+function currentWorkspaceBranches(workspaces: WorkspaceEntry[]) {
+  const branches = new Set<string>();
+  for (const workspace of workspaces) {
+    const branch = workspace.gitRuntime?.currentBranch?.trim();
+    if (branch) branches.add(branch);
+  }
+  return Array.from(branches, (branch) => ({ id: branch, label: branch, detail: "当前 Workspace 分支" }));
+}
+
+export function useProjectOptions(
+  hostId: string,
+  projects: Array<{ projectId: string; projectDisplayName: string; workspaces: WorkspaceEntry[] }>,
+) {
+  const baseOptions = useMemo(() => projects.flatMap((project) => {
+    const projectDirectory = projectSourceDirectory(project.workspaces);
+    if (!projectDirectory) return [];
+    const branches = currentWorkspaceBranches(project.workspaces);
+    return [{
+      projectId: project.projectId,
+      projectDisplayName: project.projectDisplayName,
+      projectDirectory,
+      branches,
+      defaultBranch: branches[0]?.id ?? null,
+    }];
+  }), [projects]);
+
+  const getProjectIcon = useRpc(projectIconRpc);
+  const getGitBranches = useRpc(gitBranchesRpc);
+  const projectIds = baseOptions.map((item) => item.projectId);
+  const projectDirectories = baseOptions.map((item) => item.projectDirectory);
+
+  const { data: icons = new Map<string, string | null>() } = useQuery({
+    queryKey: ["workspace-overview-project-icons", hostId, projectIds],
+    queryFn: async () => new Map(await Promise.all(baseOptions.map(async (project) => [
+      project.projectId,
+      (await getProjectIcon({ projectId: project.projectId, projectDirectory: project.projectDirectory })).dataUri,
+    ] as const))),
+    enabled: baseOptions.length > 0,
+    staleTime: 60_000,
+  });
+
+  const { data: branches = new Map<string, Awaited<ReturnType<typeof getGitBranches>>>() } = useQuery({
+    queryKey: ["workspace-overview-git-branches", hostId, projectDirectories],
+    queryFn: async () => new Map(await Promise.all(baseOptions.map(async (project) => [
+      project.projectId,
+      await getGitBranches({ projectDirectory: project.projectDirectory }),
+    ] as const))),
+    enabled: baseOptions.length > 0,
+    staleTime: 10_000,
+  });
+
+  return useMemo(() => baseOptions.map((project) => ({
+    ...project,
+    branches: branches.get(project.projectId)?.branches ?? project.branches,
+    defaultBranch: branches.get(project.projectId)?.defaultBranch ?? project.defaultBranch,
+    projectIconDataUri: icons.get(project.projectId) ?? null,
+  })), [baseOptions, branches, icons]);
+}
+
+export { projectSourceDirectory };

package/client/web.ts

@@ -0,0 +1,160 @@
+import { Platform } from "react-native";
+
+type PointerLike = { clientX?: number; pageX?: number };
+type ClipboardFileLike = {
+  name?: string;
+  type?: string;
+};
+type ClipboardItemLike = {
+  kind?: string;
+  type?: string;
+  getAsFile?: () => ClipboardFileLike | null;
+};
+type ClipboardEventLike = {
+  clipboardData?: { items?: ArrayLike<ClipboardItemLike> | null } | null;
+  preventDefault(): void;
+};
+type KeyboardEventLike = {
+  key: string;
+  isComposing: boolean;
+  keyCode: number;
+  stopPropagation(): void;
+};
+type ElementListener =
+  | ((event: ClipboardEventLike) => void)
+  | ((event: KeyboardEventLike) => void)
+  | (() => void);
+type ElementLike = {
+  addEventListener(type: string, listener: ElementListener, capture?: boolean): void;
+  removeEventListener(type: string, listener: ElementListener, capture?: boolean): void;
+};
+type DocumentLike = {
+  addEventListener(type: string, listener: (event: PointerLike) => void): void;
+  removeEventListener(type: string, listener: (event: PointerLike) => void): void;
+  getElementById(id: string): ElementLike | null;
+};
+
+declare const document: DocumentLike;
+declare class FileReader {
+  result: string | ArrayBuffer | null;
+  error: Error | null;
+  onload: (() => void) | null;
+  onerror: (() => void) | null;
+  readAsDataURL(file: ClipboardFileLike): void;
+}
+
+export interface PastedImage {
+  data: string;
+  dataUrl: string;
+  mimeType: string;
+  fileName: string;
+}
+
+const RASTER_IMAGE_TYPES = new Set(["image/png", "image/jpeg", "image/gif", "image/webp"]);
+
+function readImage(file: ClipboardFileLike, mimeType: string, index: number): Promise<PastedImage> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      if (typeof reader.result !== "string") {
+        reject(new Error("无法读取粘贴的图片"));
+        return;
+      }
+      const comma = reader.result.indexOf(",");
+      if (comma < 0) {
+        reject(new Error("粘贴的图片格式无效"));
+        return;
+      }
+      resolve({
+        data: reader.result.slice(comma + 1),
+        dataUrl: reader.result,
+        mimeType,
+        fileName: file.name?.trim() || `pasted-image-${index + 1}.${mimeType.split("/")[1] || "png"}`,
+      });
+    };
+    reader.onerror = () => reject(reader.error ?? new Error("无法读取粘贴的图片"));
+    reader.readAsDataURL(file);
+  });
+}
+
+export function subscribeToImagePaste(
+  inputNativeID: string,
+  onImages: (images: PastedImage[]) => void,
+  onError: (message: string) => void,
+): () => void {
+  if (Platform.OS !== "web" || typeof document === "undefined") return () => {};
+  const element = document.getElementById(inputNativeID);
+  if (!element) return () => {};
+
+  const handlePaste = (event: ClipboardEventLike) => {
+    const files: Array<{ file: ClipboardFileLike; mimeType: string }> = [];
+    for (const item of Array.from(event.clipboardData?.items ?? [])) {
+      const mimeType = item.type?.toLowerCase() ?? "";
+      if (item.kind !== "file" || !RASTER_IMAGE_TYPES.has(mimeType)) continue;
+      const file = item.getAsFile?.();
+      if (file) files.push({ file, mimeType });
+    }
+    if (files.length === 0) return;
+    event.preventDefault();
+    void Promise.all(files.map(({ file, mimeType }, index) => readImage(file, mimeType, index)))
+      .then(onImages)
+      .catch((error: unknown) => onError(error instanceof Error ? error.message : String(error)));
+  };
+
+  element.addEventListener("paste", handlePaste);
+  return () => element.removeEventListener("paste", handlePaste);
+}
+
+export function subscribeToImeEnter(inputNativeID: string): () => void {
+  if (Platform.OS !== "web" || typeof document === "undefined") return () => {};
+  const input = document.getElementById(inputNativeID);
+  if (!input) return () => {};
+  let composing = false;
+  const start = () => { composing = true; };
+  const end = () => { composing = false; };
+  const keydown = (event: KeyboardEventLike) => {
+    if (event.key === "Enter" && (composing || event.isComposing || event.keyCode === 229)) {
+      // Keep the IME candidate selection; don't let React submit it.
+      event.stopPropagation();
+    }
+  };
+  input.addEventListener("compositionstart", start);
+  input.addEventListener("compositionend", end);
+  input.addEventListener("keydown", keydown, true);
+  return () => {
+    input.removeEventListener("compositionstart", start);
+    input.removeEventListener("compositionend", end);
+    input.removeEventListener("keydown", keydown, true);
+  };
+}
+
+export function pointerX(event: unknown): number | null {
+  if (Platform.OS !== "web" || !event || typeof event !== "object") return null;
+  const nativeEvent = (event as { nativeEvent?: PointerLike }).nativeEvent;
+  const value = nativeEvent?.clientX ?? nativeEvent?.pageX;
+  return typeof value === "number" ? value : null;
+}
+
+export function trackHorizontalPointer(
+  onMove: (clientX: number) => void,
+  onEnd: () => void,
+): () => void {
+  if (Platform.OS !== "web" || typeof document === "undefined") return () => {};
+  const move = (event: PointerLike) => {
+    const value = event.clientX ?? event.pageX;
+    if (typeof value === "number") onMove(value);
+  };
+  const end = () => {
+    cleanup();
+    onEnd();
+  };
+  const cleanup = () => {
+    document.removeEventListener("pointermove", move);
+    document.removeEventListener("pointerup", end);
+    document.removeEventListener("pointercancel", end);
+  };
+  document.addEventListener("pointermove", move);
+  document.addEventListener("pointerup", end);
+  document.addEventListener("pointercancel", end);
+  return cleanup;
+}

package/client/workspace-agents.tsx

@@ -0,0 +1,71 @@
+import { type PluginWorkspacePanelProps, usePaseo } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import React, { useMemo } from "react";
+import { FlatList, Text, TouchableOpacity, View, type ViewStyle, type TextStyle } from "react-native";
+import { WorkspaceAgentRow } from "./components/WorkspaceAgentRow";
+
+export function WorkspaceAgentsPanel({ theme, layout, workspaceId, navigation }: PluginWorkspacePanelProps) {
+  const paseo = usePaseo();
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["workspace-agents", workspaceId],
+    queryFn: async () => {
+      const result = await paseo.agents.list({
+        filter: { includeArchived: true },
+      });
+      return result.entries.filter(
+        (entry: { agent: { workspaceId?: string } }) => entry.agent.workspaceId === workspaceId,
+      );
+    },
+  });
+
+  const styles = useMemo(
+    () =>
+      ({
+        screen: { flex: 1, backgroundColor: theme.colors.surface0, padding: layout.compact ? 12 : 16 } as ViewStyle,
+        header: { marginBottom: 12 } as ViewStyle,
+        title: { color: theme.colors.foreground, fontSize: layout.compact ? 16 : 18, fontWeight: "700" as const } as TextStyle,
+        empty: { color: theme.colors.foregroundMuted, textAlign: "center" as const, marginTop: 32 } as TextStyle,
+        error: { color: theme.colors.statusDanger, textAlign: "center" as const, marginTop: 16 } as TextStyle,
+      }),
+    [theme, layout.compact],
+  );
+
+  if (isLoading) {
+    return (
+      <View style={styles.screen}>
+        <Text style={{ color: theme.colors.foregroundMuted }}>Loading agents…</Text>
+      </View>
+    );
+  }
+
+  if (error) {
+    return (
+      <View style={styles.screen}>
+        <Text style={styles.error}>{error.message}</Text>
+      </View>
+    );
+  }
+
+  const agents = data ?? [];
+
+  return (
+    <View style={styles.screen}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Workspace Agents</Text>
+      </View>
+      {agents.length === 0 ? (
+        <Text style={styles.empty}>No agents in this workspace.</Text>
+      ) : (
+        <FlatList
+          data={agents.map((entry: { agent: { id: string; title: string | null; provider: string; model: string | null; status: string; requiresAttention?: boolean; archivedAt?: string | null } }) => entry.agent)}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => (
+            <WorkspaceAgentRow agent={item} theme={theme} compact={layout.compact} navigation={navigation!} />
+          )}
+          contentContainerStyle={{ paddingBottom: 16 }}
+        />
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { StyleSheet, type TextStyle, type ViewStyle } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+
+export function createBadgeStyles(theme: PluginSurfaceProps["theme"]) {
+  const colors = theme.colors;
+  return StyleSheet.create({
+    badge: { flexDirection: "row", alignItems: "center", height: 28, maxWidth: 240, overflow: "hidden", borderRadius: 16, gap: 4 } as ViewStyle,
+    badgeSelectable: {} as ViewStyle,
+    badgeDisabled: { opacity: 0.5 } as ViewStyle,
+    badgeIcon: { width: 16, height: 16, alignItems: "center", justifyContent: "center", flexShrink: 0 } as ViewStyle,
+    badgeText: { minWidth: 0, fontSize: 14, lineHeight: 20, color: colors.foregroundMuted, flexShrink: 1 } as TextStyle,
+  });
+}

package/client/workspace-creator/constants.ts

@@ -0,0 +1,14 @@
+import type { OpenMenu, TerminalProfile } from "./types";
+
+export const PROVIDER_READY_TIMEOUT_MS = 10_000;
+export const MAX_MENU_HEIGHT = 260;
+export const MENU_WIDTH_BY_KIND: Record<Exclude<OpenMenu, null>, number> = {
+  project: 360, host: 240, isolation: 220, base: 240, launch: 260,
+  provider: 260, model: 340, mode: 220, thinking: 240,
+};
+export const DEFAULT_TERMINAL_PROFILES: TerminalProfile[] = [
+  { id: "claude", name: "Claude Code", command: "claude", args: ["{{{prompt}}}"], icon: "claude" },
+  { id: "codex", name: "Codex", command: "codex", args: ["{{{prompt}}}"], icon: "codex" },
+  { id: "opencode", name: "OpenCode", command: "opencode", args: ["--prompt={{{prompt}}}"], icon: "opencode" },
+  { id: "pi", name: "Pi", command: "pi", args: ["{{{prompt}}}"], icon: "pi" },
+];

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

@@ -0,0 +1,12 @@
+import { StyleSheet, type TextStyle, type ViewStyle } from "react-native";
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+
+export function createControlStyles(theme: PluginSurfaceProps["theme"]) {
+  const colors = theme.colors;
+  return StyleSheet.create({
+    control: { minHeight: 28, maxWidth: 220, flexDirection: "row", alignItems: "center", gap: 4, paddingHorizontal: 8, borderRadius: 14 } as ViewStyle,
+    controlOpen: { backgroundColor: colors.foregroundMuted + "12" } as ViewStyle,
+    controlDisabled: { opacity: 0.55 } as ViewStyle,
+    controlValue: { color: colors.foregroundMuted, fontSize: 14, lineHeight: 18, fontWeight: "400", minWidth: 0, maxWidth: 150 } as TextStyle,
+  });
+}

package/client/workspace-creator/provider-selection.ts

@@ -0,0 +1,51 @@
+import type { ComposerSelection, PaseoProviderModelPreference, ProviderEntry, ProviderModel, ProviderSnapshot, ThinkingOption } from "./types";
+
+export function readPaseoProviderModelPreference(): PaseoProviderModelPreference | null { return null; }
+export function readyProviders(snapshot: ProviderSnapshot): ProviderEntry[] {
+  return snapshot.entries.filter((entry) => entry.enabled !== false && entry.status === "ready");
+}
+export function selectableModels(entry: ProviderEntry | null): ProviderModel[] {
+  return (entry?.models ?? []).filter((model) => model.isSelectable !== false);
+}
+export function defaultModel(entry: ProviderEntry | null): ProviderModel | null {
+  const models = selectableModels(entry);
+  return models.find((model) => model.isDefault) ?? models[0] ?? null;
+}
+function defaultMode(entry: ProviderEntry | null): { id: string; label?: string } | null {
+  if (!entry) return null;
+  return entry.modes?.find((mode) => mode.id === entry.defaultModeId) ?? entry.modes?.[0]
+    ?? (entry.defaultModeId ? { id: entry.defaultModeId } : null);
+}
+function defaultThinking(model: ProviderModel | null): ThinkingOption | null {
+  if (!model) return null;
+  return model.thinkingOptions?.find((option) => option.id === model.defaultThinkingOptionId)
+    ?? model.thinkingOptions?.find((option) => option.isDefault) ?? model.thinkingOptions?.[0] ?? null;
+}
+export function buildSelection(entry: ProviderEntry, model = defaultModel(entry)): ComposerSelection {
+  const mode = defaultMode(entry); const thinking = defaultThinking(model);
+  return {
+    providerId: entry.provider, providerLabel: entry.label ?? entry.provider,
+    modelId: model?.id ?? null, modelLabel: model?.label ?? null,
+    modeId: mode?.id ?? null, modeLabel: mode?.label ?? mode?.id ?? null,
+    thinkingOptionId: thinking?.id ?? null, thinkingLabel: thinking?.label ?? thinking?.id ?? null,
+  };
+}
+export function defaultSelection(snapshot: ProviderSnapshot, preferred: PaseoProviderModelPreference | null = readPaseoProviderModelPreference()): ComposerSelection | null {
+  const entries = readyProviders(snapshot);
+  const preferredProviderId = preferred?.providerId ?? null;
+  const preferredModelId = preferred?.modelId ?? null;
+  const preferredEntry = preferredProviderId ? entries.find((item) => item.provider === preferredProviderId) ?? null : null;
+  if (preferredEntry) {
+    const preferredModel = preferredModelId ? selectableModels(preferredEntry).find((model) => model.id === preferredModelId) ?? null : null;
+    return buildSelection(preferredEntry, preferredModel ?? defaultModel(preferredEntry));
+  }
+  const entry = entries.find((item) => item.provider === "codex")
+    ?? entries.find((item) => item.provider.toLowerCase().includes("codex")) ?? entries[0] ?? null;
+  return entry ? buildSelection(entry) : null;
+}
+export function providerModelId(selection: ComposerSelection): string {
+  return selection.modelId ? `${selection.providerId}/${selection.modelId}` : selection.providerId;
+}
+export function providerById(snapshot: ProviderSnapshot | null, providerId: string): ProviderEntry | null {
+  return readyProviders(snapshot ?? { entries: [] }).find((entry) => entry.provider === providerId) ?? null;
+}

package/client/workspace-creator/submit-workspace.ts

@@ -0,0 +1,67 @@
+import { PROVIDER_READY_TIMEOUT_MS } from "./constants";
+import { defaultSelection, providerModelId } from "./provider-selection";
+import type { ComposerSelection, Isolation, LaunchTarget, PaseoClient, ProviderSnapshot, TerminalProfile, WorkspaceProjectOption } from "./types";
+import type { PastedImage } from "../web";
+
+function createWorktreeSlug(): string { return `workspace-${Date.now().toString(36)}`; }
+
+export async function ensureSelection(input: { paseo: PaseoClient; projectDirectory: string; snapshot: ProviderSnapshot | null; selection: ComposerSelection | null }): Promise<ComposerSelection> {
+  if (input.selection) return input.selection;
+  const snapshot = input.snapshot ?? await input.paseo.providers.waitForReady({ cwd: input.projectDirectory, timeoutMs: PROVIDER_READY_TIMEOUT_MS });
+  const selection = defaultSelection(snapshot);
+  if (!selection) throw new Error("没有可用的 provider");
+  return selection;
+}
+
+function workspaceSource(project: WorkspaceProjectOption, isolation: Isolation, baseBranch: string) {
+  return isolation === "worktree"
+    ? { kind: "worktree" as const, cwd: project.projectDirectory, projectId: project.projectId, worktreeSlug: createWorktreeSlug(), action: "branch-off" as const, baseBranch }
+    : { kind: "directory" as const, path: project.projectDirectory, projectId: project.projectId };
+}
+
+interface SubmitWorkspaceInput {
+  project: WorkspaceProjectOption | null; isolation: Isolation; baseBranch: string; paseo: PaseoClient;
+  snapshot: ProviderSnapshot | null; selection: ComposerSelection | null; launchTarget: LaunchTarget;
+  terminalProfiles: TerminalProfile[];
+  launchTerminal: (input: { workspaceDirectory: string; workspaceId: string; serverId: string; prompt: string; profile: { name: string; command: string; args: string[] } | null }) => Promise<{ terminalId: string }>;
+  openAgent: (agentId: string) => void | Promise<unknown>; serverId: string;
+  setSelection: (selection: ComposerSelection) => void; setPending: (pending: boolean) => void;
+  setError: (error: string | null) => void; onDone: () => void;
+  images: PastedImage[];
+}
+
+export async function submitWorkspacePrompt(input: SubmitWorkspaceInput, rawPrompt: string): Promise<boolean> {
+  const prompt = rawPrompt.trim();
+  if ((!prompt && input.images.length === 0) || !input.project) return false;
+  input.setPending(true); input.setError(null);
+  try {
+    const source = workspaceSource(input.project, input.isolation, input.baseBranch);
+    if (input.launchTarget.kind === "terminal") {
+      if (!prompt) return false;
+      const profileId = input.launchTarget.profileId;
+      const workspace = await input.paseo.workspaces.create({ source });
+      const current = workspace.current() ?? await workspace.refresh();
+      const workspaceDirectory = current?.workspaceDirectory ?? workspace.directory;
+      if (!workspaceDirectory) throw new Error("创建的 Workspace 没有可用目录");
+      const profile = profileId === "blank" ? null : input.terminalProfiles.find((item) => item.id === profileId) ?? null;
+      await input.launchTerminal({ workspaceDirectory, workspaceId: workspace.id, serverId: input.serverId, prompt, profile: profile ? { name: profile.name, command: profile.command, args: profile.args } : null });
+    } else {
+      const selection = await ensureSelection({ paseo: input.paseo, projectDirectory: input.project.projectDirectory, snapshot: input.snapshot, selection: input.selection });
+      input.setSelection(selection);
+      const workspace = await input.paseo.workspaces.create({ source, ...(prompt ? { firstAgentContext: { prompt } } : {}) });
+      const agent = await workspace.agents.create({
+        config: { provider: providerModelId(selection), ...(selection.modeId ? { modeId: selection.modeId } : {}), ...(selection.thinkingOptionId ? { thinkingOptionId: selection.thinkingOptionId } : {}) },
+        prompt,
+        images: input.images.map(({ data, mimeType }) => ({ data, mimeType })),
+      });
+      await input.openAgent(agent.id);
+    }
+    input.onDone();
+    return true;
+  } catch (error) {
+    input.setError(error instanceof Error ? error.message : String(error));
+    return false;
+  } finally {
+    input.setPending(false);
+  }
+}

package/client/workspace-creator/types.ts

@@ -0,0 +1,40 @@
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+
+export type PaseoClient = ReturnType<typeof import("@getpaseo/plugin/client").usePaseo>;
+export type OpenMenu = "project" | "host" | "isolation" | "base" | "launch" | "provider" | "model" | "mode" | "thinking" | null;
+export type Isolation = "local" | "worktree";
+export type LaunchTarget = { kind: "chat" } | { kind: "terminal"; profileId: string };
+
+export interface TerminalProfile { id: string; name: string; command: string; args: string[]; icon?: string }
+export interface GitBranchOption { id: string; label: string; detail: string }
+export interface WorkspaceProjectOption {
+  projectId: string; projectDisplayName: string; projectDirectory: string;
+  branches: GitBranchOption[]; defaultBranch: string | null; projectIconDataUri?: string | null;
+}
+export interface ThinkingOption { id: string; label?: string; isDefault?: boolean }
+export interface ProviderModel {
+  id: string; label: string; isSelectable?: boolean; isDefault?: boolean;
+  defaultThinkingOptionId?: string; thinkingOptions?: ThinkingOption[];
+}
+export interface ProviderEntry {
+  provider: string; status: "ready" | "loading" | "error" | "unavailable" | string;
+  enabled?: boolean; label?: string; error?: string; defaultModeId?: string | null;
+  modes?: Array<{ id: string; label?: string; description?: string; icon?: string }>;
+  models?: ProviderModel[];
+}
+export interface ProviderSnapshot { entries: ProviderEntry[] }
+export interface ComposerSelection {
+  providerId: string; providerLabel: string; modelId: string | null; modelLabel: string | null;
+  modeId: string | null; modeLabel: string | null; thinkingOptionId: string | null; thinkingLabel: string | null;
+}
+export interface PaseoProviderModelPreference { providerId: string; modelId: string | null }
+export interface WorkspaceCreatorPanelProps {
+  projectId: string; projectDisplayName: string; projectDirectory: string | undefined;
+  hostId: string; navigation: NonNullable<PluginSurfaceProps["navigation"]>;
+  projects: WorkspaceProjectOption[]; paseo: PaseoClient; onClose: () => void; onCreate?: () => void;
+  initialPanelWidth?: number; maxPanelWidth?: number;
+  theme: PluginSurfaceProps["theme"]; layout: PluginSurfaceProps["layout"];
+}
+export interface MenuOption {
+  id: string; label: string; detail?: string; iconName?: string; projectIconDataUri?: string | null;
+}

package/client/workspace-creator/ui-utils.ts

@@ -0,0 +1,15 @@
+export function formatControlValue(value: string | null, fallback: string): string {
+  return value && value.trim() ? value : fallback;
+}
+export function opaqueSurfaceColor(surface: string, foreground: string): string {
+  const rgba = surface.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  if (rgba) return `rgb(${rgba[1]}, ${rgba[2]}, ${rgba[3]})`;
+  if (/^#[0-9a-f]{8}$/i.test(surface)) return surface.slice(0, 7);
+  if (/^#[0-9a-f]{6}$/i.test(surface)) return surface;
+  const foregroundHex = foreground.match(/^#([0-9a-f]{6})$/i)?.[1];
+  const foregroundRgb = foreground.match(/^rgba?\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/i);
+  const red = foregroundHex ? Number.parseInt(foregroundHex.slice(0, 2), 16) : Number(foregroundRgb?.[1] ?? 0);
+  const green = foregroundHex ? Number.parseInt(foregroundHex.slice(2, 4), 16) : Number(foregroundRgb?.[2] ?? 0);
+  const blue = foregroundHex ? Number.parseInt(foregroundHex.slice(4, 6), 16) : Number(foregroundRgb?.[3] ?? 0);
+  return (red * 299 + green * 587 + blue * 114) / 1000 > 128 ? "#171717" : "#ffffff";
+}