@yannelli/paseo-linear-plugin 0.1.0 → 0.4.0

package/client/breadcrumbs.tsx

@@ -0,0 +1,110 @@
+import { useCallback, useMemo, useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { IssueDetail, IssueRef } from "../shared/linear";
+import { crumbTrail } from "./issue-tree";
+import type { Theme } from "./ui";
+
+const ROW = { flex: 1, minWidth: 0, flexDirection: "row", alignItems: "center", gap: 4 } as const;
+
+// Team, then the parent chain, then the issue. Each parent opens that issue.
+export function IssueBreadcrumbs(props: {
+  theme: Theme;
+  compact: boolean;
+  issue: IssueDetail;
+  onOpenIssue(issueId: string): void;
+}) {
+  const { theme, compact, issue, onOpenIssue } = props;
+  const { colors } = theme;
+  const [expanded, setExpanded] = useState(false);
+  const styles = useMemo(
+    () =>
+      ({
+        muted: { color: colors.foregroundMuted, fontSize: 13, flexShrink: 1 },
+        link: { color: colors.foregroundMuted, fontSize: 13, textDecorationLine: "underline" },
+        current: { color: colors.foreground, fontSize: 13, fontWeight: "500", flexShrink: 0 },
+        separator: { color: colors.foregroundMuted, fontSize: 13 },
+      }) as const,
+    [colors],
+  );
+  const expand = useCallback(() => setExpanded(true), []);
+  const trail = crumbTrail(issue.ancestors, expanded ? issue.ancestors.length : compact ? 2 : 4);
+  const showTeam = !compact || issue.ancestors.length === 0;
+  return (
+    <View style={ROW} accessibilityRole="header">
+      {showTeam ? (
+        <>
+          <Text style={styles.muted} numberOfLines={1}>
+            {issue.team.name}
+          </Text>
+          <Text style={styles.separator}>›</Text>
+        </>
+      ) : null}
+      {trail.map((crumb) =>
+        crumb.kind === "more" ? (
+          <CrumbLink
+            key="more"
+            label="…"
+            accessibilityLabel={`Show ${crumb.hidden} more parent issues`}
+            style={styles.link}
+            separator={styles.separator}
+            onPress={expand}
+          />
+        ) : (
+          <ParentCrumb
+            key={crumb.ref.id}
+            parent={crumb.ref}
+            style={styles.link}
+            separator={styles.separator}
+            onOpenIssue={onOpenIssue}
+          />
+        ),
+      )}
+      <Text style={styles.current} numberOfLines={1}>
+        {issue.identifier}
+      </Text>
+    </View>
+  );
+}
+
+function ParentCrumb(props: {
+  parent: IssueRef;
+  style: object;
+  separator: object;
+  onOpenIssue(issueId: string): void;
+}) {
+  const { parent, onOpenIssue } = props;
+  const open = useCallback(() => onOpenIssue(parent.id), [onOpenIssue, parent.id]);
+  return (
+    <CrumbLink
+      label={parent.identifier}
+      accessibilityLabel={`Open parent issue ${parent.identifier}: ${parent.title}`}
+      style={props.style}
+      separator={props.separator}
+      onPress={open}
+    />
+  );
+}
+
+function CrumbLink(props: {
+  label: string;
+  accessibilityLabel: string;
+  style: object;
+  separator: object;
+  onPress(): void;
+}) {
+  return (
+    <>
+      <Pressable
+        accessibilityRole="link"
+        accessibilityLabel={props.accessibilityLabel}
+        hitSlop={4}
+        onPress={props.onPress}
+      >
+        <Text style={props.style} numberOfLines={1}>
+          {props.label}
+        </Text>
+      </Pressable>
+      <Text style={props.separator}>›</Text>
+    </>
+  );
+}

package/client/browser.tsx

@@ -0,0 +1,275 @@
+import {
+  type PluginSurfaceProps,
+  type PluginWorkspacePanelProps,
+  useSettings,
+  useWorkspace,
+} from "@getpaseo/plugin/client";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { type LayoutChangeEvent, View } from "react-native";
+import { type AgentAction, linearSettings } from "../shared/settings";
+import { ConnectCard } from "./connect";
+import { CreateIssueModal } from "./create-issue";
+import { IssueDetailView } from "./issue-detail";
+import { IssueList } from "./issue-list";
+import { effectiveKeyScope, KeyScopeProvider } from "./key-scope";
+import { LaunchPage, type LaunchTarget } from "./launch";
+import { useAuthStatus, useCatalog, useProjects } from "./queries";
+import { panelScope, SCREEN_SCOPE, useBrowserState } from "./store";
+import { Button, EmptyState, errorMessage, type Theme } from "./ui";
+
+const SPLIT_WIDTH = 820;
+const NARROW_WIDTH = 560;
+const SCREEN_TARGET: LaunchTarget = { workspace: null };
+
+interface BrowserProps {
+  theme: Theme;
+  compact: boolean;
+  navigation: PluginSurfaceProps["navigation"];
+  scope: string;
+  target: LaunchTarget;
+  /** The Paseo project to use the Linear key of. Null uses the default key. */
+  keyProjectId: string | null;
+  /** Shows a picker for the Linear key. The screen has one; panels follow their workspace. */
+  canSwitchKey: boolean;
+}
+
+type Catalog = NonNullable<ReturnType<typeof useCatalog>["data"]>;
+
+function LoadError(props: { theme: Theme; title: string; error: unknown; retry(): unknown }) {
+  const { retry } = props;
+  const tryAgain = useCallback(() => void retry(), [retry]);
+  return (
+    <EmptyState
+      theme={props.theme}
+      icon="TriangleAlert"
+      tone="danger"
+      title={props.title}
+      detail={errorMessage(props.error)}
+    >
+      <Button theme={props.theme} label="Try again" icon="RefreshCw" onPress={tryAgain} />
+    </EmptyState>
+  );
+}
+
+export function IssueBrowser(props: BrowserProps) {
+  const { theme } = props;
+  const auth = useAuthStatus();
+  const keyScope = effectiveKeyScope(props.keyProjectId, auth.data?.projectKeys);
+  if (auth.isPending) {
+    return <EmptyState theme={theme} icon="RefreshCw" title="Connecting to Linear" />;
+  }
+  if (auth.isError) {
+    return (
+      <LoadError
+        theme={theme}
+        title="Linear plugin is not responding"
+        error={auth.error}
+        retry={auth.refetch}
+      />
+    );
+  }
+  if (keyScope === null && !auth.data.configured) {
+    return <ConnectCard theme={theme} compact={props.compact} />;
+  }
+  return (
+    <KeyScopeProvider key={keyScope ?? "default"} projectId={keyScope}>
+      <ScopedBrowser {...props} projectKeys={auth.data.projectKeys} />
+    </KeyScopeProvider>
+  );
+}
+
+type ProjectKeys = readonly { projectId: string }[];
+
+function ScopedBrowser(props: BrowserProps & { projectKeys: ProjectKeys }) {
+  const { theme } = props;
+  const catalog = useCatalog();
+  if (catalog.isPending) {
+    return <EmptyState theme={theme} icon="RefreshCw" title="Loading your Linear workspace" />;
+  }
+  if (catalog.isError) {
+    return (
+      <LoadError
+        theme={theme}
+        title="Could not reach Linear"
+        error={catalog.error}
+        retry={catalog.refetch}
+      />
+    );
+  }
+  return <ConnectedBrowser {...props} catalog={catalog.data} />;
+}
+
+function useKeyOptions(enabled: boolean, projectKeys: ProjectKeys) {
+  const projects = useProjects();
+  return useMemo(() => {
+    if (!enabled || projectKeys.length === 0) return [];
+    const names = new Map(
+      projects.data?.map((project) => [project.projectId, project.displayName]),
+    );
+    return [
+      { value: "", label: "Default key" },
+      ...projectKeys.map((entry) => ({
+        value: entry.projectId,
+        label: names.get(entry.projectId) ?? entry.projectId,
+      })),
+    ];
+  }, [enabled, projectKeys, projects.data]);
+}
+
+function ConnectedBrowser(props: BrowserProps & { catalog: Catalog; projectKeys: ProjectKeys }) {
+  const { theme, catalog } = props;
+  const { colors } = theme;
+  const [state, update] = useBrowserState(props.scope);
+  const keyOptions = useKeyOptions(props.canSwitchKey, props.projectKeys);
+  const [width, setWidth] = useState(0);
+  const split = !props.compact && width >= SPLIT_WIDTH;
+  const showDetail = state.issueId !== null;
+  const showList = split || !showDetail;
+  const sideBySide = split && showDetail;
+  const narrow = props.compact || width < NARROW_WIDTH;
+
+  const styles = useMemo(
+    () => ({
+      root: { flex: 1, flexDirection: "row" as const, backgroundColor: colors.surface0 },
+      // Not `flex: 0`: on web it sets flex-basis 0, which overrides the width.
+      list: sideBySide
+        ? {
+            flexGrow: 0,
+            flexShrink: 0,
+            width: Math.min(460, Math.round(width * 0.42)),
+            borderRightWidth: 1,
+            borderRightColor: colors.border,
+            overflow: "hidden" as const,
+          }
+        : { flex: 1, minWidth: 0, overflow: "hidden" as const },
+      detail: { flex: 1, minWidth: 0, overflow: "hidden" as const },
+    }),
+    [colors, sideBySide, width],
+  );
+  const measure = useCallback(
+    (event: LayoutChangeEvent) => setWidth(event.nativeEvent.layout.width),
+    [],
+  );
+  const back = useCallback(() => update({ issueId: null }), [update]);
+  const openIssue = useCallback((issueId: string) => update({ issueId }), [update]);
+  const closeCreate = useCallback(() => update({ creating: false }), [update]);
+  const created = useCallback((issueId: string) => update({ creating: false, issueId }), [update]);
+  const openLaunch = useCallback(
+    (action: AgentAction) =>
+      state.issueId && update({ launch: { issueId: state.issueId, action } }),
+    [update, state.issueId],
+  );
+  const closeLaunch = useCallback(() => update({ launch: null }), [update]);
+
+  if (state.launch) {
+    return (
+      <LaunchPage
+        key={`${state.launch.issueId}:${state.launch.action}`}
+        theme={theme}
+        compact={narrow}
+        issueId={state.launch.issueId}
+        action={state.launch.action}
+        target={props.target}
+        navigation={props.navigation}
+        onBack={closeLaunch}
+        onStarted={closeLaunch}
+      />
+    );
+  }
+
+  return (
+    <View style={styles.root} onLayout={measure}>
+      {showList ? (
+        <View style={styles.list}>
+          <IssueList
+            theme={theme}
+            compact={narrow || sideBySide}
+            teams={catalog.teams}
+            state={state}
+            update={update}
+            keyOptions={keyOptions}
+          />
+        </View>
+      ) : null}
+      {state.issueId ? (
+        <View style={styles.detail}>
+          <IssueDetailView
+            key={state.issueId}
+            theme={theme}
+            compact={narrow}
+            issueId={state.issueId}
+            teams={catalog.teams}
+            users={catalog.users}
+            viewerId={catalog.viewer.id}
+            target={props.target}
+            navigation={props.navigation}
+            onBack={back}
+            onOpenIssue={openIssue}
+            onLaunch={openLaunch}
+          />
+        </View>
+      ) : null}
+      {state.creating ? (
+        <CreateIssueModal
+          theme={theme}
+          teams={catalog.teams}
+          users={catalog.users}
+          viewerId={catalog.viewer.id}
+          defaultTeamId={state.teamId}
+          onClose={closeCreate}
+          onCreated={created}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export function LinearScreen({ theme, layout, navigation }: PluginSurfaceProps) {
+  const [state] = useBrowserState(SCREEN_SCOPE);
+  return (
+    <IssueBrowser
+      theme={theme}
+      compact={layout.compact}
+      navigation={navigation}
+      scope={SCREEN_SCOPE}
+      target={SCREEN_TARGET}
+      keyProjectId={state.keyProjectId}
+      canSwitchKey
+    />
+  );
+}
+
+const selectProjectId = (workspace: { projectId: string }) => workspace.projectId;
+const selectName = (workspace: { name: string }) => workspace.name;
+
+export function LinearPanel({ theme, layout, navigation, workspaceId }: PluginWorkspacePanelProps) {
+  const scope = panelScope(workspaceId);
+  const projectId = useWorkspace(workspaceId, selectProjectId);
+  const name = useWorkspace(workspaceId, selectName);
+  const settings = useSettings(linearSettings);
+  const [, update] = useBrowserState(scope);
+  const seeded = useRef(false);
+  const target = useMemo(
+    () => ({ workspace: projectId ? { id: workspaceId, projectId, name: name ?? "" } : null }),
+    [workspaceId, projectId, name],
+  );
+  // Default the panel's team filter to the team mapped to this workspace's project, once.
+  useEffect(() => {
+    if (seeded.current || settings.status !== "ready" || !projectId) return;
+    seeded.current = true;
+    const mapped = settings.values.projects.find((entry) => entry.projectId === projectId);
+    const teamId = mapped?.teamIds[0];
+    if (teamId) update({ teamId, assignee: "anyone" });
+  }, [settings, projectId, update]);
+  return (
+    <IssueBrowser
+      theme={theme}
+      compact={layout.compact}
+      navigation={navigation}
+      scope={scope}
+      target={target}
+      keyProjectId={projectId ?? null}
+      canSwitchKey={false}
+    />
+  );
+}

package/client/compat.ts

@@ -0,0 +1,107 @@
+import type { PluginClientContext, PluginSurfaceProps } from "@getpaseo/plugin/client";
+import * as hostUi from "@getpaseo/plugin/client/ui";
+import { type ComponentType, createElement } from "react";
+
+// Paseo 0.11 replaced surfaces with screens and sidebar header items. 0.10 only has
+// addSurface/addSidebarItem; later releases drop those aliases. Detect once, register once.
+type Cleanup = () => void;
+
+interface ScreenRef {
+  screenId: string;
+}
+
+interface SidebarItemProps {
+  currentScreen: ScreenRef | null;
+  openScreen(input: ScreenRef): void;
+}
+
+interface ScreenClient {
+  addScreen(input: {
+    id: string;
+    title: string;
+    Component: ComponentType<PluginSurfaceProps>;
+  }): Cleanup;
+  addSidebarHeaderItem(input: {
+    id: string;
+    title: string;
+    Component: ComponentType<SidebarItemProps>;
+  }): Cleanup;
+}
+
+interface SurfaceClient {
+  addSurface(id: string, Component: ComponentType<PluginSurfaceProps>): Cleanup;
+  addSidebarItem(input: { id: string; title: string; icon: string; surface: string }): Cleanup;
+}
+
+type SidebarRowComponent = ComponentType<{
+  icon?: string;
+  label?: string;
+  active?: boolean;
+  onPress(): void;
+}>;
+
+function hasScreens(client: object): client is ScreenClient {
+  return "addScreen" in client && typeof client.addScreen === "function";
+}
+
+export interface ScreenRegistration {
+  id: string;
+  title: string;
+  icon: string;
+  Component: ComponentType<PluginSurfaceProps>;
+}
+
+export function registerScreen(client: PluginClientContext, screen: ScreenRegistration): Cleanup {
+  const SidebarRow = (hostUi as Record<string, unknown>).SidebarRow as
+    | SidebarRowComponent
+    | undefined;
+  if (hasScreens(client) && SidebarRow) {
+    const removeScreen = client.addScreen({
+      id: screen.id,
+      title: screen.title,
+      Component: screen.Component,
+    });
+    function SidebarItem({ currentScreen, openScreen }: SidebarItemProps) {
+      return createElement(SidebarRow as SidebarRowComponent, {
+        icon: screen.icon,
+        active: currentScreen?.screenId === screen.id,
+        onPress: () => openScreen({ screenId: screen.id }),
+      });
+    }
+    const removeItem = client.addSidebarHeaderItem({
+      id: screen.id,
+      title: screen.title,
+      Component: SidebarItem,
+    });
+    return () => {
+      removeItem();
+      removeScreen();
+    };
+  }
+  const legacy = client as unknown as SurfaceClient;
+  const removeSurface = legacy.addSurface(screen.id, screen.Component);
+  const removeItem = legacy.addSidebarItem({
+    id: screen.id,
+    title: screen.title,
+    icon: screen.icon,
+    surface: screen.id,
+  });
+  return () => {
+    removeItem();
+    removeSurface();
+  };
+}
+
+interface NavigationCapabilities {
+  openScreen?: (input: ScreenRef) => void;
+  openSurface?: (id: string) => void;
+}
+
+export function openPluginScreen(capabilities: object, screenId: string): void {
+  const navigation = capabilities as NavigationCapabilities;
+  if (typeof navigation.openScreen === "function") {
+    navigation.openScreen({ screenId });
+    return;
+  }
+  navigation.openSurface?.(screenId);
+}

package/client/connect.tsx

@@ -0,0 +1,136 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import { Icon, TextInput, useToast } from "@getpaseo/plugin/client/react-native";
+import { ExternalLink } from "@getpaseo/plugin/client/ui";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import { authSaveRpc } from "../shared/linear";
+import { Button, errorMessage, type Theme } from "./ui";
+
+export const LINEAR_KEY_SETTINGS_URL = "https://linear.app/settings/account/security";
+
+export function useSaveApiKey(projectId: string | null = null) {
+  const save = useRpc(authSaveRpc);
+  const queries = useQueryClient();
+  return useMutation({
+    mutationFn: (apiKey: string) => save({ apiKey, projectId }),
+    onSuccess: () => {
+      void queries.invalidateQueries({ queryKey: ["linear"] });
+    },
+  });
+}
+
+export function ApiKeyForm(props: {
+  theme: Theme;
+  /** Saves the key for this Paseo project only. Null saves the default key. */
+  projectId?: string | null;
+  submitLabel?: string;
+}) {
+  const { theme } = props;
+  const [apiKey, setApiKey] = useState("");
+  const saveKey = useSaveApiKey(props.projectId ?? null);
+  const toast = useToast();
+  const { colors } = theme;
+  const { mutate } = saveKey;
+  const submit = useCallback(() => {
+    if (!apiKey.trim()) return;
+    mutate(apiKey, {
+      onSuccess: ({ viewerName, organizationName }) => {
+        setApiKey("");
+        toast.show(`Connected to ${organizationName} as ${viewerName}`, { variant: "success" });
+      },
+    });
+  }, [apiKey, mutate, toast]);
+  const styles = useMemo(
+    () => ({
+      root: { gap: 10, alignSelf: "stretch" as const },
+      input: {
+        height: 40,
+        paddingHorizontal: 12,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.surface2,
+        color: colors.foreground,
+        fontSize: 14,
+      },
+      error: { color: colors.statusDanger, fontSize: 13 },
+    }),
+    [colors],
+  );
+  return (
+    <View style={styles.root}>
+      <TextInput
+        value={apiKey}
+        onChangeText={setApiKey}
+        onSubmitEditing={submit}
+        placeholder="lin_api_..."
+        placeholderTextColor={colors.foregroundMuted}
+        secureTextEntry
+        autoCapitalize="none"
+        autoCorrect={false}
+        accessibilityLabel="Linear API key"
+        style={styles.input}
+      />
+      {saveKey.error ? (
+        <Text accessibilityRole="alert" style={styles.error}>
+          {errorMessage(saveKey.error)}
+        </Text>
+      ) : null}
+      <Button
+        theme={theme}
+        variant="primary"
+        size="md"
+        label={props.submitLabel ?? "Connect Linear"}
+        icon="KeyRound"
+        busy={saveKey.isPending}
+        disabled={!apiKey.trim()}
+        onPress={submit}
+      />
+    </View>
+  );
+}
+
+export function ConnectCard({ theme, compact }: { theme: Theme; compact: boolean }) {
+  const { colors } = theme;
+  const styles = useMemo(
+    () => ({
+      root: {
+        flex: 1,
+        alignItems: "center" as const,
+        justifyContent: "center" as const,
+        padding: compact ? 20 : 32,
+      },
+      card: {
+        width: "100%" as const,
+        maxWidth: 440,
+        gap: 16,
+        padding: compact ? 20 : 28,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.surface1,
+      },
+      header: { flexDirection: "row" as const, alignItems: "center" as const, gap: 10 },
+      title: { color: colors.foreground, fontSize: 17, fontWeight: "500" as const },
+      body: { color: colors.foregroundMuted, fontSize: 14, lineHeight: 20 },
+    }),
+    [colors, compact],
+  );
+  return (
+    <View style={styles.root}>
+      <View style={styles.card}>
+        <View style={styles.header}>
+          <Icon name="SquareKanban" size={22} color={colors.foreground} />
+          <Text style={styles.title}>Connect Linear</Text>
+        </View>
+        <Text style={styles.body}>
+          Create a personal API key in Linear under Settings, Security & access. Paseo stores it on
+          this host only, readable by the daemon user, and never sends it back to the app.
+        </Text>
+        <ExternalLink href={LINEAR_KEY_SETTINGS_URL}>Open Linear API key settings</ExternalLink>
+        <ApiKeyForm theme={theme} />
+      </View>
+    </View>
+  );
+}