@wix/himalaya-cli 0.1424.0 → 0.1426.0

package/dist/cli.mjs

@@ -10225,6 +10225,115 @@ var init_raw_json_depth = __esm({
   }
 });
 
+// ../../core/dev-server/src/depth-budget.ts
+function isOpaqueAuthorJson(key2, value, atRoot) {
+  if (value === null || typeof value !== "object") return false;
+  return key2 === "args" || atRoot && key2 === "input";
+}
+function depthBudgetFindings(descriptor) {
+  const out2 = [];
+  const templates = [];
+  const isComponent = (v2) => {
+    const body = v2?.body;
+    return !!body && typeof body === "object" && typeof body.type === "string" && typeof body.package === "string";
+  };
+  const hostedTemplates = (v2, path2) => {
+    const props = v2.body.props;
+    const found = [];
+    if (!props) return found;
+    const itemsPath = props.itemsPath ?? props.items_path;
+    const rowHost = v2.body.package === "himalaya" ? ROW_TEMPLATE_HOST_TYPES.has(v2.body.type) : true;
+    if (rowHost && typeof itemsPath === "string" && itemsPath !== "" && Array.isArray(props.items) && isComponent(props.items[0])) {
+      found.push({ node: props.items[0], path: `${path2}.body.props.items[0]`, host: `${v2.body.type} at ${path2}` });
+    }
+    if (isComponent(props.eventTemplate)) {
+      found.push({ node: props.eventTemplate, path: `${path2}.body.props.eventTemplate`, host: `${v2.body.type} at ${path2}` });
+    }
+    return found;
+  };
+  const measure2 = (root, rootPath, mode) => {
+    let depth = 0, nodes = 0, deepest = rootPath;
+    const skip = /* @__PURE__ */ new Set();
+    const stack = [
+      { v: root, path: rootPath, depth: 0, atRoot: mode === "screen" }
+    ];
+    while (stack.length) {
+      const { v: v2, path: path2, depth: parentDepth, atRoot } = stack.pop();
+      if (skip.has(v2)) continue;
+      if (Array.isArray(v2)) {
+        for (let i2 = v2.length - 1; i2 >= 0; i2--) stack.push({ v: v2[i2], path: `${path2}[${i2}]`, depth: parentDepth, atRoot: false });
+        continue;
+      }
+      if (!v2 || typeof v2 !== "object") continue;
+      let here = parentDepth;
+      if (isComponent(v2)) {
+        here = parentDepth + 1;
+        nodes += 1;
+        if (here > depth) {
+          depth = here;
+          deepest = path2;
+        }
+        for (const t2 of hostedTemplates(v2, path2)) {
+          if (mode === "screen") templates.push(t2);
+          else skip.add(t2.node);
+        }
+      }
+      const entries = Object.entries(v2);
+      for (let i2 = entries.length - 1; i2 >= 0; i2--) {
+        const [key2, child] = entries[i2];
+        if (!child || typeof child !== "object" || isOpaqueAuthorJson(key2, child, atRoot)) continue;
+        stack.push({ v: child, path: `${path2}.${key2}`, depth: here, atRoot: false });
+      }
+    }
+    return { depth, nodes, deepest };
+  };
+  const flatten = "flatten the layout \u2014 drop wrapper stacks, or move a section into its own screen";
+  const report3 = (what, m2, budget, rootPath) => {
+    if (m2.depth > budget.maxDepth) {
+      out2.push({
+        measure: "depth",
+        path: m2.deepest,
+        limit: budget.maxDepth,
+        actual: m2.depth,
+        message: `${what} nests ${m2.depth} component levels; the limit is ${budget.maxDepth} (deepest node at ${m2.deepest}) \u2014 ${flatten}`
+      });
+    }
+    if (m2.nodes > budget.maxNodes) {
+      out2.push({
+        measure: "nodes",
+        path: rootPath,
+        limit: budget.maxNodes,
+        actual: m2.nodes,
+        message: `${what} has ${m2.nodes} components; the limit is ${budget.maxNodes} \u2014 ${flatten}`
+      });
+    }
+  };
+  report3("screen", measure2(descriptor, "$", "screen"), DESCRIPTOR_DEPTH_BUDGETS.screen, "$");
+  for (const t2 of templates) {
+    report3(`row template of the ${t2.host}`, measure2(t2.node, t2.path, "template"), DESCRIPTOR_DEPTH_BUDGETS.rowTemplate, t2.path);
+  }
+  return out2;
+}
+function screenDepthFindings(descriptor) {
+  const raw = rawJsonDepthFinding(descriptor);
+  return raw ? [raw] : depthBudgetFindings(descriptor);
+}
+function depthBudgetIssue(f2) {
+  return { severity: "error", pass: "depth-budget", path: f2.path, message: f2.message, limit: f2.limit, actual: f2.actual };
+}
+var DESCRIPTOR_DEPTH_BUDGETS, ROW_TEMPLATE_HOST_TYPES;
+var init_depth_budget = __esm({
+  "../../core/dev-server/src/depth-budget.ts"() {
+    init_worker_subtree();
+    init_raw_json_depth();
+    DESCRIPTOR_DEPTH_BUDGETS = Object.freeze({
+      screen: Object.freeze({ maxDepth: 40, maxNodes: 2e3 }),
+      rowTemplate: Object.freeze({ maxDepth: WORKER_SUBTREE_CEILINGS.maxDepth, maxNodes: WORKER_SUBTREE_CEILINGS.maxNodes })
+    });
+    ROW_TEMPLATE_HOST_TYPES = /* @__PURE__ */ new Set(["LazyList", "Grid", "Carousel", "Menu"]);
+  }
+});
+
 // ../../core/dev-server/src/realm-parity.ts
 function allowlistSweepSource(keep = []) {
   const key2 = [...keep].sort().join(",");
@@ -10302,6 +10411,7 @@ __export(validate_descriptor_core_exports, {
   collectServiceBindings: () => collectServiceBindings,
   componentPropFindings: () => componentPropFindings,
   depthBudgetFindings: () => depthBudgetFindings,
+  depthBudgetIssue: () => depthBudgetIssue,
   depthBudgetIssues: () => depthBudgetIssues,
   deviceParityWithheldFrom: () => deviceParityWithheldFrom,
   dryRunBundle: () => dryRunBundle,
@@ -11094,10 +11204,6 @@ function ellipsis(value, max) {
 function own3(table, key2) {
   return Object.prototype.hasOwnProperty.call(table, key2) ? table[key2] : void 0;
 }
-function isOpaqueAuthorJson(key2, value, atRoot) {
-  if (value === null || typeof value !== "object") return false;
-  return key2 === "args" || atRoot && key2 === "input";
-}
 function pathCrossesOpaqueAuthorJson(path2) {
   if (typeof path2 !== "string") return false;
   return /^\$\.input(?:[.[]|$)/.test(path2) || /\.args(?:[.[]|$)/.test(path2);
@@ -11828,103 +11934,8 @@ function bottomSheetFindings(descriptor) {
   visit(descriptor, "", true);
   return out2;
 }
-function screenDepthFindings(descriptor) {
-  const raw = rawJsonDepthFinding(descriptor);
-  return raw ? [raw] : depthBudgetFindings(descriptor);
-}
 function depthBudgetIssues(findings) {
-  return findings.map((f2) => ({
-    severity: "error",
-    pass: "depth-budget",
-    path: f2.path,
-    message: f2.message,
-    limit: f2.limit,
-    actual: f2.actual
-  }));
-}
-function depthBudgetFindings(descriptor) {
-  const out2 = [];
-  const templates = [];
-  const isComponent = (v2) => {
-    const body = v2?.body;
-    return !!body && typeof body === "object" && typeof body.type === "string" && typeof body.package === "string";
-  };
-  const hostedTemplates = (v2, path2) => {
-    const props = v2.body.props;
-    const found = [];
-    if (!props) return found;
-    const itemsPath = props.itemsPath ?? props.items_path;
-    const rowHost = v2.body.package === "himalaya" ? ROW_TEMPLATE_HOST_TYPES.has(v2.body.type) : true;
-    if (rowHost && typeof itemsPath === "string" && itemsPath !== "" && Array.isArray(props.items) && isComponent(props.items[0])) {
-      found.push({ node: props.items[0], path: `${path2}.body.props.items[0]`, host: `${v2.body.type} at ${path2}` });
-    }
-    if (isComponent(props.eventTemplate)) {
-      found.push({ node: props.eventTemplate, path: `${path2}.body.props.eventTemplate`, host: `${v2.body.type} at ${path2}` });
-    }
-    return found;
-  };
-  const measure2 = (root, rootPath, mode) => {
-    let depth = 0, nodes = 0, deepest = rootPath;
-    const skip = /* @__PURE__ */ new Set();
-    const stack = [
-      { v: root, path: rootPath, depth: 0, atRoot: mode === "screen" }
-    ];
-    while (stack.length) {
-      const { v: v2, path: path2, depth: parentDepth, atRoot } = stack.pop();
-      if (skip.has(v2)) continue;
-      if (Array.isArray(v2)) {
-        for (let i2 = v2.length - 1; i2 >= 0; i2--) stack.push({ v: v2[i2], path: `${path2}[${i2}]`, depth: parentDepth, atRoot: false });
-        continue;
-      }
-      if (!v2 || typeof v2 !== "object") continue;
-      let here = parentDepth;
-      if (isComponent(v2)) {
-        here = parentDepth + 1;
-        nodes += 1;
-        if (here > depth) {
-          depth = here;
-          deepest = path2;
-        }
-        for (const t2 of hostedTemplates(v2, path2)) {
-          if (mode === "screen") templates.push(t2);
-          else skip.add(t2.node);
-        }
-      }
-      const entries = Object.entries(v2);
-      for (let i2 = entries.length - 1; i2 >= 0; i2--) {
-        const [key2, child] = entries[i2];
-        if (!child || typeof child !== "object" || isOpaqueAuthorJson(key2, child, atRoot)) continue;
-        stack.push({ v: child, path: `${path2}.${key2}`, depth: here, atRoot: false });
-      }
-    }
-    return { depth, nodes, deepest };
-  };
-  const flatten = "flatten the layout \u2014 drop wrapper stacks, or move a section into its own screen";
-  const report3 = (what, m2, budget, rootPath) => {
-    if (m2.depth > budget.maxDepth) {
-      out2.push({
-        measure: "depth",
-        path: m2.deepest,
-        limit: budget.maxDepth,
-        actual: m2.depth,
-        message: `${what} nests ${m2.depth} component levels; the limit is ${budget.maxDepth} (deepest node at ${m2.deepest}) \u2014 ${flatten}`
-      });
-    }
-    if (m2.nodes > budget.maxNodes) {
-      out2.push({
-        measure: "nodes",
-        path: rootPath,
-        limit: budget.maxNodes,
-        actual: m2.nodes,
-        message: `${what} has ${m2.nodes} components; the limit is ${budget.maxNodes} \u2014 ${flatten}`
-      });
-    }
-  };
-  report3("screen", measure2(descriptor, "$", "screen"), DESCRIPTOR_DEPTH_BUDGETS.screen, "$");
-  for (const t2 of templates) {
-    report3(`row template of the ${t2.host}`, measure2(t2.node, t2.path, "template"), DESCRIPTOR_DEPTH_BUDGETS.rowTemplate, t2.path);
-  }
-  return out2;
+  return findings.map(depthBudgetIssue);
 }
 function topBarFindings(descriptor) {
   const out2 = [];
@@ -12685,7 +12696,7 @@ function validateScreenDescriptor(screenId, descriptor, opts = {}) {
     services: Object.keys(services)
   };
 }
-var CRAWL_BLOCKING_PASSES, BOOT_EVAL_TIMEOUT_MS, DRIFT_PROBES, DEVICE_NETWORK_WITHHELD, DEVICE_STRIPPED_HOST_GLOBALS, DEVICE_WITHHELD, DEVICE_PARITY_CANDIDATES, DEVICE_PARITY_WITHHELD, defaultEvaluator, bootEvaluator, actionEvaluator, NATIVE_PROP_ENUMS, KNOWN_PROPS, IN_ARRAY_BINDING_PROPS, SERVICE_SIGIL, INTEGER_PROPS, NATIVE_REQUIRED_PROPS, bareNestedClass, NATIVE_NESTED_CLASSES, NATIVE_MODIFIERS_CLASS, NATIVE_DESCRIPTOR_CLASS, NATIVE_DESCRIPTOR_NESTED, NATIVE_NESTED_PROPS, LENIENT_TOP_BAR_BLOCKS, MODIFIER_KEYS, INTEGER_MODIFIERS, MODIFIER_KINDS, SCHEMA_SCORED_NODES, CORE_PACKAGES, LEGACY_UNSCORED_KEYS, DYNAMIC_PLACEHOLDER, LITERAL_ONLY_PROPS, SERVICE_ONLY_BINDING_PROPS, WHOLE_VALUE_BINDING, EMBEDDED_BINDING, OPTIONS_BINDING_PROPS, EDITOR_SERVICE_NAME, SHEET_PLACEMENTS, DESCRIPTOR_DEPTH_BUDGETS, UNSAFE_TO_RECURSE_DEPTH, ROW_TEMPLATE_HOST_TYPES, TOP_BAR_TRAILING_LIMIT, TOP_BAR_NON_TRAILING, BUTTON_STYLES, EMPTY_STATE_ACTION_STYLES, EMPTY_STATE_ACTION_SIZES;
+var CRAWL_BLOCKING_PASSES, BOOT_EVAL_TIMEOUT_MS, DRIFT_PROBES, DEVICE_NETWORK_WITHHELD, DEVICE_STRIPPED_HOST_GLOBALS, DEVICE_WITHHELD, DEVICE_PARITY_CANDIDATES, DEVICE_PARITY_WITHHELD, defaultEvaluator, bootEvaluator, actionEvaluator, NATIVE_PROP_ENUMS, KNOWN_PROPS, IN_ARRAY_BINDING_PROPS, SERVICE_SIGIL, INTEGER_PROPS, NATIVE_REQUIRED_PROPS, bareNestedClass, NATIVE_NESTED_CLASSES, NATIVE_MODIFIERS_CLASS, NATIVE_DESCRIPTOR_CLASS, NATIVE_DESCRIPTOR_NESTED, NATIVE_NESTED_PROPS, LENIENT_TOP_BAR_BLOCKS, MODIFIER_KEYS, INTEGER_MODIFIERS, MODIFIER_KINDS, SCHEMA_SCORED_NODES, CORE_PACKAGES, LEGACY_UNSCORED_KEYS, DYNAMIC_PLACEHOLDER, LITERAL_ONLY_PROPS, SERVICE_ONLY_BINDING_PROPS, WHOLE_VALUE_BINDING, EMBEDDED_BINDING, OPTIONS_BINDING_PROPS, EDITOR_SERVICE_NAME, SHEET_PLACEMENTS, UNSAFE_TO_RECURSE_DEPTH, TOP_BAR_TRAILING_LIMIT, TOP_BAR_NON_TRAILING, BUTTON_STYLES, EMPTY_STATE_ACTION_STYLES, EMPTY_STATE_ACTION_SIZES;
 var init_validate_descriptor_core = __esm({
   "../../core/dev-server/src/validate-descriptor.core.ts"() {
     init_validator();
@@ -12700,7 +12711,7 @@ var init_validate_descriptor_core = __esm({
     init_media_value();
     init_frame_limits();
     init_rich_content();
-    init_worker_subtree();
+    init_depth_budget();
     init_raw_json_depth();
     init_realm_parity();
     init_realm_parity();
@@ -13733,12 +13744,7 @@ var init_validate_descriptor_core = __esm({
     OPTIONS_BINDING_PROPS = /* @__PURE__ */ new Set(["optionsPath"]);
     EDITOR_SERVICE_NAME = /^[A-Za-z][A-Za-z0-9_-]{0,63}$/;
     SHEET_PLACEMENTS = /* @__PURE__ */ new Set(["overlay", "inline"]);
-    DESCRIPTOR_DEPTH_BUDGETS = Object.freeze({
-      screen: Object.freeze({ maxDepth: 40, maxNodes: 2e3 }),
-      rowTemplate: Object.freeze({ maxDepth: WORKER_SUBTREE_CEILINGS.maxDepth, maxNodes: WORKER_SUBTREE_CEILINGS.maxNodes })
-    });
     UNSAFE_TO_RECURSE_DEPTH = 128;
-    ROW_TEMPLATE_HOST_TYPES = /* @__PURE__ */ new Set(["LazyList", "Grid", "Carousel", "Menu"]);
     TOP_BAR_TRAILING_LIMIT = 2;
     TOP_BAR_NON_TRAILING = /* @__PURE__ */ new Set(["leading", "principal", "bottom", "keyboard", "overflow"]);
     BUTTON_STYLES = /* @__PURE__ */ new Set(["filled", "tonal", "outlined", "text", "elevated", "bordered", "prominent", "plain", "glass", "primary", "secondary", "tertiary", "link", "destructive"]);
@@ -14295,6 +14301,7 @@ __export(validate_descriptor_exports, {
   collectServiceBindings: () => collectServiceBindings,
   componentPropFindings: () => componentPropFindings,
   depthBudgetFindings: () => depthBudgetFindings,
+  depthBudgetIssue: () => depthBudgetIssue,
   depthBudgetIssues: () => depthBudgetIssues,
   deviceParityWithheldFrom: () => deviceParityWithheldFrom,
   discoverNativeActions: () => discoverNativeActions,
@@ -132881,6 +132888,28 @@ function refuseTooDeep(screenId, descriptor) {
   if (finding) throw new DescriptorDepthRefusal(screenId, finding);
   return descriptor;
 }
+async function liveDescriptorFor(state, screenId) {
+  try {
+    const override = state.localOverrides.get(screenId);
+    return {
+      descriptor: override !== void 0 ? refuseTooDeep(screenId, override) : await buildDescriptorForScreenId(state, screenId, new URLSearchParams(), { skipOverride: true })
+    };
+  } catch (err) {
+    if (err instanceof DescriptorDepthRefusal) return { refusal: err };
+    throw err;
+  }
+}
+function depthRefusalReport(refusal, strict = false) {
+  return { screenId: refusal.screenId, ok: false, strict, issues: [depthBudgetIssue(refusal.finding)], services: [] };
+}
+function depthRefusalDiagnostics(state, refusal) {
+  const legacy = { ...depthRefusalReport(refusal), bundle: null, telemetry: [], lastError: null };
+  return foldLegacyReport(legacy, {
+    source: "diagnostics",
+    screenId: refusal.screenId,
+    evidence: { runId: `dev:${state.startedAt}:${refusal.screenId}`, ts: (/* @__PURE__ */ new Date()).toISOString() }
+  });
+}
 async function buildDescriptorForScreenId(state, screenId, query = new URLSearchParams(), options = {}) {
   if (!options.skipOverride) {
     const preview = state.localOverrides.get(screenId);
@@ -132910,13 +132939,13 @@ async function buildDescriptorForScreenId(state, screenId, query = new URLSearch
       }
       return null;
     })();
-    return built ? postprocessDescriptor(refuseTooDeep(screenId, built), {
+    return built ? refuseTooDeep(screenId, postprocessDescriptor(refuseTooDeep(screenId, built), {
       config: uiConfig(state.app.module.config),
       flagDefinitions: state.flagStore.list(),
       evalContext: evalCtx,
       flagOverrides: cfg?.overrides,
       readBundle: tier5BundleReader(state.tier5Dir ?? TIER5_ROOT2)
-    }) : null;
+    })) : null;
   }
   return null;
 }
@@ -134156,7 +134185,21 @@ async function handleDev(req, res, state) {
     }
     let descriptor = body.descriptor;
     if (!descriptor && body.screenId) {
-      descriptor = state.localOverrides.get(body.screenId) ?? await buildDescriptorForScreenId(state, body.screenId, new URLSearchParams(), { skipOverride: true });
+      const live3 = await liveDescriptorFor(state, body.screenId);
+      if ("refusal" in live3) {
+        const diagnostics2 = depthRefusalDiagnostics(state, live3.refusal);
+        const legacy2 = { screenId: body.screenId, scheme, renderable: false, reason: `depth_budget_exceeded: ${live3.refusal.finding.message}`, diagnostics: diagnostics2 };
+        const report4 = foldLegacyReport(legacy2, {
+          source: "render",
+          screenId: body.screenId,
+          ok: false,
+          findings: diagnostics2.findings ?? [],
+          artifacts: [],
+          evidence: { runId: `dev:${state.startedAt}:${body.screenId}`, ts: (/* @__PURE__ */ new Date()).toISOString() }
+        });
+        return sendJson(res, body.envelope === 1 ? 422 : 200, report4);
+      }
+      descriptor = live3.descriptor;
     }
     if (!descriptor || typeof descriptor !== "object") {
       return sendJson(res, 404, { error: "screen_not_found", screenId: body.screenId ?? null });
@@ -134203,7 +134246,9 @@ async function handleDev(req, res, state) {
     const diagMatch = /^\/__dev\/screen\/(.+?)\/diagnostics(?:\?|$)/.exec(url);
     if (diagMatch && req.method === "GET") {
       const screenId = decodeURIComponent(diagMatch[1]);
-      const descriptor = state.localOverrides.get(screenId) ?? await buildDescriptorForScreenId(state, screenId, new URLSearchParams(), { skipOverride: true });
+      const live3 = await liveDescriptorFor(state, screenId);
+      if ("refusal" in live3) return sendJson(res, 422, depthRefusalDiagnostics(state, live3.refusal));
+      const descriptor = live3.descriptor;
       if (!descriptor) return sendJson(res, 404, { error: "screen_not_found", screenId });
       const diag = await runScreenDiagnostics(state, screenId, descriptor);
       return sendJson(res, diag.ok ? 200 : 422, diag);
@@ -134645,7 +134690,9 @@ async function handleAdminPlayground(req, res, state) {
   if (validateMatch && req.method === "GET") {
     const screenId = decodeURIComponent(validateMatch[1]);
     const strict = /[?&]strict=1(?:&|$)/.test(url);
-    const descriptor = state.localOverrides.get(screenId) ?? await buildDescriptorForScreenId(state, screenId, new URLSearchParams(), { skipOverride: true });
+    const live3 = await liveDescriptorFor(state, screenId);
+    if ("refusal" in live3) return sendJson(res, 422, depthRefusalReport(live3.refusal, strict));
+    const descriptor = live3.descriptor;
     if (!descriptor) return sendJson(res, 404, { error: "screen_not_found", screenId });
     const { validateScreenDescriptor: validateScreenDescriptor2, loadAllowedComponents: loadAllowedComponents2, readBuiltBundle: readBuiltBundle2, appWorkerActionsFor: appWorkerActionsFor2 } = await Promise.resolve().then(() => (init_validate_descriptor(), validate_descriptor_exports));
     const tokens2 = readAppTokens(state) ?? void 0;
@@ -134677,7 +134724,7 @@ async function handleAdminPlayground(req, res, state) {
     if (!wantBuilt) {
       const override = state.localOverrides.get(screenId);
       if (override) {
-        return sendJson(res, 200, { screenId, source: "override", descriptor: { ...override, screenId } });
+        return sendJson(res, 200, { screenId, source: "override", descriptor: refuseTooDeep(screenId, { ...override, screenId }) });
       }
     }
     const built = await buildDescriptorForScreenId(state, screenId, new URLSearchParams(), { skipOverride: true });
@@ -134695,6 +134742,7 @@ async function handleAdminPlayground(req, res, state) {
     if (!payload.descriptor || typeof payload.descriptor !== "object") {
       return sendJson(res, 400, { error: "descriptor_required" });
     }
+    refuseTooDeep(screenId, payload.descriptor);
     state.localOverrides.set(screenId, payload.descriptor);
     recordOverrideHistory(state, screenId, "put", payload.descriptor, payload.notes ?? null);
     invalidate(state, screenId);
@@ -135715,6 +135763,7 @@ var init_src6 = __esm({
     init_app_icon();
     init_app_assets();
     init_raw_json_depth();
+    init_depth_budget();
     init_app_module();
     init_provisioning_facts();
     init_validate();
@@ -139420,6 +139469,7 @@ async function buildFromLoaded(preloaded, dest, opts = {}) {
   const store = typeof dest === "string" ? new FileReleaseStore(dest) : dest;
   const screenIds = Object.keys(preloaded.module.screens.exact);
   const failedToBuild = [];
+  const depthRefusals = [];
   const missingBundles = [];
   const widgetBakeFailures = [];
   const lint = [];
@@ -139801,6 +139851,7 @@ async function buildFromLoaded(preloaded, dest, opts = {}) {
     const finding = depthRefusalFromText(res.status, text9);
     if (finding) {
       failedToBuild.push({ screenId, status: res.status, error: finding.message });
+      if (!depthRefusals.some((r2) => r2.screenId === screenId)) depthRefusals.push({ screenId, finding });
       if (collect2?.lint && !lint.some((l2) => l2.screenId === screenId)) {
         lint.push({ screenId, ok: false, issues: depthBudgetIssues([finding]) });
       }
@@ -139905,10 +139956,11 @@ async function buildFromLoaded(preloaded, dest, opts = {}) {
         const { services, liveCalls, liveReturned, liveErrors, mockCalls, mockUnserved, mockBootFailed, liveFailed } = await renderServicesFor(bundleName, descriptor, wantedRender);
         const rr2 = await renderDescriptorWeb(descriptor, renderTokens, renderScheme, collect2.render.png === true, services, collect2.render.width, collect2.render.rtl === true);
         renders.push({ screenId: wantedRender, scheme: renderScheme, ...rr2, ...await renderCompare(descriptor, services), ...collect2.render.dumpState && services ? { serviceState: services } : {}, ...liveCalls ? { liveCalls } : {}, ...liveReturned !== void 0 ? { liveReturned } : {}, ...liveFailed ? { liveFailed } : {}, ...liveErrors ? { liveErrors } : {}, ...mockCalls ? { mockCalls, mockUnserved } : {}, ...mockBootFailed ? { mockBootFailed } : {} });
-      } else if (res.status === 422 && collect2?.lint) {
+      } else if (res.status === 422) {
         const finding = await depthRefusalOf(res);
+        if (finding && !depthRefusals.some((r2) => r2.screenId === wantedRender)) depthRefusals.push({ screenId: wantedRender, finding });
         const recorded = lint.some((l2) => l2.screenId === wantedRender) || failedToBuild.some((f2) => f2.screenId === wantedRender);
-        if (finding && !recorded) lint.push({ screenId: wantedRender, ok: false, issues: depthBudgetIssues([finding]) });
+        if (finding && collect2?.lint && !recorded) lint.push({ screenId: wantedRender, ok: false, issues: depthBudgetIssues([finding]) });
       }
     }
     for (const t2 of preloaded.module.screens.templated ?? []) {
@@ -139990,6 +140042,18 @@ async function buildFromLoaded(preloaded, dest, opts = {}) {
           }
           delete descriptor.etag;
           if (typeof descriptor.screenId === "string" && descriptor.screenId !== screenId) descriptor.screenId = screenId;
+          if (collect2?.lint) {
+            const depth = depthBudgetIssues(screenDepthFindings(descriptor));
+            const existing = lint.find((l2) => l2.screenId === screenId);
+            const seen = new Set((existing?.issues ?? []).filter((i2) => i2.pass === "depth-budget").map((i2) => `${i2.path}|${i2.limit}`));
+            const fresh = depth.filter((i2) => !seen.has(`${i2.path}|${i2.limit}`));
+            if (fresh.length && existing) {
+              existing.issues.push(...fresh);
+              existing.ok = false;
+            } else if (fresh.length) {
+              lint.push({ screenId, ok: false, issues: fresh });
+            }
+          }
           const json7 = pinBakedServerBaseUrl(JSON.stringify(descriptor), base);
           await store.putScreen(app, screenId, json7);
           screens[screenId] = { descriptorHash: sha2564(json7), bundle: bundleName, ...screenMetadataFor(screenMetadata, screenId, canonical4) };
@@ -140203,6 +140267,7 @@ async function buildFromLoaded(preloaded, dest, opts = {}) {
   return {
     manifest,
     failedToBuild,
+    depthRefusals,
     missingBundles,
     // Only bundles a screen actually referenced are weighed — `tierBundles` is filled by
     // addressBundle, which runs on reference, so an unreferenced file on disk never counts.
@@ -140269,7 +140334,7 @@ async function buildFunctionsOnlyRelease(preloaded, dest) {
   const sha2 = gitSha();
   const manifest = { releaseId: contentReleaseId(content), gitSha: sha2, ...content };
   await store.putManifest(app, manifest);
-  return { manifest, failedToBuild: [], missingBundles: [], auth: {}, tierCapViolations: [] };
+  return { manifest, failedToBuild: [], depthRefusals: [], missingBundles: [], auth: {}, tierCapViolations: [] };
 }
 function listBuildableApps() {
   const appsDir = join47(REPO_ROOT7, "apps");
@@ -163812,6 +163877,8 @@ function createReviewScreenRenderer() {
           collect: { render: { screenId, scheme: "light", png: false, hydrate: true, live: true, dumpState: true, width: REVIEW_SCREENSHOT_FRAME.width, host, ...input ? { input } : {} } }
         });
         const render = (outcome.renders ?? [])[0];
+        const refused2 = outcome.depthRefusals.find((r2) => r2.screenId === screenId);
+        if (!render && refused2) throw new Error(`${screenId} cannot be rendered: ${refused2.finding.message}`);
         if (!render) throw new MissingScreenError(screenId);
         if (!render.renderable || !render.html) throw new Error(render.reason ?? `${screenId} is not an SDUI screen`);
         return { html: render.html, problems: renderProblems(render, entityId), state: render.serviceState ?? {} };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/himalaya-cli",
-  "version": "0.1424.0",
+  "version": "0.1426.0",
   "type": "module",
   "description": "himi — the Himalaya authoring CLI. Build a Tier-5 content package on your own machine, push it to the production serve as a draft, preview it on web + Himi Player, and read worker logs back — the remote dev loop. Wraps @himalaya/serve-cli for transport.",
   "keywords": [
@@ -71,5 +71,5 @@
       "artifactId": "himalaya-cli"
     }
   },
-  "falconPackageHash": "a0147b33ea7375fa7cf11b0027a0388feef592ede284346c3d5c9919"
+  "falconPackageHash": "fe8a55204085cb96eb306adea7bc261f10e7605132220f78e2bc4813"
 }

package/templates/branded-lite/dev/index.ts

@@ -34620,71 +34620,294 @@ const SCREENS = runtimeSetting({
                   "itemsPath": "$service:spacesChatThread.messages",
                   "items": [
                     {
-                      "id": "",
+                      "id": "himi_chat_thread.message_$item.id",
                       "body": {
                         "package": "himalaya",
-                        "type": "HStack",
+                        "type": "VStack",
                         "props": {
+                          "spacing": 6,
                           "children": [
                             {
                               "id": "",
                               "body": {
                                 "package": "himalaya",
-                                "type": "Spacer",
+                                "type": "HStack",
                                 "props": {
-                                  "value": "$item.leadFill",
-                                  "collapseWhenEmpty": true
+                                  "spacing": 8,
+                                  "children": [
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "Spacer",
+                                        "props": {}
+                                      }
+                                    },
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "Text",
+                                        "props": {
+                                          "text": "$item.dayLabel",
+                                          "style": "caption",
+                                          "color": "textSecondary",
+                                          "collapseWhenEmpty": true
+                                        }
+                                      }
+                                    },
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "Spacer",
+                                        "props": {}
+                                      }
+                                    }
+                                  ]
                                 }
+                              },
+                              "modifiers": {
+                                "padding": {
+                                  "leading": 16,
+                                  "trailing": 16,
+                                  "top": 16,
+                                  "bottom": 8
+                                },
+                                "hiddenPath": "$item.dayHidden"
                               }
                             },
                             {
                               "id": "",
                               "body": {
                                 "package": "himalaya",
-                                "type": "VStack",
+                                "type": "HStack",
                                 "props": {
-                                  "spacing": 2,
+                                  "spacing": 8,
                                   "alignment": "leading",
                                   "children": [
                                     {
-                                      "id": "",
+                                      "id": "himi_chat_thread.incoming_avatar_$item.id",
                                       "body": {
                                         "package": "himalaya",
-                                        "type": "Text",
+                                        "type": "Image",
                                         "props": {
-                                          "text": "$item.text",
-                                          "style": "body"
+                                          "url": "$item.avatarUrl",
+                                          "initials": "$item.avatarInitials",
+                                          "icon": "person",
+                                          "width": 32,
+                                          "height": 32,
+                                          "contentMode": "fill",
+                                          "shape": "circle"
                                         }
+                                      },
+                                      "modifiers": {
+                                        "accessibilityRole": "decorative"
                                       }
                                     },
                                     {
                                       "id": "",
                                       "body": {
                                         "package": "himalaya",
-                                        "type": "Text",
+                                        "type": "VStack",
                                         "props": {
-                                          "text": "$item.when",
-                                          "style": "caption",
-                                          "color": "textSecondary",
-                                          "collapseWhenEmpty": true
+                                          "spacing": 6,
+                                          "alignment": "leading",
+                                          "children": [
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Text",
+                                                "props": {
+                                                  "text": "$item.senderBadge",
+                                                  "style": "caption",
+                                                  "color": "accentPrimary",
+                                                  "maxLines": 1,
+                                                  "collapseWhenEmpty": true
+                                                }
+                                              },
+                                              "modifiers": {
+                                                "background": {
+                                                  "token": "accentSurface"
+                                                },
+                                                "cornerRadius": 8,
+                                                "padding": {
+                                                  "leading": 8,
+                                                  "trailing": 8,
+                                                  "top": 4,
+                                                  "bottom": 4
+                                                }
+                                              }
+                                            },
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Text",
+                                                "props": {
+                                                  "text": "$item.text",
+                                                  "style": "body",
+                                                  "maxLines": 50
+                                                }
+                                              }
+                                            },
+                                            {
+                                              "id": "himi_chat_thread.image_$item.id",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Image",
+                                                "props": {
+                                                  "url": "$item.imageUrl",
+                                                  "fillWidth": true,
+                                                  "aspectRatio": 1,
+                                                  "contentMode": "fill",
+                                                  "contentDescription": "$item.imageDescription"
+                                                }
+                                              },
+                                              "modifiers": {
+                                                "cornerRadius": 12,
+                                                "fillMaxWidth": true,
+                                                "hiddenPath": "$item.imageHidden"
+                                              }
+                                            },
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Text",
+                                                "props": {
+                                                  "text": "$item.when",
+                                                  "style": "caption",
+                                                  "color": "textSecondary",
+                                                  "collapseWhenEmpty": true
+                                                }
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "modifiers": {
+                                        "background": {
+                                          "token": "surfaceElevated"
+                                        },
+                                        "cornerRadius": 16,
+                                        "maxWidth": 270,
+                                        "padding": {
+                                          "leading": 12,
+                                          "trailing": 12,
+                                          "top": 10,
+                                          "bottom": 10
                                         }
                                       }
+                                    },
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "Spacer",
+                                        "props": {}
+                                      }
                                     }
                                   ]
                                 }
                               },
                               "modifiers": {
-                                "background": {
-                                  "token": "surfaceElevated"
-                                },
-                                "cornerRadius": 12,
-                                "maxWidth": 270,
-                                "padding": {
-                                  "leading": 12,
-                                  "trailing": 12,
-                                  "top": 8,
-                                  "bottom": 8
+                                "hiddenPath": "$item.mine"
+                              }
+                            },
+                            {
+                              "id": "",
+                              "body": {
+                                "package": "himalaya",
+                                "type": "HStack",
+                                "props": {
+                                  "spacing": 8,
+                                  "alignment": "leading",
+                                  "children": [
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "Spacer",
+                                        "props": {}
+                                      }
+                                    },
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "VStack",
+                                        "props": {
+                                          "spacing": 6,
+                                          "alignment": "leading",
+                                          "children": [
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Text",
+                                                "props": {
+                                                  "text": "$item.text",
+                                                  "style": "body",
+                                                  "maxLines": 50
+                                                }
+                                              }
+                                            },
+                                            {
+                                              "id": "himi_chat_thread.outgoing_image_$item.id",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Image",
+                                                "props": {
+                                                  "url": "$item.imageUrl",
+                                                  "fillWidth": true,
+                                                  "aspectRatio": 1,
+                                                  "contentMode": "fill",
+                                                  "contentDescription": "$item.imageDescription"
+                                                }
+                                              },
+                                              "modifiers": {
+                                                "cornerRadius": 12,
+                                                "fillMaxWidth": true,
+                                                "hiddenPath": "$item.imageHidden"
+                                              }
+                                            },
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Text",
+                                                "props": {
+                                                  "text": "$item.when",
+                                                  "style": "caption",
+                                                  "color": "textSecondary",
+                                                  "collapseWhenEmpty": true
+                                                }
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "modifiers": {
+                                        "background": {
+                                          "token": "accentSurface"
+                                        },
+                                        "cornerRadius": 16,
+                                        "maxWidth": 270,
+                                        "padding": {
+                                          "leading": 12,
+                                          "trailing": 12,
+                                          "top": 10,
+                                          "bottom": 10
+                                        }
+                                      }
+                                    }
+                                  ]
                                 }
+                              },
+                              "modifiers": {
+                                "hiddenPath": "$item.notMine"
                               }
                             }
                           ]
@@ -34705,15 +34928,14 @@ const SCREENS = runtimeSetting({
               }
             },
             {
-              "id": "",
+              "id": "himi_chat_thread.empty",
               "body": {
                 "package": "himalaya",
-                "type": "Text",
+                "type": "EmptyState",
                 "props": {
-                  "text": "$service:spacesChatThread.emptyText",
-                  "style": "body",
-                  "color": "textSecondary",
-                  "collapseWhenEmpty": true
+                  "icon": "chat",
+                  "title": "$service:spacesChatThread.emptyText",
+                  "subtitle": "Send a message to start the conversation."
                 }
               },
               "modifiers": {
@@ -34721,8 +34943,9 @@ const SCREENS = runtimeSetting({
                   "leading": 16,
                   "trailing": 16,
                   "top": 24,
-                  "bottom": 0
-                }
+                  "bottom": 24
+                },
+                "hiddenPath": "$service:spacesChatThread.emptyHidden"
               }
             },
             {
@@ -34864,29 +35087,37 @@ const SCREENS = runtimeSetting({
                   "bottom": 0
                 }
               }
-            },
-            {
-              "id": "",
-              "body": {
-                "package": "himalaya",
-                "type": "Text",
-                "props": {
-                  "text": "$service:spacesChatThread.sendHint",
-                  "style": "footnote",
-                  "color": "accentPrimary",
-                  "collapseWhenEmpty": true
-                }
-              },
-              "modifiers": {
-                "padding": {
-                  "leading": 16,
-                  "trailing": 16,
-                  "top": 0,
-                  "bottom": 4
-                },
-                "hiddenPath": "$service:spacesChatThread.noEntity"
-              }
-            },
+            }
+          ]
+        }
+      },
+      "modifiers": {
+        "background": {
+          "token": "surfaceSecondary"
+        },
+        "onAppear": {
+          "actionId": "tier5.spacesChatThread.load"
+        }
+      }
+    },
+    "logicBundle": {
+      "url": "http://localhost:8190/v1/bundles/wix-spaces-chat-thread?integrity=",
+      "integrity": "",
+      "contentType": "application/javascript+ts-bundle",
+      "declaredCapabilities": [
+        "wix_api"
+      ],
+      "minBinaryVersion": "0.1.0",
+      "bundleVersion": "0.0.1"
+    },
+    "stickyFooter": {
+      "id": "himi_chat_thread.composer_footer",
+      "body": {
+        "package": "himalaya",
+        "type": "VStack",
+        "props": {
+          "spacing": 4,
+          "children": [
             {
               "id": "",
               "body": {
@@ -34901,15 +35132,31 @@ const SCREENS = runtimeSetting({
                         "package": "himalaya",
                         "type": "TextField",
                         "props": {
-                          "placeholder": "Message",
+                          "placeholder": "Type your message…",
                           "value": "$service:spacesChatThread.draft",
                           "onChange": {
                             "actionId": "tier5.spacesChatThread.setDraft"
-                          }
+                          },
+                          "onSubmit": {
+                            "actionId": "tier5.spacesChatThread.send"
+                          },
+                          "submitLabel": "send",
+                          "borderless": true
                         }
                       },
                       "modifiers": {
-                        "weight": 1
+                        "weight": 1,
+                        "accessibilityLabel": "Type your message",
+                        "padding": {
+                          "leading": 16,
+                          "trailing": 8,
+                          "top": 8,
+                          "bottom": 8
+                        },
+                        "background": {
+                          "token": "surfaceSecondary"
+                        },
+                        "cornerRadius": 28
                       }
                     },
                     {
@@ -34919,11 +35166,21 @@ const SCREENS = runtimeSetting({
                         "type": "Button",
                         "props": {
                           "title": "Send",
-                          "style": "primary",
                           "action": {
                             "actionId": "tier5.spacesChatThread.send"
-                          }
+                          },
+                          "style": "primary",
+                          "iconOnly": true,
+                          "leadingIcon": "send",
+                          "cornerRadius": 22,
+                          "minHeight": 44
                         }
+                      },
+                      "modifiers": {
+                        "width": 44,
+                        "height": 44,
+                        "accessibilityLabel": "Send",
+                        "accessibilityRole": "button"
                       }
                     }
                   ]
@@ -34934,9 +35191,29 @@ const SCREENS = runtimeSetting({
                   "leading": 12,
                   "trailing": 12,
                   "top": 8,
-                  "bottom": 12
-                },
-                "hiddenPath": "$service:spacesChatThread.noEntity"
+                  "bottom": 8
+                }
+              }
+            },
+            {
+              "id": "",
+              "body": {
+                "package": "himalaya",
+                "type": "Text",
+                "props": {
+                  "text": "$service:spacesChatThread.sendHint",
+                  "style": "footnote",
+                  "color": "accentPrimary",
+                  "collapseWhenEmpty": true
+                }
+              },
+              "modifiers": {
+                "padding": {
+                  "leading": 16,
+                  "trailing": 16,
+                  "top": 0,
+                  "bottom": 4
+                }
               }
             }
           ]
@@ -34946,20 +35223,12 @@ const SCREENS = runtimeSetting({
         "background": {
           "token": "surfacePrimary"
         },
-        "onAppear": {
-          "actionId": "tier5.spacesChatThread.load"
-        }
+        "hiddenPath": "$service:spacesChatThread.noEntity"
       }
     },
-    "logicBundle": {
-      "url": "http://localhost:8190/v1/bundles/wix-spaces-chat-thread?integrity=",
-      "integrity": "",
-      "contentType": "application/javascript+ts-bundle",
-      "declaredCapabilities": [
-        "wix_api"
-      ],
-      "minBinaryVersion": "0.1.0",
-      "bundleVersion": "0.0.1"
+    "transcriptScroll": {
+      "sendPath": "$service:spacesChatThread.scrollSend",
+      "jumpLabel": "Jump to latest"
     }
   },
   "himi_new_message": {

package/templates/branded-lite/tier5-src/wix-spaces-chat-thread/index.ts

@@ -12,19 +12,28 @@
 import { defineService, type PollDirective, type StreamDirective } from "@himalaya/state";
 import { getMessages, sendChatMessage, getOrCreateDirectChatroom, getChatToken, type ChatMessage } from "@himalaya/wix-chat-web";
 import { getMyData } from "@himalaya/wix-users";
-import { formatMonthDayTime } from "../_shared/engine-intl.js";
+import { formatMonthDay, formatMonthDayTime } from "../_shared/engine-intl.js";
+import { initials } from "../_shared/himi-text.js";
+import { copyParam, stashCopy } from "../_shared/himi-copy.js";
 import { presence, presenceAfterError, detailInputId, type PresenceFlags } from "../_shared/detail-presence.js";
 import { writeMayHaveLanded } from "../_shared/owner-load-error.js";
 import { chatRealtimeConfig, createReloadGate, createSendIntents, createVisitToken, liveDirectives, postWithVisitToken, liveFallback, type ChatLiveMode, type ChatRealtimeConfig } from "../_shared/chat-live.js";
 
 const SERVICE = "spacesChatThread";
+const EMPTY_TEXT = "No messages yet. Say hello!";
 
-// leadFill gates a per-row right-align: " " for MY messages (a flexible gated
-// spacer to the bubble's left → bubble hugs the right edge), "" for others
-// (spacer collapses → bubble stays left). mine drives the bubble tint.
-interface Row { id: string; text: string; when: string; leadFill: string; mine: string }
+// `mine` / `notMine` pick the incoming or outgoing row layout (the descriptor hides the other
+// one). Empty strings and `*Hidden` flags let a row drop its badge, avatar or attachment.
+// `leadFill` (" " for my messages) stays for screens that right-align with a gated spacer.
+interface Row {
+  id: string; text: string; when: string; leadFill: string; mine: boolean; notMine: boolean;
+  senderBadge: string; avatarUrl: string; avatarInitials: string;
+  imageUrl: string; imageDescription: string; imageHidden: boolean; dayLabel: string; dayHidden: boolean;
+}
 interface S extends PresenceFlags {
-  status: "loading" | "ready"; messages: Row[]; emptyText: string; draft: string; sendHint: string; resolvedChatroomId: string; myUserId: string;
+  status: "loading" | "ready"; messages: Row[]; emptyText: string; emptyHidden: boolean; draft: string; sendHint: string; resolvedChatroomId: string; myUserId: string;
+  /** Send token for the host's transcript scroll: a new value follows the tail. */
+  scrollSend: string;
   /** Which path keeps the open thread live (diagnostic). */
   live?: ChatLiveMode;
   _stream?: StreamDirective;
@@ -55,14 +64,61 @@ async function resolveChatroomId(raw: string, kind: string): Promise<string> {
 function val(arg?: unknown): string {
   return typeof arg === "string" ? arg : ((arg as { value?: string; text?: string })?.value ?? (arg as { text?: string })?.text ?? "");
 }
-function norm(m: ChatMessage, i: number, myUserId: string): Row {
-  const mm = m as unknown as { id?: string; summary?: string; data?: Array<{ data?: { text?: string } }>; payload?: { text?: string }; content?: string; createdAt?: number; createdDate?: string };
-  const text = mm.data?.[0]?.data?.text || mm.summary || mm.payload?.text || mm.content || "";
+function dayKeyOf(d: Date): string {
+  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+}
+/** chat-web marks the business side as "business", "businessUser" or "user" (the same predicate
+ *  as wix-owner-inbox-thread); a visitor or member is anything else. */
+function isBusinessSender(m: ChatMessage): boolean {
+  const type = String(m.sender?.type ?? "").toLowerCase();
+  return type === "business" || type === "businessuser" || type === "user";
+}
+function norm(m: ChatMessage, i: number, myUserId: string): Row & { timestamp: number; dayKey: string } {
+  const mm = m as unknown as {
+    id?: string; summary?: string; data?: Array<{ mimeType?: string; data?: { text?: string; uri?: string; thumbnailUrl?: string } }>;
+    payload?: { text?: string }; content?: string; createdAt?: number; createdDate?: string;
+    senderDisplayData?: { name?: string; image?: { url?: string } };
+  };
+  const text = mm.data?.find((part) => part.data?.text)?.data?.text || mm.summary || mm.payload?.text || mm.content || "";
   const ms = mm.createdAt || (mm.createdDate ? Date.parse(mm.createdDate) : 0);
-  const when = ms ? formatMonthDayTime(new Date(ms)) : "";
+  const date = ms ? new Date(ms) : null;
+  const senderName = mm.senderDisplayData?.name || "";
+  const avatarUrl = mm.senderDisplayData?.image?.url || "";
+  const image = mm.data?.find((part) => part.mimeType?.startsWith("image/") || part.data?.thumbnailUrl);
+  const imageUrl = image?.data?.thumbnailUrl || image?.data?.uri || "";
   // Mine when the message sender matches my user id (resolved once per load).
   const mine = !!(myUserId && m.sender?.userId && m.sender.userId === myUserId);
-  return { id: mm.id || `m${i}`, text: text || "Message", when, leadFill: mine ? " " : "", mine: mine ? "1" : "" };
+  return {
+    id: mm.id || `m${i}`, text: text || "Message", when: date ? formatMonthDayTime(date) : "", leadFill: mine ? " " : "", mine, notMine: !mine,
+    senderBadge: isBusinessSender(m) ? copyParam("chatThread.businessBadge", "Business") : "",
+    avatarUrl, avatarInitials: initials(senderName),
+    imageUrl, imageDescription: imageUrl ? `${senderName || "Message"} attachment` : "", imageHidden: !imageUrl,
+    dayLabel: "", dayHidden: true, timestamp: ms, dayKey: date ? dayKeyOf(date) : "",
+  };
+}
+
+/** Oldest first, one row per message id, and a day label on the first message of each day. */
+function rowsOf(messages: ChatMessage[], myUserId: string): Row[] {
+  const sorted = messages.map((m, i) => norm(m, i, myUserId)).sort((a, b) => a.timestamp - b.timestamp);
+  const today = new Date();
+  const todayKey = dayKeyOf(today);
+  const yesterdayKey = dayKeyOf(new Date(today.getFullYear(), today.getMonth(), today.getDate() - 1));
+  const seen = new Set<string>();
+  const rows: Row[] = [];
+  let previousDay = "";
+  for (const { timestamp, dayKey, ...row } of sorted) {
+    if (seen.has(row.id)) continue;
+    seen.add(row.id);
+    const startsDay = !!dayKey && dayKey !== previousDay;
+    if (dayKey) previousDay = dayKey;
+    const dayLabel = !startsDay ? "" : dayKey === todayKey ? copyParam("chatThread.today", "Today") : dayKey === yesterdayKey ? copyParam("chatThread.yesterday", "Yesterday") : formatMonthDay(new Date(timestamp));
+    rows.push({ ...row, dayLabel, dayHidden: !dayLabel });
+  }
+  return rows;
+}
+
+function nextScrollToken(prev: string): string {
+  return String((Number(prev) || 0) + 1);
 }
 
 // ONE member chatToken per visit (`_shared/chat-live.ts`): a 4 s re-read would otherwise
@@ -74,7 +130,7 @@ async function reload(id: string, myUserId: string): Promise<Row[]> {
   const token = memberToken.get();
   try {
     const msgs = await getMessages(id, 30, { role: "member", chatToken: await token });
-    return (msgs ?? []).map((m, i) => norm(m, i, myUserId));
+    return rowsOf(msgs ?? [], myUserId);
   } catch (e) {
     memberToken.drop(token);
     throw e;
@@ -114,7 +170,7 @@ async function reread(s: S): Promise<S> {
     const messages = await gate.request();
     const now = svc.getState();
     if (now.resolvedChatroomId !== s.resolvedChatroomId) return now;
-    return { ...now, messages, emptyText: messages.length ? "" : now.emptyText };
+    return { ...now, messages, emptyText: messages.length ? "" : now.emptyText || EMPTY_TEXT, emptyHidden: messages.length > 0 };
   } catch {
     return svc.getState();
   }
@@ -139,31 +195,32 @@ const svc = defineService<S, {
   onStreamEvent: (s: S) => Promise<S>;
   onStreamError: (s: S) => S;
 }>(SERVICE, {
-  state: { status: "loading", messages: [], emptyText: "", draft: "", sendHint: "", resolvedChatroomId: "", myUserId: "", ...presence("loading") },
+  state: { status: "loading", messages: [], emptyText: "", emptyHidden: true, scrollSend: "", draft: "", sendHint: "", resolvedChatroomId: "", myUserId: "", ...presence("loading") },
   actions: {
     load: async (s, a) => {
+      stashCopy(a);
       const param = (a as { chatRealtime?: unknown } | null | undefined)?.chatRealtime;
       if (param !== undefined) realtime = chatRealtimeConfig(param);
       const raw = inputId();
       // No thread / recipient id (a stale link, a route opened directly) -> the shared
       // not-found state, and no composer: there is nobody to send to.
-      if (!detailInputId()) return { ...s, status: "ready", messages: [], emptyText: "", ...presence("missing") };
+      if (!detailInputId()) return { ...s, status: "ready", messages: [], emptyText: "", emptyHidden: true, ...presence("missing") };
       memberToken.reset();
       // Resolve chatroom + my user id concurrently (myUserId tags own messages).
       const [chatroomId, myUserId] = await Promise.all([resolveChatroomId(raw, inputKind()), resolveMyUserId()]);
       // A recipient whose 1:1 chatroom could not be resolved is not a conversation yet:
       // reload("") would return [] without throwing and publish a live, empty thread
       // whose Send can only fail. Show the load-error line instead.
-      if (!chatroomId) return { ...s, status: "ready", resolvedChatroomId: "", myUserId, messages: [], emptyText: "", ...presence("failed") };
+      if (!chatroomId) return { ...s, status: "ready", resolvedChatroomId: "", myUserId, messages: [], emptyText: "", emptyHidden: true, ...presence("failed") };
       try {
         const messages = await reload(chatroomId, myUserId);
         current = { chatroomId, myUserId };
-        return { ...s, status: "ready", resolvedChatroomId: chatroomId, myUserId, messages, emptyText: messages.length ? "" : "No messages yet. Say hello!", ...presence("found"), ...liveDirectives(realtime, chatroomId, SERVICE) };
+        return { ...s, status: "ready", resolvedChatroomId: chatroomId, myUserId, messages, emptyText: messages.length ? "" : EMPTY_TEXT, emptyHidden: messages.length > 0, scrollSend: messages.length ? nextScrollToken(s.scrollSend) : "", ...presence("found"), ...liveDirectives(realtime, chatroomId, SERVICE) };
       } catch (e) {
         // A thread whose messages cannot be read is not a live, empty conversation: a 404
         // is the shared not-found state, anything else the load-error line — never a
         // "Say hello!" composer that can only fail.
-        return { ...s, status: "ready", resolvedChatroomId: chatroomId, myUserId, messages: [], emptyText: "", ...presenceAfterError(e) };
+        return { ...s, status: "ready", resolvedChatroomId: chatroomId, myUserId, messages: [], emptyText: "", emptyHidden: true, ...presenceAfterError(e) };
       }
     },
     setDraft: (s, a) => ({ ...s, draft: val(a) }),
@@ -208,11 +265,11 @@ const svc = defineService<S, {
         try {
           const messages = await gate.request();
           const now = liveState();
-          return { ...now, resolvedChatroomId: chatroomId, myUserId, messages, draft: cleared(now), emptyText: "", sendHint: "Sent ✓" };
+          return { ...now, resolvedChatroomId: chatroomId, myUserId, messages, draft: cleared(now), emptyText: "", emptyHidden: true, scrollSend: nextScrollToken(now.scrollSend), sendHint: "Sent ✓" };
         } catch {
           const now = liveState();
-          const mine: Row = { id: `local-${now.messages.length}`, text, when: "", leadFill: " ", mine: "1" };
-          return { ...now, resolvedChatroomId: chatroomId, myUserId, messages: [...now.messages, mine], draft: cleared(now), emptyText: "", sendHint: "Sent ✓" };
+          const local: Row = { id: `local-${now.messages.length}`, text, when: "", leadFill: " ", mine: true, notMine: false, senderBadge: "", avatarUrl: "", avatarInitials: "", imageUrl: "", imageDescription: "", imageHidden: true, dayLabel: "", dayHidden: true };
+          return { ...now, resolvedChatroomId: chatroomId, myUserId, messages: [...now.messages, local], draft: cleared(now), emptyText: "", emptyHidden: true, scrollSend: nextScrollToken(now.scrollSend), sendHint: "Sent ✓" };
         }
       } finally {
         sendingNow = false;