@flamingo-stack/openframe-frontend-core 0.0.312 → 0.0.313-snapshot.20260623203621

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.312",
+  "version": "0.0.313-snapshot.20260623203621",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "main": "./dist/index.js",

package/src/components/features/time-tracker/time-tracker-panel.tsx

@@ -30,8 +30,8 @@ export function TimeTrackerPanel({
   runningSince,
   accumulatedMs,
   ticketOptions,
-  selectedTicketIds,
-  onSelectedTicketsChange,
+  selectedTicketId,
+  onSelectedTicketChange,
   onTicketSearch,
   ticketsLoading,
   notes,
@@ -57,7 +57,7 @@ export function TimeTrackerPanel({
 
   const isRunning = status === 'tracking'
   const isActive = status !== 'ready'
-  const hasContent = selectedTicketIds.length > 0 || notes.trim() !== ''
+  const hasContent = selectedTicketId != null || notes.trim() !== ''
   const showFieldError = isActive && showValidationError && !hasContent
 
   // Reset the validation flag once a session ends so the next one starts clean.
@@ -73,6 +73,25 @@ export function TimeTrackerPanel({
     onSubmit()
   }
 
+  const handleManualEntry = onManualEntry
+    ? () => {
+        onClose()
+        onManualEntry()
+      }
+    : undefined
+  const handleEntryClick = onEntryClick
+    ? (entry: TimeTrackerEntry) => {
+        onClose()
+        onEntryClick(entry)
+      }
+    : undefined
+  const handleOpenMyTime = onOpenMyTime
+    ? () => {
+        onClose()
+        onOpenMyTime()
+      }
+    : undefined
+
   const ticketAutocompleteOptions: AutocompleteOption[] = ticketOptions.map((t) => ({
     label: t.label,
     value: t.id,
@@ -150,9 +169,8 @@ export function TimeTrackerPanel({
         </div>
 
         <Autocomplete
-          multiple
-          value={selectedTicketIds}
-          onChange={onSelectedTicketsChange}
+          value={selectedTicketId}
+          onChange={onSelectedTicketChange}
           options={ticketAutocompleteOptions}
           placeholder="Assign Ticket"
           loading={ticketsLoading}
@@ -185,7 +203,7 @@ export function TimeTrackerPanel({
               </div>
             ) : (
               visibleEntries.map((entry) => (
-                <LastEntryRow key={entry.id} entry={entry} onClick={onEntryClick} />
+                <LastEntryRow key={entry.id} entry={entry} onClick={handleEntryClick} />
               ))
             )}
           </div>
@@ -195,7 +213,7 @@ export function TimeTrackerPanel({
           <Button
             variant="outline"
             className="min-w-0 flex-1"
-            onClick={onManualEntry}
+            onClick={handleManualEntry}
             disabled={!onManualEntry}
             leftIcon={<PlusCircleIcon className="text-ods-text-secondary" />}
           >
@@ -203,7 +221,7 @@ export function TimeTrackerPanel({
           </Button>
           <SplitButton
             variant="outline"
-            onClick={onOpenMyTime}
+            onClick={handleOpenMyTime}
             disabled={!onOpenMyTime && !onOpenMyTimeMenu}
             mainDisabled={!onOpenMyTime}
             groupAriaLabel="Open my time"

package/src/components/features/time-tracker/types.ts

@@ -32,8 +32,8 @@ export interface TimeTrackerData {
   accumulatedMs?: number
 
   ticketOptions: TimeTrackerTicketOption[]
-  selectedTicketIds: string[]
-  onSelectedTicketsChange: (ids: string[]) => void
+  selectedTicketId: string | null
+  onSelectedTicketChange: (id: string | null) => void
   /** Called as the user types in the ticket field; host performs the search. */
   onTicketSearch?: (query: string) => void
   ticketsLoading?: boolean

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/components/ui/dashboard-info-card.tsx

@@ -30,6 +30,8 @@ export interface DashboardInfoCardProps {
   tooltip?: React.ReactNode
   /** Override the value text className (default: text-h2) */
   valueClassName?: string
+  /** Secondary text rendered beside the value (e.g. an entry/item count). */
+  subValue?: React.ReactNode
 }
 
 export function DashboardInfoCard({
@@ -43,7 +45,8 @@ export function DashboardInfoCard({
   className,
   href,
   tooltip,
-  valueClassName
+  valueClassName,
+  subValue
 }: DashboardInfoCardProps) {
   const formattedValue = typeof value === 'number'
     ? value.toLocaleString()
@@ -65,6 +68,11 @@ export function DashboardInfoCard({
           <p className={cn("text-h2 text-ods-text-primary", valueClassName)}>
             {formattedValue}
           </p>
+          {subValue && (
+            <p className="text-h6 text-ods-text-secondary">
+              {subValue}
+            </p>
+          )}
           {percentage !== undefined && (
             progressVariant === 'warning' || progressVariant === 'error' ? (
               <Tag variant={progressVariant} label={`${percentage}%`} />

package/src/stories/TimeTracker.stories.tsx

@@ -78,8 +78,8 @@ const meta = {
   args: {
     status: 'ready',
     ticketOptions: ALL_TICKETS,
-    selectedTicketIds: [],
-    onSelectedTicketsChange: () => {},
+    selectedTicketId: null,
+    onSelectedTicketChange: () => {},
     notes: '',
     onNotesChange: () => {},
     lastEntries: SEED_ENTRIES,
@@ -99,7 +99,7 @@ interface HostInit {
   status?: TimeTrackerStatus
   runningSince?: number | null
   accumulatedMs?: number
-  selectedTicketIds?: string[]
+  selectedTicketId?: string | null
   notes?: string
   lastEntries?: TimeTrackerEntry[]
   /** When true, ticket options are filtered asynchronously (server-search simulation). */
@@ -110,7 +110,7 @@ function useTimeTrackerHost(initial: HostInit = {}): TimeTrackerData {
   const [status, setStatus] = React.useState<TimeTrackerStatus>(initial.status ?? 'ready')
   const [runningSince, setRunningSince] = React.useState<number | null>(initial.runningSince ?? null)
   const [accumulatedMs, setAccumulatedMs] = React.useState(initial.accumulatedMs ?? 0)
-  const [selectedTicketIds, setSelectedTicketIds] = React.useState<string[]>(initial.selectedTicketIds ?? [])
+  const [selectedTicketId, setSelectedTicketId] = React.useState<string | null>(initial.selectedTicketId ?? null)
   const [notes, setNotes] = React.useState(initial.notes ?? '')
   const [lastEntries, setLastEntries] = React.useState<TimeTrackerEntry[]>(initial.lastEntries ?? SEED_ENTRIES)
 
@@ -138,8 +138,8 @@ function useTimeTrackerHost(initial: HostInit = {}): TimeTrackerData {
     runningSince,
     accumulatedMs,
     ticketOptions,
-    selectedTicketIds,
-    onSelectedTicketsChange: setSelectedTicketIds,
+    selectedTicketId,
+    onSelectedTicketChange: setSelectedTicketId,
     onTicketSearch,
     ticketsLoading: initial.serverSearch ? ticketsLoading : undefined,
     notes,
@@ -163,12 +163,12 @@ function useTimeTrackerHost(initial: HostInit = {}): TimeTrackerData {
       setStatus('ready')
       setRunningSince(null)
       setAccumulatedMs(0)
-      setSelectedTicketIds([])
+      setSelectedTicketId(null)
       setNotes('')
     },
     onSubmit: () => {
       const ms = currentElapsedMs()
-      const ticketId = selectedTicketIds[0]
+      const ticketId = selectedTicketId
       const entry: TimeTrackerEntry = {
         id: `entry-${Date.now()}`,
         durationLabel: formatDuration(ms),
@@ -182,7 +182,7 @@ function useTimeTrackerHost(initial: HostInit = {}): TimeTrackerData {
       setStatus('ready')
       setRunningSince(null)
       setAccumulatedMs(0)
-      setSelectedTicketIds([])
+      setSelectedTicketId(null)
       setNotes('')
     },
     onManualEntry: () => alert('Host: open the manual-entry form modal'),
@@ -224,7 +224,7 @@ export const PanelTracking: Story = {
     const host = useTimeTrackerHost({
       status: 'tracking',
       runningSince: Date.now() - 5_000,
-      selectedTicketIds: ['TICK-102'],
+      selectedTicketId: 'TICK-102',
     })
     return (
       <div className="max-w-[460px]">

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',