@flamingo-stack/openframe-frontend-core 0.0.225 → 0.0.227

package/src/components/ui/modal-v2.tsx

@@ -80,7 +80,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           data-state={state}
           className={cn(
             "absolute inset-0 bg-black/50 backdrop-blur-[2px] md:backdrop-blur-none",
-            "duration-200",
+            "duration-200 fill-mode-forwards",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
             // Hold the hidden end-state until unmount so the backdrop doesn't
@@ -101,7 +101,7 @@ const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
             "bg-ods-bg md:bg-ods-card",
             "border border-ods-border rounded-md shadow-xl",
             "p-[var(--spacing-system-xl)] gap-[var(--spacing-system-l)]",
-            "duration-200",
+            "duration-200 fill-mode-forwards",
             "data-[state=open]:animate-in data-[state=open]:fade-in-0",
             "data-[state=open]:slide-in-from-bottom-4 md:data-[state=open]:slide-in-from-bottom-0 md:data-[state=open]:zoom-in-95",
             "data-[state=closed]:animate-out data-[state=closed]:fade-out-0",

package/src/components/ui/ticket-status-config-row.tsx

@@ -37,12 +37,48 @@ export interface TicketStatusConfigRowProps {
   isDragging?: boolean
 }
 
+let dismissOpenTooltip: (() => void) | null = null
+
 function WithLeftTooltip({ content, children }: { content?: string; children: React.ReactElement }) {
+  const [open, setOpen] = React.useState(false)
+  const isTouchRef = React.useRef(false)
+  const close = React.useCallback(() => setOpen(false), [])
+
   if (!content) return children
+
+  const toggleFromTouch = () => {
+    setOpen(prev => {
+      const next = !prev
+      if (next) {
+        if (dismissOpenTooltip && dismissOpenTooltip !== close) dismissOpenTooltip()
+        dismissOpenTooltip = close
+      } else if (dismissOpenTooltip === close) {
+        dismissOpenTooltip = null
+      }
+      return next
+    })
+  }
+
   return (
     <TooltipProvider delayDuration={150}>
-      <Tooltip>
-        <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <Tooltip open={open} onOpenChange={setOpen}>
+        <TooltipTrigger
+          asChild
+          onPointerDown={e => {
+            isTouchRef.current = e.pointerType === 'touch'
+            if (!isTouchRef.current) return
+            e.preventDefault()
+            toggleFromTouch()
+          }}
+          onFocus={e => {
+            if (isTouchRef.current) e.preventDefault()
+          }}
+          onClick={e => {
+            if (isTouchRef.current) e.preventDefault()
+          }}
+        >
+          {children}
+        </TooltipTrigger>
         <TooltipContent side="left" className="max-w-xs">
           {content}
         </TooltipContent>
@@ -75,16 +111,17 @@ export function TicketStatusConfigRow({
   // Custom rows render as filled pills (no border); system rows take the
   // page-configured variant (outline/primary). text-h5 already uppercases.
   const previewVariant: SystemTagVariant | undefined = systemTagVariant ?? (isSystem ? undefined : 'primary')
+  const colClass = 'min-w-0 grow basis-[calc(50%-6px)] md:basis-0'
 
   return (
     <div
       className={cn(
-        'flex w-full items-center gap-[var(--spacing-system-m)] rounded-md border border-ods-border bg-ods-card',
+        'flex w-full items-start gap-3 rounded-md border border-ods-border bg-ods-card md:gap-[var(--spacing-system-m)]',
         'p-[var(--spacing-system-m)]',
         isDragging && 'opacity-70 shadow-lg',
       )}
     >
-      <div className="flex size-8 shrink-0 items-center justify-center text-ods-text-secondary">
+      <div className="flex h-11 w-8 shrink-0 items-center justify-center text-ods-text-secondary md:h-12">
         {isSystem ? (
           <DraggerIcon size={24} aria-hidden className="opacity-40" />
         ) : (
@@ -100,45 +137,47 @@ export function TicketStatusConfigRow({
         )}
       </div>
 
-      <div className="flex flex-1 min-w-0 flex-col gap-[var(--spacing-system-xxs)]">
-        <Input
-          value={name}
-          onChange={e => onNameChange?.(e.target.value)}
-          disabled={isSystem}
-          readOnly={isSystem}
-          aria-label="Status name"
-          maxLength={50}
-        />
-      </div>
-
-      {showColorPicker ? (
-        <div className="flex flex-1 min-w-0">
-          <ColorPresetSelect value={color} presetKey={presetKey} onChange={onColorChange} />
+      <div className="flex min-w-0 flex-1 flex-wrap items-start gap-x-3 gap-y-4 md:flex-nowrap md:gap-[var(--spacing-system-m)]">
+        <div className={cn('flex flex-col gap-[var(--spacing-system-xxs)]', colClass)}>
+          <Input
+            value={name}
+            onChange={e => onNameChange?.(e.target.value)}
+            disabled={isSystem}
+            readOnly={isSystem}
+            aria-label="Status name"
+            maxLength={50}
+          />
         </div>
-      ) : (
-        <div aria-hidden className="hidden flex-1 min-w-0 md:block" />
-      )}
 
-      {showColorPicker && isCustomColor ? (
-        <div className="flex flex-1 min-w-0">
-          <ColorPickerInput value={color} onChange={next => onColorChange({ color: next, preset: undefined })} />
-        </div>
-      ) : (
-        <div aria-hidden className="hidden flex-1 min-w-0 md:block" />
-      )}
+        {showColorPicker ? (
+          <div className={cn('flex', colClass)}>
+            <ColorPresetSelect value={color} presetKey={presetKey} onChange={onColorChange} />
+          </div>
+        ) : (
+          <div aria-hidden className={cn('hidden md:block', colClass)} />
+        )}
 
-      <div className="flex h-12 flex-1 min-w-0 items-center justify-end">
-        <TicketStatusTag
-          status={statusKey}
-          label={name || ' '}
-          color={previewColor}
-          variant={previewVariant}
-          showIcon={isSystem}
-          className="max-w-full"
-        />
+        {showColorPicker && isCustomColor ? (
+          <div className={cn('flex', colClass)}>
+            <ColorPickerInput value={color} onChange={next => onColorChange({ color: next, preset: undefined })} />
+          </div>
+        ) : (
+          <div aria-hidden className={cn('hidden md:block', colClass)} />
+        )}
+
+        <div className={cn('flex h-11 items-center justify-start md:h-12 md:justify-end', colClass)}>
+          <TicketStatusTag
+            status={statusKey}
+            label={name || ' '}
+            color={previewColor}
+            variant={previewVariant}
+            showIcon={isSystem}
+            className="max-w-full"
+          />
+        </div>
       </div>
 
-      <div className="flex size-12 shrink-0 items-center justify-center">
+      <div className="flex h-11 w-12 shrink-0 items-center justify-center md:h-12">
         {isSystem ? (
           <WithLeftTooltip content={systemTooltip}>
             <button
@@ -159,7 +198,7 @@ export function TicketStatusConfigRow({
                 aria-label="Delete status"
                 disabled={deleteDisabled}
                 onClick={deleteDisabled ? undefined : onDelete}
-                className="size-12"
+                className={cn('size-11 md:size-12', deleteDisabled && 'pointer-events-none')}
               >
                 <TrashIcon className="text-ods-error"/>
               </Button>

package/src/components/ui/ticket-status-tag.tsx

@@ -2,6 +2,7 @@
 
 import React from 'react'
 import { ActionsMenuDropdown } from './actions-menu'
+import { ColorSwatch } from './color-swatch'
 import { Tag, type TagProps, tagVariants } from './tag'
 import { CheckCircleIcon, Chevron02DownIcon } from '../icons-v2-generated'
 import { cn } from '../../utils/cn'
@@ -257,13 +258,7 @@ export function TicketStatusTag({
           items: options.map(option => ({
             id: option.id,
             label: option.name,
-            icon: (
-              <span
-                className="size-2 shrink-0 rounded-full"
-                style={{ backgroundColor: option.color }}
-                aria-hidden
-              />
-            ),
+            icon: <ColorSwatch color={option.color} />,
             onClick: () => onSelect(option.id),
             disabled: isPending,
           })),

package/src/stories/NotificationDrawer.stories.tsx

@@ -2,13 +2,17 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import * as React from 'react';
 import { Button } from '../components/ui/button';
 import {
+  ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
+  ApprovalRequestNotificationTile,
   NotificationDrawer,
   NotificationPopups,
   NotificationTile,
   NotificationsProvider,
+  isApprovalNotification,
   useNotifications,
   type Notification,
   type NotificationVariant,
+  type RenderNotificationTile,
 } from '../components/features/notifications';
 import { Toaster } from '../components/ui/toaster';
 
@@ -235,9 +239,64 @@ export const DrawerWithSeedData: Story = {
  * the same tile isn't shown twice. Toggle "Show Notifications" inside the
  * drawer to disable pop-ups entirely.
  */
+/** A deliberately long script so the command section overflows and scrolls. */
+const LONG_POWERSHELL = [
+  '# Full diagnostic bundle — collect logs, configs and telemetry',
+  '$ErrorActionPreference = "Stop"',
+  '$stamp = Get-Date -Format "yyyyMMdd_HHmmss"',
+  '$out = "C:\\Logs\\diag_$stamp"',
+  'New-Item -ItemType Directory -Path $out -Force | Out-Null',
+  '',
+  'Write-Host "Collecting event logs..."',
+  'foreach ($log in "System","Application","Security","Setup") {',
+  '  wevtutil epl $log "$out\\$log.evtx"',
+  '}',
+  '',
+  'Write-Host "Collecting installed software..."',
+  'Get-ItemProperty HKLM:\\Software\\Microsoft\\Windows\\CurrentVersion\\Uninstall\\* |',
+  '  Select-Object DisplayName, DisplayVersion, Publisher, InstallDate |',
+  '  Sort-Object DisplayName |',
+  '  Export-Csv "$out\\software.csv" -NoTypeInformation',
+  '',
+  'Write-Host "Collecting running services and processes..."',
+  'Get-Service | Export-Csv "$out\\services.csv" -NoTypeInformation',
+  'Get-Process | Select-Object Name, Id, CPU, WorkingSet | Export-Csv "$out\\processes.csv" -NoTypeInformation',
+  '',
+  'Write-Host "Collecting network configuration..."',
+  'ipconfig /all > "$out\\ipconfig.txt"',
+  'Get-NetTCPConnection | Export-Csv "$out\\connections.csv" -NoTypeInformation',
+  '',
+  'Write-Host "Compressing bundle..."',
+  'Compress-Archive -Path "$out\\*" -DestinationPath "$out.zip" -Force',
+  'Remove-Item -Path $out -Recurse -Force',
+  'Write-Host "Diagnostic bundle ready at $out.zip"',
+].join('\n');
+
+/**
+ * Renders approval-request notifications with the dedicated
+ * `ApprovalRequestNotificationTile` (collapsible command section + Approve /
+ * Reject), falling back to the default tile for everything else.
+ */
+const renderApprovalTile: RenderNotificationTile = (n, { onComplete, onSettle, liveDurationMs }) => {
+  if (!isApprovalNotification(n)) return undefined;
+  return (
+    <ApprovalRequestNotificationTile
+      notification={n}
+      onApprove={(id) => alert(`Approved ${id}`)}
+      onReject={(id) => alert(`Rejected ${id}`)}
+      onComplete={onComplete}
+      onSettle={onSettle}
+      liveDurationMs={liveDurationMs}
+    />
+  );
+};
+
 export const LivePlayground: Story = {
   render: () => (
-    <NotificationsProvider onHistoryClick={() => alert('Navigate to /notifications')}>
+    <NotificationsProvider
+      onHistoryClick={() => alert('Navigate to /notifications')}
+      renderTile={renderApprovalTile}
+    >
       <NotificationDrawer />
       <NotificationPopups />
       <PlaygroundControls />
@@ -249,6 +308,7 @@ export const LivePlayground: Story = {
 function PlaygroundControls() {
   const { addNotification, markAllRead, clear, toggle, notifications, unreadCount, showPopups } =
     useNotifications();
+  const approvalSeq = React.useRef(0);
 
   const fire = (variant: NotificationVariant, title: string, description: string) => {
     addNotification({ variant, title, description });
@@ -263,6 +323,84 @@ function PlaygroundControls() {
     });
   };
 
+  const fireApproval = (
+    title: string,
+    description: string,
+    toolCalls: Array<Record<string, unknown>>,
+  ) => {
+    const n = approvalSeq.current++;
+    addNotification({
+      variant: 'warning',
+      title,
+      description,
+      meta: {
+        contextType: ADMIN_APPROVAL_REQUEST_CONTEXT_TYPE,
+        approvalRequestId: `req-${n}`,
+        approvalType: 'ADMIN',
+        toolCalls: toolCalls.map((tc, i) => ({
+          toolExecutionRequestId: `ter-${n}-${i}`,
+          requiresApproval: true,
+          ...tc,
+        })),
+      },
+    });
+  };
+
+  const fireSingleApproval = () =>
+    fireApproval('Tech Required', 'Approval is required to execute the command.', [
+      {
+        toolName: 'run_command',
+        toolTitle: 'Run PowerShell command',
+        toolType: 'TACTICAL_RMM',
+        toolExplanation:
+          'Collects all events from System, Application, and Security logs for today and exports them to a CSV file at C:\\Logs\\today_logs.csv.',
+        toolCallArguments: {
+          command:
+            '$today = (Get-Date).Date\n$logs = Get-WinEvent -FilterHashtable @{ LogName = "System","Application","Security"; StartTime = $today }\n$logs | Export-Csv -Path "C:\\Logs\\today_logs.csv" -NoTypeInformation',
+        },
+      },
+    ]);
+
+  const fireBatchApproval = () =>
+    fireApproval('Multiple actions need approval', 'Mingo wants to run 3 commands on SRV-DB01.', [
+      {
+        toolName: 'run_command',
+        toolTitle: 'Restart print spooler',
+        toolType: 'TACTICAL_RMM',
+        toolExplanation: 'Restarts the Spooler service to clear a stuck print queue.',
+        toolCallArguments: { command: 'Restart-Service -Name Spooler -Force' },
+      },
+      {
+        toolName: 'run_query',
+        toolTitle: 'Query disk usage',
+        toolType: 'OPENFRAME',
+        toolExplanation: 'Reports free space per logical volume.',
+        toolCallArguments: { query: 'SELECT device_id, free_space, size FROM logical_drives;' },
+      },
+      {
+        toolName: 'run_command',
+        toolTitle: 'Purge stale temp files',
+        toolType: 'TACTICAL_RMM',
+        toolExplanation: 'Deletes %TEMP% contents older than 7 days to reclaim space.',
+        toolCallArguments: {
+          command:
+            'Get-ChildItem $env:TEMP -Recurse | Where-Object { $_.LastWriteTime -lt (Get-Date).AddDays(-7) } | Remove-Item -Force -Recurse -ErrorAction SilentlyContinue',
+        },
+      },
+    ]);
+
+  const fireLongApproval = () =>
+    fireApproval('Tech Required', 'Approval is required to run a diagnostic script.', [
+      {
+        toolName: 'run_script',
+        toolTitle: 'Run full diagnostic bundle',
+        toolType: 'TACTICAL_RMM',
+        toolExplanation:
+          'Collects event logs, installed software, services, processes and network configuration, then compresses everything into a single uploadable archive.',
+        toolCallArguments: { script: LONG_POWERSHELL },
+      },
+    ]);
+
   return (
     <div className="flex max-w-2xl flex-col gap-4">
       <div className="rounded-md border border-ods-border bg-ods-card p-3">
@@ -311,6 +449,15 @@ function PlaygroundControls() {
         <Button variant="outline" onClick={fireWithDeepLink}>
           Fire with deep-link
         </Button>
+        <Button variant="warning" onClick={fireSingleApproval}>
+          Fire approval
+        </Button>
+        <Button variant="warning" onClick={fireBatchApproval}>
+          Fire batch approval
+        </Button>
+        <Button variant="warning" onClick={fireLongApproval}>
+          Fire long-command approval
+        </Button>
       </div>
 
       <div className="flex flex-wrap gap-2">