akanjs 3.0.0-beta.7 → 3.0.0-beta.8

package/ui/Field/Relation.tsx

@@ -1,13 +1,28 @@
 "use client";
 import type { DataList } from "akanjs/base";
 import { cn } from "akanjs/client";
-import { capitalize, lowerlize } from "akanjs/common";
 import type { SliceMeta } from "akanjs/fetch";
-import { st, useFieldTool, useRelationFieldTool } from "akanjs/store";
+import { useFieldTool, useRelationFieldTool } from "akanjs/store";
 import type { ReactNode } from "react";
 import { agentAttrs } from "../agentAttrs";
 import { Select } from "../Select";
 import { Label } from "./Label";
+import { useRelationOptions } from "./useRelationOptions";
+
+interface UnresolvedProps {
+  id: string;
+}
+/** A row nothing could resolve — removed, unreadable, or still being read. The id beats an empty control. */
+const Unresolved = ({ id }: UnresolvedProps) => <span className="font-mono text-foreground/45">{id}</span>;
+
+const renderRow = <Light extends { id: string }>(
+  models: DataList<Light>,
+  id: string,
+  render: (model: Light) => ReactNode,
+) => {
+  const model = models.get(id);
+  return model ? render(model) : <Unresolved id={id} />;
+};
 
 export interface ParentProps<Light> {
   label?: string;
@@ -26,12 +41,6 @@ export interface ParentProps<Light> {
   renderOption: (model: Light) => ReactNode;
   renderSelected?: (value: Light) => ReactNode;
 }
-/** The one line an option renders as, so an agent can match an id against what it reads on screen. */
-const optionLabel = <Light extends { id: string }>(model: Light, render: (model: Light) => ReactNode) => {
-  const rendered = render(model);
-  return typeof rendered === "string" ? rendered : model.id;
-};
-
 export const Parent = <Light extends { id: string }>({
   label,
   desc,
@@ -49,32 +58,15 @@ export const Parent = <Light extends { id: string }>({
   renderOption,
   renderSelected = renderOption,
 }: ParentProps<Light>) => {
-  const { refName, sliceName } = slice;
-  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
-  const storeUse = st.use as { [key: string]: () => unknown };
-  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
-  const storeGet = st.get as unknown as <V>() => { [key: string]: V };
-
-  const names = {
-    model: modelName,
-    modelList: `${modelName}List`,
-    modelListLoading: `${modelName}ListLoading`,
-    refreshModel: `refresh${ModelName}`,
-  };
-
-  const namesOfSlice = {
-    modelList: sliceName.replace(names.model, names.modelList),
-    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
-    refreshModel: sliceName.replace(names.model, names.refreshModel),
-  };
-
-  const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
-  useRelationFieldTool(onChange, {
-    read: () => storeGet<DataList<Light>>()[namesOfSlice.modelList],
-    load: () => storeDo[namesOfSlice.refreshModel]({ invalidate: true, queryArgs: initArgs }),
-    label: (model) => optionLabel(model, renderOption),
-    disabled,
+  const { models, options, optionLabel, listLoading, load, read } = useRelationOptions<Light>({
+    slice,
+    ids: value ? [value.id] : [],
+    pinned: [value],
+    initArgs,
+    sortOption,
+    renderOption,
   });
+  useRelationFieldTool(onChange, { read, load, label: optionLabel, disabled });
 
   return (
     <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
@@ -84,29 +76,16 @@ export const Parent = <Light extends { id: string }>({
         selectClassName={selectClassName}
         value={value?.id ?? null}
         searchable
-        options={modelList.map((model) => {
-          const render = renderOption(model);
-          return { label: typeof render === "string" ? render : model.id, value: model.id };
-        })}
-        renderOption={(modelId) => {
-          if (!modelId) return null;
-          const model = modelList.get(modelId);
-          if (!model) return null;
-          return renderOption(model);
-        }}
-        renderSelected={(modelId) => {
-          if (!modelId) return null;
-          const model = modelList.get(modelId);
-          if (!model) return null;
-          return renderSelected(model);
-        }}
+        loading={listLoading}
+        options={options}
+        renderOption={(modelId) => (modelId ? renderRow(models, modelId, renderOption) : null)}
+        renderSelected={(modelId) => (modelId ? renderRow(models, modelId, renderSelected) : null)}
         onChange={(modelId) => {
-          if (modelId) onChange(modelList.get(modelId) ?? null);
-          else onChange(null);
+          onChange(modelId ? (models.get(modelId) ?? null) : null);
         }}
         onOpen={() => {
           if (disabled) return;
-          void storeDo[namesOfSlice.refreshModel]({ invalidate: true, queryArgs: initArgs });
+          void load();
         }}
         onSearch={onSearch}
       />
@@ -148,22 +127,13 @@ export const ParentId = <Light extends { id: string }>({
   renderOption,
   renderSelected = renderOption,
 }: ParentIdProps<Light>) => {
-  const { refName, sliceName } = slice;
-  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
-  const storeUse = st.use as { [key: string]: () => unknown };
-  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
-  const names = {
-    model: modelName,
-    modelList: `${modelName}List`,
-    modelListLoading: `${modelName}ListLoading`,
-    refreshModel: `refresh${ModelName}`,
-  };
-  const namesOfSlice = {
-    modelList: sliceName.replace(names.model, names.modelList),
-    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
-    refreshModel: sliceName.replace(names.model, names.refreshModel),
-  };
-  const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
+  const { models, options, optionLabel, listLoading, load } = useRelationOptions<Light>({
+    slice,
+    ids: value ? [value] : [],
+    initArgs,
+    sortOption,
+    renderOption,
+  });
   
   useFieldTool(onChange, { disabled });
 
@@ -175,25 +145,16 @@ export const ParentId = <Light extends { id: string }>({
         searchable
         selectClassName={selectClassName}
         value={value}
-        options={modelList.map((model) => model.id)}
-        renderOption={(renderId) => {
-          if (!renderId) return null;
-          const model = modelList.get(renderId);
-          if (!model) return null;
-          return renderOption?.(model) ?? null;
-        }}
-        renderSelected={(renderId) => {
-          if (!renderId) return null;
-          const model = modelList.get(renderId);
-          if (!model) return null;
-          return renderSelected?.(model) ?? null;
-        }}
+        loading={listLoading}
+        options={options}
+        renderOption={(renderId) => (renderId ? renderRow(models, renderId, renderOption ?? optionLabel) : null)}
+        renderSelected={(renderId) => (renderId ? renderRow(models, renderId, renderSelected ?? optionLabel) : null)}
         onOpen={() => {
           if (disabled) return;
-          void storeDo[namesOfSlice.refreshModel]({ invalidate: true, queryArgs: initArgs });
+          void load();
         }}
         onChange={(modelId) => {
-          if (modelId) onChange(modelId, modelList.get(modelId) ?? null);
+          if (modelId) onChange(modelId, models.get(modelId) ?? null);
           else onChange(null, null);
         }}
         onSearch={onSearch}
@@ -236,29 +197,15 @@ export const Children = <Light extends { id: string }>({
   renderOption,
   renderSelected = renderOption,
 }: ChildrenProps<Light>) => {
-  const { refName, sliceName } = slice;
-  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
-  const storeUse = st.use as { [key: string]: () => unknown };
-  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
-  const storeGet = st.get as unknown as <T>() => { [key: string]: T };
-  const names = {
-    model: modelName,
-    modelList: `${modelName}List`,
-    modelListLoading: `${modelName}ListLoading`,
-    refreshModel: `refresh${ModelName}`,
-  };
-  const namesOfSlice = {
-    modelList: sliceName.replace(names.model, names.modelList),
-    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
-    refreshModel: sliceName.replace(names.model, names.refreshModel),
-  };
-  const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
-  useRelationFieldTool(onChange, {
-    read: () => storeGet<DataList<Light>>()[namesOfSlice.modelList],
-    load: () => storeDo[namesOfSlice.refreshModel]({ invalidate: true, queryArgs: initArgs }),
-    label: (model) => optionLabel(model, renderOption),
-    disabled,
+  const { models, options, optionLabel, listLoading, load, read } = useRelationOptions<Light>({
+    slice,
+    ids: (value ?? []).map((model) => model.id),
+    pinned: value ?? [],
+    initArgs,
+    sortOption,
+    renderOption,
   });
+  useRelationFieldTool(onChange, { read, load, label: optionLabel, disabled });
 
   return (
     <div {...agentAttrs(onChange)} className={cn("flex flex-col", className)}>
@@ -269,28 +216,16 @@ export const Children = <Light extends { id: string }>({
         selectClassName={selectClassName}
         multiple
         value={(value ?? []).map((model) => model.id)}
-        options={modelList.map((model) => {
-          const label = renderOption(model);
-          return { label: typeof label === "string" ? label : model.id, value: model.id };
-        })}
+        loading={listLoading}
+        options={options}
         onOpen={() => {
           if (disabled) return;
-          void storeDo[namesOfSlice.refreshModel]({ invalidate: true, queryArgs: initArgs });
-        }}
-        renderOption={(modelId: string) => {
-          const model = modelList.get(modelId);
-          if (!model) return null;
-          return renderOption(model);
-        }}
-        renderSelected={(modelId: string) => {
-          const model = modelList.get(modelId);
-          if (!model) return null;
-          return renderSelected(model);
+          void load();
         }}
+        renderOption={(modelId: string) => renderRow(models, modelId, renderOption)}
+        renderSelected={(modelId: string) => renderRow(models, modelId, renderSelected)}
         onChange={(modelIds: string[]) => {
-          onChange(
-            modelIds.map((id) => modelList.get(id)).filter((model) => model !== undefined) as unknown as Light[],
-          );
+          onChange(modelIds.map((id) => models.get(id)).filter((model): model is Light => !!model));
         }}
         onSearch={onSearch}
       />
@@ -328,22 +263,13 @@ export const ChildrenId = <Light extends { id: string }>({
   sortOption,
   renderOption,
 }: ChildrenIdProps<Light>) => {
-  const { refName, sliceName } = slice;
-  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
-  const storeUse = st.use as { [key: string]: () => unknown };
-  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
-  const names = {
-    model: modelName,
-    modelList: `${modelName}List`,
-    modelListLoading: `${modelName}ListLoading`,
-    refreshModel: `refresh${ModelName}`,
-  };
-  const namesOfSlice = {
-    modelList: sliceName.replace(names.model, names.modelList),
-    modelListLoading: sliceName.replace(names.model, names.modelListLoading),
-    refreshModel: sliceName.replace(names.model, names.refreshModel),
-  };
-  const modelList = storeUse[namesOfSlice.modelList]() as DataList<Light>;
+  const { models, options, listLoading, load } = useRelationOptions<Light>({
+    slice,
+    ids: value ?? [],
+    initArgs,
+    sortOption,
+    renderOption,
+  });
   
   useFieldTool(onChange, { disabled });
 
@@ -354,20 +280,14 @@ export const ChildrenId = <Light extends { id: string }>({
         nullable={nullable}
         searchable
         multiple
-        
         value={value ?? []}
-        options={modelList.map((model) => {
-          const label = renderOption(model);
-          return { label: typeof label === "string" ? label : model.id, value: model.id };
-        })}
-        renderOption={(renderId) => {
-          const model = modelList.get(renderId);
-          if (!model) return null;
-          return renderOption(model);
-        }}
+        loading={listLoading}
+        options={options}
+        renderOption={(renderId: string) => renderRow(models, renderId, renderOption)}
+        renderSelected={(renderId: string) => renderRow(models, renderId, renderOption)}
         onOpen={() => {
           if (disabled) return;
-          void storeDo[namesOfSlice.refreshModel]({ invalidate: true, queryArgs: initArgs });
+          void load();
         }}
         onChange={(modelIds) => {
           onChange(modelIds);

package/ui/Field/lightRefCache.ts

@@ -0,0 +1,73 @@
+"use client";
+import { fetch, isClientRuntimeRegistered } from "akanjs/client";
+import { capitalize } from "akanjs/common";
+
+interface LightRow {
+  id: string;
+}
+
+/**
+ * Light rows read one id at a time, for a control holding an id its option list does not carry — a form opened
+ * through `edit<Model>` before the dropdown was ever opened, or a row outside the one `limit`-sized window a
+ * slice list holds.
+ *
+ * Deliberately not the model's store: that store is a singleton, so reading into it would overwrite whatever
+ * listing of the same model is already on the screen — the same reason `Data/RefPicker` keeps its rows local.
+ */
+export class LightRefCache {
+  static #rows = new Map<string, LightRow | null>();
+  static #inflight = new Map<string, Promise<void>>();
+  static #listeners = new Set<(refName: string, id: string) => void>();
+
+  static get<Light extends LightRow>(refName: string, id: string) {
+    return (LightRefCache.#rows.get(LightRefCache.#keyOf(refName, id)) ?? null) as Light | null;
+  }
+  static subscribe(listener: (refName: string, id: string) => void) {
+    LightRefCache.#listeners.add(listener);
+    return () => {
+      LightRefCache.#listeners.delete(listener);
+    };
+  }
+  static load(refName: string, ids: string[]) {
+    for (const id of ids) LightRefCache.#read(refName, id);
+  }
+  static reset() {
+    LightRefCache.#rows.clear();
+    LightRefCache.#inflight.clear();
+  }
+  static #keyOf(refName: string, id: string) {
+    return `${refName}:${id}`;
+  }
+  /**
+   * A row that cannot be read is remembered as `null` rather than retried: `light<Model>` carries the model's own
+   * `get` guards, which can be narrower than the slice the control lists from, and a removed row answers the same
+   * way every time. A runtime that is not registered yet is not an answer, so nothing is remembered for it.
+   */
+  static #read(refName: string, id: string) {
+    const key = LightRefCache.#keyOf(refName, id);
+    if (LightRefCache.#rows.has(key) || LightRefCache.#inflight.has(key)) return;
+    if (!isClientRuntimeRegistered()) return;
+    const read = (fetch as unknown as { [key: string]: unknown })[`light${capitalize(refName)}`];
+    if (typeof read !== "function") {
+      LightRefCache.#write(refName, id, null);
+      return;
+    }
+    LightRefCache.#inflight.set(
+      key,
+      (read as (id: string) => Promise<LightRow | null>)(id)
+        .then((row) => {
+          LightRefCache.#write(refName, id, row?.id ? row : null);
+        })
+        .catch(() => {
+          LightRefCache.#write(refName, id, null);
+        })
+        .finally(() => {
+          LightRefCache.#inflight.delete(key);
+        }),
+    );
+  }
+  static #write(refName: string, id: string, row: LightRow | null) {
+    LightRefCache.#rows.set(LightRefCache.#keyOf(refName, id), row);
+    for (const listener of LightRefCache.#listeners) listener(refName, id);
+  }
+}

package/ui/Field/useRelationOptions.ts

@@ -0,0 +1,106 @@
+"use client";
+import { DataList } from "akanjs/base";
+import { capitalize, lowerlize } from "akanjs/common";
+import { ConstantRegistry, labelOf } from "akanjs/constant";
+import type { SliceMeta } from "akanjs/fetch";
+import { st } from "akanjs/store";
+import { type ReactNode, useEffect, useMemo, useState } from "react";
+import { LightRefCache } from "./lightRefCache";
+
+export interface RelationOptionsSource<Light extends { id: string }> {
+  slice: SliceMeta;
+  /** Ids the control holds right now, whether or not the option list carries them. */
+  ids: string[];
+  /** Rows the control was handed outright, which a `Light`-valued field's own value already is. */
+  pinned?: (Light | null)[];
+  initArgs?: any[];
+  sortOption?: (a: Light, b: Light) => number;
+  renderOption?: (model: Light) => ReactNode;
+}
+
+const merge = <Light extends { id: string }>(
+  list: DataList<Light>,
+  rows: (Light | null | undefined)[],
+  sortOption?: (a: Light, b: Light) => number,
+) => {
+  const merged = new DataList<Light>(list);
+  
+  for (const row of rows) if (row && !merged.get(row.id)) merged.set(row);
+  return sortOption ? merged.sort(sortOption) : merged;
+};
+
+/**
+ * The options a relation control offers, which are never only the slice list: that list arrives when the dropdown
+ * opens and holds one page when it does, so a control rendering a value the list does not carry would render an
+ * empty field over a form that holds the value. What is missing from it is filled from the value the control was
+ * handed, and — for an id-valued control, which holds no row at all — read by id through {@link LightRefCache}.
+ */
+export const useRelationOptions = <Light extends { id: string }>({
+  slice,
+  ids,
+  pinned,
+  initArgs,
+  sortOption,
+  renderOption,
+}: RelationOptionsSource<Light>) => {
+  const { refName, sliceName } = slice;
+  const [modelName, ModelName] = [lowerlize(refName), capitalize(refName)];
+  const names = {
+    modelList: sliceName.replace(modelName, `${modelName}List`),
+    modelListLoading: sliceName.replace(modelName, `${modelName}ListLoading`),
+    refreshModel: sliceName.replace(modelName, `refresh${ModelName}`),
+  };
+  const storeUse = st.use as { [key: string]: () => unknown };
+  const storeDo = st.do as unknown as { [key: string]: (...args: any[]) => Promise<void> };
+  const storeGet = st.get as unknown as <V>() => { [key: string]: V };
+  const sliceList = storeUse[names.modelList]() as DataList<Light>;
+  const listLoading = storeUse[names.modelListLoading]() as boolean;
+  const [resolvedCount, setResolvedCount] = useState(0);
+
+  const held = (pinned ?? []).filter((row): row is Light => !!row);
+  const heldKey = held.map((row) => row.id).join(",");
+  const missing = ids.filter((id) => !!id && !sliceList.get(id) && !held.some((row) => row.id === id));
+  const missingKey = missing.join(",");
+
+  useEffect(() => {
+    if (!missingKey) return;
+    const wanted = new Set(missingKey.split(","));
+    const off = LightRefCache.subscribe((readRefName, id) => {
+      if (readRefName === refName && wanted.has(id)) setResolvedCount((count) => count + 1);
+    });
+    LightRefCache.load(refName, [...wanted]);
+    return off;
+  }, [refName, missingKey]);
+
+  const cnst = useMemo(() => ConstantRegistry.getDatabase(refName, { allowEmpty: true }), [refName]);
+  const models = useMemo(
+    () => merge(sliceList, [...held, ...missing.map((id) => LightRefCache.get<Light>(refName, id))], sortOption),
+    [sliceList, heldKey, missingKey, resolvedCount],
+  );
+  /** The one line an option reads as, so a search matches it and an agent can match an id against the screen. */
+  const optionLabel = (model: Light) => {
+    const rendered = renderOption?.(model);
+    if (typeof rendered === "string" && rendered) return rendered;
+    return labelOf(cnst?.full, model) ?? model.id;
+  };
+  const options = useMemo(() => models.map((model) => ({ label: optionLabel(model), value: model.id })), [models]);
+
+  return {
+    models,
+    options,
+    optionLabel,
+    listLoading,
+    /**
+     * `invalidate: false` so an open reuses a list the page already loaded rather than replacing it: the slice
+     * list is one store key, so refetching it here overwrites whatever listing of the same model is on screen.
+     */
+    load: () => storeDo[names.refreshModel]({ invalidate: false, queryArgs: initArgs }),
+    /** Live rather than the rendered list, because the agent's list tool loads and reads within one call. */
+    read: () =>
+      merge(
+        storeGet<DataList<Light>>()[names.modelList],
+        [...held, ...ids.map((id) => LightRefCache.get<Light>(refName, id))],
+        sortOption,
+      ),
+  };
+};

package/ui/Select.tsx

@@ -21,9 +21,12 @@ import { BsQuestionCircleFill } from "react-icons/bs";
 import { TiDelete } from "react-icons/ti";
 import { agentAttrs } from "./agentAttrs";
 import { Label } from "./Field/Label";
+import { Spin } from "./Loading/Spin";
 import { overlayZ, useOverlayLayerProps } from "./overlayLayer";
 import { useOverlayPosition } from "./overlayPosition";
-import { useUiOverride } from "./UiOverride";
+import { createOverridable, useUiOverride } from "./UiOverride";
+
+const LoadingSpin = createOverridable("LoadingSpin", Spin);
 
 interface LabelOption<T> {
   label: string | boolean | number;
@@ -59,6 +62,8 @@ export interface SelectProps<
   nullable?: boolean;
   /** Disable open and selection behavior. */
   disabled?: boolean;
+  /** The options are still being loaded: shows a spinner in place of the empty placeholder. */
+  loading?: boolean;
   /** Called when the dropdown opens. */
   onOpen?: () => void;
   /** Controlled change callback. Receives next and previous value. */
@@ -87,6 +92,7 @@ const DefaultSelect = <
   options,
   nullable,
   disabled,
+  loading,
   multiple,
   searchable,
   placeholder,
@@ -286,20 +292,20 @@ const DefaultSelect = <
         <span className="flex w-full flex-wrap items-center gap-1">
           {multiple
             ? selectedValues.map((v, index) => {
+
                 const optionValue = labeledOptions.find((option) => option.value === v);
-                if (!optionValue) return null;
                 return (
                   <div
                     key={index}
                     className="flex items-center gap-2 rounded-field bg-primary px-2 py-1 text-primary-foreground text-xs"
                   >
-                    {renderSelected ? renderSelected(optionValue.value) : optionValue.label}
+                    {renderSelected ? renderSelected(v) : (optionValue?.label ?? String(v))}
                     <button
                       type="button"
                       onClick={(e) => {
                         e.stopPropagation();
                         e.preventDefault();
-                        onSelect(optionValue.value);
+                        onSelect(v);
                       }}
                       className="opacity-50 duration-300 hover:opacity-100"
                     >
@@ -314,8 +320,8 @@ const DefaultSelect = <
               {(() => {
                 
                 const optionValue = labeledOptions.find((option) => selected(option.value));
-                if (!optionValue) return null;
-                return renderSelected ? renderSelected(optionValue.value) : optionValue.label;
+                const v = selectedValues[0] as T;
+                return renderSelected ? renderSelected(v) : (optionValue?.label ?? String(v));
               })()}
             </div>
           ) : null}
@@ -431,14 +437,18 @@ const DefaultSelect = <
                   </div>
                 );
               })}
-              {searchOptions.length
-                ? null
-                : (empty ?? (
-                    <div className="flex size-full flex-col items-center justify-center gap-2 p-2 text-center text-5xl text-foreground/50">
-                      <BsQuestionCircleFill />
-                      <div className="text-sm">{l("base.noOptions")}</div>
-                    </div>
-                  ))}
+              {searchOptions.length ? null : loading ? (
+                <div className="flex size-full items-center justify-center p-4">
+                  <LoadingSpin />
+                </div>
+              ) : (
+                (empty ?? (
+                  <div className="flex size-full flex-col items-center justify-center gap-2 p-2 text-center text-5xl text-foreground/50">
+                    <BsQuestionCircleFill />
+                    <div className="text-sm">{l("base.noOptions")}</div>
+                  </div>
+                ))
+              )}
             </div>,
             portal,
           )

package/ui/index.ts

@@ -1,5 +1,6 @@
 
 
+export { type AgentReferenceInput, useAgentReference } from "akanjs/store";
 export {
   AgentProvider,
   type AgentProviderProps,
@@ -11,7 +12,9 @@ export {
   type ContextBlock,
   httpRunner,
   type MessageAttachment,
+  type MessageReference,
   type PublishedTool,
+  Reference,
   type RunnerEvent,
   type RunnerRequest,
   SessionContext,
@@ -41,10 +44,15 @@ export { type CodeProps, DefaultCode, DefaultMarkdown, type MarkdownProps } from
 export { DefaultAgentMenu, type MenuProps as AgentMenuProps, type MenuRow } from "./Agent/Menu";
 export { DefaultQuestion, type QuestionProps } from "./Agent/Question";
 export { DefaultQueued, type QueuedProps } from "./Agent/Queued";
+export {
+  ReferenceChips as AgentReferences,
+  type ReferenceChipsProps as AgentReferencesProps,
+} from "./Agent/Refer";
 export type { PersistOption } from "./Agent/sessionHistory";
 export type { AgentBuiltin, BuiltinOption } from "./Agent/sessionView";
 export { tokenCount } from "./Agent/tokenCount";
 export type { QueuedMessage } from "./Agent/useChatQueue";
+export type { ReferenceCandidate, ReferenceSource } from "./Agent/useReferenceMenu";
 export type { VoiceEngine, VoiceHandlers, VoiceListener, VoiceSpeech } from "./Agent/voice";
 export { agentAttrs } from "./agentAttrs";
 export { animated } from "./animated";