@andrioid/paseo-attention-span 0.0.0-stage → 0.1.0

package/client/setup.tsx

@@ -0,0 +1,134 @@
+import { openExternalUrl, usePaseo } from "@getpaseo/plugin/client";
+import { copyText, useToast } from "@getpaseo/plugin/client/ui";
+import { useQuery } from "@tanstack/react-query";
+import { Text, View } from "react-native";
+import { AttentionConfig } from "../shared/config";
+import type { SetupStatus } from "../shared/setup";
+import { githubProjects, listProfiles } from "./sessions";
+import { Button, useStyles } from "./ui";
+
+type State = "done" | "missing" | "optional";
+
+interface Line {
+  key: string;
+  state: State;
+  title: string;
+  detail?: string;
+  action?: { label: string; onPress: () => void };
+}
+
+// What's needed and how to fix it, in place of the tabs while nothing can load [SET-01].
+// The last three lines don't block; they say what Attention Span will use.
+export function SetupChecklist({
+  status,
+  config: loaded,
+  onCheck,
+  checking,
+  openSettings,
+}: {
+  status: SetupStatus;
+  // The last config that loaded, for the profile names; the defaults otherwise.
+  config?: AttentionConfig;
+  onCheck: () => void;
+  checking: boolean;
+  openSettings?: () => void;
+}) {
+  const styles = useStyles();
+  const paseo = usePaseo();
+  const toast = useToast();
+  const projects = useQuery({ queryKey: ["attention-span", "github-projects"], queryFn: () => githubProjects(paseo) });
+  const profiles = useQuery({ queryKey: ["attention-span", "profiles"], queryFn: () => listProfiles(paseo) });
+  const { gh, config } = status;
+
+  const copy = (command: string) =>
+    void copyText(command).then(
+      () => toast.show(`Copied ${command}`, { variant: "success" }),
+      () => toast.error("Couldn't copy"),
+    );
+
+  const lines: Line[] = [];
+  lines.push(
+    gh.found
+      ? { key: "gh", state: "done", title: "GitHub CLI installed" }
+      : {
+          key: "gh",
+          state: "missing",
+          title: "Install the GitHub CLI",
+          detail: "On the machine that runs Paseo. Attention Span reads GitHub through it.",
+          action: { label: "cli.github.com ↗", onPress: () => void openExternalUrl("https://cli.github.com") },
+        },
+  );
+  if (gh.found)
+    lines.push(
+      gh.login
+        ? { key: "login", state: "done", title: `Signed in to GitHub as ${gh.login}` }
+        : {
+            key: "login",
+            state: "missing",
+            title: "Sign in to GitHub",
+            detail: `Run gh auth login on the machine that runs Paseo. gh says: ${gh.error}`,
+            action: { label: "Copy command", onPress: () => copy("gh auth login") },
+          },
+    );
+  lines.push(
+    config.error
+      ? { key: "config", state: "missing", title: "Fix config.json", detail: config.error }
+      : {
+          key: "coverage",
+          state: config.orgs.length || config.repos.length ? "done" : "optional",
+          title: config.orgs.length || config.repos.length ? `Covering ${[...config.orgs, ...config.repos].join(", ")}` : "Covering everything on GitHub that involves you",
+          action: openSettings ? { label: "Choose orgs and repos", onPress: openSettings } : undefined,
+        },
+  );
+  if (projects.data)
+    lines.push(
+      projects.data.length
+        ? { key: "projects", state: "done", title: `${projects.data.length} Paseo ${projects.data.length === 1 ? "project" : "projects"} with a GitHub remote` }
+        : { key: "projects", state: "optional", title: "No Paseo projects with a GitHub remote yet", detail: "Add the repos you work in as projects, so items can start sessions and Next up has issues to suggest." },
+    );
+  if (profiles.data) lines.push(agentLine(profiles.data.map((profile) => profile.name), (loaded ?? AttentionConfig.parse({})).profiles));
+
+  return (
+    <View style={{ gap: 16 }}>
+      <View style={{ gap: 4 }}>
+        <Text style={styles.title}>Set up Attention Span</Text>
+        <Text style={styles.muted}>A few things are needed before it can show what's waiting on you.</Text>
+      </View>
+      <View style={styles.card}>
+        {lines.map((line, index) => (
+          <View key={line.key} style={[styles.item, index > 0 && styles.divider]}>
+            <Mark state={line.state} />
+            <View style={styles.body}>
+              <Text style={styles.text}>{line.title}</Text>
+              {line.detail ? <Text style={styles.muted}>{line.detail}</Text> : null}
+            </View>
+            {line.action ? <Button label={line.action.label} variant="calm" onPress={line.action.onPress} /> : null}
+          </View>
+        ))}
+      </View>
+      <View style={styles.row}>
+        <Button label={checking ? "Checking…" : "Check again"} icon="reload" variant="solid" disabled={checking} onPress={onCheck} />
+      </View>
+    </View>
+  );
+}
+
+function Mark({ state }: { state: State }) {
+  const styles = useStyles();
+  const { glyph, color } = {
+    done: { glyph: "✓", color: styles.c.statusSuccess },
+    missing: { glyph: "✗", color: styles.c.statusDanger },
+    optional: { glyph: "○", color: styles.c.foregroundMuted },
+  }[state];
+  return <Text style={{ color, fontSize: 15, fontWeight: "700", width: 16, textAlign: "center" }}>{glyph}</Text>;
+}
+
+// Which agent sessions will use: the profile named for the session type, then "default", then Paseo's defaults [SES-06].
+function agentLine(names: string[], profiles: AttentionConfig["profiles"]): Line {
+  const has = (name: string) => names.some((candidate) => candidate.toLowerCase() === name.toLowerCase());
+  const fallback = has(profiles.default) ? `the ${profiles.default} profile` : "Paseo's default agent";
+  const review = has(profiles.review ?? "") ? `the ${profiles.review} profile` : fallback;
+  if (!has(profiles.default) && !has(profiles.review ?? ""))
+    return { key: "agent", state: "optional", title: "Sessions use Paseo's default agent", detail: `Add an agent profile named ${profiles.review} for reviews, or ${profiles.default} for every session.` };
+  return { key: "agent", state: "done", title: `Reviews use ${review}; other sessions use ${fallback}` };
+}

package/client/sheet.tsx

@@ -0,0 +1,87 @@
+import { openExternalUrl } from "@getpaseo/plugin/client";
+import { Modal } from "@getpaseo/plugin/client/ui";
+import type { ReactNode } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { ItemDetails } from "../shared/attention";
+import type { IconName } from "./icons";
+import { KeepStyles, TablerIcon, useHover, useStyles } from "./ui";
+
+// Tapping a card opens its sheet: what the card knows, every action saying what it will do, then what's fetched [ATT-06].
+// Fetched details go last, so the actions don't move when they arrive. A bottom sheet on phones, a dialog on desktop.
+
+export interface SheetEntry {
+  key: string;
+  icon: IconName;
+  label: string;
+  detail?: string;
+  disabled?: boolean;
+  onPress: () => void;
+}
+
+export function ActionSheet({ title, top, entries, bottom, onClose }: { title: string; top: ReactNode; entries: SheetEntry[]; bottom: ReactNode; onClose: () => void }) {
+  const styles = useStyles();
+  return (
+    <Modal title={title} open onOpenChange={(open) => (open ? null : onClose())}>
+      <Modal.Content>
+        <KeepStyles styles={styles}>
+          <View style={{ gap: 10 }}>{top}</View>
+          <View style={[styles.card, { backgroundColor: styles.c.surface2 }]}>
+            {entries.map((entry, index) => (
+              <Entry key={entry.key} entry={entry} first={index === 0} />
+            ))}
+          </View>
+          <View style={{ gap: 10 }}>{bottom}</View>
+        </KeepStyles>
+      </Modal.Content>
+    </Modal>
+  );
+}
+
+function Entry({ entry, first }: { entry: SheetEntry; first: boolean }) {
+  const styles = useStyles();
+  const { hovered, hover } = useHover();
+  const muted = styles.c.foregroundMuted;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={entry.label}
+      disabled={entry.disabled}
+      onPress={entry.onPress}
+      {...hover}
+      style={({ pressed }) => [
+        styles.row,
+        { alignItems: "flex-start", paddingVertical: 10, paddingHorizontal: 12, backgroundColor: pressed || hovered ? styles.c.border : "transparent" },
+        first ? null : { borderTopWidth: 1, borderTopColor: styles.c.surface1 },
+      ]}
+    >
+      <View style={{ paddingTop: 1 }}>
+        <TablerIcon name={entry.icon} size={16} color={entry.disabled ? muted : styles.action} />
+      </View>
+      <View style={{ flex: 1, gap: 2 }}>
+        <Text style={{ color: entry.disabled ? muted : styles.c.foreground, fontSize: 14, fontWeight: "600" }}>{entry.label}</Text>
+        {entry.detail ? <Text style={styles.muted}>{entry.detail}</Text> : null}
+      </View>
+    </Pressable>
+  );
+}
+
+// The PR's size and the linked issues or PRs, once fetched.
+export function DetailLines({ details, loading, error, linkedLabel }: { details?: ItemDetails; loading: boolean; error: unknown; linkedLabel: string }) {
+  const styles = useStyles();
+  if (loading) return <Text style={styles.muted}>Loading details…</Text>;
+  if (!details) return error ? <Text style={styles.muted}>Couldn't load details: {(error as Error).message}</Text> : null;
+  return (
+    <>
+      {details.size ? <Text style={styles.muted}>{sizeText(details.size)}</Text> : null}
+      {details.linked.map((link) => (
+        <Pressable key={link.url} accessibilityRole="link" onPress={() => void openExternalUrl(link.url)}>
+          <Text style={styles.muted} numberOfLines={1}>
+            {linkedLabel} #{link.number} {link.title} · {link.state.toLowerCase()}
+          </Text>
+        </Pressable>
+      ))}
+    </>
+  );
+}
+
+const sizeText = (size: ItemDetails["size"]) => (size ? `+${size.additions} −${size.deletions} · ${size.files} file${size.files === 1 ? "" : "s"}` : null);

package/client/ui.tsx

@@ -0,0 +1,173 @@
+import type { PluginScreenProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/ui";
+import { createContext, type ReactNode, useContext, useMemo, useState } from "react";
+import { Image, Pressable, Text, View } from "react-native";
+import type { Chip } from "../shared/attention";
+import { ICONS, type IconName } from "./icons";
+
+// Shared look: theme colors only, tighter on compact layouts [REACH-01].
+// Color is for signals; facts stay quiet.
+
+type Theme = PluginScreenProps["theme"];
+
+export function makeStyles(theme: Theme, compact: boolean) {
+  const c = theme.colors;
+  return {
+    c,
+    compact,
+    // Action text and icons. The accent is a fill: as text on a dark theme it's 2.5:1; this green is 5–6:1 on every surface.
+    action: c.statusSuccess,
+    screen: { flex: 1, backgroundColor: c.surface0 },
+    content: { padding: compact ? 12 : 24, gap: compact ? 20 : 28, paddingBottom: 48, maxWidth: 860, width: "100%" as const, alignSelf: "center" as const },
+    row: { flexDirection: "row" as const, alignItems: "center" as const, gap: 8 },
+    wrap: { flexDirection: "row" as const, flexWrap: "wrap" as const, alignItems: "center" as const, gap: 6 },
+    text: { color: c.foreground, fontSize: 14 },
+    muted: { color: c.foregroundMuted, fontSize: 12 },
+    danger: { color: c.statusDanger, fontSize: 13 },
+    title: { color: c.foreground, fontSize: 16, fontWeight: "600" as const, flexShrink: 1 },
+    card: { backgroundColor: c.surface1, borderRadius: 12, borderWidth: 1, borderColor: c.border, overflow: "hidden" as const },
+    item: { padding: compact ? 12 : 16, gap: 10, flexDirection: "row" as const, alignItems: "flex-start" as const },
+    divider: { borderTopWidth: 1, borderTopColor: c.border },
+    body: { flex: 1, gap: 6, minWidth: 0 },
+    quote: { backgroundColor: c.surface2, borderRadius: 8, paddingVertical: 8, paddingHorizontal: 10, gap: 4 },
+    panel: { gap: 10, padding: 12, borderRadius: 10, backgroundColor: c.surface2 },
+    input: { color: c.foreground, backgroundColor: c.surface1, borderColor: c.border, borderWidth: 1, borderRadius: 8, padding: 10, fontSize: 13 },
+  };
+}
+export type Styles = ReturnType<typeof makeStyles>;
+
+const StylesContext = createContext<Styles | null>(null);
+export const useStyles = () => useContext(StylesContext)!;
+
+export function StylesProvider({ theme, compact, children }: { theme: Theme; compact: boolean; children: ReactNode }) {
+  const styles = useMemo(() => makeStyles(theme, compact), [theme, compact]);
+  return <StylesContext.Provider value={styles}>{children}</StylesContext.Provider>;
+}
+
+// Modals can render outside this tree (a bottom sheet on phones), so they take the styles along.
+export function KeepStyles({ styles, children }: { styles: Styles; children: ReactNode }) {
+  return <StylesContext.Provider value={styles}>{children}</StylesContext.Provider>;
+}
+
+export function TablerIcon({ name, size = 16, color }: { name: IconName; size?: number; color?: string }) {
+  const { c } = useStyles();
+  return <Icon icon={ICONS[name]} size={size} color={color ?? c.foregroundMuted} />;
+}
+
+export function toneColor(styles: Styles, tone: Chip["tone"]): string {
+  return { good: styles.c.statusSuccess, bad: styles.c.statusDanger, warn: styles.c.statusWarning, neutral: styles.c.foregroundMuted }[tone];
+}
+
+// A state that matters, as a colored dot and text.
+export function Signal({ text, tone }: Chip) {
+  const styles = useStyles();
+  const color = toneColor(styles, tone);
+  return (
+    <View style={[styles.row, { gap: 5 }]}>
+      <View style={{ width: 7, height: 7, borderRadius: 4, backgroundColor: color }} />
+      <Text style={{ color, fontSize: 12, fontWeight: "500" }}>{text}</Text>
+    </View>
+  );
+}
+
+// The line under a title: facts as quiet text joined by "·", then signals [ATT-05].
+export function Meta({ facts, chips }: { facts: string[]; chips: Chip[] }) {
+  const styles = useStyles();
+  const text = [...facts, ...chips.filter((chip) => chip.tone === "neutral").map((chip) => chip.text)];
+  const signals = chips.filter((chip) => chip.tone !== "neutral");
+  return (
+    <View style={[styles.wrap, { columnGap: 10, rowGap: 4 }]}>
+      {text.length ? <Text style={styles.muted}>{text.join(" · ")}</Text> : null}
+      {signals.map((chip) => (
+        <Signal key={chip.text} {...chip} />
+      ))}
+    </View>
+  );
+}
+
+export function Avatar({ url, bot, size = 18 }: { url?: string; bot?: boolean; size?: number }) {
+  const styles = useStyles();
+  if (bot || !url) return <TablerIcon name={bot ? "bot" : "issue"} size={size} />;
+  return <Image source={{ uri: url }} style={{ width: size, height: size, borderRadius: size / 2, backgroundColor: styles.c.surface2 }} />;
+}
+
+// ghost: no background until hovered or pressed, for secondary icons on every row.
+type Variant = "calm" | "solid" | "plain" | "ghost";
+
+export function useHover() {
+  const [hovered, setHovered] = useState(false);
+  return { hovered, hover: { onHoverIn: () => setHovered(true), onHoverOut: () => setHovered(false) } };
+}
+
+// Calm by default: accent text on a subtle surface. Solid accent is for confirmations.
+export function Button({
+  label,
+  icon,
+  onPress,
+  variant = "plain",
+  disabled,
+  accessibilityLabel,
+}: {
+  label?: string;
+  icon?: IconName;
+  onPress: () => void;
+  variant?: Variant;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+}) {
+  const styles = useStyles();
+  const { hovered, hover } = useHover();
+  const { c } = styles;
+  const color = variant === "solid" ? c.accentForeground : variant === "calm" ? styles.action : variant === "ghost" ? c.foregroundMuted : c.foreground;
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label ?? icon}
+      disabled={disabled}
+      onPress={onPress}
+      {...hover}
+      style={({ pressed }) => ({
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 6,
+        height: 30,
+        paddingHorizontal: label ? 11 : 8,
+        borderRadius: 8,
+        backgroundColor: variant === "solid" ? c.accent : hovered || (pressed && variant === "ghost") ? c.border : variant === "ghost" ? "transparent" : c.surface2,
+        opacity: disabled ? 0.5 : pressed ? 0.8 : 1,
+      })}
+    >
+      {icon ? <TablerIcon name={icon} size={15} color={color} /> : null}
+      {label ? <Text style={{ color, fontSize: 13, fontWeight: "600" }}>{label}</Text> : null}
+    </Pressable>
+  );
+}
+
+// Sentence case, with the count as quiet text.
+export function SectionHeader({ icon, title, count }: { icon: IconName; title: string; count: number }) {
+  const styles = useStyles();
+  return (
+    <View style={[styles.row, { marginBottom: 10 }]}>
+      <TablerIcon name={icon} size={15} />
+      <Text style={{ color: styles.c.foreground, fontSize: 13, fontWeight: "600" }}>
+        {title}
+        <Text style={{ color: styles.c.foregroundMuted, fontWeight: "400" }}> · {count}</Text>
+      </Text>
+    </View>
+  );
+}
+
+// Choice chips for options and filters: the only pills, because they're tappable.
+export function Toggle({ label, active, onPress }: { label: string; active: boolean; onPress: () => void }) {
+  const { c } = useStyles();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: active }}
+      onPress={onPress}
+      style={{ paddingVertical: 4, paddingHorizontal: 10, borderRadius: 14, borderWidth: 1, borderColor: active ? c.accent : c.border, backgroundColor: active ? c.accent : "transparent" }}
+    >
+      <Text style={{ color: active ? c.accentForeground : c.foreground, fontSize: 12 }}>{label}</Text>
+    </Pressable>
+  );
+}

package/index.client.tsx

@@ -0,0 +1,36 @@
+import type { PluginClientContext, PluginScreenProps, PluginSidebarItemProps } from "@getpaseo/plugin/client";
+import { SidebarRow } from "@getpaseo/plugin/client/ui";
+import { Text } from "react-native";
+import { AttentionScreen } from "./client/attention-screen";
+import { CoverageSettings } from "./client/coverage-settings";
+import { useAttention } from "./client/data";
+import { ICONS } from "./client/icons";
+
+// The count, visible from anywhere in Paseo [ATT-09].
+function SidebarItem({ theme, currentScreen, openScreen }: PluginSidebarItemProps) {
+  const { data } = useAttention();
+  const count = data?.count ?? 0;
+  return (
+    <SidebarRow
+      icon={ICONS.logo}
+      label="Attention"
+      active={currentScreen?.screenId === "attention"}
+      onPress={() => openScreen({ screenId: "attention" })}
+      trailing={
+        count > 0 ? (
+          <Text style={{ color: data?.feeds.live.error ? theme.colors.statusDanger : theme.colors.foregroundMuted, fontSize: 12 }}>{count}</Text>
+        ) : undefined
+      }
+    />
+  );
+}
+
+// One screen for everything that needs me [ATT-01].
+export default function contribute(client: PluginClientContext) {
+  // Settings → Plugins → Attention Span, also opened from the screen's gear and the setup checklist [SRC-02].
+  client.addSettingsScreen({ id: "coverage", title: "Attention Span", icon: ICONS.logo, Component: CoverageSettings });
+  const Screen = (props: PluginScreenProps) => <AttentionScreen {...props} openSettings={() => client.openSettings("coverage")} />;
+  client.addScreen({ id: "attention", title: "Attention Span", Component: Screen });
+  client.addSidebarHeaderItem({ id: "attention", title: "Attention Span", Component: SidebarItem });
+  return () => {};
+}

package/index.server.ts

@@ -0,0 +1,49 @@
+import type { PluginServerContext } from "@getpaseo/plugin/server";
+import { claimIssue, closePullRequest, mergePullRequest, react, rerunFailed, setAutoMerge, setReady, unclaimIssue, updateBranch } from "./server/actions";
+import { defaultBranch, sessionContext } from "./server/context";
+import { itemDetails } from "./server/details";
+import { FIXTURE_CONTEXT, fixtureDetails } from "./server/fixture";
+import { FIXTURE } from "./server/gh";
+import { checkCoverage, configStatus, setupStatus } from "./server/setup";
+import { AttentionService } from "./server/service";
+import type { FeedId } from "./shared/attention";
+import * as rpc from "./shared/rpc";
+
+export default function contribute(server: PluginServerContext) {
+  const attention = new AttentionService();
+  const started = attention.start().catch((error) => console.error("Attention Span failed to start:", error));
+  const ready = <T>(work: () => Promise<T>) => started.then(work);
+
+  // After a change on GitHub, refresh in the background so the list catches up. Only a merge changes History.
+  const thenRefresh = async (work: Promise<void>, feeds: FeedId[] = ["live"]) => {
+    await work;
+    for (const feed of feeds) void attention.refresh(feed).catch(() => {});
+    return { ok: true as const };
+  };
+
+  // The app asks for the list on load and every few minutes; its Paseo connection lets refreshes see my projects [NXT-08].
+  server.handle(rpc.getAttention, ({ refresh }, { paseo }) => ready(() => (attention.connect(paseo), attention.get(refresh))));
+  server.handle(rpc.dismissItem, ({ key }) => ready(() => attention.dismiss(key)));
+  server.handle(rpc.undismissItem, ({ key }) => ready(() => attention.undismiss(key)));
+  server.handle(rpc.restoreDismissed, () => ready(() => attention.restoreDismissed()));
+  server.handle(rpc.setCodeRepo, ({ issueRepo, codeRepo }) => ready(() => attention.setCodeRepo(issueRepo, codeRepo)));
+  server.handle(rpc.setupStatus, () => setupStatus());
+  server.handle(rpc.getCoverage, () => configStatus());
+  server.handle(rpc.checkCoverage, ({ kind, name }) => checkCoverage(kind, name));
+  server.handle(rpc.setCoverage, ({ orgs, repos }) => ready(() => attention.setCoverage(orgs, repos)).then(() => ({ ok: true as const })));
+  server.handle(rpc.setScopes, ({ scopes }) => ready(() => attention.setScopes(scopes)).then(() => ({ ok: true as const })));
+  server.handle(rpc.updateBranch, ({ target }) => thenRefresh(updateBranch(target)));
+  server.handle(rpc.mergePullRequest, ({ target }) => thenRefresh(mergePullRequest(target), ["live", "history"]));
+  server.handle(rpc.closePullRequest, ({ target, comment }) => thenRefresh(closePullRequest(target, comment)));
+  server.handle(rpc.claimIssue, ({ target }) => thenRefresh(claimIssue(target)));
+  server.handle(rpc.unclaimIssue, ({ target }) => thenRefresh(unclaimIssue(target)));
+  server.handle(rpc.setReady, ({ target, ready }) => thenRefresh(setReady(target, ready)));
+  server.handle(rpc.setAutoMerge, ({ target, on }) => thenRefresh(setAutoMerge(target, on)));
+  server.handle(rpc.react, ({ subjectIds, on }) => thenRefresh(react(subjectIds, on)));
+  server.handle(rpc.rerunFailed, ({ repo, runIds }) => thenRefresh(rerunFailed(repo, runIds)));
+  server.handle(rpc.itemDetails, ({ subject, target, checks }) => (FIXTURE ? Promise.resolve(fixtureDetails(subject, target, checks)) : itemDetails(subject, target, checks)));
+  server.handle(rpc.defaultBranch, async ({ repo }) => ({ name: FIXTURE ? "main" : await defaultBranch(repo) }));
+  server.handle(rpc.sessionContext, async ({ kind, target }) => ({ context: FIXTURE ? FIXTURE_CONTEXT : await sessionContext(kind, target) }));
+
+  return () => attention.stop();
+}

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@andrioid/paseo-attention-span",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "For when your attention is spread thin: the GitHub issues and pull requests waiting on you, grouped by why, with one-tap Paseo sessions.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/andrioid/paseo-attention-span.git"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "type": "module",
+  "files": [
+    "paseo-plugin.json",
+    "OVERVIEW.md",
+    "index.client.tsx",
+    "index.server.ts",
+    "client/",
+    "server/",
+    "shared/",
+    "!**/*.test.ts",
+    "assets/",
+    "docs/screenshots/desktop-dark-doing.png",
+    "docs/screenshots/phone-dark-doing.png",
+    "docs/screenshots/desktop-dark-next-up.png"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "check": "npm run typecheck && npm test && node .claude/skills/requirements-yaml/scripts/check.mjs",
+    "preview": "sh preview/run.sh",
+    "screenshots": "sh preview/screenshots.sh"
+  },
+  "devDependencies": {
+    "@getpaseo/plugin": "0.13.0",
+    "@tanstack/react-query": "^5.90.11",
+    "@types/node": "^24.0.0",
+    "@types/react": "~19.2.0",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
+    "typescript": "^5.9.3",
+    "vitest": "^3.2.4",
+    "zod": "^4.4.3"
+  }
+}

package/paseo-plugin.json

@@ -0,0 +1,14 @@
+{
+  "id": "attention-span",
+  "name": "Attention Span",
+  "description": "For when your attention is spread thin: the GitHub issues and pull requests waiting on you, grouped by why, with one-tap Paseo sessions.",
+  "icon": "assets/icon.png",
+  "media": [
+    "docs/screenshots/desktop-dark-doing.png",
+    "docs/screenshots/phone-dark-doing.png",
+    "docs/screenshots/desktop-dark-next-up.png"
+  ],
+  "requirements": {
+    "paseo": ">=0.13.0"
+  }
+}

package/server/actions.ts

@@ -0,0 +1,90 @@
+import type { Target } from "../shared/attention";
+import { graphql, runGh } from "./gh";
+
+// Each action runs only from an explicit tap in Attention Span [SAFE-01].
+
+function pullRequestId(target: Target): string {
+  if (target.kind !== "pr" || !target.id) throw new Error(`${target.repo}#${target.number} is not a pull request.`);
+  return target.id;
+}
+
+// GitHub's "Update branch", rebasing onto the base [UPS-03].
+export async function updateBranch(target: Target): Promise<void> {
+  await graphql(
+    `mutation($id: ID!, $oid: GitObjectID) {
+      updatePullRequestBranch(input: { pullRequestId: $id, expectedHeadOid: $oid, updateMethod: REBASE }) { clientMutationId }
+    }`,
+    { id: pullRequestId(target), oid: target.headRefOid ?? null },
+  );
+}
+
+// The expected head guards against merging commits Attention Span hasn't seen [PRS-04].
+export async function mergePullRequest(target: Target): Promise<void> {
+  await graphql(
+    `mutation($id: ID!, $method: PullRequestMergeMethod!, $oid: GitObjectID) {
+      mergePullRequest(input: { pullRequestId: $id, mergeMethod: $method, expectedHeadOid: $oid }) { clientMutationId }
+    }`,
+    { id: pullRequestId(target), method: (target.mergeMethod ?? "squash").toUpperCase(), oid: target.headRefOid ?? null },
+  );
+}
+
+// Close a stale draft; comment only when I wrote one [PRS-07].
+export async function closePullRequest(target: Target, comment?: string): Promise<void> {
+  const id = pullRequestId(target);
+  if (comment?.trim()) {
+    await graphql(`mutation($id: ID!, $body: String!) { addComment(input: { subjectId: $id, body: $body }) { clientMutationId } }`, {
+      id,
+      body: comment.trim(),
+    });
+  }
+  await graphql(`mutation($id: ID!) { closePullRequest(input: { pullRequestId: $id }) { clientMutationId } }`, { id });
+}
+
+// Assign me, so teammates see the issue is taken [NXT-05].
+export async function claimIssue(target: Target): Promise<void> {
+  const { code, stderr } = await runGh(["issue", "edit", String(target.number), "--repo", target.repo, "--add-assignee", "@me"]);
+  if (code !== 0) throw new Error(stderr.trim() || "Claiming the issue failed");
+}
+
+// Hand an assigned issue back; also undoes a claim [NXT-07].
+export async function unclaimIssue(target: Target): Promise<void> {
+  const { code, stderr } = await runGh(["issue", "edit", String(target.number), "--repo", target.repo, "--remove-assignee", "@me"]);
+  if (code !== 0) throw new Error(stderr.trim() || "Unclaiming the issue failed");
+}
+
+// Ready for review, or back to draft for Undo [PRS-11].
+export async function setReady(target: Target, ready: boolean): Promise<void> {
+  const mutation = ready ? "markPullRequestReadyForReview" : "convertPullRequestToDraft";
+  await graphql(`mutation($id: ID!) { ${mutation}(input: { pullRequestId: $id }) { clientMutationId } }`, { id: pullRequestId(target) });
+}
+
+// GitHub merges once checks pass; the expected head guards like Merge does [PRS-10].
+export async function setAutoMerge(target: Target, on: boolean): Promise<void> {
+  if (!on) {
+    await graphql(`mutation($id: ID!) { disablePullRequestAutoMerge(input: { pullRequestId: $id }) { clientMutationId } }`, { id: pullRequestId(target) });
+    return;
+  }
+  await graphql(
+    `mutation($id: ID!, $method: PullRequestMergeMethod!, $oid: GitObjectID) {
+      enablePullRequestAutoMerge(input: { pullRequestId: $id, mergeMethod: $method, expectedHeadOid: $oid }) { clientMutationId }
+    }`,
+    { id: pullRequestId(target), method: (target.mergeMethod ?? "squash").toUpperCase(), oid: target.headRefOid ?? null },
+  );
+}
+
+// 👍 the comments I picked, which clears them as mentions; or take it back for Undo [MEN-07].
+export async function react(subjectIds: string[], on: boolean): Promise<void> {
+  if (subjectIds.length === 0) return;
+  const mutation = on ? "addReaction" : "removeReaction";
+  const fields = subjectIds.map((_, index) => `r${index}: ${mutation}(input: { subjectId: $s${index}, content: THUMBS_UP }) { clientMutationId }`);
+  const variables = subjectIds.map((_, index) => `$s${index}: ID!`).join(", ");
+  await graphql(`mutation(${variables}) {\n${fields.join("\n")}\n}`, Object.fromEntries(subjectIds.map((id, index) => [`s${index}`, id])));
+}
+
+// Rerun only the failed jobs of each run [PRS-09].
+export async function rerunFailed(repo: string, runIds: number[]): Promise<void> {
+  for (const id of runIds) {
+    const { code, stderr } = await runGh(["run", "rerun", String(id), "--failed", "--repo", repo]);
+    if (code !== 0) throw new Error(stderr.trim() || `Rerunning run ${id} failed`);
+  }
+}