@yannelli/paseo-linear-plugin 1.1.0-beta.1 → 1.1.0-beta.3

package/client/plugin-icon.tsx

@@ -0,0 +1,43 @@
+import { useSettings } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { useMemo } from "react";
+import { Image, Platform } from "react-native";
+import { type IconSettings, iconMarkup, paintColor } from "../shared/custom-icon";
+import { linearSettings } from "../shared/settings";
+import { svgDataUri } from "./provider-icon";
+import type { Theme } from "./ui";
+
+// The plugin's icon in pills, the sidebar, and plugin screens. Native apps cannot draw SVG
+// images from plugins, so they show the built-in icon in the chosen color.
+
+export const BUILT_IN_ICON = "SquareKanban";
+
+export interface PluginIconProps {
+  size: number;
+  /** The color Paseo gives the icon in this place. */
+  color: string;
+  theme?: Theme | null;
+}
+
+/** Draws icon settings, saved or not yet saved. */
+export function IconGlyph(props: PluginIconProps & { icon: IconSettings | null }) {
+  const { icon, size, color } = props;
+  const accent = props.theme?.colors.accent ?? color;
+  const paint = icon ? paintColor(icon, { ink: color, accent }) : null;
+  const svg = Platform.OS === "web" ? (icon?.svg ?? "") : "";
+  const solid = icon?.solid === true;
+  const source = useMemo(() => {
+    const markup = svg ? iconMarkup(svg, { ink: color, paint, solid }) : null;
+    return markup ? { uri: svgDataUri(markup, color) } : null;
+  }, [svg, color, paint, solid]);
+  const style = useMemo(() => ({ width: size, height: size }), [size]);
+  if (!source) return <Icon name={BUILT_IN_ICON} size={size} color={paint ?? color} />;
+  return <Image source={source} style={style} resizeMode="contain" accessibilityIgnoresInvertColors />;
+}
+
+/** The plugin icon from the saved settings. The built-in icon shows while they load. */
+export function PluginIcon(props: PluginIconProps) {
+  const settings = useSettings(linearSettings);
+  const icon = settings.status === "ready" ? settings.values.icon : null;
+  return <IconGlyph {...props} icon={icon} />;
+}

package/client/project-init.tsx

@@ -6,7 +6,7 @@ import {
   SettingsSection,
   SettingsSwitch,
 } from "@getpaseo/plugin/client/ui";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Text, View } from "react-native";
 import { initStartRpc, initStatusRpc } from "../shared/live";
@@ -17,6 +17,7 @@ import {
   proposalDiffs,
 } from "../shared/project-setup";
 import type { ProjectConfig } from "../shared/settings";
+import { knowledgeKey } from "./project-knowledge";
 import { Button, errorMessage, type Theme } from "./ui";
 
 // Setup runs on the daemon. Remember the job per project so leaving the screen keeps it.
@@ -26,8 +27,10 @@ export function ProjectSetup(props: {
   theme: Theme;
   config: ProjectConfig;
   change(patch: Partial<ProjectConfig>): void;
+  /** Opens the setup agent while it runs; absent on hosts without navigation. */
+  openAgent?: (agentId: string) => void;
 }) {
-  const { theme, config, change } = props;
+  const { theme, config, change, openAgent } = props;
   const start = useRpc(initStartRpc);
   const status = useRpc(initStatusRpc);
   const [jobId, setJobId] = useState(() => jobsByProject.get(config.projectId) ?? null);
@@ -47,6 +50,12 @@ export function ProjectSetup(props: {
   });
   const state = job.data?.job ?? null;
   const proposal = job.data?.proposal ?? null;
+  // The daemon saved the agent's area summaries; show them in Project knowledge.
+  const queries = useQueryClient();
+  const finished = state?.status === "done";
+  useEffect(() => {
+    if (finished) void queries.invalidateQueries({ queryKey: knowledgeKey(config.projectId) });
+  }, [finished, queries, config.projectId]);
   const diffs = useMemo(
     () => (proposal ? proposalDiffs(config, proposal) : []),
     [config, proposal],
@@ -76,12 +85,27 @@ export function ProjectSetup(props: {
       <SettingsCard>
         <SettingsAction
           label="Read this repository's guidelines"
-          hint="An agent reads AGENTS.md, CONTRIBUTING, scripts, and CI, then proposes instructions and steps. It is told not to edit. You review each change before it is used."
+          hint="The daemon inspects the project first, and the agent starts from that project map. The agent reads AGENTS.md, CONTRIBUTING, scripts, and CI, then proposes instructions and steps, and describes each area for Project knowledge. It is told not to edit. You review each prompt change before it is used."
           actionLabel={running ? "Reading…" : proposal ? "Run again" : "Start"}
           disabled={running || !config.rootPath}
           onPress={() => begin.mutate()}
         />
-        {running ? <SettingsRow label="The setup agent is reading the repository." /> : null}
+        {running ? (
+          <SettingsRow
+            label={state?.agentId ? "The setup agent is reading the repository." : "Inspecting the project…"}
+          >
+            {state?.agentId && openAgent ? (
+              <View style={ACTIONS_STYLE}>
+                <Button
+                  theme={theme}
+                  icon="Bot"
+                  label="Open agent"
+                  onPress={() => openAgent(state.agentId ?? "")}
+                />
+              </View>
+            ) : null}
+          </SettingsRow>
+        ) : null}
         {failure ? <SettingsRow label="Setup did not finish" error={failure} /> : null}
         {state?.status === "done" && diffs.length === 0 ? (
           <SettingsAction

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-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,228 @@
+import { type PluginSurfaceProps, useSettings } from "@getpaseo/plugin/client";
+import {
+  SettingsAction,
+  SettingsCard,
+  SettingsInput,
+  SettingsRow,
+  SettingsSection,
+  SettingsSelect,
+  SettingsSwitch,
+} from "@getpaseo/plugin/client/ui";
+import { useCallback, useMemo, useState } from "react";
+import { Platform, Text, View } from "react-native";
+import {
+  HEX_COLOR,
+  type IconPaint,
+  type IconSettings,
+  MAX_SVG_LENGTH,
+  parseIconSvg,
+} from "../shared/custom-icon";
+import { linearSettings } from "../shared/settings";
+import { IconGlyph } 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);
+  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 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 useBuiltIn = 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 !== "";
+
+  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. Paseo menus and panel tabs keep the built-in icon."
+            }
+          >
+            <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="Built-in icon"
+            hint="Remove your SVG and use the Linear board icon."
+            actionLabel="Use built-in"
+            disabled={!custom && markup === ""}
+            onPress={useBuiltIn}
+          />
+        </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 your SVG to use this. The built-in icon stays as drawn."}
+            value={icon.solid}
+            disabled={!custom}
+            onValueChange={(solid) => change({ solid })}
+          />
+        </SettingsCard>
+      </SettingsSection>
+      <SaveBar
+        theme={theme}
+        dirty={dirty}
+        saving={settings.saving}
+        error={settings.saveError}
+        onSave={() => void save()}
+        onDiscard={reset}
+      />
+    </View>
+  );
+}

package/client/settings-projects.tsx

@@ -22,6 +22,7 @@ import {
 } from "../shared/settings";
 import { effectiveKeyScope, KeyScopeProvider } from "./key-scope";
 import { ProjectSetup } from "./project-init";
+import { ProjectKnowledgeSection } from "./project-knowledge";
 import { AccessSection } from "./settings-access";
 import { type PaseoProjectOption, useAuthStatus, useCatalog, useProjects } from "./queries";
 import {
@@ -42,11 +43,15 @@ const STEPS_PLACEHOLDER = "Run the type checker\nUpdate the changelog\nOpen a dr
 
 type Change = (patch: Partial<ProjectConfig>) => void;
 
-export function ProjectSettings({ theme }: PluginSurfaceProps) {
+export function ProjectSettings({ theme, navigation }: PluginSurfaceProps) {
   const settings = useSettings(linearSettings);
+  const openAgent = useMemo(
+    () => (navigation ? (agentId: string) => navigation.openAgent({ agentId }) : undefined),
+    [navigation],
+  );
   const render = useCallback(
-    (ready: ReadySettings) => <ProjectEditor theme={theme} settings={ready} />,
-    [theme],
+    (ready: ReadySettings) => <ProjectEditor theme={theme} settings={ready} openAgent={openAgent} />,
+    [theme, openAgent],
   );
   return (
     <SettingsGate theme={theme} title="Projects" settings={settings}>
@@ -72,7 +77,12 @@ function projectOptions(
   return [...known, ...missing];
 }
 
-function ProjectEditor({ theme, settings }: { theme: Theme; settings: ReadySettings }) {
+function ProjectEditor(props: {
+  theme: Theme;
+  settings: ReadySettings;
+  openAgent?: (agentId: string) => void;
+}) {
+  const { theme, settings } = props;
   const { values, dirty, edit, save, discard } = useSettingsDraft(settings);
   const projects = useProjects();
   const [selectedId, setSelectedId] = useState<string | null>(null);
@@ -140,7 +150,8 @@ function ProjectEditor({ theme, settings }: { theme: Theme; settings: ReadySetti
         </SettingsCard>
       </SettingsSection>
       <TeamsSection config={config} change={change} />
-      <ProjectSetup theme={theme} config={config} change={change} />
+      {paseoProject ? <ProjectKnowledgeSection projectId={paseoProject.projectId} /> : null}
+      <ProjectSetup theme={theme} config={config} change={change} openAgent={props.openAgent} />
       <InstructionsSection theme={theme} config={config} change={change} />
       {AGENT_ACTIONS.map((action) => (
         <ActionSection key={action} theme={theme} action={action} config={config} change={change} />

package/client/timeline-card.tsx

@@ -4,6 +4,7 @@ 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 { PluginIcon } from "./plugin-icon";
 import { usePressableStyle } from "./ui";
 
 export function IssueCardRow({ item, theme }: PluginTimelineItemProps<IssueCard>) {
@@ -44,7 +45,7 @@ export function IssueCardRow({ item, theme }: PluginTimelineItemProps<IssueCard>
       onPress={open}
       style={style}
     >
-      <Icon name="SquareKanban" size={16} color={colors.foregroundMuted} />
+      <PluginIcon size={16} color={colors.foregroundMuted} theme={theme} />
       <View style={styles.body}>
         <Text numberOfLines={1} style={styles.title}>
           <Text style={styles.identifier}>{`${card.identifier}  `}</Text>

package/client/ui.tsx

@@ -1,6 +1,6 @@
 import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
 import { Icon } from "@getpaseo/plugin/client/react-native";
-import { type ReactNode, useCallback, useMemo } from "react";
+import { type ComponentType, type ReactNode, useCallback, useMemo } from "react";
 import {
   ActivityIndicator,
   Pressable,
@@ -15,6 +15,15 @@ export { Avatar, LabelPill, PriorityIcon, priorityMeta, StateIcon } from "./glyp
 
 export type Theme = PluginSurfaceProps["theme"];
 
+/** A Lucide icon name, or a component such as the plugin icon. */
+export type Glyph = string | ComponentType<{ size: number; color: string; theme: Theme }>;
+
+export function GlyphIcon(props: { glyph: Glyph; size: number; color: string; theme: Theme }) {
+  const { glyph: Custom, size, color, theme } = props;
+  if (typeof Custom === "string") return <Icon name={Custom} size={size} color={color} />;
+  return <Custom size={size} color={color} theme={theme} />;
+}
+
 type InteractionState = PressableStateCallbackType & { hovered?: boolean };
 
 export function interactive(state: PressableStateCallbackType): boolean {
@@ -43,7 +52,7 @@ function buttonFill(variant: ButtonVariant, colors: Theme["colors"]): string {
 export interface ButtonProps {
   theme: Theme;
   label: string;
-  icon?: string;
+  icon?: Glyph;
   variant?: ButtonVariant;
   size?: keyof typeof HEIGHT;
   disabled?: boolean;
@@ -52,10 +61,10 @@ export interface ButtonProps {
   onPress(): void;
 }
 
-function ButtonGlyph(props: { busy: boolean; icon?: string; size: number; color: string }) {
+function ButtonGlyph(props: { busy: boolean; icon?: Glyph; size: number; color: string; theme: Theme }) {
   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} />;
+  return <GlyphIcon glyph={props.icon} size={props.size} color={props.color} theme={props.theme} />;
 }
 
 export function Button({
@@ -103,7 +112,7 @@ export function Button({
       onPress={onPress}
       style={pressStyle}
     >
-      <ButtonGlyph busy={busy === true} icon={icon} size={size === "xs" ? 14 : 16} color={ink} />
+      <ButtonGlyph busy={busy === true} icon={icon} size={size === "xs" ? 14 : 16} color={ink} theme={theme} />
       <Text numberOfLines={1} style={styles.label}>
         {label}
       </Text>
@@ -276,7 +285,7 @@ export function OptionRow(props: {
 
 export function EmptyState(props: {
   theme: Theme;
-  icon: string;
+  icon: Glyph;
   title: string;
   detail?: string;
   tone?: "default" | "danger";
@@ -309,7 +318,7 @@ export function EmptyState(props: {
   );
   return (
     <View style={styles.root}>
-      <Icon name={props.icon} size={28} color={colors.foregroundMuted} />
+      <GlyphIcon glyph={props.icon} size={28} color={colors.foregroundMuted} theme={props.theme} />
       <Text style={styles.title}>{props.title}</Text>
       {props.detail ? <Text style={styles.detail}>{props.detail}</Text> : null}
       {props.children}

package/client/web.ts

@@ -2,6 +2,7 @@ import { Platform } from "react-native";
 
 // The only module that uses the DOM. React wheel listeners are passive, so they cannot keep
 // the page from scrolling while the wheel zooms the graph. Off the web each export does nothing.
+// The file picker is a hidden file input, because plugins cannot use native document pickers.
 
 interface WheelEventLike {
   deltaY: number;
@@ -43,3 +44,48 @@ export function listenWheel(
   node.addEventListener("wheel", listener, { passive: false });
   return () => node.removeEventListener("wheel", listener);
 }
+
+interface FileLike {
+  name: string;
+  size: number;
+  text(): Promise<string>;
+}
+
+interface FileInputLike {
+  type: string;
+  accept: string;
+  files: ArrayLike<FileLike> | null;
+  onchange: (() => void) | null;
+  click(): void;
+}
+
+interface DocumentLike {
+  createElement(tag: "input"): FileInputLike;
+}
+
+/** True where pickTextFile can open a file picker. */
+export const canPickFiles = Platform.OS === "web";
+
+export type PickedFile = { name: string; text: string } | { error: string };
+
+/** Opens the browser file picker and calls onPick with the chosen file. Nothing on cancel. */
+export function pickTextFile(accept: string, maxBytes: number, onPick: (file: PickedFile) => void): void {
+  const document = (globalThis as { document?: DocumentLike }).document;
+  if (!canPickFiles || !document) return;
+  const input = document.createElement("input");
+  input.type = "file";
+  input.accept = accept;
+  input.onchange = () => {
+    const file = input.files?.[0];
+    if (!file) return;
+    if (file.size > maxBytes) {
+      onPick({ error: `${file.name} is too large. Use a file under ${Math.round(maxBytes / 1000)} KB.` });
+      return;
+    }
+    file.text().then(
+      (text) => onPick({ name: file.name, text }),
+      () => onPick({ error: `Paseo could not read ${file.name}.` }),
+    );
+  };
+  input.click();
+}