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

package/dist/{software-update-BLIVYOY2.cjs → software-update-QAMNASVF.cjs}

@@ -2,20 +2,20 @@
 "use client";
 
 
-var _chunkWFPCCBOMcjs = require('./chunk-WFPCCBOM.cjs');
+var _chunk7AM3AFM4cjs = require('./chunk-7AM3AFM4.cjs');
 
 
-var _chunkII4QMH26cjs = require('./chunk-II4QMH26.cjs');
+var _chunkSTEJZPIOcjs = require('./chunk-STEJZPIO.cjs');
 
 
 
-var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
+var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
 
 
-var _chunkVC4IV3AYcjs = require('./chunk-VC4IV3AY.cjs');
+var _chunkIK2RJUEAcjs = require('./chunk-IK2RJUEA.cjs');
 require('./chunk-O67V3HJR.cjs');
 require('./chunk-3HPB4H4C.cjs');
 
@@ -1879,10 +1879,6 @@ var chrome = {
   version: "141.0.7390.66",
   packageType: null
 };
-function demoDay() {
-  const [year, month, day] = _chunkKHXZFLINcjs.DEMO_NOW.slice(0, 10).split("-").map(Number);
-  return new Date(year, month - 1, day);
-}
 var TONIGHT_11_PM = { value: "23:00", label: "11:00 PM" };
 var timing = {
   timeReferenceOptions: [
@@ -1895,25 +1891,25 @@ var timing = {
     TONIGHT_11_PM,
     { value: "23:30", label: "11:30 PM" }
   ],
-  getEarliestDay: demoDay,
+  getEarliestDay: _chunkDKOLQPE7cjs.demoDay,
   getStartError: () => void 0
 };
 var initialValues = {
   rows: [{ key: "row-0", packageManager: "WINGET", pkg: chrome }],
   mode: "schedule",
-  date: demoDay(),
+  date: _chunkDKOLQPE7cjs.demoDay.call(void 0, ),
   time: TONIGHT_11_PM.value,
   timeReference: "SERVER"
 };
 function buildSoftwareUpdateFixture(cast) {
-  const devices = _chunkWFPCCBOMcjs.buildDevicesFixture.call(void 0, cast).devices.filter((device) => device.osType === "WINDOWS");
+  const devices = _chunk7AM3AFM4cjs.buildDevicesFixture.call(void 0, cast).devices.filter((device) => device.osType === "WINDOWS");
   return {
     action: "UPDATE",
     package: chrome,
     timing,
     initialValues,
     devices,
-    selectedIds: /* @__PURE__ */ new Set([_chunkKHXZFLINcjs.DEMO_DEVICES.reception.id, _chunkKHXZFLINcjs.DEMO_DEVICES.samT14.id, _chunkKHXZFLINcjs.DEMO_DEVICES.frontDesk.id])
+    selectedIds: /* @__PURE__ */ new Set([_chunkDKOLQPE7cjs.DEMO_DEVICES.reception.id, _chunkDKOLQPE7cjs.DEMO_DEVICES.samT14.id, _chunkDKOLQPE7cjs.DEMO_DEVICES.frontDesk.id])
   };
 }
 
@@ -1926,26 +1922,26 @@ function StaticPackageField({ value }) {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkDSVNFRY5cjs.Autocomplete,
     {
-      label: _chunkVC4IV3AYcjs.PACKAGE_SEARCH_LABEL,
+      label: _chunkIK2RJUEAcjs.PACKAGE_SEARCH_LABEL,
       labelVariant: "large",
       options: value ? [{ value: value.id, label: value.name, description: _nullishCoalesce(value.description, () => ( void 0)) }] : [],
       value: _nullishCoalesce(_optionalChain([value, 'optionalAccess', _ => _.id]), () => ( null)),
       onChange: noop,
-      placeholder: _chunkVC4IV3AYcjs.PACKAGE_SEARCH_PLACEHOLDER
+      placeholder: _chunkIK2RJUEAcjs.PACKAGE_SEARCH_PLACEHOLDER
     }
   );
 }
 var renderPackageSearch = (field) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, StaticPackageField, { ...field });
 var NO_NARROWING = { columnFilters: [], tags: [] };
 function SoftwareUpdateScreen({ compact = false }) {
-  const cast = _chunkII4QMH26cjs.useProductDemoCast.call(void 0, );
+  const cast = _chunkSTEJZPIOcjs.useProductDemoCast.call(void 0, );
   const fixture = _react.useMemo.call(void 0, () => buildSoftwareUpdateFixture(cast), [cast]);
   const selected = _react.useMemo.call(void 0, 
     () => fixture.devices.filter((device) => fixture.selectedIds.has(device.id)),
     [fixture.devices, fixture.selectedIds]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg pt-[var(--spacing-system-l)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkVC4IV3AYcjs.SoftwareActionForm,
+    _chunkIK2RJUEAcjs.SoftwareActionForm,
     {
       action: fixture.action,
       showHeader: false,
@@ -1957,7 +1953,7 @@ function SoftwareUpdateScreen({ compact = false }) {
       initialValues: fixture.initialValues,
       renderPackageSearch,
       renderDevicePicker: () => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkVC4IV3AYcjs.DeviceSelector,
+        _chunkIK2RJUEAcjs.DeviceSelector,
         {
           devices: selected,
           loading: false,

package/dist/{tickets-board-CKZRB6YV.cjs → tickets-board-CEDHD3KB.cjs}

@@ -2,11 +2,11 @@
 "use client";
 
 
-var _chunkII4QMH26cjs = require('./chunk-II4QMH26.cjs');
+var _chunkSTEJZPIOcjs = require('./chunk-STEJZPIO.cjs');
 
 
 
-var _chunkKHXZFLINcjs = require('./chunk-KHXZFLIN.cjs');
+var _chunkDKOLQPE7cjs = require('./chunk-DKOLQPE7.cjs');
 
 
 
@@ -1843,8 +1843,8 @@ function buildTicketsBoardFixture(cast) {
       ticket("tk-1051", "Printer offline at the front desk", "ACTIVE", {
         ticketNumber: "1051",
         agent: "fae",
-        deviceHostnames: [_chunkKHXZFLINcjs.DEMO_DEVICES.frontDesk.hostname],
-        organizationName: _chunkKHXZFLINcjs.DEMO_ORGANIZATIONS.harbor.name,
+        deviceHostnames: [_chunkDKOLQPE7cjs.DEMO_DEVICES.frontDesk.hostname],
+        organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.harbor.name,
         priority: "medium",
         hasNewMessage: true,
         activity: { kind: "ai-working" }
@@ -1852,7 +1852,7 @@ function buildTicketsBoardFixture(cast) {
       ticket("tk-1052", "New hire starts Monday", "ACTIVE", {
         ticketNumber: "1052",
         agent: "mingo",
-        organizationName: _chunkKHXZFLINcjs.DEMO_ORGANIZATIONS.acme.name,
+        organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.acme.name,
         priority: "low",
         tags: ["onboarding"]
       })
@@ -1861,8 +1861,8 @@ function buildTicketsBoardFixture(cast) {
       ticket("tk-1049", "Acrobat Pro for Maya", "TECH_REQUIRED", {
         ticketNumber: "1049",
         agent: "fae",
-        deviceHostnames: [_chunkKHXZFLINcjs.DEMO_DEVICES.mayaAir.hostname],
-        organizationName: _chunkKHXZFLINcjs.DEMO_ORGANIZATIONS.northbridge.name,
+        deviceHostnames: [_chunkDKOLQPE7cjs.DEMO_DEVICES.mayaAir.hostname],
+        organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.northbridge.name,
         priority: "high",
         assignees: [dana],
         pendingApproval: {
@@ -1874,8 +1874,8 @@ function buildTicketsBoardFixture(cast) {
       ticket("tk-1050", "VPN keeps dropping on the train", "TECH_REQUIRED", {
         ticketNumber: "1050",
         agent: "fae",
-        deviceHostnames: [_chunkKHXZFLINcjs.DEMO_DEVICES.samT14.hostname],
-        organizationName: _chunkKHXZFLINcjs.DEMO_ORGANIZATIONS.northbridge.name,
+        deviceHostnames: [_chunkDKOLQPE7cjs.DEMO_DEVICES.samT14.hostname],
+        organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.northbridge.name,
         priority: "medium",
         assignees: [alex],
         escalatedByUser: true
@@ -1884,7 +1884,7 @@ function buildTicketsBoardFixture(cast) {
     _chunkO67V3HJRcjs.columnFromTicketStatus.call(void 0, "ON_HOLD", [
       ticket("tk-1046", "Replace the conference room display", "ON_HOLD", {
         ticketNumber: "1046",
-        organizationName: _chunkKHXZFLINcjs.DEMO_ORGANIZATIONS.acme.name,
+        organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.acme.name,
         priority: "low",
         assignees: [alex],
         activity: { kind: "waiting-external" }
@@ -1896,20 +1896,20 @@ function buildTicketsBoardFixture(cast) {
         ticket("tk-1048", "Slow laptop", "RESOLVED", {
           ticketNumber: "1048",
           agent: "fae",
-          deviceHostnames: [_chunkKHXZFLINcjs.DEMO_DEVICES.samT14.hostname],
-          organizationName: _chunkKHXZFLINcjs.DEMO_ORGANIZATIONS.northbridge.name
+          deviceHostnames: [_chunkDKOLQPE7cjs.DEMO_DEVICES.samT14.hostname],
+          organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.northbridge.name
         }),
         ticket("tk-1047", "Teams will not open", "RESOLVED", {
           ticketNumber: "1047",
           agent: "fae",
-          deviceHostnames: [_chunkKHXZFLINcjs.DEMO_DEVICES.mayaAir.hostname],
-          organizationName: _chunkKHXZFLINcjs.DEMO_ORGANIZATIONS.northbridge.name
+          deviceHostnames: [_chunkDKOLQPE7cjs.DEMO_DEVICES.mayaAir.hostname],
+          organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.northbridge.name
         }),
         ticket("tk-1045", "Turned the firewall back on", "RESOLVED", {
           ticketNumber: "1045",
           agent: "mingo",
-          deviceHostnames: [_chunkKHXZFLINcjs.DEMO_DEVICES.leoThinkPad.hostname],
-          organizationName: _chunkKHXZFLINcjs.DEMO_ORGANIZATIONS.harbor.name
+          deviceHostnames: [_chunkDKOLQPE7cjs.DEMO_DEVICES.leoThinkPad.hostname],
+          organizationName: _chunkDKOLQPE7cjs.DEMO_ORGANIZATIONS.harbor.name
         })
       ],
       { total: 14 }
@@ -1923,7 +1923,7 @@ var noop = () => {
 };
 var FOLDED = { ON_HOLD: true, RESOLVED: true };
 function TicketsBoardScreen({ compact = false }) {
-  const cast = _chunkII4QMH26cjs.useProductDemoCast.call(void 0, );
+  const cast = _chunkSTEJZPIOcjs.useProductDemoCast.call(void 0, );
   const board = _react.useMemo.call(void 0, () => buildTicketsBoardFixture(cast), [cast]);
   const columns = compact ? board.filter((column) => column.id !== "ON_HOLD") : board;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-full bg-ods-bg p-[var(--spacing-system-m)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkO67V3HJRcjs.Board, { columns, onChange: noop, initialCollapsed: compact ? void 0 : FOLDED }) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flamingo-stack/openframe-frontend-core",
-  "version": "0.0.740",
+  "version": "0.0.741",
   "description": "Shared design system and components for all Flamingo platforms",
   "type": "module",
   "sideEffects": [

package/src/components/features/capability-explorer.tsx

@@ -91,8 +91,6 @@ const PANEL_TOP_HEIGHT_CLASS = 'h-[256px]';
 const PANEL_SCREEN_HEIGHT_CLASS = 'h-[420px]';
 const PANEL_FOOTER_HEIGHT_CLASS = 'h-[52px]';
 const CARD_HEIGHT_CLASS = 'h-[700px]';
-/** Both, for the box shown before the layout is known (literal, so the class is generated). */
-const SKELETON_HEIGHT_CLASS = 'h-[700px] content-lg:h-[824px]';
 
 /** The element id of a job's tab (never the job's own id: that is the host's anchor). */
 export const capabilityTabId = (id: string): string => `${id}-tab`;
@@ -169,12 +167,141 @@ function Example({
   );
 }
 
-/** The box the explorer occupies while its data loads, at both layouts: the panel, or the carousel's card over its controls. */
-export function CapabilityExplorerSkeleton({ className }: { className?: string }) {
+/** A text placeholder in its line's own box (`text-h…` on the line), so a placeholder line is the loaded line's height. */
+function LineBar({ line, width }: { line: string; width: string }) {
   return (
-    <div className={className}>
-      <Skeleton className={cn(SKELETON_HEIGHT_CLASS, 'w-full')} />
-      <SnapCarouselControlsSkeleton className="content-lg:hidden" />
+    <div className={line}>
+      <span className={cn('inline-block h-[0.7em] animate-pulse rounded bg-ods-border align-middle', width)} />
+    </div>
+  );
+}
+
+/** The example's two turns, in the loaded example's own box. */
+function ExampleSkeleton({ className }: { className?: string }) {
+  const turn = (first: boolean) => (
+    <div className={cn('flex min-w-0 gap-2.5', !first && 'border-t border-ods-border pt-3')}>
+      <Skeleton className="size-6 shrink-0 rounded-full" />
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        <LineBar line="text-h6" width="w-28" />
+        <div className="min-h-[2lh] text-h4">
+          <LineBar line="text-h4" width="w-full" />
+          <LineBar line="text-h4" width="w-2/3" />
+        </div>
+      </div>
+    </div>
+  );
+  return (
+    <div
+      className={cn(
+        'flex min-w-0 flex-col justify-center gap-3 overflow-hidden rounded-xl border border-ods-border bg-ods-bg px-[var(--spacing-system-mf)] py-[var(--spacing-system-sf)]',
+        className,
+      )}
+    >
+      {turn(true)}
+      {turn(false)}
+    </div>
+  );
+}
+
+/** One job in the list or a card's head: the icon tile, the title, the caption. */
+function JobHeadSkeleton() {
+  return (
+    <>
+      <Skeleton className="size-9 shrink-0 rounded-lg" />
+      <div className="flex min-w-0 flex-1 flex-col">
+        <LineBar line="text-h4" width="w-32" />
+        <div className="mt-0.5">
+          <LineBar line="text-h6" width="w-40" />
+        </div>
+      </div>
+    </>
+  );
+}
+
+/**
+ * The explorer while its data loads, drawn as both layouts in their own boxes
+ * (the width decides which shows, by CSS, since it is not known yet): the list
+ * of jobs beside the panel with its copy, example, screen and footer, or the
+ * first card over the carousel's controls. Every box is the loaded one's, so
+ * nothing moves when the jobs arrive.
+ */
+export function CapabilityExplorerSkeleton({ className, count = 8 }: { className?: string; count?: number }) {
+  return (
+    <div className={className} aria-hidden>
+      <div className="content-lg:hidden">
+        <div className="flex gap-[var(--spacing-system-sf)] overflow-hidden">
+          <div
+            className={cn(
+              'flex min-w-0 shrink-0 basis-[86%] flex-col gap-[var(--spacing-system-sf)] overflow-hidden rounded-xl border border-ods-border bg-ods-card p-[var(--spacing-system-mf)]',
+              CARD_HEIGHT_CLASS,
+            )}
+          >
+            <div className="flex min-w-0 items-center gap-3">
+              <JobHeadSkeleton />
+            </div>
+            <div className="min-h-[3lh] text-h6">
+              <LineBar line="text-h6" width="w-full" />
+              <LineBar line="text-h6" width="w-5/6" />
+            </div>
+            <Skeleton className="h-[300px] shrink-0 rounded-lg" />
+            <ExampleSkeleton className="shrink-0" />
+          </div>
+        </div>
+        <SnapCarouselControlsSkeleton />
+      </div>
+
+      <div
+        className={cn(
+          'hidden grid-cols-[minmax(0,360px)_minmax(0,1fr)] gap-[var(--spacing-system-lf)] content-lg:grid',
+          PANEL_HEIGHT_CLASS,
+        )}
+      >
+        <div className="flex min-h-0 flex-col gap-1 overflow-hidden">
+          {Array.from({ length: count }, (_, i) => (
+            <div
+              key={i}
+              className={cn(
+                'flex min-w-0 shrink-0 items-center gap-3.5 rounded-lg border px-3.5 py-3',
+                i === 0 ? 'border-ods-border bg-ods-card' : 'border-transparent',
+              )}
+            >
+              <JobHeadSkeleton />
+            </div>
+          ))}
+        </div>
+        <div className="flex min-h-0 min-w-0 flex-col gap-5 overflow-hidden rounded-xl border border-ods-border bg-ods-card px-8 py-7">
+          <div className={cn('grid shrink-0 grid-cols-[minmax(0,1fr)_minmax(0,380px)] gap-8', PANEL_TOP_HEIGHT_CLASS)}>
+            <div className="flex min-w-0 flex-col overflow-hidden">
+              <div className="mb-2">
+                <LineBar line="text-h2" width="w-64" />
+              </div>
+              <div className="min-h-[3lh] text-h4">
+                <LineBar line="text-h4" width="w-full" />
+                <LineBar line="text-h4" width="w-4/5" />
+              </div>
+              <div className="mt-auto grid grid-cols-1 gap-2">
+                {[0, 1, 2].map(i => (
+                  <div key={i} className="flex min-w-0 items-center gap-2.5">
+                    <Skeleton className="size-4 shrink-0 rounded-full" />
+                    <LineBar line="text-h6" width={i === 1 ? 'w-56' : 'w-48'} />
+                  </div>
+                ))}
+              </div>
+            </div>
+            <ExampleSkeleton />
+          </div>
+          <Skeleton className={cn('shrink-0 rounded-xl', PANEL_SCREEN_HEIGHT_CLASS)} />
+          <div
+            className={cn(
+              'flex min-w-0 shrink-0 items-center gap-[var(--spacing-system-sf)]',
+              PANEL_FOOTER_HEIGHT_CLASS,
+            )}
+          >
+            <LineBar line="text-h5" width="w-16" />
+            <Skeleton className="h-7 w-36 rounded-md" />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

package/src/components/features/index.ts

@@ -100,6 +100,7 @@ export * from './board';
 export * from './devices';
 export * from './software';
 export * from './logs';
+export * from './scripts';
 export * from './knowledge-base';
 export * from './sortable-list';
 export * from './ticket-status-config-list';

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