@yannelli/paseo-linear-plugin 1.0.1 → 1.1.0-alpha.0

package/client/pill.tsx

@@ -0,0 +1,394 @@
+import type {
+  PluginButtonContentProps,
+  PluginButtonRegistration,
+  PluginClientContext,
+} from "@getpaseo/plugin/client";
+import { useAgent, usePaseo, useRpc, useSettings } from "@getpaseo/plugin/client";
+import { ScrollView, TextInput, useToast } from "@getpaseo/plugin/client/react-native";
+import { keepPreviousData, useMutation, useQuery } from "@tanstack/react-query";
+import { type ComponentType, useEffect, useMemo, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import { deriveActivity, type TimelineItemLike } from "../shared/activity";
+import { searchIssuesRpc } from "../shared/issues";
+import { syncNowRpc } from "../shared/live";
+import { AGENT_LABELS, isInternalAgent } from "../shared/prompts";
+import { accessRpc, linearSettings, projectEnabled } from "../shared/settings";
+import { progressByKey } from "../shared/todo-sync";
+import { currentAccess, onAccessChange, publishAccess } from "./access";
+import { KeyScopeProvider } from "./key-scope";
+import { MONO } from "./live-issues";
+import { PluginIcon } from "./plugin-icon";
+import { useIssue } from "./queries";
+import { focusIssue, panelScope } from "./store";
+import { Button, errorMessage, StateIcon, type Theme } from "./ui";
+
+type Agent = Awaited<
+  ReturnType<PluginClientContext["paseo"]["agents"]["list"]>
+>["entries"][number]["agent"];
+
+const ACCESS_POLL_MS = 60_000;
+
+// Paseo marks delegated sub-agents with this label; they share the parent's composer.
+const PARENT_LABEL = "paseo.parent-agent-id";
+
+type ContentProps = PluginButtonContentProps & { context: "agent"; agentId: string };
+type Open = (panel: string, workspaceId: string, agentId?: string) => void;
+
+function asAgentContent(Component: ComponentType<ContentProps>) {
+  return function AgentContent(props: PluginButtonContentProps) {
+    return props.context === "agent" ? <Component {...props} /> : null;
+  };
+}
+
+function useTodos(agentId: string, cwd: string) {
+  const paseo = usePaseo();
+  return useQuery({
+    queryKey: ["linear", "pill-todos", agentId],
+    queryFn: async () => {
+      const page = await paseo.agents
+        .ref(agentId)
+        .timeline.refetch({ direction: "tail", limit: 200, projection: "projected" });
+      const items = page.entries.map((entry) => entry.item as unknown as TimelineItemLike);
+      return deriveActivity(items, cwd).todos;
+    },
+    refetchInterval: 5_000,
+  });
+}
+
+function textStyles(theme: Theme, compact: boolean) {
+  const { colors } = theme;
+  return {
+    body: { width: compact ? ("100%" as const) : 320, gap: 6 },
+    title: { color: colors.foreground, fontSize: 13, fontWeight: "600" as const, flexShrink: 1 },
+    plain: { color: colors.foreground, fontSize: 13, flex: 1, minWidth: 0 },
+    child: { color: colors.foreground, fontSize: 12, flex: 1 },
+    // Keys never wrap, and a fixed column lines the titles up.
+    key: { color: colors.foregroundMuted, fontSize: 12, fontFamily: MONO, flexShrink: 0, minWidth: 64 },
+    muted: { color: colors.foregroundMuted, fontSize: 12 },
+    danger: { color: colors.statusDanger, fontSize: 12 },
+    row: { flexDirection: "row" as const, alignItems: "center" as const, gap: 8, paddingVertical: 5 },
+    track: { width: 40, height: 3, borderRadius: 2, backgroundColor: colors.border },
+    fill: { height: 3, borderRadius: 2, backgroundColor: colors.accent },
+    actions: { flexDirection: "row" as const, flexWrap: "wrap" as const, gap: 6, paddingTop: 4 },
+    list: { maxHeight: 240 },
+    option: { borderRadius: 6, paddingHorizontal: 6 },
+  };
+}
+
+function LinkedIssue(props: ContentProps & { open: Open }) {
+  const { theme, layout, agentId, workspaceId, close, open } = props;
+  const identifier = useAgent(agentId, (agent) => agent.labels[AGENT_LABELS.issue] ?? null);
+  const cwd = useAgent(agentId, (agent) => agent.cwd);
+  const settings = useSettings(linearSettings);
+  const issue = useIssue(identifier);
+  const todos = useTodos(agentId, cwd ?? "");
+  const sync = useRpc(syncNowRpc);
+  const toast = useToast();
+  const syncNow = useMutation({
+    mutationFn: () => sync({ agentId }),
+    onSuccess: ({ moves, skipped }) => {
+      const message = moves.length
+        ? `Moved ${moves.map((move) => `${move.identifier} to ${move.to.name}`).join(", ")}`
+        : (skipped ?? "Linear is already up to date");
+      toast.show(message, { variant: moves.length ? "success" : "default" });
+      void issue.refetch();
+    },
+  });
+  const styles = useMemo(() => textStyles(theme, layout.compact), [theme, layout.compact]);
+  const progress = useMemo(() => progressByKey(todos.data ?? []), [todos.data]);
+  const live = settings.status === "ready" && settings.values.live;
+  if (!identifier) return null;
+  const data = issue.data;
+  return (
+    <View style={styles.body}>
+      <View style={styles.row}>
+        {data ? <StateIcon state={data.state} size={16} /> : null}
+        <Text style={styles.key}>{identifier}</Text>
+        <Text numberOfLines={1} style={styles.title}>
+          {data?.title ?? (issue.isError ? "Issue unavailable" : "Loading…")}
+        </Text>
+      </View>
+      {issue.isError ? <Text style={styles.danger}>{errorMessage(issue.error)}</Text> : null}
+      <ScrollView style={styles.list}>
+        {(data?.children ?? []).map((child) => {
+          const entry = progress.get(child.identifier.toUpperCase());
+          const ratio = entry ? entry.completed / entry.total : 0;
+          return (
+            <View key={child.id} style={styles.row}>
+              <StateIcon state={child.state} size={14} />
+              <Text numberOfLines={1} style={styles.key}>
+                {child.identifier}
+              </Text>
+              <Text numberOfLines={1} style={styles.child}>
+                {child.title}
+              </Text>
+              <View style={styles.track}>
+                <View style={[styles.fill, { width: `${Math.round(ratio * 100)}%` }]} />
+              </View>
+            </View>
+          );
+        })}
+      </ScrollView>
+      <View style={styles.actions}>
+        {live && live.enabled ? (
+          <Button
+            theme={theme}
+            size="xs"
+            icon="Radar"
+            label="Open Linear Live"
+            onPress={() => {
+              close();
+              open("live", workspaceId, agentId);
+            }}
+          />
+        ) : null}
+        <Button
+          theme={theme}
+          size="xs"
+          icon={PluginIcon}
+          label="Open issue"
+          onPress={() => {
+            focusIssue(panelScope(workspaceId), identifier);
+            close();
+            open("issues", workspaceId);
+          }}
+        />
+        {live && live.syncTodos ? (
+          <Button
+            theme={theme}
+            size="xs"
+            icon="RefreshCw"
+            label="Sync now"
+            busy={syncNow.isPending}
+            onPress={() => syncNow.mutate()}
+          />
+        ) : null}
+      </View>
+      {syncNow.error ? <Text style={styles.danger}>{errorMessage(syncNow.error)}</Text> : null}
+    </View>
+  );
+}
+
+function LinkedIssueScoped(props: ContentProps & { open: Open }) {
+  const project = useAgent(props.agentId, (agent) => agent.labels[AGENT_LABELS.project] ?? null);
+  return (
+    <KeyScopeProvider projectId={project}>
+      <LinkedIssue {...props} />
+    </KeyScopeProvider>
+  );
+}
+
+function useDebounced(value: string, delay: number) {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounced;
+}
+
+// Agents not started from an issue: find one and send its snapshot as the next message.
+function SendIssue({ theme, layout, agentId, close }: ContentProps) {
+  const paseo = usePaseo();
+  const search = useRpc(searchIssuesRpc);
+  const toast = useToast();
+  const [query, setQuery] = useState("");
+  const term = useDebounced(query.trim(), 250);
+  const results = useQuery({
+    queryKey: ["linear", "pill-search", term],
+    queryFn: () => search({ query: term }),
+    placeholderData: keepPreviousData,
+  });
+  const send = useMutation({
+    mutationFn: async (item: { identifier: string; text: string }) => {
+      await paseo.agents.ref(agentId).send(item.text);
+      return item.identifier;
+    },
+    onSuccess: (identifier) => {
+      toast.show(`Sent ${identifier} to the agent`, { variant: "success" });
+      close();
+    },
+  });
+  const styles = useMemo(() => textStyles(theme, layout.compact), [theme, layout.compact]);
+  const input = useMemo(
+    () => ({
+      color: theme.colors.foreground,
+      backgroundColor: theme.colors.surface2,
+      borderColor: theme.colors.border,
+      borderWidth: 1,
+      borderRadius: 8,
+      paddingHorizontal: 10,
+      paddingVertical: 7,
+      fontSize: 13,
+    }),
+    [theme],
+  );
+  return (
+    <View style={styles.body}>
+      <TextInput
+        accessibilityLabel="Search Linear issues"
+        value={query}
+        onChangeText={setQuery}
+        autoFocus={!layout.compact}
+        autoCapitalize="none"
+        autoCorrect={false}
+        placeholder="Search by key or title"
+        placeholderTextColor={theme.colors.foregroundMuted}
+        style={input}
+      />
+      {results.error ? <Text style={styles.danger}>{errorMessage(results.error)}</Text> : null}
+      {send.error ? <Text style={styles.danger}>{errorMessage(send.error)}</Text> : null}
+      <ScrollView keyboardShouldPersistTaps="handled" style={styles.list}>
+        {(results.data?.items ?? []).slice(0, 20).map((item) => (
+          <Pressable
+            key={item.id}
+            accessibilityRole="button"
+            accessibilityLabel={`Send ${item.identifier} to the agent`}
+            disabled={send.isPending}
+            onPress={() => send.mutate(item)}
+            style={({ pressed }) => [
+              styles.row,
+              styles.option,
+              pressed ? { backgroundColor: theme.colors.surface2 } : null,
+            ]}
+          >
+            <Text numberOfLines={1} style={styles.key}>
+              {item.identifier}
+            </Text>
+            <Text numberOfLines={1} style={styles.plain}>
+              {item.title}
+            </Text>
+          </Pressable>
+        ))}
+      </ScrollView>
+      {results.data?.items.length === 0 ? (
+        <Text style={styles.muted}>No matching issues.</Text>
+      ) : null}
+    </View>
+  );
+}
+
+export function contributeComposerPills(client: PluginClientContext) {
+  const pills = new Map<
+    string,
+    { registration: PluginButtonRegistration; identifier: string | null }
+  >();
+  const lifetime = new AbortController();
+  const open: Open = (panel, workspaceId, agentId) =>
+    client.openPanel(panel, agentId ? { workspaceId, agentId } : { workspaceId });
+  const Linked = asAgentContent((props) => <LinkedIssueScoped {...props} open={open} />);
+  const Search = asAgentContent(SendIssue);
+
+  const agents = new Map<string, Agent>();
+  const projects = new Map<string, string | null>();
+  const loading = new Set<string>();
+  const remove = (agentId: string) => {
+    pills.get(agentId)?.registration.remove();
+    pills.delete(agentId);
+  };
+  const applyAll = () => {
+    for (const agent of agents.values()) apply(agent);
+  };
+  // A workspace never changes project, so each one is looked up once.
+  const projectOf = (workspaceId: string): string | null | undefined => {
+    if (projects.has(workspaceId)) return projects.get(workspaceId);
+    if (!loading.has(workspaceId)) {
+      loading.add(workspaceId);
+      void client.paseo.workspaces
+        .ref(workspaceId)
+        .refresh()
+        .then((workspace) => projects.set(workspaceId, workspace?.projectId ?? null))
+        .catch(() => projects.set(workspaceId, null))
+        .finally(() => {
+          loading.delete(workspaceId);
+          applyAll();
+        });
+    }
+    return undefined;
+  };
+  const register = (agent: Agent) => {
+    agents.set(agent.id, agent);
+    apply(agent);
+  };
+  const forget = (agentId: string) => {
+    agents.delete(agentId);
+    remove(agentId);
+  };
+  const apply = (agent: Agent) => {
+    if (lifetime.signal.aborted) return;
+    const labels = agent.labels ?? {};
+    if (!agent.workspaceId || labels[PARENT_LABEL] || isInternalAgent(labels) || agent.archivedAt) {
+      remove(agent.id);
+      return;
+    }
+    const projectId = projectOf(agent.workspaceId);
+    const access = currentAccess();
+    if (projectId === undefined || !access) return;
+    if (!projectEnabled(access, projectId)) {
+      remove(agent.id);
+      return;
+    }
+    const identifier = labels[AGENT_LABELS.issue] ?? null;
+    if (pills.get(agent.id)?.identifier === identifier) return;
+    remove(agent.id);
+    const registration = client.addComposerPill({
+      id: "linear",
+      workspaceId: agent.workspaceId,
+      agentId: agent.id,
+      button: identifier
+        ? {
+            title: `Linear issue ${identifier}`,
+            icon: PluginIcon,
+            label: identifier,
+            behavior: { kind: "popover", Content: Linked },
+          }
+        : {
+            title: "Send a Linear issue to this agent",
+            icon: PluginIcon,
+            label: "Linear",
+            behavior: { kind: "popover", Content: Search },
+          },
+    });
+    pills.set(agent.id, { registration, identifier });
+  };
+  const removeAll = () => {
+    for (const agentId of [...pills.keys()]) remove(agentId);
+  };
+  // Settings screens publish switch changes at once; the poll covers other devices.
+  const readAccess = () =>
+    client
+      .rpc(accessRpc, {})
+      .then(publishAccess)
+      .catch(() => undefined);
+  const stopListening = onAccessChange(applyAll);
+  const poll = setInterval(() => void readAccess(), ACCESS_POLL_MS);
+  void readAccess();
+  void client.paseo.agents
+    .list({ subscribe: {}, signal: lifetime.signal })
+    .then(({ subscription }) => {
+      subscription.subscribe({
+        snapshot: ({ entries }) => {
+          removeAll();
+          agents.clear();
+          for (const { agent } of entries) register(agent);
+          void readAccess();
+        },
+        update: (message) => {
+          if (message.type !== "agent_update") return;
+          const update = message.payload;
+          if (update.kind === "upsert") register(update.agent);
+          else forget(update.agentId);
+        },
+      });
+      return undefined;
+    })
+    .catch((error: unknown) => {
+      if (!lifetime.signal.aborted) console.error("Linear pills could not watch agents", error);
+    });
+  return () => {
+    lifetime.abort();
+    clearInterval(poll);
+    stopListening();
+    removeAll();
+  };
+}

package/client/plugin-icon.tsx

@@ -0,0 +1,75 @@
+import { useSettings } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useEffect, useMemo } from "react";
+import { Image, Platform } from "react-native";
+import { BUILT_IN_ICON, type IconSettings, iconMarkup, paintColor } from "../shared/custom-icon";
+import { linearSettings } from "../shared/settings";
+import { svgDataUri } from "./provider-icon";
+import type { Theme } from "./ui";
+import { readStored, writeStored } from "./web";
+
+// The plugin's icon in pills, the sidebar, and plugin screens. Without an SVG, and in native
+// apps, which cannot draw SVG images from plugins, it is the chosen built-in icon.
+
+// Panels and Command Center items take a Lucide name when they register, outside React.
+// Components that read the settings share the chosen name here. Paseo keeps the icon an open
+// tab got, so the web app remembers the name and registers with it on the next start.
+const MENU_ICON_KEY = "paseo-linear-plugin:menu-icon";
+let menuIcon = readStored(MENU_ICON_KEY) ?? BUILT_IN_ICON;
+
+/** The menu icon to register with first: the last one chosen on this device. */
+export function startMenuIcon(): string {
+  return menuIcon;
+}
+const menuListeners = new Set<(name: string) => void>();
+
+export function publishMenuIcon(name: string): void {
+  if (name === menuIcon) return;
+  menuIcon = name;
+  writeStored(MENU_ICON_KEY, name);
+  for (const listener of menuListeners) listener(name);
+}
+
+export function onMenuIconChange(listener: (name: string) => void): () => void {
+  menuListeners.add(listener);
+  return () => menuListeners.delete(listener);
+}
+
+/** The saved icon settings, or null while they load. Shares the menu icon on the way. */
+export function useIconSettings(): IconSettings | null {
+  const settings = useSettings(linearSettings);
+  const icon = settings.status === "ready" ? settings.values.icon : null;
+  const menu = icon?.menu;
+  useEffect(() => {
+    if (menu) publishMenuIcon(menu);
+  }, [menu]);
+  return icon;
+}
+
+export interface PluginIconProps {
+  size: number;
+  /** The color Paseo gives the icon in this place. */
+  color: string;
+  theme?: Theme | null;
+}
+
+/** Draws icon settings, saved or not yet saved. */
+export function IconGlyph(props: PluginIconProps & { icon: IconSettings | null }) {
+  const { icon, size, color } = props;
+  const accent = props.theme?.colors.accent ?? color;
+  const paint = icon ? paintColor(icon, { ink: color, accent }) : null;
+  const svg = Platform.OS === "web" ? (icon?.svg ?? "") : "";
+  const solid = icon?.solid === true;
+  const source = useMemo(() => {
+    const markup = svg ? iconMarkup(svg, { ink: color, paint, solid }) : null;
+    return markup ? { uri: svgDataUri(markup, color) } : null;
+  }, [svg, color, paint, solid]);
+  const style = useMemo(() => ({ width: size, height: size }), [size]);
+  if (!source) return <Icon name={icon?.menu ?? BUILT_IN_ICON} size={size} color={paint ?? color} />;
+  return <Image source={source} style={style} resizeMode="contain" accessibilityIgnoresInvertColors />;
+}
+
+/** The plugin icon from the saved settings. The built-in icon shows while they load. */
+export function PluginIcon(props: PluginIconProps) {
+  return <IconGlyph {...props} icon={useIconSettings()} />;
+}

package/client/project-init.tsx

@@ -0,0 +1,192 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsRow,
+  SettingsSection,
+  SettingsSwitch,
+} from "@getpaseo/plugin/client/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import { initStartRpc, initStatusRpc } from "../shared/live";
+import {
+  applyProposal,
+  type FieldDiff,
+  type ProposalField,
+  proposalDiffs,
+} from "../shared/project-setup";
+import type { ProjectConfig } from "../shared/settings";
+import { knowledgeKey } from "./project-knowledge";
+import { Button, errorMessage, type Theme } from "./ui";
+
+// Setup runs on the daemon. Remember the job per project so leaving the screen keeps it.
+const jobsByProject = new Map<string, string>();
+
+export function ProjectSetup(props: {
+  theme: Theme;
+  config: ProjectConfig;
+  change(patch: Partial<ProjectConfig>): void;
+  /** Opens the setup agent while it runs; absent on hosts without navigation. */
+  openAgent?: (agentId: string) => void;
+}) {
+  const { theme, config, change, openAgent } = props;
+  const start = useRpc(initStartRpc);
+  const status = useRpc(initStatusRpc);
+  const [jobId, setJobId] = useState(() => jobsByProject.get(config.projectId) ?? null);
+  useEffect(() => setJobId(jobsByProject.get(config.projectId) ?? null), [config.projectId]);
+  const begin = useMutation({
+    mutationFn: () => start({ projectId: config.projectId, rootPath: config.rootPath }),
+    onSuccess: ({ job }) => {
+      jobsByProject.set(config.projectId, job.id);
+      setJobId(job.id);
+    },
+  });
+  const job = useQuery({
+    queryKey: ["linear", "init", jobId],
+    queryFn: () => status({ jobId: jobId ?? "" }),
+    enabled: jobId !== null,
+    refetchInterval: (query) => (query.state.data?.job?.status === "running" ? 3_000 : false),
+  });
+  const state = job.data?.job ?? null;
+  const proposal = job.data?.proposal ?? null;
+  // The daemon saved the agent's area summaries; show them in Project knowledge.
+  const queries = useQueryClient();
+  const finished = state?.status === "done";
+  useEffect(() => {
+    if (finished) void queries.invalidateQueries({ queryKey: knowledgeKey(config.projectId) });
+  }, [finished, queries, config.projectId]);
+  const diffs = useMemo(
+    () => (proposal ? proposalDiffs(config, proposal) : []),
+    [config, proposal],
+  );
+  const [rejected, setRejected] = useState<ReadonlySet<ProposalField>>(new Set());
+  const apply = useCallback(() => {
+    if (!proposal) return;
+    const chosen = new Set(diffs.map((diff) => diff.field).filter((f) => !rejected.has(f)));
+    change(applyProposal(proposal, chosen));
+    jobsByProject.delete(config.projectId);
+    setJobId(null);
+    setRejected(new Set());
+  }, [proposal, diffs, rejected, change, config.projectId]);
+  const dismiss = useCallback(() => {
+    jobsByProject.delete(config.projectId);
+    setJobId(null);
+  }, [config.projectId]);
+
+  const running = begin.isPending || state?.status === "running";
+  const failure = begin.error
+    ? errorMessage(begin.error)
+    : state?.status === "failed"
+      ? (state.error ?? "Setup failed")
+      : null;
+  return (
+    <SettingsSection title="Set up with an agent">
+      <SettingsCard>
+        <SettingsAction
+          label="Read this repository's guidelines"
+          hint="The daemon inspects the project first, and the agent starts from that project map. The agent reads AGENTS.md, CONTRIBUTING, scripts, and CI, then proposes instructions and steps, and describes each area for Project knowledge. It is told not to edit. You review each prompt change before it is used."
+          actionLabel={running ? "Reading…" : proposal ? "Run again" : "Start"}
+          disabled={running || !config.rootPath}
+          onPress={() => begin.mutate()}
+        />
+        {running ? (
+          <SettingsRow
+            label={state?.agentId ? "The setup agent is reading the repository." : "Inspecting the project…"}
+          >
+            {state?.agentId && openAgent ? (
+              <View style={ACTIONS_STYLE}>
+                <Button
+                  theme={theme}
+                  icon="Bot"
+                  label="Open agent"
+                  onPress={() => openAgent(state.agentId ?? "")}
+                />
+              </View>
+            ) : null}
+          </SettingsRow>
+        ) : null}
+        {failure ? <SettingsRow label="Setup did not finish" error={failure} /> : null}
+        {state?.status === "done" && diffs.length === 0 ? (
+          <SettingsAction
+            label="The agent found nothing new to add."
+            actionLabel="Dismiss"
+            onPress={dismiss}
+          />
+        ) : null}
+        {diffs.map((diff) => (
+          <ProposalRow
+            key={diff.field}
+            theme={theme}
+            diff={diff}
+            accepted={!rejected.has(diff.field)}
+            onToggle={(accepted) =>
+              setRejected((current) => {
+                const next = new Set(current);
+                if (accepted) next.delete(diff.field);
+                else next.add(diff.field);
+                return next;
+              })
+            }
+          />
+        ))}
+        {diffs.length > 0 ? (
+          <SettingsRow label="Accepted changes go into the draft. Save to keep them.">
+            <View style={ACTIONS_STYLE}>
+              <Button theme={theme} variant="primary" label="Use accepted changes" onPress={apply} />
+              <Button theme={theme} label="Dismiss" onPress={dismiss} />
+            </View>
+          </SettingsRow>
+        ) : null}
+      </SettingsCard>
+    </SettingsSection>
+  );
+}
+
+const ACTIONS_STYLE = { flexDirection: "row", gap: 8, marginTop: 8, flexWrap: "wrap" } as const;
+
+function ProposalRow(props: {
+  theme: Theme;
+  diff: FieldDiff;
+  accepted: boolean;
+  onToggle(accepted: boolean): void;
+}) {
+  const { colors } = props.theme;
+  const styles = useMemo(
+    () => ({
+      block: {
+        marginTop: 6,
+        padding: 10,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.surface2,
+        gap: 4,
+      },
+      caption: { color: colors.foregroundMuted, fontSize: 12 },
+      removed: { color: colors.foregroundMuted, fontSize: 13, lineHeight: 19 },
+      added: { color: colors.foreground, fontSize: 13, lineHeight: 19 },
+    }),
+    [colors],
+  );
+  const { diff } = props;
+  return (
+    <SettingsSwitch
+      label={diff.label}
+      hint={props.accepted ? "Accepted" : "Skipped"}
+      value={props.accepted}
+      onValueChange={props.onToggle}
+    >
+      {diff.current ? (
+        <View style={styles.block}>
+          <Text style={styles.caption}>Now</Text>
+          <Text style={styles.removed}>{diff.current}</Text>
+        </View>
+      ) : null}
+      <View style={styles.block}>
+        <Text style={styles.caption}>Proposed</Text>
+        <Text style={styles.added}>{diff.proposed}</Text>
+      </View>
+    </SettingsSwitch>
+  );
+}