akanjs 3.0.0-alpha.25 → 3.0.0-alpha.26

package/client/clientRuntime.ts

@@ -47,6 +47,8 @@ type RuntimeFetch = typeof globalThis.fetch & {
   serializedSignal: Record<string, unknown>;
   setJwt: (jwt: string | null) => void;
   slice: Record<string, SliceMeta>;
+  /** Sort keys per model refName, registered from each serialized signal's filter. */
+  sortKeyMap?: Map<string, string[]>;
   ws: RuntimeWs;
   [key: string]: unknown;
 };

package/dictionary/base.dictionary.ts

@@ -89,6 +89,11 @@ export const baseDictionary = serviceDictionary(["en", "ko"])
     removeMsg: ["Are you sure to remove?", "정말로 삭제하시겠습니까?"],
     confirmMsg: ["Are you sure to {actionType}", "진행하시겠습니까? ({actionType})"],
     perPage: ["/page", "/페이지"],
+    refresh: ["Refresh", "새로고침"],
+    cardView: ["Card view", "카드 보기"],
+    tableView: ["Table view", "표 보기"],
+    exportCsv: ["Export CSV", "CSV 내보내기"],
+    exportJson: ["Export JSON", "JSON 내보내기"],
     actions: ["Actions", "작업"],
     new: ["New", "신규"],
     edit: ["Edit", "수정"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akanjs",
-  "version": "3.0.0-alpha.25",
+  "version": "3.0.0-alpha.26",
   "sourceType": "module",
   "type": "module",
   "publishConfig": {

package/signal/serializer/fetch.serializer.ts

@@ -1,6 +1,7 @@
 import { type Cls, ENDPOINT_META, PrimitiveRegistry, type PrimitiveScalar, SLICE_META } from "akanjs/base";
 import { Logger } from "akanjs/common";
 import { ConstantRegistry, type ConstantType } from "akanjs/constant";
+import { getFilterMeta } from "akanjs/document";
 import type { LiveRegistry } from "akanjs/service";
 import type {
   ArgInfo,
@@ -90,9 +91,12 @@ export class FetchSerializer {
     for (const [key, endpointInfo] of Object.entries(endpointMeta)) {
       endpoint[key] = FetchSerializer.#serializeEndpoint(endpointInfo);
     }
+
+    const sortKeys = Object.keys(getFilterMeta(sliceCls.srv.db.filter, { allowEmpty: true })?.sort ?? {});
     return {
       ...(prefix ? { prefix } : {}),
       ...(Object.keys(slice).length ? { slice } : {}),
+      ...(sortKeys.length ? { filter: { filter: {}, sortKeys } } : {}),
       ...(sliceCls.getGuards.filter((g) => g.name !== "None").length
         ? { getGuards: sliceCls.getGuards.map((g) => g.name) }
         : {}),

package/store/agent/AgentContext.ts

@@ -8,8 +8,8 @@ import { ensureStoreSurface } from "./storeSurface";
  * The akan default context for a turn: where the user is (route), what is on screen (scopes and their curated
  * resources), and which store keys the mounted components are reading (live keys). Live entries carry names and
  * small primitives only — anything bigger is one `readState` call away, masked — so the block cannot bloat with
- * what happens to be in the store. Base-store keys are excluded by the base store's own `agent: false`
- * declaration, and the route block carries the three of them that matter.
+ * what happens to be in the store. Base-store plumbing is kept off the surface by `st.use.x({ agent: false })`
+ * at each call site, and the route block carries the three of them that matter.
  */
 export class AgentContext {
   static of(): AgentContext {

package/store/agent/StoreCatalogue.ts

@@ -1,10 +1,9 @@
-import { type Cls, STATE_META } from "akanjs/base";
+import type { Cls } from "akanjs/base";
 import { ConstantRegistry } from "akanjs/constant";
 import type { AgentRefusal } from "akanjs/signal";
 import { databaseStateModelTypes, databaseStateNames } from "../databaseStateNames";
 import type { SliceStateKey } from "../state";
 import type { StoreInstance } from "../storeInstance";
-import { StoreRegistry } from "../storeRegistry";
 import type { SerializedStoreState } from "./types";
 
 /** Which of the model's classes each slice state key holds. The rest hold a primitive or a query descriptor. */
@@ -26,7 +25,7 @@ const sliceStateModelTypes: { [key in SliceStateKey]?: SerializedStoreState["mod
  *
  * Reads stay store-derived because a read has to be masked and only the store declares which model masks it. Which
  * of these keys is readable at a given moment is liveness rather than this catalogue — the keys the mounted
- * components subscribe. The framework's own store is the one thing held back whatever subscribes it.
+ * components subscribe. Plumbing in the base store opts out at the call site with `{ agent: false }`.
  *
  * It is derived on the client rather than shipped from the server: the store classes are in the bundle already,
  * and a second copy over the wire is a second thing to keep in step.
@@ -42,30 +41,10 @@ export class StoreCatalogue {
     this.state = this.#state();
   }
 
-  /**
-   * The framework's own store keys, held back however widely they are subscribed.
-   *
-   * `st.use.path()` and friends are read all over an app, so publishing them would put plumbing in the context
-   * block of nearly every screen — and `tryJwt` / `tryAccount` hold the caller's credential and are genuinely
-   * subscribed (the API explorer's `Doc` and `RestApi` both read them), so a screen reading one must not be able
-   * to hand it to a model. The route context block carries the three of these an agent legitimately needs. This
-   * is a fixed rule rather than a declaration a store makes, because forgetting it leaks a credential.
-   */
-  static #frameworkKeys() {
-    return new Set(Object.keys(StoreRegistry.get("base")?.[STATE_META] ?? {}));
-  }
-
   #state(): { [key: string]: SerializedStoreState } {
     const state = this.#instance.get();
     const declared = StoreCatalogue.#declaredStateModels();
-    const framework = StoreCatalogue.#frameworkKeys();
-    if (framework.size)
-      this.refusals.push({
-        key: "base",
-        reason: "the framework's own store: routing plumbing an agent cannot act on, and the caller's credential.",
-      });
     const entries = Object.keys(state)
-      .filter((key) => !framework.has(key))
       .sort()
       .map((key): [string, SerializedStoreState] => {
         const role = this.#instance.sliceStateRoles.get(key);

package/types/client/clientRuntime.d.ts

@@ -39,6 +39,8 @@ type RuntimeFetch = typeof globalThis.fetch & {
     serializedSignal: Record<string, unknown>;
     setJwt: (jwt: string | null) => void;
     slice: Record<string, SliceMeta>;
+    /** Sort keys per model refName, registered from each serialized signal's filter. */
+    sortKeyMap?: Map<string, string[]>;
     ws: RuntimeWs;
     [key: string]: unknown;
 };

package/types/dictionary/base.dictionary.d.ts

@@ -1 +1 @@
-export declare const baseDictionary: import("./dictInfo.d.ts").ServiceDictInfo<[string, string], "ping" | "pingBody" | "pingParam" | "pingQuery" | "wsPing" | "pubsubPing", never, "error" | "remove" | "save" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "actions" | "edit" | "view">;
+export declare const baseDictionary: import("./dictInfo.d.ts").ServiceDictInfo<[string, string], "ping" | "pingBody" | "pingParam" | "pingQuery" | "wsPing" | "pubsubPing", never, "error" | "remove" | "save" | "refresh" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "cardView" | "tableView" | "exportCsv" | "exportJson" | "actions" | "edit" | "view">;

package/types/dictionary/dictionary.d.ts

@@ -1,13 +1,13 @@
 import type { AgentEndpoint, AgentTurn, BaseEndpoint } from "akanjs/signal";
 export declare const dictionary: {
-    base: import("./locale.d.ts").DictModule<import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "actions" | "edit" | "view">, never>;
+    base: import("./locale.d.ts").DictModule<import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "refresh" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "cardView" | "tableView" | "exportCsv" | "exportJson" | "actions" | "edit" | "view">, never>;
     agentTurn: import("./locale.d.ts").DictModule<import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc`, never>;
     agent: import("./locale.d.ts").DictModule<import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, "agent.error.llmUnavailable" | "agent.error.deepseekRequestFailed">;
 };
-export declare const Err: import("./trans.d.ts").ErrConstructor<"agent.error.llmUnavailable" | "agent.error.deepseekRequestFailed">, translate: (lang: "en" | "ko" | "zhChs" | "zhCht" | "ja", key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, data?: import("./trans.d.ts").TranslationData) => string, msg: {
-    info: (key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, option?: import("./trans.d.ts").TransMessageOption) => void;
-    success: (key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, option?: import("./trans.d.ts").TransMessageOption) => void;
-    error: (key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, option?: import("./trans.d.ts").TransMessageOption) => void;
-    warning: (key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, option?: import("./trans.d.ts").TransMessageOption) => void;
-    loading: (key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, option?: import("./trans.d.ts").TransMessageOption) => void;
-}, getDictionary: (lang: "en" | "ko" | "zhChs" | "zhCht" | "ja") => object, getAllDictionary: () => import("./trans.d.ts").RootDictionary, __Dict_Key__: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, __Error_Key__: "agent.error.llmUnavailable" | "agent.error.deepseekRequestFailed";
+export declare const Err: import("./trans.d.ts").ErrConstructor<"agent.error.llmUnavailable" | "agent.error.deepseekRequestFailed">, translate: (lang: "en" | "ko" | "zhChs" | "zhCht" | "ja", key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "refresh" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "cardView" | "tableView" | "exportCsv" | "exportJson" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, data?: import("./trans.d.ts").TranslationData) => string, msg: {
+    info: (key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "refresh" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "cardView" | "tableView" | "exportCsv" | "exportJson" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, option?: import("./trans.d.ts").TransMessageOption) => void;
+    success: (key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "refresh" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "cardView" | "tableView" | "exportCsv" | "exportJson" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, option?: import("./trans.d.ts").TransMessageOption) => void;
+    error: (key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "refresh" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "cardView" | "tableView" | "exportCsv" | "exportJson" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, option?: import("./trans.d.ts").TransMessageOption) => void;
+    warning: (key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "refresh" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "cardView" | "tableView" | "exportCsv" | "exportJson" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, option?: import("./trans.d.ts").TransMessageOption) => void;
+    loading: (key: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "refresh" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "cardView" | "tableView" | "exportCsv" | "exportJson" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, option?: import("./trans.d.ts").TransMessageOption) => void;
+}, getDictionary: (lang: "en" | "ko" | "zhChs" | "zhCht" | "ja") => object, getAllDictionary: () => import("./trans.d.ts").RootDictionary, __Dict_Key__: import("./locale.d.ts").ServiceTranslatorKey<"base", BaseEndpoint, "error" | "remove" | "save" | "refresh" | "password" | "stop" | "send" | "agent" | "ok" | "connecting" | "new" | "somethingWrong" | "connected" | "serverDisconnected" | "refreshing" | "tryReconnecting" | "serverHasProblem" | "checkServerStatus" | "success" | "failed" | "processing" | "processed" | "noData" | "invalidValueError" | "emailInvalidError" | "phoneInvalidError" | "cancel" | "unauthorized" | "agentIntro" | "agentPlaceholder" | "agentClear" | "approve" | "decline" | "confirmClose" | "textTooShortError" | "textTooLongError" | "selectTooShortError" | "selectTooLongError" | "numberTooSmallError" | "numberTooBigError" | "passwordNotMatchError" | "selectDateError" | "priceUnit" | "passwordConfirm" | "noOptions" | "addModel" | "createModel" | "createSuccess" | "updateModel" | "removeModel" | "updateSuccess" | "removeSuccess" | "sureToRemove" | "irreversibleOps" | "typeNameToRemove" | "yesRemove" | "removeMsg" | "confirmMsg" | "perPage" | "cardView" | "tableView" | "exportCsv" | "exportJson" | "actions" | "edit" | "view"> | import("./locale.d.ts").ScalarTranslatorKey<"agentTurn", AgentTurn, never> | `agentStop.${string}` | `agentStop.${string}.desc` | import("./locale.d.ts").ServiceTranslatorKey<"agent", AgentEndpoint, never>, __Error_Key__: "agent.error.llmUnavailable" | "agent.error.deepseekRequestFailed";

package/types/store/agent/AgentContext.d.ts

@@ -5,8 +5,8 @@ import type { AgentBridge } from "./AgentBridge.d.ts";
  * The akan default context for a turn: where the user is (route), what is on screen (scopes and their curated
  * resources), and which store keys the mounted components are reading (live keys). Live entries carry names and
  * small primitives only — anything bigger is one `readState` call away, masked — so the block cannot bloat with
- * what happens to be in the store. Base-store keys are excluded by the base store's own `agent: false`
- * declaration, and the route block carries the three of them that matter.
+ * what happens to be in the store. Base-store plumbing is kept off the surface by `st.use.x({ agent: false })`
+ * at each call site, and the route block carries the three of them that matter.
  */
 export declare class AgentContext {
     #private;

package/types/store/agent/StoreCatalogue.d.ts

@@ -11,7 +11,7 @@ import type { SerializedStoreState } from "./types.d.ts";
  *
  * Reads stay store-derived because a read has to be masked and only the store declares which model masks it. Which
  * of these keys is readable at a given moment is liveness rather than this catalogue — the keys the mounted
- * components subscribe. The framework's own store is the one thing held back whatever subscribes it.
+ * components subscribe. Plumbing in the base store opts out at the call site with `{ agent: false }`.
  *
  * It is derived on the client rather than shipped from the server: the store classes are in the bundle already,
  * and a second copy over the wire is a second thing to keep in step.

package/types/ui/Data/Dashboard.d.ts

@@ -3,9 +3,10 @@ export interface DashboardProps<T extends string, State> {
     className?: string;
     summary: Record<string, unknown>;
     slice: SliceMeta;
-    queryMap: Record<string, unknown>;
+    /** Columns that narrow the listing when clicked. A column absent from the map renders as a plain tile. */
+    queryMap?: Record<string, unknown>;
     columns?: string[];
     presents?: string[];
     hidePresents?: boolean;
 }
-export default function Dashboard<T extends string, State>({ className, summary, slice, queryMap, columns, presents, hidePresents, }: DashboardProps<T, State>): import("react/jsx-runtime").JSX.Element;
+export default function Dashboard<T extends string, State>({ className, summary, slice, queryMap, columns, presents, hidePresents, }: DashboardProps<T, State>): import("react/jsx-runtime").JSX.Element | null;

package/types/ui/Data/Insight.d.ts

@@ -5,5 +5,5 @@ interface InsightProps<T extends string, Insight> {
     slice: SliceMeta;
     columns?: (keyof Insight)[];
 }
-export default function Insight<T extends string, Insight>({ className, insight, slice, columns, }: InsightProps<T, Insight>): import("react/jsx-runtime").JSX.Element;
+export default function Insight<T extends string, Insight>({ className, insight, slice, columns, }: InsightProps<T, Insight>): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/types/ui/Data/ListContainer.d.ts

@@ -10,11 +10,11 @@ export interface ListContainerProps<T extends string, State, Input, Full extends
     className?: string;
     /** Additional classes for card-list rendering. */
     cardListClassName?: string;
-    /** Render as cards or table/list. */
+    /** Initial rendering mode. The toolbar toggle switches it from here. */
     type?: "card" | "list";
-    /** Static query object passed to the generated init action. */
+    /** Static query object passed as the first argument of the generated init action. */
     query?: Record<string, unknown>;
-    /** Initial fetch form/filter values. */
+    /** Initial fetch form: page, limit, sort, and the default values a new model starts from. */
     init?: FetchInitForm<Input, any>;
     /** Generated slice metadata for the target model. */
     slice: SliceMeta;

package/types/ui/Data/dataExport.d.ts

@@ -0,0 +1,5 @@
+import type { DataColumn } from "akanjs/client";
+export declare const columnKey: (column: DataColumn<any>) => string;
+export declare const toCsvBlob: (columns: DataColumn<any>[], models: Record<string, unknown>[], title: (column: DataColumn<any>) => string) => Blob;
+export declare const toJsonBlob: (models: unknown[]) => Blob;
+export declare const downloadBlob: (blob: Blob, filename: string) => void;

package/types/ui/Data/dataText.d.ts

@@ -0,0 +1,6 @@
+export declare const humanize: (name: string) => string;
+/** A dictionary miss returns the key itself (`makeTrans`), so a raw `user.insight.count` would ship as the label. */
+export declare const dictLabel: (translate: (key: string) => string, key: string, name: string) => string;
+/** A column with no renderer still has to print something a React child accepts, objects and arrays included. */
+export declare const formatCell: (value: unknown) => string;
+export declare const formatStat: (value: unknown) => string;

package/types/ui/Model/AdminPanel.d.ts

@@ -6,6 +6,7 @@ interface AdminPanelProps<T extends string, State, Input, Full extends {
     id: string;
 }> extends ListContainerProps<T, State, Input, Full, Light> {
     slice: SliceMeta;
+    /** Generated `<Model>.Unit` / `.Template` / `.View` namespaces. A role without a `General` export is skipped. */
     components: {
         Template: {
             [key: string]: any;
@@ -17,15 +18,18 @@ interface AdminPanelProps<T extends string, State, Input, Full extends {
             [key: string]: any;
         };
     };
+    /** Summary column to query descriptor. Only a column this map names becomes a link to its filtered listing. */
     queryMap?: {
-        [key: string]: any;
+        [key: string]: unknown;
     };
+    /** Keys of the app's `summary` state shown as dashboard tiles above the list. */
     summaryColumns?: string[];
+    /** Model insight keys shown above the list. The header already carries the total count. */
     insightColumns?: string[];
 }
 export default function AdminPanel<RefName extends string, State, Input, Full extends {
     id: string;
 }, Light extends {
     id: string;
-}>({ slice, components, summaryColumns, insightColumns, renderInsight, renderDashboard, ...props }: AdminPanelProps<RefName, State, Input, Full, Light>): import("react/jsx-runtime").JSX.Element;
+}>({ slice, components, queryMap, summaryColumns, insightColumns, renderInsight, renderDashboard, ...props }: AdminPanelProps<RefName, State, Input, Full, Light>): import("react/jsx-runtime").JSX.Element;
 export {};

package/ui/BottomSheet.tsx

@@ -23,7 +23,7 @@ export interface BottomSheetRef {
 export const BottomSheet = forwardRef<BottomSheetRef, BottomSheetProps>(
   ({ open, onCancel, type = "half", children }: BottomSheetProps, bottomSheetRef) => {
     const ref = useRef<HTMLDivElement>(null);
-    const pageState = st.use.pageState();
+    const pageState = st.use.pageState({ agent: false });
 
     const [{ y, opacity }, api] = useSpring(() => ({ y: window.innerHeight, opacity: 0 }));
 

package/ui/Data/CardList.tsx

@@ -6,11 +6,14 @@ import type { FilterInstance } from "akanjs/document";
 import type { FetchInitForm, SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
 import { type ReactNode, useEffect } from "react";
+import { Empty } from "../Empty";
 import { Loading } from "../Loading";
 import { Model } from "../Model";
 import DataItem from "./Item";
 import DataPagination from "./Pagination";
 
+const gridClassName = "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4";
+
 type DataItemProps<T extends string, M extends { id: string }, L extends { id: string }> = {
   [key in T]: L;
 } & { slice: SliceMeta };
@@ -86,14 +89,22 @@ export default function CardList<
   return (
     <div className={className}>
       {modelListLoading ? (
-        <div className={cn("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5", cardListClassName)}>
+        <div className={cn(gridClassName, cardListClassName)}>
           {new Array(limitOfModel || 20)
             .fill(0)
             .map((_, idx) => `skeleton-${idx}`)
-            .map((key) => (renderLoading ? renderLoading() : <Loading.Skeleton key={key} active />))}
+            .map((key) =>
+              renderLoading ? (
+                renderLoading()
+              ) : (
+                <Loading.Skeleton key={key} className="rounded-box border border-border bg-card p-4" active />
+              ),
+            )}
         </div>
+      ) : !modelList.length ? (
+        <Empty />
       ) : (
-        <div className={cn("grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 xl:grid-cols-5", cardListClassName)}>
+        <div className={cn(gridClassName, cardListClassName)}>
           {modelList.map((model, idx) => {
             return (
               <DataItem

package/ui/Data/Dashboard.tsx

@@ -1,22 +1,24 @@
 "use client";
 import { cn, usePage } from "akanjs/client";
-import { capitalize } from "akanjs/common";
 import type { SliceMeta } from "akanjs/fetch";
 import { st } from "akanjs/store";
 
-import { buttonRecipe } from "../Button";
 import { Link } from "../Link";
+import { dictLabel, formatStat } from "./dataText";
 
 export interface DashboardProps<T extends string, State> {
   className?: string;
   summary: Record<string, unknown>;
   slice: SliceMeta;
-  queryMap: Record<string, unknown>;
+  /** Columns that narrow the listing when clicked. A column absent from the map renders as a plain tile. */
+  queryMap?: Record<string, unknown>;
   columns?: string[];
   presents?: string[];
   hidePresents?: boolean;
 }
 
+const tileClassName = "flex min-w-40 flex-1 flex-col gap-1 rounded-box border px-4 py-3 text-left";
+
 export default function Dashboard<T extends string, State>({
   className,
   summary,
@@ -26,56 +28,38 @@ export default function Dashboard<T extends string, State>({
   presents,
   hidePresents,
 }: DashboardProps<T, State>) {
-  const { refName, sliceName } = slice;
+  const { refName } = slice;
   const { l } = usePage();
-  const searchParams = st.use.searchParams();
+  const searchParams = st.use.searchParams({ agent: false });
   const filter = Array.isArray(searchParams.filter) ? searchParams.filter[0] : searchParams.filter;
-  const [modelName, modelClassName] = [refName, capitalize(refName)];
-  const formatSummaryValue = (value: unknown) =>
-    typeof value === "number" || typeof value === "string" ? value.toLocaleString() : "";
+  const shownColumns = (columns ?? []).filter((column) => summary[column] !== undefined);
+  const shownPresents = hidePresents ? [] : (presents ?? []).filter((column) => summary[column] !== undefined);
+  if (!shownColumns.length && !shownPresents.length) return null;
   return (
-    <div className={cn("my-2 flex w-full flex-wrap justify-center py-0 shadow-sm", className)}>
-      <div className="flex flex-wrap">
-        {columns?.map(
-          (column) =>
-            summary[column] !== undefined &&
-            queryMap[column] !== undefined && (
-              <button
-                key={column}
-                className={buttonRecipe({ variant: "ghost" }, [
-                  "mx-1 h-32 w-48 rounded-none pt-3 hover:border",
-                  filter === column ? "border" : "border-0",
-                ])}
-              >
-                <Link
-                  key={column}
-                  className="flex flex-col gap-1"
-                  href={`/admin?topMenu=data&subMenu=${modelName}&filter=${column}`}
-                >
-                  <div className="text-foreground/60 text-xs">{l(`summary.${column}` as "base.new")}</div>
-                  <div className="font-semibold text-2xl text-primary">{formatSummaryValue(summary[column])}</div>
-                </Link>
-              </button>
-            ),
-        )}
-        {!hidePresents
-          ? presents?.map(
-              (column) =>
-                summary[column] !== undefined &&
-                queryMap[column] !== undefined && (
-                  <button
-                    key={column}
-                    className={buttonRecipe({ variant: "ghost" }, "mx-1 h-32 w-48 rounded-none border-none pt-3")}
-                  >
-                    <div className="flex flex-col gap-1">
-                      <div className="text-foreground/60 text-xs">{l(`summary.${column}` as "base.new")}</div>
-                      <div className="font-semibold text-2xl text-primary">{formatSummaryValue(summary[column])}</div>
-                    </div>
-                  </button>
-                ),
-            )
-          : null}
-      </div>
+    <div className={cn("mb-4 flex flex-wrap gap-2", className)}>
+      {[...shownColumns, ...shownPresents].map((column) => {
+        const linkable = queryMap?.[column] !== undefined;
+        return (
+          <Link
+            key={column}
+            disabled={!linkable}
+            href={`/admin?topMenu=data&subMenu=${refName}&filter=${column}`}
+            className={cn(
+              tileClassName,
+              "bg-card",
+              linkable && "transition hover:border-primary/50",
+              filter === column && linkable ? "border-primary" : "border-border",
+            )}
+          >
+            <span className="truncate text-muted-foreground text-xs">
+              {dictLabel(l._, `summary.${column}`, column)}
+            </span>
+            <span className="truncate font-semibold text-2xl text-primary tabular-nums">
+              {formatStat(summary[column])}
+            </span>
+          </Link>
+        );
+      })}
     </div>
   );
 }

package/ui/Data/Insight.tsx

@@ -2,6 +2,8 @@
 import { cn, usePage } from "akanjs/client";
 import type { SliceMeta } from "akanjs/fetch";
 
+import { dictLabel, formatStat } from "./dataText";
+
 interface InsightProps<T extends string, Insight> {
   className?: string;
   insight: Insight;
@@ -17,19 +19,23 @@ export default function Insight<T extends string, Insight>({
 }: InsightProps<T, Insight>) {
   const { l } = usePage();
   const { refName } = slice;
+  const cells = (columns ?? []).filter((column) => insight[column] !== undefined && insight[column] !== null);
+  if (!cells.length) return null;
   return (
-    <div className={cn("my-2 flex w-full flex-wrap justify-center py-2 shadow-sm", className)}>
-      <div className="flex flex-wrap">
-        {columns?.map(
-          (column: keyof Insight, idx) =>
-            insight[column] !== undefined && (
-              <div key={column.toString()} className="mx-1 flex items-center gap-2 rounded-none px-6 py-4">
-                <div className="text-foreground/60 text-xs">{l._(`${refName}.insight.${column as string}`)}</div>
-                <div className="font-semibold text-xl">{(insight[column] as string).toLocaleString()}</div>
-              </div>
-            ),
-        )}
-      </div>
+    <div className={cn("mb-4 grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-4", className)}>
+      {cells.map((column) => {
+        const name = String(column);
+        return (
+          <div key={name} className="rounded-box border border-border bg-card px-4 py-3">
+            <div className="truncate text-muted-foreground text-xs">
+              {dictLabel(l._, `${refName}.insight.${name}`, name)}
+            </div>
+            <div className="mt-1 truncate font-semibold text-foreground text-xl tabular-nums">
+              {formatStat(insight[column])}
+            </div>
+          </div>
+        );
+      })}
     </div>
   );
 }