@flamingo-stack/openframe-frontend-core 0.0.740 → 0.0.742

package/src/components/features/scripts/execution-cells.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { cn } from '../../../utils/cn';
+import { AgentMark } from '../../agent-mark';
+import { MonitorIcon } from '../../icons-v2-generated/devices/monitor-icon';
+import { Tag } from '../../ui/tag';
+import { TruncateText } from '../../ui/truncate-text';
+import { scriptExecutionStatus } from './execution-status';
+
+/**
+ * The cells of the Execution History (Figma 155:38356) and the Result block
+ * of an execution's page. Each takes display values: the product maps its
+ * Relay records into them and keeps what only it has (links to an employee
+ * page, the deleted-user avatar) as slots.
+ */
+
+/** How an execution was dispatched, as the chip beside the person it ran for. */
+export function ExecutionSourceBadge({ source, className }: { source: string | null | undefined; className?: string }) {
+  // A `span`: the chip sits inside a line of text. It never shrinks; the name beside it ellipsizes.
+  // Labels are sentence case here; the Tag's h5 type scale uppercases them.
+  const tagProps = { as: 'span', variant: 'outline', className: cn('shrink-0', className) } as const;
+
+  if (source === 'SCHEDULED') return <Tag {...tagProps} label="Scheduled" />;
+  if (source === 'AI_ASSISTANT') {
+    // Mingo's own mark, the way the product stamps it everywhere else.
+    return <Tag {...tagProps} label="Mingo" icon={<AgentMark agent="mingo" className="size-4" />} />;
+  }
+  // MANUAL draws nothing: the person is the technician who clicked Run, so a chip would restate the name.
+  return null;
+}
+
+/**
+ * The Execution column: when it was dispatched over its id. The date filter
+ * sits on this column's header because its first line is that date.
+ */
+export function ExecutionTimestampCell({ timestamp, executionId }: { timestamp: string; executionId: string }) {
+  return (
+    <div className="flex min-w-0 flex-col justify-center gap-1">
+      <TruncateText>{timestamp}</TruncateText>
+      <TruncateText variant="h6" tone="secondary">
+        {executionId}
+      </TruncateText>
+    </div>
+  );
+}
+
+/** A status as its tag; the flex row keeps the tag at its own width in a stretch column. */
+export function ExecutionStatusCell({ status }: { status: string | null | undefined }) {
+  const presentation = scriptExecutionStatus(status);
+  return (
+    <div className="flex">
+      <Tag label={presentation?.label ?? String(status ?? '')} variant={presentation?.variant ?? 'grey'} />
+    </div>
+  );
+}
+
+/**
+ * The device an execution ran on, with its customer under it. The icon rides
+ * with the name only; the customer line starts under the icon, as the design
+ * has it. `name` is a node so a host can draw its own empty mark.
+ */
+export function ExecutionDeviceCell({ name, organization }: { name: ReactNode; organization?: string | null }) {
+  return (
+    <div className="flex min-w-0 flex-col justify-center gap-1">
+      <div className="flex min-w-0 items-center gap-1">
+        <MonitorIcon className="size-6 shrink-0 text-ods-text-secondary" />
+        {/* So the name shrinks and ellipsizes next to the icon. */}
+        <div className="min-w-0 flex-1">{typeof name === 'string' ? <TruncateText>{name}</TruncateText> : name}</div>
+      </div>
+      {organization && (
+        <TruncateText variant="h6" tone="secondary">
+          {organization}
+        </TruncateText>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Who an execution ran for, with the chip of what dispatched it: a schedule or
+ * Mingo runs on a technician's behalf, so the chip qualifies the name instead
+ * of standing in for it. The script's name is the second line where a list
+ * runs several scripts (a schedule's); a script's own list leaves it out.
+ * The avatar and the name are slots: the product links the name to the
+ * person's page and draws a deleted account its own way.
+ */
+export function ExecutionInitiatorCell({
+  avatar,
+  name,
+  source,
+  scriptName,
+}: {
+  avatar: ReactNode;
+  name: ReactNode;
+  source?: string | null;
+  scriptName?: string | null;
+}) {
+  return (
+    <div className="flex min-w-0 flex-1 items-center gap-[var(--spacing-system-xsf)]">
+      {avatar}
+      <div className="flex min-w-0 flex-1 flex-col justify-center">
+        <div className="flex min-w-0 items-center gap-[var(--spacing-system-xxs)]">
+          {typeof name === 'string' ? <TruncateText>{name}</TruncateText> : name}
+          <ExecutionSourceBadge source={source} />
+        </div>
+        {scriptName && (
+          <TruncateText variant="h6" tone="secondary">
+            {scriptName}
+          </TruncateText>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** The Result column: the first two lines of what the run printed, or the host's empty mark. */
+export function ExecutionResultCell({ result, empty = null }: { result?: string | null; empty?: ReactNode }) {
+  return result ? <TruncateText lines={2}>{result}</TruncateText> : <>{empty}</>;
+}
+
+/**
+ * What an execution printed, as its page shows it: the whole output with its
+ * line breaks, labelled "Result". A run still in flight with nothing printed
+ * yet says so (its page polls, so the output streams in) instead of a dead
+ * end; a finished run with no output shows the host's empty mark.
+ */
+export function ScriptExecutionResult({
+  result,
+  inFlight = false,
+  empty,
+  className,
+}: {
+  result?: string | null;
+  inFlight?: boolean;
+  empty: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn('flex flex-col gap-[var(--spacing-system-xxs)] p-[var(--spacing-system-m)]', className)}>
+      {result ? (
+        <div className="whitespace-pre-wrap break-words text-ods-text-primary text-h4">{result}</div>
+      ) : (
+        <div className="text-ods-text-secondary text-h4">{inFlight ? 'Waiting for output…' : empty}</div>
+      )}
+      <div className="text-ods-text-secondary text-h6">Result</div>
+    </div>
+  );
+}

package/src/components/features/scripts/execution-status.ts

@@ -0,0 +1,42 @@
+/**
+ * How a script execution's status and source are presented: one table, read
+ * by the product's Execution History, its execution page and the pictures of
+ * them. No JSX and no imports, so a server module or a skeleton can read it.
+ */
+
+/** The statuses a script execution has (the product's `ScriptExecutionStatus`). */
+export type ScriptExecutionStatus = 'QUEUED' | 'RUNNING' | 'SUCCESS' | 'FAILED';
+
+/** How an execution was dispatched (the product's `ExecutionSource`). */
+export type ScriptExecutionSource = 'MANUAL' | 'SCHEDULED' | 'AI_ASSISTANT';
+
+/** The `Tag` colour a status is drawn in. */
+export type ScriptExecutionStatusVariant = 'success' | 'error' | 'warning' | 'grey';
+
+export interface ScriptExecutionStatusPresentation {
+  /** Human label (SUCCESS reads as "Completed"). */
+  label: string;
+  variant: ScriptExecutionStatusVariant;
+  /** Not a final state: a page showing it polls until it is. */
+  inFlight: boolean;
+}
+
+/**
+ * Every status, exhaustively. A host whose API grows a status checks its own
+ * enum against these keys, so a new status fails to compile there instead of
+ * landing in a grey tag with its raw value.
+ */
+export const SCRIPT_EXECUTION_STATUS_PRESENTATION = {
+  QUEUED: { label: 'Queued', variant: 'grey', inFlight: true },
+  RUNNING: { label: 'Running', variant: 'warning', inFlight: true },
+  SUCCESS: { label: 'Completed', variant: 'success', inFlight: false },
+  FAILED: { label: 'Failed', variant: 'error', inFlight: false },
+} as const satisfies Record<ScriptExecutionStatus, ScriptExecutionStatusPresentation>;
+
+/** The presentation of a status, or undefined for a value the table does not know. */
+export function scriptExecutionStatus(
+  status: string | null | undefined,
+): ScriptExecutionStatusPresentation | undefined {
+  if (!status || !Object.prototype.hasOwnProperty.call(SCRIPT_EXECUTION_STATUS_PRESENTATION, status)) return undefined;
+  return SCRIPT_EXECUTION_STATUS_PRESENTATION[status as ScriptExecutionStatus];
+}

package/src/components/features/scripts/index.ts

@@ -0,0 +1,42 @@
+'use client';
+
+export {
+  ExecutionDeviceCell,
+  ExecutionInitiatorCell,
+  ExecutionResultCell,
+  ExecutionSourceBadge,
+  ExecutionStatusCell,
+  ExecutionTimestampCell,
+  ScriptExecutionResult,
+} from './execution-cells';
+export { SCRIPT_EXECUTION_STATUS_PRESENTATION, scriptExecutionStatus } from './execution-status';
+export type {
+  ScriptExecutionSource,
+  ScriptExecutionStatus,
+  ScriptExecutionStatusPresentation,
+  ScriptExecutionStatusVariant,
+} from './execution-status';
+export { ScheduleDateTimeCell, ScriptNameCell } from './script-cells';
+export { ScriptExecutionsTable } from './script-executions-table';
+export type { ScriptExecutionsTableProps, ScriptExecutionTableRow } from './script-executions-table';
+export { ScriptSchedulesTable } from './script-schedules-table';
+export type { ScriptScheduleTableRow, ScriptSchedulesTableProps } from './script-schedules-table';
+export { ScriptShellBadge } from './script-shell-badge';
+export type { ScriptShellBadgeProps } from './script-shell-badge';
+export { ScriptsTable } from './scripts-table';
+export type { ScriptsTableProps, ScriptTableRow } from './scripts-table';
+export {
+  EXECUTION_COLUMNS,
+  EXECUTIONS_TABLE_COLUMNS,
+  SCHEDULE_COLUMNS,
+  SCHEDULES_TABLE_COLUMNS,
+  SCRIPT_COLUMNS,
+  SCRIPTS_TAB_WIDTHS,
+  SCRIPTS_TABLE_COLUMNS,
+} from './scripts-table-columns';
+export type { ScriptsTableColumnLayout } from './scripts-table-columns';
+export { OpenInNewTabCell, RowActionsCell, scriptsColumnMeta } from './scripts-table-shared';
+export { SCRIPTS_TABS } from './scripts-tabs';
+export type { ScriptsTabId } from './scripts-tabs';
+export { SCRIPT_SHELL_TYPES, scriptShellLabel, scriptShellType } from './shell-types';
+export * from './schedule-form';

package/src/components/features/scripts/schedule-form/index.ts

@@ -0,0 +1,59 @@
+'use client';
+
+export { SCHEDULE_OFFLINE_BEHAVIOR, SCHEDULE_TIME_REFERENCE, SCRIPT_SCHEDULE_TRIGGER } from './schedule-enums';
+export type { ScheduleOfflineBehavior, ScheduleTimeReference, ScriptScheduleTrigger } from './schedule-enums';
+export { ScheduleFormFields } from './schedule-form-fields';
+export type { ScheduleFormFieldsProps } from './schedule-form-fields';
+export {
+  DEFAULT_SCHEDULE_FORM_VALUES,
+  EMPTY_SCHEDULE_SCRIPT_ROW,
+  SCHEDULE_OFFLINE_BEHAVIOR_OPTIONS,
+  SCHEDULE_TIME_REFERENCE_OPTIONS,
+  SCHEDULE_TRIGGER_OPTIONS,
+} from './schedule-form-types';
+export type {
+  RenderScheduleScriptSearch,
+  ScheduleFormData,
+  ScheduleFormEnvVar,
+  ScheduleFormGate,
+  ScheduleFormScriptRow,
+  ScheduleScriptSearchSlotProps,
+  ScheduleTimeSlot,
+} from './schedule-form-types';
+export { ScheduleIntervalInput } from './schedule-interval-input';
+export { ScheduleOfflineFields } from './schedule-offline-fields';
+export { ScheduleScriptPickerCard } from './schedule-script-picker-card';
+export { ScheduleScriptSearchField } from './schedule-script-search-field';
+export type { ScheduleScriptSearchFieldProps, ScheduleScriptSearchResult } from './schedule-script-search-field';
+export { ScheduleScriptsField } from './schedule-scripts-field';
+export type { ScheduleScriptsFieldProps } from './schedule-scripts-field';
+export { ScheduleTimingFields } from './schedule-timing-fields';
+export type { ScheduleTimingFieldsProps } from './schedule-timing-fields';
+export {
+  applyTimeSlot,
+  dateToTimeSlot,
+  DEFAULT_RECONNECT_WINDOW,
+  DURATION_UNIT_LABELS,
+  DURATION_UNIT_OPTIONS,
+  DURATION_UNIT_SECONDS,
+  DURATION_UNIT_VALUES,
+  earliestDeviceLocalDay,
+  earliestScheduleDay,
+  fromScheduleInstant,
+  getTimeSlotOptions,
+  isDeviceLocalTime,
+  isEventTrigger,
+  isRetryOnReconnect,
+  isScheduleStartInPast,
+  isSlotOnGrid,
+  isStartInPastAndChanged,
+  MIN_RECONNECT_MINUTES,
+  MIN_REPEAT_MINUTES,
+  NO_SLOTS_TODAY_MESSAGE,
+  PAST_START_MESSAGE,
+  slotToLabel,
+  snapReconnectInterval,
+  snapRepeatInterval,
+  startOfToday,
+} from './schedule-timing';
+export type { DurationUnit } from './schedule-timing';

package/src/components/features/scripts/schedule-form/schedule-enums.ts

@@ -0,0 +1,26 @@
+/**
+ * The three schedule enums the form branches on, with the values the OpenFrame
+ * API uses. A host's generated enums carry the same strings, so its values and
+ * these are assignable both ways.
+ */
+
+/** What fires a schedule: a date and time, or a device coming online. */
+export const SCRIPT_SCHEDULE_TRIGGER = {
+  DATE_TIME: 'DATE_TIME',
+  DEVICE_ONLINE: 'DEVICE_ONLINE',
+} as const;
+export type ScriptScheduleTrigger = (typeof SCRIPT_SCHEDULE_TRIGGER)[keyof typeof SCRIPT_SCHEDULE_TRIGGER];
+
+/** Which clock a schedule's date and time mean: the account's, or each device's. */
+export const SCHEDULE_TIME_REFERENCE = {
+  SERVER: 'SERVER',
+  DEVICE_LOCAL: 'DEVICE_LOCAL',
+} as const;
+export type ScheduleTimeReference = (typeof SCHEDULE_TIME_REFERENCE)[keyof typeof SCHEDULE_TIME_REFERENCE];
+
+/** What a schedule does with a device that is offline when it fires. */
+export const SCHEDULE_OFFLINE_BEHAVIOR = {
+  SKIP: 'SKIP',
+  RETRY_ON_RECONNECT: 'RETRY_ON_RECONNECT',
+} as const;
+export type ScheduleOfflineBehavior = (typeof SCHEDULE_OFFLINE_BEHAVIOR)[keyof typeof SCHEDULE_OFFLINE_BEHAVIOR];

package/src/components/features/scripts/schedule-form/schedule-form-fields.tsx

@@ -0,0 +1,249 @@
+'use client';
+'use no memo';
+
+import { useCallback } from 'react';
+import { Controller, useFormContext, useWatch } from 'react-hook-form';
+import { useContentMdUp } from '../../../../hooks/ui/use-content-breakpoint';
+import { OS_PLATFORMS, type OSPlatformOption } from '../../../../utils/os-platforms';
+import { Input } from '../../../ui/input';
+import { Label } from '../../../ui/label';
+import { RadioGroupBlock } from '../../../ui/radio-group';
+import { Textarea } from '../../../ui/textarea';
+import { TruncateText } from '../../../ui/truncate-text';
+import { SelectButton } from '../../select-button';
+import type { ScheduleTimeReference } from './schedule-enums';
+import {
+  type RenderScheduleScriptSearch,
+  SCHEDULE_TRIGGER_OPTIONS,
+  type ScheduleFormData,
+  type ScheduleFormGate,
+  type ScheduleTimeSlot,
+} from './schedule-form-types';
+import { ScheduleOfflineFields } from './schedule-offline-fields';
+import { ScheduleScriptsField } from './schedule-scripts-field';
+import { ScheduleTimingFields } from './schedule-timing-fields';
+
+export interface ScheduleFormFieldsProps {
+  showErrors: boolean;
+  /**
+   * Locks every control. This is the edit page's loading state: the real fields,
+   * in the geometry they will keep, with nothing in them yet — so there is no
+   * placeholder to swap for them when the schedule lands.
+   */
+  disabled?: boolean;
+  /**
+   * The "Select Script" field of each script card. Searching the script library
+   * is the host's query, so the field is a slot: the product passes its
+   * data-bound search, a fixture a static one (both draw
+   * `ScheduleScriptSearchField`).
+   */
+  renderScriptSearch: RenderScheduleScriptSearch;
+  /** Whether the Timezone picker is offered: the host's flag, as a gate. Default `off`. */
+  timeReferenceGate?: ScheduleFormGate;
+  /** The platforms "Supported Platform" offers. Default: every OS platform. */
+  platforms?: ReadonlyArray<OSPlatformOption>;
+  /** Platform ids shown but not selectable yet ("Coming Soon"). Default none. */
+  comingSoonPlatforms?: ReadonlyArray<string>;
+  /** The Time dropdown's options; see `ScheduleTimingFields`. Default: the viewer's own clock. */
+  getTimeSlots?: (date: Date | null, timeReference: ScheduleTimeReference) => ScheduleTimeSlot[];
+  /**
+   * `stacked` (default): the name is a row of its own, over the rest. `inline`:
+   * on a wide form it sits beside the Date / Time / Repeat row, for a host that
+   * shows only those (the sections between them hidden).
+   */
+  nameLayout?: 'stacked' | 'inline';
+  /** The "Note" field. Default true. */
+  showNote?: boolean;
+  /** The trigger choice (on a schedule, or when a device comes online). Default true. */
+  showTrigger?: boolean;
+  /** "Supported Platform". Default true. */
+  showPlatforms?: boolean;
+  /** "If device is offline at scheduled time". Default true. */
+  showOfflineBehavior?: boolean;
+  /** The "Scheduled Scripts" heading over the script cards. Default true. */
+  showScriptsHeading?: boolean;
+  /** Each script card's arguments and environment variables. Default true. */
+  showScriptParams?: boolean;
+  /** Offer "Add Script". Default true; false is a form of the scripts it opens with. */
+  addScripts?: boolean;
+}
+
+/**
+ * Every field of the schedule form, in the order the design has them. Reads the
+ * form off context, so the page around it only owns the chrome and the Save.
+ *
+ * The defaults are the product's page. The layout props are for a host that
+ * shows the form in less room (a picture of it): fewer sections, and the name
+ * beside the timing.
+ */
+export function ScheduleFormFields({
+  showErrors,
+  disabled = false,
+  renderScriptSearch,
+  timeReferenceGate = 'off',
+  platforms = OS_PLATFORMS,
+  comingSoonPlatforms = [],
+  getTimeSlots,
+  nameLayout = 'stacked',
+  showNote = true,
+  showTrigger = true,
+  showPlatforms = true,
+  showOfflineBehavior = true,
+  showScriptsHeading = true,
+  showScriptParams = true,
+  addScripts = true,
+}: ScheduleFormFieldsProps) {
+  const { control, formState, getValues, setValue } = useFormContext<ScheduleFormData>();
+  const isMdUp = useContentMdUp();
+  const supportedPlatforms = useWatch({ control, name: 'supportedPlatforms' });
+
+  const togglePlatform = useCallback(
+    (platform: string) => {
+      const current = getValues('supportedPlatforms');
+      const has = current.includes(platform);
+      // Allow deselecting any item, including the last one — the "at least one
+      // platform" rule is enforced by validation on submit (mirrors the script form).
+      setValue('supportedPlatforms', has ? current.filter(p => p !== platform) : [...current, platform], {
+        shouldValidate: true,
+        shouldDirty: true,
+      });
+    },
+    [getValues, setValue],
+  );
+
+  const nameField = (
+    <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
+      <Label className="text-h4">Schedule Name</Label>
+      <Controller
+        name="name"
+        control={control}
+        render={({ field, fieldState }) => (
+          <Input
+            placeholder="Enter schedule name"
+            value={field.value}
+            onChange={field.onChange}
+            disabled={disabled}
+            className="w-full"
+            error={showErrors ? fieldState.error?.message : undefined}
+            invalid={showErrors && !!fieldState.error}
+          />
+        )}
+      />
+    </div>
+  );
+
+  // The min-1 error overlays the section gap below the row (same absolute
+  // pattern as the script form) — no layout shift. `data-invalid`: the block
+  // has no input of its own, so it carries the marker itself, which is what
+  // `scrollToFirstInvalidField` looks for.
+  const platformField = (
+    <div
+      className="relative flex flex-col gap-[var(--spacing-system-xxs)]"
+      data-invalid={(showErrors && !!formState.errors.supportedPlatforms) || undefined}
+    >
+      <Label className="text-h4">Supported Platform</Label>
+      <div className="grid grid-cols-2 gap-[var(--spacing-system-mf)] content-md:grid-cols-4">
+        {platforms.map(platform => {
+          const comingSoon = comingSoonPlatforms.includes(platform.id);
+          return (
+            <SelectButton
+              key={platform.id}
+              title={platform.name}
+              icon={<platform.icon className="h-5 w-5" />}
+              selected={!comingSoon && supportedPlatforms.includes(platform.id)}
+              disabled={comingSoon || disabled}
+              tag={comingSoon ? (isMdUp ? 'Coming Soon' : 'Soon') : undefined}
+              onClick={comingSoon || disabled ? undefined : () => togglePlatform(platform.id)}
+            />
+          );
+        })}
+      </div>
+      {showErrors && formState.errors.supportedPlatforms && (
+        <div className="absolute bottom-0 left-0 right-0 translate-y-full">
+          <TruncateText variant="h6" className="text-ods-error">
+            {formState.errors.supportedPlatforms.message ?? ''}
+          </TruncateText>
+        </div>
+      )}
+    </div>
+  );
+
+  const timingFields = (
+    <ScheduleTimingFields
+      showErrors={showErrors}
+      disabled={disabled}
+      timeReferenceGate={timeReferenceGate}
+      getTimeSlots={getTimeSlots}
+    />
+  );
+  const nameInline = nameLayout === 'inline';
+
+  return (
+    <div className="flex flex-col gap-[var(--spacing-system-lf)]">
+      {nameInline ? (
+        <div className="flex flex-col gap-[var(--spacing-system-lf)] content-md:flex-row content-md:items-start">
+          <div className="min-w-0 content-md:flex-1">{nameField}</div>
+          <div className="min-w-0 content-md:flex-[3]">{timingFields}</div>
+        </div>
+      ) : (
+        nameField
+      )}
+
+      {/* "Note" in the UI, `description` on the backend. */}
+      {showNote && (
+        <div className="flex flex-col gap-[var(--spacing-system-xxs)]">
+          <Label className="text-h4">Note</Label>
+          <Controller
+            name="description"
+            control={control}
+            render={({ field }) => (
+              <Textarea
+                placeholder="Enter note here (optional)"
+                value={field.value}
+                onChange={field.onChange}
+                disabled={disabled}
+                className="min-h-[96px] w-full"
+              />
+            )}
+          />
+        </div>
+      )}
+
+      {/* What fires the schedule. DEVICE_ONLINE is event-driven and carries no
+          timing, so picking it collapses the Date & Time row below. */}
+      {showTrigger && (
+        <Controller
+          name="trigger"
+          control={control}
+          render={({ field }) => (
+            <RadioGroupBlock
+              variant="grouped"
+              value={field.value}
+              onValueChange={field.onChange}
+              disabled={disabled}
+              options={SCHEDULE_TRIGGER_OPTIONS}
+            />
+          )}
+        />
+      )}
+
+      {showPlatforms && platformField}
+
+      {!nameInline && timingFields}
+
+      {/* Hangs off the same answer as the timing above it — "if device is
+          offline at scheduled time" presupposes one — so it collapses for the
+          event trigger too, and the two blocks animate together. */}
+      {showOfflineBehavior && <ScheduleOfflineFields showErrors={showErrors} disabled={disabled} />}
+
+      <ScheduleScriptsField
+        showErrors={showErrors}
+        disabled={disabled}
+        renderScriptSearch={renderScriptSearch}
+        showHeading={showScriptsHeading}
+        showScriptParams={showScriptParams}
+        addScripts={addScripts}
+      />
+    </div>
+  );
+}