@yannelli/paseo-linear-plugin 0.1.0 → 0.3.0

package/client/settings-fields.tsx

@@ -0,0 +1,173 @@
+import type { SettingsState } from "@getpaseo/plugin/client";
+import { TextInput } from "@getpaseo/plugin/client/react-native";
+import { SettingsAction, SettingsRow, SettingsSection } from "@getpaseo/plugin/client/ui";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import { TEMPLATE_VARIABLES } from "../shared/prompts";
+import type { LinearSettings, linearSettings } from "../shared/settings";
+import type { Theme } from "./ui";
+
+export type ReadySettings = Extract<
+  SettingsState<typeof linearSettings.schema>,
+  { status: "ready" }
+>;
+
+export function MultilineField(props: {
+  theme: Theme;
+  label: string;
+  hint?: string;
+  value: string;
+  placeholder?: string;
+  minHeight?: number;
+  onChange(value: string): void;
+}) {
+  const { colors } = props.theme;
+  const minHeight = props.minHeight ?? 96;
+  const style = useMemo(
+    () => ({
+      marginTop: 8,
+      minHeight,
+      padding: 10,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: colors.border,
+      backgroundColor: colors.surface2,
+      color: colors.foreground,
+      fontSize: 13,
+      lineHeight: 19,
+      textAlignVertical: "top" as const,
+    }),
+    [colors, minHeight],
+  );
+  return (
+    <SettingsRow label={props.label} hint={props.hint}>
+      <TextInput
+        value={props.value}
+        onChangeText={props.onChange}
+        multiline
+        placeholder={props.placeholder}
+        placeholderTextColor={colors.foregroundMuted}
+        accessibilityLabel={props.label}
+        autoCapitalize="sentences"
+        style={style}
+      />
+    </SettingsRow>
+  );
+}
+
+const VARIABLES_STYLE = { gap: 2 } as const;
+
+export function VariablesHint({ theme }: { theme: Theme }) {
+  const { colors } = theme;
+  const styles = useMemo(
+    () => ({
+      line: { color: colors.foregroundMuted, fontSize: 12 },
+      name: { color: colors.foreground },
+    }),
+    [colors],
+  );
+  return (
+    <View style={VARIABLES_STYLE}>
+      {TEMPLATE_VARIABLES.map((variable) => (
+        <Text key={variable.name} style={styles.line}>
+          <Text style={styles.name}>{`{{${variable.name}}}`}</Text>
+          {`  ${variable.description}`}
+        </Text>
+      ))}
+    </View>
+  );
+}
+
+type AnySettings = SettingsState<typeof linearSettings.schema>;
+
+function SettingsProblem(props: { theme: Theme; title: string; settings: AnySettings }) {
+  const { settings } = props;
+  const { reload, reset } = settings;
+  const style = useMemo(() => ({ color: props.theme.colors.statusDanger }), [props.theme]);
+  const retry = useCallback(() => void reload(), [reload]);
+  const restore = useCallback(() => void reset(), [reset]);
+  return (
+    <SettingsSection title={props.title}>
+      <Text style={style}>{"error" in settings ? settings.error : ""}</Text>
+      <SettingsAction label="Try again" actionLabel="Reload" onPress={retry} />
+      {settings.status === "invalid" ? (
+        <SettingsAction label="Restore default settings" actionLabel="Reset" onPress={restore} />
+      ) : null}
+    </SettingsSection>
+  );
+}
+
+export function SettingsGate(props: {
+  theme: Theme;
+  title: string;
+  settings: AnySettings;
+  children(settings: ReadySettings): ReactNode;
+}) {
+  const { settings, theme } = props;
+  const loadingStyle = useMemo(() => ({ color: theme.colors.foregroundMuted }), [theme]);
+  if (settings.status === "ready") return props.children(settings);
+  if (settings.status === "loading") return <Text style={loadingStyle}>Loading settings…</Text>;
+  return <SettingsProblem theme={theme} title={props.title} settings={settings} />;
+}
+
+const SAVE_BAR_STYLE = { gap: 8 } as const;
+
+export function SaveBar(props: {
+  theme: Theme;
+  dirty: boolean;
+  saving: boolean;
+  error: string | null;
+  onSave(): void;
+  onDiscard(): void;
+}) {
+  const errorStyle = useMemo(() => ({ color: props.theme.colors.statusDanger }), [props.theme]);
+  if (!props.dirty && !props.error) return null;
+  return (
+    <View style={SAVE_BAR_STYLE}>
+      {props.error ? (
+        <Text accessibilityRole="alert" style={errorStyle}>
+          {props.error}
+        </Text>
+      ) : null}
+      {props.dirty ? (
+        <SettingsAction
+          label="Unsaved changes"
+          actionLabel="Save"
+          disabled={props.saving}
+          onPress={props.onSave}
+        />
+      ) : null}
+      {props.dirty ? (
+        <SettingsAction
+          label="Discard changes"
+          actionLabel="Discard"
+          disabled={props.saving}
+          onPress={props.onDiscard}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+// A draft keeps the revision it started from, so a save over someone else's change conflicts
+// instead of silently overwriting it. With no draft, the editor shows the saved values.
+export function useSettingsDraft(settings: ReadySettings) {
+  const [draft, setDraft] = useState<{ values: LinearSettings; revision: string } | null>(null);
+  const values = draft?.values ?? settings.values;
+  const edit = useCallback(
+    (change: (current: LinearSettings) => LinearSettings) =>
+      setDraft((current) => ({
+        values: change(current?.values ?? settings.values),
+        revision: current?.revision ?? settings.revision,
+      })),
+    [settings.values, settings.revision],
+  );
+  const save = useCallback(async () => {
+    if (draft && (await settings.save(draft.values, draft.revision))) setDraft(null);
+  }, [draft, settings]);
+  const discard = useCallback(() => {
+    setDraft(null);
+    void settings.reload();
+  }, [settings]);
+  return { values, dirty: draft !== null, edit, save, discard };
+}

package/client/settings-keys.tsx

@@ -0,0 +1,117 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import { useToast } from "@getpaseo/plugin/client/react-native";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsRow,
+  SettingsSection,
+  SettingsSelect,
+} from "@getpaseo/plugin/client/ui";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo, useState } from "react";
+import { View } from "react-native";
+import { authClearRpc } from "../shared/linear";
+import { ApiKeyForm } from "./connect";
+import { useAuthStatus, useProjects } from "./queries";
+import { errorMessage, type Theme } from "./ui";
+
+const FORM_STYLE = { gap: 10, paddingTop: 8 } as const;
+
+// Keys for single Paseo projects. Workspaces in such a project use its key instead of the default.
+export function ProjectKeysSection({ theme }: { theme: Theme }) {
+  const auth = useAuthStatus();
+  const projects = useProjects();
+  const toast = useToast();
+  const queries = useQueryClient();
+  const clear = useRpc(authClearRpc);
+  const saved = auth.data?.projectKeys ?? [];
+  const names = useMemo(
+    () => new Map(projects.data?.map((project) => [project.projectId, project.displayName])),
+    [projects.data],
+  );
+  const options = useMemo(
+    () =>
+      (projects.data ?? []).map((project) => ({
+        value: project.projectId,
+        label: saved.some((entry) => entry.projectId === project.projectId)
+          ? `${project.displayName} (has a key)`
+          : project.displayName,
+      })),
+    [projects.data, saved],
+  );
+  const [selected, setSelected] = useState<string | null>(null);
+  const projectId = selected ?? options[0]?.value ?? null;
+  const remove = useMutation({
+    mutationFn: (id: string) => clear({ projectId: id }),
+    onSuccess: () => {
+      void queries.invalidateQueries({ queryKey: ["linear"] });
+      toast.show("Project key removed. The project uses the default key now.", {
+        variant: "success",
+      });
+    },
+    onError: (error) => toast.error(errorMessage(error)),
+  });
+
+  return (
+    <SettingsSection title="Project keys">
+      <SettingsCard>
+        <SettingsRow
+          label="Use a different Linear key for a project"
+          hint="Workspaces in the project use its key. Other projects use the default key above."
+        />
+        {saved.map((entry) => (
+          <SavedKeyRow
+            key={entry.projectId}
+            name={names.get(entry.projectId) ?? entry.projectId}
+            projectId={entry.projectId}
+            keyHint={entry.keyHint}
+            disabled={remove.isPending}
+            onRemove={remove.mutate}
+          />
+        ))}
+        {projectId ? (
+          <>
+            <SettingsSelect
+              label="Project"
+              value={projectId}
+              options={options}
+              onValueChange={setSelected}
+            />
+            <SettingsRow label="Project API key" hint="Replaces the project's key if it has one.">
+              <View style={FORM_STYLE}>
+                <ApiKeyForm
+                  key={projectId}
+                  theme={theme}
+                  projectId={projectId}
+                  submitLabel="Save project key"
+                />
+              </View>
+            </SettingsRow>
+          </>
+        ) : (
+          <SettingsRow label="Project" hint="Add a project to Paseo first." />
+        )}
+      </SettingsCard>
+    </SettingsSection>
+  );
+}
+
+function SavedKeyRow(props: {
+  name: string;
+  projectId: string;
+  keyHint: string;
+  disabled: boolean;
+  onRemove(projectId: string): void;
+}) {
+  const { onRemove, projectId } = props;
+  const press = useCallback(() => onRemove(projectId), [onRemove, projectId]);
+  return (
+    <SettingsAction
+      label={props.name}
+      hint={`Key ${props.keyHint}`}
+      actionLabel="Remove"
+      disabled={props.disabled}
+      onPress={press}
+    />
+  );
+}

package/client/settings-projects.tsx

@@ -0,0 +1,281 @@
+import { type PluginSurfaceProps, useSettings } from "@getpaseo/plugin/client";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsRow,
+  SettingsSection,
+  SettingsSelect,
+  SettingsSwitch,
+} from "@getpaseo/plugin/client/ui";
+import { useCallback, useMemo, useState } from "react";
+import { Text, View } from "react-native";
+import type { LinearTeam } from "../shared/linear";
+import { ACTION_LABELS } from "../shared/prompts";
+import {
+  AGENT_ACTIONS,
+  type AgentAction,
+  emptyProjectConfig,
+  linearSettings,
+  type ProjectConfig,
+  type PromptMode,
+  upsertProject,
+} from "../shared/settings";
+import { effectiveKeyScope, KeyScopeProvider } from "./key-scope";
+import { type PaseoProjectOption, useAuthStatus, useCatalog, useProjects } from "./queries";
+import {
+  MultilineField,
+  type ReadySettings,
+  SaveBar,
+  SettingsGate,
+  useSettingsDraft,
+} from "./settings-fields";
+import type { Theme } from "./ui";
+
+const MODE_OPTIONS: readonly { label: string; value: PromptMode }[] = [
+  { label: "Use the default prompt", value: "default" },
+  { label: "Append to the default prompt", value: "append" },
+  { label: "Replace the default prompt", value: "replace" },
+];
+const STEPS_PLACEHOLDER = "Run the type checker\nUpdate the changelog\nOpen a draft pull request";
+
+type Change = (patch: Partial<ProjectConfig>) => void;
+
+export function ProjectSettings({ theme }: PluginSurfaceProps) {
+  const settings = useSettings(linearSettings);
+  const render = useCallback(
+    (ready: ReadySettings) => <ProjectEditor theme={theme} settings={ready} />,
+    [theme],
+  );
+  return (
+    <SettingsGate theme={theme} title="Projects" settings={settings}>
+      {render}
+    </SettingsGate>
+  );
+}
+
+function projectOptions(
+  projects: readonly PaseoProjectOption[] | undefined,
+  stored: readonly ProjectConfig[],
+) {
+  const known = (projects ?? []).map((project) => {
+    const customized = stored.some((entry) => entry.projectId === project.projectId);
+    return {
+      value: project.projectId,
+      label: customized ? `${project.displayName} · customized` : project.displayName,
+    };
+  });
+  const missing = stored
+    .filter((entry) => !projects?.some((project) => project.projectId === entry.projectId))
+    .map((entry) => ({ value: entry.projectId, label: `${entry.displayName} · not on this host` }));
+  return [...known, ...missing];
+}
+
+function ProjectEditor({ theme, settings }: { theme: Theme; settings: ReadySettings }) {
+  const { values, dirty, edit, save, discard } = useSettingsDraft(settings);
+  const projects = useProjects();
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const options = useMemo(
+    () => projectOptions(projects.data, values.projects),
+    [projects.data, values.projects],
+  );
+  const projectId = selectedId ?? options[0]?.value ?? null;
+  const paseoProject = projects.data?.find((project) => project.projectId === projectId) ?? null;
+  const stored = values.projects.find((entry) => entry.projectId === projectId) ?? null;
+  const config = useMemo(
+    () =>
+      stored ??
+      emptyProjectConfig({
+        projectId: projectId ?? "",
+        displayName: paseoProject?.displayName ?? projectId ?? "",
+        rootPath: paseoProject?.rootPath ?? "",
+      }),
+    [stored, projectId, paseoProject],
+  );
+  const change = useCallback<Change>(
+    (patch) =>
+      edit((current) => ({
+        ...current,
+        projects: upsertProject(current, { ...config, ...patch }),
+      })),
+    [edit, config],
+  );
+  const remove = useCallback(
+    () =>
+      edit((current) => ({
+        ...current,
+        projects: current.projects.filter((entry) => entry.projectId !== config.projectId),
+      })),
+    [edit, config.projectId],
+  );
+  const saveDraft = useCallback(() => void save(), [save]);
+  const mutedStyle = useMemo(() => ({ color: theme.colors.foregroundMuted }), [theme]);
+
+  if (projects.isPending) return <Text style={mutedStyle}>Loading projects…</Text>;
+  if (!projectId) {
+    return (
+      <SettingsSection title="Projects">
+        <Text style={mutedStyle}>Add a project to Paseo to customize its Linear prompts.</Text>
+      </SettingsSection>
+    );
+  }
+  return (
+    <View>
+      <SettingsSection title="Project">
+        <SettingsCard>
+          <SettingsSelect
+            label="Customize"
+            value={projectId}
+            options={options}
+            onValueChange={setSelectedId}
+          />
+          <SettingsRow label="Folder" hint={config.rootPath || "Unknown"} />
+        </SettingsCard>
+      </SettingsSection>
+      <TeamsSection config={config} change={change} />
+      <InstructionsSection theme={theme} config={config} change={change} />
+      {AGENT_ACTIONS.map((action) => (
+        <ActionSection key={action} theme={theme} action={action} config={config} change={change} />
+      ))}
+      {stored ? (
+        <SettingsSection title="Reset">
+          <SettingsCard>
+            <SettingsAction
+              label="Remove this project's customization"
+              actionLabel="Remove"
+              onPress={remove}
+            />
+          </SettingsCard>
+        </SettingsSection>
+      ) : null}
+      <SaveBar
+        theme={theme}
+        dirty={dirty}
+        saving={settings.saving}
+        error={settings.saveError}
+        onSave={saveDraft}
+        onDiscard={discard}
+      />
+    </View>
+  );
+}
+
+function TeamsSection({ config, change }: { config: ProjectConfig; change: Change }) {
+  const auth = useAuthStatus();
+  const scope = effectiveKeyScope(config.projectId, auth.data?.projectKeys);
+  return (
+    <KeyScopeProvider key={scope ?? "default"} projectId={scope}>
+      <TeamSwitches
+        config={config}
+        change={change}
+        enabled={scope !== null || auth.data?.configured === true}
+      />
+    </KeyScopeProvider>
+  );
+}
+
+function TeamSwitches(props: { config: ProjectConfig; change: Change; enabled: boolean }) {
+  const { config, change } = props;
+  const catalog = useCatalog(props.enabled);
+  return (
+    <SettingsSection title="Linear teams">
+      <SettingsCard>
+        {catalog.data ? (
+          catalog.data.teams.map((team) => (
+            <TeamSwitch key={team.id} team={team} config={config} change={change} />
+          ))
+        ) : (
+          <SettingsRow label="Teams" hint="Connect Linear to map its teams to this project." />
+        )}
+      </SettingsCard>
+    </SettingsSection>
+  );
+}
+
+function TeamSwitch(props: { team: LinearTeam; config: ProjectConfig; change: Change }) {
+  const { team, config, change } = props;
+  const toggle = useCallback(
+    (enabled: boolean) =>
+      change({
+        teamIds: enabled
+          ? [...config.teamIds, team.id]
+          : config.teamIds.filter((id) => id !== team.id),
+      }),
+    [change, config.teamIds, team.id],
+  );
+  return (
+    <SettingsSwitch
+      label={`${team.name} (${team.key})`}
+      hint="Issues from this team default to this project when you start an agent."
+      value={config.teamIds.includes(team.id)}
+      onValueChange={toggle}
+    />
+  );
+}
+
+function InstructionsSection(props: { theme: Theme; config: ProjectConfig; change: Change }) {
+  const { change } = props;
+  const setInstructions = useCallback((instructions: string) => change({ instructions }), [change]);
+  const setSteps = useCallback((text: string) => change({ steps: text.split("\n") }), [change]);
+  return (
+    <SettingsSection title="Instructions and steps">
+      <SettingsCard>
+        <MultilineField
+          theme={props.theme}
+          label="Project instructions"
+          hint="Added to every implement and review prompt for this project."
+          value={props.config.instructions}
+          placeholder="Example: This is a pnpm monorepo. Run pnpm test --filter <package> before finishing."
+          onChange={setInstructions}
+        />
+        <MultilineField
+          theme={props.theme}
+          label="Steps"
+          hint="One step per line. Agents receive them as a numbered checklist."
+          value={props.config.steps.join("\n")}
+          placeholder={STEPS_PLACEHOLDER}
+          onChange={setSteps}
+        />
+      </SettingsCard>
+    </SettingsSection>
+  );
+}
+
+function ActionSection(props: {
+  theme: Theme;
+  action: AgentAction;
+  config: ProjectConfig;
+  change: Change;
+}) {
+  const { action, change } = props;
+  const override = props.config[action];
+  const setMode = useCallback(
+    (mode: PromptMode) => change({ [action]: { ...override, mode } }),
+    [change, action, override],
+  );
+  const setText = useCallback(
+    (text: string) => change({ [action]: { ...override, text } }),
+    [change, action, override],
+  );
+  return (
+    <SettingsSection title={`${ACTION_LABELS[action].title} prompt`}>
+      <SettingsCard>
+        <SettingsSelect
+          label="Prompt"
+          value={override.mode}
+          options={MODE_OPTIONS}
+          onValueChange={setMode}
+        />
+        {override.mode === "default" ? null : (
+          <MultilineField
+            theme={props.theme}
+            label={override.mode === "append" ? "Text to append" : "Replacement prompt"}
+            hint="Supports {{identifier}}, {{title}}, {{url}}, {{branch}}, and {{issue}}."
+            value={override.text}
+            minHeight={140}
+            onChange={setText}
+          />
+        )}
+      </SettingsCard>
+    </SettingsSection>
+  );
+}