@stevecastaneda/paseo-progress 0.1.0

package/client/pills.tsx

@@ -0,0 +1,235 @@
+import type { PaseoAgentUpdate, PaseoWorkspaceUpdate } from "@getpaseo/client";
+import type { PluginButtonContentProps, PluginButtonIconProps, PluginButtonRegistration, PluginClientContext } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import React, { useSyncExternalStore } from "react";
+import { Platform } from "react-native";
+import { type AttentionResult, getAttention } from "../shared/rpc";
+import { isIdle, type Pill, pillFor } from "./pill-state";
+import { observeDirectory } from "./directory";
+import { onPanelOpened } from "./panel-opened";
+import { IconSwap } from "./motion";
+import { Spinner } from "./spinner";
+import { AttentionPopover } from "./pill-popover";
+
+export const PILL_POLL_MS = 5_000;
+// A worktree with nothing going on (no file, or a closed run with nothing
+// waiting) is checked on every 6th poll, 30 seconds. Its agents' updates
+// still trigger a check, at most once a poll interval.
+export const IDLE_POLL_EVERY = 6;
+
+// Paseo's desktop app shows the panel in Explorer, beside the chat. The phone
+// apps never draw Explorer's pane, so there the panel is a tab of its own.
+// It has its own id on phones: Paseo 0.10.1 reopens an existing tab where it
+// already is, and earlier versions of this plugin left a "progress" tab in the
+// phone's hidden Explorer pane, which a plugin can't move or close.
+export function progressPanel(): { id: string; location: "explorer" | "workspace" } {
+  return Platform.OS === "web" ? { id: "progress", location: "explorer" } : { id: "progress-tab", location: "workspace" };
+}
+
+type Workspace = { id: string; workspaceDirectory?: string; projectRootPath: string };
+
+function directoryOf(workspace: Workspace): string {
+  return workspace.workspaceDirectory ?? workspace.projectRootPath;
+}
+
+// A pill above the message box for every agent whose workspace has something
+// to show; pill-state.ts decides what. Questions or something stuck open a
+// popover with the questions, their Copy buttons and a way into the panel.
+// The other pills open the panel. Paseo can't open a panel without switching
+// to its workspace, so the first-run pill is a nudge in that workspace rather
+// than opening the panel on its own.
+export function contributePills(client: PluginClientContext) {
+  const workspaces = new Map<string, string>();
+  // The last report per workspace; pillFor turns it into what the pill shows.
+  const reports = new Map<string, AttentionResult>();
+  const where = { phone: progressPanel().location === "workspace" };
+  const pillOf = (workspaceId: string) => pillFor(reports.get(workspaceId), where);
+  // Bumped on each report so a poll that was already in flight can't bring the pill back.
+  let openedReports = 0;
+  const listeners = new Set<() => void>();
+  const pills = new Map<string, { workspaceId: string; label: string; mode: Pill["mode"]; pill: PluginButtonRegistration }>();
+  const pending = new Set<string>();
+  // Polls left before an idle workspace is checked again, and when each was last checked.
+  const idleWait = new Map<string, number>();
+  const checkedAt = new Map<string, number>();
+  let agents: Array<{ id: string; workspaceId?: string | null }> = [];
+  let stopped = false;
+  let timer: ReturnType<typeof setTimeout> | undefined;
+
+  function PillIcon(props: PluginButtonIconProps) {
+    const icon = useSyncExternalStore(
+      (listener) => { listeners.add(listener); return () => { listeners.delete(listener); }; },
+      () => pillOf(props.workspaceId)?.icon ?? "open",
+    );
+    return (
+      <IconSwap swapKey={icon} size={props.size}>
+        {icon === "stuck" ? <Icon name="OctagonAlert" size={props.size} color={props.theme.colors.statusDanger} />
+          : icon === "questions" ? <Icon name="MessageCircleQuestion" size={props.size} color={props.color} />
+          : icon === "started" ? <Spinner color={props.color} size={props.size} />
+          : <Icon name="ListChecks" size={props.size} color={props.color} />}
+      </IconSwap>
+    );
+  }
+
+  const openPanel = (workspaceId: string) => {
+    const { id, location } = progressPanel();
+    client.openPanel(id, { workspaceId, location });
+  };
+
+  const buttonFor = (workspaceId: string, mode: Pill["mode"], label: string) => mode === "attention"
+    ? { title: "Progress needs you", icon: PillIcon, label, behavior: { kind: "popover" as const, Content: PillContent } }
+    : { title: "Open Progress", icon: PillIcon, label, behavior: { kind: "action" as const, onPress: () => openPanel(workspaceId) } };
+
+  function PillContent(props: PluginButtonContentProps) {
+    return <AttentionPopover {...props} openPanel={() => openPanel(props.workspaceId)} />;
+  }
+
+  const publish = () => {
+    if (stopped) return;
+    const seen = new Set<string>();
+    for (const agent of agents) {
+      const workspaceId = agent.workspaceId;
+      if (!workspaceId) continue;
+      const wanted = pillOf(workspaceId);
+      if (!wanted) continue;
+      const { mode, label } = wanted;
+      seen.add(agent.id);
+      const existing = pills.get(agent.id);
+      if (existing && existing.workspaceId !== workspaceId) {
+        existing.pill.remove();
+        pills.delete(agent.id);
+      }
+      const entry = pills.get(agent.id);
+      if (!entry) {
+        const pill = client.addComposerPill({ id: "progress-attention", workspaceId, agentId: agent.id, button: buttonFor(workspaceId, mode, label) });
+        pills.set(agent.id, { workspaceId, label, mode, pill });
+      } else if (entry.mode !== mode) {
+        entry.pill.update(buttonFor(workspaceId, mode, label));
+        Object.assign(entry, { mode, label });
+      } else if (entry.label !== label) {
+        entry.pill.update({ label });
+        entry.label = label;
+      }
+    }
+    for (const [agentId, entry] of pills) {
+      if (!seen.has(agentId)) {
+        entry.pill.remove();
+        pills.delete(agentId);
+      }
+    }
+  };
+
+  // Every change goes through here, so the icons redraw whenever a pill could change.
+  const setReport = (workspaceId: string, next: AttentionResult | undefined) => {
+    if (next) reports.set(workspaceId, next);
+    else reports.delete(workspaceId);
+    for (const listener of listeners) listener();
+  };
+
+  // Only workspaces with an agent can show a pill, so only those are read.
+  const refresh = async (workspaceId: string) => {
+    const directory = workspaces.get(workspaceId);
+    if (stopped || !directory || pending.has(workspaceId)) return;
+    pending.add(workspaceId);
+    checkedAt.set(workspaceId, Date.now());
+    const reportsBefore = openedReports;
+    try {
+      const result = await client.rpc(getAttention, { workspaceId, workspaceDirectory: directory });
+      if (stopped || workspaces.get(workspaceId) !== directory) return;
+      // The panel was opened while this poll was in flight: its answer is already out of date.
+      setReport(workspaceId, openedReports === reportsBefore ? result : { ...result, panelOpened: true });
+      if (isIdle(result)) idleWait.set(workspaceId, IDLE_POLL_EVERY - 1);
+      else idleWait.delete(workspaceId);
+      publish();
+    } catch { /* Try again on the next poll. */ } finally {
+      pending.delete(workspaceId);
+    }
+  };
+  const watched = () => new Set(agents.flatMap((agent) => (agent.workspaceId && workspaces.has(agent.workspaceId) ? [agent.workspaceId] : [])));
+  const due = (workspaceId: string) => {
+    const wait = idleWait.get(workspaceId);
+    if (!wait) return true;
+    idleWait.set(workspaceId, wait - 1);
+    return false;
+  };
+  // An agent update can mean a new run; check soon, but not on every update.
+  const nudge = (workspaceId: string) => {
+    if (Date.now() - (checkedAt.get(workspaceId) ?? 0) >= PILL_POLL_MS) void refresh(workspaceId);
+  };
+  // The next poll doesn't wait on this one: a slow worktree can't hold up every pill.
+  // `pending` already stops a second check of the same worktree overlapping.
+  const sync = () => {
+    for (const workspaceId of [...watched()].filter(due)) void refresh(workspaceId);
+    if (!stopped) timer = setTimeout(sync, PILL_POLL_MS);
+  };
+  const forget = (workspaceId: string) => {
+    workspaces.delete(workspaceId);
+    idleWait.delete(workspaceId);
+    checkedAt.delete(workspaceId);
+    setReport(workspaceId, undefined);
+  };
+
+  const stopWorkspaces = observeDirectory({
+    list: (options) => client.paseo.workspaces.list(options),
+    select: (message) => (message.type === "workspace_update" ? message.payload : undefined),
+    snapshot: (entries) => {
+      const next = new Map((entries as Workspace[]).map((workspace) => [workspace.id, directoryOf(workspace)]));
+      for (const id of [...workspaces.keys()]) if (!next.has(id)) forget(id);
+      const hasAgent = new Set(agents.map((agent) => agent.workspaceId));
+      for (const [id, directory] of next) {
+        if (workspaces.get(id) !== directory) {
+          workspaces.set(id, directory);
+          if (hasAgent.has(id)) void refresh(id);
+        }
+      }
+      publish();
+    },
+    update: (update: PaseoWorkspaceUpdate) => {
+      if (update.kind === "remove") forget(update.id);
+      else {
+        const directory = directoryOf(update.workspace as Workspace);
+        if (workspaces.get(update.workspace.id) !== directory) {
+          workspaces.set(update.workspace.id, directory);
+          if (agents.some((agent) => agent.workspaceId === update.workspace.id)) void refresh(update.workspace.id);
+        }
+      }
+      publish();
+    },
+  });
+  const stopAgents = observeDirectory({
+    list: (options) => client.paseo.agents.list({ ...options, filter: { includeArchived: false } }),
+    select: (message) => (message.type === "agent_update" ? message.payload : undefined),
+    snapshot: (entries) => {
+      agents = entries.map(({ agent }) => agent);
+      for (const id of watched()) if (!reports.has(id)) void refresh(id);
+      publish();
+    },
+    update: (update: PaseoAgentUpdate) => {
+      const id = update.kind === "remove" ? update.agentId : update.agent.id;
+      agents = agents.filter((agent) => agent.id !== id);
+      if (update.kind !== "remove") {
+        agents.push(update.agent);
+        if (update.agent.workspaceId && workspaces.has(update.agent.workspaceId)) nudge(update.agent.workspaceId);
+      }
+      publish();
+    },
+  });
+  const stopOpened = onPanelOpened((workspaceId) => {
+    openedReports++;
+    const report = reports.get(workspaceId);
+    if (report) setReport(workspaceId, { ...report, panelOpened: true });
+    publish();
+  });
+  timer = setTimeout(sync, PILL_POLL_MS);
+
+  return () => {
+    stopped = true;
+    stopWorkspaces();
+    stopAgents();
+    stopOpened();
+    if (timer) clearTimeout(timer);
+    for (const { pill } of pills.values()) pill.remove();
+    pills.clear();
+    listeners.clear();
+  };
+}

package/client/preview.tsx

@@ -0,0 +1,228 @@
+import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
+import { Icon, Modal, ScrollView } from "@getpaseo/plugin/client/react-native";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import React, { useEffect, useRef, useState } from "react";
+import { ActivityIndicator, Image, Platform, Text, useWindowDimensions, View, type ViewStyle } from "react-native";
+import { type Attachment, attachmentIcon, isPreviewable } from "./attachments";
+import { previewDeliverable } from "../shared/rpc";
+import { PressScale, useLastPresent } from "./motion";
+import { imageOutline, raised } from "./surfaces";
+
+type Colors = PluginWorkspacePanelProps["theme"]["colors"];
+
+// An image or text attachment shown in a dialog, with a way out to the host's own app.
+// `onBack` returns to where the preview was opened from, e.g. a question's dialog.
+export function PreviewDialog({ colors, attachment, workspaceId, workspaceDirectory, onClose, onOpenOnHost, backLabel, onBack, gallery }: {
+  colors: Colors;
+  attachment: Attachment | null;
+  workspaceId: string;
+  workspaceDirectory: string;
+  onClose(): void;
+  onOpenOnHost(attachment: Attachment): void;
+  backLabel?: string;
+  onBack?(): void;
+  gallery?: Gallery;
+}) {
+  const open = Boolean(attachment);
+  attachment = useLastPresent(attachment);
+  return (
+    <Modal title={attachment?.title ?? "Preview"} icon={<Icon name={attachment ? attachmentIcon(attachment) : "FileText"} size={16} color={colors.foregroundMuted} />}
+      open={open} onOpenChange={(next) => { if (!next) onClose(); }}>
+      {attachment ? (
+        <PreviewBody colors={colors} attachment={attachment} workspaceId={workspaceId} workspaceDirectory={workspaceDirectory}
+          onOpenOnHost={() => { onClose(); onOpenOnHost(attachment); }} backLabel={backLabel} onBack={onBack} gallery={gallery} />
+      ) : <Modal.Content>{null}</Modal.Content>}
+    </Modal>
+  );
+}
+
+// The other previewable files beside this one (a question's images, a ticket's
+// screenshots), for Previous and Next. Only shown when there's more than one.
+export interface Gallery {
+  items: Attachment[];
+  onSelect(attachment: Attachment): void;
+}
+
+// Keeps only what the preview can show, for a Gallery's items.
+export function previewable(group: Attachment[]): Attachment[] {
+  return group.filter(isPreviewable);
+}
+
+type PreviewProps = {
+  colors: Colors;
+  attachment: Attachment;
+  workspaceId: string;
+  workspaceDirectory: string;
+  onOpenOnHost(): void;
+  backLabel?: string;
+  onBack?(): void;
+  gallery?: Gallery;
+};
+
+// The preview dialog's body in its own Modal.Content.
+export function PreviewBody(props: PreviewProps) {
+  const [long, setLong] = useState(false);
+  return <Modal.Content scrollable={!long}><PreviewContent {...props} onLong={setLong} /></Modal.Content>;
+}
+
+// The preview without its Modal.Content, for a dialog that already has one (see
+// StackedDialog): swapping Modal.Content itself would re-present the sheet on phones.
+// `onLong` says when the file is too tall for the dialog, so the host turns off
+// its own scrolling and the file scrolls with the actions pinned below.
+export function PreviewContent({ colors, attachment, workspaceId, workspaceDirectory, onOpenOnHost, backLabel, onBack, gallery, onLong }: PreviewProps & { onLong(long: boolean): void }) {
+  const fetchPreview = useRpc(previewDeliverable);
+  const previewQuery = (target: Attachment) => ({
+    queryKey: ["progress", "preview", workspaceId, target.ref, target.path],
+    queryFn: () => fetchPreview({ workspaceId, workspaceDirectory, ref: target.ref }),
+    staleTime: 30_000,
+    // Images arrive as data URIs up to ~13 MB; let them go soon after the dialog moves on.
+    gcTime: 30_000,
+  });
+  // Stepping to another file keeps this one on screen (dimmed) until the next loads,
+  // so the dialog doesn't collapse to a spinner and back.
+  const preview = useQuery({ ...previewQuery(attachment), placeholderData: (previous) => previous });
+  const stepping = preview.isPlaceholderData;
+  // Measure the image from its data rather than waiting on onLoad, which doesn't
+  // report a size for data URIs on every platform; without it the box stays 16:10.
+  const imageUri = !stepping && preview.data?.kind === "image" ? preview.data.dataUri : null;
+  useEffect(() => {
+    if (!imageUri) return;
+    let current = true;
+    Image.getSize(imageUri, (width, height) => {
+      if (current && width && height) setMeasured({ ref: attachment.ref, ratio: width / height });
+    }, () => {});
+    return () => { current = false; };
+  }, [imageUri, attachment.ref]);
+  // Load the next file in the direction of travel ahead of time, so stepping is
+  // instant without holding both neighbors in memory.
+  const queryClient = useQueryClient();
+  const items = gallery?.items ?? [];
+  const index = items.findIndex((item) => item.ref === attachment.ref);
+  const lastIndex = useRef(index);
+  useEffect(() => {
+    if (index < 0 || items.length < 2) return;
+    const step = (lastIndex.current - index + items.length) % items.length === 1 ? -1 : 1;
+    lastIndex.current = index;
+    void queryClient.prefetchQuery(previewQuery(items[(index + step + items.length) % items.length]));
+  }, [attachment.ref, items.length]);
+  // Screenshots vary from phone-tall to full-width; size to the real image once it loads.
+  // Kept per file, so stepping to the next image doesn't borrow this one's shape.
+  const [measured, setMeasured] = useState<{ ref: string; ratio: number } | null>(null);
+  const aspectRatio = measured && (measured.ref === attachment.ref || stepping) ? measured.ratio : 16 / 10;
+  // A long file gets its own scroll area so the actions below it stay in view.
+  // Short ones keep the dialog sized to them.
+  const { height: windowHeight } = useWindowDimensions();
+  const long = estimatedHeight(preview.data, aspectRatio) > roomForContent(windowHeight);
+  useEffect(() => onLong(long), [long]);
+  const content = (
+    <>
+      {preview.isPending ? <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel="Loading preview" style={{ padding: 24 }} /> : null}
+      {preview.error ? (
+        <Text accessibilityRole="alert" selectable style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 18 }}>
+          Could not preview it: {preview.error.message}
+        </Text>
+      ) : null}
+      {preview.data?.kind === "text" ? (
+        <View style={{ padding: 10, borderRadius: 6, backgroundColor: colors.surface0, opacity: stepping ? 0.6 : 1 }}>
+          <Text selectable style={{ color: colors.foreground, fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace", fontSize: 12, lineHeight: 18 }}>
+            {preview.data.text}
+          </Text>
+          {preview.data.truncated ? (
+            <Text style={{ color: colors.foregroundMuted, fontSize: 11, lineHeight: 16, paddingTop: 8 }}>
+              Showing the first 256 KB. Press Open to see the rest in its default app.
+            </Text>
+          ) : null}
+        </View>
+      ) : null}
+      {preview.data?.kind === "image" ? (
+        <Image accessibilityLabel={attachment.title} source={{ uri: preview.data.dataUri }} resizeMode="contain"
+          onLoad={(event) => {
+            const { width, height } = event.nativeEvent.source ?? {};
+            if (width && height && !stepping) setMeasured({ ref: attachment.ref, ratio: width / height });
+          }}
+          style={{ width: "100%", aspectRatio, maxHeight: 640, borderRadius: 6, ...imageOutline(colors), backgroundColor: colors.surface1, opacity: stepping ? 0.6 : 1 }} />
+      ) : null}
+      {/* The path as a caption under the file, where it has the full width. */}
+      <Text selectable numberOfLines={1} ellipsizeMode="middle" style={{ marginTop: -4, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
+        {attachment.path}
+      </Text>
+    </>
+  );
+  // Back on the left, Previous and Next in the middle, Open on the right.
+  const actions = (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
+      <View style={{ flex: 1, alignItems: "flex-start" }}>
+        {onBack ? <BackButton colors={colors} label={backLabel ?? "Back"} onPress={onBack} /> : null}
+      </View>
+      {gallery && gallery.items.length > 1 ? <Stepper colors={colors} gallery={gallery} current={attachment} /> : null}
+      <View style={{ flex: 1, alignItems: "flex-end" }}>
+        <DialogButton colors={colors} icon="ExternalLink" label="Open" accessibilityLabel="Open in its default app" onPress={onOpenOnHost} />
+      </View>
+    </View>
+  );
+  return long ? (
+    <>
+      <ScrollView style={{ flex: 1 }} contentContainerStyle={{ gap: 12 }}>{content}</ScrollView>
+      {actions}
+    </>
+  ) : (
+    <View style={{ gap: 20 }}>
+      <View style={{ gap: 12 }}>{content}</View>
+      {actions}
+    </View>
+  );
+}
+
+// Width left for content: Paseo's 520px dialog less its 24px padding each side.
+const CONTENT_WIDTH = 472;
+// Characters of 12px monospace per line of the text box (10px padding each side).
+const CHARS_PER_LINE = Math.floor((CONTENT_WIDTH - 20) / 7.2);
+
+// Roughly how tall the preview draws, including wrapped lines.
+function estimatedHeight(data: { kind: "image" } | { kind: "text"; text: string } | undefined, aspectRatio: number): number {
+  if (!data) return 0;
+  if (data.kind === "image") return Math.min(CONTENT_WIDTH / aspectRatio, 640);
+  const lines = data.text.split("\n").reduce((sum, line) => sum + Math.max(1, Math.ceil(line.length / CHARS_PER_LINE)), 0);
+  return lines * 18 + 20;
+}
+
+// Height the dialog has for the preview before it must scroll: Paseo caps the card
+// at 85% of the window (inside a 24px margin), less its header and padding, the
+// path caption (17px after an 8px gap) and the footer (30px after a 20px gap).
+function roomForContent(windowHeight: number): number {
+  return (windowHeight - 48) * 0.85 - 57 - 48 - (8 + 17) - (20 + 30);
+}
+
+// A dialog footer button: 13px label and 14px icon, 30px tall. Icon-only is a 30px square.
+export function DialogButton({ colors, icon, label, accessibilityLabel, onPress, outerStyle }: { colors: Colors; icon: string; label?: string; accessibilityLabel?: string; onPress(): void; outerStyle?: ViewStyle }) {
+  return (
+    <PressScale accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} onPress={onPress} outerStyle={outerStyle}
+      style={({ pressed }) => ({
+        flexDirection: "row", alignItems: "center", gap: 6,
+        paddingVertical: label ? 6 : 8, paddingLeft: label ? 8 : 8, paddingRight: label ? 10 : 8,
+        borderRadius: 6, ...raised(colors), backgroundColor: pressed ? colors.surface1 : colors.surface2,
+      })}>
+      <Icon name={icon} size={14} color={colors.foreground} />
+      {label ? <Text style={{ color: colors.foreground, fontSize: 13, lineHeight: 18 }}>{label}</Text> : null}
+    </PressScale>
+  );
+}
+
+// Returns to the dialog this one was opened from. For surface1 dialogs.
+export function BackButton({ colors, label, onPress }: { colors: Colors; label: string; onPress(): void }) {
+  return <DialogButton colors={colors} icon="ChevronLeft" label={label} onPress={onPress} outerStyle={{ alignSelf: "flex-start" }} />;
+}
+
+// Previous and next through a gallery, wrapping at the ends, with "2 of 3" between.
+function Stepper({ colors, gallery, current }: { colors: Colors; gallery: Gallery; current: Attachment }) {
+  const { items } = gallery;
+  const index = Math.max(0, items.findIndex((item) => item.ref === current.ref));
+  const go = (step: number) => gallery.onSelect(items[(index + step + items.length) % items.length]);
+  return (
+    <View style={{ flexDirection: "row", alignItems: "center", gap: 10 }}>
+      <DialogButton colors={colors} icon="ChevronLeft" accessibilityLabel="Previous file" onPress={() => go(-1)} />
+      <Text style={{ minWidth: 44, textAlign: "center", color: colors.foregroundMuted, fontSize: 13, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{index + 1} of {items.length}</Text>
+      <DialogButton colors={colors} icon="ChevronRight" accessibilityLabel="Next file" onPress={() => go(1)} />
+    </View>
+  );
+}