@alashi/cli 0.8.1 → 0.9.0

package/assets/v1/chat.js

@@ -1,4 +1,4 @@
-/* alashi chat component v1
+/* alashi chat + markdown components v1
  *
  * The system chat UI, served by the host. Apps drop in:
  *
@@ -9,6 +9,10 @@
  * and cost display. Renders into light DOM using system.css classes, so it
  * inherits the app's theme tokens.
  *
+ * The same script also registers <alashi-markdown>, the markdown renderer on
+ * its own for apps that display prose outside a conversation (see the bottom
+ * of this file). One renderer, one place formatting bugs get fixed.
+ *
  * Attributes:
  *   app            app name (default: derived from /app/<name>/ in the URL)
  *   placeholder    input placeholder text
@@ -31,7 +35,8 @@
  * Breaking changes ship as /assets/v2/chat.js. */
 
 (() => {
-  if (customElements.get('alashi-chat')) return;
+  // Loading the script twice is a no-op for every element it defines.
+  if (customElements.get('alashi-chat') || customElements.get('alashi-markdown')) return;
 
   const escapeHtml = (s) =>
     s
@@ -357,5 +362,40 @@
     }
   }
 
+  /* <alashi-markdown> — the same renderMarkdown() as chat bubbles, as a
+   * standalone display primitive. No fetching, no SSE, no conversations.
+   *
+   *   <alashi-markdown text="**hi**"></alashi-markdown>   // static markup
+   *   node.text = card.description;                       // re-renders
+   *
+   * The `text` property is the primary path: apps pass model-derived,
+   * multi-line strings that do not belong in an attribute. Renders into light
+   * DOM (like _setMsgText) so it inherits the app's theme tokens, and carries
+   * the `markdown` class so system.css can style its children. */
+  class AlashiMarkdown extends HTMLElement {
+    connectedCallback() {
+      this.classList.add('markdown');
+      // A property set before connect wins; the attribute is the static path.
+      if (this._text === undefined) this._text = this.getAttribute('text') ?? '';
+      this._render();
+    }
+
+    get text() {
+      return this._text ?? '';
+    }
+
+    set text(value) {
+      this._text = String(value ?? '');
+      this._render();
+    }
+
+    _render() {
+      // Escape-first pipeline: renderMarkdown escapes before rebuilding a
+      // known-safe subset of tags, so untrusted markdown stays inert.
+      this.innerHTML = renderMarkdown(String(this._text ?? ''));
+    }
+  }
+
   customElements.define('alashi-chat', AlashiChat);
+  customElements.define('alashi-markdown', AlashiMarkdown);
 })();

package/assets/v1/system.css

@@ -578,41 +578,39 @@ input[type="checkbox"] {
   /* assistant bubbles hold rendered markdown (chat.js), not preformatted text */
   white-space: normal;
 }
-.msg.assistant p,
-.msg.assistant ul,
-.msg.assistant ol,
-.msg.assistant pre,
-.msg.assistant h3,
-.msg.assistant h4,
-.msg.assistant h5,
-.msg.assistant h6 {
+/* Rendered-markdown prose. Shared by assistant chat bubbles and the
+ * <alashi-markdown> element (or any `.markdown` container) — chat.js renders
+ * both with the same renderMarkdown(), so the styling lives in one place too.
+ * Headings stay h3..h6 because that is what renderMarkdown emits. */
+alashi-markdown {
+  /* unknown element to CSS, same as <alashi-chat> in consumer apps */
+  display: block;
+}
+:is(.msg.assistant, alashi-markdown, .markdown) :is(p, ul, ol, pre, h3, h4, h5, h6) {
   margin: 0 0 0.6rem;
 }
-.msg.assistant > :last-child {
+:is(.msg.assistant, alashi-markdown, .markdown) > :last-child {
   margin-bottom: 0;
 }
-.msg.assistant ul,
-.msg.assistant ol {
+:is(.msg.assistant, alashi-markdown, .markdown) :is(ul, ol) {
   padding-left: 1.3rem;
 }
-.msg.assistant li {
+:is(.msg.assistant, alashi-markdown, .markdown) li {
   margin: 0.15rem 0;
 }
-.msg.assistant img {
+:is(.msg.assistant, alashi-markdown, .markdown) img {
   max-width: 100%;
   border-radius: var(--radius-sm);
   border: 1px solid var(--border);
 }
-.msg.assistant pre {
+:is(.msg.assistant, alashi-markdown, .markdown) pre {
   background: var(--panel);
   padding: 0.6rem 0.75rem;
 }
-.msg.assistant h3 {
+:is(.msg.assistant, alashi-markdown, .markdown) h3 {
   font-size: 1rem;
 }
-.msg.assistant h4,
-.msg.assistant h5,
-.msg.assistant h6 {
+:is(.msg.assistant, alashi-markdown, .markdown) :is(h4, h5, h6) {
   font-size: 0.92rem;
 }
 .msg.assistant.pending {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alashi/cli",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "description": "alashi host: install, manage, and run Claude Code-powered apps",
   "type": "module",
   "license": "MIT",

package/templates/basic-app/AGENTS.md

@@ -73,6 +73,10 @@ the connection before calling `runMigrations`.
   with `openConversation`/`adoptSession`). Methods: `adoptSession(sessionId, title?)`,
   `openConversation(id)`, `newChat()`. Bubbling events: `alashi-chat:turn`
   (`{ok, costUsd, error, conversationId}`), `alashi-chat:conversation`.
+  The same script also registers `<alashi-markdown>` — the host's markdown
+  renderer as a standalone display primitive, for prose outside a conversation
+  (`node.text = card.description` re-renders on assignment; `text="**hi**"` is
+  honoured on connect for static markup). No fetching, no conversation logic.
   Never vendor or fork system UI; breaking changes ship as `/assets/v2/`.
 
 ## App routes
@@ -84,7 +88,8 @@ the connection before calling `runMigrations`.
 
 - Never `innerHTML` external or model-derived data in the UI — build DOM via
   the `el()` helper / `textContent`. Markdown rendering belongs to
-  `<alashi-chat>`, which is escape-first.
+  `<alashi-chat>` / `<alashi-markdown>`, the sanctioned exception because the
+  host's renderer is escape-first. Never bundle a markdown library.
 - Validate at boundaries (webhooks, user input): JSON only, cap body sizes,
   4xx on garbage. Model output is a boundary too — parse defensively.
 - Secrets come from declared `config` keys (`secret: true`), referenced as