akanjs 2.0.5 → 2.0.7

package/types/service/predefinedAdaptor/storage.adaptor.d.ts

@@ -15,6 +15,7 @@ export interface UploadRequest {
     };
     rename?: string;
     host?: string;
+    access?: "public" | "private";
 }
 export interface CopyRequest {
     bucket: string;
@@ -28,6 +29,7 @@ export interface UploadFromStreamRequest {
     body: ReadableStream;
     mimetype: string;
     root?: string;
+    access?: "public" | "private";
     updateProgress: (progress: {
         loaded?: number;
         total?: number;
@@ -49,15 +51,18 @@ export interface StorageAdaptor {
     saveData(request: DownloadRequest): Promise<LocalFilePath>;
     copyData(request: CopyRequest): Promise<string>;
     deleteData(url: string): Promise<boolean>;
+    deleteDataByPath(path: string): Promise<boolean>;
 }
 export interface BlobStorageOptions extends BaseEnv {
     blobStorage?: {
         baseDir?: string;
+        privateBaseDir?: string;
         urlPrefix?: string;
     };
 }
 declare const BlobStorage_base: import("..").AdaptorCls<{}, {
     root: import("..").InjectInfo<"env", string, BlobStorageOptions, never>;
+    privateRoot: import("..").InjectInfo<"env", string, BlobStorageOptions, never>;
     urlPrefix: import("..").InjectInfo<"env", string | undefined, BlobStorageOptions, never>;
 }>;
 export declare class BlobStorage extends BlobStorage_base implements StorageAdaptor {
@@ -65,10 +70,11 @@ export declare class BlobStorage extends BlobStorage_base implements StorageAdap
     readData(path: string): Promise<ReadableStream>;
     readDataAsJson<T>(path: string): Promise<T>;
     getDataList(prefix?: string): Promise<string[]>;
-    uploadDataFromLocal({ path, localPath, meta }: UploadRequest): Promise<string>;
-    uploadDataFromStream({ path, body, mimetype, updateProgress, uploadSuccess }: UploadFromStreamRequest): Promise<void>;
+    uploadDataFromLocal({ path, localPath, meta, access }: UploadRequest): Promise<string>;
+    uploadDataFromStream({ path, body, mimetype, updateProgress, uploadSuccess, access, }: UploadFromStreamRequest): Promise<void>;
     saveData({ path, localPath, renamePath }: DownloadRequest): Promise<LocalFilePath>;
     copyData({ copyPath, pastePath, host }: CopyRequest): Promise<string>;
+    deleteDataByPath(path: string): Promise<boolean>;
     deleteData(url: string): Promise<boolean>;
 }
 export {};

package/types/service/serviceModule.d.ts

@@ -17,7 +17,7 @@ export declare class ServiceModel<Srv extends ServiceCls = ServiceCls, CnstModel
     });
     static fromModel<Srv extends ServiceCls, CnstModel extends ConstantModel, DbModel extends DatabaseModel>(srv: Srv, cnst: CnstModel, db: DbModel): ServiceModel<Srv, CnstModel, DbModel>;
     static from<Srv extends ServiceCls>(srv: Srv): ServiceModel<Srv, never, never, { [K in `${Uncapitalize<Srv["refName"]>}Service`]: UnCls<Srv>; }>;
-    with<SrvModules extends ServiceModel[]>(...srvs: SrvModules): ServiceModel<Srv & MergeAllKeyOfObjects<SrvModules, "srv">, CnstModel, DbModel, SrvMap & MergeAllKeyOfObjects<SrvModules, "srvMap">>;
+    with<SrvModules extends ServiceModel[]>(...srvs: SrvModules): ServiceModel<Srv, CnstModel, DbModel, SrvMap & MergeAllKeyOfObjects<SrvModules, "srvMap">>;
     static getDefaultDbServiceMethods(className: string): {
         [x: string]: ((this: DatabaseService, query: QueryOf<any>, queryOption?: ListQueryOption) => Promise<any>) | ((this: DatabaseService, query: QueryOf<any>, queryOption?: FindQueryOption) => Promise<any>) | ((this: DatabaseService, type: SaveEventType, listener: (doc: Doc, type: CRUDEventType) => PromiseOrObject<void>) => any) | ((this: DatabaseService, id: string, data: DataInputOf) => Promise<any>);
         __get(this: DatabaseService, id: string): Promise<any>;

package/types/signal/index.d.ts

@@ -15,4 +15,5 @@ export * from "./signalContext.d.ts";
 export * from "./signalRegistry.d.ts";
 export * from "./slice.d.ts";
 export * from "./sliceInfo.d.ts";
+export * from "./trace.d.ts";
 export * from "./types.d.ts";

package/types/signal/signalContext.d.ts

@@ -3,6 +3,7 @@ import { type ConstantFieldTypeInput } from "akanjs/constant";
 import type { Adaptor, AdaptorCls, DatabaseService, InjectRegistry, LiveRegistry } from "akanjs/service";
 import type { Internal, InternalInfo, MiddlewareCls } from ".";
 import type { EndpointInfo } from "./endpointInfo.d.ts";
+import { SignalTrace } from "./trace.d.ts";
 export type SignalTransportType = "http" | "websocket";
 interface WebSocketRequest {
     ws: Bun.ServerWebSocket<unknown>;
@@ -19,6 +20,7 @@ export declare class SignalContext<Ctx extends HttpExecutionContext | WebSocketE
     adaptor: Adaptor;
     args: unknown[];
     internalArgs: unknown[];
+    trace: SignalTrace | null;
     constructor(key: string, reqOrWsReq: Bun.BunRequest | WebSocketRequest, { endpointInfo, adaptor, registry, env, live, middleware, }: {
         endpointInfo: EndpointInfo;
         adaptor: Adaptor;
@@ -48,6 +50,7 @@ export declare class SignalContext<Ctx extends HttpExecutionContext | WebSocketE
     getEnv(): Env;
 }
 export declare class HttpExecutionContext<Appended = unknown> {
+    #private;
     req: Bun.BunRequest & Appended;
     res: {
         new (body?: BodyInit | null, init?: ResponseInit): Response;
@@ -56,11 +59,11 @@ export declare class HttpExecutionContext<Appended = unknown> {
         json(data: any, init?: ResponseInit): Response;
         redirect(url: string | URL, status?: number): Response;
     };
-    url: URL;
     params: RuntimeRecord;
     searchParams: RuntimeRecord;
     body: RuntimeRecord;
     constructor(req: Bun.BunRequest);
+    get url(): URL;
     getArgs(endpointInfo: EndpointInfo): Promise<unknown[]>;
     makeResponse(result: unknown, endpointInfo: EndpointInfo): Response;
 }

package/types/signal/signalRegistry.d.ts

@@ -3,6 +3,14 @@ import type { InternalCls } from "./internal.d.ts";
 import type { ServerSignalCls } from "./serverSignal.d.ts";
 import type { SliceCls } from "./slice.d.ts";
 import type { SerializedSignal } from "./types.d.ts";
+type SignalBaseRef<SigCls> = SigCls extends {
+    srv: {
+        srv: {
+            refName: infer RefName;
+        };
+    };
+} ? RefName : never;
+type SignalWithBase<RefName extends string, SigCls> = SignalBaseRef<SigCls> extends RefName ? SigCls : never;
 export declare class DatabaseSignal<IntlCls extends InternalCls = InternalCls, EndpCls extends EndpointCls = EndpointCls, SlceCls extends SliceCls = SliceCls, SrvrCls extends ServerSignalCls = ServerSignalCls> {
     internal: IntlCls;
     endpoint: EndpCls;
@@ -21,8 +29,21 @@ export declare class ServiceSignal<IntlCls extends InternalCls = InternalCls, En
 /** Registry for database and service signals used by routing and fetch serialization. */
 export declare class SignalRegistry {
     #private;
-    static registerDatabase<IntlCls extends InternalCls, EndpCls extends EndpointCls, SlceCls extends SliceCls, SrvrCls extends ServerSignalCls>(internal: IntlCls, endpoint: EndpCls, slice: SlceCls, server: SrvrCls): DatabaseSignal<IntlCls, EndpCls, SlceCls, SrvrCls>;
-    static getDatabase(refName: string): DatabaseSignal<any, any, any, any> | undefined;
-    static registerService<IntlCls extends InternalCls, EndpCls extends EndpointCls, SrvrCls extends ServerSignalCls>(internal: IntlCls, endpoint: EndpCls, server: SrvrCls): ServiceSignal<IntlCls, EndpCls, SrvrCls>;
-    static getService(refName: string): ServiceSignal<any, any, any> | undefined;
+    static registerDatabase<RefName extends string, IntlCls extends InternalCls, EndpCls extends EndpointCls, SlceCls extends SliceCls, SrvrCls extends ServerSignalCls>(refName: RefName, internal: SignalWithBase<RefName, IntlCls>, endpoint: SignalWithBase<RefName, EndpCls>, slice: SignalWithBase<RefName, SlceCls>, server: SrvrCls): DatabaseSignal<IntlCls, EndpCls, SlceCls, SrvrCls>;
+    static getDatabase(refName: string): DatabaseSignal<InternalCls, EndpointCls<import("../service.d.ts").ServiceModel<import("../service.d.ts").ServiceCls, any, any, {
+        [x: `${Uncapitalize<string>}Service`]: import("../service.d.ts").ExtractInjectInfoObject<{}> & import("../service.d.ts").Service;
+    }>, {
+        [key: string]: import("./endpointInfo.d.ts").EndpointInfo<import("./endpointInfo.d.ts").EndpointType, {
+            [key: string]: any;
+        }, any, any, any, any, import("../constant.d.ts").ConstantFieldTypeInput, never, never, boolean>;
+    }>, SliceCls, ServerSignalCls> | undefined;
+    static registerService<RefName extends string, IntlCls extends InternalCls, EndpCls extends EndpointCls, SrvrCls extends ServerSignalCls>(refName: RefName, internal: SignalWithBase<RefName, IntlCls>, endpoint: SignalWithBase<RefName, EndpCls>, server: SrvrCls): ServiceSignal<IntlCls, EndpCls, SrvrCls>;
+    static getService(refName: string): ServiceSignal<InternalCls, EndpointCls<import("../service.d.ts").ServiceModel<import("../service.d.ts").ServiceCls, any, any, {
+        [x: `${Uncapitalize<string>}Service`]: import("../service.d.ts").ExtractInjectInfoObject<{}> & import("../service.d.ts").Service;
+    }>, {
+        [key: string]: import("./endpointInfo.d.ts").EndpointInfo<import("./endpointInfo.d.ts").EndpointType, {
+            [key: string]: any;
+        }, any, any, any, any, import("../constant.d.ts").ConstantFieldTypeInput, never, never, boolean>;
+    }>, ServerSignalCls> | undefined;
 }
+export {};

package/types/signal/trace.d.ts

@@ -0,0 +1,97 @@
+/** Whether request tracing is enabled. Cached after first read. */
+export declare const isTraceEnabled: () => boolean;
+/** Override the trace flag at runtime (tests / harness control). */
+export declare const setTraceEnabled: (enabled: boolean) => void;
+export interface SpanRecord {
+    name: string;
+    durationMs: number;
+}
+/** Per-request trace context. Threaded via {@link AsyncLocalStorage}. */
+export declare class SignalTrace {
+    #private;
+    readonly traceId: string;
+    readonly endpointKey: string;
+    readonly endpointType: string;
+    readonly startedAt: number;
+    readonly spans: SpanRecord[];
+    dbQueryCount: number;
+    dbQueryMs: number;
+    cacheHits: number;
+    cacheMisses: number;
+    dataLoaderBatchCount: number;
+    dataLoaderKeyCount: number;
+    constructor(endpointKey: string, endpointType: string);
+    recordSpan(name: string, durationMs: number): void;
+    countDbQuery(durationMs: number): void;
+    countCache(hit: boolean): void;
+    countDataLoaderBatch(keyCount: number): void;
+    finalize(): void;
+}
+export declare const getCurrentTrace: () => SignalTrace | undefined;
+/** Run `fn` with `trace` as the ambient request trace. */
+export declare const runWithTrace: <T>(trace: SignalTrace, fn: () => T) => T;
+/**
+ * Time an async stage under the current trace. When tracing is off (or no trace is
+ * active) this is a thin passthrough with no measurement overhead.
+ */
+export declare const traceSpan: <T>(name: string, fn: () => Promise<T>) => Promise<T>;
+/** Record a DB query duration against the current trace (no-op when untraced). */
+export declare const traceDbQuery: (durationMs: number) => void;
+/** Record a cache hit/miss against the current trace (no-op when untraced). */
+export declare const traceCache: (hit: boolean) => void;
+/** Record a DataLoader batch against the current trace (no-op when untraced). */
+export declare const traceDataLoaderBatch: (keyCount: number) => void;
+/**
+ * Process-wide aggregator. Keeps rolling per-endpoint, per-span statistics with a
+ * bounded sample ring per span so percentiles stay representative of steady state
+ * without unbounded memory growth.
+ */
+declare class TraceAggregator {
+    #private;
+    ingest(trace: SignalTrace): void;
+    reset(): void;
+    /** Summarized snapshot suitable for JSON exposure on the metrics endpoint. */
+    snapshot(): {
+        enabled: boolean;
+        endpoints: {
+            endpoint: string;
+            requests: number;
+            avgDbQueriesPerRequest: number;
+            avgDbQueryMsPerRequest: number;
+            cacheHitRatio: number | null;
+            avgDataLoaderBatchSize: number | null;
+            spans: {
+                name: string;
+                count: number;
+                meanMs: number;
+                p50Ms: number;
+                p95Ms: number;
+                p99Ms: number;
+                maxMs: number;
+            }[];
+        }[];
+    };
+}
+export declare const traceAggregator: TraceAggregator;
+/** Snapshot of all aggregated trace stats. Safe to call when tracing is disabled. */
+export declare const getTraceSnapshot: () => {
+    enabled: boolean;
+    endpoints: {
+        endpoint: string;
+        requests: number;
+        avgDbQueriesPerRequest: number;
+        avgDbQueryMsPerRequest: number;
+        cacheHitRatio: number | null;
+        avgDataLoaderBatchSize: number | null;
+        spans: {
+            name: string;
+            count: number;
+            meanMs: number;
+            p50Ms: number;
+            p95Ms: number;
+            p99Ms: number;
+            maxMs: number;
+        }[];
+    }[];
+};
+export {};

package/types/ui/Signal/style.d.ts

@@ -0,0 +1,15 @@
+export declare const signalUi: {
+    sectionTitle: string;
+    sectionDescription: string;
+    sectionPanel: string;
+    endpointCard: string;
+    endpointContent: string;
+    tablePanel: string;
+    inputRow: string;
+    inputLabel: string;
+    codePanel: string;
+};
+export declare const getEndpointBadgeClassName: (type: string) => "badge badge-primary" | "badge badge-secondary";
+export declare const getGuardBadgeClassName: (guard: string) => "badge badge-primary" | "badge badge-secondary" | "badge";
+export declare const getStatusBadgeClassName: (status: string) => "badge badge-outline" | "badge badge-primary" | "badge badge-error";
+export declare const getStatusTextareaClassName: (status: string) => "" | "border-error text-error" | "border-primary" | "textarea-disabled";

package/ui/Signal/Arg.tsx

@@ -9,6 +9,7 @@ import { AiOutlineDelete } from "react-icons/ai";
 import { DatePicker } from "../DatePicker";
 import { Input } from "../Input";
 import UiObject from "./Object";
+import { signalUi } from "./style";
 
 interface ArgProps {
   argType: DefaultPrimitiveName;
@@ -55,7 +56,7 @@ const ArgTable = ({ refName, endpointKey, args }: ArgTableProps) => {
   return (
     <table className="table">
       <thead>
-        <tr className="text-bold">
+        <tr>
           <th>Arg Key</th>
           <th className="text-center">Type</th>
           <th className="text-center">Enum</th>
@@ -69,7 +70,9 @@ const ArgTable = ({ refName, endpointKey, args }: ArgTableProps) => {
         return (
           <tbody className="font-normal" key={idx}>
             <tr>
-              <td>{arg.name}</td>
+              <td>
+                <div className="font-bold">{arg.name}</div>
+              </td>
               <td className="text-center">
                 <UiObject.Type objRef={argRef as ConstantCls} arrDepth={arg.arrDepth ?? 0} />
               </td>
@@ -84,7 +87,7 @@ const ArgTable = ({ refName, endpointKey, args }: ArgTableProps) => {
                           onClick={() => {
                             onCopy(opt.toString());
                           }}
-                          className="tooltip tooltip-primary btn btn-secondary btn-xs"
+                          className="tooltip tooltip-primary btn btn-outline btn-xs"
                         >
                           {opt}
                         </button>
@@ -95,8 +98,12 @@ const ArgTable = ({ refName, endpointKey, args }: ArgTableProps) => {
                   "-"
                 )}
               </td>
-              <td className="text-center">{l._(`${refName}.signal.${endpointKey}.arg.${arg.name}`)}</td>
-              <td className="text-center">{l._(`${refName}.signal.${endpointKey}.arg.${arg.name}.desc`)}</td>
+              <td className="text-center text-base-content/70">
+                {l._(`${refName}.signal.${endpointKey}.arg.${arg.name}`)}
+              </td>
+              <td className="text-center text-base-content/70">
+                {l._(`${refName}.signal.${endpointKey}.arg.${arg.name}.desc`)}
+              </td>
             </tr>
           </tbody>
         );
@@ -118,8 +125,8 @@ const ArgParam = ({ endpointKey, arg, value, onChange }: ArgParamProps) => {
   else if ((arg.arrDepth ?? 0) > 0) throw new Error(`Param arg - ${endpointKey}/${arg.name} must not be array`);
   const argType = PrimitiveRegistry.getName(argRef as typeof PrimitiveScalar) as DefaultPrimitiveName;
   return (
-    <div className="flex w-full items-center gap-2">
-      <div className="w-36 pl-2">- {arg.name}</div>
+    <div className={signalUi.inputRow}>
+      <div className={signalUi.inputLabel}>{arg.name}</div>
       <div className="w-full">
         <Arg argType={argType} value={value as string} onChange={onChange} />
       </div>
@@ -141,8 +148,8 @@ const ArgQuery = ({ endpointKey, arg, value, onChange }: ArgQueryProps) => {
     throw new Error(`Query arg - ${endpointKey}/${arg.name} must not be more than 2D array`);
   const argType = PrimitiveRegistry.getName(argRef as typeof PrimitiveScalar) as DefaultPrimitiveName;
   return (
-    <div className="flex items-center gap-2">
-      <div className="w-36 pl-2">- {arg.name}</div>
+    <div className={signalUi.inputRow}>
+      <div className={signalUi.inputLabel}>{arg.name}</div>
       <div className="w-full">
         {(arg.arrDepth ?? 0) > 0 && Array.isArray(value) ? (
           <div>
@@ -156,7 +163,7 @@ const ArgQuery = ({ endpointKey, arg, value, onChange }: ArgQueryProps) => {
                   }}
                 />
                 <button
-                  className="btn btn-sm btn-square"
+                  className="btn btn-outline btn-sm btn-square"
                   onClick={() => {
                     onChange([...(value.slice(0, idx) as string[]), ...(value.slice(idx + 1) as string[])]);
                   }}
@@ -166,7 +173,7 @@ const ArgQuery = ({ endpointKey, arg, value, onChange }: ArgQueryProps) => {
               </div>
             ))}
             <button
-              className="btn btn-sm"
+              className="btn btn-outline btn-sm"
               onClick={() => {
                 onChange([...(value as string[]), arg.example]);
               }}
@@ -195,8 +202,8 @@ const ArgFormData = ({ endpointKey, arg, value, onChange }: ArgFormDataProps) =>
     throw new Error(`FormData arg - ${endpointKey}/${arg.name} must be Upload`);
   else if ((arg.arrDepth ?? 0) < 1) throw new Error(`FormData arg - ${endpointKey}/${arg.name} must be array`);
   return (
-    <div className="flex w-full items-center gap-2">
-      <div className="w-36 pl-2">- {arg.name}</div>
+    <div className={signalUi.inputRow}>
+      <div className={signalUi.inputLabel}>{arg.name}</div>
       <div className="w-full">
         <Arg argType="Upload" value={value as FileList} onChange={onChange} />
       </div>
@@ -320,7 +327,7 @@ const ArgJson = ({ value, onChange }: ArgJsonProps) => {
     <Input.TextArea
       validate={(e) => true}
       className="w-full"
-      inputClassName="w-full min-h-[300px]"
+      inputClassName="w-full min-h-[300px] rounded-xl border border-base-300 bg-base-100"
       value={value}
       onPressEnter={(value) => {
         onChange(value);
@@ -342,7 +349,7 @@ const ArgUpload = ({ value, onChange }: ArgUploadProps) => {
     <input
       type="file"
       multiple
-      className="file-input w-full max-w-xs"
+      className="file-input file-input-bordered w-full max-w-xs"
       onChange={(e: ChangeEvent<HTMLInputElement>) => {
         onChange(new Array(e.target.files?.length).fill(0).map((_, idx) => e.target.files?.[idx]) as any as FileList);
       }}

package/ui/Signal/Doc.tsx

@@ -1,9 +1,8 @@
 "use client";
 import { fetch, usePage } from "akanjs/client";
-import { lowerlize } from "akanjs/common";
+import { decodeJwtPayload, lowerlize } from "akanjs/common";
 import { type Account, type FetchProxy, getDefaultAccount } from "akanjs/fetch";
 import { st } from "akanjs/store";
-import { jwtDecode } from "jwt-decode";
 import { type ReactNode, useEffect, useState } from "react";
 import { AiOutlineApi, AiOutlineCopy } from "react-icons/ai";
 import { BiLock } from "react-icons/bi";
@@ -11,6 +10,7 @@ import { Copy } from "../Copy";
 import { Input } from "../Input";
 import { Modal } from "../Modal";
 import RestApi from "./RestApi";
+import { signalUi } from "./style";
 import WebSocket from "./WebSocket";
 
 export default function Doc() {
@@ -27,7 +27,6 @@ const DocSetting = ({
   roleTypes = ["Public", "User", "Admin", "SuperAdmin"],
   roleKeys = { me: "Admin", self: "User" },
 }: DocSettingProps) => {
-  const trySignalType = st.use.trySignalType();
   const tryRoles = st.use.tryRoles();
   const tryAccount = st.use.tryAccount();
   useEffect(() => {
@@ -39,9 +38,9 @@ const DocSetting = ({
     .filter(([key, roleType]) => !!tryAccount[key as keyof typeof tryAccount])
     .map(([key, roleType]) => roleType);
   return (
-    <div className="flex w-full flex-wrap items-center justify-between gap-4">
-      <div className="flex flex-1 items-center gap-1">
-        BaseURL:{" "}
+    <div className="flex w-full flex-wrap items-center justify-between gap-3 rounded-xl bg-base-200 p-3">
+      <div className="flex flex-1 flex-wrap items-center gap-2">
+        <span className="font-semibold text-base-content/70 text-sm">BaseURL</span>
         <Copy text={baseUrl}>
           <button className="btn btn-outline btn-sm">
             {baseUrl}
@@ -49,10 +48,10 @@ const DocSetting = ({
           </button>
         </Copy>
       </div>
-      <div className="flex items-center gap-1">
-        Mode:
+      <div className="flex items-center gap-2">
+        <span className="font-semibold text-base-content/70 text-sm">Mode</span>
         <button
-          className="btn btn-sm btn-outline"
+          className="btn btn-primary btn-sm"
           onClick={() => {
             st.do.setTrySignalType("restapi");
           }}
@@ -61,8 +60,8 @@ const DocSetting = ({
           Rest API
         </button>
       </div>
-      <div className="flex items-center gap-0.5">
-        For:
+      <div className="flex flex-wrap items-center gap-1">
+        <span className="font-semibold text-base-content/70 text-sm">For</span>
         <button
           className={`btn btn-secondary btn-sm ${tryRoleForAll ? "" : "btn-outline"}`}
           onClick={() => {
@@ -85,10 +84,10 @@ const DocSetting = ({
           </button>
         ))}
       </div>
-      <div className="flex items-center gap-1">
-        Auth:
+      <div className="flex items-center gap-2">
+        <span className="font-semibold text-base-content/70 text-sm">Auth</span>
         <DocAuthModal>
-          <button className={`btn btn-sm ${currentRoles.length > 0 ? "btn-warning" : "btn-neutral"} `}>
+          <button className={`btn btn-sm ${currentRoles.length > 0 ? "btn-primary" : "btn-outline"} `}>
             <BiLock /> {currentRoles.length > 0 ? currentRoles.join(", ") : "Public"}
           </button>
         </DocAuthModal>
@@ -105,7 +104,7 @@ const DocAuthModal = ({ children }: DocAuthModalProps) => {
   const tryJwt = st.use.tryJwt();
   const [jwt, setJwt] = useState(tryJwt);
   const [modalOpen, setModalOpen] = useState(false);
-  const decodedAccount = jwt ? (jwtDecode as (jwt: string) => Account)(jwt) : null;
+  const decodedAccount = jwt ? decodeJwtPayload<Account>(jwt) : null;
   const accountStr = JSON.stringify(decodedAccount ?? getDefaultAccount(), null, 2);
   return (
     <>
@@ -141,11 +140,11 @@ const DocAuthModal = ({ children }: DocAuthModalProps) => {
         }
       >
         <div className="w-full">
-          <div>Current JWT</div>
+          <div className={signalUi.sectionTitle}>Current JWT</div>
           <Input inputClassName="w-full" value={jwt ?? ""} onChange={setJwt} validate={() => true} />
         </div>
         <div className="w-full">
-          <div className="flex items-center gap-2">Account Decoded</div>
+          <div className={signalUi.sectionTitle}>Account Decoded</div>
           <div className="relative">
             <Input.TextArea
               inputClassName="w-full"
@@ -178,10 +177,10 @@ const DocSignals = ({ fetch }: DocSignalsProps) => {
   const signal = fetch.serializedSignal;
   const signalEntries = Object.entries(signal).sort(([keyA], [keyB]) => (lowerlize(keyA) > lowerlize(keyB) ? 1 : -1));
   return (
-    <div>
+    <div className="flex flex-col gap-3">
       {signalEntries.map(([refName, signal], idx) => {
         return (
-          <div className="px-5 pb-5 font-bold text-3xl" key={idx}>
+          <div className="font-bold text-3xl" key={idx}>
             <DocSignal refName={refName} fetch={fetch} />
           </div>
         );
@@ -200,8 +199,13 @@ const DocSignal = ({ refName, fetch }: DocSignalProps) => {
   return (
     <div className="collapse-arrow collapse bg-base-200">
       <input type="checkbox" />
-      <div className="collapse-title font-medium text-xl">{refName}</div>
-      <div className="collapse-content">
+      <div className="collapse-title">
+        <div className="flex flex-wrap items-center gap-2">
+          <div className="font-bold text-xl">{refName}</div>
+          <div className="badge badge-primary">Signal</div>
+        </div>
+      </div>
+      <div className="collapse-content flex flex-col gap-3">
         <RestApi.Endpoints refName={refName} fetch={fetch} />
       </div>
     </div>
@@ -218,10 +222,12 @@ const Zone = ({ refName, fetch, openAll }: ZoneProps) => {
   const { l } = usePage();
   return (
     <div className="flex break-after-page flex-col gap-4">
-      <div className="font-bold text-3xl">{refName}</div>
-      <div className="mb-5"> - {l._(`${refName}.modelDesc`)}</div>
-      <div className="font-bold text-2xl">APIs</div>
+      <div>
+        <div className="font-bold text-3xl">{refName}</div>
+        <div className="text-base-content/70">{l._(`${refName}.modelDesc`)}</div>
+      </div>
       <DocSetting />
+      <div className="font-bold text-2xl">APIs</div>
       <RestApi.Endpoints refName={refName} fetch={fetch} openAll={openAll} />
       <div className="font-bold text-2xl">Web Socket</div>
       <WebSocket.Endpoints refName={refName} fetch={fetch} openAll={openAll} />

package/ui/Signal/Listener.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { clsx } from "akanjs/client";
 import { capitalize } from "akanjs/common";
 import { useEffect, useRef } from "react";
+import { getStatusBadgeClassName, getStatusTextareaClassName, signalUi } from "./style";
 
 export default function Listener() {
   return <div></div>;
@@ -23,51 +23,27 @@ const ListenerResult = ({ status, data }: ListenerResultProps) => {
     <div className="relative">
       <textarea
         ref={ref}
-        className={`textarea duration-300 ${
-          status === "loading"
-            ? "textarea-disabled"
-            : status === "error"
-              ? "textarea-error border-error text-error"
-              : status === "listening"
-                ? "textarea-success animate-borderPulse-50 border-3 border-info"
-                : ""
-        } min-h-[300px] w-full rounded-md bg-base-100 p-4 font-normal text-sm`}
+        className={`${signalUi.codePanel} duration-300 ${
+          status === "listening" ? "animate-borderPulse-50 border-2" : ""
+        } ${getStatusTextareaClassName(status)}`}
         value={dataStr}
         onChange={() => true}
       />
 
-      <div className="absolute top-4 right-4 flex items-center justify-center gap-3 rounded-lg bg-base-200/50 px-2 py-1 font-bold">
-        {capitalize(status)}
-
+      <div className="absolute top-4 right-4 flex items-center justify-center gap-2 rounded-lg bg-base-200/80 px-2 py-1 font-bold">
+        <span className={getStatusBadgeClassName(status)}>{capitalize(status)}</span>
         <div
-          className={clsx("size-[14px] rounded-full", {
-            "animate-bounce bg-base-300": status === "ready",
-            "animate-pop-300 bg-success": status === "listening",
-            
-            "animate-none bg-error": status === "error",
-            "animate-ping bg-warning": status === "loading",
-          })}
+          className={`size-[10px] rounded-full ${
+            status === "error"
+              ? "bg-error"
+              : status === "listening"
+                ? "animate-pop-300 bg-primary"
+                : status === "loading"
+                  ? "animate-ping bg-secondary"
+                  : "bg-base-300"
+          }`}
         ></div>
       </div>
-      {/* {status === "loading" ? (
-        <div className="animate-fadeIn absolute inset-0 flex items-center justify-center backdrop-blur-sm">
-          <span className="loading loading-dots loading-lg"></span>
-        </div>
-      ) : status === "idle" ? (
-        <></>
-      ) : status === "listening" ? (
-        <div className="absolute right-4 top-4 w-3 h-3">
-          <div className="rounded-full  w-full h-full animate-bounce bg-success"></div>
-        </div>
-      ) : (
-        <div className="absolute right-4 top-4">
-          <Copy text={dataStr}>
-            <button className="btn btn-sm">
-              <AiOutlineCopy /> Copy
-            </button>
-          </Copy>
-        </div>
-      )} */}
     </div>
   );
 };