@flamingo-stack/openframe-frontend-core 0.0.850 → 0.0.852

package/dist/components/features/notifications/types.d.ts

@@ -60,6 +60,8 @@ export interface ApprovalToolCallMeta {
     requiresApproval?: boolean;
     approvalType?: string | null;
     toolCallArguments?: Record<string, unknown> | null;
+    /** The guardrail review, as the wire sends it: normalized into the batch by `approvalMetaToBatchData`. */
+    policyReview?: unknown;
 }
 /** Approval payload stashed in `notification.meta` for an approval-request notification. */
 export interface ApprovalNotificationMeta {

package/dist/components/features/notifications/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/notifications/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/notifications/types.ts"],"names":[],"mappings":"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"}

package/dist/components/features/notifications/types.js

@@ -1,4 +1,5 @@
 "use client";
+import { policyReviewField } from "../../../chat-protocol/policy-review.js";
 import { APPROVAL_STATUS } from "../../chat/types/index.js";
 const TICKET_APPROVAL_REQUEST_TYPE = "TICKET_APPROVAL_REQUEST";
 const MINGO_APPROVAL_REQUEST_TYPE = "MINGO_APPROVAL_REQUEST";
@@ -52,7 +53,8 @@ function approvalMetaToBatchData(approval) {
       toolType: tc.toolType ?? void 0,
       requiresApproval: tc.requiresApproval ?? true,
       approvalType: tc.approvalType ?? null,
-      toolCallArguments: tc.toolCallArguments ?? null
+      toolCallArguments: tc.toolCallArguments ?? null,
+      ...policyReviewField(tc.policyReview)
     }))
   };
 }

package/dist/components/features/policy-configuration-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"policy-configuration-panel.d.ts","sourceRoot":"","sources":["../../../src/components/features/policy-configuration-panel.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAIV,6BAA6B,EAC9B,MAAM,yBAAyB,CAAC;AAejC,yGAAyG;AACzG,eAAO,MAAM,8CAA8C,IAAI,CAAC;AAoRhE,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CA+DtE,CAAC"}
+{"version":3,"file":"policy-configuration-panel.d.ts","sourceRoot":"","sources":["../../../src/components/features/policy-configuration-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAIV,6BAA6B,EAC9B,MAAM,yBAAyB,CAAC;AAmBjC,yGAAyG;AACzG,eAAO,MAAM,8CAA8C,IAAI,CAAC;AAkShE,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,6BAA6B,CA+DtE,CAAC"}

package/dist/components/features/policy-configuration-panel.js

@@ -1,18 +1,22 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, Shield } from "lucide-react";
 import { useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { useCollapsible } from "../chat/hooks/use-collapsible.js";
+import { Chevron02DownIcon, ShieldIcon } from "../icons-v2-generated/index.js";
 import { TextLineSkeleton } from "../loading/unified-skeleton.js";
 import { ToolIcon } from "../tool-icon.js";
 import { Button } from "../ui/button/index.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../ui/dropdown-menu.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "../ui/dropdown-menu.js";
 import { loadingItemProps, useLoadingScope } from "../ui/loading-scope.js";
-import { APPROVAL_LEVEL_META, APPROVAL_LEVELS } from "./approval-level.js";
-const approvalLevelOptions = APPROVAL_LEVELS.map((value) => ({ value, label: APPROVAL_LEVEL_META[value].label }));
-const POLICY_LEVEL_WIDTH = "w-[180px]";
-const CATEGORY_LEVEL_WIDTH = "w-[256px]";
+import { APPROVAL_LEVEL_META, APPROVAL_LEVELS, ApprovalLevelView } from "./approval-level.js";
+const CATEGORY_LEVEL_WIDTH = "w-[296px]";
 const POLICY_CONFIGURATION_PANEL_SKELETON_CATEGORIES = 4;
 const CATEGORY_HEADER_CLASS = "flex items-center gap-[var(--spacing-system-m)] border-t border-ods-border bg-ods-card py-[var(--spacing-system-s)] pl-[var(--spacing-system-m)] pr-[var(--spacing-system-xsf)] first:border-t-0";
 const ICON_TILE_SIZE_CLASS = "h-8 w-8 shrink-0 rounded-md";
@@ -22,56 +26,59 @@ const CATEGORY_LEVEL_COLUMN_CLASS = cn(
   "hidden shrink-0 px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)] content-md:block",
   CATEGORY_LEVEL_WIDTH
 );
-const CHEVRON_CLASS = "h-6 w-6 text-ods-text-primary transition-transform duration-300";
-const getApprovalLevelLabel = (level) => APPROVAL_LEVEL_META[level]?.label ?? level;
+const CHEVRON_CLASS = "!h-6 !w-6 text-ods-text-primary transition-transform duration-300";
+const LevelOption = ({ level }) => {
+  const { label, Icon, toneClassName } = APPROVAL_LEVEL_META[level];
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex min-w-0 items-center gap-[var(--spacing-system-xsf)]", children: [
+    /* @__PURE__ */ jsx(Icon, { size: 24, className: cn("shrink-0", toneClassName), "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+  ] });
+};
+const LEVEL_MENU_ITEM_CLASS = "p-[var(--spacing-system-sf)] text-h4 [&_svg]:size-4 md:[&_svg]:size-6";
 const ApprovalLevelDropdown = ({ value, onChange, allowClear = false, triggerClassName, contentClassName, disabled }) => /* @__PURE__ */ jsxs(DropdownMenu, { children: [
   /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsx(
     Button,
     {
       variant: "outline",
       disabled,
-      rightIcon: /* @__PURE__ */ jsx(ChevronDown, { className: "h-6 w-6 text-ods-text-secondary" }),
+      rightIcon: /* @__PURE__ */ jsx(Chevron02DownIcon, { className: "!h-6 !w-6 text-ods-text-secondary" }),
       className: cn(
-        "flex h-auto items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card !px-[var(--spacing-system-xsf)] py-[var(--spacing-system-xsf)] transition-colors !text-h6 hover:bg-ods-bg-hover",
+        "flex h-auto items-center justify-between gap-[var(--spacing-system-xsf)] rounded-md border border-ods-border bg-ods-card !p-[var(--spacing-system-sf)] transition-colors !text-h4 hover:bg-ods-bg-hover",
         value ? "text-ods-text-primary" : "text-ods-text-secondary",
         triggerClassName
       ),
-      children: value ? getApprovalLevelLabel(value) : "Set Global Permission"
+      children: value ? /* @__PURE__ */ jsx(LevelOption, { level: value }) : "Set Global Permission"
     }
   ) }),
   /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", className: contentClassName, children: [
-    allowClear && /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onChange(void 0), className: "text-h6", children: "Clear Global Permission" }),
-    approvalLevelOptions.map((option) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onChange(option.value), className: "text-h6", children: option.label }, option.value))
+    APPROVAL_LEVELS.map((level) => /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onChange(level), className: LEVEL_MENU_ITEM_CLASS, children: /* @__PURE__ */ jsx(LevelOption, { level }) }, level)),
+    allowClear && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(DropdownMenuItem, { onClick: () => onChange(void 0), className: LEVEL_MENU_ITEM_CLASS, children: "Clear Global Permission" })
+    ] })
   ] })
 ] });
 const PolicyRow = ({ policy, categoryId, editMode, onPermissionChange }) => {
-  const handleChange = (level) => {
-    if (level) onPermissionChange(categoryId, policy.id, level);
-  };
+  const nameId = `policy-${categoryId}-${policy.id}`;
+  const level = policy.approvalLevel ? /* @__PURE__ */ jsx(
+    ApprovalLevelView,
+    {
+      value: policy.approvalLevel,
+      editable: editMode,
+      onChange: (next) => onPermissionChange(categoryId, policy.id, next),
+      "aria-labelledby": nameId
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-[var(--spacing-system-m)] border-b border-ods-border bg-ods-bg px-[var(--spacing-system-m)] py-[var(--spacing-system-sf)] last:border-b-0 content-md:items-center", children: [
-    /* @__PURE__ */ jsx("div", { className: ICON_TILE_CLASS, children: /* @__PURE__ */ jsx(ToolIcon, { toolType: policy.toolName, size: 16 }) }),
+    /* @__PURE__ */ jsx("div", { className: cn(ICON_TILE_CLASS, "text-ods-text-secondary", editMode && "hidden content-md:flex"), children: /* @__PURE__ */ jsx(ToolIcon, { toolType: policy.toolName, size: 16 }) }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-primary text-h4", title: policy.name, children: policy.name }),
-      /* @__PURE__ */ jsx("p", { className: "break-all text-ods-text-secondary text-h6", children: policy.commandPattern }),
-      editMode ? /* @__PURE__ */ jsx("div", { className: "mt-[var(--spacing-system-xsf)] content-md:hidden", children: /* @__PURE__ */ jsx(
-        ApprovalLevelDropdown,
-        {
-          value: policy.approvalLevel,
-          onChange: handleChange,
-          triggerClassName: "w-full",
-          contentClassName: POLICY_LEVEL_WIDTH
-        }
-      ) }) : policy.approvalLevel ? /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h4 content-md:hidden", children: getApprovalLevelLabel(policy.approvalLevel) }) : null
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-[var(--spacing-system-sf)]", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsx("p", { id: nameId, className: "truncate text-ods-text-primary text-h4", title: policy.name, children: policy.name }) }),
+        editMode && /* @__PURE__ */ jsx("span", { className: "flex shrink-0 text-ods-text-secondary content-md:hidden", children: /* @__PURE__ */ jsx(ToolIcon, { toolType: policy.toolName, size: 16 }) })
+      ] }),
+      level && /* @__PURE__ */ jsx("div", { className: cn("flex content-md:hidden", editMode && "mt-[var(--spacing-system-sf)]"), children: level })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 content-md:block", children: editMode ? /* @__PURE__ */ jsx(
-      ApprovalLevelDropdown,
-      {
-        value: policy.approvalLevel,
-        onChange: handleChange,
-        triggerClassName: POLICY_LEVEL_WIDTH,
-        contentClassName: POLICY_LEVEL_WIDTH
-      }
-    ) : /* @__PURE__ */ jsx("div", { className: cn("px-[var(--spacing-system-sf)] py-[var(--spacing-system-xsf)]", POLICY_LEVEL_WIDTH), children: policy.approvalLevel && /* @__PURE__ */ jsx("span", { className: "text-ods-text-primary text-h4", children: getApprovalLevelLabel(policy.approvalLevel) }) }) })
+    level && /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 items-center content-md:flex", children: level })
   ] });
 };
 const LOADING_CATEGORY = { id: "", name: "", policies: [] };
@@ -95,29 +102,22 @@ const CategorySection = ({
       "div",
       {
         ...loadingItemProps(props),
-        className: cn(CATEGORY_HEADER_CLASS, !loading && "cursor-pointer transition-colors hover:bg-ods-bg-hover"),
+        className: cn(
+          CATEGORY_HEADER_CLASS,
+          !loading && "cursor-pointer transition-colors hover:bg-ods-bg-hover [&:has([data-bulk-level]:hover)]:bg-ods-card"
+        ),
         onClick: loading ? void 0 : () => onToggle(category.id),
         children: [
-          /* @__PURE__ */ jsx("div", { className: ICON_TILE_CLASS, children: /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary", children: category.icon ?? /* @__PURE__ */ jsx(Shield, { className: "h-4 w-4" }) }) }),
+          /* @__PURE__ */ jsx("div", { className: ICON_TILE_CLASS, children: /* @__PURE__ */ jsx("div", { className: "text-ods-text-secondary", children: category.icon ?? /* @__PURE__ */ jsx(ShieldIcon, { size: 16 }) }) }),
           /* @__PURE__ */ jsxs("div", { className: CATEGORY_TEXT_CLASS, children: [
             category.name ? /* @__PURE__ */ jsx("p", { className: "truncate text-ods-text-primary text-h4", title: category.name, children: category.name }) : /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h4", className: "w-40 max-w-full" }),
             loading ? /* @__PURE__ */ jsx(TextLineSkeleton, { type: "h6", className: "w-24" }) : /* @__PURE__ */ jsxs("p", { className: "text-ods-text-secondary text-h6", children: [
               category.policies.length,
-              " Configurations"
-            ] }),
-            editMode && /* @__PURE__ */ jsx("div", { className: "mt-[var(--spacing-system-xsf)] content-md:hidden", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-              ApprovalLevelDropdown,
-              {
-                value: bulkLevel,
-                onChange: handleBulkChange,
-                allowClear: true,
-                triggerClassName: "w-full",
-                contentClassName: CATEGORY_LEVEL_WIDTH,
-                disabled: loading
-              }
-            ) })
+              " ",
+              category.policies.length === 1 ? "Configuration" : "Configurations"
+            ] })
           ] }),
-          editMode ? /* @__PURE__ */ jsx("div", { className: "hidden shrink-0 content-md:block", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+          editMode ? /* @__PURE__ */ jsx("div", { "data-bulk-level": true, className: "hidden shrink-0 content-md:block", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
             ApprovalLevelDropdown,
             {
               value: bulkLevel,
@@ -138,8 +138,12 @@ const CategorySection = ({
                 e.stopPropagation();
                 onToggle(category.id);
               },
-              leftIcon: /* @__PURE__ */ jsx(ChevronDown, { className: cn(CHEVRON_CLASS, isExpanded && "rotate-180") }),
-              className: "h-auto w-auto shrink-0 rounded-md",
+              leftIcon: /* @__PURE__ */ jsx(Chevron02DownIcon, { className: cn(CHEVRON_CLASS, isExpanded && "rotate-180") }),
+              className: cn(
+                "h-auto w-auto shrink-0 rounded-md !p-[var(--spacing-system-xsf)] content-md:!p-[var(--spacing-system-sf)]",
+                // The row is the hover; the chevron adds none of its own.
+                "hover:bg-transparent active:bg-transparent"
+              ),
               "aria-label": isExpanded ? "Collapse" : "Expand"
             }
           )
@@ -157,16 +161,23 @@ const CategorySection = ({
           visibility: isExpanded ? "visible" : "hidden"
         },
         className: isExpanded ? "opacity-100" : "opacity-0",
-        children: /* @__PURE__ */ jsx("div", { ref: innerRef, className: "px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-0", children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-ods-border", children: (loading ? [] : category.policies).map((policy) => /* @__PURE__ */ jsx(
-          PolicyRow,
+        children: /* @__PURE__ */ jsx(
+          "div",
           {
-            policy,
-            categoryId: category.id,
-            editMode,
-            onPermissionChange: onPolicyPermissionChange
-          },
-          policy.id
-        )) }) })
+            ref: innerRef,
+            className: "border-t border-ods-border px-[var(--spacing-system-mf)] pb-[var(--spacing-system-mf)] pt-[var(--spacing-system-mf)]",
+            children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-md border border-ods-border", children: (loading ? [] : category.policies).map((policy) => /* @__PURE__ */ jsx(
+              PolicyRow,
+              {
+                policy,
+                categoryId: category.id,
+                editMode,
+                onPermissionChange: onPolicyPermissionChange
+              },
+              policy.id
+            )) })
+          }
+        )
       }
     )
   ] });