@yannelli/paseo-linear-plugin 0.1.0 → 0.3.0

package/client/settings-prompts.tsx

@@ -0,0 +1,198 @@
+import { type PluginSurfaceProps, useSettings } from "@getpaseo/plugin/client";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsRow,
+  SettingsSection,
+  SettingsSelect,
+  SettingsSwitch,
+} from "@getpaseo/plugin/client/ui";
+import { useCallback, useMemo } from "react";
+import { View } from "react-native";
+import { DEFAULT_TEMPLATES } from "../shared/prompts";
+import {
+  AGENT_ACTIONS,
+  type AgentAction,
+  type Isolation,
+  type LinearSettings,
+  linearSettings,
+} from "../shared/settings";
+import { useProviders } from "./queries";
+import {
+  MultilineField,
+  type ReadySettings,
+  SaveBar,
+  SettingsGate,
+  useSettingsDraft,
+  VariablesHint,
+} from "./settings-fields";
+import type { Theme } from "./ui";
+
+const ISOLATION_OPTIONS: readonly { label: string; value: Isolation }[] = [
+  { label: "New worktree on the issue branch", value: "worktree" },
+  { label: "The project or current workspace", value: "workspace" },
+];
+const AUTO_MODEL = "__auto__";
+const TEMPLATE_TITLES: Record<AgentAction, string> = {
+  implement: "Implement prompt",
+  review: "Review prompt",
+};
+
+type Edit = ReturnType<typeof useSettingsDraft>["edit"];
+type Launch = LinearSettings["launch"];
+
+export function PromptSettings({ theme }: PluginSurfaceProps) {
+  const settings = useSettings(linearSettings);
+  const render = useCallback(
+    (ready: ReadySettings) => <PromptEditor theme={theme} settings={ready} />,
+    [theme],
+  );
+  return (
+    <SettingsGate theme={theme} title="Prompts" settings={settings}>
+      {render}
+    </SettingsGate>
+  );
+}
+
+function useLaunchSetter<Key extends keyof Launch>(edit: Edit, key: Key) {
+  return useCallback(
+    (value: Launch[Key]) =>
+      edit((current) => ({ ...current, launch: { ...current.launch, [key]: value } })),
+    [edit, key],
+  );
+}
+
+function LaunchDefaults({ launch, edit }: { launch: Launch; edit: Edit }) {
+  const providers = useProviders();
+  const modelOptions = useMemo(
+    () => [
+      { label: "Provider default", value: AUTO_MODEL },
+      ...(providers.data ?? []).flatMap((provider) =>
+        provider.models.map((model) => ({
+          label: `${provider.label} · ${model.label}`,
+          value: `${provider.id}/${model.id}`,
+        })),
+      ),
+    ],
+    [providers.data],
+  );
+  const setProvider = useLaunchSetter(edit, "provider");
+  const chooseModel = useCallback(
+    (value: string) => setProvider(value === AUTO_MODEL ? "" : value),
+    [setProvider],
+  );
+  const setIsolation = useLaunchSetter(edit, "isolation");
+  const setComments = useLaunchSetter(edit, "includeComments");
+  const setStarted = useLaunchSetter(edit, "moveToStarted");
+  const setAssign = useLaunchSetter(edit, "assignToMe");
+  const model = modelOptions.some((option) => option.value === launch.provider)
+    ? launch.provider
+    : AUTO_MODEL;
+  return (
+    <SettingsSection title="Agent defaults">
+      <SettingsCard>
+        <SettingsSelect
+          label="Model"
+          hint="Preselected when you start an agent from an issue."
+          value={model}
+          options={modelOptions}
+          onValueChange={chooseModel}
+        />
+        <SettingsSelect
+          label="Run agents in"
+          value={launch.isolation}
+          options={ISOLATION_OPTIONS}
+          onValueChange={setIsolation}
+        />
+        <SettingsSwitch
+          label="Include issue comments"
+          value={launch.includeComments}
+          onValueChange={setComments}
+        />
+        <SettingsSwitch
+          label="Move the issue to In Progress"
+          hint="Applies when an implementation agent starts."
+          value={launch.moveToStarted}
+          onValueChange={setStarted}
+        />
+        <SettingsSwitch
+          label="Assign the issue to me"
+          hint="Applies when an implementation agent starts."
+          value={launch.assignToMe}
+          onValueChange={setAssign}
+        />
+      </SettingsCard>
+    </SettingsSection>
+  );
+}
+
+function TemplateSection(props: { theme: Theme; action: AgentAction; value: string; edit: Edit }) {
+  const { action, edit } = props;
+  const setTemplate = useCallback(
+    (text: string) =>
+      edit((current) => ({ ...current, templates: { ...current.templates, [action]: text } })),
+    [edit, action],
+  );
+  const copyBuiltIn = useCallback(
+    () => setTemplate(DEFAULT_TEMPLATES[action]),
+    [setTemplate, action],
+  );
+  return (
+    <SettingsSection title={TEMPLATE_TITLES[action]}>
+      <SettingsCard>
+        <MultilineField
+          theme={props.theme}
+          label="Template"
+          hint="Leave empty to use the built-in prompt shown as the placeholder."
+          value={props.value}
+          placeholder={DEFAULT_TEMPLATES[action]}
+          minHeight={180}
+          onChange={setTemplate}
+        />
+        <SettingsAction
+          label="Start from the built-in prompt"
+          actionLabel="Copy built-in"
+          disabled={props.value === DEFAULT_TEMPLATES[action]}
+          onPress={copyBuiltIn}
+        />
+      </SettingsCard>
+    </SettingsSection>
+  );
+}
+
+function PromptEditor({ theme, settings }: { theme: Theme; settings: ReadySettings }) {
+  const { values, dirty, edit, save, discard } = useSettingsDraft(settings);
+  const saveDraft = useCallback(() => void save(), [save]);
+  return (
+    <View>
+      <LaunchDefaults launch={values.launch} edit={edit} />
+      {AGENT_ACTIONS.map((action) => (
+        <TemplateSection
+          key={action}
+          theme={theme}
+          action={action}
+          value={values.templates[action]}
+          edit={edit}
+        />
+      ))}
+      <SettingsSection title="Template variables">
+        <SettingsCard>
+          <SettingsRow
+            label="Available in every template"
+            hint="Projects can append to or replace these prompts in Linear projects settings."
+          >
+            <VariablesHint theme={theme} />
+          </SettingsRow>
+        </SettingsCard>
+      </SettingsSection>
+      <SaveBar
+        theme={theme}
+        dirty={dirty}
+        saving={settings.saving}
+        error={settings.saveError}
+        onSave={saveDraft}
+        onDiscard={discard}
+      />
+    </View>
+  );
+}

package/client/store.ts

@@ -0,0 +1,71 @@
+import { useCallback, useSyncExternalStore } from "react";
+import type { AssigneeFilter, IssueSort, StatusFilter } from "../shared/linear";
+import type { AgentAction } from "../shared/settings";
+
+// In-memory navigation state per browser scope ("screen" or a workspace panel). Paseo 0.10
+// screens take no params, so commands write the focused issue here before opening a surface.
+export interface BrowserState {
+  issueId: string | null;
+  teamId: string | null;
+  assignee: AssigneeFilter;
+  status: StatusFilter;
+  query: string;
+  sort: IssueSort;
+  /** Shows sub-issues under their parent when both are in the list. */
+  nested: boolean;
+  /** Parent issues whose sub-issues are hidden. */
+  collapsed: readonly string[];
+  /** Screen only: the Paseo project whose Linear key to use. Panels use their workspace's project. */
+  keyProjectId: string | null;
+  creating: boolean;
+  /** The agent setup page, open over the whole browser. */
+  launch: { issueId: string; action: AgentAction } | null;
+}
+
+export const SCREEN_SCOPE = "screen";
+export const panelScope = (workspaceId: string) => `panel:${workspaceId}`;
+
+const INITIAL: BrowserState = {
+  issueId: null,
+  teamId: null,
+  assignee: "me",
+  status: "active",
+  query: "",
+  sort: "updated",
+  nested: true,
+  collapsed: [],
+  keyProjectId: null,
+  creating: false,
+  launch: null,
+};
+const states = new Map<string, BrowserState>();
+const listeners = new Set<() => void>();
+
+function read(scope: string): BrowserState {
+  return states.get(scope) ?? INITIAL;
+}
+
+export function updateBrowser(scope: string, patch: Partial<BrowserState>): void {
+  states.set(scope, { ...read(scope), ...patch });
+  for (const listener of listeners) listener();
+}
+
+export function focusIssue(scope: string, issueId: string | null): void {
+  updateBrowser(scope, { issueId, creating: false, launch: null });
+}
+
+export function useBrowserState(scope: string) {
+  const state = useSyncExternalStore(
+    (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    () => read(scope),
+    () => read(scope),
+  );
+  const update = useCallback(
+    (patch: Partial<BrowserState>) => updateBrowser(scope, patch),
+    [scope],
+  );
+  return [state, update] as const;
+}

package/client/timeline-card.tsx

@@ -0,0 +1,63 @@
+import { openExternalUrl, type PluginTimelineItemProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useCallback, useMemo } from "react";
+import { Pressable, Text, View } from "react-native";
+import type { IssueCard } from "../shared/linear";
+import { ACTION_LABELS } from "../shared/prompts";
+import { usePressableStyle } from "./ui";
+
+export function IssueCardRow({ item, theme }: PluginTimelineItemProps<IssueCard>) {
+  const card = item.data;
+  const { colors } = theme;
+  const styles = useMemo(() => {
+    const idle = {
+      alignSelf: "flex-start" as const,
+      maxWidth: "100%" as const,
+      marginVertical: 4,
+      paddingHorizontal: 12,
+      paddingVertical: 10,
+      borderRadius: 10,
+      borderWidth: 1,
+      borderColor: colors.border,
+      backgroundColor: colors.surface1,
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      gap: 10,
+    };
+    return {
+      idle,
+      active: { ...idle, backgroundColor: colors.surface2 },
+      body: { flexShrink: 1, gap: 2 },
+      title: { color: colors.foreground, fontSize: 14 },
+      identifier: { color: colors.foregroundMuted },
+      meta: { flexDirection: "row" as const, alignItems: "center" as const, gap: 6 },
+      dot: { width: 7, height: 7, borderRadius: 4, backgroundColor: card.stateColor },
+      detail: { color: colors.foregroundMuted, fontSize: 12 },
+    };
+  }, [colors, card.stateColor]);
+  const style = usePressableStyle(styles.idle, styles.active);
+  const open = useCallback(() => void openExternalUrl(card.url), [card.url]);
+  return (
+    <Pressable
+      accessibilityRole="link"
+      accessibilityLabel={`Linear issue ${card.identifier}: ${card.title}. Open in Linear`}
+      onPress={open}
+      style={style}
+    >
+      <Icon name="SquareKanban" size={16} color={colors.foregroundMuted} />
+      <View style={styles.body}>
+        <Text numberOfLines={1} style={styles.title}>
+          <Text style={styles.identifier}>{`${card.identifier}  `}</Text>
+          {card.title}
+        </Text>
+        <View style={styles.meta}>
+          <View style={styles.dot} />
+          <Text style={styles.detail}>
+            {`${card.stateName} · ${ACTION_LABELS[card.action].title} agent started from Linear`}
+          </Text>
+        </View>
+      </View>
+      <Icon name="ExternalLink" size={14} color={colors.foregroundMuted} />
+    </Pressable>
+  );
+}

package/client/ui.tsx

@@ -0,0 +1,352 @@
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { type ReactNode, useCallback, useMemo } from "react";
+import {
+  ActivityIndicator,
+  Pressable,
+  type PressableStateCallbackType,
+  type StyleProp,
+  Text,
+  View,
+  type ViewStyle,
+} from "react-native";
+
+export { Avatar, LabelPill, PriorityIcon, priorityMeta, StateIcon } from "./glyphs";
+
+export type Theme = PluginSurfaceProps["theme"];
+
+type InteractionState = PressableStateCallbackType & { hovered?: boolean };
+
+export function interactive(state: PressableStateCallbackType): boolean {
+  return state.pressed || (state as InteractionState).hovered === true;
+}
+
+// Stable Pressable style callback: `idle` normally, `active` while hovered or pressed.
+// Callers pass memoized styles so the callback only changes when the styles do.
+export function usePressableStyle(idle: StyleProp<ViewStyle>, active: StyleProp<ViewStyle>) {
+  return useCallback(
+    (pressable: PressableStateCallbackType) => (interactive(pressable) ? active : idle),
+    [idle, active],
+  );
+}
+
+const HEIGHT = { xs: 28, sm: 32, md: 40 } as const;
+
+type ButtonVariant = "primary" | "secondary" | "outline" | "ghost";
+
+function buttonFill(variant: ButtonVariant, colors: Theme["colors"]): string {
+  if (variant === "primary") return colors.accent;
+  if (variant === "secondary") return colors.surface2;
+  return "transparent";
+}
+
+export interface ButtonProps {
+  theme: Theme;
+  label: string;
+  icon?: string;
+  variant?: ButtonVariant;
+  size?: keyof typeof HEIGHT;
+  disabled?: boolean;
+  busy?: boolean;
+  accessibilityLabel?: string;
+  onPress(): void;
+}
+
+function ButtonGlyph(props: { busy: boolean; icon?: string; size: number; color: string }) {
+  if (props.busy) return <ActivityIndicator size="small" color={props.color} />;
+  if (!props.icon) return null;
+  return <Icon name={props.icon} size={props.size} color={props.color} />;
+}
+
+export function Button({
+  theme,
+  label,
+  icon,
+  variant = "secondary",
+  size = "sm",
+  disabled,
+  busy,
+  accessibilityLabel,
+  onPress,
+}: ButtonProps) {
+  const colors = theme.colors;
+  const ink = variant === "primary" ? colors.accentForeground : colors.foreground;
+  const inactive = disabled === true || busy === true;
+  const styles = useMemo(() => {
+    const idle = {
+      height: HEIGHT[size],
+      paddingHorizontal: size === "xs" ? 8 : 12,
+      borderRadius: 8,
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 6,
+      backgroundColor: buttonFill(variant, colors),
+      borderWidth: variant === "outline" ? 1 : 0,
+      borderColor: colors.border,
+      opacity: inactive ? 0.5 : 1,
+    } as const;
+    return {
+      idle,
+      active: { ...idle, opacity: inactive ? 0.5 : 0.85 },
+      label: { color: ink, fontSize: size === "xs" ? 12 : 14 },
+    };
+  }, [colors, variant, size, inactive, ink]);
+  const pressStyle = usePressableStyle(styles.idle, styles.active);
+  const a11yState = useMemo(() => ({ disabled: inactive, busy: busy === true }), [inactive, busy]);
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityState={a11yState}
+      disabled={inactive}
+      onPress={onPress}
+      style={pressStyle}
+    >
+      <ButtonGlyph busy={busy === true} icon={icon} size={size === "xs" ? 14 : 16} color={ink} />
+      <Text numberOfLines={1} style={styles.label}>
+        {label}
+      </Text>
+    </Pressable>
+  );
+}
+
+export function IconButton(props: {
+  theme: Theme;
+  icon: string;
+  label: string;
+  onPress(): void;
+  disabled?: boolean;
+}) {
+  const { colors } = props.theme;
+  const styles = useMemo(() => {
+    const idle = {
+      width: 32,
+      height: 32,
+      borderRadius: 8,
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "transparent",
+      opacity: props.disabled ? 0.5 : 1,
+    } as const;
+    return { idle, active: { ...idle, backgroundColor: colors.surface2 } };
+  }, [colors, props.disabled]);
+  const pressStyle = usePressableStyle(styles.idle, styles.active);
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={props.label}
+      disabled={props.disabled}
+      onPress={props.onPress}
+      hitSlop={6}
+      style={pressStyle}
+    >
+      <Icon name={props.icon} size={16} color={colors.foregroundMuted} />
+    </Pressable>
+  );
+}
+
+function SegmentTab<Value extends string>(props: {
+  theme: Theme;
+  value: Value;
+  label: string;
+  selected: boolean;
+  onChange(value: Value): void;
+}) {
+  const { colors } = props.theme;
+  const { selected, value, onChange } = props;
+  const styles = useMemo(() => {
+    const tab = {
+      height: 26,
+      paddingHorizontal: 10,
+      borderRadius: 6,
+      justifyContent: "center",
+      backgroundColor: "transparent",
+    } as const;
+    const active = { ...tab, backgroundColor: colors.surface2 };
+    return {
+      idle: selected ? active : tab,
+      active,
+      label: { fontSize: 12, color: selected ? colors.foreground : colors.foregroundMuted },
+    };
+  }, [colors, selected]);
+  const pressStyle = usePressableStyle(styles.idle, styles.active);
+  const a11yState = useMemo(() => ({ selected }), [selected]);
+  const press = useCallback(() => onChange(value), [onChange, value]);
+  return (
+    <Pressable
+      accessibilityRole="tab"
+      accessibilityState={a11yState}
+      onPress={press}
+      style={pressStyle}
+    >
+      <Text style={styles.label}>{props.label}</Text>
+    </Pressable>
+  );
+}
+
+export function Segmented<Value extends string>(props: {
+  theme: Theme;
+  value: Value;
+  options: readonly { value: Value; label: string }[];
+  onChange(value: Value): void;
+  accessibilityLabel: string;
+}) {
+  const { colors } = props.theme;
+  const style = useMemo(
+    () =>
+      ({
+        flexDirection: "row",
+        gap: 2,
+        padding: 2,
+        borderRadius: 8,
+        backgroundColor: colors.surface1,
+      }) as const,
+    [colors],
+  );
+  return (
+    <View accessibilityRole="tablist" accessibilityLabel={props.accessibilityLabel} style={style}>
+      {props.options.map((option) => (
+        <SegmentTab
+          key={option.value}
+          theme={props.theme}
+          value={option.value}
+          label={option.label}
+          selected={option.value === props.value}
+          onChange={props.onChange}
+        />
+      ))}
+    </View>
+  );
+}
+
+export function OptionRow(props: {
+  theme: Theme;
+  label: string;
+  detail?: string;
+  leading?: ReactNode;
+  selected?: boolean;
+  onPress(): void;
+}) {
+  const { colors } = props.theme;
+  const selected = props.selected === true;
+  const styles = useMemo(() => {
+    const idle = {
+      minHeight: 40,
+      paddingHorizontal: 12,
+      paddingVertical: 8,
+      borderRadius: 8,
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 10,
+      backgroundColor: "transparent",
+    } as const;
+    return {
+      idle,
+      active: { ...idle, backgroundColor: colors.surface2 },
+      body: { flex: 1, minWidth: 0 },
+      label: { color: colors.foreground, fontSize: 14 },
+      detail: { color: colors.foregroundMuted, fontSize: 12 },
+    };
+  }, [colors]);
+  const pressStyle = usePressableStyle(styles.idle, styles.active);
+  const a11yState = useMemo(() => ({ selected }), [selected]);
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={a11yState}
+      onPress={props.onPress}
+      style={pressStyle}
+    >
+      {props.leading}
+      <View style={styles.body}>
+        <Text numberOfLines={1} style={styles.label}>
+          {props.label}
+        </Text>
+        {props.detail ? (
+          <Text numberOfLines={1} style={styles.detail}>
+            {props.detail}
+          </Text>
+        ) : null}
+      </View>
+      {selected ? <Icon name="Check" size={16} color={colors.foreground} /> : null}
+    </Pressable>
+  );
+}
+
+export function EmptyState(props: {
+  theme: Theme;
+  icon: string;
+  title: string;
+  detail?: string;
+  tone?: "default" | "danger";
+  children?: ReactNode;
+}) {
+  const { colors } = props.theme;
+  const styles = useMemo(
+    () => ({
+      root: {
+        flex: 1,
+        alignItems: "center" as const,
+        justifyContent: "center" as const,
+        gap: 10,
+        padding: 32,
+      },
+      title: {
+        color: props.tone === "danger" ? colors.statusDanger : colors.foreground,
+        fontSize: 15,
+        fontWeight: "500" as const,
+        textAlign: "center" as const,
+      },
+      detail: {
+        color: colors.foregroundMuted,
+        fontSize: 13,
+        textAlign: "center" as const,
+        maxWidth: 420,
+      },
+    }),
+    [colors, props.tone],
+  );
+  return (
+    <View style={styles.root}>
+      <Icon name={props.icon} size={28} color={colors.foregroundMuted} />
+      <Text style={styles.title}>{props.title}</Text>
+      {props.detail ? <Text style={styles.detail}>{props.detail}</Text> : null}
+      {props.children}
+    </View>
+  );
+}
+
+export function SectionLabel({ theme, children }: { theme: Theme; children: ReactNode }) {
+  const { colors } = theme;
+  const style = useMemo(
+    () =>
+      ({
+        color: colors.foregroundMuted,
+        fontSize: 12,
+        fontWeight: "500",
+        marginBottom: 6,
+      }) as const,
+    [colors],
+  );
+  return <Text style={style}>{children}</Text>;
+}
+
+export function errorMessage(error: unknown): string {
+  return error instanceof Error ? error.message : String(error);
+}
+
+export function relativeTime(iso: string, now: number = Date.now()): string {
+  const seconds = Math.max(0, Math.round((now - Date.parse(iso)) / 1000));
+  if (seconds < 60) return "just now";
+  const minutes = Math.round(seconds / 60);
+  if (minutes < 60) return `${minutes}m ago`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours}h ago`;
+  const days = Math.round(hours / 24);
+  if (days < 30) return `${days}d ago`;
+  const date = new Date(iso);
+  const month = date.toLocaleString("en-US", { month: "short" });
+  if (date.getFullYear() === new Date(now).getFullYear()) return `${month} ${date.getDate()}`;
+  return `${month} ${date.getFullYear()}`;
+}