@flamingo-stack/openframe-frontend-core 0.0.313 → 0.0.314-snapshot.20260624043952

package/dist/utils/tool-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tool-utils.d.ts","sourceRoot":"","sources":["../../src/utils/tool-utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,QAAQ,EAAc,MAAM,qBAAqB,CAAA;AA2E1D;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAgBtE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,6BAA6B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAEtE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CASlD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAEvD;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,EAAE,CAI/D;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAEvD"}
+{"version":3,"file":"tool-utils.d.ts","sourceRoot":"","sources":["../../src/utils/tool-utils.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,QAAQ,EAAc,MAAM,qBAAqB,CAAA;AAsF1D;;;;;;;;;;;GAWG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,CAgBtE;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,6BAA6B,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,CAEtE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CASlD;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,eAAe,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAEvD;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,EAAE,CAI/D;AAED;;GAEG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,QAAQ,GAAG,MAAM,CAEvD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.313",
+  "version": "0.0.314-snapshot.20260624043952",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/push-button-selector.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Button, Badge } from "../ui";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
 import { Check } from 'lucide-react';
 import React from 'react';
 
@@ -15,6 +16,7 @@ export interface SelectableOption {
   icon?: React.ReactNode;
   color?: string;
   disabled?: boolean;      // If true, option is shown grayed out and not selectable
+  disabledReason?: string; // Tooltip shown on hover when disabled — explains WHY it's unavailable
   section?: string;        // Optional section ID to group options
 }
 
@@ -151,19 +153,21 @@ export function PushButtonSelector({
   const renderOption = (option: SelectableOption) => {
     const isSelected = validSelectedIds.includes(option.id);
 
-    return (
+    const optionEl = (
       <div
         key={option.id}
         className={`
           p-4 rounded-lg border transition-all duration-200 group
           ${option.disabled
-            ? 'cursor-not-allowed opacity-40 bg-ods-card border-ods-border'
+            ? `${isSelected ? 'cursor-pointer' : 'cursor-not-allowed'} opacity-40 bg-ods-card border-ods-border`
             : isSelected
               ? 'cursor-pointer bg-ods-bg-secondary border-ods-accent shadow-sm'
               : 'cursor-pointer bg-ods-bg-primary border-ods-border hover:border-ods-border-hover hover:bg-ods-bg-hover'
           }
         `}
-        onClick={() => !option.disabled && toggleSelection(option.id)}
+        // Disabled options can't be newly SELECTED, but an already-selected one
+        // (e.g. it later became unavailable) must still be removable.
+        onClick={() => (!option.disabled || isSelected) && toggleSelection(option.id)}
       >
         <div className="flex items-center justify-between gap-4">
           <div className="flex items-center gap-3 flex-1 min-w-0">
@@ -199,6 +203,18 @@ export function PushButtonSelector({
         </div>
       </div>
     );
+
+    // Disabled options explain WHY on hover via the unified Tooltip.
+    if (option.disabled && option.disabledReason) {
+      return (
+        <Tooltip key={option.id}>
+          <TooltipTrigger asChild>{optionEl}</TooltipTrigger>
+          <TooltipContent className="max-w-xs">{option.disabledReason}</TooltipContent>
+        </Tooltip>
+      );
+    }
+
+    return optionEl;
   };
 
   // Group options by section if sections are provided
@@ -271,6 +287,7 @@ export function PushButtonSelector({
   };
 
   return (
+    <TooltipProvider delayDuration={150}>
     <div className={`space-y-4 ${className}`}>
       {title && (
         <h3 className="text-h5 text-ods-text-primary">
@@ -319,5 +336,6 @@ export function PushButtonSelector({
         </div>
       )}
     </div>
+    </TooltipProvider>
   );
 }

package/src/components/layout/page-layout.tsx

@@ -99,6 +99,6 @@ export function PageLayout({
 }
 
 export type { PageActionButton } from '../ui/page-actions'
-export { TitleBlock } from './title-block'
+export { TitleBlock, TITLE_BLOCK_MIN_HEIGHT } from './title-block'
 export type { TitleBlockProps } from './title-block'
 export default PageLayout

package/src/components/layout/title-block.tsx

@@ -31,6 +31,17 @@ import { EntityImage } from '../ui/entity-image'
 import { PageActions, type PageActionButton } from '../ui/page-actions'
 import { BackButton } from './back-button'
 
+/**
+ * Minimum height of the title block's content column, matched to the action
+ * button height: the icon button on mobile (`h-11` → 44px) and the default
+ * button on desktop (`md:h-12` → 48px). Applied to the inner title column (which
+ * has no padding) rather than the root — the root's `pt`/`mb` are box-sizing
+ * border-box and would otherwise absorb the floor. Keeps the header a consistent
+ * height across pages whether or not they render action buttons, so the content
+ * below starts at the same baseline. Exported so other page chrome can reuse it.
+ */
+export const TITLE_BLOCK_MIN_HEIGHT = 'min-h-11 md:min-h-12'
+
 export interface TitleBlockProps {
   title?: string
   subtitle?: string
@@ -83,7 +94,7 @@ export function TitleBlock({
         className,
       )}
     >
-      <div className="flex flex-col gap-[var(--spacing-system-xs)] flex-1 min-w-0">
+      <div className={cn('flex flex-col justify-center gap-[var(--spacing-system-xs)] flex-1 min-w-0', TITLE_BLOCK_MIN_HEIGHT)}>
         {backButton && (
           <BackButton
             onClick={backButton.onClick}

package/src/components/tickets/help-center-list.tsx

@@ -55,9 +55,13 @@ export interface HelpCenterListProps {
    *  to hide). Omit ⇒ `DevSectionPage`'s default (`Back to home` → `/`), which
    *  embedders whose home isn't `/` MUST override. */
   backButton?: { label?: string; href?: string } | false
+  /** Override the hero title (forwarded to `DevSectionPage.title`). Defaults to
+   *  the `tickets` section copy ("Help Center"). Set this to brand the surface
+   *  for an embed that wants its own label (e.g. "Support Tickets"). */
+  title?: string
 }
 
-export function HelpCenterList({ toast = defaultToast, backButton }: HelpCenterListProps = {}) {
+export function HelpCenterList({ toast = defaultToast, backButton, title }: HelpCenterListProps = {}) {
   const identity = useChatIdentity()
   const searchParams = useSearchParams()
   const router = useRouter()
@@ -85,14 +89,19 @@ export function HelpCenterList({ toast = defaultToast, backButton }: HelpCenterL
   // mounts in the `preControls` slot.
   if (identity.isLoading) {
     return (
-      <DevSectionPage sectionKey="tickets" backButton={backButton} preControls={<HelpCenterCreateFormSkeleton />}>
+      <DevSectionPage
+        sectionKey="tickets"
+        backButton={backButton}
+        title={title}
+        preControls={<HelpCenterCreateFormSkeleton />}
+      >
         <DevCardRowSkeletonList />
       </DevSectionPage>
     )
   }
   if (identity.authTier === 'anon' || !identity.user?.email) {
     return (
-      <DevSectionPage sectionKey="tickets" backButton={backButton}>
+      <DevSectionPage sectionKey="tickets" backButton={backButton} title={title}>
         <EmptyState
           type="generic"
           title="Sign in to manage tickets"
@@ -128,6 +137,7 @@ export function HelpCenterList({ toast = defaultToast, backButton }: HelpCenterL
       sessionName={sessionName}
       sessionEmail={sessionEmail}
       backButton={backButton}
+      title={title}
     />
   )
 }
@@ -145,6 +155,7 @@ interface AuthedProps {
   sessionName: string
   sessionEmail: string
   backButton?: { label?: string; href?: string } | false
+  title?: string
 }
 
 function HelpCenterListAuthed({
@@ -159,6 +170,7 @@ function HelpCenterListAuthed({
   sessionName,
   sessionEmail,
   backButton,
+  title,
 }: AuthedProps) {
   const queryClient = useQueryClient()
   const [optimisticTickets, setOptimisticTickets] = useState<OptimisticTicket[]>([])
@@ -386,7 +398,7 @@ function HelpCenterListAuthed({
   )
 
   return (
-    <DevSectionPage sectionKey="tickets" backButton={backButton} preControls={form}>
+    <DevSectionPage sectionKey="tickets" backButton={backButton} title={title} preControls={form}>
       {body}
     </DevSectionPage>
   )

package/src/components/tool-icon.tsx

@@ -25,6 +25,7 @@ const toolIconMap: Record<ToolType, (size: number, className?: string) => React.
 	[ToolTypeValues.OPENFRAME]: renderOpenFrameLogo,
 	[ToolTypeValues.OPENFRAME_CHAT]: renderOpenFrameLogo,
 	[ToolTypeValues.OPENFRAME_CLIENT]: renderOpenFrameLogo,
+	[ToolTypeValues.OPENFRAME_RMM]: renderOpenFrameLogo,
 	[ToolTypeValues.AUTHENTIK]: (size, className) => <AuthentikLogoGreyIcon size={size} className={className} />,
 	[ToolTypeValues.OSQUERY]: (size, className) => <OsqueryLogoGreyIcon size={size} className={className} />,
 	[ToolTypeValues.SYSTEM]: () => null,

package/src/types/tool.types.ts

@@ -13,6 +13,7 @@ export const ToolTypeValues = {
   OPENFRAME: 'OPENFRAME',
   OPENFRAME_CHAT: 'OPENFRAME_CHAT',
   OPENFRAME_CLIENT: 'OPENFRAME_CLIENT',
+  OPENFRAME_RMM: 'OPENFRAME_RMM',
   OSQUERY: 'OSQUERY',
   SYSTEM: 'SYSTEM'
 } as const
@@ -30,6 +31,7 @@ export const toolLabels: Record<ToolType, string> = {
   OPENFRAME: 'OpenFrame',
   OPENFRAME_CHAT: 'OpenFrame Chat',
   OPENFRAME_CLIENT: 'OpenFrame Client',
+  OPENFRAME_RMM: 'OpenFrame RMM',
   OSQUERY: 'Osquery',
   SYSTEM: 'System'
 }

package/src/utils/tool-utils.ts

@@ -73,6 +73,17 @@ const toolAliasMap: Record<string, ToolType> = {
   'openframe-client': 'OPENFRAME_CLIENT',
   'openframeclient': 'OPENFRAME_CLIENT',
 
+  // OpenFrame RMM
+  'RMM': 'OPENFRAME_RMM',
+  'rmm': 'OPENFRAME_RMM',
+  'OPENFRAME_RMM': 'OPENFRAME_RMM',
+  'OPENFRAME-RMM': 'OPENFRAME_RMM',
+  'OPENFRAMERMM': 'OPENFRAME_RMM',
+  'openframe_rmm': 'OPENFRAME_RMM',
+  'openframe-rmm': 'OPENFRAME_RMM',
+  'openframermm': 'OPENFRAME_RMM',
+  'openframe-rmm-agent': 'OPENFRAME_RMM',
+
   // OSQUERY
   'OSQUERY': 'OSQUERY',