@happyvertical/smrt-inference 0.0.0-stage → 0.60.15

package/dist/svelte/components/InferenceAliasEditor.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+/**
+ * One alias: its ordered candidates, a per-candidate test, and (when
+ * editable) reorder, remove, add and save. Candidates name `apiKeyEnv`
+ * (a variable) when they need their own key; the editor never takes a key.
+ */
+import { untrack } from 'svelte';
+import type {
+  InferenceAliasChange,
+  InferenceAliasView,
+  InferenceCandidateView,
+  InferenceTestResultView,
+} from '../types.js';
+import { candidateViewLabel } from '../types.js';
+
+interface InferenceAliasEditorProps {
+  alias: InferenceAliasView;
+  editable: boolean;
+  busy: boolean;
+  isNew?: boolean;
+  onSaveAlias?: (change: InferenceAliasChange) => void;
+  onTestCandidate?: (
+    candidate: InferenceCandidateView,
+  ) => Promise<InferenceTestResultView>;
+}
+
+const {
+  alias,
+  editable,
+  busy,
+  isNew = false,
+  onSaveAlias,
+  onTestCandidate,
+}: InferenceAliasEditorProps = $props();
+
+let name = $state(untrack(() => alias.name));
+let candidates = $state<InferenceCandidateView[]>(
+  untrack(() => alias.candidates.map((candidate) => ({ ...candidate }))),
+);
+let results = $state<Record<number, InferenceTestResultView | 'pending'>>({});
+let draft = $state<InferenceCandidateView>({});
+
+function move(index: number, by: number): void {
+  const next = index + by;
+  if (next < 0 || next >= candidates.length) return;
+  const copy = [...candidates];
+  [copy[index], copy[next]] = [
+    copy[next] as InferenceCandidateView,
+    copy[index] as InferenceCandidateView,
+  ];
+  candidates = copy;
+  results = {};
+}
+
+function remove(index: number): void {
+  candidates = candidates.filter((_, at) => at !== index);
+  results = {};
+}
+
+function add(): void {
+  const candidate: InferenceCandidateView = {};
+  for (const member of [
+    'provider',
+    'preset',
+    'alias',
+    'model',
+    'baseUrl',
+    'apiKeyEnv',
+  ] as const) {
+    const value = draft[member]?.trim();
+    if (value) candidate[member] = value;
+  }
+  if (Object.keys(candidate).length === 0) return;
+  candidates = [...candidates, candidate];
+  draft = {};
+}
+
+async function test(index: number): Promise<void> {
+  const candidate = candidates[index];
+  if (!onTestCandidate || !candidate) return;
+  results = { ...results, [index]: 'pending' };
+  try {
+    const result = await onTestCandidate(
+      $state.snapshot(candidate) as InferenceCandidateView,
+    );
+    results = { ...results, [index]: result };
+  } catch {
+    results = {
+      ...results,
+      [index]: { reachable: false, detail: 'The test could not run.' },
+    };
+  }
+}
+
+function save(event: SubmitEvent): void {
+  event.preventDefault();
+  if (!onSaveAlias || !name.trim()) return;
+  const change: InferenceAliasChange = {
+    name: name.trim(),
+    candidates: $state.snapshot(candidates) as InferenceCandidateView[],
+  };
+  if (alias.description) change.description = alias.description;
+  onSaveAlias(change);
+}
+</script>
+
+<form class="iae" onsubmit={save} data-testid={`inference-alias-${isNew ? 'new' : alias.name}`}>
+  <div class="iae-head">
+    {#if isNew}
+      <label>
+        <span class="iae-label">New alias name</span>
+        <input name="aliasName" bind:value={name} required disabled={busy} />
+      </label>
+    {:else}
+      <strong>{alias.name}</strong>
+      <span class="iae-label">{alias.source === 'app' ? 'App' : 'Config'}</span>
+      {#if alias.description}<span class="iae-label">{alias.description}</span>{/if}
+    {/if}
+  </div>
+  <ol class="iae-list">
+    {#each candidates as candidate, index (index)}
+      {@const result = results[index]}
+      <li class="iae-candidate">
+        <code>{candidateViewLabel(candidate)}</code>
+        {#if candidate.apiKeyEnv}<span class="iae-label">key from {candidate.apiKeyEnv}</span>{/if}
+        {#if onTestCandidate && !candidate.alias}
+          <button type="button" onclick={() => test(index)} disabled={busy || result === 'pending'}>
+            Test
+          </button>
+        {/if}
+        {#if editable}
+          <button type="button" aria-label={`Move ${candidateViewLabel(candidate)} up`} onclick={() => move(index, -1)} disabled={busy || index === 0}>↑</button>
+          <button type="button" aria-label={`Move ${candidateViewLabel(candidate)} down`} onclick={() => move(index, 1)} disabled={busy || index === candidates.length - 1}>↓</button>
+          <button type="button" aria-label={`Remove ${candidateViewLabel(candidate)}`} onclick={() => remove(index)} disabled={busy}>Remove</button>
+        {/if}
+        {#if result && result !== 'pending'}
+          <span class="iae-label" role="status">
+            {result.reachable ? 'Reachable' : result.skipped ? 'Not tested' : 'Failed'}: {result.detail}
+          </span>
+        {/if}
+      </li>
+    {:else}
+      <li class="iae-label">No candidates yet.</li>
+    {/each}
+  </ol>
+  {#if editable}
+    <fieldset class="iae-add" disabled={busy}>
+      <legend class="iae-label">Add candidate</legend>
+      <input aria-label="Provider" placeholder="provider" bind:value={draft.provider} />
+      <input aria-label="Preset" placeholder="preset" bind:value={draft.preset} />
+      <input aria-label="Nested alias" placeholder="alias" bind:value={draft.alias} />
+      <input aria-label="Model" placeholder="model" bind:value={draft.model} />
+      <input aria-label="Base URL" placeholder="base URL" bind:value={draft.baseUrl} />
+      <input aria-label="Key variable" placeholder="key variable (e.g. OPENROUTER_API_KEY)" bind:value={draft.apiKeyEnv} />
+      <button type="button" onclick={add}>Add</button>
+    </fieldset>
+    <div class="iae-actions">
+      <button type="submit" disabled={busy || !onSaveAlias || candidates.length === 0}>Save alias</button>
+      {#if !isNew && alias.source === 'app'}
+        <button
+          type="button"
+          disabled={busy || !onSaveAlias}
+          onclick={() => onSaveAlias?.({ name: alias.name, candidates: null })}
+        >
+          {alias.inConfig ? 'Revert to config' : 'Remove alias'}
+        </button>
+      {/if}
+    </div>
+  {/if}
+</form>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .iae {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 0.5rem 0;
+    border-bottom: var(--smrt-hairline);
+  }
+  .iae-head,
+  .iae-candidate,
+  .iae-actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .iae-list {
+    margin: 0;
+    padding-left: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .iae-add {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.375rem;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+  .iae-label {
+    font-size: 0.8125rem;
+    color: var(--smrt-color-on-surface-variant);
+  }
+}
+</style>

package/dist/svelte/components/InferenceAliasEditor.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { InferenceAliasChange, InferenceAliasView, InferenceCandidateView, InferenceTestResultView } from '../types.js';
+interface InferenceAliasEditorProps {
+    alias: InferenceAliasView;
+    editable: boolean;
+    busy: boolean;
+    isNew?: boolean;
+    onSaveAlias?: (change: InferenceAliasChange) => void;
+    onTestCandidate?: (candidate: InferenceCandidateView) => Promise<InferenceTestResultView>;
+}
+declare const InferenceAliasEditor: import("svelte").Component<InferenceAliasEditorProps, {}, "">;
+type InferenceAliasEditor = ReturnType<typeof InferenceAliasEditor>;
+export default InferenceAliasEditor;
+//# sourceMappingURL=InferenceAliasEditor.svelte.d.ts.map

package/dist/svelte/components/InferenceAliasEditor.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InferenceAliasEditor.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InferenceAliasEditor.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,oBAAoB,EACpB,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACxB,MAAM,aAAa,CAAC;AAIrB,UAAU,yBAAyB;IACjC,KAAK,EAAE,kBAAkB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACrD,eAAe,CAAC,EAAE,CAChB,SAAS,EAAE,sBAAsB,KAC9B,OAAO,CAAC,uBAAuB,CAAC,CAAC;CACvC;AAyJD,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/svelte/components/InferenceDefaultView.svelte

@@ -0,0 +1,330 @@
+<script lang="ts">
+/**
+ * The default view of `InferenceSettingsPanel`: the whole screen for a
+ * one-provider app. Mode, provider, base URL, key (set / not set, replace),
+ * model (with local discovery), Test connection and the default tier.
+ *
+ * The key lives in its own `<form>`: it is never part of the choices form's
+ * data, never held in component state, and the input is cleared as soon as
+ * it is handed to `onSaveKey`. The host stores it through smrt-secrets and
+ * only ever returns `keySet`.
+ */
+import { untrack } from 'svelte';
+import type {
+  InferenceConnectionRequest,
+  InferenceDefaultsChange,
+  InferenceDefaultsView,
+  InferenceDiscoveryView,
+  InferenceKeyChange,
+  InferenceProviderView,
+  InferenceSettingsMode,
+  InferenceSettingsTier,
+  InferenceTestResultView,
+} from '../types.js';
+import {
+  INFERENCE_SETTINGS_MODES,
+  INFERENCE_SETTINGS_TIERS,
+} from '../types.js';
+
+interface InferenceDefaultViewProps {
+  defaults: InferenceDefaultsView;
+  providers: InferenceProviderView[];
+  discoveredModels: InferenceDiscoveryView[];
+  busy: boolean;
+  onSaveDefaults?: (change: InferenceDefaultsChange) => void;
+  onSaveKey?: (change: InferenceKeyChange) => void | Promise<void>;
+  onTestConnection?: (
+    request: InferenceConnectionRequest,
+  ) => Promise<InferenceTestResultView>;
+  onDiscoverModels?: () => void;
+}
+
+const {
+  defaults,
+  providers,
+  discoveredModels,
+  busy,
+  onSaveDefaults,
+  onSaveKey,
+  onTestConnection,
+  onDiscoverModels,
+}: InferenceDefaultViewProps = $props();
+
+const MODE_LABELS: Record<InferenceSettingsMode, string> = {
+  byo: 'Bring your own key',
+  local: 'Local model server',
+  hosted: 'Hosted by this app',
+  off: 'Off',
+};
+
+let mode = $state<InferenceSettingsMode>(untrack(() => defaults.mode ?? 'byo'));
+let provider = $state(untrack(() => defaults.provider ?? ''));
+let baseUrl = $state(untrack(() => defaults.baseUrl ?? ''));
+let model = $state(untrack(() => defaults.model ?? ''));
+let defaultTier = $state<InferenceSettingsTier>(
+  untrack(() => defaults.defaultTier ?? 'good'),
+);
+let keySavedFor = $state<string | null>(null);
+let keyError = $state<string | null>(null);
+let testing = $state(false);
+let testResult = $state<InferenceTestResultView | null>(null);
+
+const needsProvider = $derived(mode === 'byo' || mode === 'local');
+const visibleProviders = $derived(
+  mode === 'local' ? providers.filter((option) => option.local) : providers,
+);
+const selected = $derived(providers.find((option) => option.id === provider));
+const keySet = $derived(
+  keySavedFor === provider ||
+    (defaults.keySet === true && (defaults.provider ?? '') === provider),
+);
+const discovered = $derived(
+  discoveredModels.flatMap((entry) =>
+    entry.models.map((id) => ({ id, service: entry.service })),
+  ),
+);
+
+function connectionRequest(): InferenceConnectionRequest {
+  const request: InferenceConnectionRequest = {};
+  if (selected?.kind === 'preset') request.preset = selected.id;
+  else if (provider) request.provider = provider;
+  if (baseUrl.trim()) request.baseUrl = baseUrl.trim();
+  if (model.trim()) request.model = model.trim();
+  return request;
+}
+
+function saveChoices(event: SubmitEvent): void {
+  event.preventDefault();
+  if (!onSaveDefaults) return;
+  const change: InferenceDefaultsChange = { mode, defaultTier };
+  if (needsProvider) {
+    if (provider) change.provider = provider;
+    if (baseUrl.trim()) change.baseUrl = baseUrl.trim();
+    if (model.trim()) change.model = model.trim();
+  }
+  onSaveDefaults(change);
+}
+
+async function saveKey(event: SubmitEvent): Promise<void> {
+  event.preventDefault();
+  const form = event.currentTarget as HTMLFormElement;
+  const input = form.elements.namedItem('apiKey') as HTMLInputElement | null;
+  const key = input?.value ?? '';
+  // Clear first: the value must not survive in the DOM whatever happens next.
+  if (input) input.value = '';
+  keyError = null;
+  if (!onSaveKey || !provider || !key.trim()) return;
+  const savedFor = provider;
+  const change: InferenceKeyChange = { provider: savedFor, key };
+  if (selected?.kind === 'preset') change.preset = selected.id;
+  if (baseUrl.trim()) change.baseUrl = baseUrl.trim();
+  try {
+    await onSaveKey(change);
+    keySavedFor = savedFor;
+  } catch {
+    keyError = 'The key was not saved.';
+  }
+}
+
+async function testConnection(): Promise<void> {
+  if (!onTestConnection) return;
+  testing = true;
+  testResult = null;
+  try {
+    testResult = await onTestConnection(connectionRequest());
+  } catch {
+    testResult = { reachable: false, detail: 'The test could not run.' };
+  } finally {
+    testing = false;
+  }
+}
+</script>
+
+<div class="isp-default" data-testid="inference-default-view">
+  <form class="isp-form" onsubmit={saveChoices} data-testid="inference-choices-form">
+    <fieldset class="isp-modes" disabled={busy}>
+      <legend>Inference</legend>
+      {#each INFERENCE_SETTINGS_MODES as option (option)}
+        <label class="isp-radio">
+          <input type="radio" name="mode" value={option} bind:group={mode} />
+          {MODE_LABELS[option]}
+        </label>
+      {/each}
+    </fieldset>
+
+    {#if needsProvider}
+      <label class="isp-field">
+        <span>Provider</span>
+        <select name="provider" bind:value={provider} disabled={busy}>
+          <option value="">Choose a provider</option>
+          {#each visibleProviders as option (option.id)}
+            <option value={option.id}>{option.label}</option>
+          {/each}
+        </select>
+      </label>
+
+      <label class="isp-field">
+        <span>Base URL</span>
+        <input
+          name="baseUrl"
+          type="url"
+          bind:value={baseUrl}
+          placeholder={selected?.baseUrl ?? 'Provider default'}
+          disabled={busy}
+        />
+      </label>
+
+      <label class="isp-field">
+        <span>Model</span>
+        <input
+          name="model"
+          bind:value={model}
+          list="isp-discovered-models"
+          disabled={busy}
+        />
+        <datalist id="isp-discovered-models">
+          {#each discovered as found (`${found.service}:${found.id}`)}
+            <option value={found.id}>{found.service}</option>
+          {/each}
+        </datalist>
+      </label>
+      {#if onDiscoverModels}
+        <button type="button" class="isp-link" onclick={() => onDiscoverModels?.()} disabled={busy}>
+          Find local models
+        </button>
+      {/if}
+    {/if}
+
+    <label class="isp-field">
+      <span>Default tier</span>
+      <select name="defaultTier" bind:value={defaultTier} disabled={busy}>
+        {#each INFERENCE_SETTINGS_TIERS as tier (tier)}
+          <option value={tier}>{tier}</option>
+        {/each}
+      </select>
+    </label>
+
+    <div class="isp-actions">
+      <button type="submit" disabled={busy || !onSaveDefaults}>Save</button>
+      {#if needsProvider && onTestConnection}
+        <button
+          type="button"
+          onclick={testConnection}
+          disabled={busy || testing || !provider}
+        >
+          {testing ? 'Testing…' : 'Test connection'}
+        </button>
+      {/if}
+    </div>
+    {#if testResult}
+      <p
+        class="isp-result"
+        class:isp-result-ok={testResult.reachable}
+        role="status"
+        data-testid="inference-test-result"
+      >
+        {testResult.reachable ? 'Connected' : testResult.skipped ? 'Not tested' : 'Failed'}:
+        {testResult.detail}
+      </p>
+    {/if}
+  </form>
+
+  {#if needsProvider && provider && (selected?.requiresApiKey ?? true)}
+    <!-- Remount on a provider or endpoint change: a typed key never carries
+         over to another endpoint. -->
+    {#key `${provider}\n${baseUrl.trim()}`}
+    <form class="isp-key" onsubmit={saveKey} autocomplete="off" data-testid="inference-key-form">
+      <span class="isp-key-status" data-testid="inference-key-status">
+        API key: {keySet ? 'set' : 'not set'}
+      </span>
+      <label class="isp-field">
+        <span>{keySet ? 'Replace key' : 'Add key'}</span>
+        <input
+          name="apiKey"
+          type="password"
+          autocomplete="off"
+          spellcheck="false"
+          disabled={busy || !onSaveKey}
+        />
+      </label>
+      <button type="submit" disabled={busy || !onSaveKey}>
+        {keySet ? 'Replace key' : 'Save key'}
+      </button>
+      <p class="isp-hint">
+        The key is stored on the server and only ever sent to this provider's endpoint.
+      </p>
+      {#if keyError}
+        <p class="isp-result" role="alert">{keyError}</p>
+      {/if}
+    </form>
+    {/key}
+  {/if}
+</div>
+
+<style>
+@layer smrt.reset, smrt.structure, smrt.theme;
+@layer smrt.theme {
+  .isp-default {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .isp-form,
+  .isp-key {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+  .isp-modes {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    border: none;
+    padding: 0;
+    margin: 0;
+  }
+  .isp-modes legend {
+    font-weight: 600;
+    margin-bottom: 0.25rem;
+  }
+  .isp-radio {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+  .isp-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    font-size: 0.875rem;
+  }
+  .isp-field input,
+  .isp-field select {
+    padding: 0.4rem 0.5rem;
+    border: var(--smrt-hairline);
+    border-radius: 0.375rem;
+    background: var(--smrt-color-surface);
+    color: inherit;
+    font: inherit;
+  }
+  .isp-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .isp-link {
+    align-self: flex-start;
+  }
+  .isp-key-status {
+    font-weight: 600;
+  }
+  .isp-hint,
+  .isp-result {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--smrt-color-on-surface-variant);
+  }
+  .isp-result-ok {
+    color: var(--smrt-color-success, inherit);
+  }
+}
+</style>

package/dist/svelte/components/InferenceDefaultView.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { InferenceConnectionRequest, InferenceDefaultsChange, InferenceDefaultsView, InferenceDiscoveryView, InferenceKeyChange, InferenceProviderView, InferenceTestResultView } from '../types.js';
+interface InferenceDefaultViewProps {
+    defaults: InferenceDefaultsView;
+    providers: InferenceProviderView[];
+    discoveredModels: InferenceDiscoveryView[];
+    busy: boolean;
+    onSaveDefaults?: (change: InferenceDefaultsChange) => void;
+    onSaveKey?: (change: InferenceKeyChange) => void | Promise<void>;
+    onTestConnection?: (request: InferenceConnectionRequest) => Promise<InferenceTestResultView>;
+    onDiscoverModels?: () => void;
+}
+declare const InferenceDefaultView: import("svelte").Component<InferenceDefaultViewProps, {}, "">;
+type InferenceDefaultView = ReturnType<typeof InferenceDefaultView>;
+export default InferenceDefaultView;
+//# sourceMappingURL=InferenceDefaultView.svelte.d.ts.map

package/dist/svelte/components/InferenceDefaultView.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InferenceDefaultView.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InferenceDefaultView.svelte.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,0BAA0B,EAC1B,uBAAuB,EACvB,qBAAqB,EACrB,sBAAsB,EACtB,kBAAkB,EAClB,qBAAqB,EAGrB,uBAAuB,EACxB,MAAM,aAAa,CAAC;AAOrB,UAAU,yBAAyB;IACjC,QAAQ,EAAE,qBAAqB,CAAC;IAChC,SAAS,EAAE,qBAAqB,EAAE,CAAC;IACnC,gBAAgB,EAAE,sBAAsB,EAAE,CAAC;IAC3C,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC3D,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACjE,gBAAgB,CAAC,EAAE,CACjB,OAAO,EAAE,0BAA0B,KAChC,OAAO,CAAC,uBAAuB,CAAC,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AA+MD,QAAA,MAAM,oBAAoB,+DAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}