broapp 0.4.5 → 0.4.7

package/src/ai/react/ai.css

@@ -9,23 +9,380 @@
  * components are still legible in an application that defines none.
  */
 
+/*
+ * The settings panel.
+ *
+ * One height, one radius and one border for every control, so a select, a
+ * field, the saved-key row and a button beside them sit on one line and read
+ * as one set. The frame — a card, or none — is the application's to draw.
+ *
+ * The lengths follow Autoapp's control tokens where an application has them,
+ * so this panel and a form the renderer draws on the same page are one set of
+ * controls; each falls back to that token's default, so an application with no
+ * renderer gets the same panel. An `--ai-*` property set on `.ai-settings` or
+ * above it beats both.
+ */
+.ai-settings {
+  --ai-control-height: 2.5rem;
+  --ai-control-radius: var(--autoapp-radius-sm, 7px);
+  --ai-border-width: var(--autoapp-border-width, 1px);
+  --ai-label-size: var(--autoapp-font-size-small, 0.85rem);
+  --ai-label-weight: var(--autoapp-weight-strong, 600);
+  --ai-control-size: var(--autoapp-font-size-note, 0.9rem);
+  --ai-hint-size: var(--autoapp-font-size-caption, 0.8rem);
+  --ai-focus-ring: var(--autoapp-focus-ring, var(--accent, #1f5f4f));
+  --ai-focus-ring-width: var(--autoapp-focus-ring-width, 2px);
+  --ai-focus-ring-offset: var(--autoapp-focus-ring-offset, 1px);
+
+  display: flex;
+  flex-direction: column;
+  gap: 1.1rem;
+}
+
+.ai-settings__header {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+}
+
+.ai-settings__title {
+  margin: 0;
+}
+
+.ai-settings__lede {
+  margin: 0;
+  color: var(--text-muted, #6b6862);
+}
+
+.ai-settings__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin: 0;
+}
+
+.ai-settings__label-row {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.ai-settings__label {
+  margin: 0;
+  font-size: var(--ai-label-size);
+  font-weight: var(--ai-label-weight);
+  color: var(--text, #1b1a18);
+}
+
+.ai-settings__meta {
+  font-size: var(--ai-hint-size);
+  color: var(--text-muted, #6b6862);
+}
+
+.ai-settings__meta--ok {
+  color: var(--ok, #1f5f4f);
+}
+
+.ai-settings__hint {
+  margin: 0;
+  font-size: var(--ai-hint-size);
+  line-height: 1.45;
+  color: var(--text-muted, #6b6862);
+}
+
+.ai-settings__icon {
+  flex: none;
+  width: 1rem;
+  height: 1rem;
+}
+
+.ai-settings__input,
+.ai-settings__saved-key {
+  width: 100%;
+  min-width: 0;
+  height: var(--ai-control-height);
+  padding: 0 0.75rem;
+  border: var(--ai-border-width) solid var(--border, #e3e2df);
+  border-radius: var(--ai-control-radius);
+  background: var(--surface, #ffffff);
+  font: inherit;
+  font-size: var(--ai-control-size);
+  color: var(--text, #1b1a18);
+}
+
+.ai-settings__input::placeholder {
+  color: var(--text-muted, #6b6862);
+  opacity: 0.8;
+}
+
+.ai-settings__input:hover:not(:disabled) {
+  border-color: var(--text-muted, #6b6862);
+}
+
+.ai-settings__input:focus-visible,
+.ai-settings__button:focus-visible,
+.ai-settings__inline-action:focus-visible,
+.ai-settings__switch:focus-visible {
+  outline: var(--ai-focus-ring-width) solid var(--ai-focus-ring);
+  outline-offset: var(--ai-focus-ring-offset);
+}
+
+.ai-settings__input:disabled {
+  opacity: 0.6;
+}
+
+.ai-settings__select {
+  position: relative;
+  display: block;
+}
+
+.ai-settings__select select {
+  appearance: none;
+  padding-right: 2.25rem;
+  text-overflow: ellipsis;
+}
+
+.ai-settings__select .ai-settings__icon {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  translate: 0 -50%;
+  color: var(--text-muted, #6b6862);
+  pointer-events: none;
+}
+
 .ai-settings__key {
   display: flex;
   gap: 0.5rem;
   align-items: center;
 }
 
-.ai-settings__key .input {
+/* The saved key: what a field looks like when there is nothing to type. */
+.ai-settings__saved-key {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+  padding-right: 0.25rem;
+}
+
+.ai-settings__saved-key .ai-settings__icon {
+  color: var(--text-muted, #6b6862);
+}
+
+.ai-settings__key-hint {
   flex: 1 1 auto;
   min-width: 0;
+  overflow: hidden;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.85rem;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.ai-settings__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+/* A quiet action inside a row: Replace, Remove, Refresh. */
+.ai-settings__inline-action {
+  display: inline-flex;
+  flex: none;
+  gap: 0.35rem;
+  align-items: center;
+  padding: 0.3rem 0.55rem;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  font: inherit;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--text-muted, #6b6862);
+  cursor: pointer;
+}
+
+.ai-settings__inline-action:hover:not(:disabled) {
+  background: var(--bg, #fbfbfa);
+  color: var(--text, #1b1a18);
 }
 
-.ai-settings__remember {
+.ai-settings__inline-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.ai-settings__saved-key .ai-settings__inline-action + .ai-settings__inline-action {
+  position: relative;
+  margin-left: 0.3rem;
+}
+
+.ai-settings__saved-key .ai-settings__inline-action + .ai-settings__inline-action::before {
+  position: absolute;
+  top: 20%;
+  bottom: 20%;
+  left: -0.2rem;
+  width: 1px;
+  background: var(--border, #e3e2df);
+  content: '';
+}
+
+/* Pulled up so the label row is no taller than one without a button. */
+.ai-settings__inline-action--icon {
+  margin: -0.3rem -0.55rem -0.3rem 0;
+}
+
+.ai-settings__button {
+  flex: none;
+  height: var(--ai-control-height);
+  padding: 0 1rem;
+  border: var(--ai-border-width) solid var(--border, #e3e2df);
+  border-radius: var(--ai-control-radius);
+  background: var(--surface, #ffffff);
+  font: inherit;
+  font-size: var(--ai-control-size);
+  font-weight: var(--ai-label-weight);
+  color: var(--text, #1b1a18);
+  cursor: pointer;
+  transition: filter 150ms ease-out;
+}
+
+.ai-settings__button--primary {
+  border-color: transparent;
+  background: var(--accent, #1f5f4f);
+  color: var(--accent-contrast, #ffffff);
+}
+
+.ai-settings__button--block {
+  width: 100%;
+}
+
+.ai-settings__button:hover:not(:disabled) {
+  filter: brightness(1.08);
+}
+
+.ai-settings__button:active:not(:disabled) {
+  filter: brightness(0.95);
+}
+
+.ai-settings__button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.ai-settings__switch-row {
   display: flex;
-  gap: 0.5rem;
+  gap: 1rem;
   align-items: center;
-  margin-top: 0.75rem;
-  font-weight: 400;
+  justify-content: space-between;
+  cursor: pointer;
+}
+
+/* A checkbox, drawn as the switch it is announced as. */
+.ai-settings__switch {
+  position: relative;
+  flex: none;
+  width: 2.25rem;
+  height: 1.3rem;
+  margin: 0;
+  border: var(--ai-border-width) solid var(--border, #e3e2df);
+  border-radius: 999px;
+  background: var(--bg, #fbfbfa);
+  appearance: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease-out,
+    border-color 150ms ease-out;
+}
+
+.ai-settings__switch::after {
+  position: absolute;
+  top: 50%;
+  left: 0.15rem;
+  width: 0.9rem;
+  height: 0.9rem;
+  border-radius: 50%;
+  background: var(--text-muted, #6b6862);
+  content: '';
+  translate: 0 -50%;
+  transition:
+    translate 150ms cubic-bezier(0.25, 1, 0.5, 1),
+    background-color 150ms ease-out;
+}
+
+.ai-settings__switch:checked {
+  border-color: transparent;
+  background: var(--accent, #1f5f4f);
+}
+
+.ai-settings__switch:checked::after {
+  background: var(--accent-contrast, #ffffff);
+  translate: 0.95rem -50%;
+}
+
+.ai-settings__switch:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ai-settings__switch,
+  .ai-settings__switch::after,
+  .ai-settings__button {
+    transition: none;
+  }
+}
+
+/*
+ * The two parts of the panel, "In use" and "Providers". Each provider is a
+ * `<details>` whose summary says where it runs and whether it is on, so the
+ * list reads without opening anything.
+ */
+.ai-settings__section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+}
+
+.ai-settings__section-title {
+  margin: 0;
+  font-size: var(--ai-label-size);
+  font-weight: var(--ai-label-weight);
+  color: var(--text, #1b1a18);
+}
+
+.ai-settings__providers {
+  display: flex;
+  flex-direction: column;
+  border: var(--ai-border-width) solid var(--border, #e3e2df);
+  border-radius: var(--ai-control-radius);
+}
+
+.ai-settings__provider + .ai-settings__provider {
+  border-top: var(--ai-border-width) solid var(--border, #e3e2df);
+}
+
+.ai-settings__provider-summary {
+  padding: 0.6rem 0.75rem;
+  font-size: var(--ai-control-size);
+  color: var(--text, #1b1a18);
+  cursor: pointer;
+}
+
+.ai-settings__provider-summary:focus-visible {
+  outline: var(--ai-focus-ring-width) solid var(--ai-focus-ring);
+  outline-offset: var(--ai-focus-ring-offset);
+}
+
+.ai-settings__provider-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.9rem;
+  padding: 0.25rem 0.75rem 0.9rem;
 }
 
 /*
@@ -33,12 +390,31 @@
  * question a user should have to open a menu to answer.
  */
 .ai-settings__notice {
-  margin: 0.75rem 0;
-  padding: 0.6rem 0.75rem;
-  border: 1px solid var(--border, #e3e2df);
-  border-radius: var(--radius, 10px);
+  display: flex;
+  gap: 0.6rem;
+  align-items: flex-start;
+  margin: 0;
   color: var(--text-muted, #6b6862);
-  font-size: 0.9rem;
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
+.ai-settings__notice .ai-settings__icon {
+  margin-top: 0.15rem;
+}
+
+.ai-settings__message {
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
+.ai-settings__message--error {
+  color: var(--bad, #96311f);
+}
+
+.ai-settings__message--ok {
+  color: var(--ok, #1f5f4f);
 }
 
 .ai-chat__messages {

package/src/ai/react/use-ai-models.ts

@@ -1,21 +1,23 @@
 /**
- * The models the configured provider offers.
+ * The models every provider turned on in Settings offers, in one list.
  *
- * Refetched whenever something that would change the answer changes — the
- * provider, its address, or whether a key is set. Not on every settings write:
- * choosing a model must not send the application back to the provider to ask
- * what the models are.
+ * Refetched whenever something that would change the answer changes — which
+ * providers are on, any of their addresses, or whether each has a key. Not on
+ * every settings write: choosing a model must not send the application back to
+ * every provider to ask what the models are.
  */
 import * as React from 'react';
 
 import { BroappError } from '../../shared/errors.ts';
-import type { BroappModel } from '../shared/types.ts';
+import type { BroappModel, UnavailableProvider } from '../shared/types.ts';
 
 import { useAiContext } from './provider.tsx';
 
 /** What {@link useAiModels} returns. */
 export interface AiModelsHook {
   readonly models: BroappModel[];
+  /** The providers that could not be read, or were cut short, each with its sentence. */
+  readonly unavailable: UnavailableProvider[];
   readonly pending: boolean;
   readonly error: BroappError | null;
   refresh(): Promise<void>;
@@ -24,17 +26,24 @@ export interface AiModelsHook {
 export function useAiModels(): AiModelsHook {
   const shared = useAiContext();
   const [models, setModels] = React.useState<BroappModel[]>([]);
+  const [unavailable, setUnavailable] = React.useState<UnavailableProvider[]>([]);
   const [pending, setPending] = React.useState(false);
   const [error, setError] = React.useState<BroappError | null>(null);
   const generation = React.useRef(0);
 
   const provider = shared.settings?.provider ?? null;
-  const baseUrl = shared.settings?.baseUrl ?? null;
-  const hasKey = shared.settings?.hasKey ?? false;
+  // One string for everything the answer depends on, so the effect runs when
+  // one of them changes and not when a model is chosen.
+  const reach = JSON.stringify(
+    (shared.settings?.providers ?? [])
+      .filter((entry) => entry.enabled)
+      .map((entry) => [entry.id, entry.baseUrl, entry.hasKey]),
+  );
 
   const refresh = React.useCallback(async (): Promise<void> => {
     if (provider === null) {
       setModels([]);
+      setUnavailable([]);
       return;
     }
     const mine = (generation.current += 1);
@@ -43,13 +52,15 @@ export function useAiModels(): AiModelsHook {
     try {
       const connected = await shared.client();
       const result = await connected.call('ai.modelsList', undefined);
-      // A slow answer for a provider the user has since changed must not
+      // A slow answer for providers the user has since changed must not
       // replace the list they are looking at now.
       if (generation.current !== mine) return;
       setModels(result.models);
+      setUnavailable(result.unavailable);
     } catch (cause) {
       if (generation.current !== mine) return;
       setModels([]);
+      setUnavailable([]);
       setError(
         cause instanceof BroappError
           ? cause
@@ -62,9 +73,9 @@ export function useAiModels(): AiModelsHook {
 
   React.useEffect(() => {
     void refresh();
-    // `baseUrl` and `hasKey` are not used inside `refresh`; they are here
-    // because changing either changes what the provider will answer.
-  }, [refresh, baseUrl, hasKey]);
+    // `reach` is not used inside `refresh`; it is here because changing it
+    // changes what the providers will answer.
+  }, [refresh, reach]);
 
-  return { models, pending, error, refresh };
+  return { models, unavailable, pending, error, refresh };
 }

package/src/ai/react/use-ai-settings.ts

@@ -32,7 +32,8 @@ export interface AiSettingsHook {
   readonly pending: boolean;
   readonly error: BroappError | null;
   update(patch: UpdatePatch): Promise<void>;
-  test(): Promise<ConnectionResult | null>;
+  /** Test the provider in use, or, given an id, that provider with its own address and key. */
+  test(provider?: string): Promise<ConnectionResult | null>;
   refresh(): Promise<void>;
 }
 
@@ -47,21 +48,25 @@ export function useAiSettings(): AiSettingsHook {
   const [pending, setPending] = React.useState(false);
   const [error, setError] = React.useState<BroappError | null>(null);
 
-  // The provider list cannot change while the application runs — it is what
-  // was compiled in — so it is fetched once.
-  const fetched = React.useRef(false);
+  // The providers cannot change while the application runs — they are what
+  // was compiled in — but whether each runs on this computer is a property of
+  // its address, so the list is read again when an address changes.
+  const addresses = JSON.stringify((shared.settings?.providers ?? []).map((entry) => [entry.id, entry.baseUrl]));
   React.useEffect(() => {
-    if (fetched.current) return;
-    fetched.current = true;
+    let current = true;
     void (async () => {
       try {
         const connected = await shared.client();
-        setProviders((await connected.call('ai.providersList', undefined)).providers);
+        const listed = (await connected.call('ai.providersList', undefined)).providers;
+        if (current) setProviders(listed);
       } catch (cause) {
-        setError(asBroappError(cause, 'The provider list could not be read.'));
+        if (current) setError(asBroappError(cause, 'The provider list could not be read.'));
       }
     })();
-  }, [shared]);
+    return () => {
+      current = false;
+    };
+  }, [shared, addresses]);
 
   const update = React.useCallback(
     async (patch: UpdatePatch): Promise<void> => {
@@ -79,12 +84,14 @@ export function useAiSettings(): AiSettingsHook {
     [shared],
   );
 
-  const test = React.useCallback(async (): Promise<ConnectionResult | null> => {
+  const test = React.useCallback(async (provider?: string): Promise<ConnectionResult | null> => {
     setPending(true);
     setError(null);
     try {
       const connected = await shared.client();
-      return await connected.call('ai.connectionTest', undefined);
+      return provider === undefined
+        ? await connected.call('ai.connectionTest', undefined)
+        : await connected.call('ai.providerTest', { provider });
     } catch (cause) {
       setError(asBroappError(cause, 'The connection could not be tested.'));
       return null;

package/src/ai/shared/contract.ts

@@ -40,6 +40,21 @@ const providerInfo = s.object({
   defaultBaseUrl: s.nullable(s.string()),
 });
 
+/** A provider whose models are missing from the list, and the sentence that says why. */
+const unavailableProvider = s.object({ provider: s.string(), message: s.string() });
+
+const connectionResult = s.object({ ok: s.boolean(), message: s.string(), latencyMs: s.number() });
+
+const providerSettings = s.object({
+  id: s.string(),
+  baseUrl: s.nullable(s.string()),
+  modelId: s.nullable(s.string()),
+  enabled: s.boolean(),
+  hasKey: s.boolean(),
+  keyHint: s.nullable(s.string()),
+  configured: s.boolean(),
+});
+
 const settings = s.object({
   provider: s.nullable(s.string()),
   modelId: s.nullable(s.string()),
@@ -48,6 +63,7 @@ const settings = s.object({
   keyHint: s.nullable(s.string()),
   remember: s.boolean(),
   configured: s.boolean(),
+  providers: s.array(providerSettings, { max: 50 }),
 });
 
 const chatTurn = s.object({
@@ -145,12 +161,18 @@ export const aiContract = defineContract({
     },
     'ai.settingsUpdate': {
       input: s.object({
+        // Makes this provider the one in use. Sent with `target`, only the same.
         provider: s.optional(s.string({ max: 64 })),
+        // The provider the fields below apply to; absent, the one in use.
+        target: s.optional(s.string({ max: 64 })),
         modelId: s.optional(s.string({ max: 200 })),
         baseUrl: s.optional(s.nullable(s.string({ max: 2000 }))),
         // Null clears the stored key; a string replaces it. It goes to the
         // secret store and is never read back out to the browser.
         apiKey: s.optional(s.nullable(s.string({ max: 4000 }))),
+        // Whether the target may be sent anything. The one in use cannot be
+        // turned off.
+        enabled: s.optional(s.boolean()),
         remember: s.optional(s.boolean()),
       }),
       output: settings,
@@ -163,14 +185,24 @@ export const aiContract = defineContract({
     },
     'ai.modelsList': {
       input: s.void(),
-      output: s.object({ models: s.array(model, { max: 1000 }) }),
-      summary: 'The models the configured provider offers.',
+      output: s.object({
+        // Every enabled provider's models, in the build's provider order.
+        models: s.array(model, { max: 1000 }),
+        // The providers that could not be read, or were cut short, and why.
+        unavailable: s.array(unavailableProvider, { max: 50 }),
+      }),
+      summary: 'The models every provider turned on in Settings offers.',
     },
     'ai.connectionTest': {
       input: s.void(),
-      output: s.object({ ok: s.boolean(), message: s.string(), latencyMs: s.number() }),
+      output: connectionResult,
       summary: 'Try the configured provider once and report what happened.',
     },
+    'ai.providerTest': {
+      input: s.object({ provider: s.string({ max: 64 }) }),
+      output: connectionResult,
+      summary: 'Try one provider with its own address and key, whether or not it is turned on.',
+    },
     'ai.chatConfirm': {
       input: s.object({ runId, callId: s.string({ max: 200 }), approve: s.boolean() }),
       output: s.object({ accepted: s.boolean() }),
@@ -237,10 +269,10 @@ export const aiContract = defineContract({
         // Images travel with the turn they arrive on. History keeps a
         // placeholder instead, because a transcript of base64 would not fit.
         files: s.optional(s.array(chatFile, { max: 4 })),
-        // The model for this turn only, and only *within* the configured
-        // provider. A provider is never overridden per turn: a different
-        // provider means a different key and a different answer to "does this
-        // leave my computer", and that stays a Settings decision.
+        // The model for this turn only, as a model reference: bare, a model
+        // of the provider in use; `<provider>:<model>`, a model of a provider
+        // the person turned on in Settings, with that provider's own key and
+        // address. A provider that is off is sent nothing.
         modelId: s.optional(s.string({ max: 200 })),
       }),
       event: chatEvent,

package/src/ai/shared/index.ts

@@ -6,6 +6,8 @@
  */
 export { aiContract } from './contract.ts';
 export type { AiContract } from './contract.ts';
+export { describeModel, findModel, formatModelRef, parseModelRef, whereItRuns } from './model-ref.ts';
+export type { FoundModel, ModelDescription, ModelRef, ProviderPlace } from './model-ref.ts';
 export type {
   AiSettings,
   BroappModel,
@@ -13,7 +15,9 @@ export type {
   ChatFile,
   ChatTurn,
   ProviderInfo,
+  ProviderSettings,
   StoredMessage,
   Thread,
   ToolPermission,
+  UnavailableProvider,
 } from './types.ts';