@schlessera/brain-ui-react 0.36.0 → 0.37.0

package/src/components/settings/settings-panel.tsx

@@ -1,7 +1,7 @@
 import { Suspense, lazy } from "react";
 import { KeyRound, Laptop, Puzzle, SlidersHorizontal } from "lucide-react";
 import { useUIStore, type SettingsTab } from "../../stores/ui-store.js";
-import { SlidePanel } from "../layout/slide-panel.js";
+import { SlidePanel, type SlidePanelClosedBy } from "../layout/slide-panel.js";
 import { cn } from "../../lib/utils.js";
 import { usePrincipalStore } from "../../stores/principal-store.js";
 import { useBrainUiRoot } from "../../root-context.js";
@@ -73,10 +73,10 @@ export function SettingsPanel({
   const oneTimeCredential = usePrincipalStore((s) => s.oneTimeCredential);
   const credentialProtected = mintPending || oneTimeCredential !== null;
   const pane = useMediaQuery(PANE_QUERY);
-
-  function closeIfSafe() {
-    if (!credentialProtected) onClose();
-  }
+  // While a mint is in flight or its one-time value is unacknowledged, the
+  // panel does not light-dismiss: a stray click or Escape must not hide the
+  // surface the credential is about to land on. Its close control stays live.
+  const closedBy = credentialProtected ? "none" : "any";
 
   function select(id: SettingsTab) {
     if (!credentialProtected) setTab(id);
@@ -88,8 +88,9 @@ export function SettingsPanel({
         open={open}
         tab={tab}
         credentialProtected={credentialProtected}
+        closedBy={closedBy}
         onSelect={select}
-        onClose={closeIfSafe}
+        onClose={onClose}
       />
     );
   }
@@ -99,7 +100,7 @@ export function SettingsPanel({
   const stripTab: StripTab = tab === "appearance" ? "models" : tab;
 
   return (
-    <SlidePanel open={open} onClose={closeIfSafe} title="Settings" wide>
+    <SlidePanel open={open} onClose={onClose} title="Settings" wide closedBy={closedBy}>
       <div className="flex h-full flex-col">
         <div className="flex shrink-0 gap-1 border-b border-border px-2 pt-2">
           {TABS.map(({ id, label, icon: TabIcon }) => (
@@ -158,18 +159,20 @@ function SettingsPane({
   open,
   tab,
   credentialProtected,
+  closedBy,
   onSelect,
   onClose,
 }: {
   open: boolean;
   tab: SettingsTab;
   credentialProtected: boolean;
+  closedBy: SlidePanelClosedBy;
   onSelect: (tab: SettingsTab) => void;
   onClose: () => void;
 }) {
   const appName = useBrainUiRoot().config.appName;
   return (
-    <SlidePanel open={open} onClose={onClose} title="Settings" mode="pane">
+    <SlidePanel open={open} onClose={onClose} title="Settings" mode="pane" closedBy={closedBy}>
       {/* The kit header is `width: 100%`; it needs a shrinking flex child
           around it, or it fills the row and pushes Close past the viewport
           (the Files pane wraps its header the same way). */}

package/src/hooks/use-fine-pointer.ts

@@ -0,0 +1,15 @@
+import { useMediaQuery } from "./use-media-query.js";
+
+/**
+ * Whether any pointer is fine: the display heuristic chosen in #86 for
+ * shortcut hints on touch devices. This does not detect a keyboard. A paired
+ * mouse or trackpad updates the query live; a keyboard alone does not, so a
+ * tablet with a keyboard but no trackpad prints none of these hints — ruled acceptable,
+ * with the platform fact behind it (no media query reports a keyboard), in
+ * the D36 addendum of docs/decisions/design-kit.md.
+ * Only printed hints follow this signal. Bindings remain active either way.
+ * Without matchMedia (SSR or a test DOM), preserve the existing hints.
+ */
+export function useFinePointer(): boolean {
+  return useMediaQuery("(any-pointer: fine)", true);
+}

package/src/hooks/use-media-query.ts

@@ -2,11 +2,13 @@ import { useEffect, useState } from "react";
 
 /**
  * Whether a media query matches, kept current as the window changes. Reads
- * `false` where there is no `matchMedia` — the server, and the test DOM —
- * so a component that branches on it renders its mobile shape there.
+ * `fallback` where there is no `matchMedia` — the server, and the test DOM.
+ * It defaults to `false`, so a component that branches on a width query
+ * renders its mobile shape there; a capability query that must fail open
+ * passes `true` (see `useFinePointer`).
  */
-export function useMediaQuery(query: string): boolean {
-  const [matches, setMatches] = useState(() => read(query));
+export function useMediaQuery(query: string, fallback = false): boolean {
+  const [matches, setMatches] = useState(() => read(query, fallback));
   useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     let list: MediaQueryList;
@@ -23,10 +25,11 @@ export function useMediaQuery(query: string): boolean {
   return matches;
 }
 
-function read(query: string): boolean {
+function read(query: string, fallback: boolean): boolean {
   try {
-    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(query).matches;
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return fallback;
+    return window.matchMedia(query).matches;
   } catch {
-    return false;
+    return fallback;
   }
 }

package/src/hooks/websocket-handlers/chat.ts

@@ -163,7 +163,8 @@ export const chatFrameHandlers = {
       msg.toolName,
       msg.input,
       msg.description,
-      msg.kind
+      msg.kind,
+      msg.rememberable
     );
   },
   tool_result: (msg, context) => {

package/src/stores/chat-state.ts

@@ -65,6 +65,20 @@ export interface ToolCall {
    * allow"; "command" (a destructive-bash confirmation) is per-use only.
    */
   approvalKind?: "tool" | "command";
+  /**
+   * `false` when the host said it will not keep an "always allow" given on
+   * this card (#147) — the request is outside the turn's enforced allowlist.
+   * Absent means `approvalKind` alone decides. Read it through
+   * `offersAlwaysAllow`, not directly.
+   */
+  approvalRememberable?: false;
+  /**
+   * The approval request's description. For a "command" confirmation it is
+   * what the command will do, in words — the matched confirm pattern's
+   * effect (#112) — and the card draws it; for a "tool" grant it is the
+   * runtime's own text and is not drawn.
+   */
+  approvalDescription?: string;
   /**
    * Execution timing for the duration badge. `startedAt` is (re)stamped when
    * the input finishes streaming or an approval is granted — so approval
@@ -189,7 +203,8 @@ export interface ChatState {
     toolName: string,
     input: Record<string, unknown>,
     description?: string,
-    kind?: "tool" | "command"
+    kind?: "tool" | "command",
+    rememberable?: boolean
   ) => void;
   resolveToolApproval: (key: ChatKey, toolUseId: string, approved: boolean) => void;
   setToolResult: (key: ChatKey, toolUseId: string, output: string, isError: boolean) => void;
@@ -290,6 +305,16 @@ function revokeAttachmentUrls(messages: ChatMessage[]) {
   }
 }
 
+/**
+ * Whether a pending approval may offer "always allow": never for a
+ * destructive-command confirmation, and never when the host said it would
+ * not keep the grant. Both approval surfaces and the Actions receipt read
+ * this one rule, so the button and the receipt cannot disagree.
+ */
+export function offersAlwaysAllow(tool: Pick<ToolCall, "approvalKind" | "approvalRememberable">): boolean {
+  return tool.approvalKind !== "command" && tool.approvalRememberable !== false;
+}
+
 /**
  * Every tool call waiting on the user, across every buffer (D37: an approval
  * that arrived while you were reading something else cannot only exist as a
@@ -533,7 +558,7 @@ export function createChatStore(env: StoreEnvironment, provider: StoreApi<Provid
           ),
         })),
 
-      requestToolApproval: (key, toolUseId, toolName, input, _description, kind) =>
+      requestToolApproval: (key, toolUseId, toolName, input, description, kind, rememberable) =>
         mutateLastAssistant(key, (last) => {
           // Check if tool call already exists (from streaming)
           const existingIdx = last.toolCalls.findIndex(
@@ -547,6 +572,8 @@ export function createChatStore(env: StoreEnvironment, provider: StoreApi<Provid
             inputJson: JSON.stringify(input, null, 2),
             status: "pending_approval",
             ...(kind ? { approvalKind: kind } : {}),
+            ...(rememberable === false ? { approvalRememberable: false } : {}),
+            ...(description ? { approvalDescription: description } : {}),
           };
           let parts = last.parts;
           if (existingIdx >= 0) {