@adminide-stack/yantra-mobile 12.0.121 → 12.0.123-alpha.0

package/lib/features/canvas/CanvasModelPicker.js

@@ -0,0 +1,176 @@
+import {jsxs,jsx}from'react/jsx-runtime';import {StyleSheet,Platform,View,Pressable,Text,ScrollView}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {groupCanvasChatModels}from'./canvasAgentChat.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function CanvasModelPicker({
+  models,
+  selectedId,
+  onSelect,
+  onClose,
+  title = "Select model"
+}) {
+  const selected = models.find((m) => m.id === selectedId);
+  const groups = groupCanvasChatModels(models);
+  return /* @__PURE__ */ jsxs(View, { style: styles.scrim, pointerEvents: "auto", children: [
+    /* @__PURE__ */ jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: onClose, accessibilityLabel: "Close model picker" }),
+    /* @__PURE__ */ jsxs(View, { style: styles.sheet, children: [
+      /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "chip", size: 16, color: "#64748b" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.headTitle, children: title }),
+        /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 10, accessibilityLabel: "Close model picker", style: styles.close, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 18, color: "#64748b" }) })
+      ] }),
+      selected ? /* @__PURE__ */ jsxs(View, { style: styles.selectedBar, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.selectedKicker, children: "Selected" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.selectedTitle, numberOfLines: 1, children: selected.title })
+      ] }) : null,
+      /* @__PURE__ */ jsx(ScrollView, { style: styles.list, contentContainerStyle: styles.listBody, keyboardShouldPersistTaps: "handled", children: groups.map(({
+        group,
+        options
+      }) => /* @__PURE__ */ jsxs(View, { style: styles.group, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.groupLabel, children: group }),
+        options.map((m) => {
+          const active = m.id === selectedId;
+          return /* @__PURE__ */ jsx(Pressable, { onPress: () => {
+            onSelect(m.id);
+            onClose();
+          }, style: [styles.row, active && styles.rowOn], accessibilityRole: "button", accessibilityState: {
+            selected: active
+          }, children: /* @__PURE__ */ jsxs(View, { style: styles.rowBody, children: [
+            /* @__PURE__ */ jsxs(View, { style: styles.rowTitleLine, children: [
+              /* @__PURE__ */ jsx(Text, { style: styles.rowTitle, numberOfLines: 1, children: m.title }),
+              active ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "check", size: 16, color: "#0f172a" }) : null
+            ] }),
+            /* @__PURE__ */ jsx(Text, { style: styles.rowId, numberOfLines: 1, children: m.id }),
+            m.description ? /* @__PURE__ */ jsx(Text, { style: styles.rowDesc, numberOfLines: 2, children: m.description }) : null
+          ] }) }, m.id);
+        })
+      ] }, group)) })
+    ] })
+  ] });
+}
+const styles = StyleSheet.create({
+  scrim: __spreadProps(__spreadValues({}, StyleSheet.absoluteFillObject), {
+    zIndex: 40,
+    elevation: 40,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    justifyContent: "center",
+    padding: 16
+  }),
+  sheet: {
+    maxHeight: "80%",
+    borderRadius: 16,
+    backgroundColor: "#fff",
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: "#e2e8f0",
+    overflow: "hidden"
+  },
+  head: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#e2e8f0"
+  },
+  headTitle: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  close: {
+    padding: 4
+  },
+  selectedBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    backgroundColor: "#f8fafc",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "#e2e8f0"
+  },
+  selectedKicker: {
+    fontSize: 11,
+    fontWeight: "600",
+    letterSpacing: 0.6,
+    textTransform: "uppercase",
+    color: "#64748b"
+  },
+  selectedTitle: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#0f172a"
+  },
+  list: {
+    maxHeight: 420
+  },
+  listBody: {
+    padding: 8,
+    paddingBottom: 16
+  },
+  group: {
+    marginBottom: 8
+  },
+  groupLabel: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    fontSize: 11,
+    fontWeight: "600",
+    letterSpacing: 0.6,
+    textTransform: "uppercase",
+    color: "#94a3b8"
+  },
+  row: {
+    borderRadius: 10,
+    paddingHorizontal: 12,
+    paddingVertical: 8
+  },
+  rowOn: {
+    backgroundColor: "#f1f5f9"
+  },
+  rowBody: {
+    minWidth: 0,
+    flex: 1
+  },
+  rowTitleLine: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  rowTitle: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "600",
+    color: "#0f172a"
+  },
+  rowId: {
+    marginTop: 2,
+    fontSize: 11,
+    fontFamily: Platform.OS === "ios" ? "Menlo" : "monospace",
+    color: "#94a3b8"
+  },
+  rowDesc: {
+    marginTop: 2,
+    fontSize: 12,
+    color: "#94a3b8"
+  }
+});export{CanvasModelPicker};//# sourceMappingURL=CanvasModelPicker.js.map

package/lib/features/canvas/CanvasModelPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CanvasModelPicker.js","sources":["../../../src/features/canvas/CanvasModelPicker.tsx"],"sourcesContent":["/**\n * Native twin of surface-kit `ModelPicker` — grouped Auto / Image / Video / Audio.\n */\nimport React from 'react';\nimport { Pressable, ScrollView, StyleSheet, Text, View, Platform } from 'react-native';\nimport { MaterialCommunityIcons } from '@expo/vector-icons';\nimport { groupCanvasChatModels, type CanvasChatModelOption } from './canvasAgentChat';\n\nexport function CanvasModelPicker({\n    models,\n    selectedId,\n    onSelect,\n    onClose,\n    title = 'Select model',\n}: {\n    title?: string;\n    models: readonly CanvasChatModelOption[];\n    selectedId?: string;\n    onSelect: (id: string) => void;\n    onClose: () => void;\n}) {\n    const selected = models.find((m) => m.id === selectedId);\n    const groups = groupCanvasChatModels(models);\n\n    return (\n        <View style={styles.scrim} pointerEvents=\"auto\">\n            <Pressable style={StyleSheet.absoluteFill} onPress={onClose} accessibilityLabel=\"Close model picker\" />\n            <View style={styles.sheet}>\n                <View style={styles.head}>\n                    <MaterialCommunityIcons name=\"chip\" size={16} color=\"#64748b\" />\n                    <Text style={styles.headTitle}>{title}</Text>\n                    <Pressable\n                        onPress={onClose}\n                        hitSlop={10}\n                        accessibilityLabel=\"Close model picker\"\n                        style={styles.close}\n                    >\n                        <MaterialCommunityIcons name=\"close\" size={18} color=\"#64748b\" />\n                    </Pressable>\n                </View>\n                {selected ? (\n                    <View style={styles.selectedBar}>\n                        <Text style={styles.selectedKicker}>Selected</Text>\n                        <Text style={styles.selectedTitle} numberOfLines={1}>\n                            {selected.title}\n                        </Text>\n                    </View>\n                ) : null}\n                <ScrollView\n                    style={styles.list}\n                    contentContainerStyle={styles.listBody}\n                    keyboardShouldPersistTaps=\"handled\"\n                >\n                    {groups.map(({ group, options }) => (\n                        <View key={group} style={styles.group}>\n                            <Text style={styles.groupLabel}>{group}</Text>\n                            {options.map((m) => {\n                                const active = m.id === selectedId;\n                                return (\n                                    <Pressable\n                                        key={m.id}\n                                        onPress={() => {\n                                            onSelect(m.id);\n                                            onClose();\n                                        }}\n                                        style={[styles.row, active && styles.rowOn]}\n                                        accessibilityRole=\"button\"\n                                        accessibilityState={{ selected: active }}\n                                    >\n                                        <View style={styles.rowBody}>\n                                            <View style={styles.rowTitleLine}>\n                                                <Text style={styles.rowTitle} numberOfLines={1}>\n                                                    {m.title}\n                                                </Text>\n                                                {active ? (\n                                                    <MaterialCommunityIcons name=\"check\" size={16} color=\"#0f172a\" />\n                                                ) : null}\n                                            </View>\n                                            <Text style={styles.rowId} numberOfLines={1}>\n                                                {m.id}\n                                            </Text>\n                                            {m.description ? (\n                                                <Text style={styles.rowDesc} numberOfLines={2}>\n                                                    {m.description}\n                                                </Text>\n                                            ) : null}\n                                        </View>\n                                    </Pressable>\n                                );\n                            })}\n                        </View>\n                    ))}\n                </ScrollView>\n            </View>\n        </View>\n    );\n}\n\nconst styles = StyleSheet.create({\n    scrim: {\n        ...StyleSheet.absoluteFillObject,\n        zIndex: 40,\n        elevation: 40,\n        backgroundColor: 'rgba(0,0,0,0.4)',\n        justifyContent: 'center',\n        padding: 16,\n    },\n    sheet: {\n        maxHeight: '80%',\n        borderRadius: 16,\n        backgroundColor: '#fff',\n        borderWidth: StyleSheet.hairlineWidth,\n        borderColor: '#e2e8f0',\n        overflow: 'hidden',\n    },\n    head: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        gap: 8,\n        paddingHorizontal: 16,\n        paddingVertical: 12,\n        borderBottomWidth: StyleSheet.hairlineWidth,\n        borderBottomColor: '#e2e8f0',\n    },\n    headTitle: { flex: 1, fontSize: 14, fontWeight: '600', color: '#0f172a' },\n    close: { padding: 4 },\n    selectedBar: {\n        flexDirection: 'row',\n        alignItems: 'center',\n        gap: 8,\n        paddingHorizontal: 16,\n        paddingVertical: 8,\n        backgroundColor: '#f8fafc',\n        borderBottomWidth: StyleSheet.hairlineWidth,\n        borderBottomColor: '#e2e8f0',\n    },\n    selectedKicker: {\n        fontSize: 11,\n        fontWeight: '600',\n        letterSpacing: 0.6,\n        textTransform: 'uppercase',\n        color: '#64748b',\n    },\n    selectedTitle: { flex: 1, fontSize: 14, fontWeight: '500', color: '#0f172a' },\n    list: { maxHeight: 420 },\n    listBody: { padding: 8, paddingBottom: 16 },\n    group: { marginBottom: 8 },\n    groupLabel: {\n        paddingHorizontal: 8,\n        paddingVertical: 4,\n        fontSize: 11,\n        fontWeight: '600',\n        letterSpacing: 0.6,\n        textTransform: 'uppercase',\n        color: '#94a3b8',\n    },\n    row: { borderRadius: 10, paddingHorizontal: 12, paddingVertical: 8 },\n    rowOn: { backgroundColor: '#f1f5f9' },\n    rowBody: { minWidth: 0, flex: 1 },\n    rowTitleLine: { flexDirection: 'row', alignItems: 'center', gap: 8 },\n    rowTitle: { flex: 1, fontSize: 14, fontWeight: '600', color: '#0f172a' },\n    rowId: {\n        marginTop: 2,\n        fontSize: 11,\n        fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',\n        color: '#94a3b8',\n    },\n    rowDesc: { marginTop: 2, fontSize: 12, color: '#94a3b8' },\n});\n"],"names":[],"mappings":"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"}

package/lib/features/canvas/CanvasTasksPanel.js

@@ -1,38 +1,296 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useState,useEffect}from'react';import {StyleSheet,View,Text,Pressable,ScrollView}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {listCanvasTasks,hydrateCanvasTasks,subscribeCanvasTasks,markTaskDelivered,isTerminal,dismissTask}from'./canvasTasks.js';function CanvasTasksPanel({
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect,useCallback}from'react';import {StyleSheet,View,Text,Pressable,ScrollView,Image}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {listCanvasTasks,hydrateCanvasTasks,subscribeCanvasTasks,dismissTask,markTaskDelivered,isTerminal,startPromoTask}from'./canvasTasks.js';import {useCanvasTasksHost,syncCanvasTasks,buildTaskRows,isRowRunningAt,SYNC_RUNNING_MS,SYNC_IDLE_MS,formatWorked,removeRemoteRow,claimRow,renderProgressPct,renderTimeLeft}from'./canvasTaskSync.js';import {isExportTask,DEADLINE_VERDICT_ERROR,jobBoardId,isStaleJob,jobDeadline,isDeadlineVerdict,serverProgressLine}from'./serverTasks.js';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const STALE_LINE = `${DEADLINE_VERDICT_ERROR}.`;
+function useClock(active) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    if (!active) return void 0;
+    const timer = setInterval(() => setNow(Date.now()), 1e3);
+    return () => clearInterval(timer);
+  }, [active]);
+  return now;
+}
+function CanvasTasksPanel({
   onClose,
   onPlaceResult
 }) {
-  const [rows, setRows] = useState(() => listCanvasTasks());
+  const host = useCanvasTasksHost();
+  const [local, setLocal] = useState(() => listCanvasTasks());
+  const [remote, setRemote] = useState([]);
+  const [hidden, setHidden] = useState(() => /* @__PURE__ */ new Set());
+  const syncing = useRef(false);
   useEffect(() => {
-    void hydrateCanvasTasks().then(() => setRows(listCanvasTasks()));
-    return subscribeCanvasTasks(() => setRows(listCanvasTasks()));
+    void hydrateCanvasTasks().then(() => setLocal(listCanvasTasks()));
+    return subscribeCanvasTasks(() => setLocal(listCanvasTasks()));
+  }, []);
+  const sync = useCallback(async () => {
+    if (syncing.current) return;
+    syncing.current = true;
+    try {
+      setRemote(await syncCanvasTasks());
+    } catch (e) {
+    } finally {
+      syncing.current = false;
+    }
   }, []);
+  const rows = buildTaskRows(local, remote, hidden);
+  const now = useClock(rows.some((row) => isRowRunningAt(row, Date.now())));
+  const anyRunning = rows.some((row) => isRowRunningAt(row, now));
+  useEffect(() => {
+    void sync();
+    const timer = setInterval(() => void sync(), anyRunning ? SYNC_RUNNING_MS : SYNC_IDLE_MS);
+    return () => clearInterval(timer);
+  }, [sync, anyRunning]);
+  const hide = (key) => setHidden((prev) => new Set(prev).add(key));
+  const place = async (row) => {
+    var _a, _b, _c, _d;
+    if (row.kind === "task") {
+      if (!await claimRow((_a = row.remote) == null ? void 0 : _a.remoteId)) {
+        markTaskDelivered(row.task.id);
+        return;
+      }
+      onPlaceResult(row.task);
+      markTaskDelivered(row.task.id);
+      return;
+    }
+    const media = (_b = row.job.results) == null ? void 0 : _b.find(isVisualResult);
+    if (!media) return;
+    if (!await claimRow(row.job.remoteId)) {
+      hide(row.key);
+      return;
+    }
+    onPlaceResult({
+      id: row.job.id,
+      kind: "promo",
+      title: row.job.title,
+      brief: row.job.brief,
+      boardId: (_d = (_c = jobBoardId(row.job)) != null ? _c : host.openBoardId) != null ? _d : "",
+      state: "succeeded",
+      createdAt: row.job.createdAt,
+      request: {
+        prompt: row.job.brief
+      },
+      result: {
+        url: media.url,
+        title: media.title || row.job.title,
+        projectId: "",
+        preset: "",
+        pipeline: ""
+      }
+    });
+    hide(row.key);
+  };
+  const dismiss = (row) => {
+    var _a;
+    hide(row.key);
+    if (row.kind === "task") {
+      dismissTask(row.task.id);
+      void removeRemoteRow((_a = row.remote) == null ? void 0 : _a.remoteId);
+    } else {
+      void removeRemoteRow(row.job.remoteId);
+    }
+  };
+  const retryPromo = (request, boardId, brief) => {
+    if (!host.runAction) return;
+    void startPromoTask(host.runAction, {
+      request,
+      boardId,
+      brief
+    });
+  };
+  const retry = (row) => {
+    var _a, _b;
+    if (!host.runAction) return void 0;
+    if (row.kind === "task") {
+      if (row.task.kind !== "promo" || isExportTask(row.task)) return void 0;
+      const {
+        task
+      } = row;
+      return () => {
+        dismiss(row);
+        retryPromo(task.request, task.boardId, task.brief);
+      };
+    }
+    const params = (_a = row.job.input) == null ? void 0 : _a.params;
+    if (row.job.lane !== "promo" || !params || typeof params.prompt !== "string") return void 0;
+    const boardId = (_b = jobBoardId(row.job)) != null ? _b : host.openBoardId;
+    if (!boardId) return void 0;
+    return () => {
+      dismiss(row);
+      retryPromo(params, boardId, row.job.brief);
+    };
+  };
   return /* @__PURE__ */ jsxs(View, { style: styles.root, children: [
     /* @__PURE__ */ jsxs(View, { style: styles.head, children: [
       /* @__PURE__ */ jsx(Text, { style: styles.title, children: "Tasks" }),
       /* @__PURE__ */ jsx(Pressable, { onPress: onClose, hitSlop: 8, accessibilityLabel: "Close tasks", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 20, color: "#64748b" }) })
     ] }),
-    /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.list, children: rows.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.empty, children: "Promo productions that run in the background show up here \u2014 start one from Generate \u2192 Promo." }) : rows.map((task) => {
-      var _a;
-      return /* @__PURE__ */ jsxs(View, { style: styles.card, children: [
-        /* @__PURE__ */ jsxs(View, { style: styles.cardHead, children: [
-          /* @__PURE__ */ jsx(Text, { style: styles.cardTitle, numberOfLines: 1, children: task.title }),
-          /* @__PURE__ */ jsx(Text, { style: [styles.badge, task.state === "succeeded" && styles.badgeOk, task.state === "failed" && styles.badgeFail], children: task.state })
-        ] }),
-        task.brief ? /* @__PURE__ */ jsx(Text, { style: styles.brief, numberOfLines: 2, children: task.brief }) : null,
-        task.lastLine ? /* @__PURE__ */ jsx(Text, { style: styles.line, children: task.lastLine }) : null,
-        task.error ? /* @__PURE__ */ jsx(Text, { style: styles.error, children: task.error }) : null,
-        /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
-          task.state === "succeeded" && ((_a = task.result) == null ? void 0 : _a.url) && !task.delivered ? /* @__PURE__ */ jsx(Pressable, { onPress: () => {
-            onPlaceResult(task);
-            markTaskDelivered(task.id);
-          }, style: styles.primary, children: /* @__PURE__ */ jsx(Text, { style: styles.primaryLabel, children: "Place on board" }) }) : null,
-          isTerminal(task.state) ? /* @__PURE__ */ jsx(Pressable, { onPress: () => dismissTask(task.id), style: styles.ghost, children: /* @__PURE__ */ jsx(Text, { style: styles.ghostLabel, children: "Dismiss" }) }) : null
-        ] })
-      ] }, task.id);
-    }) })
+    /* @__PURE__ */ jsx(ScrollView, { contentContainerStyle: styles.list, children: rows.length === 0 ? /* @__PURE__ */ jsx(Text, { style: styles.empty, children: "Nothing running. A marketing video, an export or a lip sync shows up here when you start one - here or on the web - and keeps going while you work on something else." }) : rows.map((row) => /* @__PURE__ */ jsx(RowCard, { row, now, openBoardId: host.openBoardId, boardLabel: host.boardLabel, onPlace: () => void place(row), onOpenBoard: host.openBoard, onDismiss: () => dismiss(row), onRetry: retry(row) }, row.key)) })
   ] });
 }
+const isVisualResult = (r) => r.kind === "image" || r.kind === "video";
+function viewOf(row, now) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (row.kind === "task") {
+    const {
+      task
+    } = row;
+    const loose = task;
+    const isExport = isExportTask(task);
+    const stale2 = !isTerminal(task.state) && isStaleJob({
+      state: "running",
+      deadlineAt: jobDeadline(task),
+      createdAt: task.createdAt
+    }, now) || isDeadlineVerdict(task);
+    return __spreadProps(__spreadValues({
+      title: task.title,
+      state: stale2 ? "stale" : task.state,
+      line: task.lastLine,
+      error: task.error,
+      boardId: task.boardId,
+      media: ((_a = task.result) == null ? void 0 : _a.url) ? {
+        url: task.result.url,
+        kind: isExport && ((_b = loose.request) == null ? void 0 : _b.media) === "image" ? "image" : "video"
+      } : void 0,
+      delivered: Boolean(task.delivered),
+      elapsedMs: ((_c = task.endedAt) != null ? _c : now) - ((_d = task.startedAt) != null ? _d : task.createdAt)
+    }, isExport ? {
+      exportInfo: {
+        step: loose.step,
+        projectedMs: (_e = loose.handle) == null ? void 0 : _e.projectedMs,
+        notice: (_f = loose.handle) == null ? void 0 : _f.notice
+      }
+    } : {}), {
+      elsewhere: false
+    });
+  }
+  const {
+    job
+  } = row;
+  const stale = isStaleJob(job, now) || isDeadlineVerdict(job);
+  const media = (_g = job.results) == null ? void 0 : _g.find(isVisualResult);
+  return {
+    title: job.title,
+    state: stale ? "stale" : job.state,
+    line: serverProgressLine(job),
+    error: job.error,
+    boardId: jobBoardId(job),
+    media: media ? {
+      url: media.url,
+      kind: media.kind
+    } : void 0,
+    delivered: Boolean(job.delivered),
+    elapsedMs: ((_h = job.endedAt) != null ? _h : now) - ((_i = job.startedAt) != null ? _i : job.createdAt),
+    elsewhere: true
+  };
+}
+function RowCard({
+  row,
+  now,
+  openBoardId,
+  boardLabel,
+  onPlace,
+  onOpenBoard,
+  onDismiss,
+  onRetry
+}) {
+  var _a;
+  const view = viewOf(row, now);
+  const worked = formatWorked(view.elapsedMs);
+  const onThisBoard = !view.boardId || view.boardId === openBoardId;
+  const board = view.boardId ? boardLabel == null ? void 0 : boardLabel(view.boardId) : void 0;
+  const icon = row.kind === "task" ? isExportTask(row.task) ? "movie-open-outline" : "bullhorn-outline" : row.job.lane === "lipsync" ? "account-voice" : row.job.lane === "promo" || row.job.lane === "promo-design" ? "bullhorn-outline" : "creation";
+  return /* @__PURE__ */ jsxs(View, { style: styles.card, testID: `task-card-${row.key}`, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.cardHead, children: [
+      /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: icon, size: 16, color: "#64748b" }),
+      /* @__PURE__ */ jsx(Text, { style: styles.cardTitle, numberOfLines: 1, children: view.title }),
+      /* @__PURE__ */ jsx(StateChip, { state: view.state, worked }),
+      view.state !== "submitting" ? /* @__PURE__ */ jsx(Pressable, { onPress: onDismiss, hitSlop: 8, accessibilityLabel: "Dismiss", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close", size: 16, color: "#94a3b8" }) }) : null
+    ] }),
+    !onThisBoard ? /* @__PURE__ */ jsxs(Text, { style: styles.line, children: [
+      "on ",
+      board ? `\u201C${board}\u201D` : "another board"
+    ] }) : null,
+    view.elsewhere ? /* @__PURE__ */ jsx(Text, { style: styles.line, children: "Started on another device" }) : null,
+    view.state === "stale" ? /* @__PURE__ */ jsxs(View, { style: styles.staleBox, children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.error, children: STALE_LINE }),
+      /* @__PURE__ */ jsxs(View, { style: styles.actions, children: [
+        onRetry ? /* @__PURE__ */ jsx(Pressable, { onPress: onRetry, style: styles.primary, children: /* @__PURE__ */ jsx(Text, { style: styles.primaryLabel, children: "Run again" }) }) : null,
+        /* @__PURE__ */ jsx(Pressable, { onPress: onDismiss, style: styles.ghost, children: /* @__PURE__ */ jsx(Text, { style: styles.ghostLabel, children: "Dismiss" }) })
+      ] })
+    ] }) : null,
+    view.state === "running" || view.state === "submitting" ? /* @__PURE__ */ jsx(Fragment, { children: view.exportInfo ? /* @__PURE__ */ jsx(ExportProgress, { info: view.exportInfo, elapsedMs: view.elapsedMs, line: view.line }) : view.line ? /* @__PURE__ */ jsx(Text, { style: styles.line, numberOfLines: 2, children: view.line }) : null }) : null,
+    view.state === "succeeded" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      view.media ? /* @__PURE__ */ jsx(ResultThumb, { url: view.media.url, kind: view.media.kind }) : null,
+      /* @__PURE__ */ jsx(View, { style: styles.actions, children: !view.media ? null : view.delivered && onThisBoard ? /* @__PURE__ */ jsx(Text, { style: styles.done, children: "On this board" }) : onThisBoard ? /* @__PURE__ */ jsx(Pressable, { onPress: onPlace, style: styles.primary, children: /* @__PURE__ */ jsx(Text, { style: styles.primaryLabel, children: "Place on board" }) }) : onOpenBoard && view.boardId ? /* @__PURE__ */ jsx(Pressable, { onPress: () => onOpenBoard(view.boardId), style: styles.primary, children: /* @__PURE__ */ jsx(Text, { style: styles.primaryLabel, children: "Open board" }) }) : null })
+    ] }) : null,
+    view.state === "failed" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Text, { style: styles.error, children: view.error || "The run could not finish." }),
+      ((_a = view.exportInfo) == null ? void 0 : _a.notice) ? /* @__PURE__ */ jsx(Text, { style: styles.notice, children: view.exportInfo.notice }) : null,
+      onRetry ? /* @__PURE__ */ jsx(View, { style: styles.actions, children: /* @__PURE__ */ jsx(Pressable, { onPress: onRetry, style: styles.primary, children: /* @__PURE__ */ jsx(Text, { style: styles.primaryLabel, children: "Run again" }) }) }) : null
+    ] }) : null
+  ] });
+}
+function StateChip({
+  state,
+  worked
+}) {
+  if (state === "stale") return /* @__PURE__ */ jsx(Text, { style: [styles.badge, styles.badgeFail], children: "Stopped responding" });
+  if (state === "succeeded") return /* @__PURE__ */ jsxs(Text, { style: [styles.badge, styles.badgeOk], children: [
+    "Ready \xB7 ",
+    worked
+  ] });
+  if (state === "failed") return /* @__PURE__ */ jsxs(Text, { style: [styles.badge, styles.badgeFail], children: [
+    "Stopped \xB7 ",
+    worked
+  ] });
+  return /* @__PURE__ */ jsx(Text, { style: [styles.badge, styles.badgeRun], children: state === "submitting" ? "Starting" : `Running \xB7 ${worked}` });
+}
+function ExportProgress({
+  info,
+  elapsedMs,
+  line
+}) {
+  const pct = Math.round(renderProgressPct(info.step, info.projectedMs, elapsedMs));
+  return /* @__PURE__ */ jsxs(View, { style: styles.progressBox, children: [
+    /* @__PURE__ */ jsx(Text, { style: styles.line, numberOfLines: 1, children: info.step ? `Step ${info.step.index} of ${info.step.total} \xB7 ${info.step.label}` : line || "Rendering\u2026" }),
+    /* @__PURE__ */ jsx(View, { style: styles.bar, accessibilityRole: "progressbar", accessibilityValue: {
+      min: 0,
+      max: 100,
+      now: pct
+    }, accessibilityLabel: "Render progress", children: /* @__PURE__ */ jsx(View, { style: [styles.barFill, {
+      width: `${pct}%`
+    }] }) }),
+    info.projectedMs ? /* @__PURE__ */ jsx(Text, { style: styles.line, children: renderTimeLeft(info.projectedMs, elapsedMs) }) : null,
+    info.notice ? /* @__PURE__ */ jsx(Text, { style: styles.notice, children: info.notice }) : null
+  ] });
+}
+function ResultThumb({
+  url,
+  kind
+}) {
+  if (kind === "image") return /* @__PURE__ */ jsx(Image, { source: {
+    uri: url
+  }, style: styles.thumb, resizeMode: "cover" });
+  return /* @__PURE__ */ jsx(View, { style: [styles.thumb, styles.thumbGlyph], children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "filmstrip", size: 28, color: "#94a3b8" }) });
+}
 const styles = StyleSheet.create({
   root: {
     flex: 1,
@@ -83,12 +341,16 @@ const styles = StyleSheet.create({
   badge: {
     fontSize: 10,
     fontWeight: "700",
-    textTransform: "uppercase",
     color: "#64748b",
     backgroundColor: "#f1f5f9",
     paddingHorizontal: 6,
     paddingVertical: 2,
-    borderRadius: 6
+    borderRadius: 6,
+    overflow: "hidden"
+  },
+  badgeRun: {
+    color: "#fff7ed",
+    backgroundColor: "#ea580c"
   },
   badgeOk: {
     color: "#166534",
@@ -98,10 +360,6 @@ const styles = StyleSheet.create({
     color: "#991b1b",
     backgroundColor: "#fee2e2"
   },
-  brief: {
-    fontSize: 12,
-    color: "#334155"
-  },
   line: {
     fontSize: 11,
     color: "#64748b"
@@ -110,6 +368,44 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: "#b91c1c"
   },
+  notice: {
+    fontSize: 11,
+    color: "#b45309"
+  },
+  done: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: "#166534",
+    paddingVertical: 8
+  },
+  staleBox: {
+    gap: 6
+  },
+  progressBox: {
+    gap: 4
+  },
+  bar: {
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: "#f1f5f9",
+    overflow: "hidden"
+  },
+  barFill: {
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: "#ea580c"
+  },
+  thumb: {
+    width: "100%",
+    aspectRatio: 16 / 9,
+    borderRadius: 8,
+    overflow: "hidden",
+    backgroundColor: "#f1f5f9"
+  },
+  thumbGlyph: {
+    alignItems: "center",
+    justifyContent: "center"
+  },
   actions: {
     flexDirection: "row",
     gap: 8,