paseo-follow-up 0.3.6 → 0.4.0

package/client/needs-you.tsx

@@ -0,0 +1,121 @@
+import { Text, View } from "react-native";
+import { Icon, useToast } from "@getpaseo/plugin/client/ui";
+import { useRpc } from "@getpaseo/plugin/client";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { checkPrActionRpc, controlRpc, sendRpc } from "../shared/contracts";
+import { needsYou, shortRefs, type NeedItem } from "../shared/attention";
+import type { Workspace } from "../shared/model";
+import { Button, Card, CardRow, errorText, text, type Theme } from "./kit";
+import type { Colors } from "./theme";
+import { meanwhile } from "./questions";
+
+import { overviewKey, workspaceKey } from "./keys";
+export { overviewKey, workspaceKey };
+
+function glyph(item: NeedItem, colors: Colors): { name: string; color: string } {
+  switch (item.kind) {
+    case "hold": return { name: "CirclePause", color: colors.statusWarning };
+    case "retry": return { name: "OctagonAlert", color: colors.statusDanger };
+    case "check": return { name: "CircleHelp", color: colors.statusWarning };
+    case "decision": return { name: "MessageCircleQuestion", color: colors.statusWarning };
+    case "question": return { name: item.state === "stopped" ? "CirclePause" : "MessageCircleQuestion", color: colors.statusWarning };
+    case "answer": return { name: "TriangleAlert", color: colors.statusWarning };
+    case "send": return { name: "Send", color: colors.statusWarning };
+    case "merge": return { name: "GitMerge", color: colors.statusSuccess };
+    case "reviewers": return { name: "UserPlus", color: colors.foregroundMuted };
+  }
+}
+
+export type NeedActions = {
+  openAgent?: (agentId: string) => void;
+  openPr?: (prKey: string, intent: "merge" | "reviewers") => void;
+  openQuestion?: (questionId: string) => void;
+  after?: () => void;
+};
+
+/** The developer's queue: one row per decision, each with its single action inline. */
+export function NeedsYouList({ workspace: w, theme, compact, actions, now = Date.now(), flush = false, skip = [] }: { workspace: Workspace; theme: Theme; compact: boolean; actions: NeedActions; now?: number; flush?: boolean; skip?: NeedItem["kind"][] }) {
+  const c = theme.colors; const t = text(c);
+  const toast = useToast();
+  const cache = useQueryClient();
+  const control = useRpc(controlRpc); const send = useRpc(sendRpc); const check = useRpc(checkPrActionRpc);
+  const refresh = () => { void cache.invalidateQueries({ queryKey: workspaceKey(w.id) }); void cache.invalidateQueries({ queryKey: overviewKey }); };
+  const fail = (error: Error) => { toast.error(errorText(error)); refresh(); };
+  const resume = useMutation({ mutationFn: () => control({ workspaceId: w.id, clearHold: true }), onSuccess: () => { toast.show("Follow-up resumed", { variant: "success" }); refresh(); actions.after?.(); }, onError: fail });
+  const retry = useMutation({ mutationFn: (batchId: string) => control({ workspaceId: w.id, retryBatchId: batchId }), onSuccess: () => { toast.show("Repairs queued again"); refresh(); actions.after?.(); }, onError: fail });
+  // Say what actually happened to the batch: delivery can be deferred or unconfirmed without an error.
+  const deliver = useMutation({ mutationFn: (batchId: string) => send({ workspaceId: w.id, batchId }), onSuccess: (result, batchId) => {
+    const b = result.batches.find(x => x.id === batchId);
+    if (!b || ["sent", "sending", "completed"].includes(b.state)) toast.show("Sent to the main agent", { variant: "success" });
+    else if (b.state === "uncertain") toast.show("Delivery wasn't confirmed. Check the agent before retrying.", { variant: "warning" });
+    else if (b.state === "pending") toast.show("Queued. It goes out when the agent is free.", { variant: "info" });
+    else toast.error(b.result || "The repairs couldn't be sent.");
+    refresh(); actions.after?.();
+  }, onError: fail });
+  const inspect = useMutation({ mutationFn: (actionId: string) => check({ workspaceId: w.id, actionId }), onSuccess: reply => { toast.show(reply.result, { variant: reply.state === "failed" ? "warning" : "info" }); refresh(); }, onError: fail });
+  const items = needsYou(w, now).filter(item => !skip.includes(item.kind));
+  if (!items.length) return null;
+  const busy = resume.isPending || retry.isPending || deliver.isPending || inspect.isPending;
+  const openMain = actions.openAgent ? () => actions.openAgent!(w.mainAgentId) : undefined;
+  const action = (item: NeedItem) => {
+    switch (item.kind) {
+      case "hold": return <Button theme={theme} compact={compact} kind="primary" icon="Play" title="Resume follow-up" loading={resume.isPending} disabled={busy} onPress={() => resume.mutate()} />;
+      case "retry": return item.exhausted
+        ? openMain && <Button theme={theme} compact={compact} icon="MessageSquare" title="Open main agent" onPress={openMain} />
+        : <>
+          <Button theme={theme} compact={compact} icon="RotateCcw" title="Retry" accessibilityLabel="Queue the repairs again" loading={retry.isPending} disabled={busy} onPress={() => retry.mutate(item.batchId)} />
+          {openMain && <Button theme={theme} compact={compact} kind="ghost" icon="MessageSquare" title="Open agent" accessibilityLabel="Open main agent" onPress={openMain} />}
+        </>;
+      case "check": return <Button theme={theme} compact={compact} icon="RefreshCw" title="Check state" loading={inspect.isPending} disabled={busy} onPress={() => inspect.mutate(item.actionId)} />;
+      case "decision": return openMain && <Button theme={theme} compact={compact} icon="MessageSquare" title="Answer in chat" onPress={openMain} />;
+      case "question": return actions.openQuestion && <Button theme={theme} compact={compact} icon="MessageCircleReply" title="Answer" accessibilityLabel={`Answer ${item.title}`} onPress={() => actions.openQuestion!(item.questionId)} />;
+      case "answer": return actions.openQuestion && <Button theme={theme} compact={compact} icon="Eye" title="Check" accessibilityLabel={`Check the ${item.questionId} answer`} onPress={() => actions.openQuestion!(item.questionId)} />;
+      case "send": return <Button theme={theme} compact={compact} kind="primary" icon="Send" title="Send to main agent" accessibilityLabel={`Send ${item.tasks.length} repairs to the main agent`} loading={deliver.isPending} disabled={busy || !!item.blocker} onPress={() => deliver.mutate(item.batchId)} />;
+      case "merge": return actions.openPr && <Button theme={theme} compact={compact} icon="GitMerge" title={`Merge #${item.number}`} accessibilityLabel={`Review and merge pull request ${item.number}`} onPress={() => actions.openPr!(item.prKey, "merge")} />;
+      case "reviewers": return actions.openPr && <Button theme={theme} compact={compact} icon="UserPlus" title="Add reviewers" onPress={() => actions.openPr!(item.prKey, "reviewers")} />;
+    }
+  };
+  return <View>
+    {items.map((item, index) => {
+      const g = glyph(item, c);
+      const button = action(item);
+      return <CardRow key={item.key} theme={theme} first={index === 0 && flush} style={flush ? { paddingHorizontal: 0 } : undefined}>
+        <View style={{ flexDirection: "row", gap: 9 }}>
+          <View style={{ paddingTop: 2 }}><Icon name={g.name} size={14} color={g.color} /></View>
+          <View style={{ flex: 1, minWidth: 0, gap: 3 }}>
+            <Text style={t.body}>{item.title}</Text>
+            {"detail" in item && !!item.detail && <Text numberOfLines={item.kind === "question" ? 2 : 3} style={t.meta}>{item.detail}</Text>}
+            {item.kind === "question" && <QuestionState workspace={w} questionId={item.questionId} theme={theme} />}
+            {item.kind === "send" && <View style={{ gap: 2 }}>
+              {item.tasks.slice(0, 4).map((task, i) => <Text key={i} numberOfLines={2} style={t.meta}><Text style={{ fontVariant: ["tabular-nums"] }}>{`${i + 1}. `}</Text>{shortRefs(task, w)}</Text>)}
+              {item.tasks.length > 4 && <Text style={t.meta}>{`and ${item.tasks.length - 4} more`}</Text>}
+            </View>}
+            {(button || (item.kind === "send" && item.blocker)) && <View style={{ flexDirection: "row", flexWrap: "wrap", alignItems: "center", gap: 8, marginTop: 5 }}>
+              {button}
+              {item.kind === "send" && item.blocker && <Text style={[t.small, { flexShrink: 1 }]}>{item.blocker}</Text>}
+            </View>}
+          </View>
+        </View>
+      </CardRow>;
+    })}
+  </View>;
+}
+
+function QuestionState({ workspace: w, questionId, theme }: { workspace: Workspace; questionId: string; theme: Theme }) {
+  const c = theme.colors;
+  const q = w.questions.find(x => x.id === questionId);
+  if (!q) return null;
+  const state = meanwhile(w, q);
+  return <View style={{ flexDirection: "row", gap: 5 }}>
+    <View style={{ paddingTop: 2 }}><Icon name={state.icon} size={11} color={state.color(c)} /></View>
+    <Text numberOfLines={4} style={[text(c).small, { flex: 1, color: state.color(c) }]}>{state.text}</Text>
+  </View>;
+}
+
+export function NeedsYouCard({ workspace, theme, compact, actions, now }: { workspace: Workspace; theme: Theme; compact: boolean; actions: NeedActions; now: number }) {
+  const count = needsYou(workspace, now).length;
+  if (!count) return null;
+  return <Card theme={theme} compact={compact} icon="CircleAlert" title="Needs you" tone="attention" count={count}>
+    <NeedsYouList workspace={workspace} theme={theme} compact={compact} actions={actions} now={now} />
+  </Card>;
+}

package/client/overview.tsx

@@ -1,28 +1,123 @@
 import { useState } from "react";
-import { ActivityIndicator, Pressable, ScrollView, Text, View } from "react-native";
-import { useRpc, type PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import { useRpc, type PluginScreenProps } from "@getpaseo/plugin/client";
 import { useQuery } from "@tanstack/react-query";
-import { Icon } from "@getpaseo/plugin/client/react-native";
+import { Icon } from "@getpaseo/plugin/client/ui";
 import { listRpc } from "../shared/contracts";
-import { summary, type Status } from "../shared/model";
-import { Button, colorFor } from "./components";
-import { overviewKey } from "./panel";
+import type { Status, Workspace } from "../shared/model";
+import { followUpObligations } from "../shared/follow-up";
+import { ago, liveLine, needsYou, overviewStatus, stackBar, statusGroups } from "../shared/attention";
+import { summary } from "../shared/model";
+import { Button, IconButton, text, useNow, type Theme } from "./kit";
+import { StackBar } from "./header";
+import { Skeleton } from "./motion";
+import { raised, type Colors } from "./theme";
+import { overviewKey } from "./needs-you";
+import { SpecChip } from "./spec";
 
-export function FollowOverview({ theme, layout, navigation }: PluginSurfaceProps) {
+// Accent stays for actions: working is plain foreground, waiting is muted, and only Done is green.
+export const statusColor = (c: Colors, status: Status) => status === "done" ? c.statusSuccess : status === "needs-you" ? c.statusWarning : status === "handling" ? c.foreground : c.foregroundMuted;
+const statusIcon = (status: Status) => status === "done" ? "CircleCheck" : status === "needs-you" ? "CircleAlert" : status === "handling" ? "LoaderCircle" : status === "waiting" ? "Clock" : "GitPullRequest";
+
+function reasonFor(w: Workspace, status: Status, now: number): string {
+  if (status === "needs-you") {
+    const items = needsYou(w, now);
+    const first = items[0]?.kind === "question" && items[0].state === "stopped" ? `Agent stopped · ${items[0].title}` : items[0]?.title;
+    return items.length > 1 ? `${first} · and ${items.length - 1} more` : first ?? summary(w, now).reason;
+  }
+  if (status === "done") return w.completion?.summary ?? "Ready to archive";
+  return liveLine(w, now).text;
+}
+
+function WorkspaceRow({ w, theme, compact, now, onOpen, first }: { w: Workspace; theme: Theme; compact: boolean; now: number; onOpen?: () => void; first: boolean }) {
+  const c = theme.colors; const t = text(c);
+  const status = overviewStatus(w, now);
+  const bar = stackBar(w);
+  const left = followUpObligations(w).filter(o => !["done", "waived"].includes(o.status)).length;
+  const meta = [bar.total ? bar.merged === bar.total ? `${bar.total} merged` : `${bar.merged} of ${bar.total} merged` : "No PRs yet", left ? `${left} task${left === 1 ? "" : "s"} left` : null, w.enable_auto_sends ? "Auto-send on" : null].filter(Boolean).join(" · ");
+  return <Pressable accessibilityRole="button" accessibilityLabel={`${w.title}. ${statusGroups.find(g => g.status === status)?.title}. Open workspace`} disabled={!onOpen} onPress={onOpen}
+    style={state => ({ flexDirection: "row", gap: 12, paddingHorizontal: 14, paddingVertical: 12, borderTopWidth: first ? 0 : 1, borderTopColor: c.border, backgroundColor: state.pressed ? c.surface2 : (state as { hovered?: boolean }).hovered ? c.surface1 : "transparent" })}>
+    <View style={{ paddingTop: 2 }}><Icon name={statusIcon(status)} size={16} color={statusColor(c, status)} /></View>
+    <View style={{ flex: 1, minWidth: 0, gap: 4 }}>
+      <View style={{ flexDirection: "row", alignItems: "center", gap: 8 }}>
+        <Text numberOfLines={1} style={[t.label, { flex: 1, fontSize: 14, lineHeight: 19 }]}>{w.title}{w.archived ? <Text style={{ color: c.foregroundMuted, fontWeight: "400" }}> · archived</Text> : null}</Text>
+        {!!w.spec?.url && <View style={{ marginVertical: -4 }}><SpecChip workspace={w} theme={theme} compact={false} /></View>}
+        <Text style={[t.small, { fontVariant: ["tabular-nums"] }]}>{ago(w.updatedAt, now)}</Text>
+      </View>
+      <Text numberOfLines={2} style={[t.meta, { color: status === "needs-you" ? c.foreground : c.foregroundMuted }]}>{reasonFor(w, status, now)}</Text>
+      <View style={{ flexDirection: compact ? "column" : "row", alignItems: compact ? "stretch" : "center", gap: compact ? 6 : 10, marginTop: 3 }}>
+        {bar.total > 0 && <View style={{ width: compact ? "100%" : 140 }}><StackBar workspace={w} theme={theme} height={4} /></View>}
+        <Text numberOfLines={1} style={[t.small, { fontVariant: ["tabular-nums"] }]}>{meta}</Text>
+      </View>
+    </View>
+    {onOpen && <View style={{ paddingTop: 2 }}><Icon name="ChevronRight" size={15} color={c.foregroundMuted} /></View>}
+  </Pressable>;
+}
+
+export function FollowOverview({ theme, layout, navigation, openSettings }: PluginScreenProps & { openSettings: () => void }) {
+  const c = theme.colors; const t = text(c);
   const list = useRpc(listRpc);
+  const now = useNow(30_000);
   const [showArchived, setShowArchived] = useState(false);
+  const [filter, setFilter] = useState<Status | "all">("all");
   const query = useQuery({ queryKey: overviewKey, queryFn: () => list({}), refetchInterval: 5000 });
-  const groups: { status: Status; title: string }[] = [{ status: "needs-you", title: "Needs you" }, { status: "handling", title: "Agent handling" }, { status: "waiting", title: "Waiting" }, { status: "active", title: "Active" }, { status: "done", title: "Done · ready to archive" }];
-  const workspaces = (query.data?.workspaces ?? []).filter(w => !w.archived || showArchived);
-  return <ScrollView style={{ flex: 1, backgroundColor: theme.colors.surface0 }} contentContainerStyle={{ padding: layout.compact ? 16 : 24, gap: 8, maxWidth: 960, width: "100%", alignSelf: "center", paddingBottom: 40 }}>
-    <View style={{ flexDirection: "row", alignItems: "center", gap: 12 }}><View style={{ flex: 1, gap: 7 }}><Text style={{ color: theme.colors.foreground, fontSize: 22, fontWeight: "600" }}>Workspace follow-up</Text><Text style={{ color: theme.colors.foregroundMuted, fontSize: 13 }}>What needs you, what the agents are handling, and what is finished.</Text></View><Button title="Refresh" icon="RefreshCw" theme={theme} compact={layout.compact} onPress={() => void query.refetch()} /></View>
-    {query.isPending && <ActivityIndicator color={theme.colors.accent} />}{(query.error || query.data?.error) && <Text accessibilityRole="alert" style={{ color: theme.colors.statusDanger }}>Could not refresh all workspace state. Try Refresh.</Text>}
-    {!query.isPending && !query.error && !workspaces.length && <View style={{ marginTop: 28, gap: 9 }}><Text style={{ color: theme.colors.foreground, fontSize: 16 }}>No workspaces tracked yet</Text><Text style={{ color: theme.colors.foregroundMuted, fontSize: 13, lineHeight: 20 }}>Open Follow-up in a workspace and click Track this workspace. Tracking and messages stay scoped to workspaces you choose.</Text></View>}
+  const compact = layout.compact;
+  const all = query.data?.workspaces ?? [];
+  const archived = all.filter(w => w.archived).length;
+  const workspaces = all.filter(w => !w.archived || showArchived);
+  const counts = new Map<Status, number>(statusGroups.map(g => [g.status, workspaces.filter(w => overviewStatus(w, now) === g.status).length]));
+  const need = counts.get("needs-you") ?? 0;
+  const groups = statusGroups.filter(g => filter === "all" || g.status === filter);
+  const chip = (id: Status | "all", label: string, count: number, color?: string) => {
+    const selected = filter === id;
+    return <Pressable key={id} accessibilityRole="tab" accessibilityState={{ selected }} aria-selected={selected} accessibilityLabel={`${label}, ${count}`} onPress={() => setFilter(id)}
+      style={state => ({ flexDirection: "row", alignItems: "center", gap: 6, minHeight: compact ? 40 : 30, paddingHorizontal: 11, borderRadius: 999, backgroundColor: selected ? c.surface2 : (state as { hovered?: boolean }).hovered ? c.surface1 : "transparent", borderWidth: 1, borderColor: selected ? c.border : "transparent" })}>
+      {color && <View style={{ width: 7, height: 7, borderRadius: 4, backgroundColor: color }} />}
+      <Text style={{ color: selected ? c.foreground : c.foregroundMuted, fontSize: 12, fontWeight: "600" }}>{label}</Text>
+      <Text style={{ color: c.foregroundMuted, fontSize: 12, fontVariant: ["tabular-nums"] }}>{count}</Text>
+    </Pressable>;
+  };
+  return <ScrollView style={{ flex: 1, backgroundColor: c.surface0 }} contentContainerStyle={{ padding: compact ? 16 : 28, paddingBottom: 48, maxWidth: 880, width: "100%", alignSelf: "center", gap: 14 }}>
+    <View style={{ flexDirection: "row", alignItems: "flex-start", gap: 8 }}>
+      <View style={{ flex: 1, gap: 4 }}>
+        <Text accessibilityRole="header" style={[t.title, { fontSize: 20, lineHeight: 26 }]}>Tracked workspaces</Text>
+        <Text style={t.meta}>{query.isPending ? "Loading…" : workspaces.length ? `${workspaces.length} workspace${workspaces.length === 1 ? "" : "s"}${need ? "" : " · nothing needs you"}` : "None yet"}{need ? <Text style={{ color: c.statusWarning, fontWeight: "600" }}>{` · ${need} need${need === 1 ? "s" : ""} you`}</Text> : null}</Text>
+      </View>
+      <IconButton icon="RefreshCw" label="Refresh" onPress={() => void query.refetch()} theme={theme} compact={compact} spinning={query.isRefetching} />
+      <IconButton icon="Settings" label="Follow-up settings" onPress={openSettings} theme={theme} compact={compact} />
+    </View>
+    {(query.error || query.data?.error) && <View accessibilityRole="alert" style={{ flexDirection: "row", gap: 8, padding: 10, borderRadius: 8, borderWidth: 1, borderColor: c.statusWarning }}>
+      <View style={{ paddingTop: 2 }}><Icon name="TriangleAlert" size={14} color={c.statusWarning} /></View>
+      <Text style={[t.meta, { flex: 1, color: c.statusWarning }]}>{query.error ? "Couldn't refresh tracked workspaces. Showing what was last loaded." : query.data?.error}</Text>
+    </View>}
+    {workspaces.length > 0 && <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flexGrow: 0, marginHorizontal: compact ? -16 : 0 }} contentContainerStyle={{ gap: 4, paddingHorizontal: compact ? 16 : 0 }}>
+      <View accessibilityRole="tablist" style={{ flexDirection: "row", gap: 4 }}>
+        {chip("all", "All", workspaces.length)}
+        {statusGroups.filter(g => (counts.get(g.status) ?? 0) > 0).map(g => chip(g.status, g.short, counts.get(g.status) ?? 0, statusColor(c, g.status)))}
+      </View>
+    </ScrollView>}
+    {query.isPending && <View style={{ borderRadius: 10, ...raised(c), padding: 14, gap: 12 }}>{[0, 1, 2].map(i => <View key={i} style={{ gap: 7 }}><Skeleton width="40%" height={11} color={c.surface2} /><Skeleton width="75%" height={9} color={c.surface2} /></View>)}</View>}
+    {!query.isPending && !workspaces.length && <View style={{ borderRadius: 10, ...raised(c), padding: compact ? 16 : 20, gap: 10 }}>
+      <Icon name="GitPullRequest" size={20} color={c.foregroundMuted} />
+      <Text style={[t.label, { fontSize: 14 }]}>No tracked workspaces yet</Text>
+      <Text style={t.meta}>Open a workspace, open Follow-up from its side panel or header, and choose Track this workspace. To track a whole project's workspaces automatically, turn the project on in settings.</Text>
+      <Button theme={theme} compact={compact} icon="Settings" title="Project settings" onPress={openSettings} />
+    </View>}
     {groups.map(group => {
-      const rows = workspaces.filter(w => summary(w).status === group.status);
+      // Within Needs you, a workspace whose agent stopped for a question comes first.
+      const stopped = (w: Workspace) => Number(needsYou(w, now).some(i => i.kind === "question" && i.state === "stopped"));
+      const rows = workspaces.filter(w => overviewStatus(w, now) === group.status).sort((a, b) => stopped(b) - stopped(a) || Date.parse(b.updatedAt) - Date.parse(a.updatedAt));
       if (!rows.length) return null;
-      return <View key={group.status} style={{ marginTop: 24, gap: 9 }}><View style={{ flexDirection: "row", gap: 8, alignItems: "center" }}><Text style={{ color: colorFor(theme, group.status), fontSize: 14, fontWeight: "600" }}>{group.title}</Text><Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>{rows.length}</Text></View>{rows.map(w => <Pressable key={w.id} accessibilityRole="button" accessibilityLabel={`Open ${w.title}`} disabled={!navigation} onPress={() => navigation?.openWorkspace({ workspaceId: w.id })} style={({ pressed }) => ({ paddingVertical: 14, borderTopWidth: 1, borderColor: theme.colors.border, backgroundColor: pressed ? theme.colors.surface1 : "transparent", flexDirection: "row", alignItems: "flex-start", gap: 12 })}><Icon name={group.status === "done" ? "CircleCheck" : group.status === "needs-you" ? "CircleAlert" : "GitPullRequest"} size={17} color={colorFor(theme, group.status)} /><View style={{ flex: 1, gap: 6 }}><Text style={{ color: theme.colors.foreground, fontSize: 14, fontWeight: "600" }}>{w.title}{w.archived ? " · archived" : ""}</Text><Text style={{ color: theme.colors.foregroundMuted, fontSize: 13, lineHeight: 19 }}>{summary(w).reason}</Text><Text style={{ color: theme.colors.foregroundMuted, fontSize: 12 }}>{new Set(w.prs.map(p => p.stack)).size} stacks · {w.prs.length} PRs · {w.obligations.filter(o => !["done", "waived"].includes(o.status)).length} remaining tasks</Text></View>{navigation && <Icon name="ArrowUpRight" size={14} color={theme.colors.foregroundMuted} />}</Pressable>)}</View>;
+      return <View key={group.status} style={{ gap: 8, marginTop: 4 }}>
+        <View style={{ flexDirection: "row", alignItems: "baseline", gap: 8 }}>
+          <Text accessibilityRole="header" style={[t.label, { color: statusColor(c, group.status) }]}>{group.title}</Text>
+          <Text style={[t.small, { fontVariant: ["tabular-nums"] }]}>{rows.length}</Text>
+        </View>
+        <View style={{ borderRadius: 10, overflow: "hidden", backgroundColor: c.surface0, ...raised(c) }}>
+          {rows.map((w, i) => <WorkspaceRow key={w.id} w={w} theme={theme} compact={compact} now={now} first={i === 0} onOpen={navigation && !w.archived ? () => navigation.openWorkspace({ workspaceId: w.id }) : undefined} />)}
+        </View>
+      </View>;
     })}
-    {query.data?.workspaces.some(w => w.archived) && <Button title={showArchived ? "Hide archived workspaces" : "Show archived history"} theme={theme} compact={layout.compact} onPress={() => setShowArchived(!showArchived)} />}
+    {archived > 0 && <Button theme={theme} compact={compact} kind="ghost" icon={showArchived ? "EyeOff" : "Archive"} title={showArchived ? "Hide archived workspaces" : `Show ${archived} archived`} onPress={() => setShowArchived(!showArchived)} />}
   </ScrollView>;
 }