@stevecastaneda/paseo-progress 1.13.0 → 1.13.1

package/README.md

@@ -145,6 +145,13 @@ The progress file, `progress.jsonl`, holds one JSON event per line, each with a
 
 ## Changelog
 
+### 1.13.1
+
+- [Fixed] **Ticket tabs fit on a phone.** On a phone, a ticket's tabs used to wrap and leave Deliverables alone on a second line. They now stay in one row that you swipe sideways. When some tabs are out of sight, that edge of the row fades and shows an arrow you can tap. The tab you pick scrolls into view, and so does the one you had open when you come back to the ticket.
+- [Fixed] **Open chat stays on one line.** On a phone, the Open chat link beside a ticket's agent no longer wraps. The agent's name gets shorter instead.
+- [Fixed] **Larger question arrows in a phone's browser.** In the pill's popover, the arrows that step through questions and the Open Progress button now have the same finger-sized buttons in a phone's web browser as in the Paseo phone apps.
+- [Fixed] **Screen readers hear which tab is selected in the desktop and web apps.** They also hear whether the finished tickets and a write-up are shown or hidden. Before, only the phone apps passed this on.
+
 ### 1.13.0
 
 - [New] **PDF previews.** A PDF the agent records now opens in the preview in Paseo's desktop and web apps, with a loading percentage while it arrives. Any PDF you open in a Paseo tab now shows in that tab, up to 100 MB on desktop and 25 MB on a phone. A PDF deliverable also has a button beside Copy that opens it in a tab, which is how you see it on an iPhone or iPad.

package/client/dialog-stack.tsx

@@ -25,7 +25,7 @@ export type Step =
 
 // Paseo gives each dialog its own backdrop, so opening a second one darkens
 // the screen while the first fades out; steps swap content inside this one instead.
-export function StackedDialog({ colors, root, onClose, questions = [], dashboard, now, live = true, context }: {
+export function StackedDialog({ colors, root, onClose, questions = [], dashboard, now, live = true, compact = false, context }: {
   colors: Colors;
   root: Step | null;
   onClose(): void;
@@ -34,6 +34,8 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
   dashboard?: Dashboard;
   now: number;
   live?: boolean;
+  // Paseo's phone-sized layout; the ticket's tabs scroll sideways there.
+  compact?: boolean;
   context: AttachmentContext;
 }) {
   // Paseo's Modal keeps drawing its content while it fades out, so closing keeps the steps.
@@ -103,7 +105,7 @@ export function StackedDialog({ colors, root, onClose, questions = [], dashboard
       ) : (
         <>
           {ticket && dashboard ? (
-            <TicketStoryView colors={colors} dashboard={dashboard} ticket={ticket} now={now} live={live} context={context} onOpenAgent={openAgent}
+            <TicketStoryView colors={colors} dashboard={dashboard} ticket={ticket} now={now} live={live} compact={compact} context={context} onOpenAgent={openAgent}
               onOpenAttachment={openAttachment} onOpenQuestion={(id) => push({ kind: "question", id })} />
           ) : null}
           {question ? (

package/client/panel.tsx

@@ -253,7 +253,7 @@ function DashboardView({ colors, dashboard, agentRunning, compact, workspaceId,
             ) : (
               <TicketList colors={colors} dashboard={dashboard} live={live} now={now} workspaceId={workspaceId} onOpen={setOpenTicket} />
             )}
-            <TicketDialogs colors={colors} dashboard={dashboard} openId={openTicket} setOpenId={setOpenTicket} now={now} live={live} context={attachmentContext} />
+            <TicketDialogs colors={colors} dashboard={dashboard} openId={openTicket} setOpenId={setOpenTicket} now={now} live={live} compact={compact} context={attachmentContext} />
           </Card>
           </Presence>
         </View>
@@ -468,7 +468,7 @@ function FinishedRow({ colors, tickets, shown, onPress }: { colors: Colors; tick
   const chevron = shown ? "ChevronUp" : "ChevronDown";
   const narrow = useNarrow();
   return (
-    <PressableRow colors={colors} accessibilityRole="button" accessibilityState={{ expanded: shown }}
+    <PressableRow colors={colors} accessibilityRole="button" aria-expanded={shown}
       accessibilityLabel={m.toggleFinished(shown, label)} onPress={onPress}
       style={{ flexDirection: "row", alignItems: "flex-start", gap: 10, paddingHorizontal: 10, paddingVertical: 8, borderTopWidth: 1, borderTopColor: colors.border }}>
       <View style={{ width: 16, paddingTop: 2, alignItems: "center" }}>

package/client/pill-popover.tsx

@@ -32,8 +32,8 @@ export function AttentionPopover({ theme, host, layout, workspaceId, close, open
   const colors = theme.colors;
   // Paseo draws the desktop popover on surface1 and the phone sheet on surface0.
   const onSurface1 = !layout.compact;
-  // The phone apps are pressed with a finger.
-  const touch = layout.platform !== "web";
+  // Pressed with a finger: the phone apps, and any phone-sized screen, browsers included.
+  const touch = layout.compact || layout.platform !== "web";
   const directory = useWorkspace(workspaceId, (workspace) => workspace.directory);
   const query = useDashboard(host.id, workspaceId, directory);
   const dashboard = query.data?.configured ? query.data.dashboard : null;
@@ -210,7 +210,7 @@ function StepButton({ colors, touch, onSurface1, icon, label, target, onPress }:
   const button = onSurface1 ? { rest: colors.surface2, pressed: colors.surface1 } : { rest: colors.surface1, pressed: colors.surface2 };
   const size = stepSize(touch);
   return (
-    <PressScale accessibilityRole="button" accessibilityLabel={label} accessibilityState={{ disabled: !target }} disabled={!target}
+    <PressScale accessibilityRole="button" accessibilityLabel={label} disabled={!target}
       onPress={target ? () => onPress(target) : undefined} hitSlop={touch ? stepSlop : undefined}
       style={({ pressed }) => ({ width: size, height: size, alignItems: "center", justifyContent: "center", borderRadius: touch ? 8 : 4, opacity: target ? 1 : 0.35, ...raised(colors),
         backgroundColor: pressed ? button.pressed : button.rest })}>

package/client/tabs.tsx

@@ -1,7 +1,9 @@
 import type { PluginWorkspacePanelProps } from "@getpaseo/plugin/client";
 import { Icon } from "@getpaseo/plugin/client/ui";
-import React, { useState } from "react";
-import { Pressable, Text, View } from "react-native";
+import React, { useRef, useState } from "react";
+import { type LayoutChangeEvent, Pressable, ScrollView, Text, View } from "react-native";
+import { useReducedMotion } from "./motion";
+import { withAlpha } from "./surfaces";
 
 type Colors = PluginWorkspacePanelProps["theme"]["colors"];
 
@@ -13,39 +15,131 @@ export interface TabEntry<Id extends string> {
   count?: number;
 }
 
+// What the row does when its tabs don't fit on one line: wrap onto a second line,
+// drop the icons first and wrap only if that's still not enough, or scroll
+// sideways in one row, as on phones, where a faded edge and an arrow show there's more.
+export type TabOverflow = "wrap" | "fit" | "scroll";
+
 // A row of tabs over a bottom rule, as in the panel's history card and the
 // ticket dialog. Narrow tightens the spacing so three tabs fit the 320px sidebar.
-// `fit` drops the icons when the tabs would otherwise wrap onto a second line.
-export function TabStrip<Id extends string>({ colors, tabs, selected, onSelect, narrow = false, fit = false, style }: {
+export function TabStrip<Id extends string>({ colors, tabs, selected, onSelect, narrow = false, overflow = "wrap", style }: {
   colors: Colors;
   tabs: Array<TabEntry<Id>>;
   selected: Id;
   onSelect(id: Id): void;
   narrow?: boolean;
-  fit?: boolean;
+  overflow?: TabOverflow;
   style?: object;
 }) {
   // Set once the tabs wrapped with icons, for this set of tabs.
   const ids = tabs.map((entry) => entry.id).join();
   const [wrappedFor, setWrappedFor] = useState<string | null>(null);
-  const iconless = fit && wrappedFor === ids;
+  const scroller = useRef<ScrollView>(null);
+  const widths = useRef(new Map<string, number>());
+  // The tab the row last scrolled to; null until the first scroll, which jumps.
+  const revealed = useRef<string | null>(null);
+  const size = useRef({ viewport: 0, content: 0, offset: 0 });
+  const [hidden, setHidden] = useState({ before: false, after: false });
+  const reduced = useReducedMotion();
+  const scroll = overflow === "scroll";
+  // Scrolling rows go without icons, so less of the row is hidden.
+  const iconless = scroll || (overflow === "fit" && wrappedFor === ids);
+  const gap = narrow ? 10 : 16;
+  const rule = { borderBottomWidth: 1, borderBottomColor: colors.border };
+  // The next scrolling row is a new scroll view, which starts at the left.
+  if (!scroll) {
+    size.current.offset = 0;
+    revealed.current = null;
+    if (hidden.before || hidden.after) setHidden({ before: false, after: false });
+  }
+  // Centers a tab in the visible part of the row, so the ones beside it show too.
+  // Positions come from widths, since a tab that moves without resizing never reports it.
+  const reveal = (id: string) => {
+    const upTo = tabs.slice(0, tabs.findIndex((entry) => entry.id === id) + 1).map((entry) => widths.current.get(entry.id));
+    const { viewport } = size.current;
+    if (!upTo.length || !viewport || upTo.includes(undefined)) return;
+    const width = upTo.pop()!;
+    const x = upTo.reduce((sum: number, w) => sum + w! + gap, 0);
+    scroller.current?.scrollTo({ x: Math.max(0, x + width / 2 - viewport / 2), animated: !reduced && revealed.current !== null });
+    revealed.current = id;
+  };
+  // Scrolls to the chosen tab once it can be measured, and not again until the choice changes.
+  const settle = () => { if (revealed.current !== selected) reveal(selected); };
+  // A chevron press moves the row most of its width that way.
+  const page = (direction: 1 | -1) => {
+    const { viewport, content, offset } = size.current;
+    const x = Math.max(0, Math.min(offset + direction * (viewport - 48), content - viewport));
+    scroller.current?.scrollTo({ x, animated: !reduced });
+  };
+  // Which ends have tabs scrolled out of sight, so those edges fade.
+  const measure = (next: Partial<typeof size.current>) => {
+    const s = Object.assign(size.current, next);
+    const before = s.offset > 1;
+    const after = s.offset + s.viewport < s.content - 1;
+    if (before !== hidden.before || after !== hidden.after) setHidden({ before, after });
+  };
+  const items = tabs.map((entry) => (
+    <Tab key={entry.id} colors={colors} narrow={narrow} entry={iconless ? { ...entry, icon: null } : entry} selected={entry.id === selected}
+      onPress={() => { onSelect(entry.id); if (scroll) reveal(entry.id); }}
+      onLayout={scroll ? (event) => { widths.current.set(entry.id, event.nativeEvent.layout.width); settle(); } : undefined} />
+  ));
+  if (scroll) {
+    // Scrolling rows sit on Paseo's phone sheet, which is surface0.
+    return (
+      <View style={[{ position: "relative" }, style]}>
+        <ScrollView ref={scroller} horizontal showsHorizontalScrollIndicator={false} accessibilityRole="tablist" scrollEventThrottle={16}
+          onLayout={(event) => { measure({ viewport: event.nativeEvent.layout.width }); settle(); }}
+          onContentSizeChange={(width) => measure({ content: width })}
+          onScroll={(event) => measure({ offset: event.nativeEvent.contentOffset.x })}
+          contentContainerStyle={{ flexGrow: 1, flexDirection: "row", columnGap: gap, ...rule }}>
+          {items}
+        </ScrollView>
+        {hidden.before ? <EdgeFade colors={colors} side="left" onPress={() => page(-1)} /> : null}
+        {hidden.after ? <EdgeFade colors={colors} side="right" onPress={() => page(1)} /> : null}
+      </View>
+    );
+  }
   return (
     <View accessibilityRole="tablist"
       // One row is 32px (8 + 18 + 6); anything taller wrapped.
-      onLayout={fit ? (event) => { if (!iconless && event.nativeEvent.layout.height > 40) setWrappedFor(ids); } : undefined}
-      style={[{ flexDirection: "row", flexWrap: "wrap", columnGap: narrow ? 10 : 16, borderBottomWidth: 1, borderBottomColor: colors.border }, style]}>
-      {tabs.map((entry) => (
-        <Tab key={entry.id} colors={colors} narrow={narrow} entry={iconless ? { ...entry, icon: null } : entry} selected={entry.id === selected} onPress={() => onSelect(entry.id)} />
+      onLayout={overflow === "fit" ? (event) => { if (!iconless && event.nativeEvent.layout.height > 40) setWrappedFor(ids); } : undefined}
+      style={[{ flexDirection: "row", flexWrap: "wrap", columnGap: gap, ...rule }, style]}>
+      {items}
+    </View>
+  );
+}
+
+const FADE_SLICES = 12;
+
+// Fades a row that scrolls on past this edge, with a chevron at the edge, so the
+// cue shows even when the next tab sits wholly out of sight. The slices stand in
+// for a gradient, which React Native Web lacks (see pill-popover.tsx).
+function EdgeFade({ colors, side, onPress }: { colors: Colors; side: "left" | "right"; onPress(): void }) {
+  return (
+    <View pointerEvents="box-none" style={{ position: "absolute", top: 0, bottom: 0, [side]: 0, flexDirection: side === "right" ? "row" : "row-reverse" }}>
+      {Array.from({ length: FADE_SLICES }, (_, i) => (
+        <View key={i} pointerEvents="none" style={{ width: 2, backgroundColor: withAlpha(colors.surface0, (i + 1) / (FADE_SLICES + 1)) ?? undefined }} />
       ))}
+      <Pressable accessibilityElementsHidden importantForAccessibility="no-hide-descendants" onPress={onPress} hitSlop={8}
+        style={{ width: 16, justifyContent: "center", alignItems: side === "right" ? "flex-end" : "flex-start", backgroundColor: colors.surface0 }}>
+        <Icon name={side === "right" ? "ChevronRight" : "ChevronLeft"} size={14} color={colors.foregroundMuted} />
+      </Pressable>
     </View>
   );
 }
 
 // Instant feedback: tabs switch often, so hover and press change color only.
-function Tab<Id extends string>({ colors, narrow, entry, selected, onPress }: { colors: Colors; narrow: boolean; entry: TabEntry<Id>; selected: boolean; onPress(): void }) {
+function Tab<Id extends string>({ colors, narrow, entry, selected, onPress, onLayout }: {
+  colors: Colors;
+  narrow: boolean;
+  entry: TabEntry<Id>;
+  selected: boolean;
+  onPress(): void;
+  onLayout?(event: LayoutChangeEvent): void;
+}) {
   const [hovered, setHovered] = useState(false);
   return (
-    <Pressable accessibilityRole="tab" accessibilityState={{ selected }} onPress={onPress}
+    <Pressable accessibilityRole="tab" aria-selected={selected} onPress={onPress} onLayout={onLayout}
       onHoverIn={() => setHovered(true)} onHoverOut={() => setHovered(false)}
       style={({ pressed }) => ({
         flexDirection: "row", alignItems: "center", gap: narrow ? 4 : 6, paddingTop: 8, paddingBottom: 6, marginBottom: -1,

package/client/ticket-dialog.tsx

@@ -22,27 +22,30 @@ type AttachmentContext = { workspaceId: string; workspaceDirectory: string; navi
 
 // A ticket's story, opened from its row: where its time went, and what came out
 // of it. Its questions and previews open in the same dialog (see StackedDialog).
-export function TicketDialogs({ colors, dashboard, openId, setOpenId, now, live, context }: {
+export function TicketDialogs({ colors, dashboard, openId, setOpenId, now, live, compact, context }: {
   colors: Colors;
   dashboard: Dashboard;
   openId: string | null;
   setOpenId(id: string | null): void;
   now: number;
   live: boolean;
+  compact: boolean;
   context: AttachmentContext;
 }) {
   return (
     <StackedDialog colors={colors} root={openId ? { kind: "ticket", id: openId } : null} onClose={() => setOpenId(null)}
-      questions={[...dashboard.questions.open, ...dashboard.questions.answered]} dashboard={dashboard} now={now} live={live} context={context} />
+      questions={[...dashboard.questions.open, ...dashboard.questions.answered]} dashboard={dashboard} now={now} live={live} compact={compact} context={context} />
   );
 }
 
-export function TicketStoryView({ colors, dashboard, ticket, now, live, context, onOpenAttachment, onOpenQuestion, onOpenAgent }: {
+export function TicketStoryView({ colors, dashboard, ticket, now, live, compact, context, onOpenAttachment, onOpenQuestion, onOpenAgent }: {
   colors: Colors;
   dashboard: Dashboard;
   ticket: Ticket;
   now: number;
   live: boolean;
+  // Paseo's phone-sized layout.
+  compact: boolean;
   context: AttachmentContext;
   onOpenAttachment(attachment: Attachment, group: Attachment[]): void;
   onOpenQuestion(id: string): void;
@@ -138,7 +141,7 @@ export function TicketStoryView({ colors, dashboard, ticket, now, live, context,
       </View>
 
       <View style={{ gap: 12 }}>
-        {tabs.length > 1 ? <TabStrip colors={colors} tabs={tabs} selected={current.id} onSelect={choose} fit /> : null}
+        {tabs.length > 1 ? <TabStrip colors={colors} tabs={tabs} selected={current.id} onSelect={choose} overflow={compact ? "scroll" : "fit"} /> : null}
         {current.content}
       </View>
 
@@ -187,7 +190,7 @@ function AgentRow({ colors, agentId, onOpen }: { colors: Colors; agentId: string
       <Text numberOfLines={1} style={{ flexShrink: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{title}</Text>
       {alert ? <Text numberOfLines={1} style={{ flexShrink: 0, color: alert.danger ? colors.statusDanger : colors.statusWarning, fontSize: 12, lineHeight: 17 }}>{alert.text}</Text> : null}
       <View style={{ flex: 1 }} />
-      {open ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>{m.openChat}</Text> : null}
+      {open ? <Text numberOfLines={1} style={{ flexShrink: 0, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>{m.openChat}</Text> : null}
     </PressableRow>
   );
 }

package/client/write-up.tsx

@@ -71,7 +71,7 @@ function TextButton({ colors, icon, label, accessibilityLabel, onPress, grow = f
   colors: Colors; icon?: string; label: string; accessibilityLabel?: string; onPress(): void; grow?: boolean; expanded?: boolean;
 }) {
   return (
-    <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} accessibilityState={expanded === undefined ? undefined : { expanded }} onPress={onPress}
+    <PressableRow colors={colors} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} aria-expanded={expanded} onPress={onPress}
       style={{ flexDirection: "row", alignItems: "center", gap: 6, paddingVertical: 3, paddingHorizontal: 6, marginHorizontal: -6, borderRadius: 4, flexShrink: grow ? 1 : 0, minWidth: 0 }}>
       {icon ? <Icon name={icon} size={12} color={colors.foregroundMuted} /> : null}
       <Text numberOfLines={1} style={{ flexShrink: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 17, fontWeight: "500" }}>{label}</Text>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stevecastaneda/paseo-progress",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "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",