@yannelli/paseo-linear-plugin 1.0.1 → 1.1.0-alpha.0

package/client/project-knowledge.tsx

@@ -0,0 +1,87 @@
+import { useRpc } from "@getpaseo/plugin/client";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsRow,
+  SettingsSection,
+} from "@getpaseo/plugin/client/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  areaLabel,
+  knowledgeGetRpc,
+  knowledgeInspectRpc,
+  MAX_KNOWLEDGE_FILES,
+  type ProjectBrief,
+} from "../shared/knowledge";
+import { errorMessage, relativeTime } from "./ui";
+
+const AREAS_SHOWN = 24;
+
+export const knowledgeKey = (projectId: string) => ["linear", "knowledge", projectId] as const;
+
+function countText(entries: readonly { name: string; files: number }[]): string {
+  return entries.map((entry) => `${entry.name} ${entry.files}`).join(", ");
+}
+
+function overview(brief: ProjectBrief): string {
+  const source = brief.source === "git" ? "files git tracks" : "files found in the folder";
+  const truncated = brief.truncated ? `; the first ${MAX_KNOWLEDGE_FILES.toLocaleString()} are kept` : "";
+  return `${brief.fileCount} ${source}${truncated}. Inspected ${relativeTime(brief.inspectedAt)}.`;
+}
+
+/** What the daemon knows about the project's files, and a button to inspect it again. */
+export function ProjectKnowledgeSection(props: { projectId: string }) {
+  const { projectId } = props;
+  const get = useRpc(knowledgeGetRpc);
+  const inspect = useRpc(knowledgeInspectRpc);
+  const queries = useQueryClient();
+  const query = useQuery({
+    queryKey: knowledgeKey(projectId),
+    queryFn: () => get({ projectId }),
+    staleTime: 60_000,
+    retry: false,
+  });
+  const again = useMutation({
+    mutationFn: () => inspect({ projectId }),
+    onSuccess: (data) => queries.setQueryData(knowledgeKey(projectId), data),
+  });
+  const brief = query.data?.knowledge ?? null;
+  const busy = query.isPending || again.isPending;
+  const failure = again.error ?? query.error;
+  const areas = brief?.areas.filter((area) => area.path !== "") ?? [];
+  return (
+    <SettingsSection title="Project knowledge">
+      <SettingsCard>
+        <SettingsAction
+          label="Inspect the project"
+          hint="The daemon lists the project's files and reads its manifests to find its services, packages, and main folders. No agent runs. Explore and setup agents, ticket-text maps, and Linear Live use what it finds. It inspects again when the knowledge is 6 hours old."
+          actionLabel={busy ? "Inspecting…" : "Inspect again"}
+          disabled={busy}
+          onPress={() => again.mutate()}
+        />
+        {failure ? <SettingsRow label="Inspection did not finish" error={errorMessage(failure)} /> : null}
+        {brief ? (
+          <>
+            <SettingsRow label="Files" hint={overview(brief)} />
+            {brief.summary ? <SettingsRow label="Project" hint={brief.summary} /> : null}
+            {brief.languages.length > 0 ? (
+              <SettingsRow label="Languages" hint={countText(brief.languages)} />
+            ) : null}
+            {brief.commands.length > 0 ? (
+              <SettingsRow label="Commands" hint={brief.commands.join(", ")} />
+            ) : null}
+            {brief.guides.length > 0 ? <SettingsRow label="Guides" hint={brief.guides.join(", ")} /> : null}
+            {areas.slice(0, AREAS_SHOWN).map((area) => {
+              const files = `${area.files} ${area.files === 1 ? "file" : "files"}`;
+              const parts = [areaLabel(area), files, area.languages.join("/"), area.summary];
+              return <SettingsRow key={area.path} label={area.path} hint={parts.filter(Boolean).join(" · ")} />;
+            })}
+            {areas.length > AREAS_SHOWN ? (
+              <SettingsRow label={`${areas.length - AREAS_SHOWN} more areas`} />
+            ) : null}
+          </>
+        ) : null}
+      </SettingsCard>
+    </SettingsSection>
+  );
+}

package/client/settings-access.tsx

@@ -0,0 +1,56 @@
+import { SettingsCard, SettingsSection, SettingsSwitch } from "@getpaseo/plugin/client/ui";
+import { useEffect } from "react";
+import {
+  type LinearSettings,
+  type ProjectAccess,
+  projectEnabled,
+  withProjectAccess,
+} from "../shared/settings";
+import { publishAccess } from "./access";
+import type { PaseoProjectOption } from "./queries";
+
+type Edit = (change: (current: LinearSettings) => LinearSettings) => void;
+
+/** Where Linear works: one switch for every project, then one per project. */
+export function AccessSection(props: {
+  access: ProjectAccess;
+  saved: ProjectAccess;
+  projects: readonly PaseoProjectOption[] | undefined;
+  edit: Edit;
+}) {
+  const { access, saved, edit } = props;
+  useEffect(() => publishAccess(saved), [saved]);
+  const setAccess = (next: (current: ProjectAccess) => ProjectAccess) =>
+    edit((current) => ({ ...current, access: next(current.access) }));
+  return (
+    <SettingsSection title="Use Linear in">
+      <SettingsCard>
+        <SettingsSwitch
+          label="All projects"
+          hint={
+            access.allProjects
+              ? "On everywhere. Turn off a project below to hide Linear there."
+              : "Off everywhere. Turn on a project below to use Linear there."
+          }
+          value={access.allProjects}
+          onValueChange={(allProjects) => setAccess((current) => ({ ...current, allProjects }))}
+        />
+        {(props.projects ?? []).map((project) => (
+          <SettingsSwitch
+            key={project.projectId}
+            label={project.displayName}
+            hint={
+              access.projects[project.projectId] === undefined
+                ? "Follows All projects"
+                : project.rootPath
+            }
+            value={projectEnabled(access, project.projectId)}
+            onValueChange={(enabled) =>
+              setAccess((current) => withProjectAccess(current, project.projectId, enabled))
+            }
+          />
+        ))}
+      </SettingsCard>
+    </SettingsSection>
+  );
+}

package/client/settings-agents.tsx

@@ -0,0 +1,113 @@
+import { type PluginSurfaceProps, useSettings } from "@getpaseo/plugin/client";
+import { SettingsCard, SettingsRow, SettingsSection, SettingsSelect, SettingsSwitch } from "@getpaseo/plugin/client/ui";
+import { useCallback } from "react";
+import { View } from "react-native";
+import { linearSettings, MAX_AGENTS_LIMIT, type ToolSettings } from "../shared/settings";
+import { type ReadySettings, SaveBar, SettingsGate, useSettingsDraft } from "./settings-fields";
+import type { Theme } from "./ui";
+
+// Settings for all projects. A project can change each of them in Linear settings, under
+// Projects.
+
+const LIMITS = [0, 1, 2, 3, 4, 6, 8, 12, MAX_AGENTS_LIMIT];
+
+export const limitLabel = (limit: number) => (limit === 0 ? "No limit" : limit === 1 ? "1 agent" : `${limit} agents`);
+
+export const LIMIT_OPTIONS = LIMITS.map((limit) => ({ label: limitLabel(limit), value: String(limit) }));
+
+export const COPY = {
+  enabled: {
+    label: "Give agents the Linear tools",
+    hint: "Agents started from an issue get the plugin's linear MCP server when Keep Linear updated, Hand off work to Paseo agents, or sub-issue agents need it. When it is off, agents that have the server get no tools from it.",
+  },
+  allowEdits: {
+    label: "Let agents edit issue descriptions",
+    hint: "The edit_issue tool, which checks off task list items and updates the plan. When it is off, agents can only read the issue and its sub-issues.",
+  },
+  assignAgents: {
+    label: "Choose agents for sub-issues",
+    hint: "The agent setup page lists the sub-issues, and you can choose an agent, model, and thinking for each one. The agent you start hands those sub-issues to them.",
+  },
+  maxAgents: {
+    label: "Agents at the same time",
+    hint: "How many agents one launch can run at the same time with start_agent. It refuses to start more until one of them finishes.",
+  },
+} as const;
+
+export function AgentSettings({ theme }: PluginSurfaceProps) {
+  const settings = useSettings(linearSettings);
+  const render = useCallback(
+    (ready: ReadySettings) => <AgentEditor theme={theme} settings={ready} />,
+    [theme],
+  );
+  return (
+    <SettingsGate theme={theme} title="Agents" settings={settings}>
+      {render}
+    </SettingsGate>
+  );
+}
+
+function AgentEditor({ theme, settings }: { theme: Theme; settings: ReadySettings }) {
+  const { values, dirty, edit, save, discard } = useSettingsDraft(settings);
+  const { tools } = values;
+  const change = useCallback(
+    (patch: Partial<ToolSettings>) => edit((current) => ({ ...current, tools: { ...current.tools, ...patch } })),
+    [edit],
+  );
+  return (
+    <View>
+      <SettingsSection title="Linear tools">
+        <SettingsCard>
+          <SettingsSwitch
+            label={COPY.enabled.label}
+            hint={COPY.enabled.hint}
+            value={tools.enabled}
+            onValueChange={(enabled) => change({ enabled })}
+          />
+          <SettingsSwitch
+            label={COPY.allowEdits.label}
+            hint={COPY.allowEdits.hint}
+            value={tools.allowEdits}
+            disabled={!tools.enabled}
+            onValueChange={(allowEdits) => change({ allowEdits })}
+          />
+        </SettingsCard>
+      </SettingsSection>
+      <SettingsSection title="Agents on sub-issues">
+        <SettingsCard>
+          <SettingsSwitch
+            label={COPY.assignAgents.label}
+            hint={COPY.assignAgents.hint}
+            value={tools.assignAgents}
+            disabled={!tools.enabled}
+            onValueChange={(assignAgents) => change({ assignAgents })}
+          />
+          <SettingsSelect
+            label={COPY.maxAgents.label}
+            hint={COPY.maxAgents.hint}
+            value={String(tools.maxAgents)}
+            options={LIMIT_OPTIONS}
+            disabled={!tools.enabled}
+            onValueChange={(value) => change({ maxAgents: Number(value) })}
+          />
+        </SettingsCard>
+      </SettingsSection>
+      <SettingsSection title="Projects">
+        <SettingsCard>
+          <SettingsRow
+            label="Values for one project"
+            hint="A project can use its own values for these settings and for the agent defaults. Set them in Linear settings, under Projects."
+          />
+        </SettingsCard>
+      </SettingsSection>
+      <SaveBar
+        theme={theme}
+        dirty={dirty}
+        saving={settings.saving}
+        error={settings.saveError}
+        onSave={() => void save()}
+        onDiscard={discard}
+      />
+    </View>
+  );
+}

package/client/settings-fields.tsx

@@ -5,6 +5,7 @@ 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 { MONO } from "./live-issues";
 import type { Theme } from "./ui";
 
 export type ReadySettings = Extract<
@@ -19,10 +20,14 @@ export function MultilineField(props: {
   value: string;
   placeholder?: string;
   minHeight?: number;
+  error?: string | null;
+  /** Markup, not prose: a monospace font and no autocorrect. */
+  code?: boolean;
   onChange(value: string): void;
 }) {
   const { colors } = props.theme;
   const minHeight = props.minHeight ?? 96;
+  const { code } = props;
   const style = useMemo(
     () => ({
       marginTop: 8,
@@ -36,11 +41,12 @@ export function MultilineField(props: {
       fontSize: 13,
       lineHeight: 19,
       textAlignVertical: "top" as const,
+      ...(code ? { fontFamily: MONO, fontSize: 12 } : {}),
     }),
-    [colors, minHeight],
+    [colors, minHeight, code],
   );
   return (
-    <SettingsRow label={props.label} hint={props.hint}>
+    <SettingsRow label={props.label} hint={props.hint} error={props.error}>
       <TextInput
         value={props.value}
         onChangeText={props.onChange}
@@ -48,7 +54,9 @@ export function MultilineField(props: {
         placeholder={props.placeholder}
         placeholderTextColor={colors.foregroundMuted}
         accessibilityLabel={props.label}
-        autoCapitalize="sentences"
+        autoCapitalize={code ? "none" : "sentences"}
+        autoCorrect={!code}
+        spellCheck={!code}
         style={style}
       />
     </SettingsRow>

package/client/settings-icon.tsx

@@ -0,0 +1,277 @@
+import { type PluginSurfaceProps, useSettings } from "@getpaseo/plugin/client";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsInput,
+  SettingsRow,
+  SettingsSection,
+  SettingsSelect,
+  SettingsSwitch,
+} from "@getpaseo/plugin/client/ui";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useCallback, useMemo, useState } from "react";
+import { Platform, Text, View } from "react-native";
+import {
+  HEX_COLOR,
+  type IconPaint,
+  type IconSettings,
+  MAX_SVG_LENGTH,
+  MENU_ICONS,
+  parseIconSvg,
+} from "../shared/custom-icon";
+import { linearSettings } from "../shared/settings";
+import { IconGlyph, useIconSettings } from "./plugin-icon";
+import { MultilineField, type ReadySettings, SaveBar, SettingsGate, useSettingsDraft } from "./settings-fields";
+import type { Theme } from "./ui";
+import { canPickFiles, pickTextFile } from "./web";
+
+const PAINT_OPTIONS: readonly { label: string; value: IconPaint }[] = [
+  { label: "Original colors", value: "original" },
+  { label: "Theme color, like Paseo's icons", value: "theme" },
+  { label: "Theme accent", value: "accent" },
+  { label: "Linear indigo, the plugin color", value: "linear" },
+  { label: "Custom color", value: "custom" },
+];
+const PREVIEW_SIZES = [14, 16, 22, 28] as const;
+const SVG_FILES = ".svg,image/svg+xml";
+/** Exports often carry comments and metadata, so the file may be larger than the saved SVG. */
+const MAX_FILE_BYTES = MAX_SVG_LENGTH * 4;
+
+export function IconSettingsScreen({ theme }: PluginSurfaceProps) {
+  const settings = useSettings(linearSettings);
+  useIconSettings();
+  const render = useCallback(
+    (ready: ReadySettings) => <IconEditor theme={theme} settings={ready} />,
+    [theme],
+  );
+  return (
+    <SettingsGate theme={theme} title="Icon" settings={settings}>
+      {render}
+    </SettingsGate>
+  );
+}
+
+function IconPreview({ theme, icon }: { theme: Theme; icon: IconSettings }) {
+  const { colors } = theme;
+  const styles = useMemo(
+    () => ({
+      row: { flexDirection: "row" as const, flexWrap: "wrap" as const, alignItems: "center" as const, gap: 14, paddingTop: 8 },
+      pill: {
+        flexDirection: "row" as const,
+        alignItems: "center" as const,
+        gap: 6,
+        height: 26,
+        paddingHorizontal: 10,
+        borderRadius: 13,
+        borderWidth: 1,
+        borderColor: colors.border,
+        backgroundColor: colors.surface1,
+      },
+      label: { color: colors.foreground, fontSize: 12 },
+    }),
+    [colors],
+  );
+  return (
+    <View style={styles.row}>
+      {PREVIEW_SIZES.map((size) => (
+        <IconGlyph key={size} icon={icon} size={size} color={colors.foregroundMuted} theme={theme} />
+      ))}
+      <View style={styles.pill}>
+        <IconGlyph icon={icon} size={14} color={colors.foregroundMuted} theme={theme} />
+        <Text style={styles.label}>ENG-123</Text>
+      </View>
+      <View style={styles.pill}>
+        <IconGlyph icon={icon} size={14} color={colors.foreground} theme={theme} />
+        <Text style={styles.label}>Linear</Text>
+      </View>
+    </View>
+  );
+}
+
+function MenuPreview({ theme, name }: { theme: Theme; name: string }) {
+  const { colors } = theme;
+  const styles = useMemo(
+    () => ({
+      tab: {
+        flexDirection: "row" as const,
+        alignSelf: "flex-start" as const,
+        alignItems: "center" as const,
+        gap: 6,
+        marginTop: 8,
+        paddingHorizontal: 10,
+        paddingVertical: 5,
+        borderRadius: 6,
+        backgroundColor: colors.surface2,
+      },
+      label: { color: colors.foreground, fontSize: 12 },
+    }),
+    [colors],
+  );
+  return (
+    <View style={styles.tab}>
+      <Icon name={name} size={14} color={colors.foregroundMuted} />
+      <Text style={styles.label}>Linear</Text>
+    </View>
+  );
+}
+
+function IconEditor({ theme, settings }: { theme: Theme; settings: ReadySettings }) {
+  const { values, dirty, edit, save, discard } = useSettingsDraft(settings);
+  const icon = values.icon;
+  const [markup, setMarkup] = useState(icon.svg);
+  const [markupError, setMarkupError] = useState<string | null>(null);
+  const [colorError, setColorError] = useState<string | null>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
+  const change = useCallback(
+    (patch: Partial<IconSettings>) => edit((current) => ({ ...current, icon: { ...current.icon, ...patch } })),
+    [edit],
+  );
+  // The draft keeps the last SVG that passed the checks, so the preview never breaks.
+  const applyMarkup = useCallback(
+    (text: string) => {
+      setMarkup(text);
+      if (!text.trim()) {
+        setMarkupError(null);
+        change({ svg: "" });
+        return;
+      }
+      const parsed = parseIconSvg(text);
+      setMarkupError("error" in parsed ? parsed.error : null);
+      if ("svg" in parsed) change({ svg: parsed.svg });
+    },
+    [change],
+  );
+  const choose = useCallback(
+    () =>
+      pickTextFile(SVG_FILES, MAX_FILE_BYTES, (file) => {
+        if ("error" in file) {
+          setMarkupError(file.error);
+          return;
+        }
+        setFileName(file.name);
+        applyMarkup(file.text);
+      }),
+    [applyMarkup],
+  );
+  const removeSvg = useCallback(() => {
+    setFileName(null);
+    applyMarkup("");
+  }, [applyMarkup]);
+  const changeColor = useCallback(
+    (text: string) => {
+      const color = text.trim();
+      const valid = HEX_COLOR.test(color);
+      setColorError(valid ? null : "Use a hex color, such as #5E6AD2.");
+      if (valid) change({ color });
+    },
+    [change],
+  );
+  const reset = useCallback(() => {
+    discard();
+    setMarkup(settings.values.icon.svg);
+    setMarkupError(null);
+    setColorError(null);
+    setFileName(null);
+  }, [discard, settings.values.icon.svg]);
+  const native = Platform.OS !== "web";
+  const custom = icon.svg !== "";
+  const menuOptions = useMemo(() => {
+    const options = MENU_ICONS.map((entry) => ({ label: entry.label, value: entry.name }));
+    if (!options.some((option) => option.value === icon.menu)) options.push({ label: icon.menu, value: icon.menu });
+    return options;
+  }, [icon.menu]);
+
+  return (
+    <View>
+      <SettingsSection title="Plugin icon">
+        <SettingsCard>
+          <SettingsRow
+            label="Preview"
+            hint={
+              native
+                ? "The iOS and Android apps cannot draw plugin SVG images, so they show the built-in icon in the color you choose."
+                : "Composer pills, the Linear sidebar row, and Linear screens use this icon. Panel tabs and menus use the built-in icon below."
+            }
+          >
+            <IconPreview theme={theme} icon={icon} />
+          </SettingsRow>
+          {canPickFiles ? (
+            <SettingsAction
+              label="SVG file"
+              hint={fileName ? `Loaded ${fileName}. Save to use it.` : "Choose an .svg file. The plugin saves a copy in its settings."}
+              actionLabel="Choose file"
+              onPress={choose}
+            />
+          ) : null}
+          <MultilineField
+            theme={theme}
+            label="SVG markup"
+            hint="Paste SVG markup, or edit it here. Scripts, links to other files, and bitmap images are not allowed. Clear it to use the built-in icon."
+            value={markup}
+            placeholder={'<svg viewBox="0 0 24 24">…</svg>'}
+            error={markupError}
+            code
+            onChange={applyMarkup}
+          />
+          <SettingsAction
+            label="Remove SVG"
+            hint="Use the built-in icon everywhere."
+            actionLabel="Remove"
+            disabled={!custom && markup === ""}
+            onPress={removeSvg}
+          />
+        </SettingsCard>
+      </SettingsSection>
+      <SettingsSection title="Color and fill">
+        <SettingsCard>
+          <SettingsSelect
+            label="Color"
+            hint="Original colors keep the SVG as drawn, and currentColor follows Paseo. The other choices paint the whole icon one color."
+            value={icon.paint}
+            options={PAINT_OPTIONS}
+            onValueChange={(paint) => change({ paint })}
+          />
+          {icon.paint === "custom" ? (
+            <SettingsInput
+              label="Custom color"
+              hint="A hex color, such as #5E6AD2 or #5E6AD2CC with transparency."
+              initialValue={icon.color}
+              placeholder="#5E6AD2"
+              error={colorError}
+              onChangeText={changeColor}
+            />
+          ) : null}
+          <SettingsSwitch
+            label="Solid"
+            hint={custom ? "Fill shapes that only have an outline, so line icons show as solid shapes." : "Add an SVG to use this. Built-in icons stay as drawn."}
+            value={icon.solid}
+            disabled={!custom}
+            onValueChange={(solid) => change({ solid })}
+          />
+        </SettingsCard>
+      </SettingsSection>
+      <SettingsSection title="Built-in icon">
+        <SettingsCard>
+          <SettingsSelect
+            label="Built-in icon"
+            hint="Panel tabs, the new tab menu, and Command Center take built-in icons only, so they use this one. Without an SVG, every place uses it. Tabs that are open change when you reload Paseo or open them again."
+            value={icon.menu}
+            options={menuOptions}
+            onValueChange={(menu) => change({ menu })}
+          />
+          <SettingsRow label="Tab preview">
+            <MenuPreview theme={theme} name={icon.menu} />
+          </SettingsRow>
+        </SettingsCard>
+      </SettingsSection>
+      <SaveBar
+        theme={theme}
+        dirty={dirty}
+        saving={settings.saving}
+        error={settings.saveError}
+        onSave={() => void save()}
+        onDiscard={reset}
+      />
+    </View>
+  );
+}