@yannelli/paseo-linear-plugin 0.1.0 → 0.4.0

package/client/pickers.tsx

@@ -0,0 +1,238 @@
+import { Icon, Modal, TextInput } from "@getpaseo/plugin/client/react-native";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { LinearUser, WorkflowState } from "../shared/linear";
+import { PRIORITIES } from "../shared/linear";
+import { Avatar, OptionRow, PriorityIcon, StateIcon, type Theme, usePressableStyle } from "./ui";
+
+export interface PickerOption {
+  value: string;
+  label: string;
+  detail?: string;
+  leading?: ReactNode;
+}
+
+interface PickerListProps {
+  theme: Theme;
+  title: string;
+  options: readonly PickerOption[];
+  value: string | null;
+  searchable?: boolean;
+  onSelect(value: string): void;
+}
+
+const MODAL_CONTENT_STYLE = { padding: 12, gap: 4 } as const;
+const LIST_STYLE = { gap: 4 } as const;
+
+function PickerItem(props: {
+  theme: Theme;
+  option: PickerOption;
+  selected: boolean;
+  onSelect(value: string): void;
+}) {
+  const { option, onSelect } = props;
+  const press = useCallback(() => onSelect(option.value), [onSelect, option.value]);
+  return (
+    <OptionRow
+      theme={props.theme}
+      label={option.label}
+      detail={option.detail}
+      leading={option.leading}
+      selected={props.selected}
+      onPress={press}
+    />
+  );
+}
+
+function PickerList(props: PickerListProps) {
+  const { colors } = props.theme;
+  const [search, setSearch] = useState("");
+  const visible = useMemo(() => {
+    const needle = search.trim().toLowerCase();
+    if (!needle) return props.options;
+    return props.options.filter((option) =>
+      `${option.label} ${option.detail ?? ""}`.toLowerCase().includes(needle),
+    );
+  }, [props.options, search]);
+  const styles = useMemo(
+    () => ({
+      input: {
+        height: 36,
+        marginBottom: 6,
+        paddingHorizontal: 10,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.surface2,
+        color: colors.foreground,
+      },
+      empty: { color: colors.foregroundMuted, padding: 12 },
+    }),
+    [colors],
+  );
+  return (
+    <View style={LIST_STYLE}>
+      {props.searchable ? (
+        <TextInput
+          value={search}
+          onChangeText={setSearch}
+          placeholder="Filter"
+          placeholderTextColor={colors.foregroundMuted}
+          autoCapitalize="none"
+          accessibilityLabel={`Filter ${props.title.toLowerCase()}`}
+          style={styles.input}
+        />
+      ) : null}
+      {visible.map((option) => (
+        <PickerItem
+          key={option.value}
+          theme={props.theme}
+          option={option}
+          selected={option.value === props.value}
+          onSelect={props.onSelect}
+        />
+      ))}
+      {visible.length === 0 ? <Text style={styles.empty}>No matches</Text> : null}
+    </View>
+  );
+}
+
+// For surfaces outside a modal. Inside a modal, use PickerPage so sheets never nest.
+export function PickerModal(
+  props: PickerListProps & { icon: string; open: boolean; onClose(): void },
+) {
+  const { colors } = props.theme;
+  const { onClose } = props;
+  const icon = useMemo(
+    () => <Icon name={props.icon} size={18} color={colors.foreground} />,
+    [props.icon, colors.foreground],
+  );
+  const openChange = useCallback(
+    (next: boolean) => {
+      if (!next) onClose();
+    },
+    [onClose],
+  );
+  return (
+    <Modal title={props.title} icon={icon} open={props.open} onOpenChange={openChange}>
+      <Modal.Content contentContainerStyle={MODAL_CONTENT_STYLE}>
+        {props.open ? <PickerList {...props} /> : null}
+      </Modal.Content>
+    </Modal>
+  );
+}
+
+export function PickerPage(props: PickerListProps & { onBack(): void }) {
+  const { colors } = props.theme;
+  const styles = useMemo(
+    () =>
+      ({
+        root: { gap: 8 },
+        back: { flexDirection: "row", alignItems: "center", gap: 6, height: 32 },
+        title: { color: colors.foreground, fontSize: 14, fontWeight: "500" },
+      }) as const,
+    [colors],
+  );
+  return (
+    <View style={styles.root}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="Back"
+        onPress={props.onBack}
+        style={styles.back}
+      >
+        <Icon name="ChevronLeft" size={16} color={colors.foregroundMuted} />
+        <Text style={styles.title}>{props.title}</Text>
+      </Pressable>
+      <PickerList {...props} />
+    </View>
+  );
+}
+
+export const UNASSIGNED = "__unassigned__";
+
+export function stateOptions(states: readonly WorkflowState[]): PickerOption[] {
+  return states.map((state) => ({
+    value: state.id,
+    label: state.name,
+    leading: <StateIcon state={state} />,
+  }));
+}
+
+export function priorityOptions(theme: Theme): PickerOption[] {
+  return PRIORITIES.map((priority) => ({
+    value: String(priority.value),
+    label: priority.label,
+    leading: <PriorityIcon theme={theme} priority={priority.value} />,
+  }));
+}
+
+export function assigneeOptions(
+  theme: Theme,
+  users: readonly LinearUser[],
+  viewerId: string | null,
+): PickerOption[] {
+  const sorted = [...users].sort((a, b) => {
+    if (a.id === viewerId) return -1;
+    if (b.id === viewerId) return 1;
+    return a.displayName.localeCompare(b.displayName);
+  });
+  return [
+    { value: UNASSIGNED, label: "Unassigned", leading: <Avatar theme={theme} name={null} /> },
+    ...sorted.map((user) => ({
+      value: user.id,
+      label: user.id === viewerId ? `${user.displayName} (you)` : user.displayName,
+      detail: user.name !== user.displayName ? user.name : undefined,
+      leading: <Avatar theme={theme} name={user.displayName} />,
+    })),
+  ];
+}
+
+export function PropertyChip(props: {
+  theme: Theme;
+  label: string;
+  leading: ReactNode;
+  accessibilityLabel: string;
+  disabled?: boolean;
+  onPress(): void;
+}) {
+  const { colors } = props.theme;
+  const styles = useMemo(() => {
+    const idle = {
+      height: 30,
+      paddingHorizontal: 10,
+      borderRadius: 8,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 6,
+      borderWidth: 1,
+      borderColor: colors.border,
+      backgroundColor: colors.surface1,
+      opacity: props.disabled ? 0.6 : 1,
+    } as const;
+    return {
+      idle,
+      active: { ...idle, backgroundColor: colors.surface2 },
+      label: { color: colors.foreground, fontSize: 13, maxWidth: 180 },
+      chevron: { marginLeft: -2 },
+    };
+  }, [colors, props.disabled]);
+  const pressStyle = usePressableStyle(styles.idle, styles.active);
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={props.accessibilityLabel}
+      disabled={props.disabled}
+      onPress={props.onPress}
+      style={pressStyle}
+    >
+      {props.leading}
+      <Text numberOfLines={1} style={styles.label}>
+        {props.label}
+      </Text>
+      <View style={styles.chevron}>
+        <Icon name="ChevronDown" size={14} color={colors.foregroundMuted} />
+      </View>
+    </Pressable>
+  );
+}

package/client/provider-icon.tsx

@@ -0,0 +1,78 @@
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useMemo } from "react";
+import { Image, Platform } from "react-native";
+
+// Paseo's built-in provider marks, copied from the Paseo app (Apache-2.0). Plugins cannot use
+// react-native-svg, so the web app draws each mark as an SVG image. Native apps show Lucide icons.
+function svg(viewBox: string, rootAttributes: string, paths: string): string {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBox}" fill="currentColor" ${rootAttributes}>${paths}</svg>`;
+}
+
+const PROVIDER_SVGS: Record<string, string> = {
+  claude: svg(
+    "0 0 24 24",
+    `fill-rule="evenodd"`,
+    `<path d="M4.709 15.955l4.72-2.647.08-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.336-.972-.724-.491-.364-.462-.158-1.008.656-.722.881.06.225.061.893.686 1.908 1.476 2.491 1.833.365.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 01-.104-.729L6.283.134 6.696 0l.996.134.42.364.62 1.414 1.002 2.229 1.555 3.03.456.898.243.832.091.255h.158V9.01l.128-1.706.237-2.095.23-2.695.08-.76.376-.91.747-.492.584.28.48.685-.067.444-.286 1.851-.559 2.903-.364 1.942h.212l.243-.242.985-1.306 1.652-2.064.73-.82.85-.904.547-.431h1.033l.76 1.129-.34 1.166-1.064 1.347-.881 1.142-1.264 1.7-.79 1.36.073.11.188-.02 2.856-.606 1.543-.28 1.841-.315.833.388.091.395-.328.807-1.969.486-2.309.462-3.439.813-.042.03.049.061 1.549.146.662.036h1.622l3.02.225.79.522.474.638-.079.485-1.215.62-1.64-.389-3.829-.91-1.312-.329h-.182v.11l1.093 1.068 2.006 1.81 2.509 2.33.127.578-.322.455-.34-.049-2.205-1.657-.851-.747-1.926-1.62h-.128v.17l.444.649 2.345 3.521.122 1.08-.17.353-.608.213-.668-.122-1.374-1.925-1.415-2.167-1.143-1.943-.14.08-.674 7.254-.316.37-.729.28-.607-.461-.322-.747.322-1.476.389-1.924.315-1.53.286-1.9.17-.632-.012-.042-.14.018-1.434 1.967-2.18 2.945-1.726 1.845-.414.164-.717-.37.067-.662.401-.589 2.388-3.036 1.44-1.882.93-1.086-.006-.158h-.055L4.132 18.56l-1.13.146-.487-.456.061-.746.231-.243 1.908-1.312-.006.006z"/>`,
+  ),
+  codex: svg(
+    "0 0 24 24",
+    `fill-rule="evenodd"`,
+    `<path d="M21.55 10.004a5.416 5.416 0 00-.478-4.501c-1.217-2.09-3.662-3.166-6.05-2.66A5.59 5.59 0 0010.831 1C8.39.995 6.224 2.546 5.473 4.838A5.553 5.553 0 001.76 7.496a5.487 5.487 0 00.691 6.5 5.416 5.416 0 00.477 4.502c1.217 2.09 3.662 3.165 6.05 2.66A5.586 5.586 0 0013.168 23c2.443.006 4.61-1.546 5.361-3.84a5.553 5.553 0 003.715-2.66 5.488 5.488 0 00-.693-6.497v.001zm-8.381 11.558a4.199 4.199 0 01-2.675-.954c.034-.018.093-.05.132-.074l4.44-2.53a.71.71 0 00.364-.623v-6.176l1.877 1.069c.02.01.033.029.036.05v5.115c-.003 2.274-1.87 4.118-4.174 4.123zM4.192 17.78a4.059 4.059 0 01-.498-2.763c.032.02.09.055.131.078l4.44 2.53c.225.13.504.13.73 0l5.42-3.088v2.138a.068.068 0 01-.027.057L9.9 19.288c-1.999 1.136-4.552.46-5.707-1.51h-.001zM3.023 8.216A4.15 4.15 0 015.198 6.41l-.002.151v5.06a.711.711 0 00.364.624l5.42 3.087-1.876 1.07a.067.067 0 01-.063.005l-4.489-2.559c-1.995-1.14-2.679-3.658-1.53-5.63h.001zm15.417 3.54l-5.42-3.088L14.896 7.6a.067.067 0 01.063-.006l4.489 2.557c1.998 1.14 2.683 3.662 1.529 5.633a4.163 4.163 0 01-2.174 1.807V12.38a.71.71 0 00-.363-.623zm1.867-2.773a6.04 6.04 0 00-.132-.078l-4.44-2.53a.731.731 0 00-.729 0l-5.42 3.088V7.325a.068.068 0 01.027-.057L14.1 4.713c2-1.137 4.555-.46 5.707 1.513.487.833.664 1.809.499 2.757h.001zm-11.741 3.81l-1.877-1.068a.065.065 0 01-.036-.051V6.559c.001-2.277 1.873-4.122 4.181-4.12.976 0 1.92.338 2.671.954-.034.018-.092.05-.131.073l-4.44 2.53a.71.71 0 00-.365.623l-.003 6.173v.002zm1.02-2.168L12 9.25l2.414 1.375v2.75L12 14.75l-2.415-1.375v-2.75z"/>`,
+  ),
+  copilot: svg(
+    "0 0 512 416",
+    ``,
+    `<path fill-rule="nonzero" d="M181.33 266.143c0-11.497 9.32-20.818 20.818-20.818 11.498 0 20.819 9.321 20.819 20.818v38.373c0 11.497-9.321 20.818-20.819 20.818-11.497 0-20.818-9.32-20.818-20.818v-38.373zM308.807 245.325c-11.477 0-20.798 9.321-20.798 20.818v38.373c0 11.497 9.32 20.818 20.798 20.818 11.497 0 20.818-9.32 20.818-20.818v-38.373c0-11.497-9.32-20.818-20.818-20.818z"/><path d="M512.002 246.393v57.384c-.02 7.411-3.696 14.638-9.67 19.011C431.767 374.444 344.695 416 256 416c-98.138 0-196.379-56.542-246.33-93.21-5.975-4.374-9.65-11.6-9.671-19.012v-57.384a35.347 35.347 0 016.857-20.922l15.583-21.085c8.336-11.312 20.757-14.31 33.98-14.31 4.988-56.953 16.794-97.604 45.024-127.354C155.194 5.77 226.56 0 256 0c29.441 0 100.807 5.77 154.557 62.722 28.19 29.75 40.036 70.401 45.025 127.354 13.263 0 25.602 2.936 33.958 14.31l15.583 21.127c4.476 6.077 6.878 13.345 6.878 20.88zm-97.666-26.075c-.677-13.058-11.292-18.19-22.338-21.824-11.64 7.309-25.848 10.183-39.46 10.183-14.454 0-41.432-3.47-63.872-25.869-5.667-5.625-9.527-14.454-12.155-24.247a212.902 212.902 0 00-20.469-1.088c-6.098 0-13.099.349-20.551 1.088-2.628 9.793-6.509 18.622-12.155 24.247-22.4 22.4-49.418 25.87-63.872 25.87-13.612 0-27.86-2.855-39.501-10.184-11.005 3.613-21.558 8.828-22.277 21.824-1.17 24.555-1.272 49.11-1.375 73.645-.041 12.318-.082 24.658-.288 36.976.062 7.166 4.374 13.818 10.882 16.774 52.97 24.124 103.045 36.278 149.137 36.278 46.01 0 96.085-12.154 149.014-36.278 6.508-2.956 10.84-9.608 10.881-16.774.637-36.832.124-73.809-1.642-110.62h.041zM107.521 168.97c8.643 8.623 24.966 14.392 42.56 14.392 13.448 0 39.03-2.874 60.156-24.329 9.28-8.951 15.05-31.35 14.413-54.079-.657-18.231-5.769-33.28-13.448-39.665-8.315-7.371-27.203-10.574-48.33-8.644-22.399 2.238-41.267 9.588-50.875 19.833-20.798 22.728-16.323 80.317-4.476 92.492zm130.556-56.008c.637 3.51.965 7.35 1.273 11.517 0 2.875 0 5.77-.308 8.952 6.406-.636 11.847-.636 16.959-.636s10.553 0 16.959.636c-.329-3.182-.329-6.077-.329-8.952.329-4.167.657-8.007 1.294-11.517-6.735-.637-12.812-.965-17.924-.965s-11.21.328-17.924.965zm49.275-8.008c-.637 22.728 5.133 45.128 14.413 54.08 21.105 21.454 46.708 24.328 60.155 24.328 17.596 0 33.918-5.769 42.561-14.392 11.847-12.175 16.322-69.764-4.476-92.492-9.608-10.245-28.476-17.595-50.875-19.833-21.127-1.93-40.015 1.273-48.33 8.644-7.679 6.385-12.791 21.434-13.448 39.665z"/>`,
+  ),
+  minimax: svg(
+    "0 0 24 24",
+    `fill-rule="evenodd"`,
+    `<path d="M16.278 2c1.156 0 2.093.927 2.093 2.07v12.501a.74.74 0 00.744.709.74.74 0 00.743-.709V9.099a2.06 2.06 0 012.071-2.049A2.06 2.06 0 0124 9.1v6.561a.649.649 0 01-.652.645.649.649 0 01-.653-.645V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v7.472a2.037 2.037 0 01-2.048 2.026 2.037 2.037 0 01-2.048-2.026v-12.5a.785.785 0 00-.788-.753.785.785 0 00-.789.752l-.001 15.904A2.037 2.037 0 0113.441 22a2.037 2.037 0 01-2.048-2.026V18.04c0-.356.292-.645.652-.645.36 0 .652.289.652.645v1.934c0 .263.142.506.372.638.23.131.514.131.744 0a.734.734 0 00.372-.638V4.07c0-1.143.937-2.07 2.093-2.07zm-5.674 0c1.156 0 2.093.927 2.093 2.07v11.523a.648.648 0 01-.652.645.648.648 0 01-.652-.645V4.07a.785.785 0 00-.789-.78.785.785 0 00-.789.78v14.013a2.06 2.06 0 01-2.07 2.048 2.06 2.06 0 01-2.071-2.048V9.1a.762.762 0 00-.766-.758.762.762 0 00-.766.758v3.8a2.06 2.06 0 01-2.071 2.049A2.06 2.06 0 010 12.9v-1.378c0-.357.292-.646.652-.646.36 0 .653.29.653.646V12.9c0 .418.343.757.766.757s.766-.339.766-.757V9.099a2.06 2.06 0 012.07-2.048 2.06 2.06 0 012.071 2.048v8.984c0 .419.343.758.767.758.423 0 .766-.339.766-.758V4.07c0-1.143.937-2.07 2.093-2.07z"/>`,
+  ),
+  omp: svg("4 4 56 56", ``, `<path d="M10 14h44v9H43v33h-9V23h-9v22h-9V23H10z"/>`),
+  opencode: svg(
+    "96 64 288 384",
+    ``,
+    `<path opacity="0.4" d="M320 224V352H192V224H320Z"/><path fill-rule="evenodd" d="M384 416H128V96H384V416ZM320 160H192V352H320V160Z"/>`,
+  ),
+  pi: svg(
+    "100 100 600 600",
+    ``,
+    `<path fill-rule="evenodd" d="M165.29 165.29 H517.36 V400 H400 V517.36 H282.65 V634.72 H165.29 Z M282.65 282.65 V400 H400 V282.65 Z"/><path d="M517.36 400 H634.72 V634.72 H517.36 Z"/>`,
+  ),
+};
+
+const LUCIDE_PROVIDER_ICONS: Record<string, string> = { kiro: "PackagePlus" };
+
+/** The mark Paseo shows for a provider: built-in first, then the provider's own SVG. */
+export function providerSvg(provider: string, iconSvg: string | null): string | null {
+  return PROVIDER_SVGS[provider] ?? iconSvg;
+}
+
+/** An image URI for an SVG that uses `currentColor`, drawn in `color`. */
+export function svgDataUri(markup: string, color: string): string {
+  const tinted = markup.replaceAll("currentColor", color);
+  const withNamespace = tinted.includes("xmlns=")
+    ? tinted
+    : tinted.replace("<svg", '<svg xmlns="http://www.w3.org/2000/svg"');
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(withNamespace)}`;
+}
+
+export function ProviderIcon(props: {
+  provider: string;
+  iconSvg?: string | null;
+  size: number;
+  color: string;
+}) {
+  const { provider, iconSvg, size, color } = props;
+  const markup = Platform.OS === "web" ? providerSvg(provider, iconSvg ?? null) : null;
+  const source = useMemo(
+    () => (markup ? { uri: svgDataUri(markup, color) } : null),
+    [markup, color],
+  );
+  const style = useMemo(() => ({ width: size, height: size }), [size]);
+  if (!source) {
+    return <Icon name={LUCIDE_PROVIDER_ICONS[provider] ?? "Bot"} size={size} color={color} />;
+  }
+  return <Image source={source} style={style} accessibilityIgnoresInvertColors />;
+}

package/client/queries.ts

@@ -0,0 +1,242 @@
+import { usePaseo, useRpc } from "@getpaseo/plugin/client";
+import {
+  type InfiniteData,
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { useMemo } from "react";
+import {
+  authStatusRpc,
+  cachedCatalogRpc,
+  cachedIssueRpc,
+  cachedIssuesRpc,
+  catalogRpc,
+  createCommentRpc,
+  getIssueRpc,
+  type IssueDetail,
+  type IssuePage,
+  type IssuePatch,
+  type IssueQuery,
+  listIssuesRpc,
+  updateIssueRpc,
+} from "../shared/linear";
+import { AGENT_LABELS } from "../shared/prompts";
+import { type AgentChoice, agentChoices } from "./agent-options";
+import { useKeyScope } from "./key-scope";
+
+type Scope = string | null;
+const scoped = (scope: Scope) => ["linear", "scope", scope ?? "default"] as const;
+
+export const queryKeys = {
+  auth: ["linear", "auth"] as const,
+  scope: scoped,
+  catalog: (scope: Scope) => [...scoped(scope), "catalog"] as const,
+  issues: (scope: Scope) => [...scoped(scope), "issues"] as const,
+  issue: (scope: Scope, id: string) => [...scoped(scope), "issue", id] as const,
+  agents: (identifier: string) => ["linear", "agents", identifier] as const,
+  projects: ["linear", "projects"] as const,
+  providers: ["linear", "providers"] as const,
+};
+
+// Stale-while-revalidate: the daemon's last response shows while the Linear request runs.
+function useSaved<T>(
+  key: readonly unknown[],
+  read: () => Promise<{ value: T | null }>,
+  enabled: boolean,
+) {
+  const queries = useQueryClient();
+  const fresh = queries.getQueryState(key)?.data !== undefined;
+  const saved = useQuery({
+    queryKey: [...key, "saved"],
+    queryFn: async () => (await read()).value,
+    enabled: enabled && !fresh,
+    staleTime: Number.POSITIVE_INFINITY,
+    gcTime: 60_000,
+    retry: false,
+  });
+  return saved.data ?? undefined;
+}
+
+export function useAuthStatus() {
+  const status = useRpc(authStatusRpc);
+  return useQuery({ queryKey: queryKeys.auth, queryFn: () => status({}), staleTime: 60_000 });
+}
+
+export function useCatalog(enabled = true) {
+  const scope = useKeyScope();
+  const catalog = useRpc(catalogRpc);
+  const cached = useRpc(cachedCatalogRpc);
+  const key = queryKeys.catalog(scope);
+  const saved = useSaved(key, () => cached({ projectId: scope }), enabled);
+  return useQuery({
+    queryKey: key,
+    queryFn: () => catalog({ projectId: scope }),
+    placeholderData: saved,
+    enabled,
+    staleTime: 5 * 60_000,
+  });
+}
+
+export function useIssues(query: Omit<IssueQuery, "after">, enabled = true) {
+  const scope = useKeyScope();
+  const list = useRpc(listIssuesRpc);
+  const cached = useRpc(cachedIssuesRpc);
+  const key = [...queryKeys.issues(scope), query] as const;
+  const saved = useSaved(key, () => cached({ ...query, after: null, projectId: scope }), enabled);
+  const placeholder: InfiniteData<IssuePage, string | null> | undefined = saved
+    ? { pages: [saved], pageParams: [null] }
+    : undefined;
+  return useInfiniteQuery({
+    queryKey: key,
+    queryFn: ({ pageParam }) => list({ ...query, after: pageParam, projectId: scope }),
+    initialPageParam: null as string | null,
+    getNextPageParam: (page) => (page.hasNextPage ? page.endCursor : undefined),
+    placeholderData: placeholder,
+    enabled,
+    staleTime: 30_000,
+  });
+}
+
+export function useIssue(id: string | null) {
+  const scope = useKeyScope();
+  const get = useRpc(getIssueRpc);
+  const cached = useRpc(cachedIssueRpc);
+  const key = queryKeys.issue(scope, id ?? "");
+  const saved = useSaved(key, () => cached({ id: id ?? "", projectId: scope }), id !== null);
+  return useQuery({
+    queryKey: key,
+    queryFn: async () => (await get({ id: id ?? "", projectId: scope })).issue,
+    placeholderData: saved?.issue,
+    enabled: id !== null,
+    staleTime: 15_000,
+  });
+}
+
+export function useUpdateIssue(issueId: string) {
+  const scope = useKeyScope();
+  const update = useRpc(updateIssueRpc);
+  const queries = useQueryClient();
+  return useMutation({
+    mutationFn: (patch: IssuePatch) => update({ id: issueId, patch, projectId: scope }),
+    onSuccess: ({ issue }) => {
+      queries.setQueryData<IssueDetail>(queryKeys.issue(scope, issueId), (current) =>
+        current ? { ...current, ...issue } : current,
+      );
+      void queries.invalidateQueries({ queryKey: queryKeys.issues(scope) });
+    },
+  });
+}
+
+// Plain RPC calls, not a mutation, so a save that finishes after the view closes still
+// updates the cache. The update returns a summary without the description, so callers
+// show the new text with `show` and the save leaves the cached description alone.
+export function useDescriptionSaver(issueId: string) {
+  const scope = useKeyScope();
+  const update = useRpc(updateIssueRpc);
+  const queries = useQueryClient();
+  return useMemo(() => {
+    const key = queryKeys.issue(scope, issueId);
+    return {
+      show(description: string) {
+        void queries.cancelQueries({ queryKey: key });
+        queries.setQueryData<IssueDetail>(key, (current) =>
+          current ? { ...current, description } : current,
+        );
+      },
+      async save(description: string) {
+        const { issue } = await update({ id: issueId, patch: { description }, projectId: scope });
+        queries.setQueryData<IssueDetail>(key, (current) =>
+          current ? { ...current, ...issue } : current,
+        );
+        void queries.invalidateQueries({ queryKey: queryKeys.issues(scope) });
+      },
+      reload() {
+        void queries.invalidateQueries({ queryKey: key });
+      },
+    };
+  }, [scope, issueId, update, queries]);
+}
+
+export function useAddComment(issueId: string) {
+  const scope = useKeyScope();
+  const create = useRpc(createCommentRpc);
+  const queries = useQueryClient();
+  return useMutation({
+    mutationFn: (body: string) => create({ issueId, body, projectId: scope }),
+    onSuccess: ({ comment }) => {
+      queries.setQueryData<IssueDetail>(queryKeys.issue(scope, issueId), (current) =>
+        current ? { ...current, comments: [...current.comments, comment] } : current,
+      );
+    },
+  });
+}
+
+export interface PaseoProjectOption {
+  projectId: string;
+  displayName: string;
+  rootPath: string;
+  kind: string;
+}
+
+export function useProjects() {
+  const paseo = usePaseo();
+  return useQuery({
+    queryKey: queryKeys.projects,
+    queryFn: async (): Promise<PaseoProjectOption[]> => {
+      const { projects } = await paseo.projects.list();
+      return projects
+        .map((project) => ({
+          projectId: project.projectId,
+          displayName: project.projectDisplayName,
+          rootPath: project.projectRootPath,
+          kind: project.projectKind,
+        }))
+        .sort((a, b) => a.displayName.localeCompare(b.displayName));
+    },
+    staleTime: 60_000,
+  });
+}
+
+export function useProviders() {
+  const paseo = usePaseo();
+  return useQuery({
+    queryKey: queryKeys.providers,
+    queryFn: async (): Promise<AgentChoice[]> => agentChoices(await paseo.providers.snapshot()),
+    staleTime: 60_000,
+    // Providers report models a few seconds after the daemon starts. Poll until one is ready.
+    refetchInterval: (query) => ((query.state.data?.length ?? 0) > 0 ? false : 3_000),
+  });
+}
+
+export interface LinkedAgent {
+  id: string;
+  title: string | null;
+  status: string;
+  workspaceId: string | null;
+  action: string | null;
+  requiresAttention: boolean;
+}
+
+export function useLinkedAgents(identifier: string | null) {
+  const paseo = usePaseo();
+  return useQuery({
+    queryKey: queryKeys.agents(identifier ?? ""),
+    enabled: identifier !== null,
+    refetchInterval: 15_000,
+    queryFn: async (): Promise<LinkedAgent[]> => {
+      const { entries } = await paseo.agents.list({
+        filter: { labels: { [AGENT_LABELS.issue]: identifier ?? "" } },
+      });
+      return entries.map(({ agent }) => ({
+        id: agent.id,
+        title: agent.title ?? null,
+        status: agent.status,
+        workspaceId: agent.workspaceId ?? null,
+        action: agent.labels?.[AGENT_LABELS.action] ?? null,
+        requiresAttention: agent.requiresAttention === true,
+      }));
+    },
+  });
+}

package/client/settings-connection.tsx

@@ -0,0 +1,109 @@
+import { type PluginSurfaceProps, useRpc } from "@getpaseo/plugin/client";
+import { useToast } from "@getpaseo/plugin/client/react-native";
+import {
+  ExternalLink,
+  SettingsAction,
+  SettingsCard,
+  SettingsRow,
+  SettingsSection,
+} from "@getpaseo/plugin/client/ui";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { Text, View } from "react-native";
+import { authClearRpc } from "../shared/linear";
+import { ApiKeyForm, LINEAR_KEY_SETTINGS_URL } from "./connect";
+import { useAuthStatus, useCatalog } from "./queries";
+import { ProjectKeysSection } from "./settings-keys";
+import { errorMessage, type Theme } from "./ui";
+
+type AuthQuery = ReturnType<typeof useAuthStatus>;
+type CatalogQuery = ReturnType<typeof useCatalog>;
+
+function statusText(auth: AuthQuery): string {
+  const status = auth.data;
+  if (!status) return auth.isError ? errorMessage(auth.error) : "Checking…";
+  if (!status.configured) return "No default key";
+  if (status.source === "environment") {
+    return `Using the key from the daemon environment (${status.keyHint ?? ""})`;
+  }
+  return `Using the key saved on this host (${status.keyHint ?? ""})`;
+}
+
+function AccountLine({ theme, catalog }: { theme: Theme; catalog: CatalogQuery }) {
+  const { colors } = theme;
+  const styles = useMemo(
+    () => ({
+      muted: { color: colors.foregroundMuted, fontSize: 13 },
+      error: { color: colors.statusDanger, fontSize: 13 },
+    }),
+    [colors],
+  );
+  if (catalog.data) {
+    return (
+      <Text style={styles.muted}>
+        {catalog.data.viewer.displayName} · {catalog.data.organization.name}
+      </Text>
+    );
+  }
+  if (catalog.isError) return <Text style={styles.error}>{errorMessage(catalog.error)}</Text>;
+  return null;
+}
+
+const FORM_STYLE = { gap: 10, paddingTop: 8 } as const;
+
+export function ConnectionSettings({ theme }: PluginSurfaceProps) {
+  const toast = useToast();
+  const queries = useQueryClient();
+  const auth = useAuthStatus();
+  const catalog = useCatalog(auth.data?.configured === true);
+  const clear = useRpc(authClearRpc);
+  const disconnect = useMutation({
+    mutationFn: () => clear({}),
+    onSuccess: ({ configured }) => {
+      queries.removeQueries({ queryKey: ["linear"] });
+      const message = configured
+        ? "Saved key removed. The daemon environment still provides a key."
+        : "Default key removed";
+      toast.show(message, { variant: "success" });
+    },
+    onError: (error) => toast.error(errorMessage(error)),
+  });
+  const { mutate } = disconnect;
+  const remove = useCallback(() => mutate(), [mutate]);
+  const configured = auth.data?.configured === true;
+
+  return (
+    <View>
+      <SettingsSection title="Linear account">
+        <SettingsCard>
+          <SettingsRow label="Status" hint={statusText(auth)}>
+            <AccountLine theme={theme} catalog={catalog} />
+          </SettingsRow>
+          {auth.data?.source === "file" ? (
+            <SettingsAction
+              label="Remove the saved key"
+              hint="Deletes the key file from this host."
+              actionLabel="Disconnect"
+              disabled={disconnect.isPending}
+              onPress={remove}
+            />
+          ) : null}
+        </SettingsCard>
+      </SettingsSection>
+      <SettingsSection title={configured ? "Replace the default key" : "Default key"}>
+        <SettingsCard>
+          <SettingsRow
+            label="Personal API key"
+            hint="Saved on the daemon host with owner-only permissions. A saved key takes precedence over the daemon environment."
+          >
+            <View style={FORM_STYLE}>
+              <ExternalLink href={LINEAR_KEY_SETTINGS_URL}>Create a key in Linear</ExternalLink>
+              <ApiKeyForm theme={theme} />
+            </View>
+          </SettingsRow>
+        </SettingsCard>
+      </SettingsSection>
+      <ProjectKeysSection theme={theme} />
+    </View>
+  );
+}