@yannelli/paseo-linear-plugin 0.1.0 → 0.4.0

package/client/markdown.tsx

@@ -0,0 +1,302 @@
+import { openExternalUrl } from "@getpaseo/plugin/client";
+import { Icon } from "@getpaseo/plugin/client/react-native";
+import { type ReactNode, useCallback, useMemo } from "react";
+import {
+  Platform,
+  Pressable,
+  ScrollView,
+  type StyleProp,
+  Text,
+  type TextStyle,
+  View,
+} from "react-native";
+import {
+  type MarkdownBlock,
+  type MarkdownInline,
+  type MarkdownListItem,
+  parseMarkdown,
+  taskItems,
+} from "../shared/markdown";
+import type { Theme } from "./ui";
+
+type ListBlock = Extract<MarkdownBlock, { type: "list" }>;
+type TableBlock = Extract<MarkdownBlock, { type: "table" }>;
+
+const MONO = Platform.select({
+  ios: "Menlo",
+  android: "monospace",
+  default: "ui-monospace, SFMono-Regular, Menlo, monospace",
+});
+const LINE_HEIGHT = 21;
+const HEADING_SIZES = [20, 18, 16, 15, 14, 14];
+const COMPACT_HEADING_SIZES = [18, 16, 15, 14, 14, 14];
+
+function createStyles(colors: Theme["colors"], compact: boolean, muted: boolean) {
+  const ink = muted ? colors.foregroundMuted : colors.foreground;
+  const text = { color: ink, fontSize: 14, lineHeight: LINE_HEIGHT } as const;
+  const cell = {
+    minHeight: LINE_HEIGHT + 12,
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    justifyContent: "center",
+  } as const;
+  const column = { flexDirection: "column" } as const;
+  return {
+    ink,
+    text,
+    root: { gap: compact ? 8 : 10 },
+    headings: (compact ? COMPACT_HEADING_SIZES : HEADING_SIZES).map((fontSize) => {
+      const lineHeight = Math.round(fontSize * 1.4);
+      return { color: ink, fontSize, lineHeight, fontWeight: "600" } as const;
+    }),
+    strong: { fontWeight: "600" },
+    emphasis: { fontStyle: "italic" },
+    strike: { textDecorationLine: "line-through" },
+    link: { color: colors.foreground, textDecorationLine: "underline" },
+    code: { fontFamily: MONO, backgroundColor: colors.surface2, borderRadius: 4 },
+    codeBlock: {
+      backgroundColor: colors.surface1,
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 8,
+    },
+    codeContent: { padding: 10 },
+    codeText: { fontFamily: MONO, fontSize: 13, lineHeight: 19, color: colors.foreground },
+    quote: { borderLeftWidth: 3, borderLeftColor: colors.border, paddingLeft: 10, gap: 8 },
+    rule: { height: 1, backgroundColor: colors.border, marginVertical: 4 },
+    list: { gap: 4 },
+    item: { flexDirection: "row", gap: 4 },
+    marker: { minWidth: 12, height: LINE_HEIGHT, justifyContent: "center" },
+    itemBody: { flex: 1, minWidth: 0, gap: 4 },
+    table: {
+      flexDirection: "row",
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 6,
+      overflow: "hidden",
+    },
+    column,
+    columnDivided: { ...column, borderLeftWidth: 1, borderLeftColor: colors.border },
+    headCell: { ...cell, backgroundColor: colors.surface1 },
+    cell: { ...cell, borderTopWidth: 1, borderTopColor: colors.border },
+    headText: { ...text, fontWeight: "600" },
+  } as const;
+}
+
+type Styles = ReturnType<typeof createStyles>;
+
+// `s` styles the current blocks. `quoted` is the muted context for blockquotes; inside a
+// quote it is unset, so nested quotes reuse the current (already muted) context.
+// `tasks` maps each task item to its `taskItems` ordinal when checkboxes are pressable.
+interface Context {
+  s: Styles;
+  quoted?: Context;
+  tasks?: TaskToggles;
+}
+
+interface TaskToggles {
+  ordinals: Map<MarkdownListItem, number>;
+  onToggle(ordinal: number): void;
+}
+
+const CHECKBOX_HIT_SLOP = 8;
+
+function Link(props: { url: string; style: StyleProp<TextStyle>; children: ReactNode }) {
+  const { url } = props;
+  const open = useCallback(() => void openExternalUrl(url), [url]);
+  return (
+    <Text accessibilityRole="link" onPress={open} style={props.style}>
+      {props.children}
+    </Text>
+  );
+}
+
+function renderInline(nodes: MarkdownInline[], s: Styles): ReactNode[] {
+  return nodes.map((node, index) => {
+    switch (node.type) {
+      case "text":
+        return node.text;
+      case "break":
+        return "\n";
+      case "code":
+        return (
+          <Text key={index} style={s.code}>
+            {node.text}
+          </Text>
+        );
+      case "link":
+        return (
+          <Link key={index} url={node.url} style={s.link}>
+            {renderInline(node.children, s)}
+          </Link>
+        );
+      default:
+        return (
+          <Text key={index} style={s[node.type]}>
+            {renderInline(node.children, s)}
+          </Text>
+        );
+    }
+  });
+}
+
+function renderBlocks(blocks: MarkdownBlock[], ctx: Context): ReactNode[] {
+  return blocks.map((block, index) => <Block key={index} block={block} ctx={ctx} />);
+}
+
+function TaskBox(props: { checked: boolean; ordinal: number; tasks: TaskToggles; s: Styles }) {
+  const { checked, ordinal, tasks } = props;
+  const { onToggle } = tasks;
+  const toggle = useCallback(() => onToggle(ordinal), [onToggle, ordinal]);
+  const a11yState = useMemo(() => ({ checked }), [checked]);
+  return (
+    <Pressable
+      accessibilityRole="checkbox"
+      accessibilityState={a11yState}
+      accessibilityLabel={checked ? "Uncheck item" : "Check item"}
+      hitSlop={CHECKBOX_HIT_SLOP}
+      onPress={toggle}
+    >
+      <Icon name={checked ? "SquareCheck" : "Square"} size={14} color={props.s.ink} />
+    </Pressable>
+  );
+}
+
+function ListMarker(props: {
+  list: ListBlock;
+  item: MarkdownListItem;
+  index: number;
+  ctx: Context;
+}) {
+  const { list, item, index, ctx } = props;
+  const { s, tasks } = ctx;
+  const { checked } = item;
+  const ordinal = tasks?.ordinals.get(item);
+  if (checked !== null && tasks && ordinal !== undefined) {
+    return <TaskBox checked={checked} ordinal={ordinal} tasks={tasks} s={s} />;
+  }
+  if (checked !== null) {
+    return <Icon name={checked ? "SquareCheck" : "Square"} size={14} color={s.ink} />;
+  }
+  return (
+    <Text selectable style={s.text}>
+      {list.ordered ? `${list.start + index}.` : "•"}
+    </Text>
+  );
+}
+
+function List({ list, ctx }: { list: ListBlock; ctx: Context }) {
+  const { s } = ctx;
+  return (
+    <View style={s.list}>
+      {list.items.map((item, index) => (
+        <View key={index} style={s.item}>
+          <View style={s.marker}>
+            <ListMarker list={list} item={item} index={index} ctx={ctx} />
+          </View>
+          <View style={s.itemBody}>{renderBlocks(item.children, ctx)}</View>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+// Lays the table out column by column so every column sizes to its widest cell.
+// Cells never wrap inside the horizontal ScrollView, so rows stay aligned.
+function Table({ table, s }: { table: TableBlock; s: Styles }) {
+  const columns = useMemo(
+    () =>
+      table.header.map((head, c) => {
+        const textAlign = table.align[c] ?? "left";
+        return {
+          cells: [head, ...table.rows.map((row) => row[c] ?? [])],
+          head: { ...s.headText, textAlign },
+          body: { ...s.text, textAlign },
+        };
+      }),
+    [table, s],
+  );
+  return (
+    <ScrollView horizontal>
+      <View style={s.table}>
+        {columns.map((column, c) => (
+          <View key={c} style={c === 0 ? s.column : s.columnDivided}>
+            {column.cells.map((cell, r) => (
+              <View key={r} style={r === 0 ? s.headCell : s.cell}>
+                <Text selectable style={r === 0 ? column.head : column.body}>
+                  {renderInline(cell, s)}
+                </Text>
+              </View>
+            ))}
+          </View>
+        ))}
+      </View>
+    </ScrollView>
+  );
+}
+
+function Block({ block, ctx }: { block: MarkdownBlock; ctx: Context }) {
+  const { s } = ctx;
+  switch (block.type) {
+    case "heading":
+      return (
+        <Text selectable accessibilityRole="header" style={s.headings[block.level - 1]}>
+          {renderInline(block.children, s)}
+        </Text>
+      );
+    case "paragraph":
+      return (
+        <Text selectable style={s.text}>
+          {renderInline(block.children, s)}
+        </Text>
+      );
+    case "code":
+      return (
+        <View style={s.codeBlock}>
+          <ScrollView horizontal contentContainerStyle={s.codeContent}>
+            <Text selectable style={s.codeText}>
+              {block.text}
+            </Text>
+          </ScrollView>
+        </View>
+      );
+    case "blockquote":
+      return (
+        <View style={s.quote}>
+          {renderBlocks(block.children, ctx.quoted ? { ...ctx.quoted, tasks: ctx.tasks } : ctx)}
+        </View>
+      );
+    case "list":
+      return <List list={block} ctx={ctx} />;
+    case "table":
+      return <Table table={block} s={s} />;
+    case "rule":
+      return <View style={s.rule} />;
+  }
+}
+
+export interface MarkdownProps {
+  theme: Theme;
+  source: string;
+  compact?: boolean;
+  muted?: boolean;
+  /** Makes task checkboxes pressable. Gets the item's ordinal in `taskItems` order. */
+  onToggleTask?(ordinal: number): void;
+}
+
+export function Markdown(props: MarkdownProps) {
+  const { colors } = props.theme;
+  const compact = props.compact === true;
+  const muted = props.muted === true;
+  const { onToggleTask } = props;
+  const blocks = useMemo(() => parseMarkdown(props.source), [props.source]);
+  const ctx = useMemo<Context>(() => {
+    const quoted: Context = { s: createStyles(colors, compact, true) };
+    const tasks = onToggleTask
+      ? { ordinals: new Map(taskItems(blocks).map((item, n) => [item, n])), onToggle: onToggleTask }
+      : undefined;
+    return { s: muted ? quoted.s : createStyles(colors, compact, false), quoted, tasks };
+  }, [colors, compact, muted, blocks, onToggleTask]);
+  if (blocks.length === 0) return null;
+  return <View style={ctx.s.root}>{renderBlocks(blocks, ctx)}</View>;
+}

package/client/model-browser.tsx

@@ -0,0 +1,296 @@
+import { Icon, Modal, TextInput } from "@getpaseo/plugin/client/react-native";
+import { type ReactNode, useCallback, useMemo, useState } from "react";
+import { Platform, Pressable, type PressableStateCallbackType, Text, View } from "react-native";
+import { type AgentChoice, type ModelChoice, searchModels } from "./agent-options";
+import { ProviderIcon } from "./provider-icon";
+import type { Theme } from "./ui";
+
+export interface ModelBrowserProps {
+  theme: Theme;
+  agents: readonly AgentChoice[];
+  agentId: string | null;
+  modelId: string | null;
+  onClose(): void;
+  onSelect(agentId: string, modelId: string): void;
+}
+
+const CONTENT_STYLE = { padding: 0, gap: 0 } as const;
+
+function modelCount(agent: AgentChoice): string {
+  return agent.models.length === 1 ? "1 model" : `${agent.models.length} models`;
+}
+
+function useBrowserStyles(theme: Theme) {
+  const { colors } = theme;
+  return useMemo(() => {
+    const row = {
+      minHeight: 36,
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      flexDirection: "row" as const,
+      alignItems: "center" as const,
+      gap: 8,
+    };
+    return {
+      row,
+      rowHovered: { ...row, backgroundColor: colors.surface1 },
+      rowPressed: { ...row, backgroundColor: colors.surface2 },
+      separator: { height: 1, backgroundColor: colors.border },
+      slot: { width: 16, alignItems: "center" as const },
+      search: {
+        flexDirection: "row" as const,
+        alignItems: "center" as const,
+        gap: 8,
+        paddingHorizontal: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: colors.border,
+      },
+      // Web only. Paseo's own search fields hide the focus outline the same way.
+      input: {
+        flex: 1,
+        paddingVertical: 8,
+        fontSize: 14,
+        color: colors.foreground,
+        ...(Platform.OS === "web" ? ({ outlineStyle: "none" } as object) : {}),
+      },
+      section: {
+        paddingHorizontal: 12,
+        paddingTop: 8,
+        paddingBottom: 4,
+        fontSize: 12,
+        color: colors.foregroundMuted,
+      },
+      header: {
+        flexDirection: "row" as const,
+        alignItems: "center" as const,
+        gap: 8,
+        paddingHorizontal: 12,
+        paddingVertical: 8,
+      },
+      title: { flex: 1, fontSize: 14, fontWeight: "500" as const, color: colors.foreground },
+      label: { fontSize: 14, color: colors.foreground, flexShrink: 0 },
+      providerLabel: { flex: 1, fontSize: 14, color: colors.foreground },
+      muted: { fontSize: 12, color: colors.foregroundMuted },
+      description: { flex: 1, minWidth: 0, fontSize: 12, color: colors.foregroundMuted },
+      text: {
+        flex: 1,
+        minWidth: 0,
+        flexDirection: "row" as const,
+        alignItems: "baseline" as const,
+        gap: 8,
+      },
+      empty: { alignItems: "center" as const, gap: 8, padding: 24 },
+    };
+  }, [colors]);
+}
+
+type BrowserStyles = ReturnType<typeof useBrowserStyles>;
+
+function useRowStyle(styles: BrowserStyles) {
+  return useCallback(
+    (state: PressableStateCallbackType) =>
+      state.pressed
+        ? styles.rowPressed
+        : (state as { hovered?: boolean }).hovered
+          ? styles.rowHovered
+          : styles.row,
+    [styles],
+  );
+}
+
+function ModelRow(props: {
+  theme: Theme;
+  styles: BrowserStyles;
+  agent: AgentChoice;
+  model: ModelChoice;
+  description: string;
+  selected: boolean;
+  onSelect(agentId: string, modelId: string): void;
+}) {
+  const { theme, styles, agent, model, onSelect } = props;
+  const muted = theme.colors.foregroundMuted;
+  const press = useCallback(() => onSelect(agent.id, model.id), [onSelect, agent.id, model.id]);
+  const rowStyle = useRowStyle(styles);
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`${agent.label} ${model.label}`}
+      accessibilityState={{ selected: props.selected }}
+      onPress={press}
+      style={rowStyle}
+    >
+      <View style={styles.slot}>
+        <ProviderIcon provider={agent.id} iconSvg={agent.iconSvg} size={14} color={muted} />
+      </View>
+      <View style={styles.text}>
+        <Text numberOfLines={1} style={styles.label}>
+          {model.label}
+        </Text>
+        <Text numberOfLines={1} style={styles.description}>
+          {props.description}
+        </Text>
+      </View>
+      <View style={styles.slot}>
+        {props.selected ? <Icon name="Check" size={14} color={muted} /> : null}
+      </View>
+    </Pressable>
+  );
+}
+
+function ProviderRow(props: {
+  theme: Theme;
+  styles: BrowserStyles;
+  agent: AgentChoice;
+  onOpen(agentId: string): void;
+}) {
+  const { theme, styles, agent, onOpen } = props;
+  const muted = theme.colors.foregroundMuted;
+  const press = useCallback(() => onOpen(agent.id), [onOpen, agent.id]);
+  const rowStyle = useRowStyle(styles);
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`${agent.label}, ${modelCount(agent)}`}
+      onPress={press}
+      style={rowStyle}
+    >
+      <View style={styles.slot}>
+        <ProviderIcon provider={agent.id} iconSvg={agent.iconSvg} size={14} color={muted} />
+      </View>
+      <Text numberOfLines={1} style={styles.providerLabel}>
+        {agent.label}
+      </Text>
+      <Text style={styles.muted}>{modelCount(agent)}</Text>
+      <Icon name="ChevronRight" size={14} color={muted} />
+    </Pressable>
+  );
+}
+
+function rowsWithSeparators<T>(
+  items: readonly T[],
+  styles: BrowserStyles,
+  row: (item: T) => {
+    key: string;
+    node: ReactNode;
+  },
+) {
+  return items.map((item, index) => {
+    const { key, node } = row(item);
+    return (
+      <View key={key}>
+        {index > 0 ? <View style={styles.separator} /> : null}
+        {node}
+      </View>
+    );
+  });
+}
+
+// Paseo's model picker: providers first, then the models of one provider. Search covers all models.
+export function ModelBrowser(props: ModelBrowserProps) {
+  const { theme, agents, onSelect, onClose } = props;
+  const { colors } = theme;
+  const styles = useBrowserStyles(theme);
+  const [openAgentId, setOpenAgentId] = useState<string | null>(
+    agents.length === 1 ? (agents[0]?.id ?? null) : null,
+  );
+  const [query, setQuery] = useState("");
+  const openAgent = agents.find((agent) => agent.id === openAgentId) ?? null;
+  const showProvider = useCallback((agentId: string) => {
+    setOpenAgentId(agentId);
+    setQuery("");
+  }, []);
+  const back = useCallback(() => {
+    setOpenAgentId(null);
+    setQuery("");
+  }, []);
+  const openChange = useCallback((open: boolean) => (open ? undefined : onClose()), [onClose]);
+  const matches = useMemo(() => {
+    if (openAgent) {
+      return query.trim()
+        ? searchModels([openAgent], query)
+        : openAgent.models.map((model) => ({ agent: openAgent, model }));
+    }
+    return searchModels(agents, query);
+  }, [agents, openAgent, query]);
+  const isSelected = (agent: AgentChoice, model: ModelChoice) =>
+    agent.id === props.agentId && model.id === props.modelId;
+
+  const modelRows = matches.map(({ agent, model }) => (
+    <ModelRow
+      key={`${agent.id}/${model.id}`}
+      theme={theme}
+      styles={styles}
+      agent={agent}
+      model={model}
+      description={
+        openAgent
+          ? (model.description ?? model.id)
+          : `${agent.label} · ${model.description ?? model.id}`
+      }
+      selected={isSelected(agent, model)}
+      onSelect={onSelect}
+    />
+  ));
+  const listingProviders = !openAgent && !query.trim();
+  return (
+    <Modal title="Select model" open onOpenChange={openChange}>
+      <Modal.Content contentContainerStyle={CONTENT_STYLE}>
+        {openAgent ? (
+          <View style={styles.header}>
+            {agents.length > 1 ? (
+              <Pressable
+                accessibilityRole="button"
+                accessibilityLabel="All providers"
+                hitSlop={8}
+                onPress={back}
+              >
+                <Icon name="ArrowLeft" size={16} color={colors.foregroundMuted} />
+              </Pressable>
+            ) : null}
+            <ProviderIcon
+              provider={openAgent.id}
+              iconSvg={openAgent.iconSvg}
+              size={16}
+              color={colors.foreground}
+            />
+            <Text numberOfLines={1} style={styles.title}>
+              {openAgent.label}
+            </Text>
+          </View>
+        ) : null}
+        <View style={styles.search}>
+          <Icon name="Search" size={14} color={colors.foregroundMuted} />
+          <TextInput
+            value={query}
+            onChangeText={setQuery}
+            placeholder={openAgent ? "Search models..." : "Search all models..."}
+            placeholderTextColor={colors.foregroundMuted}
+            autoCapitalize="none"
+            autoFocus
+            accessibilityLabel={openAgent ? "Search models" : "Search all models"}
+            style={styles.input}
+          />
+        </View>
+        {listingProviders ? (
+          <>
+            <Text style={styles.section}>Providers</Text>
+            {rowsWithSeparators(agents, styles, (agent) => ({
+              key: agent.id,
+              node: (
+                <ProviderRow theme={theme} styles={styles} agent={agent} onOpen={showProvider} />
+              ),
+            }))}
+          </>
+        ) : (
+          modelRows
+        )}
+        {!listingProviders && matches.length === 0 ? (
+          <View style={styles.empty}>
+            <Icon name="Search" size={16} color={colors.foregroundMuted} />
+            <Text style={styles.muted}>{`No models match "${query.trim()}"`}</Text>
+          </View>
+        ) : null}
+      </Modal.Content>
+    </Modal>
+  );
+}