@jini-ai/ui 0.4.6 → 0.4.8

package/dist/features/panel-kit/fetch-query/adapter.tanstack.js

@@ -0,0 +1,212 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Optional TanStack translation layer. No library types escape the fetch-query contract. */
+import { createContext, useCallback, useContext, useEffect, useMemo, useSyncExternalStore } from 'react';
+import { isCancelledError, QueryClient, QueryClientProvider, useMutation, useQuery } from '@tanstack/react-query';
+import { DEFAULT_STALE_TIME, FetchQueryCache, IDLE_RETENTION, toQueryError } from '@jini-ai/core/fetch';
+import { browserFetchQueryEnvironment } from './environment.browser.js';
+import { resolveFetchQueryError, resolveFetchQueryStatus } from './adapter.react.js';
+import { FetchQueryBinding } from './binding.react.js';
+const ScopeContext = createContext(null);
+/** Match built-in defaults. Failed authorization/validation must surface immediately;
+ * automatic retries would hide the server's first useful error behind repeated requests. */
+function createScope({ environment }) {
+    return {
+        client: new QueryClient({ defaultOptions: {
+                queries: { staleTime: DEFAULT_STALE_TIME, retry: false, refetchOnWindowFocus: false, refetchOnReconnect: false, networkMode: 'always' },
+                mutations: { retry: false, networkMode: 'always' },
+            } }),
+        // Reuse the existing connectivity gate; TanStack's online/focus managers are global
+        // and cannot represent two providers with independent host environment ports.
+        gate: new FetchQueryCache({}, { environment }), environment, history: new WeakMap(),
+    };
+}
+/** Provider-owned TanStack cache and binding, compatible with hooks from the default entry.
+ * @example <FetchQueryProvider><ResourceScreen /></FetchQueryProvider>
+ * @param props Children and optional host connectivity/focus port. */
+export function FetchQueryProvider({ children, environment = browserFetchQueryEnvironment }) {
+    // A module singleton would leak cache values between independent providers/tests,
+    // producing cases that pass alone but fail together. Scope ownership to this provider.
+    const scope = useMemo(() => createScope({ environment }), [environment]);
+    useEffect(() => {
+        scope.gate.activate();
+        let online = environment.isOnline();
+        const release = environment.subscribeOnline({ listener: next => {
+                const reconnect = next && !online;
+                online = next;
+                // An offline/online pair may be batched into one React render. Signal the cache
+                // directly rather than depending on a disabled -> enabled render to revalidate.
+                if (reconnect)
+                    void scope.client.refetchQueries({ predicate: query => query.isActive() && query.isStale() && query.state.fetchStatus !== 'fetching' });
+            } });
+        return () => { release(); scope.gate.dispose(); };
+    }, [scope, environment]);
+    return _jsx(QueryClientProvider, { client: scope.client, children: _jsx(ScopeContext.Provider, { value: scope, children: _jsx(FetchQueryBinding, { adapter: adapter, children: children }) }) });
+}
+/** Fail closed when an adapter hook is used without its provider. */
+function useScope() {
+    const scope = useContext(ScopeContext);
+    if (!scope)
+        throw new Error('Fetch-query hooks require FetchQueryProvider');
+    return scope;
+}
+/** Observe only this provider's connectivity; paused reads do not claim network activity. */
+function useOnline({ environment }) {
+    const subscribe = useCallback((listener) => environment.subscribeOnline({ listener }), [environment]);
+    const snapshot = useCallback(() => environment.isOnline(), [environment]);
+    return useSyncExternalStore(subscribe, snapshot, snapshot);
+}
+/** Preserve contract metadata across observers, without retaining evicted query objects. */
+function historyFor({ scope, query }) {
+    let history = scope.history.get(query);
+    if (!history) {
+        history = { replacement: 0, request: 0, error: null };
+        scope.history.set(query, history);
+    }
+    return history;
+}
+/** Replacement writes win over either outcome of an older transport, across all loaders
+ * and reactive reads. Weak keys follow TanStack's own query eviction lifecycle. */
+async function read({ scope, key, fetch }) {
+    const query = scope.client.getQueryCache().find({ queryKey: key, exact: true });
+    const history = historyFor({ scope, query });
+    const generation = history.replacement;
+    const request = ++history.request;
+    try {
+        const value = await scope.gate.runOnline({ run: fetch });
+        if (generation !== history.replacement)
+            return scope.client.getQueryData(key);
+        if (value === undefined)
+            throw new Error(`${JSON.stringify(key)} data is undefined`);
+        if (request === history.request)
+            history.error = null;
+        return value;
+    }
+    catch (error) {
+        if (generation !== history.replacement)
+            return scope.client.getQueryData(key);
+        // Earlier data remains useful, but a failed refresh is not a fresh cache hit.
+        // The next loader/mount must retry even when its staleTime would retain that data.
+        if (request === history.request) {
+            history.error = toQueryError(error);
+            query.invalidate();
+        }
+        throw error;
+    }
+}
+/** Match the built-in cache's idle retention. TanStack's default gcTime (5 min) would
+ * otherwise evict an unobserved entry before a longer staleTime says it is stale. */
+function gcTimeFor({ staleTime }) {
+    return Math.max(IDLE_RETENTION, staleTime);
+}
+/** Reactive read translated to the library-free contract, with explicit focus opt-in. */
+function useFetchQuery({ key, fetch }, { enabled = true, staleTime = DEFAULT_STALE_TIME, refetchOnWindowFocus = false } = {}) {
+    const scope = useScope();
+    const online = useOnline(scope);
+    const query = useQuery({ queryKey: key, queryFn: () => read({ scope, key, fetch }), enabled: enabled && online, staleTime, gcTime: gcTimeFor({ staleTime }) }, scope.client);
+    const { refetch: refresh } = query;
+    const refetch = useCallback(() => {
+        if (scope.environment.isOnline()) {
+            supersedeInitialRead({ scope, key });
+            void refresh();
+            return;
+        }
+        // Reconnect may already have started a fetch (re-enabled observer or provider refetch);
+        // that request postdates this one, so join it instead of cancelling it into a duplicate.
+        void scope.gate.runOnline({ run: () => refresh({ cancelRefetch: false }) });
+    }, [scope, refresh, JSON.stringify(key)]);
+    useEffect(() => {
+        if (!enabled || !refetchOnWindowFocus)
+            return;
+        return scope.environment.subscribeFocus({ listener: () => {
+                const cached = scope.client.getQueryCache().find({ queryKey: key, exact: true });
+                if (scope.environment.isOnline() && cached?.isStaleByTime(staleTime) && cached.state.fetchStatus !== 'fetching')
+                    refetch();
+            } });
+    }, [scope, JSON.stringify(key), enabled, staleTime, refetchOnWindowFocus, refetch]);
+    // TanStack clears an initial error when a retry starts. The contract keeps it until
+    // recovery, so a retry is never mistaken for evidence that the last failure is gone.
+    const cached = scope.client.getQueryCache().find({ queryKey: key, exact: true });
+    const history = historyFor({ scope, query: cached });
+    const hasData = query.data !== undefined;
+    return {
+        data: query.data,
+        status: resolveFetchQueryStatus({ disabled: !enabled, hasData, status: query.status }),
+        error: resolveFetchQueryError({ error: history.error ?? query.error, disabled: !enabled, hasData }),
+        isFetching: online && query.isFetching, refetch,
+    };
+}
+/** Preserve promise rejection for awaiting writes while also handling discarded promises. */
+function useFetchMutation({ run }, { invalidates } = {}) {
+    const scope = useScope();
+    const mutation = useMutation({
+        mutationFn: required => scope.gate.runOnline({ run: () => run(required) }),
+        onSuccess: () => {
+            // Do not await dependent reads: the mutation promise means the write succeeded,
+            // not that every list finished reloading. Refetches proceed on their own schedule.
+            for (const key of invalidates ?? [])
+                invalidateResource({ scope, key });
+        },
+    }, scope.client);
+    const { mutateAsync, reset } = mutation;
+    const mutate = useCallback((required) => {
+        const promise = mutateAsync(required);
+        // Handle this same promise for callers that discard it, while still returning it so
+        // await/catch observes the original rejection; discarding the derived promise is intentional.
+        void promise.catch(() => { });
+        return promise;
+    }, [mutateAsync]);
+    return { mutate, status: mutation.status, error: mutation.status === 'error' ? toQueryError(mutation.error) : null, reset };
+}
+/** Loader shares reactive reads, retains fresh idle values, and protects replacement writes. */
+function useCachedLoader({ key, fetch }, { staleTime = DEFAULT_STALE_TIME } = {}) {
+    const scope = useScope();
+    return useMemo(() => {
+        const options = { queryKey: key, queryFn: () => read({ scope, key, fetch }), staleTime, gcTime: gcTimeFor({ staleTime }) };
+        return {
+            peek: () => scope.client.getQueryData(key),
+            load: (required = { key, fetch }) => {
+                const selected = { ...options, queryKey: required.key, queryFn: () => read({ scope, key: required.key, fetch: required.fetch }) };
+                return scope.client.fetchQuery(selected).catch(error => {
+                    // A forced refresh can supersede a loader's request without aborting its transport.
+                    // Follow the new request instead of exposing TanStack's cancellation vocabulary.
+                    if (!isCancelledError(error))
+                        throw error;
+                    // Invalidation also supersedes loader-only reads. Join (or start) the post-write
+                    // request rather than returning an obsolete value while the key is invalidated.
+                    const query = scope.client.getQueryCache().find({ queryKey: required.key, exact: true });
+                    if (query.state.isInvalidated)
+                        return scope.client.fetchQuery(selected);
+                    return (query.promise ?? scope.client.getQueryData(required.key));
+                });
+            },
+            replace: ({ value }) => {
+                const query = scope.client.getQueryCache().build(scope.client, options);
+                const history = historyFor({ scope, query });
+                history.replacement += 1;
+                history.error = null;
+                scope.client.setQueryData(key, value);
+            },
+        };
+    }, [scope, key, fetch, staleTime]);
+}
+/** A host write/refresh postdates the initial GET as well as a background GET. TanStack
+ * normally joins an initial fetch with no data, which would let that pre-write snapshot win.
+ * Cancel its cache ownership before requesting the replacement; transports need no abort API. */
+function supersedeInitialRead({ scope, key }, { exact = true } = {}) {
+    void scope.client.cancelQueries({ queryKey: key, exact, predicate: query => query.isActive() && query.state.data === undefined && query.state.fetchStatus === 'fetching' });
+}
+/** One invalidation path serves both imperative refreshes and accepted writes. */
+function invalidateResource({ scope, key }, _optional = {}) {
+    // A loader-only detail request may feed an active parent query. It is just as stale
+    // after a write as an observed read, even though TanStack considers it inactive.
+    // Silent cancellation follows the replacement promise instead of resolving old cached data.
+    void scope.client.cancelQueries({ queryKey: key, predicate: query => query.state.fetchStatus === 'fetching' }, { silent: true });
+    void scope.client.invalidateQueries({ queryKey: key });
+}
+/** Prefix invalidation also reaches child keys read by other mounted consumers. */
+function useInvalidate() {
+    const scope = useScope();
+    return useCallback(({ key }) => { invalidateResource({ scope, key }); }, [scope]);
+}
+const adapter = { useFetchQuery, useFetchMutation, useCachedLoader, useInvalidate };
+//# sourceMappingURL=adapter.tanstack.js.map

package/dist/features/panel-kit/fetch-query/binding.react.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+import type { FetchQueryAdapter } from '@jini-ai/core/fetch';
+/** Internal composition seam: hooks and imperative loaders always use the same provider.
+ * Keep the adapter fixed for this provider's lifetime to preserve React hook ordering. */
+export declare function FetchQueryBinding({ adapter, children }: {
+    adapter: FetchQueryAdapter;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** Library-free read facade; the provider selects its implementation. */
+export declare const useFetchQuery: FetchQueryAdapter['useFetchQuery'];
+/** Library-free write facade, including safe discarded promises. */
+export declare const useFetchMutation: FetchQueryAdapter['useFetchMutation'];
+/** Prefix invalidator for the nearest provider's cache. */
+export declare const useInvalidate: FetchQueryAdapter['useInvalidate'];
+/** Promise loader using the same cache as reactive reads. */
+export declare const useCachedLoader: FetchQueryAdapter['useCachedLoader'];
+//# sourceMappingURL=binding.react.d.ts.map

package/dist/features/panel-kit/fetch-query/binding.react.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const AdapterContext = createContext(null);
+/** Internal composition seam: hooks and imperative loaders always use the same provider.
+ * Keep the adapter fixed for this provider's lifetime to preserve React hook ordering. */
+export function FetchQueryBinding({ adapter, children }) {
+    return _jsx(AdapterContext.Provider, { value: adapter, children: children });
+}
+/** Resolve the nearest provider; fail before attempting an unscoped read or write. */
+function useAdapter() {
+    const adapter = useContext(AdapterContext);
+    if (!adapter)
+        throw new Error('Fetch-query hooks require FetchQueryProvider');
+    return adapter;
+}
+/** Library-free read facade; the provider selects its implementation. */
+export const useFetchQuery = (required, optional = {}) => useAdapter().useFetchQuery(required, optional);
+/** Library-free write facade, including safe discarded promises. */
+export const useFetchMutation = (required, optional = {}) => useAdapter().useFetchMutation(required, optional);
+/** Prefix invalidator for the nearest provider's cache. */
+export const useInvalidate = () => useAdapter().useInvalidate();
+/** Promise loader using the same cache as reactive reads. */
+export const useCachedLoader = (required, optional = {}) => useAdapter().useCachedLoader(required, optional);
+//# sourceMappingURL=binding.react.js.map

package/dist/features/panel-kit/fetch-query/environment.browser.d.ts

@@ -1,4 +1,4 @@
-import type { FetchQueryEnvironmentPort } from './cache.js';
+import type { FetchQueryEnvironmentPort } from '@jini-ai/core/fetch';
 /** Browser-only adapter: subscriptions are owned by the provider effect, never module scope. */
 export declare const browserFetchQueryEnvironment: FetchQueryEnvironmentPort;
 //# sourceMappingURL=environment.browser.d.ts.map

package/dist/features/panel-kit/fetch-query/index.d.ts

@@ -1,4 +1,7 @@
-export { FetchQueryProvider, useFetchQuery, useFetchMutation, useCachedLoader, useInvalidate } from './adapter.react.js';
-export type { FetchQueryEnvironmentPort } from './cache.js';
-export type { QueryKey, QueryStatus, QueryResult, FetchQueryOptions, MutationStatus, MutationResult, FetchMutationOptions, CachedLoaderOptions, CachedLoader, FetchQueryAdapter } from './types.js';
+export { FetchQueryProvider } from './adapter.react.js';
+export { useFetchQuery, useFetchMutation, useCachedLoader, useInvalidate } from './binding.react.js';
+/** @deprecated Import the framework-neutral environment port from @jini-ai/core/fetch. */
+export type { FetchQueryEnvironmentPort } from '@jini-ai/core/fetch';
+/** @deprecated Import framework-neutral query contracts from @jini-ai/core/fetch. */
+export type { QueryKey, QueryStatus, QueryResult, FetchQueryOptions, MutationStatus, MutationResult, FetchMutationOptions, CachedLoaderOptions, CachedLoader, FetchQueryAdapter } from '@jini-ai/core/fetch';
 //# sourceMappingURL=index.d.ts.map

package/dist/features/panel-kit/fetch-query/index.js

@@ -1,2 +1,3 @@
-export { FetchQueryProvider, useFetchQuery, useFetchMutation, useCachedLoader, useInvalidate } from './adapter.react.js';
+export { FetchQueryProvider } from './adapter.react.js';
+export { useFetchQuery, useFetchMutation, useCachedLoader, useInvalidate } from './binding.react.js';
 //# sourceMappingURL=index.js.map

package/dist/features/panel-kit/fetch-query/tanstack.d.ts

@@ -0,0 +1,8 @@
+/** Optional adapter entry. Importing the default entry never loads TanStack. */
+export { FetchQueryProvider } from './adapter.tanstack.js';
+export { useFetchQuery, useFetchMutation, useCachedLoader, useInvalidate } from './binding.react.js';
+/** @deprecated Import the framework-neutral environment port from @jini-ai/core/fetch. */
+export type { FetchQueryEnvironmentPort } from '@jini-ai/core/fetch';
+/** @deprecated Import framework-neutral query contracts from @jini-ai/core/fetch. */
+export type { QueryKey, QueryStatus, QueryResult, FetchQueryOptions, MutationStatus, MutationResult, FetchMutationOptions, CachedLoaderOptions, CachedLoader, FetchQueryAdapter } from '@jini-ai/core/fetch';
+//# sourceMappingURL=tanstack.d.ts.map

package/dist/features/panel-kit/fetch-query/tanstack.js

@@ -0,0 +1,4 @@
+/** Optional adapter entry. Importing the default entry never loads TanStack. */
+export { FetchQueryProvider } from './adapter.tanstack.js';
+export { useFetchQuery, useFetchMutation, useCachedLoader, useInvalidate } from './binding.react.js';
+//# sourceMappingURL=tanstack.js.map

package/dist/features/panel-kit/helpers/standing-draft-recovery-message.d.ts

@@ -4,5 +4,7 @@ export declare function standingDraftRecoveryMessage({ draft, t, serverUpdatedAt
     draft: StandingDraftAutosaveSnapshot;
     t: (key: string) => string;
     serverUpdatedAt?: string;
-}, _options?: {}): string;
+}, { formatSavedAt }?: {
+    formatSavedAt?: (iso: string) => string;
+}): string;
 //# sourceMappingURL=standing-draft-recovery-message.d.ts.map

package/dist/features/panel-kit/helpers/standing-draft-recovery-message.js

@@ -1,10 +1,17 @@
+import { formatTimestamp } from "./format-timestamp.js";
+/** The viewer's wall-clock time of the capture, `YYYY-MM-DD HH:MM`. The raw ISO string read as
+ *  "from 2026-10-11T19:26:00.665Z" in the restore banner (2026-10-11): UTC and milliseconds the
+ *  operator never thinks in. The draft was captured in this browser, so local time is the honest one. */
+function formatSavedAtLocal(iso) {
+    return formatTimestamp({ iso }, { timeZone: "local" });
+}
 /** Compare timestamps explicitly; restoration only changes the working copy, never the server. */
-export function standingDraftRecoveryMessage({ draft, t, serverUpdatedAt }, _options = {}) {
+export function standingDraftRecoveryMessage({ draft, t, serverUpdatedAt }, { formatSavedAt = formatSavedAtLocal } = {}) {
     const captured = Date.parse(draft.savedAt);
     const server = Date.parse(serverUpdatedAt ?? draft.serverUpdatedAt ?? "");
     const comparison = server > captured ? "Server content is newer."
         : server < captured ? "Local changes are newer."
             : server === captured ? "Both copies have the same timestamp." : "";
-    return `${t("Restore unsaved changes from")} ${draft.savedAt}${comparison ? ` · ${t(comparison)}` : ""}`;
+    return `${t("Restore unsaved changes from")} ${formatSavedAt(draft.savedAt)}${comparison ? ` · ${t(comparison)}` : ""}`;
 }
 //# sourceMappingURL=standing-draft-recovery-message.js.map

package/dist/features/settings/dialog/styles/settings-dialog.css

@@ -95,6 +95,8 @@
 }
 
 .jini-input {
+  min-height: var(--jini-control-h, 37px);
+  box-sizing: border-box;
   width: 100%;
   min-width: 0;
   padding: 8px 10px;
@@ -107,6 +109,17 @@
   transition: border-color 120ms var(--jini-ease-out), box-shadow 120ms var(--jini-ease-out);
 }
 
+/* Native selects share one affordance across execution settings and host forms. */
+select.jini-input {
+  appearance: none;
+  padding-right: 2rem;
+  cursor: pointer;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.7rem center;
+  background-size: 10px 6px;
+}
+
 .jini-input:focus {
   outline: none;
   border-color: var(--jini-accent);
@@ -127,6 +140,8 @@
 .jini-settings-section .jini-btn,
 .jini-settings-section .jini-button,
 .jini-settings-section a.jini-button {
+  min-height: var(--jini-control-h, 37px);
+  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -394,6 +409,21 @@
 
    `align-items: start` so a field with a two-line hint (an invalid base URL) does not stretch its
    neighbour's input to match. */
+/* `ByokProviderForm`'s `collapseAdvanced`: Base URL + Max tokens behind one disclosure after Model. */
+.jini-byok-advanced > summary {
+  cursor: pointer;
+  width: max-content;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--jini-text-muted);
+}
+.jini-byok-advanced > summary:hover { color: var(--jini-text-strong); }
+.jini-byok-advanced[open] > summary { margin-bottom: 12px; }
+
+/* `ByokProviderForm`'s `apiKeyActions`: the host's button row directly under the key input (Show
+   stays on the input's line). Wraps on a narrow card. */
+.jini-byok-key-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; }
+
 .jini-byok-field-row {
   display: flex;
   flex-wrap: wrap;
@@ -479,13 +509,25 @@
 
 /* Agent cards. The origin drew a responsive grid of selectable vendor cards;
    `auto-fill` keeps it one column inside a narrow settings panel and two or
-   more when the host gives the dialog room. */
+   more when the host gives the dialog room.
+
+   Settings grow inside the selected card's own column; top alignment keeps
+   its neighbour at its normal height. */
 .jini-agent-grid {
   display: grid;
+  align-items: start;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 10px;
 }
 
+/* "Show N not installed" — the uninstalled tail of the grid sits behind this toggle. */
+.jini-local-cli-more {
+  display: block;
+  width: auto;
+  align-self: flex-start;
+  margin: 10px 0;
+}
+
 .jini-agent-card {
   display: flex;
   flex-direction: column;
@@ -500,6 +542,7 @@
 }
 
 .jini-agent-card.is-selected {
+  grid-column: span 1;
   border-color: var(--jini-accent);
   box-shadow: 0 0 0 1px var(--jini-accent);
 }
@@ -532,30 +575,26 @@
 
 /* The whole card is the click target, not just the text at the top of it.
  *
- * `.jini-agent-grid` is a grid, so selecting one CLI stretches every card in
- * that row to match the expanded one — while `-select` keeps its natural
- * content height. The space the row-mate's expansion added was therefore
- * inert: clicking the lower two-thirds of a stretched-but-unselected card did
- * nothing, which reads as a broken card rather than as "aim higher".
+ * The select button owns the whole header, including its padding, when no
+ * other controls need that space.
  *
  * `:last-child` is load-bearing. A card renders its diagnostics, model config,
  * test result and path-repair actions as SIBLINGS after `-main`, and those
  * blocks contain their own buttons; growing `-main` unconditionally would push
  * them to the card's bottom edge, and a full-card overlay would swallow their
  * clicks outright. `-main:last-child` is true exactly when nothing rendered
- * after it — the unselected, no-diagnostics case this bug is about.
+ * after it — the no-diagnostics case this bug is about.
  *
- * `:not(.is-selected)` guards the padding move specifically: a SELECTED card
- * can render its Test button inside `-main`, and zeroing the padding there
- * would shove that button flush against the card edge. */
-.jini-agent-card:not(.is-selected) .jini-agent-card-main:last-child {
+ * Test stays in the selected card's header; settings follow `-main`, keeping
+ * both their controls and the header's Test button independently clickable. */
+.jini-agent-card .jini-agent-card-main:last-child {
   flex: 1 1 auto;
   /* Handed to the button below — left here it would ring the card in 12px of
      unclickable margin, a smaller version of the same bug. */
   padding: 0;
 }
 
-.jini-agent-card:not(.is-selected) .jini-agent-card-main:last-child > .jini-agent-card-select {
+.jini-agent-card .jini-agent-card-main:last-child > .jini-agent-card-select {
   /* The row is `align-items: flex-start` so the Test button never stretches;
      this opts the select button alone into filling the card. Its own
      `align-items: flex-start` keeps icon and text at the top — only the hit
@@ -605,15 +644,15 @@
   color: var(--jini-text);
 }
 
-.jini-agent-card-name-divider {
-  color: var(--jini-text-disabled);
-}
-
 .jini-agent-card-tagline {
   font-size: 12px;
   color: var(--jini-text-muted);
 }
 
+.jini-agent-card.is-selected .jini-agent-card-tagline:not(:empty)::before {
+  content: '·\00a0';
+}
+
 .jini-agent-card-badges {
   display: flex;
   flex-wrap: wrap;
@@ -657,14 +696,98 @@
   opacity: 0.7;
 }
 
-.jini-agent-card-config {
+/* Selection reads as the accent ring plus this check, never as a bigger card. */
+.jini-agent-card-check {
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  margin-left: auto;
+  border-radius: 50%;
+  background: var(--jini-accent);
+  color: var(--jini-accent-ink);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+/* Settings stay inside the selected card, with each label above its control
+   and the model's provenance sentence visible below the picker. */
+.jini-agent-settings {
   display: flex;
   flex-direction: column;
-  gap: 4px;
-  padding: 0 12px 12px;
+  gap: 8px;
+  padding: 10px 12px;
   border-top: 1px solid var(--jini-border);
-  margin-top: 2px;
-  padding-top: 10px;
+}
+
+.jini-agent-settings-row,
+.jini-agent-settings-tail {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px 16px;
+}
+
+.jini-agent-settings-tail {
+  gap: 8px 10px;
+}
+
+/* Wide enough for "Testing…", so starting a test never reflows its controls. */
+.jini-agent-settings-tail > .jini-agent-card-test {
+  min-width: 5.5rem;
+}
+
+.jini-agent-settings-field {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  min-width: 0;
+}
+
+.jini-agent-settings-label {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.jini-agent-settings-field > .jini-field-label {
+  white-space: nowrap;
+}
+
+.jini-agent-settings .jini-searchable-select,
+.jini-agent-settings select.jini-input,
+.jini-agent-settings .jini-agent-settings-custom {
+  width: 100%;
+  min-width: 0;
+  max-width: none;
+}
+
+.jini-agent-settings-source {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.jini-agent-settings-source > .jini-agent-model-source {
+  margin-left: 0;
+  white-space: nowrap;
+}
+
+.jini-agent-settings .jini-agent-card-test-result {
+  padding: 0;
+}
+
+.jini-agent-settings .jini-agent-card-path-repair {
+  margin: 0;
+}
+
+.jini-agent-settings .jini-agent-cli-env {
+  margin: 0;
+  padding-top: 8px;
 }
 
 /* The source badge is load-bearing, not decoration: a built-in list can be
@@ -895,7 +1018,21 @@
   width: 100%;
 }
 
+/* Hosts may pass the input class to the wrapper; only the trigger paints the control. */
+.jini-select.jini-input {
+  padding: 0;
+  border: 0;
+  background: none;
+  box-shadow: none;
+  min-height: 0;
+}
+.jini-select.is-missing > .jini-select-trigger {
+  border-color: color-mix(in srgb, var(--jini-danger) 55%, var(--jini-border));
+}
+
 .jini-select-trigger {
+  min-height: var(--jini-control-h, 37px);
+  box-sizing: border-box;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -912,6 +1049,17 @@
   cursor: pointer;
 }
 
+.jini-select-trigger:focus-visible {
+  outline: none;
+  border-color: var(--jini-accent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--jini-accent) 18%, transparent);
+}
+
+@media (max-width: 640px) {
+  .jini-input,
+  .jini-select-trigger { font-size: 16px; min-height: 40px; }
+}
+
 .jini-select-trigger:hover:not(:disabled) {
   border-color: var(--jini-border-strong);
 }