@omercnet/paseo-omp 0.3.0 → 0.4.0-next.114.1

package/client/omp-model-picker.tsx

@@ -0,0 +1,282 @@
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { TextInput } from "@getpaseo/plugin/client/react-native";
+import { useMemo, useState } from "react";
+import type { TextStyle, ViewStyle } from "react-native";
+import { Pressable, Text, View } from "react-native";
+import {
+  commitPickerSelection,
+  filterModelChoices,
+  type OmpModelPickerChoice,
+  type OmpModelPickerModel,
+  thinkingSelectorChoice,
+} from "./omp-model-picker-state";
+
+type OmpModelPickerProps = {
+  theme: PluginSurfaceProps["theme"];
+  models: readonly OmpModelPickerModel[];
+  aliases: readonly OmpModelPickerChoice[];
+  role: string;
+  disabled: boolean;
+  loading: boolean;
+  error?: string;
+  onSelect(selector: string): void;
+};
+
+type OmpModelPickerStyles = {
+  root: ViewStyle;
+  trigger: ViewStyle;
+  triggerText: TextStyle;
+  panel: ViewStyle;
+  search: TextStyle;
+  status: TextStyle;
+  error: TextStyle;
+  result: ViewStyle;
+  resultPressed: ViewStyle;
+  titleRow: ViewStyle;
+  title: TextStyle;
+  selector: TextStyle;
+  metadata: TextStyle;
+  provenance: TextStyle;
+  thinkingRow: ViewStyle;
+  thinking: ViewStyle;
+  buttonDisabled: ViewStyle;
+  thinkingText: TextStyle;
+};
+
+function formatContextWindow(tokens?: number): string {
+  if (tokens === undefined) return "Context unknown";
+  if (tokens >= 1_000_000) return `${Number((tokens / 1_000_000).toFixed(1))}M context`;
+  if (tokens >= 1_000) return `${Math.round(tokens / 1_000)}K context`;
+  return `${tokens} context`;
+}
+
+export function OmpModelPicker({
+  theme,
+  models,
+  aliases,
+  role,
+  disabled,
+  loading,
+  error,
+  onSelect,
+}: OmpModelPickerProps) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const choices = useMemo(
+    () => filterModelChoices(models, aliases, query, role),
+    [aliases, models, query, role],
+  );
+  const styles = useMemo(
+    () => ({
+      root: { gap: 6, width: "100%" as const, maxWidth: 520 },
+      trigger: {
+        alignSelf: "flex-start" as const,
+        paddingHorizontal: 9,
+        paddingVertical: 6,
+        borderWidth: 1,
+        borderColor: open ? theme.colors.accent : theme.colors.border,
+        borderRadius: 7,
+        backgroundColor: theme.colors.surface1,
+      },
+      triggerText: { color: theme.colors.foreground, fontSize: 12, fontWeight: "600" as const },
+      panel: {
+        gap: 6,
+        padding: 8,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 9,
+        backgroundColor: theme.colors.surface0,
+      },
+      search: {
+        color: theme.colors.foreground,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 7,
+        backgroundColor: theme.colors.surface1,
+        paddingHorizontal: 9,
+        paddingVertical: 6,
+        fontSize: 13,
+      },
+      status: { color: theme.colors.foregroundMuted, fontSize: 12 },
+      error: { color: theme.colors.statusDanger, fontSize: 12 },
+      result: {
+        gap: 3,
+        paddingHorizontal: 9,
+        paddingVertical: 7,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 7,
+        backgroundColor: theme.colors.surface1,
+      },
+      resultPressed: { borderColor: theme.colors.accent, backgroundColor: theme.colors.surface2 },
+      titleRow: { flexDirection: "row" as const, flexWrap: "wrap" as const, gap: 6 },
+      title: { color: theme.colors.foreground, fontSize: 12, fontWeight: "700" as const },
+      selector: { color: theme.colors.foregroundMuted, fontSize: 11, fontFamily: "monospace" },
+      metadata: { color: theme.colors.foregroundMuted, fontSize: 11 },
+      provenance: { color: theme.colors.accent, fontSize: 11, fontWeight: "600" as const },
+      thinkingRow: {
+        flexDirection: "row" as const,
+        flexWrap: "wrap" as const,
+        gap: 5,
+        marginTop: 3,
+      },
+      thinking: {
+        paddingHorizontal: 7,
+        paddingVertical: 4,
+        borderWidth: 1,
+        borderColor: theme.colors.border,
+        borderRadius: 999,
+        backgroundColor: theme.colors.surface0,
+      },
+      buttonDisabled: { opacity: 0.45 },
+      thinkingText: { color: theme.colors.foreground, fontSize: 10, fontWeight: "600" as const },
+    }),
+    [open, theme],
+  );
+
+  const choose = (selector: string) => {
+    if (!commitPickerSelection(disabled, selector, onSelect)) return;
+    setOpen(false);
+    setQuery("");
+  };
+
+  return (
+    <View style={styles.root}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={`${open ? "Close" : "Open"} model picker for ${role || "this row"}`}
+        accessibilityState={{ disabled, expanded: open }}
+        disabled={disabled}
+        onPress={() => setOpen((current) => !current)}
+        style={styles.trigger}
+      >
+        <Text style={styles.triggerText}>{open ? "Close models" : "Choose model"}</Text>
+      </Pressable>
+      {open ? (
+        <View accessibilityLabel={`Model choices for ${role || "this row"}`} style={styles.panel}>
+          <TextInput
+            accessibilityLabel="Search available OMP models"
+            autoFocus
+            accessibilityRole="combobox"
+            accessibilityState={{ expanded: true }}
+            editable={!disabled}
+            placeholder="Search provider, model, selector, or thinking level"
+            placeholderTextColor={theme.colors.foregroundMuted}
+            value={query}
+            onChangeText={setQuery}
+            onKeyPress={(event) => {
+              if (event.nativeEvent.key === "Escape") setOpen(false);
+            }}
+            style={styles.search}
+          />
+          {loading ? <Text style={styles.status}>Loading OMP models…</Text> : null}
+          {error ? (
+            <Text accessibilityRole="alert" style={styles.error}>
+              {error}
+            </Text>
+          ) : null}
+          {!loading && !error && models.length === 0 && aliases.length > 0 ? (
+            <Text style={styles.status}>
+              OMP reported no concrete models. Configured role aliases remain available.
+            </Text>
+          ) : null}
+          {!loading && choices.length === 0 ? (
+            <Text style={styles.status}>No models or role aliases match this search.</Text>
+          ) : null}
+          {choices.map((choice) =>
+            choice.kind === "alias" ? (
+              <Pressable
+                key={choice.selector}
+                accessibilityRole="button"
+                accessibilityLabel={`Select role alias ${choice.selector}`}
+                accessibilityState={{ disabled }}
+                disabled={disabled}
+                onPress={() => choose(choice.selector)}
+                style={({ pressed }) => [styles.result, pressed ? styles.resultPressed : null]}
+              >
+                <Text style={styles.title}>Role alias · {choice.label}</Text>
+                <Text style={styles.selector}>{choice.selector}</Text>
+              </Pressable>
+            ) : (
+              <ModelResult
+                key={choice.model.selector}
+                choice={choice}
+                styles={styles}
+                disabled={disabled}
+                onSelect={choose}
+              />
+            ),
+          )}
+        </View>
+      ) : null}
+    </View>
+  );
+}
+
+function ModelResult({
+  choice,
+  styles,
+  disabled,
+  onSelect,
+}: {
+  choice: Extract<OmpModelPickerChoice, { kind: "model" }>;
+  styles: OmpModelPickerStyles;
+  onSelect(selector: string): void;
+  disabled: boolean;
+}) {
+  const { model } = choice;
+  const capabilityText = [
+    model.reasoning ? "Reasoning" : "Standard",
+    model.imageInput ? "Image input" : "Text input",
+    formatContextWindow(model.contextWindow),
+  ].join(" · ");
+  return (
+    <View style={styles.result}>
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel={`Select ${model.label}, ${model.selector}`}
+        accessibilityState={{ disabled }}
+        disabled={disabled}
+        onPress={() => onSelect(model.selector)}
+        style={({ pressed }) => (pressed ? styles.resultPressed : undefined)}
+      >
+        <View style={styles.titleRow}>
+          <Text style={styles.title}>{model.label}</Text>
+          <Text style={styles.metadata}>{model.provider}</Text>
+        </View>
+        <Text style={styles.selector}>{model.selector}</Text>
+        <Text style={styles.metadata}>{capabilityText}</Text>
+        {choice.recommended ? (
+          <Text style={styles.provenance}>Matches this role’s capabilities</Text>
+        ) : null}
+      </Pressable>
+      {model.thinkingLevels.length > 0 ? (
+        <View accessibilityLabel={`Thinking levels for ${model.label}`} style={styles.thinkingRow}>
+          {model.thinkingLevels.map((level) => {
+            const thinkingChoice = thinkingSelectorChoice(model.selector, level);
+            const thinkingDisabled = disabled || !thinkingChoice.available;
+            return (
+              <Pressable
+                key={level}
+                accessibilityRole="button"
+                accessibilityLabel={
+                  thinkingChoice.available
+                    ? `Select ${model.label} with ${level} thinking`
+                    : `${level} thinking unavailable: selector exceeds 513 UTF-8 bytes`
+                }
+                accessibilityState={{ disabled: thinkingDisabled }}
+                disabled={thinkingDisabled}
+                onPress={() => onSelect(thinkingChoice.selector)}
+                style={[styles.thinking, thinkingDisabled ? styles.buttonDisabled : null]}
+              >
+                <Text style={styles.thinkingText}>
+                  {thinkingChoice.available ? level : `${level} · too long`}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      ) : null}
+    </View>
+  );
+}

package/client/omp-routing-editor.tsx

@@ -0,0 +1,307 @@
+import type { PluginSurfaceProps } from "@getpaseo/plugin/client";
+import { TextInput } from "@getpaseo/plugin/client/react-native";
+import { useState } from "react";
+import { Pressable, Text, View } from "react-native";
+import {
+  formatOmpSettingLabel,
+  isOmpStructuredSettingPath,
+  type OmpSetting,
+  parseOmpStructuredSettingValue,
+} from "../shared/omp-settings";
+import type { OmpConfigStyles } from "./omp-config-surface";
+import { OmpModelPicker } from "./omp-model-picker";
+import {
+  aliasChoices,
+  type OmpModelPickerModel,
+  updatePickerValue,
+} from "./omp-model-picker-state";
+
+type RoutingRecord = Record<string, unknown>;
+
+export type OmpModelCatalogState = {
+  models: readonly OmpModelPickerModel[];
+  loading: boolean;
+  error?: string;
+};
+
+type StructuredRoutingEditorProps = {
+  setting: OmpSetting;
+  value: unknown;
+  disabled: boolean;
+  resetLabel: string;
+  showReset: boolean;
+  resetPending: boolean;
+  styles: OmpConfigStyles;
+  theme: PluginSurfaceProps["theme"];
+  modelCatalog: OmpModelCatalogState;
+  modelRoles: Readonly<Record<string, unknown>>;
+  onSet(value: unknown): void;
+  onReset(): void;
+};
+
+function asRecord(value: unknown): RoutingRecord {
+  return value !== null && typeof value === "object" && !Array.isArray(value)
+    ? (value as RoutingRecord)
+    : {};
+}
+
+function asStringArray(value: unknown): string[] {
+  return Array.isArray(value) ? value.map((item) => (typeof item === "string" ? item : "")) : [];
+}
+
+function replaceRecordKey(record: RoutingRecord, oldKey: string, newKey: string): RoutingRecord {
+  const next: RoutingRecord = {};
+  for (const [key, value] of Object.entries(record)) next[key === oldKey ? newKey : key] = value;
+  return next;
+}
+
+function removeRecordKey(record: RoutingRecord, removedKey: string): RoutingRecord {
+  return Object.fromEntries(Object.entries(record).filter(([key]) => key !== removedKey));
+}
+
+function nextRecordKey(record: RoutingRecord, prefix: string): string {
+  let suffix = 1;
+  while (Object.hasOwn(record, `${prefix}${suffix}`)) suffix += 1;
+  return `${prefix}${suffix}`;
+}
+
+function RowButton({
+  label,
+  disabled,
+  styles,
+  onPress,
+}: {
+  label: string;
+  disabled: boolean;
+  styles: OmpConfigStyles;
+  onPress(): void;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      disabled={disabled}
+      onPress={onPress}
+      style={styles.editorAction}
+    >
+      <Text style={styles.editorActionText}>{label}</Text>
+    </Pressable>
+  );
+}
+
+function OrderedRoleEditor({
+  value,
+  disabled,
+  styles,
+  onSet,
+}: Pick<StructuredRoutingEditorProps, "value" | "disabled" | "styles" | "onSet">) {
+  const roles = asStringArray(value);
+  return (
+    <View style={styles.recordList}>
+      {roles.map((role, index) => (
+        // biome-ignore lint/suspicious/noArrayIndexKey: ordered rows are edited by position and must keep input identity while their value changes.
+        <View key={index} style={styles.recordRow}>
+          <Text style={styles.recordKey}>{index + 1}</Text>
+          <TextInput
+            accessibilityLabel={`Cycle role ${index + 1}`}
+            editable={!disabled}
+            value={role}
+            onChangeText={(nextRole) =>
+              onSet(roles.map((current, position) => (position === index ? nextRole : current)))
+            }
+            style={styles.scalarInput}
+          />
+          <RowButton
+            label={`Remove cycle role ${index + 1}`}
+            disabled={disabled}
+            styles={styles}
+            onPress={() => onSet(roles.filter((_, position) => position !== index))}
+          />
+        </View>
+      ))}
+      <RowButton
+        label="Add cycle role"
+        disabled={disabled}
+        styles={styles}
+        onPress={() => onSet([...roles, ""])}
+      />
+    </View>
+  );
+}
+
+function RecordRoutingEditor({
+  setting,
+  value,
+  disabled,
+  styles,
+  theme,
+  modelCatalog,
+  modelRoles,
+  onSet,
+}: Pick<
+  StructuredRoutingEditorProps,
+  "setting" | "value" | "disabled" | "styles" | "onSet" | "theme" | "modelCatalog" | "modelRoles"
+>) {
+  const record = asRecord(value);
+  const [keyErrors, setKeyErrors] = useState<Record<string, string>>({});
+  const entries = Object.entries(record);
+  const fallbackChains = setting.path === "retry.fallbackChains";
+  const agentModels = setting.path === "task.agentModelOverrides";
+  const keyLabel = setting.path.startsWith("task.")
+    ? "Agent"
+    : fallbackChains
+      ? "Role or model"
+      : "Role";
+  const valueLabel = fallbackChains
+    ? "Fallback selectors, comma separated"
+    : agentModels
+      ? "Model selectors, comma separated"
+      : setting.path === "task.agentServiceTierOverrides"
+        ? "Service tier"
+        : setting.path === "task.agentPrewalk" || setting.path === "task.agentAdvisor"
+          ? "on, off, or model selector"
+          : "Model selector";
+  const supportsModelPicker = setting.path !== "task.agentServiceTierOverrides";
+
+  return (
+    <View style={styles.recordList}>
+      {entries.map(([key, rawValue], index) => {
+        const textValue = Array.isArray(rawValue)
+          ? rawValue.filter((item): item is string => typeof item === "string").join(", ")
+          : typeof rawValue === "string"
+            ? rawValue
+            : "";
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: record keys are editable, so row position preserves input identity.
+          <View key={index} style={styles.recordRow}>
+            <TextInput
+              accessibilityLabel={`${formatOmpSettingLabel(setting.path)} ${keyLabel} ${index + 1}`}
+              editable={!disabled}
+              value={key}
+              onChangeText={(newKey) => {
+                if (newKey !== key && Object.hasOwn(record, newKey)) {
+                  setKeyErrors((current) => ({
+                    ...current,
+                    [key]: `Another entry already uses ${newKey}.`,
+                  }));
+                  return;
+                }
+                setKeyErrors((current) => {
+                  const next = { ...current };
+                  delete next[key];
+                  delete next[newKey];
+                  return next;
+                });
+                onSet(replaceRecordKey(record, key, newKey));
+              }}
+              style={styles.scalarInput}
+            />
+            {keyErrors[key] ? (
+              <Text accessibilityRole="alert" style={styles.error}>
+                {keyErrors[key]}
+              </Text>
+            ) : null}
+            <TextInput
+              accessibilityLabel={`${formatOmpSettingLabel(setting.path)} ${valueLabel} ${index + 1}`}
+              editable={!disabled}
+              value={textValue}
+              onChangeText={(newValue) => {
+                const next = { ...record };
+                if (fallbackChains || agentModels) {
+                  const selectors = newValue
+                    .split(",")
+                    .map((selector) => selector.trim())
+                    .filter(Boolean);
+                  next[key] = agentModels && selectors.length === 1 ? selectors[0] : selectors;
+                } else {
+                  next[key] = newValue;
+                }
+                onSet(next);
+              }}
+              style={styles.scalarInput}
+            />
+            {supportsModelPicker ? (
+              <OmpModelPicker
+                theme={theme}
+                models={modelCatalog.models}
+                aliases={
+                  setting.path === "modelRoles"
+                    ? []
+                    : aliasChoices(modelRoles, fallbackChains ? key : undefined)
+                }
+                role={
+                  setting.path === "task.agentAdvisor"
+                    ? "advisor"
+                    : setting.path === "task.agentPrewalk"
+                      ? ""
+                      : key.replace(/^@/u, "")
+                }
+                disabled={disabled}
+                loading={modelCatalog.loading}
+                error={modelCatalog.error}
+                onSelect={(selector) => {
+                  const next = { ...record };
+                  if (fallbackChains || agentModels) {
+                    next[key] = updatePickerValue(
+                      Array.isArray(rawValue)
+                        ? rawValue.filter((item): item is string => typeof item === "string")
+                        : typeof rawValue === "string"
+                          ? rawValue
+                          : [],
+                      selector,
+                      "append",
+                    );
+                  } else {
+                    next[key] = updatePickerValue(textValue, selector, "replace");
+                  }
+                  onSet(next);
+                }}
+              />
+            ) : null}
+            <RowButton
+              label={`Remove ${key || "routing entry"}`}
+              disabled={disabled}
+              styles={styles}
+              onPress={() => onSet(removeRecordKey(record, key))}
+            />
+          </View>
+        );
+      })}
+      <RowButton
+        label={`Add ${setting.path === "modelRoles" ? "model role" : fallbackChains ? "fallback chain" : "agent override"}`}
+        disabled={disabled}
+        styles={styles}
+        onPress={() => {
+          const key = nextRecordKey(record, setting.path.startsWith("task.") ? "agent" : "role");
+          onSet({ ...record, [key]: fallbackChains || agentModels ? [] : "" });
+        }}
+      />
+    </View>
+  );
+}
+
+export function StructuredRoutingEditor(props: StructuredRoutingEditorProps) {
+  if (!isOmpStructuredSettingPath(props.setting.path)) return null;
+  const parsed = parseOmpStructuredSettingValue(props.setting.path, props.value);
+  return (
+    <View style={props.styles.recordList}>
+      {props.resetPending ? (
+        <Text style={props.styles.muted}>{props.resetLabel} when changes are applied</Text>
+      ) : props.setting.path === "cycleOrder" ? (
+        <OrderedRoleEditor {...props} />
+      ) : (
+        <RecordRoutingEditor {...props} />
+      )}
+      {!props.resetPending && parsed === undefined ? (
+        <Text accessibilityRole="alert" style={props.styles.error}>
+          Complete every routing name and value before applying changes.
+        </Text>
+      ) : null}
+      {props.showReset ? (
+        <Pressable accessibilityRole="button" disabled={props.disabled} onPress={props.onReset}>
+          <Text style={props.styles.resetAction}>{props.resetLabel}</Text>
+        </Pressable>
+      ) : null}
+    </View>
+  );
+}

package/client/support-diagnostics-state.ts

@@ -0,0 +1,45 @@
+import type { OmpStore } from "../shared/omp-store";
+
+type SupportReportInput = { store?: OmpStore; cwd?: string; force?: boolean };
+type SupportReportOutput = { report: string };
+
+export async function refreshSupportReport(
+  loadReport: (input: SupportReportInput) => Promise<SupportReportOutput>,
+  input: Omit<SupportReportInput, "force">,
+): Promise<SupportReportOutput> {
+  return await loadReport({ ...input, force: true });
+}
+
+export type SupportReportCopyState = "idle" | "copying" | "copied" | "error";
+
+export interface SupportDiagnosticsViewState {
+  refreshLabel: string;
+  copyLabel: string;
+  copyDisabled: boolean;
+  loadingMessage: string | null;
+  reportError: string | null;
+  copyFeedback: string | null;
+}
+
+/** Maps request and copy state to the exact accessible feedback rendered by the Help tab. */
+export function supportDiagnosticsViewState(input: {
+  loading: boolean;
+  refreshing: boolean;
+  hasReport: boolean;
+  reportFailed: boolean;
+  copyState: SupportReportCopyState;
+}): SupportDiagnosticsViewState {
+  return {
+    refreshLabel: input.refreshing ? "Refreshing…" : "Refresh",
+    copyLabel: input.copyState === "copying" ? "Copying…" : "Copy report",
+    copyDisabled: !input.hasReport || input.copyState === "copying",
+    loadingMessage: input.loading ? "Collecting OMP diagnostics…" : null,
+    reportError: input.reportFailed ? "Could not collect OMP diagnostics." : null,
+    copyFeedback:
+      input.copyState === "copied"
+        ? "Report copied."
+        : input.copyState === "error"
+          ? "Could not copy. Select the report text and copy it manually."
+          : null,
+  };
+}