@omercnet/paseo-omp 0.3.0-next.105.1 → 0.3.0-next.106.1

package/client/omp-config-surface.tsx

@@ -13,14 +13,16 @@ import type { TextStyle, ViewStyle } from "react-native";
 import { Pressable, ScrollView, Switch, Text, View } from "react-native";
 import type { ComposerPillSettings } from "../shared/composer-pill-settings";
 import { listOmpConfig, type OmpConfig } from "../shared/omp-config";
+import { listOmpModels } from "../shared/omp-models";
 import {
   categorizeOmpSetting,
   formatOmpSettingLabel,
+  isOmpStructuredSettingPath,
   listOmpSettings,
   OMP_SETTING_CATEGORIES,
-  type OmpScalarValue,
   type OmpSetting,
   type OmpSettingCategory,
+  parseOmpStructuredSettingValue,
   updateOmpSettings,
 } from "../shared/omp-settings";
 import { type OmpStore, storeLabel } from "../shared/omp-store";
@@ -34,7 +36,9 @@ import {
   OMP_SETTINGS_REFERENCE,
   type OmpDocumentationLink,
 } from "./omp-doc-links";
+import { normalizeOmpModels } from "./omp-model-picker-state";
 import { OmpPluginManagerSection } from "./omp-plugin-manager";
+import { type OmpModelCatalogState, StructuredRoutingEditor } from "./omp-routing-editor";
 import { OmpStorePicker } from "./omp-store-picker";
 import { ompStoreKey } from "./omp-store-state";
 import {
@@ -834,7 +838,7 @@ function StructuredSettingValue({
   );
 }
 
-type SettingDraft = { operation: "set"; value: string | boolean } | { operation: "reset" };
+type SettingDraft = { operation: "set"; value: unknown } | { operation: "reset" };
 
 function EditableScalarValue({
   setting,
@@ -891,6 +895,9 @@ function ConfigurationCategory({
   styles,
   settings,
   drafts,
+  theme,
+  modelCatalog,
+  modelRoles,
   disabled,
   workspaceScoped,
   onDraft,
@@ -898,6 +905,9 @@ function ConfigurationCategory({
 }: {
   category: { id: OmpSettingCategory; label: string };
   styles: OmpConfigStyles;
+  theme: PluginSurfaceProps["theme"];
+  modelCatalog: OmpModelCatalogState;
+  modelRoles: Readonly<Record<string, unknown>>;
   settings: readonly OmpSetting[];
   drafts: Readonly<Record<string, SettingDraft>>;
   disabled: boolean;
@@ -926,7 +936,12 @@ function ConfigurationCategory({
           (setting.value !== null && typeof setting.value === "object");
         const editable =
           !setting.redacted && ["boolean", "number", "string", "enum"].includes(setting.type);
+        const structuredEditable =
+          !setting.redacted &&
+          isOmpStructuredSettingPath(setting.path) &&
+          setting.type === (setting.path === "cycleOrder" ? "array" : "record");
         const settingDocumentation = documentationForSettingPath(setting.path);
+        const draft = drafts[setting.path];
         return (
           <View key={setting.path} style={styles.setting}>
             <View style={styles.settingHeader}>
@@ -934,7 +949,7 @@ function ConfigurationCategory({
               {setting.workspaceOverride ? (
                 <Text style={styles.source}>Workspace override</Text>
               ) : null}
-              {!complex && !editable ? (
+              {!complex && !editable && !structuredEditable ? (
                 <StructuredSettingValue setting={setting} styles={styles} />
               ) : null}
             </View>
@@ -953,7 +968,7 @@ function ConfigurationCategory({
             {editable ? (
               <EditableScalarValue
                 setting={setting}
-                draft={drafts[setting.path]}
+                draft={draft}
                 disabled={disabled}
                 resetLabel={workspaceScoped ? "Remove workspace override" : "Reset to default"}
                 showReset={!workspaceScoped || setting.workspaceOverride === true}
@@ -961,6 +976,21 @@ function ConfigurationCategory({
                 onSet={(value) => onDraft(setting.path, { operation: "set", value })}
                 onReset={() => onDraft(setting.path, { operation: "reset" })}
               />
+            ) : structuredEditable ? (
+              <StructuredRoutingEditor
+                setting={setting}
+                value={draft?.operation === "set" ? draft.value : setting.value}
+                disabled={disabled}
+                resetLabel={workspaceScoped ? "Remove workspace override" : "Reset to default"}
+                showReset={!workspaceScoped || setting.workspaceOverride === true}
+                resetPending={draft?.operation === "reset"}
+                styles={styles}
+                theme={theme}
+                modelCatalog={modelCatalog}
+                modelRoles={modelRoles}
+                onSet={(value) => onDraft(setting.path, { operation: "set", value })}
+                onReset={() => onDraft(setting.path, { operation: "reset" })}
+              />
             ) : complex ? (
               <StructuredSettingValue setting={setting} styles={styles} />
             ) : null}
@@ -1022,6 +1052,7 @@ function OmpConfigContent({
   const loadConfig = useRpc(listOmpConfig);
   const loadSettings = useRpc(listOmpSettings);
   const updateSettings = useRpc(updateOmpSettings);
+  const loadModels = useRpc(listOmpModels);
   const queryClient = useQueryClient();
   const context = { store, ...(cwd ? { cwd } : {}) };
   const pendingMutations = useIsMutating({ mutationKey: ["paseo-omp"] });
@@ -1036,6 +1067,11 @@ function OmpConfigContent({
     queryFn: () => loadSettings(context),
     staleTime: Number.POSITIVE_INFINITY,
   });
+  const modelsQuery = useQuery({
+    queryKey: ["paseo-omp", "models", ompStoreKey(store), cwd ?? "global"],
+    queryFn: () => loadModels(context),
+    staleTime: 30_000,
+  });
   const [view, setView] = useState<SurfaceView>("overview");
   const [activeCategory, setActiveCategory] = useState<OmpSettingCategory>("appearance");
   const [search, setSearch] = useState("");
@@ -1065,6 +1101,24 @@ function OmpConfigContent({
     }
     return { sourceSettings, matching, byCategory };
   }, [configQuery.data?.config, normalizedSearch, settingsQuery.data]);
+  const modelCatalog: OmpModelCatalogState = {
+    models: normalizeOmpModels(modelsQuery.data?.models ?? []),
+    loading: modelsQuery.isLoading,
+    ...(modelsQuery.error
+      ? { error: "Could not list OMP models. Freeform selectors remain available." }
+      : {}),
+  };
+  const modelRolesValue = drafts.modelRoles
+    ? drafts.modelRoles.operation === "set"
+      ? drafts.modelRoles.value
+      : undefined
+    : catalog.sourceSettings.find((setting) => setting.path === "modelRoles")?.value;
+  const modelRoles =
+    modelRolesValue !== null &&
+    typeof modelRolesValue === "object" &&
+    !Array.isArray(modelRolesValue)
+      ? (modelRolesValue as Readonly<Record<string, unknown>>)
+      : {};
   const visibleCategories = CONFIG_CATEGORIES.filter(
     (category) => (catalog.byCategory.get(category.id)?.length ?? 0) > 0,
   );
@@ -1089,8 +1143,12 @@ function OmpConfigContent({
         if (draft.operation === "reset") return { operation: "reset" as const, path };
         const setting = byPath.get(path);
         if (!setting) throw new Error(`Setting ${path} is no longer available.`);
-        let value: OmpScalarValue = draft.value;
-        if (setting.type === "number") {
+        let value: unknown = draft.value;
+        if (isOmpStructuredSettingPath(path)) {
+          const parsed = parseOmpStructuredSettingValue(path, value);
+          if (parsed === undefined) throw new Error(`${path} contains invalid routing values.`);
+          value = parsed;
+        } else if (setting.type === "number") {
           const raw = String(draft.value).trim();
           if (!raw) throw new Error(`${path} requires a number.`);
           const parsed = Number(raw);
@@ -1099,7 +1157,8 @@ function OmpConfigContent({
         }
         return { operation: "set" as const, path, value };
       });
-      return updateSettings({ ...context, revision, changes });
+      const input = updateOmpSettings.input.parse({ ...context, revision, changes });
+      return updateSettings(input);
     },
     onSuccess: (result) => {
       queryClient.setQueryData(settingsQueryKey, result.catalog);
@@ -1221,14 +1280,22 @@ function OmpConfigContent({
                 accessibilityRole="button"
                 accessibilityLabel="Refresh OMP configuration"
                 style={styles.refresh}
-                disabled={configQuery.isFetching || settingsQuery.isFetching}
+                disabled={
+                  configQuery.isFetching || settingsQuery.isFetching || modelsQuery.isFetching
+                }
                 onPress={() => {
-                  void Promise.all([configQuery.refetch(), settingsQuery.refetch()]);
+                  void Promise.all([
+                    configQuery.refetch(),
+                    settingsQuery.refetch(),
+                    modelsQuery.refetch(),
+                  ]);
                 }}
               >
                 <Icon name="RefreshCw" size={14} color={theme.colors.foreground} />
                 <Text style={styles.refreshLabel}>
-                  {configQuery.isFetching || settingsQuery.isFetching ? "Refreshing…" : "Refresh"}
+                  {configQuery.isFetching || settingsQuery.isFetching || modelsQuery.isFetching
+                    ? "Refreshing…"
+                    : "Refresh"}
                 </Text>
               </Pressable>
             </View>
@@ -1364,6 +1431,9 @@ function OmpConfigContent({
                 {selectedCategory ? (
                   <ConfigurationCategory
                     category={selectedCategory}
+                    theme={theme}
+                    modelCatalog={modelCatalog}
+                    modelRoles={modelRoles}
                     styles={styles}
                     settings={catalog.byCategory.get(selectedCategory.id) ?? []}
                     drafts={drafts}

package/client/omp-model-picker-state.ts

@@ -0,0 +1,145 @@
+import type { OmpModelCandidate } from "../shared/omp-models";
+import { isValidOmpModelSelector } from "../shared/omp-settings";
+
+export const OMP_MODEL_PICKER_RESULT_LIMIT = 8;
+
+export type OmpModelPickerModel = {
+  selector: string;
+  label: string;
+  provider: string;
+  reasoning: boolean;
+  imageInput: boolean;
+  contextWindow?: number;
+  thinkingLevels: readonly string[];
+};
+
+export type OmpModelPickerChoice =
+  | { kind: "alias"; selector: `@${string}`; label: string }
+  | { kind: "model"; model: OmpModelPickerModel; recommended: boolean };
+
+const REASONING_ROLES: Readonly<Record<string, true>> = {
+  default: true,
+  task: true,
+  plan: true,
+  slow: true,
+  advisor: true,
+  reviewer: true,
+};
+
+export function roleCapabilityMatch(role: string, model: OmpModelPickerModel): boolean | undefined {
+  const normalizedRole = role.trim().toLocaleLowerCase();
+  if (normalizedRole === "vision") return model.imageInput;
+  if (REASONING_ROLES[normalizedRole]) return model.reasoning;
+  return undefined;
+}
+
+export function normalizeOmpModels(models: readonly OmpModelCandidate[]): OmpModelPickerModel[] {
+  return models.map((model) => ({
+    selector: model.selector,
+    label: model.name || model.id,
+    provider: model.provider,
+    reasoning: model.reasoning,
+    imageInput: model.input.some((input) => input.toLocaleLowerCase() === "image"),
+    ...(model.contextWindow === null || model.contextWindow === undefined
+      ? {}
+      : { contextWindow: model.contextWindow }),
+    thinkingLevels: model.thinkingLevels,
+  }));
+}
+
+export function aliasChoices(
+  modelRoles: Readonly<Record<string, unknown>>,
+  currentRole?: string,
+): OmpModelPickerChoice[] {
+  return Object.keys(modelRoles)
+    .filter((role) => role.length > 0 && role !== currentRole)
+    .sort((left, right) => left.localeCompare(right))
+    .map((role) => ({ kind: "alias" as const, selector: `@${role}` as const, label: role }));
+}
+
+function choiceSearchText(choice: OmpModelPickerChoice): string {
+  if (choice.kind === "alias") return `${choice.label} ${choice.selector}`;
+  const model = choice.model;
+  return [
+    model.label,
+    model.selector,
+    model.provider,
+    model.reasoning ? "reasoning" : "standard",
+    model.imageInput ? "image vision" : "text",
+    model.contextWindow?.toString() ?? "",
+    ...model.thinkingLevels,
+  ].join(" ");
+}
+
+export function filterModelChoices(
+  models: readonly OmpModelPickerModel[],
+  aliases: readonly OmpModelPickerChoice[],
+  query: string,
+  role: string,
+  limit = OMP_MODEL_PICKER_RESULT_LIMIT,
+): OmpModelPickerChoice[] {
+  const normalizedQuery = query.trim().toLocaleLowerCase();
+  const choices: OmpModelPickerChoice[] = [
+    ...aliases,
+    ...models.map((model) => ({
+      kind: "model" as const,
+      model,
+      recommended: roleCapabilityMatch(role, model) === true,
+    })),
+  ];
+  return choices
+    .filter(
+      (choice) =>
+        normalizedQuery.length === 0 ||
+        choiceSearchText(choice).toLocaleLowerCase().includes(normalizedQuery),
+    )
+    .sort((left, right) => {
+      const leftRecommended = left.kind === "model" && left.recommended;
+      const rightRecommended = right.kind === "model" && right.recommended;
+      if (leftRecommended !== rightRecommended) return leftRecommended ? -1 : 1;
+      if (left.kind !== right.kind) return left.kind === "alias" ? -1 : 1;
+      return choiceSearchText(left).localeCompare(choiceSearchText(right));
+    })
+    .slice(0, Math.max(0, limit));
+}
+
+export function formatModelSelector(selector: string, thinkingLevel?: string): string {
+  return thinkingLevel ? `${selector}:${thinkingLevel}` : selector;
+}
+
+export type OmpThinkingSelectorChoice = {
+  selector: string;
+  available: boolean;
+};
+
+export function thinkingSelectorChoice(
+  selector: string,
+  thinkingLevel: string,
+): OmpThinkingSelectorChoice {
+  const suffixedSelector = formatModelSelector(selector, thinkingLevel);
+  return {
+    selector: suffixedSelector,
+    available: isValidOmpModelSelector(suffixedSelector),
+  };
+}
+
+export function updatePickerValue(
+  currentValue: string | readonly string[],
+  selector: string,
+  mode: "replace" | "append",
+): string | string[] {
+  if (mode === "replace") return selector;
+  const current = typeof currentValue === "string" ? [currentValue] : [...currentValue];
+  if (current.includes(selector)) return current;
+  return [...current, selector];
+}
+
+export function commitPickerSelection(
+  disabled: boolean,
+  selector: string,
+  onSelect: (selector: string) => void,
+): boolean {
+  if (disabled) return false;
+  onSelect(selector);
+  return true;
+}

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>
+  );
+}