@wix/himalaya-cli 0.1425.0 → 0.1427.0

package/dist/cli.mjs

@@ -122286,6 +122286,8 @@ function makeCtx(tokens2, scheme = "light", opts = {}) {
     assetBaseUrl: opts.assetBaseUrl,
     runtimeDegraded: opts.runtimeDegraded,
     previewSurface: opts.previewSurface,
+    debugUnknownComponents: opts.debugUnknownComponents,
+    appId: opts.appId,
     idiomContext: opts.idiomContext,
     idiom: controlIdiomFor(opts.idiomContext)
   };
@@ -125197,15 +125199,24 @@ function renderInner(node, ctx) {
     default: {
       const intent = pkg ? ctx.intents?.[`${pkg}.${type}`] : void 0;
       if (intent) return /* @__PURE__ */ jsx10("div", { style: { alignSelf: "stretch", ...wrap }, children: intent(props, ctx) });
-      const childKeys = Object.entries(props).filter(([, v2]) => isNodeLike(v2) || Array.isArray(v2) && v2.some(isNodeLike));
-      return /* @__PURE__ */ jsxs7("div", { "data-unknown-type": type, style: { display: "flex", flexDirection: "column", gap: 6, padding: 6, border: `1px dashed ${C2("border", "#c5cdd6")}`, borderRadius: 6, ...wrap }, children: [
-        /* @__PURE__ */ jsx10("div", { style: { alignSelf: "flex-start", fontSize: pxToRem(9), fontWeight: 700, letterSpacing: 0.4, padding: "1px 6px", borderRadius: 999, background: C2("surfaceTertiary", "#f0f0f3"), color: C2("textSecondary", "#9aa2ad"), fontFamily: "ui-monospace, monospace" }, children: type }),
-        childKeys.map(([k2, v2]) => /* @__PURE__ */ jsx10(React9.Fragment, { children: Array.isArray(v2) ? kids2(v2.filter(isNodeLike), ctx) : renderNode(v2, ctx) }, k2))
-      ] });
+      return /* @__PURE__ */ jsx10(UnknownComponentNode, { pkg: pkg ?? "himalaya", type, props, ctx, wrap });
     }
   }
 }
-var useIsomorphicLayoutEffect, ResponsiveGrid, SPLIT_EXPANDED_MIN_WIDTH, SPLIT_COLUMN_GAP, ResponsiveSplitView, ABSOLUTE_URL_RE, appearKeyframesInjected, valueSwapKeyframesInjected, NUMERIC_TEXT, shimmerKeyframesInjected, pressStylesInjected, REVEAL_ON_FOCUS_ATTR, FOCUS_RING_CSS, focusStylesInjected, HLIST_CHILD_CSS, hListStylesInjected, listAnimateRuntimeInstalled, transitionKeyframesInjected, countUpRuntimeInjected, MEASURE_PREFIX, measureRuntimeInjected, revealRuntimeInjected, AMBIENT_HOST_STYLE, AmbientMotionBox, vectorAnimStylesInjected, scrollProgressRuntimeInjected, confettiRuntimeInjected, lottieRuntimeInjected, riveRuntimeInjected, gradientKeyframesInjected, parallaxRuntimeInjected, spinKeyframesInjected, marqueeKeyframesInjected, alignItems, zJustifyItems, hAlignItems, bodyFont, kids2, rowKidCtx, rowKids, staggeredKids, asTextL10n, asFinalTextL10n, asBoundText, useBoundString, InterpolatedTextView, txt, selectFragmentCase, fragmentValueHash, fragmentSlotContent, FragmentSlotNode, RichContentEditorNode, MediaFieldNode, WorkerSubtreeNode, RichContentNode, resolveItemDeep2, resolveRowAction2, resolveSwipeActions, resolveModBindings, resolvedComponentId, directServiceBindings, withRootStyle, ReactiveDirectScalars, HiddenGate, ExitPresence, StatefulSectionNode, KEYBOARD_INPUT_MODES, AUTOCAPITALIZE_VALUES, ENTER_KEY_HINTS, AUTOGROW_CEILING, EditableField, MENU_LONG_PRESS_MS, MenuNode, LoadMoreSentinel, FieldErrorNode, FormView, MediaSlotProvider, MEDIA_ITEM_BINDABLE, MediaPlayerView, VideoNode, PdfDocumentCanvas, PdfViewNode, WebViewNode, InteractivePicker, InteractiveDatePicker, InteractiveSearchField, InteractiveStepper, NODE_EXTRAS_TARGET, SYNTHETIC_TAP_ROLE, SYNTHETIC_TABINDEX, INFERRED_DECORATIVE, SELF_RENDERED_LEAF, ROLE_WHEN_NAMED, AUTHORED_ROLE, PENDING_RANGE, RANGE_ROLES, NODE_A11Y_ATTRS, INTERACTIVE_ROLES, ALWAYS_INTERACTIVE_COMPONENT_TYPES, TAP_ACTIVATOR_ATTR, TAP_GROUP_ATTR, NESTED_CONTROL_SELECTOR, VISUALLY_HIDDEN, NAME_SKIP_SELECTOR, activatorNameObservers, ACTIVATOR_STATE_ATTRS, controlNode, ToggleNode, SliderNode, SelectionControlNode, TabsNode, SegmentedControlNode, DisclosureGroupNode, GridNode, SplitViewNode, REVEAL_RELEASE_MS, REVEAL_FADE_MS, REVEAL_BUFFER, revealProgress, countWords, RevealText, TextNode, ImageNode, ANIMATION_LEAF, LottieNode, RiveNode, AvatarNode, IconNode, EMPTY_STATE_SPACING, EmptyStateNode, ButtonNode, OtpInputNode, ProgressBarNode, ACTIVITY_DEFAULT_NAME, ActivityIndicatorNode, NATIVELY_TABBABLE, BottomSheetNode, BOTTOM_DRAWER_HOST_STACK_EVENT, ModalBottomSheetNode, BottomDrawerNode, PRESENTED_OVERLAY_ATTR, PopoverNode, ChipsInputNode, ChipNode, TableNode, GaugeRing, GaugeNode, RATING_METRICS, ratingMetrics, RatingNode, AvatarStripNode, CHART_STROKE_CYCLE, chartStrokeAt, chartBarCenter, ChartNode, donutSliceOpacity, DonutChartNode, LegendMarker, LegendNode, cellAlign, DataTableNode, voiceNoteState, voiceNoteDelivery, VOICE_NOTE_DEFAULT_BARS, clampBarCount, VoiceNoteNode, TimelineNode, PagingNode, WheelPickerNode, ColorPickerNode, FilterChipsNode, TILE_PX, MAX_MERCATOR_LAT, DEFAULT_TILE_MAX_ZOOM, CIRCLE_SEGMENTS, METRES_PER_DEG_LAT, MARKER_HIT_RADIUS, SHAPE_HIT_RADIUS, MapNode, CAROUSEL_SETTLE_MS, scrollCarouselTo, CarouselNode, BannerNode, CollapsingHeaderNode, UnsupportedOnSurface, CALENDAR_DATE_ONLY_RE, CAL_DEFAULT_MAX_DOTS, CAL_AGENDA_INITIAL_DAYS, CAL_AGENDA_PAGE_DAYS, CAL_DEFAULT_SNAP_MINUTES, CAL_UNASSIGNED_LANE_ID, MonthCalendarNode, TimeGridNode, AgendaNode, ARIA_ROLE, initialFocusScheduled, PRESENTED_SCOPE, focusRoots, A11yHintDescription, WebRenderer;
+function reportUnknownComponent(ctx, pkg, type) {
+  if (!ctx.emitTelemetry) return false;
+  const key2 = JSON.stringify([ctx.appId ?? null, ctx.screenId ?? null, pkg, type]);
+  if (reportedUnknownComponents.has(key2)) return false;
+  reportedUnknownComponents.add(key2);
+  const payload = { pkg, type };
+  if (ctx.screenId) payload.screenId = ctx.screenId;
+  ctx.emitTelemetry("unknown_component_fallback", payload, ctx.screenId);
+  return true;
+}
+function unknownComponentShowsDeveloperLabel(ctx) {
+  return ctx.debugUnknownComponents ?? ctx.previewSurface != null;
+}
+var useIsomorphicLayoutEffect, ResponsiveGrid, SPLIT_EXPANDED_MIN_WIDTH, SPLIT_COLUMN_GAP, ResponsiveSplitView, ABSOLUTE_URL_RE, appearKeyframesInjected, valueSwapKeyframesInjected, NUMERIC_TEXT, shimmerKeyframesInjected, pressStylesInjected, REVEAL_ON_FOCUS_ATTR, FOCUS_RING_CSS, focusStylesInjected, HLIST_CHILD_CSS, hListStylesInjected, listAnimateRuntimeInstalled, transitionKeyframesInjected, countUpRuntimeInjected, MEASURE_PREFIX, measureRuntimeInjected, revealRuntimeInjected, AMBIENT_HOST_STYLE, AmbientMotionBox, vectorAnimStylesInjected, scrollProgressRuntimeInjected, confettiRuntimeInjected, lottieRuntimeInjected, riveRuntimeInjected, gradientKeyframesInjected, parallaxRuntimeInjected, spinKeyframesInjected, marqueeKeyframesInjected, alignItems, zJustifyItems, hAlignItems, bodyFont, kids2, rowKidCtx, rowKids, staggeredKids, asTextL10n, asFinalTextL10n, asBoundText, useBoundString, InterpolatedTextView, txt, selectFragmentCase, fragmentValueHash, fragmentSlotContent, FragmentSlotNode, RichContentEditorNode, MediaFieldNode, WorkerSubtreeNode, RichContentNode, resolveItemDeep2, resolveRowAction2, resolveSwipeActions, resolveModBindings, resolvedComponentId, directServiceBindings, withRootStyle, ReactiveDirectScalars, HiddenGate, ExitPresence, StatefulSectionNode, KEYBOARD_INPUT_MODES, AUTOCAPITALIZE_VALUES, ENTER_KEY_HINTS, AUTOGROW_CEILING, EditableField, MENU_LONG_PRESS_MS, MenuNode, LoadMoreSentinel, FieldErrorNode, FormView, MediaSlotProvider, MEDIA_ITEM_BINDABLE, MediaPlayerView, VideoNode, PdfDocumentCanvas, PdfViewNode, WebViewNode, InteractivePicker, InteractiveDatePicker, InteractiveSearchField, InteractiveStepper, NODE_EXTRAS_TARGET, SYNTHETIC_TAP_ROLE, SYNTHETIC_TABINDEX, INFERRED_DECORATIVE, SELF_RENDERED_LEAF, ROLE_WHEN_NAMED, AUTHORED_ROLE, PENDING_RANGE, RANGE_ROLES, NODE_A11Y_ATTRS, INTERACTIVE_ROLES, ALWAYS_INTERACTIVE_COMPONENT_TYPES, TAP_ACTIVATOR_ATTR, TAP_GROUP_ATTR, NESTED_CONTROL_SELECTOR, VISUALLY_HIDDEN, NAME_SKIP_SELECTOR, activatorNameObservers, ACTIVATOR_STATE_ATTRS, controlNode, ToggleNode, SliderNode, SelectionControlNode, TabsNode, SegmentedControlNode, DisclosureGroupNode, GridNode, SplitViewNode, REVEAL_RELEASE_MS, REVEAL_FADE_MS, REVEAL_BUFFER, revealProgress, countWords, RevealText, TextNode, ImageNode, ANIMATION_LEAF, LottieNode, RiveNode, AvatarNode, IconNode, EMPTY_STATE_SPACING, EmptyStateNode, ButtonNode, OtpInputNode, ProgressBarNode, ACTIVITY_DEFAULT_NAME, ActivityIndicatorNode, NATIVELY_TABBABLE, BottomSheetNode, BOTTOM_DRAWER_HOST_STACK_EVENT, ModalBottomSheetNode, BottomDrawerNode, PRESENTED_OVERLAY_ATTR, PopoverNode, ChipsInputNode, ChipNode, TableNode, GaugeRing, GaugeNode, RATING_METRICS, ratingMetrics, RatingNode, AvatarStripNode, CHART_STROKE_CYCLE, chartStrokeAt, chartBarCenter, ChartNode, donutSliceOpacity, DonutChartNode, LegendMarker, LegendNode, cellAlign, DataTableNode, voiceNoteState, voiceNoteDelivery, VOICE_NOTE_DEFAULT_BARS, clampBarCount, VoiceNoteNode, TimelineNode, PagingNode, WheelPickerNode, ColorPickerNode, FilterChipsNode, TILE_PX, MAX_MERCATOR_LAT, DEFAULT_TILE_MAX_ZOOM, CIRCLE_SEGMENTS, METRES_PER_DEG_LAT, MARKER_HIT_RADIUS, SHAPE_HIT_RADIUS, MapNode, CAROUSEL_SETTLE_MS, scrollCarouselTo, CarouselNode, BannerNode, CollapsingHeaderNode, UnsupportedOnSurface, CALENDAR_DATE_ONLY_RE, CAL_DEFAULT_MAX_DOTS, CAL_AGENDA_INITIAL_DAYS, CAL_AGENDA_PAGE_DAYS, CAL_DEFAULT_SNAP_MINUTES, CAL_UNASSIGNED_LANE_ID, MonthCalendarNode, TimeGridNode, AgendaNode, ARIA_ROLE, initialFocusScheduled, PRESENTED_SCOPE, focusRoots, A11yHintDescription, reportedUnknownComponents, UnknownComponentNode, WebRenderer;
 var init_renderNode = __esm({
   "../../core/web-renderer/src/renderNode.tsx"() {
     "use strict";
@@ -130460,6 +130471,31 @@ var init_renderNode = __esm({
         /* @__PURE__ */ jsx10("span", { id: descId, hidden: true, "data-hm-a11y-hint": "", children: hint })
       ] });
     };
+    reportedUnknownComponents = /* @__PURE__ */ new Set();
+    UnknownComponentNode = ({ pkg, type, props, ctx, wrap, ...extras }) => {
+      const hasTelemetry = !!ctx.emitTelemetry;
+      React9.useEffect(() => {
+        reportUnknownComponent(ctx, pkg, type);
+      }, [ctx.appId, ctx.screenId, hasTelemetry, pkg, type]);
+      const { style: extraStyle, children: extraChildren, ...attrs } = extras;
+      const nodeProps = (entries) => entries.filter(([, v2]) => isNodeLike(v2) || Array.isArray(v2) && v2.some(isNodeLike));
+      const renderProps = (entries) => entries.map(([k2, v2]) => /* @__PURE__ */ jsx10(React9.Fragment, { children: Array.isArray(v2) ? kids2(v2.filter(isNodeLike), ctx) : renderNode(v2, ctx) }, k2));
+      const childKeys = nodeProps(Object.entries(props ?? {}));
+      if (!unknownComponentShowsDeveloperLabel(ctx)) {
+        const contentKeys = childKeys.filter(([k2]) => k2 === "child" || k2 === "children");
+        if (contentKeys.length) return /* @__PURE__ */ jsxs7("div", { ...attrs, "data-unknown-type": type, style: { display: "contents" }, children: [
+          renderProps(contentKeys),
+          extraChildren
+        ] });
+        return /* @__PURE__ */ jsx10("div", { ...attrs, "data-unknown-type": type, hidden: true, "aria-hidden": "true", style: { display: "none" } });
+      }
+      const C2 = ctx.color;
+      return /* @__PURE__ */ jsxs7("div", { ...attrs, "data-unknown-type": type, style: { display: "flex", flexDirection: "column", gap: 6, padding: 6, border: `1px dashed ${C2("border", "#c5cdd6")}`, borderRadius: 6, ...wrap, ...extraStyle }, children: [
+        /* @__PURE__ */ jsx10("div", { style: { alignSelf: "flex-start", fontSize: pxToRem(9), fontWeight: 700, letterSpacing: 0.4, padding: "1px 6px", borderRadius: 999, background: C2("surfaceTertiary", "#f0f0f3"), color: C2("textSecondary", "#9aa2ad"), fontFamily: "ui-monospace, monospace" }, children: type }),
+        renderProps(childKeys),
+        extraChildren
+      ] });
+    };
     WebRenderer = ({ node, tokens: tokens2, scheme = "light", opts }) => {
       return /* @__PURE__ */ jsx10(Fragment4, { children: renderNode(node, makeCtx(tokens2, scheme, opts)) });
     };
@@ -130476,7 +130512,8 @@ function renderDescriptorToHtml(payload, tokens2, scheme = "light", provider = n
     staticRender: true,
     ...typeof width === "number" && Number.isFinite(width) && width > 0 ? { sizeClass: sizeClassFromWidth(width), containerWidth: width } : {},
     ...rtl ? { isRTL: true } : {},
-    ...opts?.idiomContext ? { idiomContext: opts.idiomContext } : {}
+    ...opts?.idiomContext ? { idiomContext: opts.idiomContext } : {},
+    ...opts?.debugUnknownComponents ? { debugUnknownComponents: true } : {}
   });
   const FOCUS_STYLE_MARKUP = `<style data-himalaya-focus-ring>${FOCUS_RING_CSS}</style>`;
   const withFocusRing = (markup) => markup ? FOCUS_STYLE_MARKUP + markup : markup;
@@ -130934,7 +130971,9 @@ async function renderDescriptorWeb(descriptor, tokens2, scheme, wantPng, service
       provider,
       width,
       stickyHeader || stickyFooter ? { stickyHeader, stickyFooter } : void 0,
-      isRTL || idiomContext ? { ...isRTL ? { isRTL: true } : {}, ...idiomContext ? { idiomContext } : {} } : void 0
+      // #4497 — the agent fast loop is a dev tool: an unknown component type keeps its
+      // developer label here (a shipped web app renders nothing for it).
+      { ...isRTL ? { isRTL: true } : {}, ...idiomContext ? { idiomContext } : {}, debugUnknownComponents: true }
     );
   } catch (err) {
     return {
@@ -159931,32 +159970,32 @@ var init_preview_assets_generated = __esm({
   "../../packages/serve/src/preview-assets.generated.ts"() {
     init_preview_assets_format();
     PREVIEW_ASSET_MANIFEST = [
-      { key: "assets/DashboardHost-CgUNqTzQ.js", contentType: "application/javascript; charset=utf-8", offset: 8, length: 2916, sha256: "fd378b24c6e52943b991f6638cb12876a6b79e833c0e71d0db79ccb3366b52e8" },
-      { key: "assets/DevDrawer-CcQWd5rZ.js", contentType: "application/javascript; charset=utf-8", offset: 2924, length: 16744, sha256: "aaa31015f5006c3b181c0d70269a96804b74938d3c1092cc1688e5773c91c26f" },
-      { key: "assets/IdiomCompare-Kd76yDhc.js", contentType: "application/javascript; charset=utf-8", offset: 19668, length: 1892, sha256: "1c778d7d53e3bcef6f3962fe0feafe8dcc4874a846d58fb175f593dad44e0afe" },
-      { key: "assets/LightboxViewer-BxJc0u82.js", contentType: "application/javascript; charset=utf-8", offset: 21560, length: 8132, sha256: "28a909b21997ab99fb7fa53fe0ea795693c2b4e523e7896fe01879232ac9c8f9" },
-      { key: "assets/PhonePreviewControl-Cb8WYP2L.js", contentType: "application/javascript; charset=utf-8", offset: 29692, length: 37729, sha256: "830d0b93a48beb449d0095ec2c508d78824cd759012ef2ff4893066fe4bf09ad" },
-      { key: "assets/SchemeCompare-B5a4UFh4.js", contentType: "application/javascript; charset=utf-8", offset: 67421, length: 1824, sha256: "3c97f1ac48260f7654608961cdd859ef09cbd6e2a1d14e2bb0ca55e7e6148977" },
-      { key: "assets/index-DPqi_ujL.js", contentType: "application/javascript; charset=utf-8", offset: 69245, length: 1254442, sha256: "4fdfb2870e9afd66ab00bcf63bfcc229fa4279ed44e708aad20c22c97a955a05" },
-      { key: "assets/pdf-CLcjfe8u.js", contentType: "application/javascript; charset=utf-8", offset: 1323687, length: 488199, sha256: "1ab5d12ba6bf515e717061badeb23abc7072832f10f1181b83fa4b6e5af04759" },
-      { key: "assets/pdf.worker.min-BQa_JDET.js", contentType: "application/javascript; charset=utf-8", offset: 1811886, length: 73, sha256: "41bcfda4f3c8c0a81c785ea87c69afc8e7d0ed8c333324aee94c273d881bb6aa" },
-      { key: "assets/pdf.worker.min-BmVo14Nb.mjs", contentType: "application/javascript; charset=utf-8", offset: 1811959, length: 1317034, sha256: "a33cfe728c584fdba4fcc1fd54bcdc2f9f2f13889ddbb5b2bd1d0f8cbe49b84e" },
-      { key: "assets/pdfDocument-CWO9yPDu.js", contentType: "application/javascript; charset=utf-8", offset: 3128993, length: 2868, sha256: "aa415c3b6a474110a21a6a24907163e3167902f0efc1e146c471d2a66e2e8996" },
-      { key: "fonts/Roboto-LICENSE.txt", contentType: "application/octet-stream", offset: 3131861, length: 4610, sha256: "994062dd7af4186a739de55dd9e151c63b6301f8e2cbafc608d35c2e87da0cd2" },
-      { key: "fonts/Roboto-Variable.ttf", contentType: "font/ttf", offset: 3136471, length: 488584, sha256: "d7598e12c5dbef095ff8272cfc55da0250bd07fbdecbac8a530b9b277872a134" },
-      { key: "fonts/WixMadeforDisplay-Bold.ttf", contentType: "font/ttf", offset: 3625055, length: 90924, sha256: "ec4c7d63772d980d6e147b2df6215fd2737e4b04cebe0cf7e11dc695fb63cdcf" },
-      { key: "fonts/WixMadeforDisplay-ExtraBold.ttf", contentType: "font/ttf", offset: 3715979, length: 90984, sha256: "bf4c16a2774edd38a921edf3099469866cd74c094fd596f3fa4e81f54a04dfaa" },
-      { key: "fonts/WixMadeforDisplay-Medium.ttf", contentType: "font/ttf", offset: 3806963, length: 90980, sha256: "368faca44fb9f7207e4af784e94750b1ee59c1098b8689e0f4a918926f244fb5" },
-      { key: "fonts/WixMadeforDisplay-Regular.ttf", contentType: "font/ttf", offset: 3897943, length: 90872, sha256: "97ed8f1a6772abe26e3d8af5cecfc4b02faa94497d585b0398b5053b739a70c1" },
-      { key: "fonts/WixMadeforDisplay-SemiBold.ttf", contentType: "font/ttf", offset: 3988815, length: 90980, sha256: "642feab8a48ddf6c7a89d7c2a7c0edfa0e6e773f671287e460e222703563191e" },
-      { key: "fonts/WixMadeforText-Bold.ttf", contentType: "font/ttf", offset: 4079795, length: 108636, sha256: "37c179b4fefb63ea9637322b84583a2df53aa226c150294eea1675c14b1b8e29" },
-      { key: "fonts/WixMadeforText-ExtraBold.ttf", contentType: "font/ttf", offset: 4188431, length: 109084, sha256: "62e2fe4718129f36ecdb0ae4de385bd6b81ecc876146447167c6c140fad699a9" },
-      { key: "fonts/WixMadeforText-Medium.ttf", contentType: "font/ttf", offset: 4297515, length: 109048, sha256: "4ecf270136af928612c76fe4ebade91d8156975e5ea4c0cf9225501dd1788e02" },
-      { key: "fonts/WixMadeforText-Regular.ttf", contentType: "font/ttf", offset: 4406563, length: 107700, sha256: "dee56f09fd3efc127c1ea95557edc74110c1460a46287da36e0af25efd341ef5" },
-      { key: "fonts/WixMadeforText-SemiBold.ttf", contentType: "font/ttf", offset: 4514263, length: 88108, sha256: "dced97a77624bc5f8b1ae65850360908297f4588e09feb6f22792d29dc7e765b" },
-      { key: "himi-sw.js", contentType: "application/javascript; charset=utf-8", offset: 4602371, length: 6748, sha256: "4a92459977d7cefa1a6a7e020c3a63509737f083b3f2773557c1a5771665811a" },
-      { key: "index.html", contentType: "text/html; charset=utf-8", offset: 4609119, length: 4947, sha256: "ffa85a28a75544e3b04937f7826dc2647d25989f52842acbe3be6591abd27a2a" },
-      { key: "t5-frame.html", contentType: "text/html; charset=utf-8", offset: 4614066, length: 17768, sha256: "a47dec8623a0f58def7d8785ee74d08483626e75d07c9328bfc9ecb2172c2e0d" }
+      { key: "assets/DashboardHost-DAO-rMWL.js", contentType: "application/javascript; charset=utf-8", offset: 8, length: 2916, sha256: "2d1247adf113161d444c1a0e22cb04c9d83e603332fec188b2f642b403d0c7a7" },
+      { key: "assets/DevDrawer-D_q_fays.js", contentType: "application/javascript; charset=utf-8", offset: 2924, length: 16744, sha256: "64098416ad161eb06f7d03ce0fef4f1767dea86eddcd96b7b4575f16b0d5f076" },
+      { key: "assets/IdiomCompare-Bd-HANgZ.js", contentType: "application/javascript; charset=utf-8", offset: 19668, length: 1892, sha256: "09566d576783834c9fa3d53ed237ee3b0c5190c883af134346a8e2be49a77dcd" },
+      { key: "assets/LightboxViewer-CVRTkaYU.js", contentType: "application/javascript; charset=utf-8", offset: 21560, length: 8132, sha256: "b44394f05c22bbfdee01e244569006f4facea828ceb5f8254e237e7fbda75074" },
+      { key: "assets/PhonePreviewControl-gd29EplR.js", contentType: "application/javascript; charset=utf-8", offset: 29692, length: 37729, sha256: "6a5242bcde853e44f167fec0152cc31cade7dcc91dcd40bd40454482410f60fb" },
+      { key: "assets/SchemeCompare-BJpHRsfB.js", contentType: "application/javascript; charset=utf-8", offset: 67421, length: 1824, sha256: "405b08d3f254b238de808980391ea64f29b373717d2f37c28ffad714e80696c4" },
+      { key: "assets/index-DsL8IH-9.js", contentType: "application/javascript; charset=utf-8", offset: 69245, length: 1255677, sha256: "25ae3f3f168c96a6d824cab980d12eeb2f17625e2a5d7a1ff705427bffd72875" },
+      { key: "assets/pdf-Di3QVsBe.js", contentType: "application/javascript; charset=utf-8", offset: 1324922, length: 488199, sha256: "61410658efd7db37197efbef29ecf40f3b8a30557b192a94e44cbe3d0d2da213" },
+      { key: "assets/pdf.worker.min-BQa_JDET.js", contentType: "application/javascript; charset=utf-8", offset: 1813121, length: 73, sha256: "41bcfda4f3c8c0a81c785ea87c69afc8e7d0ed8c333324aee94c273d881bb6aa" },
+      { key: "assets/pdf.worker.min-BmVo14Nb.mjs", contentType: "application/javascript; charset=utf-8", offset: 1813194, length: 1317034, sha256: "a33cfe728c584fdba4fcc1fd54bcdc2f9f2f13889ddbb5b2bd1d0f8cbe49b84e" },
+      { key: "assets/pdfDocument-D71exx6d.js", contentType: "application/javascript; charset=utf-8", offset: 3130228, length: 2868, sha256: "8ed3de628f76f7944f24d20ba875ea40d6308afe2366ddb462eabf36280db26e" },
+      { key: "fonts/Roboto-LICENSE.txt", contentType: "application/octet-stream", offset: 3133096, length: 4610, sha256: "994062dd7af4186a739de55dd9e151c63b6301f8e2cbafc608d35c2e87da0cd2" },
+      { key: "fonts/Roboto-Variable.ttf", contentType: "font/ttf", offset: 3137706, length: 488584, sha256: "d7598e12c5dbef095ff8272cfc55da0250bd07fbdecbac8a530b9b277872a134" },
+      { key: "fonts/WixMadeforDisplay-Bold.ttf", contentType: "font/ttf", offset: 3626290, length: 90924, sha256: "ec4c7d63772d980d6e147b2df6215fd2737e4b04cebe0cf7e11dc695fb63cdcf" },
+      { key: "fonts/WixMadeforDisplay-ExtraBold.ttf", contentType: "font/ttf", offset: 3717214, length: 90984, sha256: "bf4c16a2774edd38a921edf3099469866cd74c094fd596f3fa4e81f54a04dfaa" },
+      { key: "fonts/WixMadeforDisplay-Medium.ttf", contentType: "font/ttf", offset: 3808198, length: 90980, sha256: "368faca44fb9f7207e4af784e94750b1ee59c1098b8689e0f4a918926f244fb5" },
+      { key: "fonts/WixMadeforDisplay-Regular.ttf", contentType: "font/ttf", offset: 3899178, length: 90872, sha256: "97ed8f1a6772abe26e3d8af5cecfc4b02faa94497d585b0398b5053b739a70c1" },
+      { key: "fonts/WixMadeforDisplay-SemiBold.ttf", contentType: "font/ttf", offset: 3990050, length: 90980, sha256: "642feab8a48ddf6c7a89d7c2a7c0edfa0e6e773f671287e460e222703563191e" },
+      { key: "fonts/WixMadeforText-Bold.ttf", contentType: "font/ttf", offset: 4081030, length: 108636, sha256: "37c179b4fefb63ea9637322b84583a2df53aa226c150294eea1675c14b1b8e29" },
+      { key: "fonts/WixMadeforText-ExtraBold.ttf", contentType: "font/ttf", offset: 4189666, length: 109084, sha256: "62e2fe4718129f36ecdb0ae4de385bd6b81ecc876146447167c6c140fad699a9" },
+      { key: "fonts/WixMadeforText-Medium.ttf", contentType: "font/ttf", offset: 4298750, length: 109048, sha256: "4ecf270136af928612c76fe4ebade91d8156975e5ea4c0cf9225501dd1788e02" },
+      { key: "fonts/WixMadeforText-Regular.ttf", contentType: "font/ttf", offset: 4407798, length: 107700, sha256: "dee56f09fd3efc127c1ea95557edc74110c1460a46287da36e0af25efd341ef5" },
+      { key: "fonts/WixMadeforText-SemiBold.ttf", contentType: "font/ttf", offset: 4515498, length: 88108, sha256: "dced97a77624bc5f8b1ae65850360908297f4588e09feb6f22792d29dc7e765b" },
+      { key: "himi-sw.js", contentType: "application/javascript; charset=utf-8", offset: 4603606, length: 6748, sha256: "4a92459977d7cefa1a6a7e020c3a63509737f083b3f2773557c1a5771665811a" },
+      { key: "index.html", contentType: "text/html; charset=utf-8", offset: 4610354, length: 4947, sha256: "87e59dc14f91a652f71d23ccb219eb080b20cfc7716a1f27accbae3a1f4abfbd" },
+      { key: "t5-frame.html", contentType: "text/html; charset=utf-8", offset: 4615301, length: 17768, sha256: "a47dec8623a0f58def7d8785ee74d08483626e75d07c9328bfc9ecb2172c2e0d" }
     ];
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/himalaya-cli",
-  "version": "0.1425.0",
+  "version": "0.1427.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": "1ad8e9d41b385905df3fb24715044289df3fb2389c6b704c4d14e96d"
+  "falconPackageHash": "b4d2420d483886e1ce73160edcfdc6a91646977229bb741920a0ea2f"
 }

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;