@solidxai/core-ui 0.1.20-beta.0 → 0.1.20-beta.1

package/dist/routes/pages/admin/core/AgentRegistryEditorPage.tsx

@@ -1,6 +1,5 @@
 import React from "react";
-import { createPortal } from "react-dom";
-import { ArrowLeft, ChevronDown, Ellipsis, ExternalLink, Eye, FlaskConical, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
+import { ArrowLeft, Ellipsis, ExternalLink, Eye, FlaskConical, Pencil, Plus, RefreshCw, Trash2 } from "lucide-react";
 import { useDispatch } from "react-redux";
 import { useNavigate, useParams } from "react-router-dom";
 import { createSolidEntityApi } from "../../../../redux/api/solidEntityApi";
@@ -8,14 +7,15 @@ import { useGetSolidSettingsQuery } from "../../../../redux/api/solidSettingsApi
 import { getSettingsMap } from "../../../../helpers/settingsPayload";
 import { showToast } from "../../../../redux/features/toastSlice";
 import { AgentRegistryAuditPanel } from "./AgentRegistryAuditPanel";
+import { AgentPersonaHistory } from "./AgentPersonaHistory";
 import { AgentHubTagsField, agentHubTagsFrom, agentHubTagsPayload, type AgentHubTag } from "./AgentHubTagsField";
 import { AgentResourceCardWidget } from "../../../../components/core/extension/solid-core/agentRegistry/card/AgentResourceCardWidget";
 import { AgentSessionsPanel } from "../../../../components/core/extension/solid-core/agentToolRegistry/AgentToolSessionsPanel";
 import { AgentProcessesPanel } from "../../../../components/core/extension/solid-core/agentToolRegistry/AgentProcessesPanel";
 import type { SolidKanbanCardWidgetProps } from "../../../../types/solid-core";
 import { SolidWorkflowStatusPill } from "../../../../components/core/form/SolidDraftPublishWorkflow";
-import { ALLOWED_MODELS_BY_PROVIDER, type AllowedModelProvider } from "../../../../constants/allowed-ai-models";
-import { SolidButton, SolidCodeEditor, SolidDialog, SolidDialogBody, SolidDropdownMenu, SolidDropdownMenuContent, SolidDropdownMenuItem, SolidDropdownMenuTrigger, SolidIconPicker, SolidInput, SolidTabGroup } from "../../../../components/shad-cn-ui";
+import { getModelsDevModels, useModelsDevCatalog } from "../../../../hooks/useModelsDevModels";
+import { SolidAutocomplete, SolidButton, SolidCodeEditor, SolidDialog, SolidDialogBody, SolidDropdownMenu, SolidDropdownMenuContent, SolidDropdownMenuItem, SolidDropdownMenuTrigger, SolidIconPicker, SolidInput, SolidTabGroup } from "../../../../components/shad-cn-ui";
 import { SolidAgentEmbedded } from "../../../../components/core/solid-agent/SolidAgentEmbedded";
 import { SolidAgentMarkdown } from "../../../../components/core/solid-agent/SolidAgentMarkdown";
 import { AgentEmbeddingPanel } from "../../../../components/core/solid-agent/embed/AgentEmbeddingPanel";
@@ -23,7 +23,7 @@ import "./AgentRegistryEditorPage.css";
 
 type Item = { id: number; name?: string; title?: string; displayName?: string; description?: string; iconName?: string; key?: string; module?: { id?: number; displayName?: string }; [key: string]: any };
 type Link = { id: number; agentSkillRegistry?: Item; agentToolRegistry?: Item; roleMetadata?: Item; secret?: Item; envVarName?: string; alwaysInclude?: boolean; requiresApproval?: boolean };
-type Input = { name: string; description: string; dataType: string };
+type Input = { name: string; description: string; dataType: string; defaultValue?: unknown; optional: boolean };
 type Agent = Item & {
   configVersion?: number;
   systemPrompt?: string; requiredInputs?: string; reasoningModelKey?: string; fastModelKey?: string; status?: string;
@@ -31,110 +31,113 @@ type Agent = Item & {
   agentSkills?: Link[]; agentTools?: Link[]; agentRoles?: Link[]; agentSecrets?: Link[];
   tags?: AgentHubTag[];
 };
-type ProviderModelOption = { provider: AllowedModelProvider; model: string; value: string };
+type ProviderModelOption = { provider: string; providerLabel: string; model: string; value: string; note?: string };
 
-const PROVIDER_LABELS: Record<AllowedModelProvider, string> = {
+const PROVIDER_LABELS: Record<string, string> = {
   anthropic: "Anthropic",
   openai: "OpenAI",
   openrouter: "OpenRouter",
 };
+const BUILT_IN_PROVIDER_TYPES = ["openai", "anthropic"];
 
-function ModelPicker({ value, options, placeholder, onChange }: {
+type AiProviderConfig = { type?: string; apiKey?: unknown; region?: string };
+type AiModelConfig = { providerId?: string; model?: string };
+
+/**
+ * Build picker options from the AI settings: every provider with an API key, its models from
+ * models.dev, plus the models chosen in settings and any already-saved values for this agent.
+ */
+function buildModelOptions(
+  providers: Record<string, AiProviderConfig>,
+  settingsModels: Record<string, AiModelConfig | undefined>,
+  catalog: Parameters<typeof getModelsDevModels>[0],
+  savedValues: string[],
+): ProviderModelOption[] {
+  const enabled = Object.entries(providers)
+    .filter(([, entry]) => typeof entry?.apiKey === "string" && entry.apiKey.trim().length > 0);
+  const options: ProviderModelOption[] = [];
+  const seen = new Set<string>();
+  const add = (provider: string, model: string, note?: string) => {
+    const value = `${provider}:${model}`;
+    if (!model || seen.has(value)) return;
+    seen.add(value);
+    options.push({ provider, providerLabel: PROVIDER_LABELS[provider] ?? provider, model, value, note });
+  };
+  for (const [provider, entry] of enabled) {
+    for (const [role, config] of Object.entries(settingsModels)) {
+      if (config?.providerId === provider && config.model) add(provider, config.model, `${role} model in AI settings`);
+    }
+    for (const value of savedValues) {
+      if (value.startsWith(`${provider}:`)) add(provider, value.slice(provider.length + 1), "currently saved");
+    }
+    const type = entry.type && BUILT_IN_PROVIDER_TYPES.includes(entry.type) ? entry.type : undefined;
+    for (const model of getModelsDevModels(catalog, [provider, type])) add(provider, model.id);
+  }
+  return options;
+}
+
+const OTHER_MODEL = "__other_model__";
+
+function SearchableSelect({ value, options, placeholder, disabled, onChange }: {
   value: string;
-  options: ProviderModelOption[];
+  options: { label: string; value: string }[];
   placeholder: string;
+  disabled?: boolean;
   onChange: (value: string) => void;
 }) {
-  const rootRef = React.useRef<HTMLDivElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
-  const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState("");
-  const [activeIndex, setActiveIndex] = React.useState(0);
-  const [menuStyle, setMenuStyle] = React.useState<React.CSSProperties>({});
-  const selected = options.find((option) => option.value === value);
-  const filtered = options.filter((option) =>
-    `${PROVIDER_LABELS[option.provider]} ${option.model}`.toLowerCase().includes(query.trim().toLowerCase()));
-  const groups = (Object.keys(ALLOWED_MODELS_BY_PROVIDER) as AllowedModelProvider[])
-    .map((provider) => ({ provider, options: filtered.filter((option) => option.provider === provider) }))
-    .filter((group) => group.options.length > 0);
+  const selectedLabel = options.find((option) => option.value === value)?.label;
+  const selected = React.useMemo(() => selectedLabel ? { label: selectedLabel, value } : null, [selectedLabel, value]);
+  const suggestions = options.filter((option) =>
+    `${option.label} ${option.value}`.toLowerCase().includes(query.trim().toLowerCase()));
 
-  React.useEffect(() => {
-    if (!open) return;
-    const positionMenu = () => {
-      const bounds = rootRef.current?.getBoundingClientRect();
-      if (!bounds) return;
-      const gap = 6;
-      const maxMenuHeight = Math.min(288, window.innerHeight - 24);
-      const spaceBelow = window.innerHeight - bounds.bottom - gap - 12;
-      const spaceAbove = bounds.top - gap - 12;
-      const openAbove = spaceBelow < Math.min(220, maxMenuHeight) && spaceAbove > spaceBelow;
-      const availableHeight = Math.max(120, Math.min(maxMenuHeight, openAbove ? spaceAbove : spaceBelow));
-      setMenuStyle({
-        position: "fixed",
-        left: bounds.left,
-        width: bounds.width,
-        maxHeight: availableHeight,
-        ...(openAbove
-          ? { bottom: window.innerHeight - bounds.top + gap }
-          : { top: bounds.bottom + gap }),
-      });
-    };
-    positionMenu();
-    window.addEventListener("resize", positionMenu);
-    window.addEventListener("scroll", positionMenu, true);
-    const handleOutsideClick = (event: MouseEvent) => {
-      const target = event.target as Node;
-      if (!rootRef.current?.contains(target) && !menuRef.current?.contains(target)) setOpen(false);
-    };
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => {
-      window.removeEventListener("resize", positionMenu);
-      window.removeEventListener("scroll", positionMenu, true);
-      document.removeEventListener("mousedown", handleOutsideClick);
-    };
-  }, [open]);
+  return <SolidAutocomplete
+    className="solid-standard-autocomplete w-full"
+    value={selected}
+    suggestions={suggestions}
+    completeMethod={({ query: next }) => setQuery(next)}
+    onChange={(event) => onChange(event.value?.value ?? "")}
+    field="label"
+    placeholder={placeholder}
+    disabled={disabled}
+    dropdown
+    forceSelection
+    portal
+  />;
+}
 
-  const choose = (option: ProviderModelOption) => {
-    onChange(option.value);
-    setQuery("");
-    setOpen(false);
-  };
-  let flatIndex = -1;
-
-  return <div className="agent-editor__model-picker" ref={rootRef}>
-    <div className="agent-editor__model-control">
-      <input
-        role="combobox"
-        aria-expanded={open}
-        aria-autocomplete="list"
-        aria-label={placeholder}
-        placeholder={selected ? `${PROVIDER_LABELS[selected.provider]} / ${selected.model}` : value || placeholder}
-        value={open ? query : ""}
-        onFocus={() => { setQuery(""); setActiveIndex(0); setOpen(true); }}
-        onChange={(event) => { setQuery(event.target.value); setActiveIndex(0); setOpen(true); }}
-        onKeyDown={(event) => {
-          if (event.key === "Escape") { setOpen(false); setQuery(""); }
-          if (event.key === "ArrowDown") { event.preventDefault(); setOpen(true); setActiveIndex((index) => Math.min(index + 1, filtered.length - 1)); }
-          if (event.key === "ArrowUp") { event.preventDefault(); setActiveIndex((index) => Math.max(index - 1, 0)); }
-          if (event.key === "Enter" && open && filtered[activeIndex]) { event.preventDefault(); choose(filtered[activeIndex]); }
-        }}
-      />
-      <button type="button" aria-label={open ? "Close model options" : "Show model options"} onMouseDown={(event) => event.preventDefault()} onClick={() => { setOpen((current) => !current); setQuery(""); }}><ChevronDown size={16} /></button>
+function ModelPicker({ value, options, providers, providerConfig, onChange }: {
+  value: string;
+  options: ProviderModelOption[];
+  providers: { label: string; value: string }[];
+  providerConfig: Record<string, AiProviderConfig>;
+  onChange: (value: string) => void;
+}) {
+  const separator = value.indexOf(":");
+  const provider = separator < 0 ? "" : value.slice(0, separator);
+  const model = separator < 0 ? "" : value.slice(separator + 1);
+  const availableModels = options.filter((option) => option.provider === provider);
+  const [otherSelected, setOtherSelected] = React.useState(false);
+  const showOther = !!provider && (otherSelected || (!!model && !availableModels.some((option) => option.model === model)));
+
+  return <div className="agent-editor__stack">
+    <div className="agent-editor__field"><span>Provider *</span>
+      <SearchableSelect value={provider} options={providers} placeholder="Select provider"
+        onChange={(next) => { setOtherSelected(false); onChange(`${next}:`); }} />
+      {providerConfig[provider]?.type === "bedrock" && providerConfig[provider]?.region &&
+        <small><em>Region: {providerConfig[provider].region}</em></small>}
+    </div>
+    <div className="agent-editor__field"><span>Model *</span>
+      <SearchableSelect value={showOther ? OTHER_MODEL : model}
+        options={[...availableModels.map((option) => ({ label: option.model, value: option.model })), { label: "Other", value: OTHER_MODEL }]}
+        placeholder="Select model" disabled={!provider}
+        onChange={(next) => {
+          setOtherSelected(next === OTHER_MODEL);
+          onChange(`${provider}:${next === OTHER_MODEL ? "" : next}`);
+        }} />
+      {showOther && <SolidInput className="w-full" aria-label="Custom model ID" placeholder="Enter model ID" value={model}
+        onChange={(event) => onChange(`${provider}:${event.target.value}`)} />}
     </div>
-    {open && createPortal(<div ref={menuRef} className="agent-editor__model-menu" style={menuStyle} role="listbox">
-      {!groups.length ? <div className="agent-editor__model-empty">{options.length ? "No matching models." : "No enabled providers. Add an API key in AI Settings."}</div>
-        : groups.map((group) => <section className="agent-editor__model-group" key={group.provider}>
-          <h3>{PROVIDER_LABELS[group.provider]}</h3>
-          {group.options.map((option) => {
-            flatIndex += 1;
-            const index = flatIndex;
-            return <button type="button" role="option" aria-selected={option.value === value} className={`agent-editor__model-option${index === activeIndex ? " is-active" : ""}`}
-              key={option.value} onMouseDown={(event) => event.preventDefault()} onMouseEnter={() => setActiveIndex(index)} onClick={() => choose(option)}>
-              <span>{option.model}</span><small>{option.provider}:{option.model}</small>
-            </button>;
-          })}
-        </section>)}
-    </div>, document.body)}
   </div>;
 }
 
@@ -217,17 +220,41 @@ function parseInputs(value: unknown): Input[] {
     const parsed = typeof value === "string" ? JSON.parse(value) : value;
     if (Array.isArray(parsed)) return parsed.map((input) => ({
       name: String(input.name ?? input.variableName ?? ""), description: String(input.description ?? ""),
-      dataType: String(input.dataType ?? input.type ?? "string"),
+      dataType: String(input.dataType ?? input.type ?? "string"), defaultValue: input.defaultValue ?? null,
+      optional: input.optional === true,
     }));
     // Existing agent definitions may use a name-keyed object.
     if (parsed && typeof parsed === "object") return Object.entries(parsed).map(([name, definition]: [string, any]) => ({
       name, description: String(definition?.description ?? ""),
-      dataType: String(definition?.dataType ?? definition?.type ?? "string"),
+      dataType: String(definition?.dataType ?? definition?.type ?? "string"), defaultValue: definition?.defaultValue ?? null,
+      optional: definition?.optional === true,
     }));
   } catch { /* Keep malformed historical values from crashing the editor. */ }
   return [];
 }
 
+function parseDefaultValue(raw: string, dataType: string): unknown {
+  if (dataType === "string" || dataType === "date" || dataType === "datetime") return raw;
+  if (dataType === "boolean") {
+    if (raw !== "true" && raw !== "false") throw new Error(`Default value must be true or false for ${dataType}.`);
+    return raw === "true";
+  }
+  if (dataType === "number" || dataType === "integer") {
+    const value = Number(raw);
+    if (!Number.isFinite(value) || (dataType === "integer" && !Number.isSafeInteger(value))) throw new Error(`Default value must be a valid ${dataType}.`);
+    return value;
+  }
+  const value = JSON.parse(raw);
+  if (dataType === "array" && !Array.isArray(value)) throw new Error("Default value must be a JSON array.");
+  if (dataType === "object" && (!value || typeof value !== "object" || Array.isArray(value))) throw new Error("Default value must be a JSON object.");
+  return value;
+}
+
+function formatDefaultValue(value: unknown): string {
+  if (value == null) return "";
+  return typeof value === "string" ? value : JSON.stringify(value);
+}
+
 function apiError(error: any): string {
   const value = error?.data?.data?.message ?? error?.data?.message ?? error?.message;
   return Array.isArray(value) ? value.join("; ") : typeof value === "string" ? value : "The save failed.";
@@ -269,12 +296,16 @@ function LinkPicker({ label, description, options, selected, onAdd, onRemove, cr
 }) {
   const [search, setSearch] = React.useState("");
   const [open, setOpen] = React.useState(false);
+  const showAssociatedCount = label === "Skills" || label === "Tools";
   const available = options.filter((item) => !selected.some((selectedItem) => selectedItem.id === item.id)
     && `${item.name ?? item.displayName ?? item.key ?? ""} ${item.description ?? ""}`.toLowerCase().includes(search.toLowerCase())).slice(0, 20);
   return <section className="agent-editor__section">
     <div className="agent-editor__section-head"><div><h2>{label}</h2><p>{description}</p></div>
       {createUrl && <a href={createUrl} target="_blank" rel="noopener noreferrer" className="agent-editor__new-link">Create {label === "Skills" ? "skill" : "tool"} <ExternalLink size={14} /></a>}
     </div>
+    {showAssociatedCount && <div className="agent-editor__linked-count" role="status">
+      {selected.length} {label.toLowerCase()} associated
+    </div>}
     <div className="agent-editor__picker">
       <SolidInput value={search} placeholder={`Search and add ${label.toLowerCase()}…`} aria-label={`Search ${label.toLowerCase()}`}
         onFocus={() => setOpen(true)} onChange={(event) => { setSearch(event.target.value); setOpen(true); }} />
@@ -413,18 +444,26 @@ export function AgentRegistryEditorPage() {
   }, [skills.refetch, tools.refetch]);
 
   const configValue = getSettingsMap(settings).solidXGenAiCodeBuilderConfig;
-  let enabledProviders: Record<string, { apiKey?: unknown }> = {};
+  let aiConfig: { providers?: Record<string, AiProviderConfig>; models?: { default?: AiModelConfig; main?: AiModelConfig; fast?: AiModelConfig } } = {};
   try {
-    const config = typeof configValue === "string" ? JSON.parse(configValue) : configValue;
-    enabledProviders = config?.providers ?? {};
+    aiConfig = (typeof configValue === "string" ? JSON.parse(configValue) : configValue) ?? {};
   } catch { /* Invalid configuration has no enabled providers. */ }
-  const modelOptions = (Object.keys(ALLOWED_MODELS_BY_PROVIDER) as AllowedModelProvider[])
-    .filter((provider) => typeof enabledProviders[provider]?.apiKey === "string" && (enabledProviders[provider].apiKey as string).trim().length > 0)
-    .flatMap((provider) => ALLOWED_MODELS_BY_PROVIDER[provider].map((model) => ({
-      provider,
-      model,
-      value: `${provider}:${model}`,
-    })));
+  const { catalog: modelsCatalog } = useModelsDevCatalog();
+  const savedModelKeys = [record?.reasoningModelKey, record?.fastModelKey].filter((key): key is string => !!key);
+  const modelOptions = buildModelOptions(
+    aiConfig.providers ?? {},
+    { Reasoning: aiConfig.models?.default ?? aiConfig.models?.main, Fast: aiConfig.models?.fast },
+    modelsCatalog,
+    savedModelKeys,
+  );
+  const providerOptions = Object.entries(aiConfig.providers ?? {})
+    .filter(([, entry]) => typeof entry?.apiKey === "string" && entry.apiKey.trim().length > 0)
+    .map(([provider]) => ({ label: modelsCatalog?.[provider]?.name ?? PROVIDER_LABELS[provider] ?? provider, value: provider }));
+  const isValidModelKey = (value: string) => {
+    const separator = value.indexOf(":");
+    return separator > 0 && providerOptions.some((provider) => provider.value === value.slice(0, separator)) &&
+      !!value.slice(separator + 1).trim();
+  };
   const toggle = (setter: React.Dispatch<React.SetStateAction<number[]>>, value: number) =>
     setter((current) => current.includes(value) ? current.filter((id) => id !== value) : [...current, value]);
 
@@ -454,8 +493,8 @@ export function AgentRegistryEditorPage() {
     if (!name.trim()) next.name = "Name is required.";
     if (!title.trim()) next.title = "Title is required.";
     if (!systemPrompt.trim()) next.systemPrompt = "Persona instructions are required.";
-    if (!modelOptions.some((option) => option.value === reasoningModelKey)) next.reasoningModelKey = "Choose an enabled reasoning provider and model.";
-    if (!modelOptions.some((option) => option.value === fastModelKey)) next.fastModelKey = "Choose an enabled fast provider and model.";
+    if (!isValidModelKey(reasoningModelKey)) next.reasoningModelKey = "Choose an enabled reasoning provider and model.";
+    if (!isValidModelKey(fastModelKey)) next.fastModelKey = "Choose an enabled fast provider and model.";
     if (inputs.some((input) => !input.name.trim() || !input.dataType)) next.inputs = "Each input needs a name and data type.";
     if (new Set(inputs.map((input) => input.name.trim().toLowerCase())).size !== inputs.length) next.inputs = "Input names must be unique.";
     if (stepLimit < 1 || turnStepLimit < 1 || costLimit < 0) next.limits = "Step limits must be positive and cost limit cannot be negative.";
@@ -465,9 +504,19 @@ export function AgentRegistryEditorPage() {
       dispatch(showToast({ severity: "error", summary: "Missing information", detail: Object.values(next).join(" ") }));
       return;
     }
+    let normalizedInputs: Input[];
+    try {
+      normalizedInputs = inputs.map((input) => ({ ...input, name: input.name.trim(), description: input.description.trim(),
+        defaultValue: input.defaultValue === "" || input.defaultValue == null ? null : parseDefaultValue(String(input.defaultValue), input.dataType) }));
+    } catch (error) {
+      next.inputs = error instanceof Error ? error.message : "Check the default input values.";
+      setErrors(next);
+      setTab("basics");
+      return;
+    }
     const payload = {
       name: name.trim(), title: title.trim(), description: description.trim(), iconName,
-      requiredInputs: JSON.stringify(inputs.map((input) => ({ ...input, name: input.name.trim(), description: input.description.trim() }))),
+      requiredInputs: JSON.stringify(normalizedInputs),
       reasoningModelKey, fastModelKey, systemPrompt, stepLimit: Number(stepLimit),
       turnStepLimit: Number(turnStepLimit), costLimit: Number(costLimit),
       ...agentHubTagsPayload(tags),
@@ -546,25 +595,27 @@ export function AgentRegistryEditorPage() {
         {field("Description", description, setDescription, "description")}<div className="agent-editor__field"><span>Icon</span><SolidIconPicker value={iconName} onChange={setIconName} /></div>
       </div>
       <AgentHubTagsField value={tags} onChange={setTags} disabled={creating || updating || isLoading || isFetching || isError} onBusyChange={setCreatingTag} />
-      <section className="agent-editor__section"><div className="agent-editor__section-head"><div><h2>Required inputs</h2><p>Define the variables people must provide when starting this agent.</p></div>
-        {inputs.length > 0 && <SolidButton type="button" variant="secondary" size="small" onClick={() => setInputs((current) => [...current, { name: "", description: "", dataType: "string" }])}><Plus size={15} /> Add input</SolidButton>}
+      <section className="agent-editor__section"><div className="agent-editor__section-head"><div><h2>Inputs</h2><p>Define the variables this agent can use. Mark inputs optional or provide a default value when people do not need to enter them.</p></div>
+        {inputs.length > 0 && <SolidButton type="button" variant="secondary" size="small" onClick={() => setInputs((current) => [...current, { name: "", description: "", dataType: "string", defaultValue: null, optional: false }])}><Plus size={15} /> Add input</SolidButton>}
       </div>
-      {!inputs.length ? <div className="agent-editor__empty">This agent has no required inputs. <button type="button" onClick={() => setInputs([{ name: "", description: "", dataType: "string" }])}><Plus size={15} /> Add an input variable</button></div>
+      {!inputs.length ? <div className="agent-editor__empty">This agent has no inputs. <button type="button" onClick={() => setInputs([{ name: "", description: "", dataType: "string", defaultValue: null, optional: false }])}><Plus size={15} /> Add an input variable</button></div>
         : <div className="agent-editor__inputs">{inputs.map((input, index) => <div className="agent-editor__input-row" key={index}>
           <SolidInput aria-label={`Input ${index + 1} name`} placeholder="Variable name" value={input.name} onChange={(event) => setInputs((current) => current.map((item, i) => i === index ? { ...item, name: event.target.value } : item))} />
           <SolidInput aria-label={`Input ${index + 1} description`} placeholder="Description" value={input.description} onChange={(event) => setInputs((current) => current.map((item, i) => i === index ? { ...item, description: event.target.value } : item))} />
+          <SolidInput aria-label={`Input ${index + 1} default value`} placeholder="Default value" value={formatDefaultValue(input.defaultValue)} onChange={(event) => setInputs((current) => current.map((item, i) => i === index ? { ...item, defaultValue: event.target.value } : item))} />
           <select aria-label={`Input ${index + 1} data type`} value={input.dataType} onChange={(event) => setInputs((current) => current.map((item, i) => i === index ? { ...item, dataType: event.target.value } : item))}>
             {["string", "number", "integer", "boolean", "date", "datetime", "object", "array"].map((type) => <option key={type} value={type}>{type}</option>)}
           </select>
+          <label className="agent-editor__input-optional"><input type="checkbox" checked={input.optional} onChange={(event) => setInputs((current) => current.map((item, i) => i === index ? { ...item, optional: event.target.checked } : item))} /> Optional</label>
           <button type="button" aria-label={`Remove input ${index + 1}`} onClick={() => setInputs((current) => current.filter((_, i) => i !== index))}><Trash2 size={17} /></button>
         </div>)}</div>}
       {errors.inputs && <small className="agent-editor__error">{errors.inputs}</small>}</section>
-      <section className="agent-editor__section"><h2>Models</h2><p>Choose any configured provider and model pair for each role. Both lists use the models enabled in AI settings.</p><div className="agent-editor__grid">
+      <section className="agent-editor__section agent-editor__models"><h2>Models</h2><p>Choose a configured provider and model for each role. Select Other to enter a model ID manually.</p><div className="agent-editor__grid">
         {([["Reasoning model", reasoningModelKey, setReasoningModelKey, "reasoningModelKey"], ["Fast model", fastModelKey, setFastModelKey, "fastModelKey"]] as const).map(([label, value, setter, key]) =>
-          <label className="agent-editor__field" key={key}><span>{label} *</span><ModelPicker value={value} options={modelOptions} placeholder="Search providers and models…" onChange={(next) => setter(next)} />
-            {errors[key] && <small className="agent-editor__error">{errors[key]}</small>}</label>)}
+          <div className="agent-editor__field" key={key}><span>{label}</span><ModelPicker value={value} options={modelOptions} providers={providerOptions} providerConfig={aiConfig.providers ?? {}} onChange={setter} />
+            {errors[key] && <small className="agent-editor__error">{errors[key]}</small>}</div>)}
       </div>{settingsError ? <p className="agent-editor__hint">Settings could not be loaded. Try refreshing this page.</p>
-        : !modelOptions.length && <p className="agent-editor__hint">No configured models are available. Check the AI settings and your permission to view encrypted settings.</p>}</section>
+        : !providerOptions.length && <p className="agent-editor__hint">No enabled providers are available. Check the AI settings and your permission to view encrypted settings.</p>}</section>
       <section className="agent-editor__section agent-editor__workflow" aria-labelledby="agent-lifecycle-title">
         <div className="agent-editor__section-head"><div><h2 id="agent-lifecycle-title">Agent lifecycle</h2><p>Track this agent through its available stages. Select a stage to update its status.</p></div><div className="agent-editor__workflow-meta">{record?.configVersion != null && <span className="agent-editor__config-version" aria-label={`Configuration version ${record.configVersion}`}>Config v{record.configVersion}</span>}<SolidWorkflowStatusPill label={agentStatus} /></div></div>
         <div className="agent-editor__workflow-stages" aria-label={`Current agent stage: ${agentStatus}`}>
@@ -585,7 +636,8 @@ export function AgentRegistryEditorPage() {
         <small className="agent-editor__workflow-save-hint">Changing stage saves the current form and its linked skills, tools, roles, and secrets.</small>
       </section>
     </div> },
-    { value: "persona", label: "Persona", content: <section className="agent-editor__section agent-editor__persona"><div className="agent-editor__section-head"><div><h2>System prompt *</h2><p>Describe the agent's role, behavior, and instructions in Markdown.</p></div></div>
+    { value: "persona", label: "Persona", content: <section className="agent-editor__section agent-editor__persona"><div className="agent-editor__section-head"><div><h2>System prompt *</h2><p>Describe the agent's role, behavior, and instructions in Markdown.</p></div>
+      {record?.id && <AgentPersonaHistory agentId={record.id} savedPrompt={record.systemPrompt ?? ""} refreshVersion={auditVersion} />}</div>
       <SolidCodeEditor value={systemPrompt} onChange={(value) => { setSystemPrompt(value ?? ""); setErrors((current) => ({ ...current, systemPrompt: "" })); }} language="markdown" fontSize={11} height="max(34rem, calc(100dvh - 18rem))" />
       {errors.systemPrompt && <small className="agent-editor__error">{errors.systemPrompt}</small>}</section> },
     { value: "skills", label: "Skills", content: <LinkPicker label="Skills" description="Skills available to this agent." options={skills.records} selected={linked(skillIds, skills.records, items(record?.agentSkills).map((link) => link.agentSkillRegistry).filter(Boolean))}

package/dist/routes/pages/admin/core/ArchivedChatterMessagesPage.d.ts

@@ -0,0 +1,2 @@
+export declare function ArchivedChatterMessagesPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ArchivedChatterMessagesPage.d.ts.map

package/dist/routes/pages/admin/core/ArchivedChatterMessagesPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchivedChatterMessagesPage.d.ts","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/ArchivedChatterMessagesPage.tsx"],"names":[],"mappings":"AASA,wBAAgB,2BAA2B,4CAsF1C"}

package/dist/routes/pages/admin/core/ArchivedChatterMessagesPage.js

@@ -0,0 +1,108 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import qs from 'qs';
+import { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';
+import { SolidButton } from '../../../../components/shad-cn-ui';
+import { useGetArchivedChatterMessagesQuery, useLazyGetArchivedChatterMessageQuery } from '../../../../redux/api/solidChatterMessageApi';
+var PAGE_SIZE = 25;
+export function ArchivedChatterMessagesPage() {
+    var _this = this;
+    var _a, _b, _c, _d, _e;
+    var _f = React.useState({ entityName: '', entityId: '', messageType: '', messageSubType: '', user: '', from: '', to: '' }), filters = _f[0], setFilters = _f[1];
+    var _g = React.useState(0), offset = _g[0], setOffset = _g[1];
+    var _h = React.useState(null), selectedId = _h[0], setSelectedId = _h[1];
+    var queryString = React.useMemo(function () {
+        var query = { limit: PAGE_SIZE, offset: offset };
+        var where = {};
+        if (filters.entityName.trim())
+            where.coModelName = { $containsi: filters.entityName.trim() };
+        if (filters.entityId.trim() && Number.isFinite(Number(filters.entityId)))
+            where.coModelEntityId = { $eq: Number(filters.entityId) };
+        if (filters.messageType)
+            where.messageType = { $eq: filters.messageType };
+        if (filters.messageSubType.trim())
+            where.messageSubType = { $containsi: filters.messageSubType.trim() };
+        if (filters.user.trim())
+            where.user = { fullName: { $containsi: filters.user.trim() } };
+        if (filters.from || filters.to) {
+            where.createdAt = {};
+            if (filters.from)
+                where.createdAt.$gte = new Date(filters.from).toISOString();
+            if (filters.to)
+                where.createdAt.$lte = new Date(filters.to).toISOString();
+        }
+        if (Object.keys(where).length)
+            query.filters = where;
+        query.sort = ['createdAt:DESC'];
+        return qs.stringify(query, { encodeValuesOnly: true });
+    }, [filters, offset]);
+    var _j = useGetArchivedChatterMessagesQuery(queryString), data = _j.data, isLoading = _j.isLoading, isFetching = _j.isFetching, error = _j.error;
+    var _k = useLazyGetArchivedChatterMessageQuery(), fetchOne = _k[0], _l = _k[1], detailData = _l.data, detailLoading = _l.isFetching;
+    var records = (_a = data === null || data === void 0 ? void 0 : data.records) !== null && _a !== void 0 ? _a : [];
+    var meta = (_b = data === null || data === void 0 ? void 0 : data.meta) !== null && _b !== void 0 ? _b : {};
+    var openRecord = function (id) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setSelectedId(id);
+                    return [4 /*yield*/, fetchOne(id)];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); };
+    var selected = detailData === null || detailData === void 0 ? void 0 : detailData.record;
+    return _jsxs("main", { className: "mx-auto flex w-full max-w-7xl flex-col gap-5 p-6", children: [_jsxs("header", { children: [_jsx("h1", { className: "m-0 text-2xl font-semibold", children: "Archived Messages" }), _jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: "Search chatter messages moved to the configured archive store." })] }), (data === null || data === void 0 ? void 0 : data.available) === false ? _jsxs("section", { className: "rounded-lg border p-6", role: "status", children: [_jsx("h2", { className: "m-0 text-lg font-semibold", children: "Chatter archival is not enabled" }), _jsx("p", { className: "mb-0 mt-2 text-sm text-muted-foreground", children: "Configure and register an IChatterMessageArchive provider in the consuming project to archive and browse messages." })] }) : _jsxs(_Fragment, { children: [_jsxs("section", { className: "grid grid-cols-1 gap-3 rounded-lg border p-4 sm:grid-cols-2 lg:grid-cols-7", "aria-label": "Archive filters", children: [_jsxs("label", { className: "flex flex-col gap-1 text-sm", children: ["Entity name", _jsx("input", { className: "rounded border px-3 py-2", value: filters.entityName, onChange: function (e) { setOffset(0); setFilters(__assign(__assign({}, filters), { entityName: e.target.value })); }, placeholder: "e.g. customer" })] }), _jsxs("label", { className: "flex flex-col gap-1 text-sm", children: ["Entity ID", _jsx("input", { className: "rounded border px-3 py-2", inputMode: "numeric", value: filters.entityId, onChange: function (e) { setOffset(0); setFilters(__assign(__assign({}, filters), { entityId: e.target.value })); }, placeholder: "Record ID" })] }), _jsxs("label", { className: "flex flex-col gap-1 text-sm", children: ["Message type", _jsxs("select", { className: "rounded border px-3 py-2", value: filters.messageType, onChange: function (e) { setOffset(0); setFilters(__assign(__assign({}, filters), { messageType: e.target.value })); }, children: [_jsx("option", { value: "", children: "All types" }), _jsx("option", { value: "audit", children: "Audit" }), _jsx("option", { value: "custom", children: "Custom" })] })] }), _jsxs("label", { className: "flex flex-col gap-1 text-sm", children: ["Message subtype", _jsx("input", { className: "rounded border px-3 py-2", value: filters.messageSubType, onChange: function (e) { setOffset(0); setFilters(__assign(__assign({}, filters), { messageSubType: e.target.value })); }, placeholder: "e.g. audit_update" })] }), _jsxs("label", { className: "flex flex-col gap-1 text-sm", children: ["Changed by", _jsx("input", { className: "rounded border px-3 py-2", value: filters.user, onChange: function (e) { setOffset(0); setFilters(__assign(__assign({}, filters), { user: e.target.value })); }, placeholder: "User name" })] }), _jsxs("label", { className: "flex flex-col gap-1 text-sm", children: ["From", _jsx("input", { className: "rounded border px-3 py-2", type: "datetime-local", value: filters.from, onChange: function (e) { setOffset(0); setFilters(__assign(__assign({}, filters), { from: e.target.value })); } })] }), _jsxs("label", { className: "flex flex-col gap-1 text-sm", children: ["To", _jsx("input", { className: "rounded border px-3 py-2", type: "datetime-local", value: filters.to, onChange: function (e) { setOffset(0); setFilters(__assign(__assign({}, filters), { to: e.target.value })); } })] })] }), error && _jsx("p", { role: "alert", className: "text-sm text-red-600", children: "Unable to load archived messages. Check provider availability and try again." }), _jsx("section", { className: "overflow-hidden rounded-lg border", children: isLoading ? _jsxs("div", { className: "flex items-center gap-2 p-8", children: [_jsx(Loader2, { className: "animate-spin", size: 18 }), "Loading archived messages\u2026"] }) : records.length === 0 ? _jsx("p", { className: "p-8 text-center text-sm text-muted-foreground", children: "No archived messages match these filters." }) : _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full border-collapse text-left text-sm", children: [_jsx("thead", { className: "bg-muted/50", children: _jsxs("tr", { children: [_jsx("th", { className: "p-3", children: "Date" }), _jsx("th", { className: "p-3", children: "Entity" }), _jsx("th", { className: "p-3", children: "Entity ID" }), _jsx("th", { className: "p-3", children: "Type" }), _jsx("th", { className: "p-3", children: "User" }), _jsx("th", { className: "p-3", children: "Message" })] }) }), _jsx("tbody", { children: records.map(function (message) {
+                                            var _a;
+                                            return _jsxs("tr", { className: "border-t hover:bg-muted/30", children: [_jsx("td", { className: "whitespace-nowrap p-3", children: message.createdAt ? new Date(message.createdAt).toLocaleString() : '—' }), _jsx("td", { className: "p-3", children: message.modelDisplayName || message.coModelName }), _jsx("td", { className: "p-3", children: message.coModelEntityId }), _jsx("td", { className: "p-3", children: message.messageSubType || message.messageType }), _jsx("td", { className: "p-3", children: ((_a = message.user) === null || _a === void 0 ? void 0 : _a.fullName) || 'System' }), _jsx("td", { className: "max-w-md p-3", children: _jsx("button", { type: "button", className: "text-left text-primary underline", onClick: function () { return openRecord(message.id); }, children: message.messageBody || 'View message' }) })] }, message.id);
+                                        }) })] }) }) }), _jsxs("footer", { className: "flex items-center justify-between", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: [(_c = meta.totalRecords) !== null && _c !== void 0 ? _c : records.length, " archived messages", isFetching ? ' · Updating…' : ''] }), _jsxs("div", { className: "flex gap-2", children: [_jsxs(SolidButton, { variant: "outline", disabled: offset === 0 || isFetching, onClick: function () { return setOffset(Math.max(0, offset - PAGE_SIZE)); }, children: [_jsx(ChevronLeft, { size: 16 }), "Previous"] }), _jsxs(SolidButton, { variant: "outline", disabled: records.length < PAGE_SIZE || isFetching, onClick: function () { return setOffset(offset + PAGE_SIZE); }, children: ["Next", _jsx(ChevronRight, { size: 16 })] })] })] })] }), selectedId !== null && _jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4", role: "presentation", onClick: function () { return setSelectedId(null); }, children: _jsxs("section", { role: "dialog", "aria-modal": "true", "aria-label": "Archived chatter message", className: "max-h-[85vh] w-full max-w-3xl overflow-auto rounded-lg bg-background p-6 shadow-xl", onClick: function (e) { return e.stopPropagation(); }, children: [_jsxs("div", { className: "mb-4 flex items-start justify-between", children: [_jsxs("h2", { className: "m-0 text-xl font-semibold", children: ["Archived message #", selectedId] }), _jsx("button", { type: "button", className: "rounded px-2 py-1 hover:bg-muted", onClick: function () { return setSelectedId(null); }, children: "Close" })] }), detailLoading ? _jsx("p", { children: "Loading message\u2026" }) : selected ? _jsxs(_Fragment, { children: [_jsxs("dl", { className: "grid grid-cols-2 gap-3 text-sm", children: [_jsx("dt", { children: "Entity" }), _jsx("dd", { children: selected.modelDisplayName || selected.coModelName }), _jsx("dt", { children: "Entity ID" }), _jsx("dd", { children: selected.coModelEntityId }), _jsx("dt", { children: "Date" }), _jsx("dd", { children: selected.createdAt ? new Date(selected.createdAt).toLocaleString() : '—' }), _jsx("dt", { children: "User" }), _jsx("dd", { children: ((_d = selected.user) === null || _d === void 0 ? void 0 : _d.fullName) || 'System' }), _jsx("dt", { children: "Subtype" }), _jsx("dd", { children: selected.messageSubType })] }), _jsx("h3", { className: "mt-5 text-base font-semibold", children: "Message" }), _jsx("pre", { className: "whitespace-pre-wrap break-words rounded bg-muted p-3 text-sm", children: selected.messageBody || '' }), !!((_e = selected.chatterMessageDetails) === null || _e === void 0 ? void 0 : _e.length) && _jsxs(_Fragment, { children: [_jsx("h3", { className: "mt-5 text-base font-semibold", children: "Change details" }), _jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-left text-sm", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { className: "p-2", children: "Field" }), _jsx("th", { className: "p-2", children: "Previous" }), _jsx("th", { className: "p-2", children: "Current" })] }) }), _jsx("tbody", { children: selected.chatterMessageDetails.map(function (detail, index) { var _a, _b, _c, _d, _e; return _jsxs("tr", { className: "border-t", children: [_jsx("td", { className: "p-2", children: detail.fieldDisplayName || detail.fieldName }), _jsx("td", { className: "p-2", children: (_b = (_a = detail.oldValueDisplay) !== null && _a !== void 0 ? _a : detail.oldValue) !== null && _b !== void 0 ? _b : '—' }), _jsx("td", { className: "p-2", children: (_d = (_c = detail.newValueDisplay) !== null && _c !== void 0 ? _c : detail.newValue) !== null && _d !== void 0 ? _d : '—' })] }, (_e = detail.id) !== null && _e !== void 0 ? _e : index); }) })] }) })] })] }) : _jsx("p", { role: "alert", children: "Could not load this archived message." })] }) })] });
+}
+//# sourceMappingURL=ArchivedChatterMessagesPage.js.map

package/dist/routes/pages/admin/core/ArchivedChatterMessagesPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchivedChatterMessagesPage.js","sourceRoot":"","sources":["../../../../../src/routes/pages/admin/core/ArchivedChatterMessagesPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport qs from 'qs';\nimport { ChevronLeft, ChevronRight, Loader2 } from 'lucide-react';\nimport { SolidButton } from '../../../../components/shad-cn-ui';\nimport { useGetArchivedChatterMessagesQuery, useLazyGetArchivedChatterMessageQuery } from '../../../../redux/api/solidChatterMessageApi';\n\nconst PAGE_SIZE = 25;\ntype Filters = { entityName: string; entityId: string; messageType: string; messageSubType: string; user: string; from: string; to: string };\n\nexport function ArchivedChatterMessagesPage() {\n  const [filters, setFilters] = React.useState<Filters>({ entityName: '', entityId: '', messageType: '', messageSubType: '', user: '', from: '', to: '' });\n  const [offset, setOffset] = React.useState(0);\n  const [selectedId, setSelectedId] = React.useState<number | null>(null);\n\n  const queryString = React.useMemo(() => {\n    const query: any = { limit: PAGE_SIZE, offset };\n    const where: Record<string, any> = {};\n    if (filters.entityName.trim()) where.coModelName = { $containsi: filters.entityName.trim() };\n    if (filters.entityId.trim() && Number.isFinite(Number(filters.entityId))) where.coModelEntityId = { $eq: Number(filters.entityId) };\n    if (filters.messageType) where.messageType = { $eq: filters.messageType };\n    if (filters.messageSubType.trim()) where.messageSubType = { $containsi: filters.messageSubType.trim() };\n    if (filters.user.trim()) where.user = { fullName: { $containsi: filters.user.trim() } };\n    if (filters.from || filters.to) {\n      where.createdAt = {};\n      if (filters.from) where.createdAt.$gte = new Date(filters.from).toISOString();\n      if (filters.to) where.createdAt.$lte = new Date(filters.to).toISOString();\n    }\n    if (Object.keys(where).length) query.filters = where;\n    query.sort = ['createdAt:DESC'];\n    return qs.stringify(query, { encodeValuesOnly: true });\n  }, [filters, offset]);\n\n  const { data, isLoading, isFetching, error } = useGetArchivedChatterMessagesQuery(queryString);\n  const [fetchOne, { data: detailData, isFetching: detailLoading }] = useLazyGetArchivedChatterMessageQuery();\n  const records = data?.records ?? [];\n  const meta = data?.meta ?? {};\n\n  const openRecord = async (id: number) => {\n    setSelectedId(id);\n    await fetchOne(id);\n  };\n  const selected = detailData?.record;\n\n  return <main className=\"mx-auto flex w-full max-w-7xl flex-col gap-5 p-6\">\n    <header>\n      <h1 className=\"m-0 text-2xl font-semibold\">Archived Messages</h1>\n      <p className=\"mt-1 text-sm text-muted-foreground\">Search chatter messages moved to the configured archive store.</p>\n    </header>\n\n    {data?.available === false ? <section className=\"rounded-lg border p-6\" role=\"status\">\n      <h2 className=\"m-0 text-lg font-semibold\">Chatter archival is not enabled</h2>\n      <p className=\"mb-0 mt-2 text-sm text-muted-foreground\">Configure and register an IChatterMessageArchive provider in the consuming project to archive and browse messages.</p>\n    </section> : <>\n      <section className=\"grid grid-cols-1 gap-3 rounded-lg border p-4 sm:grid-cols-2 lg:grid-cols-7\" aria-label=\"Archive filters\">\n        <label className=\"flex flex-col gap-1 text-sm\">Entity name<input className=\"rounded border px-3 py-2\" value={filters.entityName} onChange={e => { setOffset(0); setFilters({ ...filters, entityName: e.target.value }); }} placeholder=\"e.g. customer\" /></label>\n        <label className=\"flex flex-col gap-1 text-sm\">Entity ID<input className=\"rounded border px-3 py-2\" inputMode=\"numeric\" value={filters.entityId} onChange={e => { setOffset(0); setFilters({ ...filters, entityId: e.target.value }); }} placeholder=\"Record ID\" /></label>\n        <label className=\"flex flex-col gap-1 text-sm\">Message type<select className=\"rounded border px-3 py-2\" value={filters.messageType} onChange={e => { setOffset(0); setFilters({ ...filters, messageType: e.target.value }); }}><option value=\"\">All types</option><option value=\"audit\">Audit</option><option value=\"custom\">Custom</option></select></label>\n        <label className=\"flex flex-col gap-1 text-sm\">Message subtype<input className=\"rounded border px-3 py-2\" value={filters.messageSubType} onChange={e => { setOffset(0); setFilters({ ...filters, messageSubType: e.target.value }); }} placeholder=\"e.g. audit_update\" /></label>\n        <label className=\"flex flex-col gap-1 text-sm\">Changed by<input className=\"rounded border px-3 py-2\" value={filters.user} onChange={e => { setOffset(0); setFilters({ ...filters, user: e.target.value }); }} placeholder=\"User name\" /></label>\n        <label className=\"flex flex-col gap-1 text-sm\">From<input className=\"rounded border px-3 py-2\" type=\"datetime-local\" value={filters.from} onChange={e => { setOffset(0); setFilters({ ...filters, from: e.target.value }); }} /></label>\n        <label className=\"flex flex-col gap-1 text-sm\">To<input className=\"rounded border px-3 py-2\" type=\"datetime-local\" value={filters.to} onChange={e => { setOffset(0); setFilters({ ...filters, to: e.target.value }); }} /></label>\n      </section>\n\n      {error && <p role=\"alert\" className=\"text-sm text-red-600\">Unable to load archived messages. Check provider availability and try again.</p>}\n      <section className=\"overflow-hidden rounded-lg border\">\n        {isLoading ? <div className=\"flex items-center gap-2 p-8\"><Loader2 className=\"animate-spin\" size={18} />Loading archived messages…</div> : records.length === 0 ? <p className=\"p-8 text-center text-sm text-muted-foreground\">No archived messages match these filters.</p> : <div className=\"overflow-x-auto\">\n          <table className=\"w-full border-collapse text-left text-sm\">\n            <thead className=\"bg-muted/50\"><tr><th className=\"p-3\">Date</th><th className=\"p-3\">Entity</th><th className=\"p-3\">Entity ID</th><th className=\"p-3\">Type</th><th className=\"p-3\">User</th><th className=\"p-3\">Message</th></tr></thead>\n            <tbody>{records.map((message: any) => <tr key={message.id} className=\"border-t hover:bg-muted/30\">\n              <td className=\"whitespace-nowrap p-3\">{message.createdAt ? new Date(message.createdAt).toLocaleString() : '—'}</td>\n              <td className=\"p-3\">{message.modelDisplayName || message.coModelName}</td><td className=\"p-3\">{message.coModelEntityId}</td>\n              <td className=\"p-3\">{message.messageSubType || message.messageType}</td><td className=\"p-3\">{message.user?.fullName || 'System'}</td>\n              <td className=\"max-w-md p-3\"><button type=\"button\" className=\"text-left text-primary underline\" onClick={() => openRecord(message.id)}>{message.messageBody || 'View message'}</button></td>\n            </tr>)}</tbody>\n          </table>\n        </div>}\n      </section>\n\n      <footer className=\"flex items-center justify-between\">\n        <span className=\"text-sm text-muted-foreground\">{meta.totalRecords ?? records.length} archived messages{isFetching ? ' · Updating…' : ''}</span>\n        <div className=\"flex gap-2\"><SolidButton variant=\"outline\" disabled={offset === 0 || isFetching} onClick={() => setOffset(Math.max(0, offset - PAGE_SIZE))}><ChevronLeft size={16} />Previous</SolidButton><SolidButton variant=\"outline\" disabled={records.length < PAGE_SIZE || isFetching} onClick={() => setOffset(offset + PAGE_SIZE)}>Next<ChevronRight size={16} /></SolidButton></div>\n      </footer>\n    </>}\n\n    {selectedId !== null && <div className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4\" role=\"presentation\" onClick={() => setSelectedId(null)}>\n      <section role=\"dialog\" aria-modal=\"true\" aria-label=\"Archived chatter message\" className=\"max-h-[85vh] w-full max-w-3xl overflow-auto rounded-lg bg-background p-6 shadow-xl\" onClick={e => e.stopPropagation()}>\n        <div className=\"mb-4 flex items-start justify-between\"><h2 className=\"m-0 text-xl font-semibold\">Archived message #{selectedId}</h2><button type=\"button\" className=\"rounded px-2 py-1 hover:bg-muted\" onClick={() => setSelectedId(null)}>Close</button></div>\n        {detailLoading ? <p>Loading message…</p> : selected ? <>\n          <dl className=\"grid grid-cols-2 gap-3 text-sm\"><dt>Entity</dt><dd>{selected.modelDisplayName || selected.coModelName}</dd><dt>Entity ID</dt><dd>{selected.coModelEntityId}</dd><dt>Date</dt><dd>{selected.createdAt ? new Date(selected.createdAt).toLocaleString() : '—'}</dd><dt>User</dt><dd>{selected.user?.fullName || 'System'}</dd><dt>Subtype</dt><dd>{selected.messageSubType}</dd></dl>\n          <h3 className=\"mt-5 text-base font-semibold\">Message</h3><pre className=\"whitespace-pre-wrap break-words rounded bg-muted p-3 text-sm\">{selected.messageBody || ''}</pre>\n          {!!selected.chatterMessageDetails?.length && <><h3 className=\"mt-5 text-base font-semibold\">Change details</h3><div className=\"overflow-x-auto\"><table className=\"w-full text-left text-sm\"><thead><tr><th className=\"p-2\">Field</th><th className=\"p-2\">Previous</th><th className=\"p-2\">Current</th></tr></thead><tbody>{selected.chatterMessageDetails.map((detail: any, index: number) => <tr className=\"border-t\" key={detail.id ?? index}><td className=\"p-2\">{detail.fieldDisplayName || detail.fieldName}</td><td className=\"p-2\">{detail.oldValueDisplay ?? detail.oldValue ?? '—'}</td><td className=\"p-2\">{detail.newValueDisplay ?? detail.newValue ?? '—'}</td></tr>)}</tbody></table></div></>}\n        </> : <p role=\"alert\">Could not load this archived message.</p>}\n      </section>\n    </div>}\n  </main>;\n}\n"]}