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

package/src/components/features/scripts/script-schedules-table.tsx

@@ -0,0 +1,113 @@
+'use client';
+
+import { type ReactNode, useCallback, useMemo } from 'react';
+import { type ColumnDef, DataTable, type Row, useDataTable } from '../../ui/data-table';
+import { TruncateText } from '../../ui/truncate-text';
+import { OSTypeBadgeGroup } from '../os-type-badge-group';
+import { ScheduleDateTimeCell, ScriptNameCell } from './script-cells';
+import { SCHEDULE_COLUMNS, type ScriptsTableColumnLayout } from './scripts-table-columns';
+import { OpenInNewTabCell, RowActionsCell, scriptsColumnMeta } from './scripts-table-shared';
+
+/** One schedule, as the table shows it. The host formats the start and the repeat. */
+export interface ScriptScheduleTableRow {
+  id: string;
+  name: string;
+  description?: string | null;
+  supportedPlatforms: string[];
+  /** When it starts. Null: it has no date (`trigger` then says what starts it). */
+  startsAt?: { date: string; time: string } | null;
+  /** What starts a schedule with no date ("Device Online"). */
+  trigger?: string | null;
+  /** How often it runs ("Every day"). Null: it does not repeat on a clock. */
+  repeat?: string | null;
+  deviceCount: number;
+  href?: string;
+}
+
+export interface ScriptSchedulesTableProps {
+  rows: ScriptScheduleTableRow[];
+  isLoading?: boolean;
+  /** Column ids to leave out (`'deviceCount'`, `'supportedPlatforms'`, `'open'`). */
+  hideColumns?: readonly string[];
+  /** The row menu. Without it the table has no actions column. */
+  renderActions?: (row: ScriptScheduleTableRow) => ReactNode;
+  emptyMessage?: string;
+  stickyHeader?: boolean;
+  stickyHeaderOffset?: string;
+  rightSlot?: ReactNode;
+  skeletonRows?: number;
+}
+
+const VALUE_CLASS = 'text-ods-text-primary text-h4';
+
+/**
+ * The script schedules as a table: what runs, on which operating systems,
+ * when, how often and on how many devices.
+ */
+export function ScriptSchedulesTable({
+  rows,
+  isLoading = false,
+  hideColumns,
+  renderActions,
+  emptyMessage = 'No schedules found.',
+  stickyHeader = false,
+  stickyHeaderOffset,
+  rightSlot,
+  skeletonRows = 10,
+}: ScriptSchedulesTableProps) {
+  const columns = useMemo<ColumnDef<ScriptScheduleTableRow>[]>(() => {
+    const cell = (layout: ScriptsTableColumnLayout, render: (row: ScriptScheduleTableRow) => ReactNode) => ({
+      id: layout.id,
+      header: layout.header ?? '',
+      cell: ({ row }: { row: Row<ScriptScheduleTableRow> }) => render(row.original),
+      enableSorting: false,
+      // A picture of the table sorts nothing: the layout's sort icon is the live page's.
+      meta: { ...scriptsColumnMeta(layout), sortable: false },
+    });
+    const all: ColumnDef<ScriptScheduleTableRow>[] = [
+      cell(SCHEDULE_COLUMNS.name, row => <ScriptNameCell name={row.name} description={row.description} />),
+      cell(SCHEDULE_COLUMNS.supportedPlatforms, row => (
+        <OSTypeBadgeGroup osTypes={row.supportedPlatforms} iconSize="w-4 h-4 content-md:w-6 content-md:h-6" />
+      )),
+      cell(SCHEDULE_COLUMNS.dateTime, row =>
+        row.startsAt ? (
+          <ScheduleDateTimeCell date={row.startsAt.date} time={row.startsAt.time} />
+        ) : row.trigger ? (
+          <TruncateText tone="secondary">{row.trigger}</TruncateText>
+        ) : null,
+      ),
+      cell(SCHEDULE_COLUMNS.repeat, row => (row.repeat ? <span className={VALUE_CLASS}>{row.repeat}</span> : null)),
+      cell(SCHEDULE_COLUMNS.deviceCount, row => <span className={VALUE_CLASS}>{row.deviceCount}</span>),
+    ];
+    if (renderActions) {
+      all.push(cell(SCHEDULE_COLUMNS.actions, row => <RowActionsCell>{renderActions(row)}</RowActionsCell>));
+    }
+    all.push(cell(SCHEDULE_COLUMNS.open, row => (row.href ? <OpenInNewTabCell href={row.href} /> : null)));
+    return hideColumns ? all.filter(column => !hideColumns.includes(column.id ?? '')) : all;
+  }, [hideColumns, renderActions]);
+
+  const table = useDataTable<ScriptScheduleTableRow>({
+    data: rows,
+    columns,
+    getRowId: (row: ScriptScheduleTableRow) => row.id,
+    enableSorting: false,
+  });
+
+  const rowHref = useCallback((row: ScriptScheduleTableRow) => row.href, []);
+  const showHeader = isLoading || rows.length > 0;
+
+  return (
+    <DataTable table={table}>
+      {showHeader && (
+        <DataTable.Header stickyHeader={stickyHeader} stickyHeaderOffset={stickyHeaderOffset} rightSlot={rightSlot} />
+      )}
+      <DataTable.Body
+        loading={isLoading}
+        skeletonRows={skeletonRows}
+        emptyMessage={emptyMessage}
+        rowClassName="mb-1"
+        rowHref={rowHref}
+      />
+    </DataTable>
+  );
+}

package/src/components/features/scripts/script-shell-badge.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { cn } from '../../../utils/cn';
+import { scriptShellType } from './shell-types';
+
+export interface ScriptShellBadgeProps {
+  /** Lowercase shell id (`'cmd'`). */
+  value: string;
+  className?: string;
+  iconClassName?: string;
+}
+
+/** A script's shell: its icon and label from `SCRIPT_SHELL_TYPES`. */
+export function ScriptShellBadge({ value, className, iconClassName }: ScriptShellBadgeProps) {
+  const shell = scriptShellType(value);
+  const Icon = shell?.icon;
+
+  return (
+    <span className={cn('flex items-center gap-2', className)}>
+      {/* `iconClassName` comes last so a caller keeps the size and the colour. */}
+      {Icon && <Icon className={cn('h-5 w-5 text-ods-text-secondary', iconClassName)} />}
+      <span>{shell?.label ?? value}</span>
+    </span>
+  );
+}

package/src/components/features/scripts/scripts-table-columns.ts

@@ -0,0 +1,95 @@
+/**
+ * Column layout of the Scripts tables (the library, the schedules and the
+ * Execution History of a script or a schedule) and the two tabs over them. Data only, with no imports, so a
+ * live table, its loading skeleton and a picture of the page read the same
+ * widths without loading each other.
+ */
+export interface ScriptsTableColumnLayout {
+  id: string;
+  header?: string;
+  /** The column's `meta.width` class. */
+  width: string;
+  hideAt?: 'md' | 'lg' | 'xl' | '2xl';
+  align?: 'right';
+  /** The header carries a sort icon. */
+  sortable?: boolean;
+  /** The header carries a filter dropdown, so it stays below `lg`. */
+  filterable?: boolean;
+  /** The header carries a calendar, so it stays below `lg`. */
+  dateFilterable?: boolean;
+}
+
+export const SCRIPT_COLUMNS = {
+  name: { id: 'name', header: 'Name', width: 'flex-1 min-w-0' },
+  shellType: { id: 'shellType', header: 'Shell Type', width: 'w-[100px] content-md:w-[160px]', filterable: true },
+  supportedPlatforms: { id: 'supportedPlatforms', header: 'OS', width: 'w-[80px]', hideAt: 'lg', filterable: true },
+  authorId: { id: 'authorId', header: 'Added by', width: 'w-[250px]', hideAt: 'lg', filterable: true },
+  actions: { id: 'actions', width: 'w-12 shrink-0 flex-none', align: 'right' },
+  open: { id: 'open', width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
+} satisfies Record<string, ScriptsTableColumnLayout>;
+
+export const SCHEDULE_COLUMNS = {
+  name: { id: 'name', header: 'Script', width: 'flex-1 min-w-0' },
+  supportedPlatforms: { id: 'supportedPlatforms', header: 'OS', width: 'w-[90px]', hideAt: 'lg', filterable: true },
+  dateTime: {
+    id: 'dateTime',
+    header: 'Date & Time',
+    width: 'w-[100px] content-md:w-[160px]',
+    hideAt: 'md',
+    dateFilterable: true,
+  },
+  repeat: { id: 'repeat', header: 'Repeat', width: 'w-[120px]', hideAt: 'md', sortable: true },
+  deviceCount: { id: 'deviceCount', header: 'Devices', width: 'w-[100px] content-md:w-[140px]', hideAt: 'lg' },
+  actions: { id: 'actions', width: 'w-12 shrink-0 flex-none', align: 'right' },
+  open: { id: 'open', width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
+} satisfies Record<string, ScriptsTableColumnLayout>;
+
+export const EXECUTION_COLUMNS = {
+  executionId: { id: 'executionId', header: 'Execution', width: 'w-[160px]', dateFilterable: true },
+  status: { id: 'status', header: 'Status', width: 'w-[120px]', filterable: true },
+  machineId: { id: 'machineId', header: 'Device', width: 'w-[200px]', hideAt: 'lg', filterable: true },
+  initiatorId: { id: 'initiatorId', header: 'Executed by', width: 'flex-1 min-w-0', hideAt: 'md', filterable: true },
+  result: { id: 'result', header: 'Result', width: 'flex-1 min-w-0', hideAt: 'xl' },
+  actions: { id: 'actions', width: 'w-12 shrink-0 flex-none', align: 'right' },
+  open: { id: 'open', width: 'w-12 shrink-0 flex-none', hideAt: 'md', align: 'right' },
+} satisfies Record<string, ScriptsTableColumnLayout>;
+
+/** Cell widths of the Scripts / Schedules switcher, for its loading state. */
+export const SCRIPTS_TAB_WIDTHS: readonly string[] = ['w-[160px]', 'w-[200px]'];
+
+/** The library's columns, in render order. */
+export const SCRIPTS_TABLE_COLUMNS: readonly ScriptsTableColumnLayout[] = [
+  SCRIPT_COLUMNS.name,
+  SCRIPT_COLUMNS.shellType,
+  SCRIPT_COLUMNS.supportedPlatforms,
+  SCRIPT_COLUMNS.authorId,
+  SCRIPT_COLUMNS.actions,
+  SCRIPT_COLUMNS.open,
+];
+
+/** The schedules' columns, in render order. */
+export const SCHEDULES_TABLE_COLUMNS: readonly ScriptsTableColumnLayout[] = [
+  SCHEDULE_COLUMNS.name,
+  SCHEDULE_COLUMNS.supportedPlatforms,
+  SCHEDULE_COLUMNS.dateTime,
+  SCHEDULE_COLUMNS.repeat,
+  SCHEDULE_COLUMNS.deviceCount,
+  SCHEDULE_COLUMNS.actions,
+  SCHEDULE_COLUMNS.open,
+];
+
+/**
+ * The Execution History's columns, in render order. The table ends in two
+ * 48px action columns with no header text: they carry width, so a skeleton
+ * that left them out laid the `flex-1` columns ~128px wider than the loaded
+ * table, and every label jumped left when the rows arrived.
+ */
+export const EXECUTIONS_TABLE_COLUMNS: readonly ScriptsTableColumnLayout[] = [
+  EXECUTION_COLUMNS.executionId,
+  EXECUTION_COLUMNS.status,
+  EXECUTION_COLUMNS.machineId,
+  EXECUTION_COLUMNS.initiatorId,
+  EXECUTION_COLUMNS.result,
+  EXECUTION_COLUMNS.actions,
+  EXECUTION_COLUMNS.open,
+];

package/src/components/features/scripts/scripts-table-shared.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { openInNewTab } from '../../../utils/open-in-new-tab';
+import { ArrowRightUpIcon } from '../../icons-v2-generated/arrows/arrow-right-up-icon';
+import { Button } from '../../ui/button';
+import type { ScriptsTableColumnLayout } from './scripts-table-columns';
+
+/** A column's `meta` from its layout: the fields a live table and its skeleton agree on. */
+export function scriptsColumnMeta(column: ScriptsTableColumnLayout) {
+  return {
+    width: column.width,
+    hideAt: column.hideAt,
+    align: column.align,
+    sortable: column.sortable,
+    alwaysShowHeader: column.dateFilterable,
+  };
+}
+
+/** The row menu's cell: outside the row's own link. */
+export function RowActionsCell({ children }: { children: ReactNode }) {
+  return (
+    <div data-no-row-click className="pointer-events-auto flex items-center justify-end gap-2">
+      {children}
+    </div>
+  );
+}
+
+/** The last cell of a row: its page in a new tab. The row is a link itself, so this opens by script. */
+export function OpenInNewTabCell({ href }: { href: string }) {
+  return (
+    <div data-no-row-click className="pointer-events-auto flex items-center justify-end">
+      <Button
+        onClick={openInNewTab(href)}
+        variant="outline"
+        size="icon"
+        leftIcon={<ArrowRightUpIcon className="h-5 w-5" />}
+        aria-label="Open in new tab"
+        className="bg-ods-card"
+      />
+    </div>
+  );
+}

package/src/components/features/scripts/scripts-table.tsx

@@ -0,0 +1,124 @@
+'use client';
+
+import { type ReactNode, useCallback, useMemo } from 'react';
+import { type ColumnDef, DataTable, type Row, useDataTable } from '../../ui/data-table';
+import { SquareAvatar } from '../../ui/square-avatar';
+import { TruncateText } from '../../ui/truncate-text';
+import { OSTypeBadgeGroup } from '../os-type-badge-group';
+import { ScriptNameCell } from './script-cells';
+import { ScriptShellBadge } from './script-shell-badge';
+import { SCRIPT_COLUMNS, type ScriptsTableColumnLayout } from './scripts-table-columns';
+import { OpenInNewTabCell, RowActionsCell, scriptsColumnMeta } from './scripts-table-shared';
+
+/** One script of the library, as the table shows it. */
+export interface ScriptTableRow {
+  id: string;
+  name: string;
+  description?: string | null;
+  /** Lowercase shell id (`'powershell'`). */
+  shellType: string;
+  /** OS ids the script runs on (`'windows'`, `'darwin'`, `'linux'`). */
+  supportedPlatforms: string[];
+  /** Who added it. Null: nobody is recorded. */
+  author?: { name: string; initials: string; image?: string } | null;
+  /** The script's page: the row's link and the open-in-new-tab button. */
+  href?: string;
+}
+
+export interface ScriptsTableProps {
+  rows: ScriptTableRow[];
+  isLoading?: boolean;
+  /** Column ids to leave out (`'authorId'`, `'supportedPlatforms'`, `'open'`). */
+  hideColumns?: readonly string[];
+  /** The row menu. Without it the table has no actions column. */
+  renderActions?: (row: ScriptTableRow) => ReactNode;
+  emptyMessage?: string;
+  stickyHeader?: boolean;
+  stickyHeaderOffset?: string;
+  /** Rendered at the right edge of the header (a row count). */
+  rightSlot?: ReactNode;
+  skeletonRows?: number;
+}
+
+const BADGE_ICON = 'h-4 w-4 content-md:h-6 content-md:w-6';
+
+/**
+ * The script library as a table: name and description, shell, the operating
+ * systems it runs on and who added it. Rows are a view-model the host maps its
+ * own scripts into.
+ */
+export function ScriptsTable({
+  rows,
+  isLoading = false,
+  hideColumns,
+  renderActions,
+  emptyMessage = 'No scripts found.',
+  stickyHeader = false,
+  stickyHeaderOffset,
+  rightSlot,
+  skeletonRows = 10,
+}: ScriptsTableProps) {
+  const columns = useMemo<ColumnDef<ScriptTableRow>[]>(() => {
+    const cell = (layout: ScriptsTableColumnLayout, render: (row: ScriptTableRow) => ReactNode) => ({
+      id: layout.id,
+      header: layout.header ?? '',
+      cell: ({ row }: { row: Row<ScriptTableRow> }) => render(row.original),
+      enableSorting: false,
+      meta: scriptsColumnMeta(layout),
+    });
+    const all: ColumnDef<ScriptTableRow>[] = [
+      cell(SCRIPT_COLUMNS.name, row => <ScriptNameCell name={row.name} description={row.description} />),
+      cell(SCRIPT_COLUMNS.shellType, row => <ScriptShellBadge value={row.shellType} iconClassName={BADGE_ICON} />),
+      cell(SCRIPT_COLUMNS.supportedPlatforms, row => (
+        <OSTypeBadgeGroup osTypes={row.supportedPlatforms} iconSize="w-4 h-4 content-md:w-6 content-md:h-6" />
+      )),
+      cell(SCRIPT_COLUMNS.authorId, row =>
+        row.author ? (
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            <SquareAvatar
+              variant="round"
+              size="sm"
+              src={row.author.image}
+              fallback={row.author.initials}
+              alt={row.author.name}
+              initialsClassName="text-ods-text-secondary"
+            />
+            <div className="min-w-0 flex-1">
+              <TruncateText>{row.author.name}</TruncateText>
+            </div>
+          </div>
+        ) : null,
+      ),
+    ];
+    if (renderActions) {
+      all.push(cell(SCRIPT_COLUMNS.actions, row => <RowActionsCell>{renderActions(row)}</RowActionsCell>));
+    }
+    all.push(cell(SCRIPT_COLUMNS.open, row => (row.href ? <OpenInNewTabCell href={row.href} /> : null)));
+    return hideColumns ? all.filter(column => !hideColumns.includes(column.id ?? '')) : all;
+  }, [hideColumns, renderActions]);
+
+  const table = useDataTable<ScriptTableRow>({
+    data: rows,
+    columns,
+    getRowId: (row: ScriptTableRow) => row.id,
+    enableSorting: false,
+  });
+
+  const rowHref = useCallback((row: ScriptTableRow) => row.href, []);
+  const showHeader = isLoading || rows.length > 0;
+
+  return (
+    <DataTable table={table}>
+      {showHeader && (
+        <DataTable.Header stickyHeader={stickyHeader} stickyHeaderOffset={stickyHeaderOffset} rightSlot={rightSlot} />
+      )}
+      <DataTable.Body
+        loading={isLoading}
+        skeletonRows={skeletonRows}
+        emptyMessage={emptyMessage}
+        rowClassName="mb-1"
+        rowHref={rowHref}
+      />
+    </DataTable>
+  );
+}

package/src/components/features/scripts/scripts-tabs.ts

@@ -0,0 +1,11 @@
+import { BracketCurlyIcon } from '../../icons-v2-generated/coding/bracket-curly-icon';
+import { TimerIcon } from '../../icons-v2-generated/date-and-time/timer-icon';
+import type { TabItem } from '../../ui/tab-navigation';
+
+export type ScriptsTabId = 'list' | 'schedules';
+
+/** The two Scripts pages, as the switcher over them names them. */
+export const SCRIPTS_TABS: TabItem[] = [
+  { id: 'list', label: 'Scripts List', icon: BracketCurlyIcon },
+  { id: 'schedules', label: 'Scripts Schedules', icon: TimerIcon },
+];

package/src/components/features/scripts/shell-types.ts

@@ -0,0 +1,26 @@
+import { type ShellTypeDefinition, ShellTypeValues } from '../../../types/shell.types';
+import { PowershellLogoGreyIcon } from '../../icons-v2-generated/brand-logos/powershell-logo-grey-icon';
+import { TerminalIcon } from '../../icons-v2-generated/coding/terminal-icon';
+import { TerminalSquareIcon } from '../../icons-v2-generated/coding/terminal-square-icon';
+
+/**
+ * The shells the product's Scripts pages offer, as they are shown there: the
+ * `CMD` label (not "Batch"), the v2 icons and a grey PowerShell glyph. The
+ * wider `SHELL_TYPES` list of `types/shell.types` is every shell the agent can
+ * run; this one is what a person picks from.
+ */
+export const SCRIPT_SHELL_TYPES: ShellTypeDefinition[] = [
+  { id: ShellTypeValues.POWERSHELL, label: 'PowerShell', value: 'powershell', icon: PowershellLogoGreyIcon },
+  { id: ShellTypeValues.CMD, label: 'CMD', value: 'cmd', icon: TerminalSquareIcon },
+  { id: ShellTypeValues.BASH, label: 'Bash', value: 'bash', icon: TerminalIcon },
+];
+
+/** The shell with this lowercase id (`'cmd'`). */
+export function scriptShellType(value: string): ShellTypeDefinition | undefined {
+  return SCRIPT_SHELL_TYPES.find(shell => shell.value === value);
+}
+
+/** The label of a lowercase shell id, else the id itself. */
+export function scriptShellLabel(value: string): string {
+  return scriptShellType(value)?.label ?? value;
+}

package/src/components/product-demo/fixtures/scripts.ts

@@ -0,0 +1,186 @@
+import type { ScriptExecutionSource, ScriptExecutionStatus, ScriptExecutionTableRow } from '../../features/scripts';
+import type { DemoCast } from '../cast';
+import { DEMO_DEVICES, DEMO_ORGANIZATIONS, demoDay } from './shared';
+
+/** The script the page's Mingo conversation writes, and the schedule that runs it. */
+export interface DemoScript {
+  name: string;
+  /** Lowercase shell id. */
+  shellType: string;
+  /** The script's source, as the editor holds it. */
+  code: string;
+  /** Who wrote it and who approved it. */
+  provenance: { author: string; approver: string };
+  /** The schedule that runs it, as one line. */
+  schedule: { repeat: string; time: string; deviceCount: number };
+}
+
+export interface ScriptsFixture {
+  script: DemoScript;
+  /** The schedule's first night, newest first (the Execution History's default order). */
+  executions: ScriptExecutionTableRow[];
+  /** The run whose output the picture opens. */
+  openExecutionId: string;
+}
+
+/**
+ * "Clear temp files", the script Mingo writes in the conversation beside the
+ * picture: it empties the Windows temp folder, every user's and the update
+ * download cache, then prints how much space it freed and how it exited. Short lines, so the picture
+ * never cuts one in its narrow column.
+ */
+const CLEAR_TEMP_FILES = `$ErrorActionPreference = 'Ignore'
+$paths = "$env:windir\\Temp",
+  'C:\\Users\\*\\AppData\\Local\\Temp',
+  "$env:windir\\SoftwareDistribution\\Download"
+$before = (Get-PSDrive C).Free
+foreach ($path in $paths) {
+  $items = Get-ChildItem $path -Recurse -Force
+  "Cleaning $path ($($items.Count) items)"
+  $items | Remove-Item -Recurse -Force
+}
+$freed = (Get-PSDrive C).Free - $before
+'Freed {0:N1} GB' -f ($freed / 1GB)
+'Exit code: 0'
+exit 0`;
+
+/** The folders the script empties, in the order it prints them. */
+function cleanupLines([system, users, updates]: readonly [number, number, number]): string[] {
+  return [
+    `Cleaning C:\\Windows\\Temp (${system} items)`,
+    `Cleaning C:\\Users\\*\\AppData\\Local\\Temp (${users.toLocaleString('en-US')} items)`,
+    `Cleaning C:\\Windows\\SoftwareDistribution\\Download (${updates} items)`,
+  ];
+}
+
+/** What the script prints on a device: one line per folder, then the space freed and the exit code. */
+function cleanupOutput(counts: readonly [number, number, number], freedGb: string): string {
+  return [...cleanupLines(counts), `Freed ${freedGb} GB`, 'Exit code: 0'].join('\n');
+}
+
+const DAY = new Intl.DateTimeFormat('en-US', { dateStyle: 'short' });
+const TIME = new Intl.DateTimeFormat('en-US', { timeStyle: 'short' });
+
+/**
+ * A time on the demo day, in the table's own `date time` rendering. Built on
+ * the local calendar day, so it reads the same in every timezone: the
+ * schedule fires at 11:00 PM on the devices' clock (the time its summary
+ * states beside the table), and the conversation's test ran minutes before.
+ */
+function onDemoDay(hours: number, minutes: number): string {
+  const day = demoDay();
+  const at = new Date(day.getFullYear(), day.getMonth(), day.getDate(), hours, minutes);
+  return `${DAY.format(at)} ${TIME.format(at)}`;
+}
+
+interface DemoExecution {
+  executionId: string;
+  device: keyof typeof DEMO_DEVICES;
+  /** Hour and minute it was dispatched. */
+  at: readonly [number, number];
+  status: ScriptExecutionStatus;
+  source: ScriptExecutionSource;
+  result: string;
+}
+
+/**
+ * The first night of "Nightly temp cleanup" on the Windows fleet: devices pick
+ * the run up as they check in, so dispatch times are minutes apart. One run is
+ * still going and one failed (it ran past its 90-second timeout), the failure
+ * Mingo promised to report. The oldest row is the conversation's own test on
+ * RECEPTION-01, the one Mingo dispatched.
+ */
+const RUN: readonly DemoExecution[] = [
+  {
+    executionId: 'c4f1e7a2-93b0-4d6e-8a15-6e2b9f04d731',
+    device: 'jenSurface',
+    at: [23, 4],
+    status: 'RUNNING',
+    source: 'SCHEDULED',
+    result: cleanupLines([254, 1377, 40])[0],
+  },
+  {
+    executionId: '9a2d5c18-4e7f-4b31-b0c6-d85e1a3f6290',
+    device: 'samT14',
+    at: [23, 3],
+    status: 'FAILED',
+    source: 'SCHEDULED',
+    result: [cleanupLines([230, 906, 51])[0], 'Execution timed out after 90 seconds'].join('\n\n'),
+  },
+  {
+    executionId: '1e8b47d3-c25a-4f90-9e3d-07b6a2c51f84',
+    device: 'warehouse',
+    at: [23, 2],
+    status: 'SUCCESS',
+    source: 'SCHEDULED',
+    result: cleanupOutput([412, 2184, 63], '2.7'),
+  },
+  {
+    executionId: '6f30a9c5-1b84-47e2-a3d9-52c8e7b0f416',
+    device: 'leoThinkPad',
+    at: [23, 1],
+    status: 'SUCCESS',
+    source: 'SCHEDULED',
+    result: cleanupOutput([288, 1530, 41], '1.9'),
+  },
+  {
+    executionId: 'b7d26e04-8f1c-4a53-9b7e-3c0f5a9d82e1',
+    device: 'priyaXps',
+    at: [23, 1],
+    status: 'SUCCESS',
+    source: 'SCHEDULED',
+    result: cleanupOutput([241, 1102, 37], '1.4'),
+  },
+  {
+    executionId: '2c95f8b1-6d07-4e4a-8f2b-a13e9c6d70b5',
+    device: 'frontDesk',
+    at: [23, 0],
+    status: 'SUCCESS',
+    source: 'SCHEDULED',
+    result: cleanupOutput([507, 2650, 72], '2.2'),
+  },
+  {
+    executionId: 'e05b3a7f-d4c8-49e1-b6a0-8f2d17c9e358',
+    device: 'reception',
+    at: [22, 51],
+    status: 'SUCCESS',
+    source: 'AI_ASSISTANT',
+    result: cleanupOutput([596, 3418, 88], '3.2'),
+  },
+];
+
+/** The run the picture opens: a finished one, so its output ends in what it freed. */
+const OPEN_EXECUTION = RUN[2];
+
+/**
+ * The scripts screen's story, picking up where the page's Mingo conversation
+ * ends: the script it wrote, and the first night its schedule ran.
+ */
+export function buildScriptsFixture(cast: DemoCast): ScriptsFixture {
+  const alex = cast.person('alex');
+  return {
+    script: {
+      name: 'Clear temp files',
+      shellType: 'powershell',
+      code: CLEAR_TEMP_FILES,
+      provenance: { author: 'Mingo', approver: alex.name },
+      schedule: { repeat: 'Every day', time: '11:00 PM', deviceCount: 213 },
+    },
+    executions: RUN.map(run => {
+      const device = DEMO_DEVICES[run.device];
+      return {
+        id: run.executionId,
+        executionId: run.executionId,
+        timestamp: onDemoDay(...run.at),
+        status: run.status,
+        machineName: device.hostname,
+        organization: DEMO_ORGANIZATIONS[device.organization].name,
+        // Every run is on behalf of Alex: the schedule is his, and the test ran because he asked.
+        initiator: { name: alex.name, initials: alex.initials, image: alex.avatarUrl },
+        source: run.source,
+        result: run.result,
+      };
+    }),
+    openExecutionId: OPEN_EXECUTION.executionId,
+  };
+}

package/src/components/product-demo/fixtures/shared.ts

@@ -39,6 +39,7 @@ export const DEMO_DEVICES = {
   buildServer: { id: 'device-build', hostname: 'BUILD-SRV-01', os: 'LINUX', organization: 'acme' },
   jenSurface: { id: 'device-jen', hostname: 'JEN-SURFACE', os: 'WINDOWS', organization: 'acme' },
   priyaXps: { id: 'device-priya', hostname: 'PRIYA-XPS', os: 'WINDOWS', organization: 'northbridge' },
+  warehouse: { id: 'device-warehouse', hostname: 'WAREHOUSE-PC03', os: 'WINDOWS', organization: 'acme' },
 } as const;
 
 /**
@@ -47,6 +48,12 @@ export const DEMO_DEVICES = {
  */
 export const DEMO_NOW = '2026-10-06T14:05:00.000Z';
 
+/** The demo day as a local calendar day, so a date field reads the same in every timezone. */
+export function demoDay(): Date {
+  const [year, month, day] = DEMO_NOW.slice(0, 10).split('-').map(Number);
+  return new Date(year, month - 1, day);
+}
+
 /** An instant `minutes` before {@link DEMO_NOW}. */
 export function demoMinutesAgo(minutes: number): string {
   return new Date(Date.parse(DEMO_NOW) - minutes * 60_000).toISOString();

package/src/components/product-demo/fixtures/software-update.ts

@@ -2,7 +2,7 @@ import type { DeviceRow } from '../../features/devices';
 import type { SelectedPackage, SoftwareActionFormProps, SoftwareScheduleTiming } from '../../features/software';
 import type { DemoCast } from '../cast';
 import { buildDevicesFixture } from './devices';
-import { DEMO_DEVICES, DEMO_NOW } from './shared';
+import { DEMO_DEVICES, demoDay } from './shared';
 
 /** The catalog entry the row holds: WinGet's Google Chrome. */
 const chrome: SelectedPackage = {
@@ -13,12 +13,6 @@ const chrome: SelectedPackage = {
   packageType: null,
 };
 
-/** The demo day as a local calendar day, so the date field reads the same in every timezone. */
-function demoDay(): Date {
-  const [year, month, day] = DEMO_NOW.slice(0, 10).split('-').map(Number);
-  return new Date(year, month - 1, day);
-}
-
 const TONIGHT_11_PM = { value: '23:00', label: '11:00 PM' };
 
 /** A fixed reading of the schedule fields: tonight's late slots, nothing in the past. */