@jini-ai/ui 0.5.4 → 0.5.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @jini-ai/ui
 
+## 0.5.5 — 2026-10-16
+
+- `admin-widgets` Select paints group headings and per-option badges (dc770a41) and is pane-aware; image fields name the file (bc1dbf0d).
+- The preview modal's default exit-fullscreen icon draws inward arrows (ef161bf1).
+- `execution`: the Claude Code model picker lists each model once, by name (4b3b894b, 0ae46113).
+
 ## 0.5.4 — 2026-10-15
 
 - `TabBar` re-scrolls the active tab into view once web fonts are ready (06931dfe): fonts that widen tabs after the first measurement no longer leave a deep-linked tab cut off at the strip edge.

package/dist/features/admin-widgets/components/Select/Select.hooks.d.ts

@@ -2,7 +2,20 @@ export { focusableInDomOrder, resolveTabTarget } from '../../../../react/compone
 export interface SelectOption {
     value: string;
     label: string;
+    /** Heading shown above the first option of each run with this value (e.g. "Pages", "Posts").
+     *  Callers pass options already ordered by group; search narrows rows, headings follow. */
+    group?: string | undefined;
+    /** Short state shown as a muted pill after the label (e.g. "draft"); omit for the normal state. */
+    badge?: string | undefined;
+    /** Muted secondary text after the label, e.g. a slug telling two same-titled rows apart.
+     *  Search matches it too. */
+    detail?: string | undefined;
 }
+/** The group heading to paint before `options[index]`, or null when it continues the previous run. */
+export declare function groupHeadingAt({ options, index }: {
+    options: readonly SelectOption[];
+    index: number;
+}): string | null;
 export interface PanelPosition {
     top?: number | undefined;
     bottom?: number | undefined;
@@ -18,6 +31,14 @@ export interface PanelPosition {
 export declare function computePosition({ trigger }: {
     trigger: HTMLElement;
 }): PanelPosition;
+/** Top edge (viewport px, never negative) of the nearest scrollable PANE around the trigger, or 0.
+ * A pane is an `overflow-y: auto|scroll` ancestor at least half the viewport tall — whether or not
+ * it currently overflows (a short form still sits under the app bar), while a small scrolling
+ * wrapper such as a table or chip strip does not count and leaves placement as it was.
+ * @complexity O(depth) computed-style reads per measurement. */
+export declare function scrollPaneTop({ trigger }: {
+    trigger: HTMLElement;
+}, _optional?: Record<string, never>): number;
 export declare function buildOptionId({ listboxId, index }: {
     listboxId: string;
     index: number;

package/dist/features/admin-widgets/components/Select/Select.hooks.js

@@ -13,6 +13,11 @@ const SEARCH_VISIBILITY_THRESHOLD = 8;
 // 280px is only a placement heuristic; the panel actual maxHeight and scroll limit use
 // the remaining viewport space so a low trigger does not open a mostly off-screen panel.
 const ESTIMATED_PANEL_HEIGHT = 280;
+/** The group heading to paint before `options[index]`, or null when it continues the previous run. */
+export function groupHeadingAt({ options, index }) {
+    const group = options[index]?.group;
+    return group && group !== options[index - 1]?.group ? group : null;
+}
 /**
  * Use fixed viewport-relative coordinates to escape scrolling/overflow-hidden ancestors
  * without coupling to their layout. maxHeight uses actual remaining space, not the estimate,
@@ -23,13 +28,30 @@ export function computePosition({ trigger }) {
     const gap = 4;
     const viewportHeight = window.innerHeight;
     const spaceBelow = viewportHeight - rect.bottom;
-    const spaceAbove = rect.top;
+    // Space above ends at the trigger's scrolling pane, not the viewport: an app bar above that pane
+    // is not room for the panel (owner, 2026-10-15: on a short phone the list flipped up and covered
+    // the top bar). With nothing scrolling but the page this is 0 and placement is unchanged.
+    const spaceAbove = rect.top - scrollPaneTop({ trigger });
     const openUpward = spaceBelow < ESTIMATED_PANEL_HEIGHT && spaceAbove > spaceBelow;
     if (openUpward) {
         return { bottom: viewportHeight - rect.top + gap, left: rect.left, width: rect.width, maxHeight: Math.max(120, spaceAbove - gap * 2) };
     }
     return { top: rect.bottom + gap, left: rect.left, width: rect.width, maxHeight: Math.max(120, spaceBelow - gap * 2) };
 }
+/** Top edge (viewport px, never negative) of the nearest scrollable PANE around the trigger, or 0.
+ * A pane is an `overflow-y: auto|scroll` ancestor at least half the viewport tall — whether or not
+ * it currently overflows (a short form still sits under the app bar), while a small scrolling
+ * wrapper such as a table or chip strip does not count and leaves placement as it was.
+ * @complexity O(depth) computed-style reads per measurement. */
+export function scrollPaneTop({ trigger }, _optional = {}) {
+    for (let el = trigger.parentElement; el && el !== document.body && el !== document.documentElement; el = el.parentElement) {
+        const overflowY = getComputedStyle(el).overflowY;
+        if ((overflowY === "auto" || overflowY === "scroll") && el.clientHeight * 2 >= window.innerHeight) {
+            return Math.max(0, el.getBoundingClientRect().top);
+        }
+    }
+    return 0;
+}
 export function buildOptionId({ listboxId, index }) {
     return `${listboxId}-option-${index}`;
 }
@@ -118,7 +140,7 @@ export function useSelectDropdown({ value, onChange, options, }, { disabled } =
         if (!showSearch || !query.trim())
             return options;
         const q = query.trim().toLowerCase();
-        return options.filter((o) => o.label.toLowerCase().includes(q));
+        return options.filter((o) => o.label.toLowerCase().includes(q) || Boolean(o.detail?.toLowerCase().includes(q)));
     }, [options, query, showSearch]);
     const selectedOption = options.find((o) => o.value === value) ?? null;
     function openPanel() {

package/dist/features/admin-widgets/components/Select/Select.js

@@ -3,12 +3,13 @@ import { resolveSelectPortalContainer } from '../../../../react/components/selec
 import { createPortal } from "react-dom";
 import { agentHandle } from "@jini-ai/agentic";
 import { buildAgentListHandles } from "@jini-ai/agentic";
-import { useSelectDropdown } from "./Select.hooks.js";
+import { Fragment } from "react";
+import { useSelectDropdown, groupHeadingAt } from "./Select.hooks.js";
 function SelectOptionRow({ option, index, isSelected, isHighlighted, optionId, setOptionRef, onHighlight, onSelect, agentHandle: optionHandle, }) {
-    return (_jsxs("li", { ref: (el) => setOptionRef(index, el), id: optionId, role: "option", "aria-selected": isSelected, className: `select-option${isSelected ? " is-selected" : ""}${isHighlighted ? " is-highlighted" : ""}`, onMouseEnter: () => onHighlight(index), onClick: () => onSelect(option), ...(optionHandle ? agentHandle({ handle: optionHandle }, { role: "button", label: option.label }) : {}), children: [_jsx("span", { className: "select-option-label", children: option.label }), isSelected ? (_jsx("svg", { className: "select-option-check", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3.5 8.5 6.5 11.5 12.5 4.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })) : null] }));
+    return (_jsxs("li", { ref: (el) => setOptionRef(index, el), id: optionId, role: "option", "aria-selected": isSelected, className: `select-option${isSelected ? " is-selected" : ""}${isHighlighted ? " is-highlighted" : ""}`, onMouseEnter: () => onHighlight(index), onClick: () => onSelect(option), ...(optionHandle ? agentHandle({ handle: optionHandle }, { role: "button", label: option.label }) : {}), children: [_jsx("span", { className: "select-option-label", children: option.label }), option.detail ? _jsx("span", { className: "select-option-detail", children: option.detail }) : null, option.badge ? _jsx("span", { className: "select-option-badge", children: option.badge }) : null, isSelected ? (_jsx("svg", { className: "select-option-check", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M3.5 8.5 6.5 11.5 12.5 4.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })) : null] }));
 }
 function SelectPanel({ panelRef, position, showSearch, searchInputRef, query, setQuery, filtered, value, highlightedIndex, listboxId, optionId, setOptionRef, onHighlight, onSelect, onKeyDown, searchHandle, optionHandles, t, }) {
-    return (_jsxs("div", { ref: panelRef, className: "select-panel", style: { left: position.left, width: position.width, top: position.top, bottom: position.bottom, maxHeight: position.maxHeight }, tabIndex: -1, onKeyDown: onKeyDown, children: [showSearch ? (_jsx("input", { ref: searchInputRef, type: "text", className: "select-search", "aria-label": t("Search options"), placeholder: t("Search…"), value: query, onChange: (e) => setQuery(e.target.value), ...(searchHandle ? agentHandle({ handle: searchHandle }, { role: "field", label: "Search the option list" }) : {}) })) : null, _jsx("ul", { className: "select-list", role: "listbox", id: listboxId, children: filtered.length === 0 ? (_jsx("li", { className: "select-empty", role: "presentation", children: t("No matches") })) : (filtered.map((option, index) => (_jsx(SelectOptionRow, { option: option, index: index, isSelected: option.value === value, isHighlighted: index === highlightedIndex, optionId: optionId(index), setOptionRef: setOptionRef, onHighlight: onHighlight, onSelect: onSelect, agentHandle: optionHandles?.[index] }, option.value)))) })] }));
+    return (_jsxs("div", { ref: panelRef, className: "select-panel", style: { left: position.left, width: position.width, top: position.top, bottom: position.bottom, maxHeight: position.maxHeight }, tabIndex: -1, onKeyDown: onKeyDown, children: [showSearch ? (_jsx("input", { ref: searchInputRef, type: "text", className: "select-search", "aria-label": t("Search options"), placeholder: t("Search…"), value: query, onChange: (e) => setQuery(e.target.value), ...(searchHandle ? agentHandle({ handle: searchHandle }, { role: "field", label: "Search the option list" }) : {}) })) : null, _jsx("ul", { className: "select-list", role: "listbox", id: listboxId, children: filtered.length === 0 ? (_jsx("li", { className: "select-empty", role: "presentation", children: t("No matches") })) : (filtered.map((option, index) => (_jsxs(Fragment, { children: [groupHeadingAt({ options: filtered, index }) ? (_jsx("li", { className: "select-group-label", role: "presentation", children: option.group })) : null, _jsx(SelectOptionRow, { option: option, index: index, isSelected: option.value === value, isHighlighted: index === highlightedIndex, optionId: optionId(index), setOptionRef: setOptionRef, onHighlight: onHighlight, onSelect: onSelect, agentHandle: optionHandles?.[index] })] }, option.value)))) })] }));
 }
 export function resolveSelectTriggerLabel({ selectedOption, placeholder }, { t = (key) => key } = {}) {
     if (selectedOption)

package/dist/features/execution/react/hooks/useReasoningControl.d.ts

@@ -54,7 +54,7 @@ export interface UseReasoningControlResult {
     knownModelIds: readonly string[];
     /** Whether the custom model input is currently active. */
     customActive: boolean;
-    /** Options for the model select: base models for suffix agents, or raw models list. */
+    /** Options for the model select: base models for suffix agents, or deduped catalog rows. */
     modelChoices: readonly AgentModelOption[];
     /** Selected value for the model select element. */
     selectValue: string;

package/dist/features/execution/react/hooks/useReasoningControl.js

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from 'react';
 import { CUSTOM_MODEL_SENTINEL } from '../../constants.js';
-import { modelIdForReasoningLevel, reasoningModelGroupFor, reasoningModelGroups, selectedAgentModel, selectedAgentReasoning, shouldShowCustomModelInput, splitReasoningModelId, } from '../../rules.js';
+import { modelIdForReasoningLevel, pickerModelOptions, reasoningModelGroupFor, reasoningModelGroups, selectedAgentModel, selectedAgentReasoning, shouldShowCustomModelInput, splitReasoningModelId, } from '../../rules.js';
 export function useReasoningControl(optionsOrAgent, maybeConfig, maybeExplicitCustomMode) {
     const { agent, config, explicitCustomMode = false, onReasoningChange } = 'agent' in optionsOrAgent && 'config' in optionsOrAgent
         ? optionsOrAgent
@@ -91,12 +91,17 @@ export function useReasoningControl(optionsOrAgent, maybeConfig, maybeExplicitCu
     // id. Everything else about the field — search, labels, provenance badge — is unchanged.
     const modelChoices = modelGroups
         ? modelGroups.map((group) => ({ id: group.baseId, label: group.label }))
-        : models;
+        : pickerModelOptions({ models });
+    // Persisted aliases stay known in the full catalog above, but the picker selects their concrete
+    // row. This is display-only: the saved model and dispatch resolution keep the operator's pick.
+    const selectedModel = models.find((model) => model.id === resolvedModel);
     const selectValue = customActive
         ? CUSTOM_MODEL_SENTINEL
         : modelGroups
             ? (activeGroup?.baseId ?? '')
-            : resolvedModel;
+            : selectedModel?.identityKind === 'alias'
+                ? (selectedModel.resolvedId || resolvedModel)
+                : resolvedModel;
     // While the custom box is open, the text field must show the operator's raw
     // typed text (which may not resolve to anything yet) rather than the
     // resolved-with-fallback value — otherwise every keystroke would show a

package/dist/features/execution/rules.d.ts

@@ -243,6 +243,17 @@ export declare function agentExecutableRepairState(result: {
     usedExecutableSource?: AgentExecutableSource | undefined;
     detectedExecutablePath?: string | undefined;
 }): AgentExecutableRepair | null;
+/**
+ * Builds picker rows from catalog evidence without changing the source catalog. Resolved aliases
+ * share a concrete row; unresolved aliases and routing modes remain selectable as reported.
+ * Keeps the first position and prefers a human label over a raw ID, including the CLI default's
+ * raw-label row. No names or context variants are inferred from model IDs.
+ * @returns Distinct picker rows in catalog order. No side effects or errors.
+ * @complexity O(n) time and space in catalog rows, using insertion-ordered Map keys.
+ */
+export declare function pickerModelOptions({ models }: {
+    models: readonly AgentModelOption[];
+}, _optional?: Record<string, never>): AgentModelOption[];
 /**
  * Filters a searchable model list down to what matches the operator's typed
  * query. The currently-selected value's own option is always kept even when

package/dist/features/execution/rules.js

@@ -476,6 +476,30 @@ export function agentExecutableRepairState(result) {
         return null;
     return { detectedPath, canUseDetected: true };
 }
+/**
+ * Builds picker rows from catalog evidence without changing the source catalog. Resolved aliases
+ * share a concrete row; unresolved aliases and routing modes remain selectable as reported.
+ * Keeps the first position and prefers a human label over a raw ID, including the CLI default's
+ * raw-label row. No names or context variants are inferred from model IDs.
+ * @returns Distinct picker rows in catalog order. No side effects or errors.
+ * @complexity O(n) time and space in catalog rows, using insertion-ordered Map keys.
+ */
+export function pickerModelOptions({ models }, _optional = {}) {
+    const choices = new Map();
+    for (const model of models) {
+        const resolvedId = model.identityKind === 'alias' ? model.resolvedId : undefined;
+        const id = resolvedId || model.id;
+        const label = model.label === model.id ? id : model.label;
+        const existing = choices.get(id);
+        if (!existing) {
+            choices.set(id, resolvedId ? { ...model, id, label, identityKind: 'concrete' } : model);
+        }
+        else if (existing.label === id && label !== id) {
+            choices.set(id, { ...existing, label });
+        }
+    }
+    return [...choices.values()];
+}
 /** Case-insensitive substring match against a model's id or label, mirroring
  *  the origin's search box. Matches on both fields (not just the visible
  *  label) so an operator can search by the raw model id too. */

package/dist/features/execution/types.d.ts

@@ -138,6 +138,8 @@ export interface ExecutionConfig {
 export interface AgentModelOption {
     id: string;
     label: string;
+    identityKind?: 'concrete' | 'alias' | 'routing-mode';
+    resolvedId?: string;
     /**
      * The reasoning-effort levels THIS model supports, when the runtime's own catalog reports them
      * per model rather than uniformly across the agent. Mirrors `@jini-ai/agent-runtime`'s

package/dist/features/interactive-ui/providers/native/data-table.manifest.d.ts

@@ -19,11 +19,11 @@ export declare const nativeDataTablePropsSchema: z.ZodObject<{
         key: z.ZodString;
         label: z.ZodString;
     }, "strict", z.ZodTypeAny, {
-        key: string;
         label: string;
-    }, {
         key: string;
+    }, {
         label: string;
+        key: string;
     }>, "many">;
     rows: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
 }, "passthrough", z.ZodTypeAny, z.objectOutputType<{
@@ -31,11 +31,11 @@ export declare const nativeDataTablePropsSchema: z.ZodObject<{
         key: z.ZodString;
         label: z.ZodString;
     }, "strict", z.ZodTypeAny, {
-        key: string;
         label: string;
-    }, {
         key: string;
+    }, {
         label: string;
+        key: string;
     }>, "many">;
     rows: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
 }, z.ZodTypeAny, "passthrough">, z.objectInputType<{
@@ -43,11 +43,11 @@ export declare const nativeDataTablePropsSchema: z.ZodObject<{
         key: z.ZodString;
         label: z.ZodString;
     }, "strict", z.ZodTypeAny, {
-        key: string;
         label: string;
-    }, {
         key: string;
+    }, {
         label: string;
+        key: string;
     }>, "many">;
     rows: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
 }, z.ZodTypeAny, "passthrough">>;

package/dist/features/interactive-ui/providers/shadcn/data-table.manifest.d.ts

@@ -12,11 +12,11 @@ export declare const shadcnDataTablePropsSchema: z.ZodObject<{
         key: z.ZodString;
         label: z.ZodString;
     }, "strict", z.ZodTypeAny, {
-        key: string;
         label: string;
-    }, {
         key: string;
+    }, {
         label: string;
+        key: string;
     }>, "many">;
     rows: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
     sortable: z.ZodOptional<z.ZodBoolean>;
@@ -26,11 +26,11 @@ export declare const shadcnDataTablePropsSchema: z.ZodObject<{
         key: z.ZodString;
         label: z.ZodString;
     }, "strict", z.ZodTypeAny, {
-        key: string;
         label: string;
-    }, {
         key: string;
+    }, {
         label: string;
+        key: string;
     }>, "many">;
     rows: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
     sortable: z.ZodOptional<z.ZodBoolean>;
@@ -40,11 +40,11 @@ export declare const shadcnDataTablePropsSchema: z.ZodObject<{
         key: z.ZodString;
         label: z.ZodString;
     }, "strict", z.ZodTypeAny, {
-        key: string;
         label: string;
-    }, {
         key: string;
+    }, {
         label: string;
+        key: string;
     }>, "many">;
     rows: z.ZodArray<z.ZodRecord<z.ZodString, z.ZodUnknown>, "many">;
     sortable: z.ZodOptional<z.ZodBoolean>;

package/dist/renderers/preview-modal-shell/react/components/icons.js

@@ -6,6 +6,9 @@ export const DEFAULT_PREVIEW_MODAL_ICONS = {
     close: () => (_jsxs(Svg, { children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "M6 6l12 12" })] })),
     'chevron-down': () => (_jsx(Svg, { children: _jsx("path", { d: "m6 9 6 6 6-6" }) })),
     fullscreen: () => (_jsx(Svg, { width: 15, height: 15, children: _jsx("path", { d: "M3 9V3h6M3 3l6 6M21 15v6h-6M21 21l-6-6" }) })),
-    'fullscreen-exit': () => (_jsx(Svg, { width: 15, height: 15, children: _jsx("path", { d: "M9 3v6H3M3 9l6-6M15 21v-6h6M21 15l-6 6" }) })),
+    // The same two diagonals as `fullscreen`, arrowheads moved to the inner ends so they point in.
+    // The old path joined each corner's two ends ("M3 9l6-6"), drawing a tiny closed triangle that
+    // read as a speck once expanded (a host's screenshot, 2026-10-15).
+    'fullscreen-exit': () => (_jsx(Svg, { width: 15, height: 15, children: _jsx("path", { d: "M9 3v6H3M3 3l6 6M15 21v-6h6M21 21l-6-6" }) })),
 };
 //# sourceMappingURL=icons.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/ui",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "description": "Generic, product-neutral React UI primitives and feature domains. Framework-free types, decision rules, catalogs, and host port contracts live behind ./core (no React, no DOM). The Excalidraw and Lexical editors live behind ./sketch-editor and ./lexical-rich-text-editor; the GrapesJS-backed inline HTML editor lives behind ./html-editor.",
   "license": "Apache-2.0",
   "repository": {
@@ -244,12 +244,12 @@
     "tailwind-merge": "^2.6.0",
     "zod": "^3.25.76",
     "@jini-ai/integrations": "^0.4.2",
-    "@jini-ai/platform": "^0.5.8",
-    "@jini-ai/core": "^0.4.6",
-    "@jini-ai/agentic": "^0.4.4"
+    "@jini-ai/core": "^0.4.7",
+    "@jini-ai/agentic": "^0.4.4",
+    "@jini-ai/platform": "^0.5.9"
   },
   "dependencies": {
-    "@jini-ai/core": "^0.4.6"
+    "@jini-ai/core": "^0.4.7"
   },
   "peerDependencies": {
     "@jini-ai/integrations": "^0.4.2",