akanjs 3.0.0-alpha.30 → 3.0.0-alpha.31

package/package.json

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

package/types/ui/Agent/Chat.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 import { type AgentRunner } from "../../vendor/use-agentic.d.ts";
 import { type PersistOption } from "./sessionHistory.d.ts";
 export interface ChatProps {
@@ -11,6 +12,8 @@ export interface ChatProps {
     defaultOpen?: boolean;
     /** Keeps the transcript across reloads — sessionStorage by default, `{ storage: "local" }` to outlive the tab. */
     persist?: PersistOption;
+    /** Renders in the page flow instead of floating above it — a zone chat that lives inside its own section. */
+    inline?: boolean;
 }
 /**
  * The user-facing half of the in-page agent: one floating chat wired to the same surface the dock inspects.
@@ -19,6 +22,6 @@ export interface ChatProps {
  * no history). An enclosing AgentProvider's session wins, which is how an app isolates a surface or swaps the
  * loop while keeping this UI.
  */
-export declare const DefaultChat: ({ className, title, instructions, runner, maxTurns, defaultOpen, persist, }: ChatProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DefaultChat: ({ className, title, instructions, runner, maxTurns, defaultOpen, persist, inline, }: ChatProps) => ReactNode;
 declare const _default: import("react").ComponentType<ChatProps>;
 export default _default;

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

@@ -10,7 +10,11 @@ export declare const endpointEntriesOf: (refName: string, fetch: FetchProxy) =>
 export declare const matchesSearch: (key: string, path: string, search: string) => boolean;
 /** `None` refuses every caller and is never badged, so it is not a name anyone filters by either. */
 export declare const guardsOf: (endpoint: SerializedEndpoint) => string[];
+/** Naming no guard is `Public` spelled by omission — both are reachable by every caller, so the filter reads them
+ *  as the same thing even though only the explicit one carries a badge. */
+export declare const isPublicEndpoint: (endpoint: SerializedEndpoint) => boolean;
 /** Every guard name the serialized signals declare — the app's own authorization vocabulary, not a fixed role list. */
 export declare const guardNamesOf: (fetch: FetchProxy) => string[];
-/** No selection is no filter: the toolbar is optional, and an endpoint naming no guard is reachable by everyone. */
+/** No selection is no filter, and a selection is a claim about the guard list — so a public endpoint answers to
+ *  `Public` alone rather than surviving every other filter. */
 export declare const matchesGuards: (endpoint: SerializedEndpoint, selected: string[]) => boolean;

package/ui/Agent/Chat.tsx

@@ -2,7 +2,8 @@
 import { cn, fetch, usePage } from "akanjs/client";
 import type { PromptResult } from "akanjs/signal";
 import { AgentContext, type AgentPrompt, AgentPrompts, ensureStoreSurface, ScreenSettle } from "akanjs/store";
-import { useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { type ReactNode, useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { createPortal } from "react-dom";
 import { AiOutlineClear, AiOutlineClose } from "react-icons/ai";
 import { type AgentRunner, AgentSession, SessionContext } from "../../vendor/use-agentic";
 import { Button } from "../Button";
@@ -25,10 +26,14 @@ export interface ChatProps {
   defaultOpen?: boolean;
   /** Keeps the transcript across reloads — sessionStorage by default, `{ storage: "local" }` to outlive the tab. */
   persist?: PersistOption;
+  /** Renders in the page flow instead of floating above it — a zone chat that lives inside its own section. */
+  inline?: boolean;
 }
 
 const isApplePlatform = () => /Mac|iPhone|iPad|iPod/i.test(navigator.platform);
 
+const floatingLayer = "fixed right-4 bottom-4 z-[150]";
+
 /**
  * The user-facing half of the in-page agent: one floating chat wired to the same surface the dock inspects.
  * The conversation loop runs in this browser session — every tool call executes here, gated by the approval
@@ -44,6 +49,7 @@ export const DefaultChat = ({
   maxTurns,
   defaultOpen = false,
   persist,
+  inline = false,
 }: ChatProps) => {
   const { l } = usePage();
   const provided = useContext(SessionContext);
@@ -71,6 +77,10 @@ export const DefaultChat = ({
   const [hotkey, setHotkey] = useState<{ label: string; keys: string } | null>(null);
   const listRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
+  const [overlay, setOverlay] = useState<HTMLElement | null>(null);
+  useEffect(() => {
+    setOverlay(document.body);
+  }, []);
   useEffect(() => {
     listRef.current?.scrollTo({ top: listRef.current.scrollHeight });
   }, [version, open]);
@@ -153,14 +163,16 @@ export const DefaultChat = ({
     const orphans = (message.toolResults ?? []).filter((result) => !claimed.has(result.id));
     return orphans.length ? [<Bubble key={idx} message={{ ...message, toolResults: orphans }} />] : [];
   });
+  const layer = (surface: ReactNode) => (inline ? surface : overlay ? createPortal(surface, overlay) : null);
   if (!open)
-    return (
+    return layer(
       <button
         aria-keyshortcuts={hotkey?.keys}
         aria-label={l("base.agent")}
         data-agent-ui=""
         className={cn(
-          "group/agent fixed right-4 bottom-4 z-50 flex size-12 items-center justify-center rounded-full border border-primary/20 bg-primary/90 text-primary-foreground shadow-lg shadow-primary/30 transition-transform hover:scale-105",
+          "group/agent flex size-12 items-center justify-center rounded-full border border-primary/20 bg-primary/90 text-primary-foreground shadow-lg shadow-primary/30 transition-transform hover:scale-105",
+          !inline && floatingLayer,
           className,
         )}
         onClick={() => setOpen(true)}
@@ -183,14 +195,15 @@ export const DefaultChat = ({
        C78.2 29.2 72.8 23.8 60 22 C72.8 20.2 78.2 14.8 80 2 Z"
           />
         </svg>
-      </button>
+      </button>,
     );
-  return (
-    
+  
+  return layer(
     <aside
       data-agent-ui=""
       className={cn(
-        "fixed right-4 bottom-4 z-50 flex h-[min(600px,calc(100dvh-2rem))] w-[min(24rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-box border border-border bg-background shadow-xl",
+        "flex h-[min(600px,calc(100dvh-2rem))] w-[min(24rem,calc(100vw-2rem))] flex-col overflow-hidden rounded-box border border-border bg-background shadow-xl",
+        !inline && floatingLayer,
         className,
       )}
     >
@@ -274,7 +287,7 @@ export const DefaultChat = ({
           </Button>
         )}
       </div>
-    </aside>
+    </aside>,
   );
 };
 

package/ui/Signal/endpointEntries.ts

@@ -31,18 +31,29 @@ export const matchesSearch = (key: string, path: string, search: string) => {
 /** `None` refuses every caller and is never badged, so it is not a name anyone filters by either. */
 export const guardsOf = (endpoint: SerializedEndpoint) => endpoint.guards?.filter((guard) => guard !== "None") ?? [];
 
+/** Naming no guard is `Public` spelled by omission — both are reachable by every caller, so the filter reads them
+ *  as the same thing even though only the explicit one carries a badge. */
+export const isPublicEndpoint = (endpoint: SerializedEndpoint) => {
+  const guards = guardsOf(endpoint);
+  return !guards.length || guards.every((guard) => guard === "Public");
+};
+
 /** Every guard name the serialized signals declare — the app's own authorization vocabulary, not a fixed role list. */
 export const guardNamesOf = (fetch: FetchProxy) => {
   const names = new Set<string>();
   for (const refName of Object.keys(fetch.serializedSignal))
-    for (const { endpoint } of endpointEntriesOf(refName, fetch))
+    for (const { endpoint } of endpointEntriesOf(refName, fetch)) {
+
+      if (isPublicEndpoint(endpoint)) names.add("Public");
       for (const guard of guardsOf(endpoint)) names.add(guard);
+    }
   return [...names].sort((a, b) => (a > b ? 1 : -1));
 };
 
-/** No selection is no filter: the toolbar is optional, and an endpoint naming no guard is reachable by everyone. */
+/** No selection is no filter, and a selection is a claim about the guard list — so a public endpoint answers to
+ *  `Public` alone rather than surviving every other filter. */
 export const matchesGuards = (endpoint: SerializedEndpoint, selected: string[]) => {
   if (!selected.length) return true;
-  const guards = guardsOf(endpoint);
-  return !guards.length || guards.some((guard) => selected.includes(guard));
+  if (isPublicEndpoint(endpoint)) return selected.includes("Public");
+  return guardsOf(endpoint).some((guard) => selected.includes(guard));
 };