akanjs 3.0.0-alpha.2 → 3.0.0-alpha.21

package/ui/Model/SureToRemove.tsx

@@ -8,6 +8,7 @@ import { AiOutlineDelete } from "react-icons/ai";
 
 import { buttonRecipe } from "../Button";
 import { Modal } from "../Modal";
+import { inputRecipe } from "../recipe";
 
 interface SureToRemoveProps {
   className?: string;
@@ -95,7 +96,7 @@ export default function SureToRemove({
         </div>
         {typeNameToRemove ? (
           <input
-            className="input w-full text-center"
+            className={inputRecipe({}, "text-center")}
             placeholder={`${l(`${modelName}.modelName` as "base.new")} name`}
             value={repeatName}
             onChange={(e) => {

package/ui/Model/index_.tsx

@@ -1,17 +1,44 @@
 import { lazy } from "akanjs/webkit";
 
-export const ViewModal = lazy(() => import("./ViewModal"));
-export const EditModal = lazy(() => import("./EditModal"));
-export const View = lazy(() => import("./View"));
-export const SureToRemove = lazy(() => import("./SureToRemove"));
-export const Remove = lazy(() => import("./Remove"));
-export const NewWrapper = lazy(() => import("./NewWrapper"));
-export const EditWrapper = lazy(() => import("./EditWrapper"));
-export const RemoveWrapper = lazy(() => import("./RemoveWrapper"));
-export const LoadInit = lazy(() => import("./LoadInit"));
-export const LoadView = lazy(() => import("./LoadView"));
-export const ViewWrapper = lazy(() => import("./ViewWrapper"));
-export const ViewEditModal = lazy(() => import("./ViewEditModal"));
-export const Edit = lazy(() => import("./Edit"));
-export const New = lazy(() => import("./New"));
-export const AdminPanel = lazy(() => import("./AdminPanel"));
+/**
+ * Every Model export carries its own Suspense boundary.
+ *
+ * These mount on interaction — a modal body, a dropdown item, a confirm shell — long after the page is
+ * painted, and a chunk that resolves then would otherwise suspend all the way to the route and repaint
+ * the page as its loading fallback, once per fresh load.
+ */
+const withSuspense = { suspense: true } as const;
+
+/**
+ * A fallback here may only be a host element. This module has no `"use client"`, so a client component
+ * referenced from it — `Loading.Skeleton` was the one tried — resolves to `undefined` inside the thunk
+ * and the render throws "Element type is invalid", taking the whole page segment under the layout with
+ * it. Marking the barrel `"use client"` is worse: `Model.*` becomes a real server→client boundary and
+ * apps passing crystalized model instances as props fail serialization at boot. Plain markup crosses
+ * neither line.
+ *
+ * Only the two exports that occupy space of their own get it. The triggers wrap the caller's own
+ * children, so a fixed block would put a slab where a small button belongs, and the modals render `null`
+ * until opened, so a block would appear where nothing ever shows. For those the collapse is a blink the
+ * size of a button; here it is the page body dropping to zero height and snapping back.
+ */
+const bodyFallback = {
+  suspense: true,
+  loading: () => <div className="min-h-40 w-full animate-pulse rounded-md bg-muted" />,
+} as const;
+
+export const ViewModal = lazy(() => import("./ViewModal"), withSuspense);
+export const EditModal = lazy(() => import("./EditModal"), withSuspense);
+export const View = lazy(() => import("./View"), bodyFallback);
+export const SureToRemove = lazy(() => import("./SureToRemove"), withSuspense);
+export const Remove = lazy(() => import("./Remove"), withSuspense);
+export const NewWrapper = lazy(() => import("./NewWrapper"), withSuspense);
+export const EditWrapper = lazy(() => import("./EditWrapper"), withSuspense);
+export const RemoveWrapper = lazy(() => import("./RemoveWrapper"), withSuspense);
+export const LoadInit = lazy(() => import("./LoadInit"), withSuspense);
+export const LoadView = lazy(() => import("./LoadView"), withSuspense);
+export const ViewWrapper = lazy(() => import("./ViewWrapper"), withSuspense);
+export const ViewEditModal = lazy(() => import("./ViewEditModal"), withSuspense);
+export const Edit = lazy(() => import("./Edit"), withSuspense);
+export const New = lazy(() => import("./New"), withSuspense);
+export const AdminPanel = lazy(() => import("./AdminPanel"), bodyFallback);

package/ui/ObjectId.tsx

@@ -4,6 +4,7 @@ import { AiOutlineCheck, AiOutlineCopy } from "react-icons/ai";
 
 import { buttonRecipe } from "./Button";
 import { Tooltip } from "./Tooltip";
+import { useUiRecipe } from "./UiOverride";
 
 interface ObjectIdProps {
   id: string;
@@ -11,6 +12,7 @@ interface ObjectIdProps {
 
 export const ObjectId = ({ id }: ObjectIdProps) => {
   const [isCopied, setIsCopied] = useState(false);
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   const shortenedId = `${id.substring(0, 4)}...${id.substring(id.length - 5)}`;
   const handleCopyClick = () => {
     void navigator.clipboard.writeText(id);
@@ -24,10 +26,7 @@ export const ObjectId = ({ id }: ObjectIdProps) => {
       <Tooltip content={id} variant="primary">
         <div className="font-semibold text-xs">{shortenedId}</div>
       </Tooltip>
-      <button
-        className={buttonRecipe({ variant: "ghost", size: "icon" }, "size-6 rounded-full")}
-        onClick={handleCopyClick}
-      >
+      <button className={recipe({ variant: "ghost", size: "icon" }, "size-6 rounded-full")} onClick={handleCopyClick}>
         {isCopied ? <AiOutlineCheck /> : <AiOutlineCopy />}
       </button>
     </div>

package/ui/Pagination.tsx

@@ -4,10 +4,7 @@ import type { FC, ReactNode } from "react";
 import { BiChevronLeft, BiChevronRight, BiDotsHorizontalRounded } from "react-icons/bi";
 
 import { buttonRecipe } from "./Button";
-import { createOverridable } from "./UiOverride";
-
-/** Square ghost button style shared by every pager control (canonical buttonRecipe). */
-const pageBtn = buttonRecipe({ variant: "ghost", size: "icon" });
+import { createOverridable, useUiRecipe } from "./UiOverride";
 
 export interface PaginationProps {
   /** Current 1-based page number. */
@@ -36,6 +33,8 @@ export const DefaultPagination: FC<PaginationProps> = ({
   renderEmpty,
   classNames,
 }) => {
+  
+  const pageBtn = (useUiRecipe("button") ?? buttonRecipe)({ variant: "ghost", size: "icon" });
   const totalPages = Math.ceil(total / (itemsPerPage || 1));
   const handleLeftClick = () => {
     if (currentPage <= 1) return;

package/ui/Popconfirm.tsx

@@ -2,11 +2,12 @@
 import { useSpring } from "@react-spring/web";
 
 import { cn, usePage } from "akanjs/client";
+import { useEscapeKey } from "akanjs/webkit";
 import { type ButtonHTMLAttributes, type ReactNode, useEffect, useState } from "react";
 import { BiMessageRoundedError } from "react-icons/bi";
 import { animated } from "./animated";
 import { buttonRecipe } from "./Button";
-import { createOverridable } from "./UiOverride";
+import { createOverridable, useUiRecipe } from "./UiOverride";
 
 type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   loading?: boolean;
@@ -48,6 +49,8 @@ export const DefaultPopconfirm = ({
   decoClassName,
 }: PopconfirmProps) => {
   const { l } = usePage();
+  
+  const recipe = useUiRecipe("button") ?? buttonRecipe;
   const [isConfirming, setIsConfirming] = useState(false);
 
   const popconfirmProps = useSpring({
@@ -82,6 +85,8 @@ export const DefaultPopconfirm = ({
     setIsConfirming(false);
   };
 
+  useEscapeKey(isConfirming, handleCancel);
+
   return (
     <>
       <div className="relative inline-block">
@@ -115,17 +120,13 @@ export const DefaultPopconfirm = ({
             </div>
             <div className="flex justify-end gap-2">
               <button
-                className={buttonRecipe({ variant: "outline", size: "xs" })}
+                className={recipe({ variant: "outline", size: "xs" })}
                 onClick={handleCancel}
                 {...cancelButtonProps}
               >
                 {cancelText ?? l("base.cancel")}
               </button>
-              <button
-                className={buttonRecipe({ variant: "primary", size: "xs" })}
-                onClick={handleConfirm}
-                {...okButtonProps}
-              >
+              <button className={recipe({ variant: "primary", size: "xs" })} onClick={handleConfirm} {...okButtonProps}>
                 {okText ?? l("base.ok")}
               </button>
             </div>

package/ui/Select.tsx

@@ -7,6 +7,7 @@ import { BiCheck, BiChevronDown, BiX } from "react-icons/bi";
 import { BsQuestionCircleFill } from "react-icons/bs";
 import { TiDelete } from "react-icons/ti";
 
+import { agentAttrs } from "./agentAttrs";
 import { useUiOverride } from "./UiOverride";
 
 interface LabelOption<T> {
@@ -164,7 +165,7 @@ const DefaultSelect = <
   }, [value]);
 
   return (
-    <div className={cn("relative min-w-[150px]", className)} ref={dropdownRef}>
+    <div {...agentAttrs(onChange)} className={cn("relative min-w-[150px]", className)} ref={dropdownRef}>
       <div
         data-open={isOpen}
         className={cn(
@@ -217,7 +218,7 @@ const DefaultSelect = <
           {searchable ? (
             <input
               type="text"
-              className="input w-full flex-1 border-none bg-transparent shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none"
+              className="w-full flex-1 border-none bg-transparent shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none"
               placeholder={selectedValues.length > 0 ? "" : placeholder}
               value={searchText}
               onChange={(e) => {
@@ -262,8 +263,9 @@ const DefaultSelect = <
       <div
         data-open={isOpen}
         className={cn(
-          "scrollbar-thin scrollbar-thumb-foreground/20 scrollbar-track scrollbar-track-foreground/40 absolute z-20 mt-0.5 w-full overflow-y-scroll rounded-md border-border bg-muted shadow-lg transition-all",
-          "origin-center duration-200 data-[open=false]:h-0 data-[open=true]:h-[270px] data-[open=true]:border data-[open=false]:border-none",
+          "scrollbar-thin scrollbar-thumb-foreground/20 scrollbar-track scrollbar-track-foreground/40 absolute z-20 mt-0.5 w-full overflow-y-auto rounded-md border-border bg-muted shadow-lg transition-all",
+
+          "origin-center duration-200 data-[open=false]:max-h-0 data-[open=true]:max-h-[270px] data-[open=true]:border data-[open=false]:border-none",
           selectorClassName,
         )}
       >

package/ui/Signal/RestApi.tsx

@@ -1,12 +1,14 @@
 "use client";
 import { PrimitiveRegistry } from "akanjs/base";
 import { usePage } from "akanjs/client";
+import { mcpHintsOf, mcpRefusalOf } from "akanjs/common";
 import { type ConstantCls, ConstantRegistry } from "akanjs/constant";
 import { FetchClient, type FetchProxy } from "akanjs/fetch";
 import type { SerializedEndpoint } from "akanjs/signal";
 import { st } from "akanjs/store";
 import { useMemo, useState } from "react";
 import { AiOutlineApi, AiOutlineCopy, AiOutlineFileWord, AiOutlineSend } from "react-icons/ai";
+import { badgeRecipe } from "../Badge";
 import { buttonRecipe } from "../Button";
 import { Copy } from "../Copy";
 import { Signal } from ".";
@@ -14,7 +16,7 @@ import Arg from "./Arg";
 import { SignalCollapse } from "./Collapse";
 import { getExampleData } from "./makeExample";
 import Response from "./Response";
-import { getEndpointBadgeClassName, getGuardBadgeClassName, signalUi } from "./style";
+import { getEndpointBadgeClassName, getGuardBadgeClassName, getMcpBadgeClassName, signalUi } from "./style";
 
 type RestApiFetchFn = (
   ...args: [...args: unknown[], option: { token?: string; crystalize?: boolean }]
@@ -36,17 +38,21 @@ const RestApiEndpoints = ({ refName, fetch, prefix, endpoints, openAll, httpUri
   const tryRoles = st.use.tryRoles();
   const signal = fetch.serializedSignal[refName];
   const signalPrefix = prefix ?? signal.prefix;
-  const baseEndpointEntries = Object.entries(FetchClient.getBaseEndpoint(refName, signal));
-  const sliceEndpointEntries = signal.slice
-    ? Object.entries(signal.slice).flatMap(([suffix, slice]) => {
-        const endpoint = FetchClient.getEndpointFromSlice(refName, suffix, slice);
-        return Object.entries(endpoint);
-      })
-    : [];
-  const endpointEntries = [...baseEndpointEntries, ...sliceEndpointEntries, ...Object.entries(signal.endpoint)]
-    .filter(([key, endpoint]) => !endpoints || endpoints.includes(key))
-    .sort(([keyA], [keyB]) => (keyA > keyB ? 1 : -1))
-    .filter(([key, endpoint]) => {
+  const baseEndpointEntries = Object.entries(FetchClient.getBaseEndpoint(refName, signal)).map(([key, endpoint]) => ({
+    key,
+    endpoint,
+  }));
+  const sliceEndpointEntries = Object.entries(signal.slice ?? {}).flatMap(([suffix, slice]) =>
+    Object.entries(FetchClient.getEndpointFromSlice(refName, suffix, slice)).map(([key, endpoint]) => ({
+      key,
+      endpoint,
+    })),
+  );
+  const customEndpointEntries = Object.entries(signal.endpoint).map(([key, endpoint]) => ({ key, endpoint }));
+  const endpointEntries = [...baseEndpointEntries, ...sliceEndpointEntries, ...customEndpointEntries]
+    .filter(({ key }) => !endpoints || endpoints.includes(key))
+    .sort((a, b) => (a.key > b.key ? 1 : -1))
+    .filter(({ endpoint }) => {
       if (endpoint.type === "pubsub" || endpoint.type === "message") return false;
       if (!endpoint.guards?.length) return true;
       if (endpoint.guards?.includes("Public") && tryRoles.includes("Public")) return true;
@@ -63,13 +69,13 @@ const RestApiEndpoints = ({ refName, fetch, prefix, endpoints, openAll, httpUri
     });
   return (
     <div>
-      {endpointEntries.map(([endpointKey, endpoint], idx) => (
+      {endpointEntries.map(({ key, endpoint }) => (
         <RestApiEndpoint
-          key={endpointKey}
+          key={key}
           signalPrefix={signalPrefix}
           refName={refName}
           fetch={fetch}
-          endpointKey={endpointKey}
+          endpointKey={key}
           endpoint={endpoint}
           open={openAll}
           httpUri={httpUri}
@@ -102,13 +108,20 @@ const RestApiEndpoint = ({
   const { l } = usePage();
   const [viewStatus, setViewStatus] = useState<"doc" | "test">("doc");
   const path = FetchClient.makeHttpUrl(endpointKey, endpoint, signalPrefix, new Map());
+
+  const mcpRefusal = mcpRefusalOf(endpoint);
   return (
     <SignalCollapse
       open={open}
       contentClassName="bg-background/60"
       summary={
         <div className="flex flex-wrap items-center gap-2">
-          <div className={getEndpointBadgeClassName(endpoint.type)}>{endpoint.type === "query" ? "GET" : "POST"}</div>
+          {/* Only a mutation is a POST — enumerate that side, because a `prompt` is a GET beside the queries and
+              a new read-shaped type would inherit the right verb rather than be mislabelled. */}
+          <div className={getEndpointBadgeClassName(endpoint.type)}>
+            {endpoint.type === "mutation" ? "POST" : "GET"}
+          </div>
+          <div className={getMcpBadgeClassName(!mcpRefusal)}>{mcpRefusal ? "MCP refused" : "MCP"}</div>
           <div className="font-bold text-lg">{path}</div>
           <div className="text-foreground/70 text-sm">{l._(`${refName}.signal.${endpointKey}`)}</div>
         </div>
@@ -127,6 +140,20 @@ const RestApiEndpoint = ({
               ))}
             </div>
           ) : null}
+          <div className="mt-2 flex flex-wrap items-center gap-2 font-normal text-sm">
+            <span className="text-foreground/70">MCP</span>
+            {mcpRefusal ? (
+              <span className="text-warning">{mcpRefusal}</span>
+            ) : (
+              Object.entries(mcpHintsOf(endpointKey, endpoint))
+                .filter(([, on]) => on)
+                .map(([hint]) => (
+                  <span className={badgeRecipe({ variant: "outline", size: "sm" })} key={hint}>
+                    {hint}
+                  </span>
+                ))
+            )}
+          </div>
           <div className="mt-2 font-normal text-foreground/70 text-sm">
             {l._(`${refName}.signal.${endpointKey}.desc`)}
           </div>

package/ui/Signal/WebSocket.tsx

@@ -18,7 +18,7 @@ const WebSocketEndpoints = ({ refName, fetch, openAll }: WebSocketEndpointsProps
   const endpointEntries = Object.entries(signal.endpoint)
     .sort(([keyA], [keyB]) => (keyA > keyB ? 1 : -1))
     .filter(([key, endpoint]) => {
-      if (endpoint.type === "query" || endpoint.type === "mutation") return false;
+      if (endpoint.type !== "pubsub" && endpoint.type !== "message") return false;
 
       return false;
     });

package/ui/Signal/style.ts

@@ -15,12 +15,17 @@ export const signalUi = {
     "min-h-[300px] w-full rounded-xl border border-border bg-background p-4 font-normal text-foreground text-sm",
 };
 
+/** Writes carry the accent, reads do not — so the two write types are named and everything else reads. */
 export const getEndpointBadgeClassName = (type: string) =>
-  badgeRecipe({ variant: type === "query" || type === "pubsub" ? "primary" : "secondary" });
+  badgeRecipe({ variant: type === "mutation" || type === "message" ? "secondary" : "primary" });
 
 export const getGuardBadgeClassName = (guard: string) =>
   badgeRecipe({ variant: guard === "Public" ? "primary" : guard === "None" ? "default" : "secondary" });
 
+/** Published to agents carries the accent; opted in and refused is outlined, because it is a thing to go fix. */
+export const getMcpBadgeClassName = (exposed: boolean) =>
+  badgeRecipe({ variant: exposed ? "accent" : "warning", size: "sm", outline: !exposed });
+
 export const getStatusBadgeClassName = (status: string) =>
   badgeRecipe({
     variant: status === "error" ? "error" : status === "success" || status === "listening" ? "primary" : "outline",

package/ui/Switch.tsx

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "akanjs/client";
 import { useState } from "react";
+import { agentAttrs } from "./agentAttrs";
 
 export interface SwitchProps {
   checked?: boolean;
@@ -36,6 +37,7 @@ export const Switch = ({
   const state = isChecked ? "checked" : "unchecked";
   return (
     <button
+      {...agentAttrs(onChange)}
       type="button"
       role="switch"
       aria-checked={isChecked}

package/ui/System/CSR.tsx

@@ -226,6 +226,7 @@ const CSRWrapper = ({
               : bottomInset?.containerStyle
           }
           animationDuration={frameLayout.keyboard.animationDuration}
+          animationEasing={frameLayout.keyboard.animationEasing}
         >
           <CSRFrameSlotTargets slot="keyboardInset" />
         </KeyboardLayer>
@@ -281,14 +282,17 @@ const KeyboardLayer = ({
   className,
   style,
   animationDuration,
+  animationEasing,
   children,
-}: FrameLayerProps & { animationDuration?: number }) => (
+}: FrameLayerProps & { animationDuration?: number; animationEasing?: string }) => (
   <animated.div
     id={id}
     className={className}
     style={{
       ...(style ?? {}),
-      transition: `top ${animationDuration ?? 285}ms ease-out, height ${animationDuration ?? 285}ms ease-out`,
+      transition: `top ${animationDuration ?? 420}ms ${animationEasing ?? "cubic-bezier(0.16, 1, 0.3, 1)"}, height ${
+        animationDuration ?? 420
+      }ms ${animationEasing ?? "cubic-bezier(0.16, 1, 0.3, 1)"}`,
       willChange: "top, height",
     }}
   >

package/ui/System/ThemeToggle.tsx

@@ -1,18 +1,35 @@
 "use client";
 
 import { setCookie } from "akanjs/client";
+import { st } from "akanjs/store";
 import { useCallback, useEffect, useState } from "react";
-
 import { buttonRecipe } from "../Button";
 import { Dropdown } from "../Dropdown";
 import { Switch } from "../Switch";
 
+interface ThemeAgentSurfaceProps {
+  themes: string[];
+  current?: string;
+  onApply: (theme: string) => void;
+}
+const ThemeAgentSurface = ({ themes, current, onApply }: ThemeAgentSurfaceProps) => {
+  st.expose("theme", current ?? null);
+  st.tool("setTheme", { desc: `Switch this page's color theme. One of: ${themes.join(", ")}.` })
+    .arg("theme", String)
+    .exec((theme) => {
+      if (!themes.includes(theme)) throw new Error(`Unknown theme "${theme}". One of: ${themes.join(", ")}.`);
+      onApply(theme);
+    });
+  return null;
+};
+
 export interface ThemeToggleProps {
   themes?: string[];
 }
 
 export const ThemeToggle = ({ themes }: ThemeToggleProps) => {
   const [theme, setTheme] = useState<string | undefined>(undefined);
+  const stTheme = st.use.theme();
   useEffect(() => {
     if (!themes) return;
     const currentTheme = document.documentElement.getAttribute("data-theme");
@@ -25,9 +42,11 @@ export const ThemeToggle = ({ themes }: ThemeToggleProps) => {
     setTheme(theme);
   }, []);
   if (!themes || themes.length <= 1) return null;
+  const agentSurface = <ThemeAgentSurface current={theme} onApply={applyTheme} themes={themes} />;
   if (themes.length === 2)
     return (
       <div className="flex items-center gap-1 text-foreground">
+        {agentSurface}
         <svg aria-label="sun" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="size-4">
           <g strokeLinejoin="round" strokeLinecap="round" strokeWidth="2" fill="none" stroke="currentColor">
             <circle cx="12" cy="12" r="4"></circle>
@@ -55,37 +74,40 @@ export const ThemeToggle = ({ themes }: ThemeToggleProps) => {
       </div>
     );
   return (
-    <Dropdown
-      className="mb-72"
-      buttonClassName="m-1"
-      value={
-        <>
-          Theme
-          <svg
-            width="12px"
-            height="12px"
-            className="inline-block h-2 w-2 fill-current opacity-60"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 2048 2048"
-          >
-            <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
-          </svg>
-        </>
-      }
-      dropdownClassName="w-52 bg-border"
-      content={themes.map((theme) => (
-        <li key={theme}>
-          <button
-            type="button"
-            className={buttonRecipe({ variant: "ghost", size: "sm" }, "w-full justify-start")}
-            onClick={() => {
-              applyTheme(theme);
-            }}
-          >
-            {theme}
-          </button>
-        </li>
-      ))}
-    />
+    <>
+      {agentSurface}
+      <Dropdown
+        className="mb-72"
+        buttonClassName="m-1"
+        value={
+          <>
+            Theme
+            <svg
+              width="12px"
+              height="12px"
+              className="inline-block h-2 w-2 fill-current opacity-60"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 2048 2048"
+            >
+              <path d="M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z"></path>
+            </svg>
+          </>
+        }
+        dropdownClassName="w-52 bg-border"
+        content={themes.map((theme) => (
+          <li key={theme}>
+            <button
+              type="button"
+              className={buttonRecipe({ variant: "ghost", size: "sm" }, "w-full justify-start")}
+              onClick={() => {
+                applyTheme(theme);
+              }}
+            >
+              {theme}
+            </button>
+          </li>
+        ))}
+      />
+    </>
   );
 };

package/ui/ToggleSelect.tsx

@@ -3,10 +3,9 @@ import { cn, usePage } from "akanjs/client";
 import { type ComponentType, createElement } from "react";
 
 import { buttonRecipe } from "./Button";
-import { createOverridable, useUiOverride } from "./UiOverride";
+import { createOverridable, useUiOverride, useUiRecipe } from "./UiOverride";
 
-/** Toggle-select cell: outline button, filled success when selected. */
-const toggleBtn = buttonRecipe({ variant: "outline", size: "sm" });
+/** Toggle-select cell: outline button (recipe slot), filled success when selected. */
 const selectedCls = "border-transparent bg-success/70 text-success-foreground hover:bg-success/70";
 
 export interface ToggleSelectProps<I extends string | number | boolean | null> {
@@ -30,6 +29,7 @@ const DefaultToggleSelect = <I extends string | number | boolean | null>({
   disabled,
 }: ToggleSelectProps<I>) => {
   const { l } = usePage();
+  const toggleBtn = (useUiRecipe("button") ?? buttonRecipe)({ variant: "outline", size: "sm" });
   const validateResult = value !== null ? validate(value) : false;
 
   const invalidMessage =
@@ -97,6 +97,7 @@ const DefaultMulti = ({
   disabled,
 }: MultiProps) => {
   const { l } = usePage();
+  const toggleBtn = (useUiRecipe("button") ?? buttonRecipe)({ variant: "outline", size: "sm" });
   const validateResult = validate(value);
 
   const invalidMessage =

package/ui/Tooltip.tsx

@@ -35,7 +35,8 @@ const sideClass = {
 const DefaultTooltip = ({ content, children, side = "top", className, variant = "default" }: TooltipProps) => {
   if (content === undefined || content === null || content === "") return <>{children}</>;
   return (
-    <span className="group/tooltip relative inline-flex">
+
+    <span className="group/tooltip relative inline-flex w-fit">
       {children}
       <span
         role="tooltip"

package/ui/UiOverride/context.ts

@@ -1,6 +1,7 @@
 "use client";
 import { type ComponentType, createContext } from "react";
 import type { ClassNameValue as ClassValue } from "tailwind-merge";
+import type { ChatProps as AgentChatProps } from "../Agent/Chat";
 import type { BadgeProps } from "../Badge";
 import type { ButtonProps } from "../Button";
 import type { DatePickerProps, RangePickerProps, TimePickerProps } from "../DatePicker";
@@ -17,7 +18,7 @@ import type { ModalProps } from "../Modal";
 import type { PaginationProps } from "../Pagination";
 import type { PopconfirmProps } from "../Popconfirm";
 import type { ItemProps as RadioItemProps, RadioProps } from "../Radio";
-import type { BadgeVariants, ButtonVariants } from "../recipe";
+import type { BadgeVariants, ButtonVariants, InputSurfaceVariants } from "../recipe";
 import type { SelectProps } from "../Select";
 import type { TableProps } from "../Table";
 import type { MultiProps as ToggleSelectMultiProps, ToggleSelectProps } from "../ToggleSelect";
@@ -48,6 +49,7 @@ export interface AkanUiOverrides {
   Menu: ComponentType<MenuProps>;
   Tooltip: ComponentType<TooltipProps>;
   Unauthorized: ComponentType<UnauthorizedProps>;
+  AgentChat: ComponentType<AgentChatProps>;
 
   Button: ComponentType<ButtonProps<unknown>>;
   Select: ComponentType<SelectProps<string | number | boolean | null | undefined>>;
@@ -87,11 +89,21 @@ export type AkanModalComponent = AkanUiOverrides["Modal"];
  * manifest: `override({ recipes: { button: neonButtonRecipe } })`. A recipe swap changes
  * only the className factory — the component's structure/behavior (async states, focus,
  * a11y) is untouched. Each replacement must accept the framework recipe's full variant
- * contract, so every call site keeps working.
+ * contract, so every call site keeps working (a replacement with *extra* optional axes is
+ * assignable — contravariance — but those axes are only reachable from code that knows the
+ * replacement's own type).
+ *
+ * Scope: a recipe slot is a **client-side, route-scoped restyle**. It reaches framework
+ * client components, which resolve through `useUiRecipe(...)`. It never reaches a raw
+ * `xRecipe(...)` call in app JSX (statically imported — no context), nor server components
+ * (`Unit`/`View`), which intentionally render the canonical framework recipe. Extending the
+ * *vocabulary* is not this slot's job: add the axis to the framework recipe, or author an
+ * app recipe in `apps/<app>/ui/Recipe/`.
  */
 export interface AkanUiRecipes {
   button: (variants?: ButtonVariants, className?: ClassValue) => string;
   badge: (variants?: BadgeVariants, className?: ClassValue) => string;
+  input: (variants?: InputSurfaceVariants, className?: ClassValue) => string;
 }
 
 /** Shape of an `_overrides.tsx` manifest: component slots plus an optional recipe-slot map. */

package/ui/agentAttrs.ts

@@ -0,0 +1,19 @@
+import { actionTagOf } from "akanjs/store";
+
+/**
+ * The `data-akan-*` attributes for a handler the caller passed by reference.
+ *
+ * `{}` when the handler is an inline arrow, which is the honest answer: a closure the caller wrote says nothing
+ * about what it does, and a guessed annotation is worse than none. The house form for a model field is the setter
+ * itself (`onChange={st.do.setNameOnUser}`), so the fields that matter are annotated without an app writing anything.
+ *
+ * What it buys, beyond an in-page agent: an accessibility tree and E2E selectors that name the action rather than a
+ * class, and an external browser agent — one this framework has no bridge into — reading the same names.
+ */
+export const agentAttrs = (
+  handler: unknown,
+): { "data-akan-action"?: string; "data-akan-state"?: string } | Record<string, never> => {
+  const tag = actionTagOf(handler);
+  if (!tag) return {};
+  return { "data-akan-action": tag.action, ...(tag.state ? { "data-akan-state": tag.state } : {}) };
+};