@shubh90/app-runtime 0.4.1 → 0.5.0

package/dist/chat/ui/styles.css

@@ -0,0 +1,109 @@
+.mii-md { min-width: 0; overflow-wrap: anywhere; font-size: var(--mii-md-font-size, inherit); line-height: var(--mii-md-line-height, inherit); }
+.mii-md p { margin: .5rem 0; white-space: pre-wrap; }
+.mii-md :is(p, ul, ol, h1, h2, h3, blockquote, hr, .mii-code, .mii-table):first-child { margin-top: 0; }
+.mii-md :is(p, ul, ol, h1, h2, h3, blockquote, hr, .mii-code, .mii-table):last-child { margin-bottom: 0; }
+.mii-md a { font-weight: 500; color: var(--mii-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mii-link) 40%, transparent); text-underline-offset: 2px; }
+.mii-md a:hover { text-decoration-color: var(--mii-link); }
+.mii-md blockquote { margin: .75rem 0; padding-left: .75rem; border-left: 2px solid color-mix(in srgb, var(--mii-link) 40%, transparent); color: var(--mii-ink-lo); }
+.mii-md code { border-radius: 4px; background: var(--mii-code-bg); padding: .125rem .375rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; color: var(--mii-ink); }
+.mii-md h1, .mii-md h2 { margin: 1rem 0 .5rem; font-weight: 600; line-height: 1.25; }
+.mii-md h1 { font-size: 1.125rem; }
+.mii-md h2 { font-size: 1rem; }
+.mii-md h3 { margin: .75rem 0 .375rem; font-size: .875rem; font-weight: 600; }
+.mii-md hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--mii-line); }
+.mii-md ul, .mii-md ol { margin: .5rem 0 .5rem 1.25rem; padding: 0; }
+.mii-md ul { list-style: disc; }
+.mii-md ol { list-style: decimal; }
+.mii-md ul.contains-task-list { margin-left: 0; list-style: none; }
+.mii-md li { margin: .25rem 0; padding-left: .125rem; }
+.mii-md li::marker { color: var(--mii-ink-lo); }
+
+.mii-code { margin: .75rem 0; overflow: hidden; border: 1px solid var(--mii-line); border-radius: 6px; background: var(--mii-surface); text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
+.mii-code-head { display: flex; height: 2.25rem; align-items: center; justify-content: space-between; padding: 0 .75rem; border-bottom: 1px solid var(--mii-line); background: color-mix(in srgb, var(--mii-surface-2) 70%, transparent); }
+.mii-code-language { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: var(--mii-ink-lo); }
+.mii-code-copy { display: inline-flex; height: 1.75rem; align-items: center; gap: .375rem; padding: 0 .5rem; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: .75rem; color: var(--mii-ink-lo); cursor: pointer; }
+.mii-code-copy:hover { background: var(--mii-surface); color: var(--mii-ink); }
+.mii-md .mii-code pre { margin: 0; max-width: 100%; overflow-x: auto; padding: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; line-height: 1.25rem; color: var(--mii-ink); overflow-wrap: normal; white-space: pre; }
+.mii-md .mii-code pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
+
+.mii-table { margin: .75rem 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--mii-line); border-radius: 6px; }
+.mii-table table { min-width: 100%; border-collapse: collapse; text-align: left; font-size: var(--mii-table-font-size, inherit); }
+.mii-table tbody tr + tr { border-top: 1px solid var(--mii-line); }
+.mii-table tr:hover { background: var(--mii-surface-2); }
+.mii-table th, .mii-table td { min-width: 4.5rem; padding: .5rem .75rem; color: var(--mii-ink); }
+.mii-table th { border-bottom: 1px solid var(--mii-line); background: color-mix(in srgb, var(--mii-surface-2) 80%, transparent); font-weight: 600; }
+.mii-table td { max-width: 20rem; vertical-align: top; line-height: 1.25rem; }
+
+.mii-md .hljs-comment, .mii-md .hljs-quote { font-style: italic; color: var(--mii-ink-lo); }
+.mii-md :is(.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type) { color: var(--mii-code-keyword); }
+.mii-md :is(.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute) { color: var(--mii-code-string); }
+.mii-md :is(.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable, .hljs-template-variable) { color: var(--mii-code-number); }
+.mii-md :is(.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-function) { color: var(--mii-code-title); }
+.mii-md :is(.hljs-built_in, .hljs-doctag, .hljs-meta, .hljs-property) { color: var(--mii-code-builtin); }
+.mii-md .hljs-deletion { color: var(--mii-danger); }
+.mii-md .hljs-emphasis { font-style: italic; }
+.mii-md .hljs-strong { font-weight: 600; }
+
+.mii-attachments { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
+.mii-attachments[data-align="end"] { align-items: flex-end; }
+.mii-images { display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem; max-width: var(--mii-attachment-width, 24rem); }
+.mii-images[data-count="many"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.mii-image { display: block; padding: 0; overflow: hidden; border: 1px solid var(--mii-line); border-radius: 6px; background: var(--mii-surface-2); cursor: zoom-in; transition: opacity 110ms; }
+.mii-image:hover { opacity: .9; }
+.mii-image img { display: block; width: 100%; height: 100%; max-height: 15rem; object-fit: cover; }
+.mii-video { display: block; max-width: var(--mii-attachment-width, 24rem); max-height: 18rem; border: 1px solid var(--mii-line); border-radius: 6px; }
+.mii-file { display: flex; align-items: center; gap: .5rem; max-width: var(--mii-attachment-width, 24rem); padding: .5rem .75rem; border: 1px solid var(--mii-line); border-radius: 6px; background: var(--mii-surface-2); font-size: .875em; color: var(--mii-ink); text-decoration: none; }
+.mii-file:hover { background: color-mix(in srgb, var(--mii-surface-2) 70%, transparent); }
+.mii-file svg { flex-shrink: 0; color: var(--mii-ink-lo); }
+.mii-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mii-file-size { flex-shrink: 0; margin-left: auto; padding-left: .25rem; font-size: .875em; color: var(--mii-ink-lo); }
+.mii-lightbox { outline: none; position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,.8); }
+.mii-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; object-fit: contain; }
+.mii-lightbox-close { position: absolute; top: 1rem; right: 1rem; display: flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
+.mii-lightbox-close:hover { background: rgba(255,255,255,.2); }
+
+.mii-activity { width: 100%; max-width: 30rem; margin: 0 auto; padding: .375rem .25rem; }
+.mii-activity p { margin: 0; }
+.mii-activity-head { display: flex; min-height: 1.75rem; align-items: center; gap: .5rem; font-size: .75rem; }
+.mii-activity-mark { display: grid; width: 1.25rem; height: 1.25rem; flex-shrink: 0; place-items: center; border-radius: 50%; background: var(--mii-surface-2); color: var(--mii-ink-lo); box-shadow: 0 0 0 1px var(--mii-line); }
+.mii-activity-mark[data-status="running"] { background: color-mix(in srgb, var(--mii-running) 10%, transparent); color: var(--mii-running); box-shadow: none; }
+.mii-activity-toggle, .mii-activity-title { display: flex; min-width: 0; flex: 1; align-items: center; gap: .5rem; padding: .25rem 0; color: var(--mii-ink-mid); }
+.mii-activity-toggle { border: 0; border-radius: 6px; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: color 110ms; }
+.mii-activity-toggle:hover { color: var(--mii-ink); }
+.mii-activity-agent { flex-shrink: 0; font-weight: 500; color: var(--mii-ink); }
+.mii-activity-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+.mii-activity-details { display: flex; flex-shrink: 0; align-items: center; gap: .125rem; font-size: .6875rem; font-weight: 500; color: var(--mii-ink-lo); }
+.mii-activity-toggle:hover .mii-activity-details { color: var(--mii-ink-mid); }
+.mii-steps { position: relative; display: flex; flex-direction: column; gap: .125rem; margin: .125rem 0 0 .625rem; padding: .125rem 0 .125rem 1rem; border-left: 1px solid var(--mii-line); }
+.mii-steps-hidden { padding-bottom: .125rem; font-size: .6875rem; color: var(--mii-ink-lo); }
+.mii-step { position: relative; display: flex; min-height: 1.5rem; align-items: flex-start; gap: .5rem; padding: .125rem 0; font-size: .75rem; color: var(--mii-ink-mid); }
+.mii-step-glyph { position: absolute; top: .25rem; left: -1.3125rem; display: grid; width: .75rem; height: .75rem; place-items: center; background: var(--mii-activity-ground, var(--mii-surface)); color: var(--mii-ink-lo); }
+.mii-step-text { min-width: 0; flex: 1; }
+.mii-step-text p { overflow-wrap: anywhere; line-height: 1.25rem; }
+.mii-step[data-status="running"] .mii-step-text p { font-weight: 500; color: var(--mii-ink); }
+.mii-step-paths { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .125rem; }
+.mii-step-paths span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .125rem .375rem; border-radius: 3px; background: var(--mii-surface-2); box-shadow: 0 0 0 1px var(--mii-line); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .625rem; color: var(--mii-ink-lo); }
+.mii-step-pulse { width: .375rem; height: .375rem; flex-shrink: 0; margin-top: .375rem; border-radius: 50%; background: var(--mii-running); animation: mii-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
+.mii-outcomes { display: flex; flex-direction: column; gap: .25rem; }
+.mii-outcomes[data-spaced="true"] { margin-top: .375rem; }
+.mii-outcome { padding: .5rem .625rem; border-radius: 6px; background: color-mix(in srgb, var(--mii-surface-2) 70%, transparent); box-shadow: 0 0 0 1px var(--mii-line); font-size: .75rem; }
+.mii-outcome[data-status="failed"] { background: color-mix(in srgb, var(--mii-danger) 5%, transparent); }
+.mii-outcome-row { display: flex; align-items: flex-start; gap: .5rem; }
+.mii-outcome-mark { display: grid; width: 1.25rem; height: 1.25rem; flex-shrink: 0; place-items: center; margin-top: .125rem; border-radius: 50%; background: var(--mii-surface); box-shadow: 0 0 0 1px var(--mii-line); color: var(--mii-ink-mid); }
+.mii-outcome-summary { min-width: 0; flex: 1; padding-top: .125rem; overflow-wrap: anywhere; font-weight: 500; line-height: 1rem; color: var(--mii-ink-mid); }
+.mii-outcome[data-status="failed"] :is(.mii-outcome-mark, .mii-outcome-summary) { color: var(--mii-danger); }
+.mii-outcome-toggle { flex-shrink: 0; padding: .125rem .25rem; border: 0; border-radius: 3px; background: transparent; font: inherit; font-weight: 500; color: var(--mii-ink-lo); cursor: pointer; }
+.mii-outcome-toggle:hover { color: var(--mii-ink); }
+.mii-outcome-detail { margin: .375rem 0 0 1.75rem; padding-left: .625rem; border-left: 1px solid var(--mii-line); color: var(--mii-ink); }
+.mii-outcome-subject { font-weight: 500; }
+.mii-activity .mii-outcome-body { margin-top: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.25rem; }
+.mii-activity .mii-outcome-attached { margin-top: .375rem; color: var(--mii-ink-lo); }
+
+.mii-code-copy:focus-visible, .mii-image:focus-visible, .mii-file:focus-visible, .mii-lightbox-close:focus-visible,
+.mii-activity-toggle:focus-visible, .mii-outcome-toggle:focus-visible { outline: 2px solid var(--mii-link); outline-offset: 2px; }
+.mii-spin { animation: mii-spin 1s linear infinite; }
+@keyframes mii-spin { to { transform: rotate(360deg); } }
+@keyframes mii-pulse { 50% { opacity: .5; } }
+@media (prefers-reduced-motion: reduce) {
+  .mii-spin, .mii-step-pulse { animation: none; }
+}

package/dist/chat/ui/styles.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The shared components' stylesheet, published as `chat/ui.css` too. It owns
+ * layout and type; colour comes from the host, which sets these on an
+ * ancestor (Plaza from its tokens, the widget from the app's theme):
+ *
+ *   --mii-ink, --mii-ink-mid, --mii-ink-lo      text, strong to faint
+ *   --mii-surface, --mii-surface-2              cards, and the fill inside them
+ *   --mii-line                                  borders
+ *   --mii-link, --mii-running, --mii-danger     accents
+ *   --mii-code-bg                               inline code
+ *   --mii-code-keyword, -string, -number, -title, -builtin   highlighting
+ *
+ * Optional: --mii-md-font-size, --mii-md-line-height, --mii-table-font-size,
+ * --mii-attachment-width, --mii-activity-ground (behind the step glyphs).
+ */
+export declare const CHAT_UI_CSS = "\n.mii-md { min-width: 0; overflow-wrap: anywhere; font-size: var(--mii-md-font-size, inherit); line-height: var(--mii-md-line-height, inherit); }\n.mii-md p { margin: .5rem 0; white-space: pre-wrap; }\n.mii-md :is(p, ul, ol, h1, h2, h3, blockquote, hr, .mii-code, .mii-table):first-child { margin-top: 0; }\n.mii-md :is(p, ul, ol, h1, h2, h3, blockquote, hr, .mii-code, .mii-table):last-child { margin-bottom: 0; }\n.mii-md a { font-weight: 500; color: var(--mii-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mii-link) 40%, transparent); text-underline-offset: 2px; }\n.mii-md a:hover { text-decoration-color: var(--mii-link); }\n.mii-md blockquote { margin: .75rem 0; padding-left: .75rem; border-left: 2px solid color-mix(in srgb, var(--mii-link) 40%, transparent); color: var(--mii-ink-lo); }\n.mii-md code { border-radius: 4px; background: var(--mii-code-bg); padding: .125rem .375rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; color: var(--mii-ink); }\n.mii-md h1, .mii-md h2 { margin: 1rem 0 .5rem; font-weight: 600; line-height: 1.25; }\n.mii-md h1 { font-size: 1.125rem; }\n.mii-md h2 { font-size: 1rem; }\n.mii-md h3 { margin: .75rem 0 .375rem; font-size: .875rem; font-weight: 600; }\n.mii-md hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--mii-line); }\n.mii-md ul, .mii-md ol { margin: .5rem 0 .5rem 1.25rem; padding: 0; }\n.mii-md ul { list-style: disc; }\n.mii-md ol { list-style: decimal; }\n.mii-md ul.contains-task-list { margin-left: 0; list-style: none; }\n.mii-md li { margin: .25rem 0; padding-left: .125rem; }\n.mii-md li::marker { color: var(--mii-ink-lo); }\n\n.mii-code { margin: .75rem 0; overflow: hidden; border: 1px solid var(--mii-line); border-radius: 6px; background: var(--mii-surface); text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.05); }\n.mii-code-head { display: flex; height: 2.25rem; align-items: center; justify-content: space-between; padding: 0 .75rem; border-bottom: 1px solid var(--mii-line); background: color-mix(in srgb, var(--mii-surface-2) 70%, transparent); }\n.mii-code-language { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: var(--mii-ink-lo); }\n.mii-code-copy { display: inline-flex; height: 1.75rem; align-items: center; gap: .375rem; padding: 0 .5rem; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: .75rem; color: var(--mii-ink-lo); cursor: pointer; }\n.mii-code-copy:hover { background: var(--mii-surface); color: var(--mii-ink); }\n.mii-md .mii-code pre { margin: 0; max-width: 100%; overflow-x: auto; padding: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; line-height: 1.25rem; color: var(--mii-ink); overflow-wrap: normal; white-space: pre; }\n.mii-md .mii-code pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }\n\n.mii-table { margin: .75rem 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--mii-line); border-radius: 6px; }\n.mii-table table { min-width: 100%; border-collapse: collapse; text-align: left; font-size: var(--mii-table-font-size, inherit); }\n.mii-table tbody tr + tr { border-top: 1px solid var(--mii-line); }\n.mii-table tr:hover { background: var(--mii-surface-2); }\n.mii-table th, .mii-table td { min-width: 4.5rem; padding: .5rem .75rem; color: var(--mii-ink); }\n.mii-table th { border-bottom: 1px solid var(--mii-line); background: color-mix(in srgb, var(--mii-surface-2) 80%, transparent); font-weight: 600; }\n.mii-table td { max-width: 20rem; vertical-align: top; line-height: 1.25rem; }\n\n.mii-md .hljs-comment, .mii-md .hljs-quote { font-style: italic; color: var(--mii-ink-lo); }\n.mii-md :is(.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type) { color: var(--mii-code-keyword); }\n.mii-md :is(.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute) { color: var(--mii-code-string); }\n.mii-md :is(.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable, .hljs-template-variable) { color: var(--mii-code-number); }\n.mii-md :is(.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-function) { color: var(--mii-code-title); }\n.mii-md :is(.hljs-built_in, .hljs-doctag, .hljs-meta, .hljs-property) { color: var(--mii-code-builtin); }\n.mii-md .hljs-deletion { color: var(--mii-danger); }\n.mii-md .hljs-emphasis { font-style: italic; }\n.mii-md .hljs-strong { font-weight: 600; }\n\n.mii-attachments { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }\n.mii-attachments[data-align=\"end\"] { align-items: flex-end; }\n.mii-images { display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem; max-width: var(--mii-attachment-width, 24rem); }\n.mii-images[data-count=\"many\"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }\n.mii-image { display: block; padding: 0; overflow: hidden; border: 1px solid var(--mii-line); border-radius: 6px; background: var(--mii-surface-2); cursor: zoom-in; transition: opacity 110ms; }\n.mii-image:hover { opacity: .9; }\n.mii-image img { display: block; width: 100%; height: 100%; max-height: 15rem; object-fit: cover; }\n.mii-video { display: block; max-width: var(--mii-attachment-width, 24rem); max-height: 18rem; border: 1px solid var(--mii-line); border-radius: 6px; }\n.mii-file { display: flex; align-items: center; gap: .5rem; max-width: var(--mii-attachment-width, 24rem); padding: .5rem .75rem; border: 1px solid var(--mii-line); border-radius: 6px; background: var(--mii-surface-2); font-size: .875em; color: var(--mii-ink); text-decoration: none; }\n.mii-file:hover { background: color-mix(in srgb, var(--mii-surface-2) 70%, transparent); }\n.mii-file svg { flex-shrink: 0; color: var(--mii-ink-lo); }\n.mii-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.mii-file-size { flex-shrink: 0; margin-left: auto; padding-left: .25rem; font-size: .875em; color: var(--mii-ink-lo); }\n.mii-lightbox { outline: none; position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,.8); }\n.mii-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; object-fit: contain; }\n.mii-lightbox-close { position: absolute; top: 1rem; right: 1rem; display: flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }\n.mii-lightbox-close:hover { background: rgba(255,255,255,.2); }\n\n.mii-activity { width: 100%; max-width: 30rem; margin: 0 auto; padding: .375rem .25rem; }\n.mii-activity p { margin: 0; }\n.mii-activity-head { display: flex; min-height: 1.75rem; align-items: center; gap: .5rem; font-size: .75rem; }\n.mii-activity-mark { display: grid; width: 1.25rem; height: 1.25rem; flex-shrink: 0; place-items: center; border-radius: 50%; background: var(--mii-surface-2); color: var(--mii-ink-lo); box-shadow: 0 0 0 1px var(--mii-line); }\n.mii-activity-mark[data-status=\"running\"] { background: color-mix(in srgb, var(--mii-running) 10%, transparent); color: var(--mii-running); box-shadow: none; }\n.mii-activity-toggle, .mii-activity-title { display: flex; min-width: 0; flex: 1; align-items: center; gap: .5rem; padding: .25rem 0; color: var(--mii-ink-mid); }\n.mii-activity-toggle { border: 0; border-radius: 6px; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: color 110ms; }\n.mii-activity-toggle:hover { color: var(--mii-ink); }\n.mii-activity-agent { flex-shrink: 0; font-weight: 500; color: var(--mii-ink); }\n.mii-activity-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }\n.mii-activity-details { display: flex; flex-shrink: 0; align-items: center; gap: .125rem; font-size: .6875rem; font-weight: 500; color: var(--mii-ink-lo); }\n.mii-activity-toggle:hover .mii-activity-details { color: var(--mii-ink-mid); }\n.mii-steps { position: relative; display: flex; flex-direction: column; gap: .125rem; margin: .125rem 0 0 .625rem; padding: .125rem 0 .125rem 1rem; border-left: 1px solid var(--mii-line); }\n.mii-steps-hidden { padding-bottom: .125rem; font-size: .6875rem; color: var(--mii-ink-lo); }\n.mii-step { position: relative; display: flex; min-height: 1.5rem; align-items: flex-start; gap: .5rem; padding: .125rem 0; font-size: .75rem; color: var(--mii-ink-mid); }\n.mii-step-glyph { position: absolute; top: .25rem; left: -1.3125rem; display: grid; width: .75rem; height: .75rem; place-items: center; background: var(--mii-activity-ground, var(--mii-surface)); color: var(--mii-ink-lo); }\n.mii-step-text { min-width: 0; flex: 1; }\n.mii-step-text p { overflow-wrap: anywhere; line-height: 1.25rem; }\n.mii-step[data-status=\"running\"] .mii-step-text p { font-weight: 500; color: var(--mii-ink); }\n.mii-step-paths { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .125rem; }\n.mii-step-paths span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .125rem .375rem; border-radius: 3px; background: var(--mii-surface-2); box-shadow: 0 0 0 1px var(--mii-line); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .625rem; color: var(--mii-ink-lo); }\n.mii-step-pulse { width: .375rem; height: .375rem; flex-shrink: 0; margin-top: .375rem; border-radius: 50%; background: var(--mii-running); animation: mii-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }\n.mii-outcomes { display: flex; flex-direction: column; gap: .25rem; }\n.mii-outcomes[data-spaced=\"true\"] { margin-top: .375rem; }\n.mii-outcome { padding: .5rem .625rem; border-radius: 6px; background: color-mix(in srgb, var(--mii-surface-2) 70%, transparent); box-shadow: 0 0 0 1px var(--mii-line); font-size: .75rem; }\n.mii-outcome[data-status=\"failed\"] { background: color-mix(in srgb, var(--mii-danger) 5%, transparent); }\n.mii-outcome-row { display: flex; align-items: flex-start; gap: .5rem; }\n.mii-outcome-mark { display: grid; width: 1.25rem; height: 1.25rem; flex-shrink: 0; place-items: center; margin-top: .125rem; border-radius: 50%; background: var(--mii-surface); box-shadow: 0 0 0 1px var(--mii-line); color: var(--mii-ink-mid); }\n.mii-outcome-summary { min-width: 0; flex: 1; padding-top: .125rem; overflow-wrap: anywhere; font-weight: 500; line-height: 1rem; color: var(--mii-ink-mid); }\n.mii-outcome[data-status=\"failed\"] :is(.mii-outcome-mark, .mii-outcome-summary) { color: var(--mii-danger); }\n.mii-outcome-toggle { flex-shrink: 0; padding: .125rem .25rem; border: 0; border-radius: 3px; background: transparent; font: inherit; font-weight: 500; color: var(--mii-ink-lo); cursor: pointer; }\n.mii-outcome-toggle:hover { color: var(--mii-ink); }\n.mii-outcome-detail { margin: .375rem 0 0 1.75rem; padding-left: .625rem; border-left: 1px solid var(--mii-line); color: var(--mii-ink); }\n.mii-outcome-subject { font-weight: 500; }\n.mii-activity .mii-outcome-body { margin-top: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.25rem; }\n.mii-activity .mii-outcome-attached { margin-top: .375rem; color: var(--mii-ink-lo); }\n\n.mii-code-copy:focus-visible, .mii-image:focus-visible, .mii-file:focus-visible, .mii-lightbox-close:focus-visible,\n.mii-activity-toggle:focus-visible, .mii-outcome-toggle:focus-visible { outline: 2px solid var(--mii-link); outline-offset: 2px; }\n.mii-spin { animation: mii-spin 1s linear infinite; }\n@keyframes mii-spin { to { transform: rotate(360deg); } }\n@keyframes mii-pulse { 50% { opacity: .5; } }\n@media (prefers-reduced-motion: reduce) {\n  .mii-spin, .mii-step-pulse { animation: none; }\n}\n";

package/dist/chat/ui/styles.js

@@ -0,0 +1,126 @@
+/**
+ * The shared components' stylesheet, published as `chat/ui.css` too. It owns
+ * layout and type; colour comes from the host, which sets these on an
+ * ancestor (Plaza from its tokens, the widget from the app's theme):
+ *
+ *   --mii-ink, --mii-ink-mid, --mii-ink-lo      text, strong to faint
+ *   --mii-surface, --mii-surface-2              cards, and the fill inside them
+ *   --mii-line                                  borders
+ *   --mii-link, --mii-running, --mii-danger     accents
+ *   --mii-code-bg                               inline code
+ *   --mii-code-keyword, -string, -number, -title, -builtin   highlighting
+ *
+ * Optional: --mii-md-font-size, --mii-md-line-height, --mii-table-font-size,
+ * --mii-attachment-width, --mii-activity-ground (behind the step glyphs).
+ */
+export const CHAT_UI_CSS = `
+.mii-md { min-width: 0; overflow-wrap: anywhere; font-size: var(--mii-md-font-size, inherit); line-height: var(--mii-md-line-height, inherit); }
+.mii-md p { margin: .5rem 0; white-space: pre-wrap; }
+.mii-md :is(p, ul, ol, h1, h2, h3, blockquote, hr, .mii-code, .mii-table):first-child { margin-top: 0; }
+.mii-md :is(p, ul, ol, h1, h2, h3, blockquote, hr, .mii-code, .mii-table):last-child { margin-bottom: 0; }
+.mii-md a { font-weight: 500; color: var(--mii-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--mii-link) 40%, transparent); text-underline-offset: 2px; }
+.mii-md a:hover { text-decoration-color: var(--mii-link); }
+.mii-md blockquote { margin: .75rem 0; padding-left: .75rem; border-left: 2px solid color-mix(in srgb, var(--mii-link) 40%, transparent); color: var(--mii-ink-lo); }
+.mii-md code { border-radius: 4px; background: var(--mii-code-bg); padding: .125rem .375rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; color: var(--mii-ink); }
+.mii-md h1, .mii-md h2 { margin: 1rem 0 .5rem; font-weight: 600; line-height: 1.25; }
+.mii-md h1 { font-size: 1.125rem; }
+.mii-md h2 { font-size: 1rem; }
+.mii-md h3 { margin: .75rem 0 .375rem; font-size: .875rem; font-weight: 600; }
+.mii-md hr { margin: 1rem 0; border: 0; border-top: 1px solid var(--mii-line); }
+.mii-md ul, .mii-md ol { margin: .5rem 0 .5rem 1.25rem; padding: 0; }
+.mii-md ul { list-style: disc; }
+.mii-md ol { list-style: decimal; }
+.mii-md ul.contains-task-list { margin-left: 0; list-style: none; }
+.mii-md li { margin: .25rem 0; padding-left: .125rem; }
+.mii-md li::marker { color: var(--mii-ink-lo); }
+
+.mii-code { margin: .75rem 0; overflow: hidden; border: 1px solid var(--mii-line); border-radius: 6px; background: var(--mii-surface); text-align: left; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
+.mii-code-head { display: flex; height: 2.25rem; align-items: center; justify-content: space-between; padding: 0 .75rem; border-bottom: 1px solid var(--mii-line); background: color-mix(in srgb, var(--mii-surface-2) 70%, transparent); }
+.mii-code-language { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; font-weight: 500; letter-spacing: .025em; text-transform: uppercase; color: var(--mii-ink-lo); }
+.mii-code-copy { display: inline-flex; height: 1.75rem; align-items: center; gap: .375rem; padding: 0 .5rem; border: 0; border-radius: 6px; background: transparent; font: inherit; font-size: .75rem; color: var(--mii-ink-lo); cursor: pointer; }
+.mii-code-copy:hover { background: var(--mii-surface); color: var(--mii-ink); }
+.mii-md .mii-code pre { margin: 0; max-width: 100%; overflow-x: auto; padding: .75rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; line-height: 1.25rem; color: var(--mii-ink); overflow-wrap: normal; white-space: pre; }
+.mii-md .mii-code pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
+
+.mii-table { margin: .75rem 0; max-width: 100%; overflow-x: auto; border: 1px solid var(--mii-line); border-radius: 6px; }
+.mii-table table { min-width: 100%; border-collapse: collapse; text-align: left; font-size: var(--mii-table-font-size, inherit); }
+.mii-table tbody tr + tr { border-top: 1px solid var(--mii-line); }
+.mii-table tr:hover { background: var(--mii-surface-2); }
+.mii-table th, .mii-table td { min-width: 4.5rem; padding: .5rem .75rem; color: var(--mii-ink); }
+.mii-table th { border-bottom: 1px solid var(--mii-line); background: color-mix(in srgb, var(--mii-surface-2) 80%, transparent); font-weight: 600; }
+.mii-table td { max-width: 20rem; vertical-align: top; line-height: 1.25rem; }
+
+.mii-md .hljs-comment, .mii-md .hljs-quote { font-style: italic; color: var(--mii-ink-lo); }
+.mii-md :is(.hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-type) { color: var(--mii-code-keyword); }
+.mii-md :is(.hljs-string, .hljs-regexp, .hljs-addition, .hljs-attribute) { color: var(--mii-code-string); }
+.mii-md :is(.hljs-number, .hljs-symbol, .hljs-bullet, .hljs-variable, .hljs-template-variable) { color: var(--mii-code-number); }
+.mii-md :is(.hljs-title, .hljs-section, .hljs-name, .hljs-selector-id, .hljs-selector-class, .hljs-function) { color: var(--mii-code-title); }
+.mii-md :is(.hljs-built_in, .hljs-doctag, .hljs-meta, .hljs-property) { color: var(--mii-code-builtin); }
+.mii-md .hljs-deletion { color: var(--mii-danger); }
+.mii-md .hljs-emphasis { font-style: italic; }
+.mii-md .hljs-strong { font-weight: 600; }
+
+.mii-attachments { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; }
+.mii-attachments[data-align="end"] { align-items: flex-end; }
+.mii-images { display: grid; grid-template-columns: minmax(0, 1fr); gap: .375rem; max-width: var(--mii-attachment-width, 24rem); }
+.mii-images[data-count="many"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.mii-image { display: block; padding: 0; overflow: hidden; border: 1px solid var(--mii-line); border-radius: 6px; background: var(--mii-surface-2); cursor: zoom-in; transition: opacity 110ms; }
+.mii-image:hover { opacity: .9; }
+.mii-image img { display: block; width: 100%; height: 100%; max-height: 15rem; object-fit: cover; }
+.mii-video { display: block; max-width: var(--mii-attachment-width, 24rem); max-height: 18rem; border: 1px solid var(--mii-line); border-radius: 6px; }
+.mii-file { display: flex; align-items: center; gap: .5rem; max-width: var(--mii-attachment-width, 24rem); padding: .5rem .75rem; border: 1px solid var(--mii-line); border-radius: 6px; background: var(--mii-surface-2); font-size: .875em; color: var(--mii-ink); text-decoration: none; }
+.mii-file:hover { background: color-mix(in srgb, var(--mii-surface-2) 70%, transparent); }
+.mii-file svg { flex-shrink: 0; color: var(--mii-ink-lo); }
+.mii-file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.mii-file-size { flex-shrink: 0; margin-left: auto; padding-left: .25rem; font-size: .875em; color: var(--mii-ink-lo); }
+.mii-lightbox { outline: none; position: fixed; inset: 0; z-index: 2147483647; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(0,0,0,.8); }
+.mii-lightbox img { max-width: 100%; max-height: 100%; border-radius: 6px; object-fit: contain; }
+.mii-lightbox-close { position: absolute; top: 1rem; right: 1rem; display: flex; width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
+.mii-lightbox-close:hover { background: rgba(255,255,255,.2); }
+
+.mii-activity { width: 100%; max-width: 30rem; margin: 0 auto; padding: .375rem .25rem; }
+.mii-activity p { margin: 0; }
+.mii-activity-head { display: flex; min-height: 1.75rem; align-items: center; gap: .5rem; font-size: .75rem; }
+.mii-activity-mark { display: grid; width: 1.25rem; height: 1.25rem; flex-shrink: 0; place-items: center; border-radius: 50%; background: var(--mii-surface-2); color: var(--mii-ink-lo); box-shadow: 0 0 0 1px var(--mii-line); }
+.mii-activity-mark[data-status="running"] { background: color-mix(in srgb, var(--mii-running) 10%, transparent); color: var(--mii-running); box-shadow: none; }
+.mii-activity-toggle, .mii-activity-title { display: flex; min-width: 0; flex: 1; align-items: center; gap: .5rem; padding: .25rem 0; color: var(--mii-ink-mid); }
+.mii-activity-toggle { border: 0; border-radius: 6px; background: transparent; font: inherit; text-align: left; cursor: pointer; transition: color 110ms; }
+.mii-activity-toggle:hover { color: var(--mii-ink); }
+.mii-activity-agent { flex-shrink: 0; font-weight: 500; color: var(--mii-ink); }
+.mii-activity-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
+.mii-activity-details { display: flex; flex-shrink: 0; align-items: center; gap: .125rem; font-size: .6875rem; font-weight: 500; color: var(--mii-ink-lo); }
+.mii-activity-toggle:hover .mii-activity-details { color: var(--mii-ink-mid); }
+.mii-steps { position: relative; display: flex; flex-direction: column; gap: .125rem; margin: .125rem 0 0 .625rem; padding: .125rem 0 .125rem 1rem; border-left: 1px solid var(--mii-line); }
+.mii-steps-hidden { padding-bottom: .125rem; font-size: .6875rem; color: var(--mii-ink-lo); }
+.mii-step { position: relative; display: flex; min-height: 1.5rem; align-items: flex-start; gap: .5rem; padding: .125rem 0; font-size: .75rem; color: var(--mii-ink-mid); }
+.mii-step-glyph { position: absolute; top: .25rem; left: -1.3125rem; display: grid; width: .75rem; height: .75rem; place-items: center; background: var(--mii-activity-ground, var(--mii-surface)); color: var(--mii-ink-lo); }
+.mii-step-text { min-width: 0; flex: 1; }
+.mii-step-text p { overflow-wrap: anywhere; line-height: 1.25rem; }
+.mii-step[data-status="running"] .mii-step-text p { font-weight: 500; color: var(--mii-ink); }
+.mii-step-paths { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .125rem; }
+.mii-step-paths span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .125rem .375rem; border-radius: 3px; background: var(--mii-surface-2); box-shadow: 0 0 0 1px var(--mii-line); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .625rem; color: var(--mii-ink-lo); }
+.mii-step-pulse { width: .375rem; height: .375rem; flex-shrink: 0; margin-top: .375rem; border-radius: 50%; background: var(--mii-running); animation: mii-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
+.mii-outcomes { display: flex; flex-direction: column; gap: .25rem; }
+.mii-outcomes[data-spaced="true"] { margin-top: .375rem; }
+.mii-outcome { padding: .5rem .625rem; border-radius: 6px; background: color-mix(in srgb, var(--mii-surface-2) 70%, transparent); box-shadow: 0 0 0 1px var(--mii-line); font-size: .75rem; }
+.mii-outcome[data-status="failed"] { background: color-mix(in srgb, var(--mii-danger) 5%, transparent); }
+.mii-outcome-row { display: flex; align-items: flex-start; gap: .5rem; }
+.mii-outcome-mark { display: grid; width: 1.25rem; height: 1.25rem; flex-shrink: 0; place-items: center; margin-top: .125rem; border-radius: 50%; background: var(--mii-surface); box-shadow: 0 0 0 1px var(--mii-line); color: var(--mii-ink-mid); }
+.mii-outcome-summary { min-width: 0; flex: 1; padding-top: .125rem; overflow-wrap: anywhere; font-weight: 500; line-height: 1rem; color: var(--mii-ink-mid); }
+.mii-outcome[data-status="failed"] :is(.mii-outcome-mark, .mii-outcome-summary) { color: var(--mii-danger); }
+.mii-outcome-toggle { flex-shrink: 0; padding: .125rem .25rem; border: 0; border-radius: 3px; background: transparent; font: inherit; font-weight: 500; color: var(--mii-ink-lo); cursor: pointer; }
+.mii-outcome-toggle:hover { color: var(--mii-ink); }
+.mii-outcome-detail { margin: .375rem 0 0 1.75rem; padding-left: .625rem; border-left: 1px solid var(--mii-line); color: var(--mii-ink); }
+.mii-outcome-subject { font-weight: 500; }
+.mii-activity .mii-outcome-body { margin-top: .25rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.25rem; }
+.mii-activity .mii-outcome-attached { margin-top: .375rem; color: var(--mii-ink-lo); }
+
+.mii-code-copy:focus-visible, .mii-image:focus-visible, .mii-file:focus-visible, .mii-lightbox-close:focus-visible,
+.mii-activity-toggle:focus-visible, .mii-outcome-toggle:focus-visible { outline: 2px solid var(--mii-link); outline-offset: 2px; }
+.mii-spin { animation: mii-spin 1s linear infinite; }
+@keyframes mii-spin { to { transform: rotate(360deg); } }
+@keyframes mii-pulse { 50% { opacity: .5; } }
+@media (prefers-reduced-motion: reduce) {
+  .mii-spin, .mii-step-pulse { animation: none; }
+}
+`;

package/dist/chat/ui/types.d.ts

@@ -0,0 +1,47 @@
+export type ChatAttachment = {
+    readonly url: string;
+    readonly type: string;
+    readonly name?: string | null;
+    readonly sizeBytes?: number | null;
+    readonly width?: number | null;
+    readonly height?: number | null;
+};
+/** The parts of a step the card draws; Plaza's events carry more. */
+export type ActivityDetail = {
+    readonly type: "communication";
+    readonly channel: "email" | "text" | "chat";
+    readonly subject?: string;
+    readonly body?: string;
+    readonly attachments: readonly string[];
+} | {
+    readonly type: "files";
+    readonly paths: readonly string[];
+} | {
+    readonly type: "browser";
+    readonly action: "navigate" | "inspect" | "interact" | "input" | "tabs" | "capture";
+} | {
+    readonly type: "integration" | "task" | "schedule" | "verification" | "web";
+};
+export type ActivityEvent = {
+    readonly id: string;
+    readonly status: "running" | "completed" | "failed";
+    readonly summary: string;
+    readonly detail: ActivityDetail;
+};
+/**
+ * One agent's work on one message: steps as they happen, outcomes that matter.
+ * While it runs, only the latest few steps are shown and the rest are counted;
+ * once done, every step is kept behind Details.
+ */
+export type ActivityGroup = {
+    readonly agentName: string;
+    readonly contextLabel: string;
+    readonly outcomes: readonly ActivityEvent[];
+} & ({
+    readonly status: "running";
+    readonly visibleSteps: readonly ActivityEvent[];
+    readonly hiddenStepCount: number;
+} | {
+    readonly status: "completed";
+    readonly steps: readonly ActivityEvent[];
+});

package/dist/chat/ui/types.js

@@ -0,0 +1 @@
+export {};

package/dist/chat/widget/api.d.ts

@@ -0,0 +1,34 @@
+import type { ChatActivity, ChatAgent, ChatAttachment, ChatMessage } from "./thread.js";
+import type { MessageCursor } from "../thread.js";
+export declare class ChatRequestError extends Error {
+    readonly status: number;
+    readonly code: string;
+    constructor(status: number, code: string, message: string);
+}
+export type AgentsResponse = {
+    readonly viewerId: string;
+    /** In the order a chat offers them: the first is who it opens on. */
+    readonly agents: readonly ChatAgent[];
+};
+/** Someone to talk to: at least one agent. */
+export type ChatAgents = {
+    readonly viewerId: string;
+    readonly agents: readonly [ChatAgent, ...ChatAgent[]];
+};
+export type ThreadResponse = {
+    readonly conversationId: string | null;
+    /** What the agent is doing about this thread right now, labelled by Plaza. */
+    readonly activity: ChatActivity | null;
+    readonly messages: readonly ChatMessage[];
+};
+export type OutgoingMessage = {
+    readonly body: string;
+    readonly attachments: readonly ChatAttachment[];
+    readonly pageUrl: string;
+};
+export declare function fetchAgents(): Promise<AgentsResponse>;
+export declare function fetchThread(agentId: string, cursor: MessageCursor | undefined): Promise<ThreadResponse>;
+export declare function avatarUrl(agentId: string): string;
+export declare function sendMessage(agentId: string, message: OutgoingMessage): Promise<ChatMessage>;
+/** Upload one file straight to storage and describe it as an attachment. */
+export declare function uploadFile(file: File): Promise<ChatAttachment>;

package/dist/chat/widget/api.js

@@ -0,0 +1,112 @@
+import { CHAT_BASE_PATH } from "../paths.js";
+// The widget's calls, all to this app's own origin (see ../server.ts).
+export class ChatRequestError extends Error {
+    status;
+    code;
+    constructor(status, code, message) {
+        super(message);
+        this.status = status;
+        this.code = code;
+    }
+}
+export function fetchAgents() {
+    return call("GET", "/agents");
+}
+export function fetchThread(agentId, cursor) {
+    const query = cursor === undefined
+        ? ""
+        : `?${new URLSearchParams({ after: cursor.updatedAt, afterId: cursor.id }).toString()}`;
+    return call("GET", `/agents/${agentId}/messages${query}`);
+}
+export function avatarUrl(agentId) {
+    return `${CHAT_BASE_PATH}/agents/${agentId}/avatar`;
+}
+export function sendMessage(agentId, message) {
+    return call("POST", `/agents/${agentId}/messages`, message);
+}
+/** Upload one file straight to storage and describe it as an attachment. */
+export async function uploadFile(file) {
+    const presigned = await call("POST", "/uploads", {
+        fileName: file.name,
+        fileType: file.type,
+        sizeBytes: file.size
+    });
+    const form = new FormData();
+    for (const [key, value] of Object.entries(presigned.fields)) {
+        form.append(key, value);
+    }
+    form.append("file", file);
+    const stored = await fetch(presigned.uploadUrl, { method: "POST", body: form });
+    if (!stored.ok) {
+        throw new ChatRequestError(stored.status, "upload_failed", "The file couldn't be stored. Try again in a moment.");
+    }
+    const dimensions = presigned.type.startsWith("image/")
+        ? await imageSize(file)
+        : null;
+    return {
+        url: presigned.publicUrl,
+        type: presigned.type,
+        name: presigned.name,
+        sizeBytes: presigned.sizeBytes,
+        width: dimensions?.width ?? null,
+        height: dimensions?.height ?? null
+    };
+}
+async function imageSize(file) {
+    try {
+        const bitmap = await createImageBitmap(file);
+        const size = { width: bitmap.width, height: bitmap.height };
+        bitmap.close();
+        return size;
+    }
+    catch {
+        // A format the browser cannot decode (HEIC on most) still uploads; the chat
+        // just shows it without reserving its shape.
+        return null;
+    }
+}
+async function call(method, path, body) {
+    const response = await fetch(`${CHAT_BASE_PATH}${path}`, {
+        method,
+        credentials: "same-origin",
+        headers: body === undefined ? undefined : { "Content-Type": "application/json" },
+        body: body === undefined ? undefined : JSON.stringify(body)
+    });
+    const text = await response.text();
+    if (response.ok) {
+        try {
+            return JSON.parse(text);
+        }
+        catch (error) {
+            // Something answered in the chat's place, like a page the app serves for
+            // any path: the chat's routes are not reachable.
+            console.error("mii-chat: the chat answered with something other than JSON", error);
+            throw new ChatRequestError(response.status, "not_the_chat", "Couldn't reach the chat. Try again in a moment.");
+        }
+    }
+    const error = errorBody(text);
+    throw new ChatRequestError(response.status, error.code, error.detail ?? messageFor(response.status));
+}
+// Plaza answers { error: <sentence>, code? }. Whatever sits in front of the app
+// (a CDN, a dev server) may answer with a page of HTML instead.
+function errorBody(text) {
+    let parsed;
+    try {
+        parsed = JSON.parse(text);
+    }
+    catch {
+        return { code: "error", detail: null };
+    }
+    const body = parsed;
+    return {
+        code: typeof body.code === "string" ? body.code : "error",
+        detail: typeof body.error === "string" ? body.error : null
+    };
+}
+function messageFor(status) {
+    if (status === 401)
+        return "Sign in again to keep chatting.";
+    if (status === 403)
+        return "Chat isn't available to you here.";
+    return "Couldn't reach the chat. Try again in a moment.";
+}

package/dist/chat/widget/app.d.ts

@@ -0,0 +1,11 @@
+import { type ChatAgents } from "./api.js";
+/** The app's accent pair (null keeps the chat's default), and its theme. */
+export type Brand = {
+    readonly brand: string | null;
+    readonly foreground: string | null;
+    readonly dark: boolean;
+};
+export declare function ChatApp({ agents, brand }: {
+    readonly agents: ChatAgents;
+    readonly brand: Brand;
+}): import("react").JSX.Element;