@stevecastaneda/paseo-progress 1.0.0 → 1.2.0

package/client/preview.tsx

@@ -1,41 +1,18 @@
 import { type PluginWorkspacePanelProps, useRpc } from "@getpaseo/plugin/client";
-import { Icon, Modal, ScrollView } from "@getpaseo/plugin/client/react-native";
+import { Icon, ScrollView } from "@getpaseo/plugin/client/react-native";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useRef } 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 { ATTACHMENT_ROW, type Attachment, AttachmentList, isPreviewable } from "./attachments";
+import { errorText } from "./errors";
+import { folderAttachments, isFolder, previewKind } from "../shared/attachments";
+import { canOpenOnHost, previewDeliverable, readDeliverablePiece } from "../shared/rpc";
+import { PressScale } from "./motion";
 import { imageOutline, raised } from "./surfaces";
+import { loadVideo, VideoPlayer } from "./video";
 
 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 {
@@ -43,9 +20,8 @@ export interface Gallery {
   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);
+export function galleryFiles(group: Attachment[]): Attachment[] {
+  return group.filter((attachment) => isPreviewable(attachment) && !isFolder(attachment));
 }
 
 type PreviewProps = {
@@ -54,48 +30,58 @@ type PreviewProps = {
   workspaceId: string;
   workspaceDirectory: string;
   onOpenOnHost(): void;
-  backLabel?: string;
   onBack?(): void;
   gallery?: Gallery;
+  onOpenEntry(attachment: Attachment, group: Attachment[]): void;
 };
 
-// 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 }) {
+export function PreviewContent({ colors, attachment, workspaceId, workspaceDirectory, onOpenOnHost, onBack, gallery, onOpenEntry, onLong }: PreviewProps & { onLong(long: boolean): void }) {
   const fetchPreview = useRpc(previewDeliverable);
+  const readPiece = useRpc(readDeliverablePiece);
+  const checkHost = useRpc(canOpenOnHost);
+  const queryClient = useQueryClient();
+  const canOpen = useQuery({
+    queryKey: ["progress", "can-open", workspaceId],
+    queryFn: () => checkHost({ workspaceId, workspaceDirectory }),
+    staleTime: Infinity,
+  }).data?.canOpen === true;
+  // How much of a video has arrived, for the line under the spinner.
+  const loadingKey = (target: Attachment) => ["progress", "preview-loading", workspaceId, target.ref, target.path];
   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.
+    // An image or video's shape is measured here and cached with it, not held in
+    // this component: Paseo remounts it when `onLong` flips the host's scrolling,
+    // and a remount that forgot the shape fell back to 16:10, flipped `long` back,
+    // and so on, so a tall image made the dialog jump between two sizes until closed.
+    queryFn: async () => {
+      const data = await fetchPreview({ workspaceId, workspaceDirectory, ref: target.ref });
+      if (data.kind === "image") return { ...data, ratio: await imageRatio(data.dataUri) };
+      if (data.kind !== "video") return data;
+      queryClient.setQueryData(loadingKey(target), 0);
+      const video = await loadVideo({
+        bytes: data.bytes,
+        mimeType: data.mimeType,
+        readPiece: (offset) => readPiece({ workspaceId, workspaceDirectory, ref: target.ref, offset }),
+        onProgress: (loaded) => queryClient.setQueryData(loadingKey(target), loaded / data.bytes),
+      });
+      return { ...data, video, ratio: video.ratio };
+    },
+    // A video isn't refetched while it's open: that would load it again and stop it playing.
+    staleTime: previewKind(target.path ?? "") === "video" ? Infinity : 30_000,
+    // Images arrive as data URIs up to ~13 MB and videos run to 200 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]);
+  const loading = useQuery({ queryKey: loadingKey(attachment), queryFn: () => 0, enabled: false }).data;
   // 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();
+  // instant without holding both neighbors in memory. Not a video: it can be
+  // 200 MB, so it loads only when opened.
   const items = gallery?.items ?? [];
   const index = items.findIndex((item) => item.ref === attachment.ref);
   const lastIndex = useRef(index);
@@ -103,23 +89,47 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
     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]));
+    const next = items[(index + step + items.length) % items.length];
+    if (previewKind(next.path ?? "") !== "video") void queryClient.prefetchQuery(previewQuery(next));
   }, [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;
+  // Previous and Next, wrapping at the ends. Left and right arrows do the same.
+  const step = (offset: number) => gallery?.onSelect(items[(index + offset + items.length) % items.length]);
+  const inGallery = index >= 0;
+  const canStep = inGallery && items.length > 1;
+  useArrowKeys(canStep ? step : null);
+  // Next has focus when the preview opens, so Enter or Space moves on too.
+  const nextButton = useRef<View>(null);
+  useEffect(() => {
+    (nextButton.current as { focus?(): void } | null)?.focus?.();
+  }, []);
+  // Screenshots and recordings vary from phone-tall to full-width; size to the real
+  // file. While stepping, the dimmed one on screen keeps its shape until the next arrives.
+  const aspectRatio = preview.data && "ratio" in preview.data && preview.data.ratio ? preview.data.ratio : 16 / 10;
+  // A video fits the dialog whole, so the controls along its bottom stay in view
+  // without scrolling. A tall image scrolls instead, to keep it readable.
+  const { height: windowHeight } = useWindowDimensions();
+  const room = roomForContent(windowHeight);
+  const maxMediaHeight = preview.data?.kind === "video" ? Math.min(640, Math.max(200, room)) : 640;
+  const mediaStyle = { width: "100%", aspectRatio, maxHeight: maxMediaHeight, borderRadius: 6, ...imageOutline(colors), backgroundColor: colors.surface1, opacity: stepping ? 0.6 : 1 } as const;
   // 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);
+  const long = estimatedHeight(preview.data, aspectRatio, maxMediaHeight) > room;
   useEffect(() => onLong(long), [long]);
+  // How far a video has loaded: under the spinner, or in place of the path while
+  // the last file stays on screen, so nothing moves.
+  const videoLoading = preview.isFetching && loading !== undefined && loading < 1 ? `Loading video, ${Math.floor(loading * 100)}%` : null;
+  const caption = { color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 } as const;
   const content = (
     <>
-      {preview.isPending ? <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel="Loading preview" style={{ padding: 24 }} /> : null}
+      {preview.isPending ? (
+        <View style={{ alignItems: "center", gap: 8, padding: 24 }}>
+          <ActivityIndicator color={colors.foregroundMuted} accessibilityLabel="Loading preview" />
+          {videoLoading ? <Text style={[caption, { fontVariant: ["tabular-nums"] }]}>{videoLoading}</Text> : null}
+        </View>
+      ) : null}
       {preview.error ? (
         <Text accessibilityRole="alert" selectable style={{ color: colors.statusDanger, fontSize: 12, lineHeight: 18 }}>
-          Could not preview it: {preview.error.message}
+          Could not preview it: {errorText(preview.error, "something went wrong")}
         </Text>
       ) : null}
       {preview.data?.kind === "text" ? (
@@ -129,34 +139,38 @@ export function PreviewContent({ colors, attachment, workspaceId, workspaceDirec
           </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.
+              Showing the first 256 KB.{canOpen ? " Press Open to see the rest in its default app." : ""}
             </Text>
           ) : null}
         </View>
       ) : null}
+      {preview.data?.kind === "folder" ? (
+        <FolderList colors={colors} folder={attachment} entries={folderAttachments(attachment, preview.data.entries)} truncated={preview.data.truncated}
+          dimmed={stepping} onOpen={onOpenEntry} />
+      ) : 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 }} />
+        <Image accessibilityLabel={attachment.title} source={{ uri: preview.data.dataUri }} resizeMode="contain" style={mediaStyle} />
       ) : null}
+      {preview.data?.kind === "video" ? <VideoPlayer video={preview.data.video} label={attachment.title} style={mediaStyle} /> : 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>
+      {!preview.isPending && videoLoading ? (
+        <Text style={[caption, { marginTop: -4, fontVariant: ["tabular-nums"] }]}>{videoLoading}</Text>
+      ) : (
+        <Text selectable numberOfLines={1} ellipsizeMode="middle" style={[caption, { marginTop: -4 }]}>
+          {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}
+        {onBack ? <BackButton colors={colors} onPress={onBack} /> : null}
       </View>
-      {gallery && gallery.items.length > 1 ? <Stepper colors={colors} gallery={gallery} current={attachment} /> : null}
+      {canStep ? <Stepper colors={colors} index={index} count={items.length} onStep={step} nextRef={nextButton} /> : null}
       <View style={{ flex: 1, alignItems: "flex-end" }}>
-        <DialogButton colors={colors} icon="ExternalLink" label="Open" accessibilityLabel="Open in its default app" onPress={onOpenOnHost} />
+        {canOpen ? <DialogButton colors={colors} icon="ExternalLink" label="Open" accessibilityLabel="Open in its default app" onPress={onOpenOnHost} /> : null}
       </View>
     </View>
   );
@@ -178,14 +192,36 @@ 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);
 
+const FOLDER_ROW_HEIGHT = ATTACHMENT_ROW.lineHeight + ATTACHMENT_ROW.paddingVertical * 2 + ATTACHMENT_ROW.gap;
+
 // Roughly how tall the preview draws, including wrapped lines.
-function estimatedHeight(data: { kind: "image" } | { kind: "text"; text: string } | undefined, aspectRatio: number): number {
+function estimatedHeight(data: { kind: "image" | "video" } | { kind: "text"; text: string } | { kind: "folder"; entries: unknown[]; truncated: boolean } | undefined, aspectRatio: number, maxMediaHeight: number): number {
   if (!data) return 0;
-  if (data.kind === "image") return Math.min(CONTENT_WIDTH / aspectRatio, 640);
+  if (data.kind === "folder") return Math.max(1, data.entries.length + (data.truncated ? 1 : 0)) * FOLDER_ROW_HEIGHT;
+  if (data.kind !== "text") return Math.min(CONTENT_WIDTH / aspectRatio, maxMediaHeight);
   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;
 }
 
+function FolderList({ colors, folder, entries, truncated, dimmed, onOpen }: { colors: Colors; folder: Attachment; entries: Attachment[]; truncated: boolean; dimmed: boolean; onOpen(attachment: Attachment, group: Attachment[]): void }) {
+  const caption = { color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 } as const;
+  if (!entries.length) return <Text style={caption}>Nothing in {folder.title} yet.</Text>;
+  return (
+    <View style={{ gap: 8, opacity: dimmed ? 0.6 : 1 }}>
+      <AttachmentList colors={colors} attachments={entries} onOpen={onOpen} />
+      {truncated ? <Text style={caption}>Showing the first {entries.length}.</Text> : null}
+    </View>
+  );
+}
+
+// An image's width over its height, or null if it can't be read. Read from the data
+// because onLoad doesn't report a size for data URIs on every platform.
+function imageRatio(uri: string): Promise<number | null> {
+  return new Promise((resolve) => {
+    Image.getSize(uri, (width, height) => resolve(width && height ? width / height : null), () => resolve(null));
+  });
+}
+
 // 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).
@@ -194,9 +230,9 @@ function roomForContent(windowHeight: number): number {
 }
 
 // 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 }) {
+export function DialogButton({ colors, icon, label, accessibilityLabel, onPress, outerStyle, ref }: { colors: Colors; icon: string; label?: string; accessibilityLabel?: string; onPress(): void; outerStyle?: ViewStyle; ref?: React.Ref<View> }) {
   return (
-    <PressScale accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} onPress={onPress} outerStyle={outerStyle}
+    <PressScale ref={ref} 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,
@@ -209,20 +245,52 @@ export function DialogButton({ colors, icon, label, accessibilityLabel, onPress,
 }
 
 // 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" }} />;
+export function BackButton({ colors, onPress }: { colors: Colors; onPress(): void }) {
+  return <DialogButton colors={colors} icon="ChevronLeft" label="Back" 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]);
+// Previous and next through a gallery, with "2 of 3" between.
+function Stepper({ colors, index, count, onStep, nextRef }: { colors: Colors; index: number; count: number; onStep(offset: number): void; nextRef: React.Ref<View> }) {
   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)} />
+      <DialogButton colors={colors} icon="ChevronLeft" accessibilityLabel="Previous file" onPress={() => onStep(-1)} />
+      <Text style={{ minWidth: 44, textAlign: "center", color: colors.foregroundMuted, fontSize: 13, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{index + 1} of {count}</Text>
+      <DialogButton ref={nextRef} colors={colors} icon="ChevronRight" accessibilityLabel="Next file" onPress={() => onStep(1)} />
     </View>
   );
 }
+
+// Calls `onStep` with -1 or 1 for the left and right arrow keys, in the desktop
+// app. Not while typing, nor on a focused video, whose controls seek with them.
+function useArrowKeys(onStep: ((offset: number) => void) | null) {
+  const latest = useRef(onStep);
+  latest.current = onStep;
+  const listening = Platform.OS === "web" && onStep !== null;
+  useEffect(() => {
+    if (!listening) return;
+    const window = globalThis as unknown as {
+      addEventListener(type: "keydown", listener: (event: KeyEvent) => void): void;
+      removeEventListener(type: "keydown", listener: (event: KeyEvent) => void): void;
+    };
+    const onKeyDown = (event: KeyEvent) => {
+      const offset = event.key === "ArrowLeft" ? -1 : event.key === "ArrowRight" ? 1 : 0;
+      if (!offset || event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+      if (/^(VIDEO|INPUT|TEXTAREA|SELECT)$/.test(event.target?.tagName ?? "") || event.target?.isContentEditable) return;
+      event.preventDefault();
+      latest.current?.(offset);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [listening]);
+}
+
+type KeyEvent = {
+  key: string;
+  altKey: boolean;
+  ctrlKey: boolean;
+  metaKey: boolean;
+  shiftKey: boolean;
+  defaultPrevented: boolean;
+  target: { tagName?: string; isContentEditable?: boolean } | null;
+  preventDefault(): void;
+};

package/client/video.tsx

@@ -0,0 +1,90 @@
+import React, { useEffect, useState } from "react";
+import { View, type ViewStyle } from "react-native";
+
+// Videos play only in Paseo's desktop app (see canPreview), which is a browser
+// underneath. The plugin compiles without the DOM's types, so these are just the
+// browser APIs used here.
+interface VideoElement {
+  preload: string;
+  src: string;
+  videoWidth: number;
+  videoHeight: number;
+  onloadedmetadata: (() => void) | null;
+  onerror: (() => void) | null;
+}
+const browser = globalThis as unknown as {
+  atob(data: string): string;
+  Blob: new (parts: Uint8Array[], options: { type: string }) => VideoBlob;
+  URL: { createObjectURL(blob: VideoBlob): string; revokeObjectURL(url: string): void };
+  document: { createElement(tag: "video"): VideoElement };
+};
+
+// A whole video held in the app, ready to play.
+export type VideoBlob = { readonly size: number };
+
+export interface LoadedVideo {
+  blob: VideoBlob;
+  // Width over height, or null when the app can't read it (the box stays 16:10).
+  ratio: number | null;
+}
+
+// Fetches a video piece by piece into one blob, then reads its shape.
+export async function loadVideo({ bytes, mimeType, readPiece, onProgress }: {
+  bytes: number;
+  mimeType: string;
+  readPiece(offset: number): Promise<{ data: string; bytes: number }>;
+  onProgress(loaded: number): void;
+}): Promise<LoadedVideo> {
+  const pieces: Uint8Array[] = [];
+  let loaded = 0;
+  while (loaded < bytes) {
+    const piece = await readPiece(loaded);
+    const decoded = decode(piece.data);
+    if (piece.bytes !== bytes || !decoded.length) throw new Error("the video changed while it was loading. Try again.");
+    pieces.push(decoded);
+    loaded += decoded.length;
+    onProgress(loaded);
+  }
+  const blob = new browser.Blob(pieces, { type: mimeType });
+  return { blob, ratio: await videoRatio(blob) };
+}
+
+function decode(data: string): Uint8Array {
+  const binary = browser.atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index++) bytes[index] = binary.charCodeAt(index);
+  return bytes;
+}
+
+// Reads the size from the video's header without playing it. Gives up after a
+// few seconds, so a video the app can't decode still shows its player and error.
+function videoRatio(blob: VideoBlob): Promise<number | null> {
+  const url = browser.URL.createObjectURL(blob);
+  const video = browser.document.createElement("video");
+  return new Promise<number | null>((resolve) => {
+    setTimeout(() => resolve(null), 5_000);
+    video.onloadedmetadata = () => resolve(video.videoWidth && video.videoHeight ? video.videoWidth / video.videoHeight : null);
+    video.onerror = () => resolve(null);
+    video.preload = "metadata";
+    video.src = url;
+  }).finally(() => {
+    video.onloadedmetadata = video.onerror = null;
+    video.src = "";
+    browser.URL.revokeObjectURL(url);
+  });
+}
+
+// The browser's own player, with its controls, in a box styled like an image's.
+export function VideoPlayer({ video, label, style }: { video: LoadedVideo; label: string; style: ViewStyle }) {
+  const [url, setUrl] = useState<string | null>(null);
+  useEffect(() => {
+    const created = browser.URL.createObjectURL(video.blob);
+    setUrl(created);
+    return () => browser.URL.revokeObjectURL(created);
+  }, [video.blob]);
+  return (
+    <View style={[style, { overflow: "hidden" }]}>
+      {url ? <video src={url} controls playsInline aria-label={label} style={{ width: "100%", height: "100%", display: "block", objectFit: "contain" }} /> : null}
+    </View>
+  );
+}

package/client/write-up.tsx

@@ -8,6 +8,7 @@ import { previewDeliverable } from "../shared/rpc";
 import { type Block, parseWriteUp, type Span, withoutTitle, writeUpExcerpt } from "../shared/write-up";
 import { type Attachment, attachmentIcon } from "./attachments";
 import { PressableRow } from "./row";
+import { errorText } from "./errors";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 const MONO = Platform.OS === "ios" ? "Menlo" : "monospace";
@@ -37,7 +38,7 @@ export function WriteUp({ colors, source, workspaceId, workspaceDirectory, onOpe
   return (
     <View style={{ gap: 12, padding: 14, borderRadius: 8, backgroundColor: colors.surface0 }}>
       {shown.length ? <View style={{ gap: 8 }}>{shown.map((block, index) => <BlockView key={index} colors={colors} block={block} first={index === 0} />)}</View> : null}
-      {preview.error ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>Couldn't read it here: {preview.error.message}</Text> : null}
+      {preview.error ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>Couldn't read it here: {errorText(preview.error, "something went wrong")}</Text> : null}
       {/* The file on the left, opening it whole; expanding in place on the right. */}
       <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}>
         <TextButton colors={colors} icon={attachmentIcon(source)} label={source.title} accessibilityLabel={`Open ${source.title}`} onPress={() => onOpen(source, [source])} grow />

package/dist/server/cli.js

@@ -20928,7 +20928,7 @@ var commands = {
 function rootRelative(target, cwd, root) {
   const absolute = resolve3(cwd, target);
   const inside = relative(root, absolute);
-  const suffix = /[\/]$/.test(target) ? "/" : "";
+  const suffix = /[\/]$/.test(target) || statSync(absolute, { throwIfNoEntry: false })?.isDirectory() ? "/" : "";
   if (!inside) return "./";
   return outside(inside) ? absolute + suffix : inside + suffix;
 }

package/index.server.ts

@@ -1,9 +1,9 @@
 import type { PluginServerContext } from "@getpaseo/plugin/server";
 import { handleGetAttention, handleGetDashboard, handleListFolders, handleMarkPanelOpened, handleSetHistoryFolder } from "./server/dashboard";
 import { handleInstallLauncher, handleLauncherStatus } from "./server/launcher";
-import { handleOpenDeliverable, handlePreviewDeliverable } from "./server/open";
+import { handleCanOpenOnHost, handleOpenDeliverable, handlePreviewDeliverable, handleReadDeliverablePiece } from "./server/open";
 import { handleInstallSkill, handleSkillStatus } from "./server/skill";
-import { getAttention, getDashboard, getLauncherStatus, getSkillStatus, installLauncher, installSkill, listFolders, markPanelOpened, openDeliverable, previewDeliverable, setHistoryFolder } from "./shared/rpc";
+import { canOpenOnHost, getAttention, getDashboard, getLauncherStatus, getSkillStatus, installLauncher, installSkill, listFolders, markPanelOpened, openDeliverable, previewDeliverable, readDeliverablePiece, setHistoryFolder } from "./shared/rpc";
 
 export default function contribute(server: PluginServerContext) {
   server.handle(getDashboard, handleGetDashboard);
@@ -12,7 +12,9 @@ export default function contribute(server: PluginServerContext) {
   server.handle(getLauncherStatus, handleLauncherStatus);
   server.handle(installLauncher, handleInstallLauncher);
   server.handle(openDeliverable, handleOpenDeliverable);
+  server.handle(canOpenOnHost, handleCanOpenOnHost);
   server.handle(previewDeliverable, handlePreviewDeliverable);
+  server.handle(readDeliverablePiece, handleReadDeliverablePiece);
   server.handle(getSkillStatus, handleSkillStatus);
   server.handle(installSkill, handleInstallSkill);
   server.handle(listFolders, handleListFolders);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stevecastaneda/paseo-progress",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "A live progress dashboard per worktree for Paseo, drawn from a file agents write with the paseo-progress command.",
   "license": "MIT",
   "author": "Steve Castaneda",

package/server/cli.ts

@@ -447,7 +447,7 @@ const commands: Record<string, Command> = {
 function rootRelative(target: string, cwd: string, root: string): string {
   const absolute = resolve(cwd, target);
   const inside = relative(root, absolute);
-  const suffix = /[\/]$/.test(target) ? "/" : "";
+  const suffix = /[\/]$/.test(target) || statSync(absolute, { throwIfNoEntry: false })?.isDirectory() ? "/" : "";
   if (!inside) return "./";
   return outside(inside) ? absolute + suffix : inside + suffix;
 }