@yannelli/paseo-linear-plugin 0.1.0 → 0.3.0

package/client/issue-sections.tsx

@@ -0,0 +1,325 @@
+import { openExternalUrl, type PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon, TextInput, useToast } from "@getpaseo/plugin/client/react-native";
+import { useCallback, useMemo, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { IssueDetail } from "../shared/linear";
+import { Markdown } from "./markdown";
+import { type LinkedAgent, useAddComment, useLinkedAgents } from "./queries";
+import {
+  Avatar,
+  Button,
+  errorMessage,
+  relativeTime,
+  SectionLabel,
+  StateIcon,
+  type Theme,
+  usePressableStyle,
+} from "./ui";
+
+type Colors = Theme["colors"];
+type Navigation = PluginSurfaceProps["navigation"];
+
+function openUrl(url: string) {
+  void openExternalUrl(url);
+}
+
+function LinkRow(props: {
+  theme: Theme;
+  label: string;
+  detail?: string;
+  icon?: string;
+  state?: { type: string; color: string };
+  target: string;
+  onOpen(target: string): void;
+}) {
+  const { colors } = props.theme;
+  const { target, onOpen } = props;
+  const styles = useMemo(() => {
+    const idle = {
+      minHeight: 34,
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      marginHorizontal: -8,
+      borderRadius: 8,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      backgroundColor: "transparent",
+    } as const;
+    return {
+      idle,
+      active: { ...idle, backgroundColor: colors.surface2 },
+      label: { flex: 1, color: colors.foreground, fontSize: 14 },
+      detail: { color: colors.foregroundMuted, fontSize: 12, maxWidth: 160 },
+    };
+  }, [colors]);
+  const pressStyle = usePressableStyle(styles.idle, styles.active);
+  const press = useCallback(() => onOpen(target), [onOpen, target]);
+  return (
+    <Pressable accessibilityRole="link" onPress={press} style={pressStyle}>
+      {props.state ? (
+        <StateIcon state={props.state} size={14} />
+      ) : (
+        <Icon name={props.icon ?? "Link"} size={14} color={colors.foregroundMuted} />
+      )}
+      <Text numberOfLines={1} style={styles.label}>
+        {props.label}
+      </Text>
+      {props.detail ? (
+        <Text numberOfLines={1} style={styles.detail}>
+          {props.detail}
+        </Text>
+      ) : null}
+    </Pressable>
+  );
+}
+
+export function IssueRelations(props: {
+  theme: Theme;
+  issue: IssueDetail;
+  onOpenIssue(issueId: string): void;
+}) {
+  const { theme, issue } = props;
+  if (!issue.parent && issue.children.length === 0) return null;
+  return (
+    <View>
+      <SectionLabel theme={theme}>
+        {issue.parent ? "Parent and sub-issues" : "Sub-issues"}
+      </SectionLabel>
+      {issue.parent ? (
+        <LinkRow
+          theme={theme}
+          icon="CornerLeftUp"
+          label={`${issue.parent.identifier} ${issue.parent.title}`}
+          target={issue.parent.id}
+          onOpen={props.onOpenIssue}
+        />
+      ) : null}
+      {issue.children.map((child) => (
+        <LinkRow
+          key={child.id}
+          theme={theme}
+          state={child.state}
+          label={`${child.identifier} ${child.title}`}
+          target={child.id}
+          onOpen={props.onOpenIssue}
+        />
+      ))}
+    </View>
+  );
+}
+
+export function IssueLinks({ theme, issue }: { theme: Theme; issue: IssueDetail }) {
+  if (issue.attachments.length === 0) return null;
+  return (
+    <View>
+      <SectionLabel theme={theme}>Links</SectionLabel>
+      {issue.attachments.map((attachment) => (
+        <LinkRow
+          key={attachment.id}
+          theme={theme}
+          icon={attachment.sourceType === "github" ? "GitPullRequest" : "Link"}
+          label={attachment.title}
+          detail={attachment.subtitle ?? undefined}
+          target={attachment.url}
+          onOpen={openUrl}
+        />
+      ))}
+    </View>
+  );
+}
+
+const AGENT_STATUS_COPY: Record<string, string> = {
+  initializing: "Starting",
+  idle: "Idle",
+  running: "Working",
+  error: "Error",
+  closed: "Closed",
+};
+
+function agentStatusColor(agent: LinkedAgent, colors: Colors): string {
+  if (agent.requiresAttention) return colors.statusWarning;
+  if (agent.status === "running") return colors.statusSuccess;
+  if (agent.status === "error") return colors.statusDanger;
+  return colors.foregroundMuted;
+}
+
+function AgentRow(props: {
+  theme: Theme;
+  agent: LinkedAgent;
+  first: boolean;
+  navigation: Navigation;
+}) {
+  const { colors } = props.theme;
+  const { agent, first, navigation } = props;
+  const statusColor = agentStatusColor(agent, colors);
+  const styles = useMemo(() => {
+    const idle = {
+      minHeight: 44,
+      paddingHorizontal: 12,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 10,
+      borderTopWidth: first ? 0 : 1,
+      borderTopColor: colors.border,
+      backgroundColor: colors.surface1,
+    } as const;
+    return {
+      idle,
+      active: { ...idle, backgroundColor: colors.surface2 },
+      title: { flex: 1, color: colors.foreground, fontSize: 14 },
+      dot: { width: 7, height: 7, borderRadius: 4, backgroundColor: statusColor },
+      status: { color: colors.foregroundMuted, fontSize: 12 },
+    };
+  }, [colors, first, statusColor]);
+  const pressStyle = usePressableStyle(styles.idle, styles.active);
+  const open = useCallback(
+    () => navigation?.openAgent({ agentId: agent.id }),
+    [navigation, agent.id],
+  );
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`Open agent ${agent.title ?? agent.id}`}
+      disabled={!navigation}
+      onPress={open}
+      style={pressStyle}
+    >
+      <Icon
+        name={agent.action === "review" ? "ScanSearch" : "Bot"}
+        size={16}
+        color={colors.foregroundMuted}
+      />
+      <Text numberOfLines={1} style={styles.title}>
+        {agent.title ?? agent.id}
+      </Text>
+      <View style={styles.dot} />
+      <Text style={styles.status}>
+        {agent.requiresAttention ? "Needs you" : (AGENT_STATUS_COPY[agent.status] ?? agent.status)}
+      </Text>
+    </Pressable>
+  );
+}
+
+export function LinkedAgents(props: { theme: Theme; identifier: string; navigation: Navigation }) {
+  const { colors } = props.theme;
+  const agents = useLinkedAgents(props.identifier);
+  const style = useMemo(
+    () =>
+      ({
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: colors.border,
+        overflow: "hidden",
+      }) as const,
+    [colors],
+  );
+  if (!agents.data || agents.data.length === 0) return null;
+  return (
+    <View>
+      <SectionLabel theme={props.theme}>Agents on this issue</SectionLabel>
+      <View style={style}>
+        {agents.data.map((agent, index) => (
+          <AgentRow
+            key={agent.id}
+            theme={props.theme}
+            agent={agent}
+            first={index === 0}
+            navigation={props.navigation}
+          />
+        ))}
+      </View>
+    </View>
+  );
+}
+
+type IssueComment = IssueDetail["comments"][number];
+
+function CommentItem({ theme, comment }: { theme: Theme; comment: IssueComment }) {
+  const { colors } = theme;
+  const styles = useMemo(
+    () =>
+      ({
+        root: { flexDirection: "row", gap: 10 },
+        body: { flex: 1, minWidth: 0, gap: 2 },
+        meta: { color: colors.foregroundMuted, fontSize: 12 },
+        author: { color: colors.foreground, fontWeight: "500" },
+      }) as const,
+    [colors],
+  );
+  return (
+    <View style={styles.root}>
+      <Avatar theme={theme} name={comment.user?.displayName ?? "Linear"} size={24} />
+      <View style={styles.body}>
+        <Text style={styles.meta}>
+          <Text style={styles.author}>{comment.user?.displayName ?? "Integration"}</Text>
+          {`  ${relativeTime(comment.createdAt)}`}
+        </Text>
+        <Markdown theme={theme} compact source={comment.body} />
+      </View>
+    </View>
+  );
+}
+
+export function Comments({ theme, issue }: { theme: Theme; issue: IssueDetail }) {
+  const { colors } = theme;
+  const toast = useToast();
+  const [body, setBody] = useState("");
+  const { mutate, isPending } = useAddComment(issue.id);
+  const submit = useCallback(() => {
+    if (!body.trim()) return;
+    mutate(body, {
+      onSuccess: () => setBody(""),
+      onError: (error) => toast.error(errorMessage(error)),
+    });
+  }, [body, mutate, toast]);
+  const styles = useMemo(
+    () =>
+      ({
+        root: { gap: 12 },
+        composer: { gap: 8 },
+        input: {
+          minHeight: 72,
+          padding: 10,
+          borderRadius: 8,
+          borderWidth: 1,
+          borderColor: colors.border,
+          backgroundColor: colors.surface1,
+          color: colors.foreground,
+          fontSize: 14,
+          textAlignVertical: "top",
+        },
+        actions: { alignItems: "flex-end" },
+      }) as const,
+    [colors],
+  );
+  return (
+    <View style={styles.root}>
+      <SectionLabel theme={theme}>Activity</SectionLabel>
+      {issue.comments.map((comment) => (
+        <CommentItem key={comment.id} theme={theme} comment={comment} />
+      ))}
+      <View style={styles.composer}>
+        <TextInput
+          value={body}
+          onChangeText={setBody}
+          multiline
+          placeholder="Leave a comment…"
+          placeholderTextColor={colors.foregroundMuted}
+          accessibilityLabel="New comment"
+          style={styles.input}
+        />
+        <View style={styles.actions}>
+          <Button
+            theme={theme}
+            icon="Send"
+            label="Comment"
+            busy={isPending}
+            disabled={!body.trim()}
+            onPress={submit}
+          />
+        </View>
+      </View>
+    </View>
+  );
+}

package/client/issue-tree.ts

@@ -0,0 +1,132 @@
+import type { IssueSummary } from "../shared/linear";
+
+const STATE_ORDER = [
+  "started",
+  "unstarted",
+  "triage",
+  "backlog",
+  "completed",
+  "canceled",
+  "duplicate",
+];
+
+export type IssueListRow =
+  | { kind: "header"; key: string; state: IssueSummary["state"]; count: number }
+  | {
+      kind: "issue";
+      key: string;
+      issue: IssueSummary;
+      depth: number;
+      /** Sub-issues of this issue that are in the list. */
+      childCount: number;
+      collapsed: boolean;
+    };
+
+export interface RowOptions {
+  nested: boolean;
+  collapsed: ReadonlySet<string>;
+}
+
+// Groups issues by workflow state and keeps the server's order in each group. When nested, a
+// sub-issue shows under its parent if the parent is in the list, whatever its own state is.
+export function buildIssueRows(
+  issues: readonly IssueSummary[],
+  options: RowOptions,
+): IssueListRow[] {
+  const children = new Map<string, IssueSummary[]>();
+  let roots: readonly IssueSummary[] = issues;
+  if (options.nested) {
+    const ids = new Set(issues.map((issue) => issue.id));
+    const nestedRoots: IssueSummary[] = [];
+    for (const issue of issues) {
+      const parentId = issue.parent?.id;
+      if (parentId && parentId !== issue.id && ids.has(parentId)) {
+        children.set(parentId, [...(children.get(parentId) ?? []), issue]);
+      } else {
+        nestedRoots.push(issue);
+      }
+    }
+    roots = nestedRoots;
+  }
+
+  const rows: IssueListRow[] = [];
+  const placed = new Set<string>();
+  const place = (issue: IssueSummary, depth: number) => {
+    if (placed.has(issue.id)) return;
+    placed.add(issue.id);
+    const kids = children.get(issue.id) ?? [];
+    const collapsed = kids.length > 0 && options.collapsed.has(issue.id);
+    rows.push({ kind: "issue", key: issue.id, issue, depth, childCount: kids.length, collapsed });
+    if (collapsed) {
+      markPlaced(kids, children, placed);
+      return;
+    }
+    for (const child of kids) place(child, depth + 1);
+  };
+  const addGroups = (issues: readonly IssueSummary[], prefix: string) => {
+    for (const group of groupByState(issues)) {
+      const state = group[0]?.state;
+      if (!state) continue;
+      rows.push({ kind: "header", key: `${prefix}-${state.name}`, state, count: group.length });
+      for (const issue of group) place(issue, 0);
+    }
+  };
+
+  addGroups(roots, "header");
+  // Parent loops have no root. Show those issues at the top level so none disappear.
+  addGroups(
+    issues.filter((issue) => !placed.has(issue.id)),
+    "loop",
+  );
+  return rows;
+}
+
+function markPlaced(
+  issues: readonly IssueSummary[],
+  children: ReadonlyMap<string, IssueSummary[]>,
+  placed: Set<string>,
+) {
+  for (const issue of issues) {
+    if (placed.has(issue.id)) continue;
+    placed.add(issue.id);
+    markPlaced(children.get(issue.id) ?? [], children, placed);
+  }
+}
+
+function groupByState(issues: readonly IssueSummary[]): IssueSummary[][] {
+  const groups = new Map<string, IssueSummary[]>();
+  for (const issue of issues) {
+    const key = issue.state.name;
+    groups.set(key, [...(groups.get(key) ?? []), issue]);
+  }
+  return [...groups.values()].sort((a, b) => {
+    const left = a[0]?.state;
+    const right = b[0]?.state;
+    if (!left || !right) return 0;
+    const byType = STATE_ORDER.indexOf(left.type) - STATE_ORDER.indexOf(right.type);
+    return byType !== 0 ? byType : left.position - right.position;
+  });
+}
+
+/** Adds or removes one parent in the collapsed list. */
+export function toggleCollapsed(collapsed: readonly string[], issueId: string): string[] {
+  return collapsed.includes(issueId)
+    ? collapsed.filter((id) => id !== issueId)
+    : [...collapsed, issueId];
+}
+
+export type Crumb<T> = { kind: "issue"; ref: T } | { kind: "more"; hidden: number };
+
+/** Keeps the root and the direct parent and folds the middle of a long parent chain. */
+export function crumbTrail<T>(ancestors: readonly T[], maxShown: number): Crumb<T>[] {
+  if (ancestors.length <= maxShown || maxShown < 2) {
+    return ancestors.map((ref) => ({ kind: "issue", ref }));
+  }
+  const head = ancestors.slice(0, 1);
+  const tail = ancestors.slice(ancestors.length - (maxShown - 1));
+  return [
+    ...head.map((ref) => ({ kind: "issue" as const, ref })),
+    { kind: "more", hidden: ancestors.length - head.length - tail.length },
+    ...tail.map((ref) => ({ kind: "issue" as const, ref })),
+  ];
+}

package/client/key-scope.tsx

@@ -0,0 +1,23 @@
+import { createContext, type ReactNode, useContext } from "react";
+
+// The Paseo project whose Linear key the browser uses. Null means the default key.
+const KeyScopeContext = createContext<string | null>(null);
+
+export function KeyScopeProvider(props: { projectId: string | null; children: ReactNode }) {
+  return (
+    <KeyScopeContext.Provider value={props.projectId}>{props.children}</KeyScopeContext.Provider>
+  );
+}
+
+export function useKeyScope(): string | null {
+  return useContext(KeyScopeContext);
+}
+
+/** A project without its own key shares the default key, so it shares the default scope too. */
+export function effectiveKeyScope(
+  projectId: string | null | undefined,
+  projectKeys: readonly { projectId: string }[] | undefined,
+): string | null {
+  if (!projectId) return null;
+  return projectKeys?.some((entry) => entry.projectId === projectId) ? projectId : null;
+}

package/client/launch-choices.ts

@@ -0,0 +1,125 @@
+import { usePaseo } from "@getpaseo/plugin/client";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useMemo, useState } from "react";
+import type { IssueDetail } from "../shared/linear";
+import type { AgentAction, LinearSettings } from "../shared/settings";
+import { type AgentPicks, resolveAgent } from "./agent-options";
+import {
+  defaultProjectId,
+  type Placement,
+  placementOptions,
+  pullRequestNumber,
+  resolvePlacement,
+  type TargetWorkspace,
+} from "./launch-plan";
+import { useLinkedAgents, useProjects, useProviders } from "./queries";
+
+// `useWorkspace` works only inside a workspace panel, so look the workspace up by id instead.
+function useWorkspaceById(workspaceId: string | null) {
+  const paseo = usePaseo();
+  return (
+    useQuery({
+      queryKey: ["linear", "workspace", workspaceId],
+      enabled: workspaceId !== null,
+      staleTime: 60_000,
+      queryFn: async (): Promise<TargetWorkspace | null> => {
+        const { entries } = await paseo.workspaces.list();
+        const match = entries.find((entry) => entry.id === workspaceId);
+        return match ? { id: match.id, projectId: match.projectId, name: match.name } : null;
+      },
+    }).data ?? null
+  );
+}
+
+const NO_PICKS: AgentPicks = { agent: null, model: null, effort: null, mode: null };
+
+export function useLaunchChoices(input: {
+  issue: IssueDetail;
+  action: AgentAction;
+  settings: LinearSettings;
+  target: TargetWorkspace | null;
+}) {
+  const { issue, settings, action } = input;
+  const projects = useProjects();
+  const providers = useProviders();
+  const { target } = input;
+  const prNumber = action === "review" ? pullRequestNumber(issue) : null;
+  const linked = useLinkedAgents(issue.identifier);
+  const agentWorkspaceId =
+    linked.data?.find((agent) => agent.action === "implement" && agent.workspaceId)?.workspaceId ??
+    null;
+  const agentWorkspace = useWorkspaceById(agentWorkspaceId);
+  const [projectChoice, setProjectChoice] = useState<string | null>(null);
+  const [placementChoice, setPlacementChoice] = useState<Placement | null>(null);
+  const [picks, setPicks] = useState<AgentPicks>(NO_PICKS);
+  const projectId =
+    projectChoice ??
+    defaultProjectId({ target, teamId: issue.team.id, settings, projects: projects.data });
+  const project = projects.data?.find((entry) => entry.projectId === projectId) ?? null;
+  const placements = useMemo(
+    () =>
+      placementOptions({
+        action,
+        prNumber,
+        project,
+        branchName: issue.branchName,
+        target,
+        agentWorkspace,
+      }),
+    [action, prNumber, project, issue.branchName, target, agentWorkspace],
+  );
+  const placement = resolvePlacement(
+    placements,
+    placementChoice,
+    action,
+    settings.launch.isolation,
+  );
+  const agents = providers.data ?? [];
+  const agent = resolveAgent(agents, picks, settings.launch.provider);
+  const chooseProject = useCallback((value: string) => {
+    setProjectChoice(value);
+    setPlacementChoice(null);
+  }, []);
+  const choosePlacement = useCallback(
+    (value: string) => setPlacementChoice(value as Placement),
+    [],
+  );
+  // A model from another agent starts from that agent's default effort and mode.
+  const chooseModel = useCallback(
+    (agentId: string, modelId: string) =>
+      setPicks((current) =>
+        current.agent === agentId || (current.agent === null && agent?.agent.id === agentId)
+          ? { ...current, agent: agentId, model: modelId, effort: null }
+          : { ...NO_PICKS, agent: agentId, model: modelId },
+      ),
+    [agent?.agent.id],
+  );
+  const chooseEffort = useCallback(
+    (value: string) => setPicks((current) => ({ ...current, effort: value })),
+    [],
+  );
+  const chooseMode = useCallback(
+    (value: string) => setPicks((current) => ({ ...current, mode: value })),
+    [],
+  );
+  return {
+    projects,
+    providers,
+    agents,
+    agent,
+    target,
+    agentWorkspace,
+    prNumber,
+    project,
+    projectConfig: settings.projects.find((entry) => entry.projectId === projectId) ?? null,
+    placements,
+    placement,
+    chooseProject,
+    choosePlacement,
+    chooseModel,
+    chooseEffort,
+    chooseMode,
+  };
+}
+
+export type LaunchChoices = ReturnType<typeof useLaunchChoices>;