@stevecastaneda/paseo-progress 0.1.0 → 0.1.2

package/client/panel.tsx

@@ -3,7 +3,7 @@ import { Icon } from "@getpaseo/plugin/client/react-native";
 import { DeliverablesList } from "./deliverables";
 import { LauncherBanner, SkillBanner } from "./launcher";
 import { AnsweredQuestionsList, QuestionsSection } from "./questions";
-import { Spinner, StalledPulse } from "./spinner";
+import { Spinner, StalledPulse, WaitingDot } from "./spinner";
 import { IconSwap, Presence, StaggerRoot, nativeDriver } from "./motion";
 import { SectionTitle } from "./section-title";
 import { raised } from "./surfaces";
@@ -15,7 +15,7 @@ import { PROGRESS_FILE, type TicketStatus } from "../shared/events";
 import { formatMinutes, formatWorkDone, minutesSince } from "../shared/format";
 import { markPanelOpened } from "../shared/rpc";
 import { useDashboard } from "./dashboard-query";
-import { StatusBadge } from "./status-badge";
+import { STATUS_LABEL } from "./status-badge";
 import { TicketDialogs } from "./ticket-dialog";
 import { PressableRow } from "./row";
 import { ShowMoreRow, usePaged } from "./show-more";
@@ -423,21 +423,14 @@ function TicketRow({ colors, ticket, live, now, onOpen, deliverables }: { colors
     <PressableRow colors={colors} onSurface1={working} transparentAtRest={!working}
       accessibilityRole="button" accessibilityLabel={`${ticket.id} details`} onPress={onOpen}
       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" }}>
+      {/* The icon is the only status mark on the row; the ticket dialog spells it out in a badge. */}
+      <View accessible accessibilityLabel={ticket.waitingFor ? "Waiting" : STATUS_LABEL[ticket.status]} style={{ width: 16, paddingTop: 2, alignItems: "center" }}>
         <IconSwap swapKey={ticket.waitingFor ? "waiting" : ticket.status === "working" ? `working-${live}` : ticket.status} size={14}><StatusIcon colors={colors} status={ticket.status} live={live} waiting={Boolean(ticket.waitingFor)} /></IconSwap>
       </View>
       <View style={{ flex: 1, minWidth: 0, gap: 2 }}>
-        {/* A paperclip before the title when the ticket has deliverables; they're listed in its dialog. */}
-        <View style={{ flexDirection: "row", gap: 6 }}>
-          {deliverables ? (
-            <View accessibilityLabel={deliverables === 1 ? "Has a deliverable" : `Has ${deliverables} deliverables`} style={{ height: 18, justifyContent: "center" }}>
-              <Icon name="Paperclip" size={12} color={colors.foregroundMuted} />
-            </View>
-          ) : null}
-          <Text style={{ flex: 1, color: muted ? colors.foregroundMuted : colors.foreground, fontSize: 13, lineHeight: 18, textDecorationLine: muted ? "line-through" : "none" }}>
-            {ticket.title}
-          </Text>
-        </View>
+        <Text style={{ color: muted ? colors.foregroundMuted : colors.foreground, fontSize: 13, lineHeight: 18, textDecorationLine: muted ? "line-through" : "none" }}>
+          {ticket.title}
+        </Text>
         {ticket.status === "working" && ticket.stage && ticket.stageSince ? (
           <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>
             {ticket.stage} stage started <When colors={colors} iso={ticket.stageSince} now={now} />
@@ -453,17 +446,18 @@ function TicketRow({ colors, ticket, live, now, onOpen, deliverables }: { colors
         ) : null}
         {ticket.note ? <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 17 }}>{ticket.note}</Text> : null}
       </View>
-      <Text style={{ color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>{ticket.estimateMin} min</Text>
-      {/* The check mark already says done. */}
-      {/* Optical: the 20px badge centers on the 18px line. */}
-      {ticket.status === "done" ? null : <View style={{ marginTop: -1 }}><StatusBadge colors={colors} status={ticket.status} waiting={Boolean(ticket.waitingFor)} /></View>}
+      {/* Fixed slots so the Package icon and estimates line up down the list, whether or not a row has deliverables; they're listed in its dialog. */}
+      <View accessibilityLabel={deliverables ? (deliverables === 1 ? "Has a deliverable" : `Has ${deliverables} deliverables`) : undefined} style={{ width: 12, height: 18, justifyContent: "center" }}>
+        {deliverables ? <Icon name="Package" size={12} color={colors.foregroundMuted} /> : null}
+      </View>
+      <Text style={{ minWidth: 44, textAlign: "right", color: colors.foregroundMuted, fontSize: 12, lineHeight: 18, fontVariant: ["tabular-nums"] }}>{ticket.estimateMin} min</Text>
       <View style={{ paddingTop: 2 }}><Icon name="ChevronRight" size={14} color={colors.foregroundMuted} /></View>
     </PressableRow>
   );
 }
 
 function StatusIcon({ colors, status, live, waiting }: { colors: Colors; status: TicketStatus; live: boolean; waiting: boolean }) {
-  if (waiting) return <Icon name="Hourglass" size={14} color={colors.foregroundMuted} />;
+  if (waiting) return <WaitingDot color={colors.foregroundMuted} size={14} />;
   switch (status) {
     case "done":
       return <Icon name="Check" size={14} color={colors.statusSuccess} />;

package/client/spinner.tsx

@@ -33,3 +33,14 @@ export function StalledPulse({ color, size = 12 }: { color: string; size?: numbe
     </Animated.View>
   );
 }
+
+// A ticket waiting on another one: a still, faded dot, so it reads as parked
+// rather than busy. Centered in the same slot an icon would take.
+export function WaitingDot({ color, size = 12 }: { color: string; size?: number }) {
+  const dot = Math.round(size / 2);
+  return (
+    <View accessibilityLabel="Waiting" style={{ width: size, height: size, alignItems: "center", justifyContent: "center" }}>
+      <View style={{ width: dot, height: dot, borderRadius: dot / 2, backgroundColor: color, opacity: 0.5 }} />
+    </View>
+  );
+}

package/client/ticket-dialog.tsx

@@ -9,7 +9,7 @@ import { type Attachment, AttachmentList, deliverableAttachment } from "./attach
 import { StackedDialog } from "./dialog-stack";
 import { IconSwap } from "./motion";
 import { PressableRow } from "./row";
-import { Spinner, StalledPulse } from "./spinner";
+import { Spinner, StalledPulse, WaitingDot } from "./spinner";
 import { StatusBadge } from "./status-badge";
 import { When } from "./when";
 
@@ -65,7 +65,7 @@ export function TicketStoryView({ colors, dashboard, ticket, now, live, onOpenAt
         {ticket.waitingFor ? (
           <View style={{ flexDirection: "row", gap: 4 }}>
             {/* Held on the first line when a long title wraps. */}
-            <View style={{ height: 18, justifyContent: "center" }}><Icon name="Hourglass" size={12} color={colors.foregroundMuted} /></View>
+            <View style={{ height: 18, justifyContent: "center" }}><WaitingDot color={colors.foregroundMuted} /></View>
             <Text style={{ flex: 1, color: colors.foregroundMuted, fontSize: 12, lineHeight: 18 }}>Waits for {ticket.waitingFor.id}: {ticket.waitingFor.title}</Text>
           </View>
         ) : null}
@@ -158,8 +158,8 @@ function LinkNote({ colors, link }: { colors: Colors; link: Link }) {
 // The same icons as the ticket rows, so a step reads like the status it was.
 // Past stage steps get an accent ringed dot: work that happened, now over.
 function Marker({ colors, step }: { colors: Colors; step: TimelineStep & { waiting?: boolean } }) {
-  const icon = step.waiting ? { name: "Hourglass", color: colors.foregroundMuted }
-    : step.label === "Added" ? { name: "CirclePlus", color: colors.foregroundMuted }
+  if (step.waiting) return <WaitingDot color={colors.foregroundMuted} />;
+  const icon = step.label === "Added" ? { name: "CirclePlus", color: colors.foregroundMuted }
     : step.status === "done" ? { name: "CircleCheck", color: colors.statusSuccess }
     : step.status === "blocked" ? { name: "Ban", color: colors.statusDanger }
     : step.status === "skipped" ? { name: "CircleSlash", color: colors.foregroundMuted }

package/npm-shrinkwrap.json

@@ -1,12 +1,12 @@
 {
   "name": "@stevecastaneda/paseo-progress",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@stevecastaneda/paseo-progress",
-      "version": "0.1.0",
+      "version": "0.1.2",
       "license": "MIT",
       "dependencies": {
         "@getpaseo/client": "^0.9.2",

package/package.json

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