feat: add pi_model field to expose pi-ai compat options in /v1/models

mcowger · mcowger · commit b3a7a8031a9c · 2026-05-13T22:25:35.000-07:00
- Add pi_model config field (provider + model_id) to ModelConfigSchema
- Expose pi_options in GET /v1/models when the referenced pi model has compat settings
- Add GET /v0/management/pi/providers and /v0/management/pi/models endpoints for frontend autocomplete
- Add pi_model column to both SQLite and Postgres schemas with migrations
- Wire pi_model read/write through config-repository saveAlias and rowToModelConfig
- Add pi model provider/model dropdown UI in ModelMetadataEditor with loading state and confirmation badge
- Add getPiProviders/getPiModels API methods and pi_model to Alias type in frontend
diff --git a/packages/backend/drizzle/schema/postgres/model-aliases.ts b/packages/backend/drizzle/schema/postgres/model-aliases.ts
@@ -34,6 +34,7 @@ export const modelAliases = pgTable('model_aliases', {
   enforceLimits: boolean('enforce_limits').notNull().default(false),
   stickySession: boolean('sticky_session').notNull().default(false),
   preferredApi: jsonb('preferred_api'), // ('chat_completions' | 'messages' | 'gemini' | 'responses')[]
+  piModel: jsonb('pi_model'), // { provider: string, model_id: string }
   targetGroups: jsonb('target_groups'), // {name, selector}[]
   createdAt: bigint('created_at', { mode: 'number' }).notNull(),
   updatedAt: bigint('updated_at', { mode: 'number' }).notNull(),
diff --git a/packages/backend/drizzle/schema/sqlite/model-aliases.ts b/packages/backend/drizzle/schema/sqlite/model-aliases.ts
@@ -16,6 +16,7 @@ export const modelAliases = sqliteTable('model_aliases', {
   enforceLimits: integer('enforce_limits').notNull().default(0),
   stickySession: integer('sticky_session').notNull().default(0),
   preferredApi: text('preferred_api'), // JSON: ('chat_completions' | 'messages' | 'gemini' | 'responses')[]
+  piModel: text('pi_model'), // JSON: { provider: string, model_id: string }
   targetGroups: text('target_groups'), // JSON: {name, selector}[]
   createdAt: integer('created_at').notNull(),
   updatedAt: integer('updated_at').notNull(),
diff --git a/packages/backend/src/config.ts b/packages/backend/src/config.ts
@@ -594,6 +594,13 @@ export const ModelConfigSchema = z
       .optional(),
     advanced: z.array(ModelBehaviorSchema).optional(),
     metadata: ModelMetadataSchema.optional(),
+    // pi-ai model reference: when set, pi_options (compat) will be included in GET /v1/models
+    pi_model: z
+      .object({
+        provider: z.string().min(1),
+        model_id: z.string().min(1),
+      })
+      .optional(),
     // Model architecture override for inference energy calculation
     model_architecture: z
       .object({
diff --git a/packages/backend/src/db/config-repository.ts b/packages/backend/src/db/config-repository.ts
@@ -678,6 +678,7 @@ export class ConfigRepository {
       enforceLimits: fromBool(config.enforce_limits === true),
       stickySession: fromBool(config.sticky_session === true),
       preferredApi: config.preferred_api ? toJson(config.preferred_api) : null,
+      piModel: config.pi_model ? toJson(config.pi_model) : null,
       targetGroups:
         config.target_groups && config.target_groups.length > 0
           ? toJson(config.target_groups.map((g) => ({ name: g.name, selector: g.selector })))
@@ -818,6 +819,7 @@ export class ConfigRepository {
       // Model architecture override for inference energy calculation
       ...(row.modelArchitecture ? { model_architecture: parseJson(row.modelArchitecture) } : {}),
       ...(row.preferredApi ? { preferred_api: parseJson(row.preferredApi) } : {}),
+      ...(row.piModel ? { pi_model: parseJson(row.piModel) } : {}),
     };
 
     if (row.metadataSource) {
diff --git a/packages/backend/src/routes/inference/models.ts b/packages/backend/src/routes/inference/models.ts
@@ -2,6 +2,7 @@ import { FastifyInstance } from 'fastify';
 import { getConfig } from '../../config';
 import { PricingManager } from '../../services/pricing-manager';
 import { ModelMetadataManager, mergeOverrides } from '../../services/model-metadata-manager';
+import { getModel } from '@earendil-works/pi-ai';
 
 export async function registerModelsRoute(fastify: FastifyInstance) {
   /**
@@ -24,6 +25,20 @@ export async function registerModelsRoute(fastify: FastifyInstance) {
 
     const models = Object.entries(config.models).map(([aliasId, modelConfig]) => {
       const metaConfig = modelConfig?.metadata;
+      const piModelConfig = modelConfig?.pi_model;
+
+      // Look up pi compat options if a pi model reference is configured.
+      let piOptions: Record<string, unknown> | undefined;
+      if (piModelConfig) {
+        try {
+          const piModel = getModel(piModelConfig.provider as any, piModelConfig.model_id as any);
+          if (piModel?.compat && Object.keys(piModel.compat).length > 0) {
+            piOptions = piModel.compat as Record<string, unknown>;
+          }
+        } catch {
+          // Unknown provider or model — skip silently.
+        }
+      }
 
       const base = {
         id: aliasId,
@@ -33,6 +48,7 @@ export async function registerModelsRoute(fastify: FastifyInstance) {
         ...(modelConfig?.preferred_api !== undefined && {
           preferred_api: modelConfig.preferred_api,
         }),
+        ...(piOptions !== undefined && { pi_options: piOptions }),
       };
 
       if (!metaConfig) {
diff --git a/packages/backend/src/routes/management/models.ts b/packages/backend/src/routes/management/models.ts
@@ -1,6 +1,7 @@
 import { FastifyInstance, FastifyRequest, FastifyReply } from 'fastify';
 import { logger } from '../../utils/logger';
 import { HuggingFaceModelFetcher } from '../../services/huggingface-model-fetcher';
+import { getModels, getProviders } from '@earendil-works/pi-ai';
 
 interface FetchModelRequest {
   Params: {
@@ -67,4 +68,43 @@ export async function registerModelRoutes(fastify: FastifyInstance) {
       }
     }
   );
+
+  /**
+   * GET /v0/management/pi/providers
+   * Returns the list of provider IDs known to the pi-ai library.
+   */
+  fastify.get('/v0/management/pi/providers', async (_request, reply) => {
+    return reply.send({ data: getProviders() });
+  });
+
+  /**
+   * GET /v0/management/pi/models
+   * Returns models for a given pi provider, optionally filtered by a search query.
+   *
+   * Query parameters:
+   *   - provider (required): pi provider id (e.g. "openai", "anthropic")
+   *   - q (optional): substring filter on id or name
+   */
+  fastify.get('/v0/management/pi/models', async (request, reply) => {
+    const query = request.query as { provider?: string; q?: string };
+    if (!query.provider) {
+      return reply.status(400).send({ error: `Missing 'provider' parameter` });
+    }
+    let models: ReturnType<typeof getModels>;
+    try {
+      models = getModels(query.provider as any);
+    } catch {
+      return reply.status(400).send({ error: `Unknown pi provider '${query.provider}'` });
+    }
+    if (!models || models.length === 0) {
+      return reply.status(400).send({ error: `Unknown pi provider '${query.provider}'` });
+    }
+    const q = (query.q ?? '').toLowerCase();
+    const filtered = q
+      ? models.filter((m) => m.id.toLowerCase().includes(q) || m.name.toLowerCase().includes(q))
+      : models;
+    return reply.send({
+      data: filtered.map((m) => ({ id: m.id, name: m.name, api: m.api })),
+    });
+  });
 }
diff --git a/packages/frontend/src/components/models/ModelMetadataEditor.tsx b/packages/frontend/src/components/models/ModelMetadataEditor.tsx
@@ -1,11 +1,12 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
 import { BookOpen, ChevronDown, ChevronRight, CheckCircle, X, Loader2 } from 'lucide-react';
 import { Input } from '../ui/Input';
 import { Button } from '../ui/Button';
 import { Switch } from '../ui/Switch';
 import { MetadataOverrideForm } from './MetadataOverrideForm';
 import { useMetadataEditor } from '../../hooks/useMetadataEditor';
+import { api } from '../../lib/api';
 import type {
   Alias,
   AliasMetadata,
@@ -45,6 +46,33 @@ export function ModelMetadataEditor({ editingAlias, setEditingAlias, isModalOpen
     buildCustomDefaults,
   } = useMetadataEditor(editingAlias, setEditingAlias, isModalOpen);
 
+  // ── Pi model selector state ──────────────────────────────────────────
+  const [piProviders, setPiProviders] = useState<string[]>([]);
+  const [piModels, setPiModels] = useState<Array<{ id: string; name: string; api: string }>>([]);
+  const [piModelsLoading, setPiModelsLoading] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    api
+      .getPiProviders()
+      .then(setPiProviders)
+      .catch(() => {});
+  }, [isOpen]);
+
+  useEffect(() => {
+    const provider = editingAlias.pi_model?.provider;
+    if (!provider) {
+      setPiModels([]);
+      return;
+    }
+    setPiModelsLoading(true);
+    api
+      .getPiModels(provider)
+      .then(setPiModels)
+      .catch(() => setPiModels([]))
+      .finally(() => setPiModelsLoading(false));
+  }, [editingAlias.pi_model?.provider]);
+
   return (
     <>
       <div className="border border-border-glass rounded-sm overflow-hidden">
@@ -272,6 +300,134 @@ export function ModelMetadataEditor({ editingAlias, setEditingAlias, isModalOpen
                 </div>
               )}
 
+            {/* Pi model */}
+            <div>
+              <label
+                className="font-body text-[12px] font-medium text-text-secondary"
+                style={{ display: 'block', marginBottom: '4px' }}
+              >
+                Pi model
+              </label>
+              <p className="font-body text-[11px] text-text-muted" style={{ marginBottom: '6px' }}>
+                Link to a pi-ai model to include its compatibility options as{' '}
+                <code className="text-primary">pi_options</code> in{' '}
+                <code className="text-primary">GET /v1/models</code>.
+              </p>
+              <div style={{ display: 'flex', gap: '6px', alignItems: 'center' }}>
+                {/* Provider dropdown */}
+                <select
+                  className="font-body text-xs text-text bg-bg-glass border border-border-glass rounded-sm outline-none transition-all duration-200 backdrop-blur-md focus:border-primary"
+                  style={{
+                    padding: '5px 8px',
+                    height: '30px',
+                    flex: '0 0 auto',
+                    maxWidth: '160px',
+                  }}
+                  value={editingAlias.pi_model?.provider ?? ''}
+                  onChange={(e) => {
+                    const provider = e.target.value;
+                    if (!provider) {
+                      const { pi_model: _removed, ...rest } = editingAlias;
+                      setEditingAlias(rest as Alias);
+                    } else {
+                      setEditingAlias({ ...editingAlias, pi_model: { provider, model_id: '' } });
+                    }
+                  }}
+                >
+                  <option value="">None</option>
+                  {piProviders.map((p) => (
+                    <option key={p} value={p}>
+                      {p}
+                    </option>
+                  ))}
+                </select>
+
+                {/* Model dropdown */}
+                {editingAlias.pi_model?.provider && (
+                  <div style={{ position: 'relative', flex: 1 }}>
+                    <select
+                      className="w-full font-body text-xs text-text bg-bg-glass border border-border-glass rounded-sm outline-none transition-all duration-200 backdrop-blur-md focus:border-primary"
+                      style={{
+                        padding: '5px 8px',
+                        height: '30px',
+                        paddingRight: piModelsLoading ? '28px' : undefined,
+                      }}
+                      value={editingAlias.pi_model?.model_id ?? ''}
+                      onChange={(e) => {
+                        const model_id = e.target.value;
+                        setEditingAlias({
+                          ...editingAlias,
+                          pi_model: { provider: editingAlias.pi_model!.provider, model_id },
+                        });
+                      }}
+                    >
+                      <option value="">Select model...</option>
+                      {piModels.map((m) => (
+                        <option key={m.id} value={m.id}>
+                          {m.name} ({m.id})
+                        </option>
+                      ))}
+                    </select>
+                    {piModelsLoading && (
+                      <Loader2
+                        size={14}
+                        className="animate-spin text-text-muted"
+                        style={{
+                          position: 'absolute',
+                          right: '8px',
+                          top: '50%',
+                          transform: 'translateY(-50%)',
+                          pointerEvents: 'none',
+                        }}
+                      />
+                    )}
+                  </div>
+                )}
+
+                {/* Clear pi model */}
+                {editingAlias.pi_model?.model_id && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={() => {
+                      const { pi_model: _removed, ...rest } = editingAlias;
+                      setEditingAlias(rest as Alias);
+                    }}
+                    style={{
+                      color: 'var(--color-danger)',
+                      padding: '4px',
+                      minHeight: 'auto',
+                      flex: '0 0 auto',
+                    }}
+                    title="Remove pi model"
+                  >
+                    <X size={14} />
+                  </Button>
+                )}
+              </div>
+
+              {/* Confirmation badge */}
+              {editingAlias.pi_model?.model_id && (
+                <div
+                  className="rounded-sm border border-border-glass bg-bg-subtle px-3 py-2"
+                  style={{
+                    fontSize: '11px',
+                    color: 'var(--color-text-secondary)',
+                    marginTop: '6px',
+                  }}
+                >
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
+                    <CheckCircle size={12} className="text-success" />
+                    <span>
+                      Pi model: <strong>{editingAlias.pi_model.provider}</strong>
+                      {' / '}
+                      <code className="text-primary">{editingAlias.pi_model.model_id}</code>
+                    </span>
+                  </div>
+                </div>
+              )}
+            </div>
+
             {/* Preferred API */}
             <div>
               <label
diff --git a/packages/frontend/src/lib/api.ts b/packages/frontend/src/lib/api.ts
@@ -393,6 +393,7 @@ export interface Alias {
   enforce_limits?: boolean;
   sticky_session?: boolean;
   preferred_api?: Array<PreferredApiValue>;
+  pi_model?: { provider: string; model_id: string };
 }
 
 export interface InferenceError {
@@ -1820,6 +1821,7 @@ export const api = {
       ...(alias.type && { type: alias.type }),
       ...(alias.advanced && alias.advanced.length > 0 && { advanced: alias.advanced }),
       ...(alias.metadata && { metadata: alias.metadata }),
+      ...(alias.pi_model && { pi_model: alias.pi_model }),
       // Model architecture override for inference energy calculation
       ...(alias.model_architecture && { model_architecture: alias.model_architecture }),
       target_groups: alias.target_groups.map((g) => ({
@@ -1942,6 +1944,7 @@ export const api = {
           metadata: val.metadata,
           model_architecture: val.model_architecture,
           preferred_api: val.preferred_api || [],
+          pi_model: val.pi_model,
         });
       });
       return aliases;
@@ -2528,6 +2531,25 @@ export const api = {
     return json.data;
   },
 
+  getPiProviders: async (): Promise<string[]> => {
+    const res = await fetchWithAuth(`${API_BASE}/v0/management/pi/providers`);
+    if (!res.ok) throw new Error('Failed to fetch pi providers');
+    const json = (await res.json()) as { data: string[] };
+    return json.data;
+  },
+
+  getPiModels: async (
+    provider: string,
+    q?: string
+  ): Promise<Array<{ id: string; name: string; api: string }>> => {
+    const params = new URLSearchParams({ provider });
+    if (q) params.set('q', q);
+    const res = await fetchWithAuth(`${API_BASE}/v0/management/pi/models?${params}`);
+    if (!res.ok) throw new Error('Failed to fetch pi models');
+    const json = (await res.json()) as { data: Array<{ id: string; name: string; api: string }> };
+    return json.data;
+  },
+
   getOAuthProviderModels: async (
     providerId: string
   ): Promise<
