@meshmakers/octo-ai-console 3.3.1210 → 3.4.70

package/fesm2022/meshmakers-octo-ai-console.mjs

@@ -2,9 +2,9 @@ import * as i0 from '@angular/core';
 import { inject, Injectable, InjectionToken, makeEnvironmentProviders, input, computed, ChangeDetectionStrategy, Component, output, signal } from '@angular/core';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { ReplaySubject, Subject } from 'rxjs';
+import { CommonModule } from '@angular/common';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { CommonModule } from '@angular/common';
 
 /**
  * Typed REST client for the AI Adapter's session endpoints. Every method maps
@@ -61,6 +61,35 @@ class AiAdapterClientService {
     cancelSession(sessionId) {
         return this.http.post(`${this.tenantBase()}/sessions/${encodeURIComponent(sessionId)}/cancel`, null);
     }
+    /**
+     * `DELETE /{tenantId}/v1/sessions/{sessionId}` — hard-delete a terminal
+     * session. The server refuses non-terminal sessions with HTTP 409 and the
+     * <code>invalid_state_transition</code> error code, so callers should cancel
+     * first when the session is still in flight. 204 on success; the response
+     * has no body.
+     */
+    deleteSession(sessionId) {
+        return this.http.delete(`${this.tenantBase()}/sessions/${encodeURIComponent(sessionId)}`);
+    }
+    /**
+     * `POST /{tenantId}/v1/sessions/{sessionId}/messages` — append a follow-up
+     * user turn to a `Completed` session. The adapter re-materialises the
+     * workspace (fresh credential snapshot), recovers Claude's session id from
+     * the persisted `system/init` event of the original turn, and spawns
+     * <code>claude --resume &lt;id&gt;</code> so the conversation context
+     * carries over. The next turn's events stream on the same SignalR channel
+     * as the prior turn — there is no separate subscription to set up.
+     *
+     * Server response is 202 with the updated session DTO (status flipped back
+     * to `Running`); the caller can use the returned status to drive an
+     * optimistic UI update. Non-Completed sessions return 409 with
+     * <code>invalid_state_transition</code>; a session whose first turn died
+     * before claude emitted init returns 409 with
+     * <code>claude_session_id_not_captured</code>.
+     */
+    sendMessage(sessionId, text) {
+        return this.http.post(`${this.tenantBase()}/sessions/${encodeURIComponent(sessionId)}/messages`, { text });
+    }
     /**
      * `GET /{tenantId}/v1/sessions/{sessionId}/events?sinceSequence=N` — replay
      * persisted events for a session. UI uses this on reconnect to backfill any
@@ -95,6 +124,40 @@ class AiAdapterClientService {
     issueCredentialTicket(request) {
         return this.http.post(`${this.tenantBase()}/credentials/tickets`, request);
     }
+    /**
+     * `POST /{tenantId}/v1/credentials/github-pat` — register a GitHub Personal
+     * Access Token (#4124). The adapter validates the token against GitHub's
+     * `/user` endpoint before encryption; a refused token surfaces as HTTP 422
+     * with `error: 'github_refused_token'`. The response is intentionally minimal
+     * (`{ rtId }`); the host re-fetches the list so the rendering path stays
+     * shared with refresh.
+     */
+    registerGitHubPat(request) {
+        return this.http.post(`${this.tenantBase()}/credentials/github-pat`, request);
+    }
+    /**
+     * `GET /{tenantId}/v1/credentials/github-pat` — list registered PATs with a
+     * masked tail + GitHub login. Plaintext never crosses the wire.
+     */
+    listGitHubPats() {
+        return this.http.get(`${this.tenantBase()}/credentials/github-pat`);
+    }
+    /**
+     * `DELETE /{tenantId}/v1/credentials/github-pat/{rtId}` — revoke a PAT. The
+     * ciphertext is deleted, not soft-tombstoned. Returns void on 204.
+     */
+    deleteGitHubPat(rtId) {
+        return this.http.delete(`${this.tenantBase()}/credentials/github-pat/${encodeURIComponent(rtId)}`);
+    }
+    /**
+     * `GET /{tenantId}/v1/app-templates` — list the Custom-App templates the
+     * adapter exposes for the wizard (#4145). Phase-1 returns the same three
+     * static entries for every tenant; the wire shape is stable so per-tenant
+     * overrides can ride it without an SPA bump.
+     */
+    getAppTemplates() {
+        return this.http.get(`${this.tenantBase()}/app-templates`);
+    }
     tenantBase() {
         return `${this.options.baseUrl}/${encodeURIComponent(this.options.tenantId)}/v1`;
     }
@@ -333,15 +396,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * the component takes the array as an input signal and emits the rtId on
  * row click. Keeping it data-source-agnostic lets refinery wire its own
  * Apollo cache while a bastion CLI could pass static fixtures in a Storybook.
+ *
+ * Cancel and Delete are surfaced as inline per-row actions and emitted as
+ * separate outputs — the host owns the confirmation dialog and the actual
+ * REST call. The component only knows which actions are valid for which
+ * status, so a Running session never offers Delete and a Completed session
+ * never offers Cancel.
  */
 class AiSessionListComponent {
     sessions = input.required(...(ngDevMode ? [{ debugName: "sessions" }] : /* istanbul ignore next */ []));
     selectedSessionId = input(null, ...(ngDevMode ? [{ debugName: "selectedSessionId" }] : /* istanbul ignore next */ []));
     sessionSelected = output();
+    cancelRequested = output();
+    deleteRequested = output();
     orderedSessions = computed(() => [...this.sessions()].sort((a, b) => b.startedAt.localeCompare(a.startedAt)), ...(ngDevMode ? [{ debugName: "orderedSessions" }] : /* istanbul ignore next */ []));
+    /**
+     * Terminal status set, kept in sync with the C# `AiAgentSessionService.IsTerminal`
+     * predicate. Delete is gated to this set; Cancel is gated to its complement.
+     * If the wire enum grows a new terminal kind, both predicates must be
+     * updated here AND on the server.
+     */
+    static TERMINAL_STATUSES = new Set(['Completed', 'Failed', 'Cancelled']);
+    canCancel(status) {
+        return !AiSessionListComponent.TERMINAL_STATUSES.has(status);
+    }
+    canDelete(status) {
+        return AiSessionListComponent.TERMINAL_STATUSES.has(status);
+    }
     onSelect(sessionRtId) {
         this.sessionSelected.emit(sessionRtId);
     }
+    onCancel(sessionRtId, event) {
+        // Without stopPropagation the row click also fires and selects this
+        // session, which then redirects focus and tears the inline-action button
+        // out from under the user mid-confirmation.
+        event.stopPropagation();
+        this.cancelRequested.emit(sessionRtId);
+    }
+    onDelete(sessionRtId, event) {
+        event.stopPropagation();
+        this.deleteRequested.emit(sessionRtId);
+    }
     age(startedAt) {
         const started = Date.parse(startedAt);
         if (Number.isNaN(started)) {
@@ -364,56 +459,419 @@ class AiSessionListComponent {
         return `${days}d ago`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AiSessionListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AiSessionListComponent, isStandalone: true, selector: "mm-ai-session-list", inputs: { sessions: { classPropertyName: "sessions", publicName: "sessions", isSignal: true, isRequired: true, transformFunction: null }, selectedSessionId: { classPropertyName: "selectedSessionId", publicName: "selectedSessionId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sessionSelected: "sessionSelected" }, ngImport: i0, template: "<ul class=\"mm-ai-session-list\">\n  @for (session of orderedSessions(); track session.sessionRtId) {\n    <li\n      class=\"mm-ai-session-list__row\"\n      [class.mm-ai-session-list__row--selected]=\"\n        session.sessionRtId === selectedSessionId()\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"mm-ai-session-list__button\"\n        (click)=\"onSelect(session.sessionRtId)\"\n      >\n        <div class=\"mm-ai-session-list__main\">\n          <div class=\"mm-ai-session-list__goal\">{{ session.goalSummary }}</div>\n          <div class=\"mm-ai-session-list__meta\">\n            <span class=\"mm-ai-session-list__owner\">{{ session.ownerUserId }}</span>\n            <span class=\"mm-ai-session-list__age\">{{ age(session.startedAt) }}</span>\n            <span class=\"mm-ai-session-list__tokens\">\n              {{ session.tokensConsumed }} tok\n            </span>\n            @if (session.previewUrl) {\n              <!--\n                #4136 \u2014 preview-deploy URL the server surfaces when the worker\n                pod's nginx sidecar has a build to serve. Opens in a new tab so\n                the operator's session-list scroll position survives.\n                stopPropagation prevents the row click from also firing.\n              -->\n              <a\n                class=\"mm-ai-session-list__preview\"\n                [href]=\"session.previewUrl\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                Open preview\n              </a>\n            }\n          </div>\n        </div>\n        <mm-ai-job-status-badge [status]=\"session.status\" />\n      </button>\n    </li>\n  } @empty {\n    <li class=\"mm-ai-session-list__empty\">No sessions yet.</li>\n  }\n</ul>\n", styles: [":host{display:block;--mm-ai-list-bg: #16191d;--mm-ai-list-row-bg: #1f2227;--mm-ai-list-row-selected: #2a3142;--mm-ai-list-border: #2f343b;--mm-ai-list-text: #e6e6e6;--mm-ai-list-muted: #9aa0a6;--mm-ai-list-accent: #64ceb9}.mm-ai-session-list{list-style:none;margin:0;padding:0;background:var(--mm-ai-list-bg);border-radius:.5rem;display:flex;flex-direction:column;gap:.25rem;padding:.25rem}.mm-ai-session-list__row{background:var(--mm-ai-list-row-bg);border:1px solid var(--mm-ai-list-border);border-radius:.4rem}.mm-ai-session-list__row--selected{background:var(--mm-ai-list-row-selected)}.mm-ai-session-list__button{width:100%;display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:transparent;color:var(--mm-ai-list-text);border:none;cursor:pointer;text-align:left;font-family:inherit}.mm-ai-session-list__button:hover{background:#ffffff08}.mm-ai-session-list__main{flex:1;min-width:0}.mm-ai-session-list__goal{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mm-ai-session-list__meta{display:flex;gap:.75rem;margin-top:.15rem;font-size:.75rem;color:var(--mm-ai-list-muted);font-variant-numeric:tabular-nums}.mm-ai-session-list__preview{color:var(--mm-ai-list-accent);font-size:.75rem;text-decoration:underline;text-underline-offset:2px}.mm-ai-session-list__preview:hover{text-decoration-thickness:2px}.mm-ai-session-list__empty{padding:1rem;text-align:center;color:var(--mm-ai-list-muted);font-style:italic}\n"], dependencies: [{ kind: "component", type: AiJobStatusBadgeComponent, selector: "mm-ai-job-status-badge", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AiSessionListComponent, isStandalone: true, selector: "mm-ai-session-list", inputs: { sessions: { classPropertyName: "sessions", publicName: "sessions", isSignal: true, isRequired: true, transformFunction: null }, selectedSessionId: { classPropertyName: "selectedSessionId", publicName: "selectedSessionId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sessionSelected: "sessionSelected", cancelRequested: "cancelRequested", deleteRequested: "deleteRequested" }, ngImport: i0, template: "<ul class=\"mm-ai-session-list\">\n  @for (session of orderedSessions(); track session.sessionRtId) {\n    <li\n      class=\"mm-ai-session-list__row\"\n      [class.mm-ai-session-list__row--selected]=\"\n        session.sessionRtId === selectedSessionId()\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"mm-ai-session-list__button\"\n        (click)=\"onSelect(session.sessionRtId)\"\n      >\n        <!--\n          Row layout: goal + status badge on top, meta + actions on the\n          bottom. The two-line shape lets a narrow sidebar (Refinery\n          Studio caps the column at 18rem) breathe \u2014 the previous\n          horizontal cram had the goal text overlap the action buttons\n          on every row.\n        -->\n        <div class=\"mm-ai-session-list__top\">\n          <span class=\"mm-ai-session-list__goal\">{{ session.goalSummary }}</span>\n          <mm-ai-job-status-badge [status]=\"session.status\" />\n        </div>\n        <div class=\"mm-ai-session-list__bottom\">\n          <span class=\"mm-ai-session-list__meta\">\n            {{ age(session.startedAt) }}\n            <span class=\"mm-ai-session-list__dot\">\u00B7</span>\n            {{ session.tokensConsumed }} tok\n          </span>\n          @if (session.previewUrl) {\n            <!--\n              #4136 \u2014 preview-deploy URL the server surfaces when the\n              worker pod's nginx sidecar has a build to serve. Opens in\n              a new tab so the sidebar scroll position survives.\n              stopPropagation prevents the row click from also firing.\n            -->\n            <a\n              class=\"mm-ai-session-list__preview\"\n              [href]=\"session.previewUrl\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              Preview\n            </a>\n          }\n          <span class=\"mm-ai-session-list__spacer\"></span>\n          <span class=\"mm-ai-session-list__actions\">\n            @if (canCancel(session.status)) {\n              <button\n                type=\"button\"\n                class=\"mm-ai-session-list__action mm-ai-session-list__action--cancel\"\n                [attr.aria-label]=\"'Cancel session ' + session.goalSummary\"\n                (click)=\"onCancel(session.sessionRtId, $event)\"\n              >\n                Cancel\n              </button>\n            }\n            @if (canDelete(session.status)) {\n              <button\n                type=\"button\"\n                class=\"mm-ai-session-list__action mm-ai-session-list__action--delete\"\n                [attr.aria-label]=\"'Delete session ' + session.goalSummary\"\n                (click)=\"onDelete(session.sessionRtId, $event)\"\n              >\n                Delete\n              </button>\n            }\n          </span>\n        </div>\n      </button>\n    </li>\n  } @empty {\n    <li class=\"mm-ai-session-list__empty\">No sessions yet.</li>\n  }\n</ul>\n", styles: [":host{display:block;--mm-ai-list-bg: #16191d;--mm-ai-list-row-bg: #1f2227;--mm-ai-list-row-selected: #2a3142;--mm-ai-list-border: #2f343b;--mm-ai-list-text: #e6e6e6;--mm-ai-list-muted: #9aa0a6;--mm-ai-list-accent: #64ceb9;--mm-ai-list-action-cancel: #da9162;--mm-ai-list-action-delete: #ec658f}.mm-ai-session-list{list-style:none;margin:0;padding:0;background:var(--mm-ai-list-bg);border-radius:.5rem;display:flex;flex-direction:column;gap:.25rem;padding:.25rem}.mm-ai-session-list__row{background:var(--mm-ai-list-row-bg);border:1px solid var(--mm-ai-list-border);border-radius:.4rem}.mm-ai-session-list__row--selected{background:var(--mm-ai-list-row-selected)}.mm-ai-session-list__button{width:100%;display:flex;flex-direction:column;gap:.3rem;padding:.5rem .75rem;background:transparent;color:var(--mm-ai-list-text);border:none;cursor:pointer;text-align:left;font-family:inherit;min-width:0}.mm-ai-session-list__button:hover{background:#ffffff08}.mm-ai-session-list__top{display:flex;align-items:center;gap:.5rem;min-width:0}.mm-ai-session-list__goal{flex:1;min-width:0;font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mm-ai-session-list__bottom{display:flex;align-items:center;gap:.5rem;font-size:.7rem;color:var(--mm-ai-list-muted);font-variant-numeric:tabular-nums;min-width:0}.mm-ai-session-list__meta{display:inline-flex;align-items:baseline;gap:.35rem;flex-shrink:0}.mm-ai-session-list__dot{opacity:.5}.mm-ai-session-list__spacer{flex:1}.mm-ai-session-list__preview{color:var(--mm-ai-list-accent);font-size:.7rem;text-decoration:underline;text-underline-offset:2px;flex-shrink:0}.mm-ai-session-list__preview:hover{text-decoration-thickness:2px}.mm-ai-session-list__empty{padding:1rem;text-align:center;color:var(--mm-ai-list-muted);font-style:italic}.mm-ai-session-list__actions{display:flex;gap:.25rem;flex-shrink:0;opacity:.45;transition:opacity .15s ease}.mm-ai-session-list__row:hover .mm-ai-session-list__actions,.mm-ai-session-list__row--selected .mm-ai-session-list__actions{opacity:1}.mm-ai-session-list__action{padding:.15rem .5rem;background:transparent;border:1px solid var(--mm-ai-list-border);border-radius:.25rem;color:var(--mm-ai-list-text);font-family:inherit;font-size:.65rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:border-color .15s ease,color .15s ease,background-color .15s ease}.mm-ai-session-list__action:hover{background:#ffffff0a}.mm-ai-session-list__action--cancel{color:var(--mm-ai-list-action-cancel);border-color:color-mix(in srgb,var(--mm-ai-list-action-cancel) 40%,transparent)}.mm-ai-session-list__action--cancel:hover{border-color:var(--mm-ai-list-action-cancel)}.mm-ai-session-list__action--delete{color:var(--mm-ai-list-action-delete);border-color:color-mix(in srgb,var(--mm-ai-list-action-delete) 40%,transparent)}.mm-ai-session-list__action--delete:hover{border-color:var(--mm-ai-list-action-delete)}\n"], dependencies: [{ kind: "component", type: AiJobStatusBadgeComponent, selector: "mm-ai-job-status-badge", inputs: ["status"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AiSessionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-ai-session-list', imports: [AiJobStatusBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"mm-ai-session-list\">\n  @for (session of orderedSessions(); track session.sessionRtId) {\n    <li\n      class=\"mm-ai-session-list__row\"\n      [class.mm-ai-session-list__row--selected]=\"\n        session.sessionRtId === selectedSessionId()\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"mm-ai-session-list__button\"\n        (click)=\"onSelect(session.sessionRtId)\"\n      >\n        <div class=\"mm-ai-session-list__main\">\n          <div class=\"mm-ai-session-list__goal\">{{ session.goalSummary }}</div>\n          <div class=\"mm-ai-session-list__meta\">\n            <span class=\"mm-ai-session-list__owner\">{{ session.ownerUserId }}</span>\n            <span class=\"mm-ai-session-list__age\">{{ age(session.startedAt) }}</span>\n            <span class=\"mm-ai-session-list__tokens\">\n              {{ session.tokensConsumed }} tok\n            </span>\n            @if (session.previewUrl) {\n              <!--\n                #4136 \u2014 preview-deploy URL the server surfaces when the worker\n                pod's nginx sidecar has a build to serve. Opens in a new tab so\n                the operator's session-list scroll position survives.\n                stopPropagation prevents the row click from also firing.\n              -->\n              <a\n                class=\"mm-ai-session-list__preview\"\n                [href]=\"session.previewUrl\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\"\n                (click)=\"$event.stopPropagation()\"\n              >\n                Open preview\n              </a>\n            }\n          </div>\n        </div>\n        <mm-ai-job-status-badge [status]=\"session.status\" />\n      </button>\n    </li>\n  } @empty {\n    <li class=\"mm-ai-session-list__empty\">No sessions yet.</li>\n  }\n</ul>\n", styles: [":host{display:block;--mm-ai-list-bg: #16191d;--mm-ai-list-row-bg: #1f2227;--mm-ai-list-row-selected: #2a3142;--mm-ai-list-border: #2f343b;--mm-ai-list-text: #e6e6e6;--mm-ai-list-muted: #9aa0a6;--mm-ai-list-accent: #64ceb9}.mm-ai-session-list{list-style:none;margin:0;padding:0;background:var(--mm-ai-list-bg);border-radius:.5rem;display:flex;flex-direction:column;gap:.25rem;padding:.25rem}.mm-ai-session-list__row{background:var(--mm-ai-list-row-bg);border:1px solid var(--mm-ai-list-border);border-radius:.4rem}.mm-ai-session-list__row--selected{background:var(--mm-ai-list-row-selected)}.mm-ai-session-list__button{width:100%;display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:transparent;color:var(--mm-ai-list-text);border:none;cursor:pointer;text-align:left;font-family:inherit}.mm-ai-session-list__button:hover{background:#ffffff08}.mm-ai-session-list__main{flex:1;min-width:0}.mm-ai-session-list__goal{font-size:.9rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mm-ai-session-list__meta{display:flex;gap:.75rem;margin-top:.15rem;font-size:.75rem;color:var(--mm-ai-list-muted);font-variant-numeric:tabular-nums}.mm-ai-session-list__preview{color:var(--mm-ai-list-accent);font-size:.75rem;text-decoration:underline;text-underline-offset:2px}.mm-ai-session-list__preview:hover{text-decoration-thickness:2px}.mm-ai-session-list__empty{padding:1rem;text-align:center;color:var(--mm-ai-list-muted);font-style:italic}\n"] }]
-        }], propDecorators: { sessions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessions", required: true }] }], selectedSessionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSessionId", required: false }] }], sessionSelected: [{ type: i0.Output, args: ["sessionSelected"] }] } });
+            args: [{ selector: 'mm-ai-session-list', imports: [AiJobStatusBadgeComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"mm-ai-session-list\">\n  @for (session of orderedSessions(); track session.sessionRtId) {\n    <li\n      class=\"mm-ai-session-list__row\"\n      [class.mm-ai-session-list__row--selected]=\"\n        session.sessionRtId === selectedSessionId()\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"mm-ai-session-list__button\"\n        (click)=\"onSelect(session.sessionRtId)\"\n      >\n        <!--\n          Row layout: goal + status badge on top, meta + actions on the\n          bottom. The two-line shape lets a narrow sidebar (Refinery\n          Studio caps the column at 18rem) breathe \u2014 the previous\n          horizontal cram had the goal text overlap the action buttons\n          on every row.\n        -->\n        <div class=\"mm-ai-session-list__top\">\n          <span class=\"mm-ai-session-list__goal\">{{ session.goalSummary }}</span>\n          <mm-ai-job-status-badge [status]=\"session.status\" />\n        </div>\n        <div class=\"mm-ai-session-list__bottom\">\n          <span class=\"mm-ai-session-list__meta\">\n            {{ age(session.startedAt) }}\n            <span class=\"mm-ai-session-list__dot\">\u00B7</span>\n            {{ session.tokensConsumed }} tok\n          </span>\n          @if (session.previewUrl) {\n            <!--\n              #4136 \u2014 preview-deploy URL the server surfaces when the\n              worker pod's nginx sidecar has a build to serve. Opens in\n              a new tab so the sidebar scroll position survives.\n              stopPropagation prevents the row click from also firing.\n            -->\n            <a\n              class=\"mm-ai-session-list__preview\"\n              [href]=\"session.previewUrl\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              (click)=\"$event.stopPropagation()\"\n            >\n              Preview\n            </a>\n          }\n          <span class=\"mm-ai-session-list__spacer\"></span>\n          <span class=\"mm-ai-session-list__actions\">\n            @if (canCancel(session.status)) {\n              <button\n                type=\"button\"\n                class=\"mm-ai-session-list__action mm-ai-session-list__action--cancel\"\n                [attr.aria-label]=\"'Cancel session ' + session.goalSummary\"\n                (click)=\"onCancel(session.sessionRtId, $event)\"\n              >\n                Cancel\n              </button>\n            }\n            @if (canDelete(session.status)) {\n              <button\n                type=\"button\"\n                class=\"mm-ai-session-list__action mm-ai-session-list__action--delete\"\n                [attr.aria-label]=\"'Delete session ' + session.goalSummary\"\n                (click)=\"onDelete(session.sessionRtId, $event)\"\n              >\n                Delete\n              </button>\n            }\n          </span>\n        </div>\n      </button>\n    </li>\n  } @empty {\n    <li class=\"mm-ai-session-list__empty\">No sessions yet.</li>\n  }\n</ul>\n", styles: [":host{display:block;--mm-ai-list-bg: #16191d;--mm-ai-list-row-bg: #1f2227;--mm-ai-list-row-selected: #2a3142;--mm-ai-list-border: #2f343b;--mm-ai-list-text: #e6e6e6;--mm-ai-list-muted: #9aa0a6;--mm-ai-list-accent: #64ceb9;--mm-ai-list-action-cancel: #da9162;--mm-ai-list-action-delete: #ec658f}.mm-ai-session-list{list-style:none;margin:0;padding:0;background:var(--mm-ai-list-bg);border-radius:.5rem;display:flex;flex-direction:column;gap:.25rem;padding:.25rem}.mm-ai-session-list__row{background:var(--mm-ai-list-row-bg);border:1px solid var(--mm-ai-list-border);border-radius:.4rem}.mm-ai-session-list__row--selected{background:var(--mm-ai-list-row-selected)}.mm-ai-session-list__button{width:100%;display:flex;flex-direction:column;gap:.3rem;padding:.5rem .75rem;background:transparent;color:var(--mm-ai-list-text);border:none;cursor:pointer;text-align:left;font-family:inherit;min-width:0}.mm-ai-session-list__button:hover{background:#ffffff08}.mm-ai-session-list__top{display:flex;align-items:center;gap:.5rem;min-width:0}.mm-ai-session-list__goal{flex:1;min-width:0;font-size:.85rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mm-ai-session-list__bottom{display:flex;align-items:center;gap:.5rem;font-size:.7rem;color:var(--mm-ai-list-muted);font-variant-numeric:tabular-nums;min-width:0}.mm-ai-session-list__meta{display:inline-flex;align-items:baseline;gap:.35rem;flex-shrink:0}.mm-ai-session-list__dot{opacity:.5}.mm-ai-session-list__spacer{flex:1}.mm-ai-session-list__preview{color:var(--mm-ai-list-accent);font-size:.7rem;text-decoration:underline;text-underline-offset:2px;flex-shrink:0}.mm-ai-session-list__preview:hover{text-decoration-thickness:2px}.mm-ai-session-list__empty{padding:1rem;text-align:center;color:var(--mm-ai-list-muted);font-style:italic}.mm-ai-session-list__actions{display:flex;gap:.25rem;flex-shrink:0;opacity:.45;transition:opacity .15s ease}.mm-ai-session-list__row:hover .mm-ai-session-list__actions,.mm-ai-session-list__row--selected .mm-ai-session-list__actions{opacity:1}.mm-ai-session-list__action{padding:.15rem .5rem;background:transparent;border:1px solid var(--mm-ai-list-border);border-radius:.25rem;color:var(--mm-ai-list-text);font-family:inherit;font-size:.65rem;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;transition:border-color .15s ease,color .15s ease,background-color .15s ease}.mm-ai-session-list__action:hover{background:#ffffff0a}.mm-ai-session-list__action--cancel{color:var(--mm-ai-list-action-cancel);border-color:color-mix(in srgb,var(--mm-ai-list-action-cancel) 40%,transparent)}.mm-ai-session-list__action--cancel:hover{border-color:var(--mm-ai-list-action-cancel)}.mm-ai-session-list__action--delete{color:var(--mm-ai-list-action-delete);border-color:color-mix(in srgb,var(--mm-ai-list-action-delete) 40%,transparent)}.mm-ai-session-list__action--delete:hover{border-color:var(--mm-ai-list-action-delete)}\n"] }]
+        }], propDecorators: { sessions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sessions", required: true }] }], selectedSessionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedSessionId", required: false }] }], sessionSelected: [{ type: i0.Output, args: ["sessionSelected"] }], cancelRequested: [{ type: i0.Output, args: ["cancelRequested"] }], deleteRequested: [{ type: i0.Output, args: ["deleteRequested"] }] } });
 
 /**
- * Read-only transcript of a session, derived from the events stream. The
- * component takes the events as an input signal so the host owns lifetime —
- * a parent that's already wired `AiSessionStreamService.events$` into a
- * `toSignal()` just hands the same signal in.
+ * Parse one persisted session event into a `ParsedView`. Falls back to
+ * `unknown` (never throws) when the payload is malformed — we'd rather show
+ * "unrecognised event" than crash the whole transcript.
+ */
+function parseSessionEvent(event) {
+    const payload = safeJsonParse(event.payload);
+    if (payload === parseFailure) {
+        return {
+            event,
+            view: {
+                kind: 'unknown',
+                summary: 'Malformed event payload',
+                raw: event.payload,
+            },
+        };
+    }
+    if (event.kind === 'StatusChange' && isRecord(payload)) {
+        // The orchestrator emits a StatusChange wrapper around any non-content
+        // worker event — system/init, hooks, rate-limit, etc. Demote based on the
+        // wrapped `type` so the renderer can collapse the noise.
+        if (isClaudeStreamFrame(payload)) {
+            return { event, view: viewFromClaudeFrame(payload) };
+        }
+        const status = readString(payload, 'newStatus') ?? readString(payload, 'status');
+        if (status) {
+            return { event, view: { kind: 'status-change', status, raw: payload } };
+        }
+    }
+    if (event.kind === 'Hook' && isRecord(payload)) {
+        return { event, view: viewSystemHook(payload) };
+    }
+    if (event.kind === 'Message' && isRecord(payload)) {
+        if (isClaudeStreamFrame(payload)) {
+            return { event, view: viewFromClaudeFrame(payload) };
+        }
+        // Bare text Message — promote to a single-part assistant bubble so the
+        // visual treatment is consistent.
+        const text = readString(payload, 'text');
+        if (text) {
+            return {
+                event,
+                view: {
+                    kind: 'assistant',
+                    parts: [{ type: 'text', text }],
+                    model: null,
+                    usage: null,
+                    raw: payload,
+                },
+            };
+        }
+    }
+    if (event.kind === 'ToolCall' && isRecord(payload)) {
+        return {
+            event,
+            view: {
+                kind: 'assistant',
+                parts: [
+                    {
+                        type: 'tool_use',
+                        id: readString(payload, 'callId') ?? '',
+                        toolName: readString(payload, 'toolName') ?? 'tool',
+                        input: payload['arguments'] ?? null,
+                    },
+                ],
+                model: null,
+                usage: null,
+                raw: payload,
+            },
+        };
+    }
+    if (event.kind === 'ToolResult' && isRecord(payload)) {
+        return {
+            event,
+            view: {
+                kind: 'tool-result',
+                toolUseId: readString(payload, 'callId') ?? readString(payload, 'toolUseId') ?? '',
+                content: stringifyToolContent(payload['result'] ?? payload['content']),
+                isError: readBoolean(payload, 'isError') ?? false,
+                raw: payload,
+            },
+        };
+    }
+    if (event.kind === 'Error') {
+        return {
+            event,
+            view: {
+                kind: 'unknown',
+                summary: typeof payload === 'string' ? payload : 'Error event',
+                raw: payload,
+            },
+        };
+    }
+    return {
+        event,
+        view: { kind: 'unknown', summary: `Unhandled kind: ${event.kind}`, raw: payload },
+    };
+}
+/**
+ * Sort parsed events by sequence so out-of-order arrival (the REST backfill +
+ * live SignalR union) renders deterministically. Kept here so the component
+ * doesn't redo the sort logic every render cycle.
+ */
+function parseAndOrder(events) {
+    return [...events]
+        .sort((a, b) => a.sequence - b.sequence)
+        .map(parseSessionEvent);
+}
+// ────────────────────────────────────────────────────────────────────────────
+// Internals
+// ────────────────────────────────────────────────────────────────────────────
+const parseFailure = Symbol('parseFailure');
+function safeJsonParse(raw) {
+    try {
+        return JSON.parse(raw);
+    }
+    catch {
+        return parseFailure;
+    }
+}
+function isRecord(v) {
+    return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
+function readString(rec, key) {
+    const v = rec[key];
+    return typeof v === 'string' && v.length > 0 ? v : null;
+}
+function readNumber(rec, key) {
+    const v = rec[key];
+    return typeof v === 'number' && Number.isFinite(v) ? v : null;
+}
+function readBoolean(rec, key) {
+    const v = rec[key];
+    return typeof v === 'boolean' ? v : null;
+}
+/**
+ * Claude Code's stream-json shapes a frame as `{ type, ... }` with a small
+ * vocabulary: `system`, `assistant`, `user`, `result`, `rate_limit_event`.
+ * We branch on `type` (+ optional `subtype` for `system`) and rely on every
+ * other claim being optional — the renderer must not crash on a frame we've
+ * never seen.
+ */
+function isClaudeStreamFrame(rec) {
+    return typeof rec['type'] === 'string';
+}
+function viewFromClaudeFrame(rec) {
+    const type = rec['type'];
+    if (type === 'system') {
+        const subtype = readString(rec, 'subtype');
+        if (subtype === 'init') {
+            return {
+                kind: 'system',
+                subKind: 'init',
+                summary: `Worker initialised — ${readString(rec, 'model') ?? 'model'}`,
+                raw: rec,
+            };
+        }
+        if (subtype === 'hook_started' || subtype === 'hook_response') {
+            const hookName = readString(rec, 'hook_name') ?? 'hook';
+            return {
+                kind: 'system',
+                subKind: 'hook',
+                summary: subtype === 'hook_started'
+                    ? `Hook started — ${hookName}`
+                    : `Hook completed — ${hookName}`,
+                raw: rec,
+            };
+        }
+        return {
+            kind: 'system',
+            subKind: 'other',
+            summary: `System event${subtype ? ' — ' + subtype : ''}`,
+            raw: rec,
+        };
+    }
+    if (type === 'rate_limit_event') {
+        const info = rec['rate_limit_info'];
+        let summary = 'Rate-limit event';
+        if (isRecord(info)) {
+            const status = readString(info, 'status');
+            const rateLimitType = readString(info, 'rateLimitType');
+            if (status && rateLimitType) {
+                summary = `Rate-limit ${status} (${rateLimitType})`;
+            }
+        }
+        return { kind: 'system', subKind: 'rate-limit', summary, raw: rec };
+    }
+    if (type === 'assistant') {
+        const message = rec['message'];
+        if (isRecord(message)) {
+            const parts = extractAssistantParts(message['content']);
+            const model = readString(message, 'model');
+            const usage = isRecord(message['usage']) ? extractUsage(message['usage']) : null;
+            return {
+                kind: 'assistant',
+                parts,
+                model,
+                usage,
+                raw: rec,
+            };
+        }
+    }
+    if (type === 'user') {
+        // claude wraps tool_result inside a `user` frame's content. Extract the
+        // first tool_result we find; if there isn't one, fall through to unknown.
+        const message = rec['message'];
+        if (isRecord(message) && Array.isArray(message['content'])) {
+            for (const part of message['content']) {
+                if (isRecord(part) && part['type'] === 'tool_result') {
+                    const rawContent = part['content'];
+                    return {
+                        kind: 'tool-result',
+                        toolUseId: readString(part, 'tool_use_id') ?? '',
+                        content: stringifyToolContent(rawContent),
+                        isError: readBoolean(part, 'is_error') ?? false,
+                        raw: rec,
+                    };
+                }
+            }
+        }
+    }
+    if (type === 'result') {
+        const usage = isRecord(rec['usage']) ? extractUsage(rec['usage']) : null;
+        return {
+            kind: 'result',
+            text: readString(rec, 'result') ?? '',
+            durationMs: readNumber(rec, 'duration_ms') ?? 0,
+            usage,
+            costUsd: readNumber(rec, 'total_cost_usd'),
+            reason: readString(rec, 'terminal_reason') ?? readString(rec, 'stop_reason') ?? 'completed',
+            isError: readBoolean(rec, 'is_error') ?? false,
+            raw: rec,
+        };
+    }
+    return {
+        kind: 'unknown',
+        summary: `Unrecognised claude frame type: ${typeof type === 'string' ? type : 'n/a'}`,
+        raw: rec,
+    };
+}
+function viewSystemHook(rec) {
+    // Hooks come through as a `Hook` event-kind on our side but the payload
+    // shape matches claude's hook_started / hook_response stream-json.
+    return viewFromClaudeFrame(rec);
+}
+function extractAssistantParts(content) {
+    if (!Array.isArray(content)) {
+        return [];
+    }
+    const parts = [];
+    for (const part of content) {
+        if (!isRecord(part)) {
+            continue;
+        }
+        if (part['type'] === 'text') {
+            const text = readString(part, 'text');
+            if (text !== null) {
+                parts.push({ type: 'text', text });
+            }
+        }
+        else if (part['type'] === 'tool_use') {
+            parts.push({
+                type: 'tool_use',
+                id: readString(part, 'id') ?? '',
+                toolName: readString(part, 'name') ?? 'tool',
+                input: part['input'] ?? null,
+            });
+        }
+    }
+    return parts;
+}
+function extractUsage(usage) {
+    return {
+        input: readNumber(usage, 'input_tokens') ?? 0,
+        output: readNumber(usage, 'output_tokens') ?? 0,
+        cacheRead: readNumber(usage, 'cache_read_input_tokens') ?? undefined,
+        cacheCreation: readNumber(usage, 'cache_creation_input_tokens') ?? undefined,
+    };
+}
+/**
+ * Tool result `content` comes in many shapes: a plain string, an array of
+ * `{type:'text', text:...}` blocks (the Anthropic content-block format), or
+ * raw JSON. Flatten everything we recognise into a single string for the
+ * UI; the consumer can still pop the raw payload for inspection.
+ */
+function stringifyToolContent(content) {
+    if (typeof content === 'string') {
+        return content;
+    }
+    if (Array.isArray(content)) {
+        return content
+            .map((block) => {
+            if (isRecord(block) && block['type'] === 'text') {
+                return readString(block, 'text') ?? '';
+            }
+            return JSON.stringify(block);
+        })
+            .join('\n');
+    }
+    if (content === undefined || content === null) {
+        return '';
+    }
+    try {
+        return JSON.stringify(content, null, 2);
+    }
+    catch {
+        return String(content);
+    }
+}
+
+/**
+ * Read-only transcript of a session, derived from the events stream.
+ *
+ * The component takes raw `AiSessionEventDto` entries, runs them through the
+ * `event-parser` to produce a typed `ParsedView` per event, and renders each
+ * kind with its own treatment — assistant bubbles for chat text, expandable
+ * cards for tool calls + tool results, single-line collapsed strips for the
+ * system / hook noise, and a stats panel for the terminal `result` summary.
  *
- * Markdown rendering is deliberately minimal in Phase 1: the component shows
- * the raw payload (already JSON or stream-json) in a `<pre>` block. The
- * concept §10 calls for proper markdown + code-block highlighting; that
- * upgrade lands behind a `markdown` Input once we've picked a renderer
- * (markdown-it vs marked) and verified its CSP behaviour.
+ * Markdown rendering inside assistant text is still deferred (concept §10);
+ * for now the parser hands plain text to the template and the SCSS preserves
+ * line breaks via `white-space: pre-wrap`. Picking a renderer (markdown-it vs
+ * marked) is gated on a CSP review and a markdown-corpus regression test.
  */
 class AiChatStreamComponent {
     events = input.required(...(ngDevMode ? [{ debugName: "events" }] : /* istanbul ignore next */ []));
     /**
-     * Sorted by sequence so out-of-order arrival (the SignalR + REST backfill
-     * union) renders deterministically.
+     * Sorted + parsed. Recomputes whenever the input signal changes; the sort
+     * is stable so live appends from SignalR keep prior render positions.
      */
-    orderedEvents = computed(() => [...this.events()].sort((a, b) => a.sequence - b.sequence), ...(ngDevMode ? [{ debugName: "orderedEvents" }] : /* istanbul ignore next */ []));
-    variant(kind) {
-        switch (kind) {
-            case 'Message':
-                return 'message';
-            case 'ToolCall':
-                return 'tool-call';
-            case 'ToolResult':
-                return 'tool-result';
-            case 'StatusChange':
-                return 'status';
-            case 'Hook':
-                return 'hook';
-            case 'Error':
-                return 'error';
-            default:
-                return 'message';
+    parsedEvents = computed(() => parseAndOrder(this.events()), ...(ngDevMode ? [{ debugName: "parsedEvents" }] : /* istanbul ignore next */ []));
+    /**
+     * Per-event "show raw JSON" toggle. Keyed by sequence so live appends
+     * don't flicker existing toggles closed. A `Set<number>` rather than a
+     * record so add / delete avoids `keyof` shenanigans.
+     */
+    expandedSet = signal(new Set(), ...(ngDevMode ? [{ debugName: "expandedSet" }] : /* istanbul ignore next */ []));
+    isExpanded(sequence) {
+        return this.expandedSet().has(sequence);
+    }
+    toggleRaw(sequence) {
+        this.expandedSet.update((prev) => {
+            const next = new Set(prev);
+            if (next.has(sequence)) {
+                next.delete(sequence);
+            }
+            else {
+                next.add(sequence);
+            }
+            return next;
+        });
+    }
+    /**
+     * `HH:MM:SS` formatter — full ISO is too noisy in a 30-event transcript.
+     * Returns the input unchanged if parsing fails so we don't pretend events
+     * we can't read are recent.
+     */
+    formatTime(iso) {
+        const d = new Date(iso);
+        if (Number.isNaN(d.getTime())) {
+            return iso;
+        }
+        return d.toLocaleTimeString('de-AT', { hour12: false });
+    }
+    /** Compact "1234 tok" for the assistant header. */
+    formatTokenCount(n) {
+        if (n >= 1000) {
+            return `${(n / 1000).toFixed(1)} ktok`;
+        }
+        return `${n} tok`;
+    }
+    /** Duration in either `ms` (sub-second) or `s.SS`. */
+    formatDuration(ms) {
+        if (ms < 1000) {
+            return `${Math.round(ms)} ms`;
+        }
+        return `${(ms / 1000).toFixed(2)} s`;
+    }
+    /** Cost in EUR-style decimals; null + zero collapse to a dash. */
+    formatCost(usd) {
+        if (usd == null || usd === 0) {
+            return '—';
+        }
+        return `$${usd.toFixed(4)}`;
+    }
+    /** Pretty-print arbitrary tool_use input or raw blocks for the expandable detail panel. */
+    formatRaw(value) {
+        if (value === undefined || value === null) {
+            return '';
+        }
+        if (typeof value === 'string') {
+            return value;
+        }
+        try {
+            return JSON.stringify(value, null, 2);
+        }
+        catch {
+            return String(value);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AiChatStreamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AiChatStreamComponent, isStandalone: true, selector: "mm-ai-chat-stream", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mm-ai-chat\">\n  @for (event of orderedEvents(); track event.sequence) {\n    <article class=\"mm-ai-chat__event mm-ai-chat__event--{{ variant(event.kind) }}\">\n      <header class=\"mm-ai-chat__event-header\">\n        <span class=\"mm-ai-chat__kind\">{{ event.kind }}</span>\n        <span class=\"mm-ai-chat__actor\">{{ event.actorRef }}</span>\n        <span class=\"mm-ai-chat__sequence\">#{{ event.sequence }}</span>\n        <time class=\"mm-ai-chat__time\" [attr.datetime]=\"event.at\">\n          {{ event.at }}\n        </time>\n      </header>\n      <pre class=\"mm-ai-chat__payload\">{{ event.payload }}</pre>\n    </article>\n  } @empty {\n    <div class=\"mm-ai-chat__empty\">\n      No events yet \u2014 the worker hasn't emitted anything.\n    </div>\n  }\n</div>\n", styles: [":host{display:block;--mm-ai-chat-bg: #16191d;--mm-ai-chat-card-bg: #1f2227;--mm-ai-chat-border: #2f343b;--mm-ai-chat-text: #e6e6e6;--mm-ai-chat-muted: #9aa0a6;--mm-ai-chat-message: #1f6feb;--mm-ai-chat-tool-call: #d29922;--mm-ai-chat-tool-result: #2ea44f;--mm-ai-chat-status: #6e7681;--mm-ai-chat-hook: #8957e5;--mm-ai-chat-error: #d73a49}.mm-ai-chat{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;background:var(--mm-ai-chat-bg);color:var(--mm-ai-chat-text);border-radius:.5rem}.mm-ai-chat__event{background:var(--mm-ai-chat-card-bg);border:1px solid var(--mm-ai-chat-border);border-left-width:3px;border-radius:.4rem;padding:.5rem .6rem}.mm-ai-chat__event--message{border-left-color:var(--mm-ai-chat-message)}.mm-ai-chat__event--tool-call{border-left-color:var(--mm-ai-chat-tool-call)}.mm-ai-chat__event--tool-result{border-left-color:var(--mm-ai-chat-tool-result)}.mm-ai-chat__event--status{border-left-color:var(--mm-ai-chat-status)}.mm-ai-chat__event--hook{border-left-color:var(--mm-ai-chat-hook)}.mm-ai-chat__event--error{border-left-color:var(--mm-ai-chat-error)}.mm-ai-chat__event-header{display:flex;gap:.5rem;align-items:baseline;font-size:.75rem;color:var(--mm-ai-chat-muted);margin-bottom:.3rem}.mm-ai-chat__kind{font-weight:700;color:var(--mm-ai-chat-text);text-transform:uppercase;letter-spacing:.04em}.mm-ai-chat__sequence,.mm-ai-chat__time{font-variant-numeric:tabular-nums}.mm-ai-chat__time{margin-left:auto}.mm-ai-chat__payload{margin:0;font-size:.8rem;white-space:pre-wrap;word-break:break-word}.mm-ai-chat__empty{color:var(--mm-ai-chat-muted);text-align:center;padding:1rem;font-style:italic}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AiChatStreamComponent, isStandalone: true, selector: "mm-ai-chat-stream", inputs: { events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"mm-ai-chat\">\n  @for (parsed of parsedEvents(); track parsed.event.sequence) {\n    @switch (parsed.view.kind) {\n      @case ('assistant') {\n        <article class=\"mm-ai-chat__bubble mm-ai-chat__bubble--assistant\">\n          <header class=\"mm-ai-chat__bubble-header\">\n            <span class=\"mm-ai-chat__role\">Assistant</span>\n            @if (parsed.view.model; as model) {\n              <span class=\"mm-ai-chat__meta\">{{ model }}</span>\n            }\n            @if (parsed.view.usage; as usage) {\n              <span class=\"mm-ai-chat__meta\">\n                {{ formatTokenCount(usage.input + usage.output) }}\n              </span>\n            }\n            <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n          </header>\n          @for (part of parsed.view.parts; track $index) {\n            @switch (part.type) {\n              @case ('text') {\n                <p class=\"mm-ai-chat__text\">{{ part.text }}</p>\n              }\n              @case ('tool_use') {\n                <div class=\"mm-ai-chat__tool-use\">\n                  <header class=\"mm-ai-chat__tool-use-header\">\n                    <span class=\"mm-ai-chat__tool-badge\">tool</span>\n                    <span class=\"mm-ai-chat__tool-name\">{{ part.toolName }}</span>\n                  </header>\n                  <pre class=\"mm-ai-chat__tool-input\">{{ formatRaw(part.input) }}</pre>\n                </div>\n              }\n            }\n          }\n        </article>\n      }\n\n      @case ('tool-result') {\n        <article\n          class=\"mm-ai-chat__tool-result\"\n          [class.mm-ai-chat__tool-result--error]=\"parsed.view.isError\"\n        >\n          <header class=\"mm-ai-chat__tool-result-header\">\n            <span class=\"mm-ai-chat__role\">Tool result</span>\n            @if (parsed.view.isError) {\n              <span class=\"mm-ai-chat__error-badge\">error</span>\n            }\n            <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n          </header>\n          <pre class=\"mm-ai-chat__tool-result-body\">{{ parsed.view.content }}</pre>\n        </article>\n      }\n\n      @case ('result') {\n        <article class=\"mm-ai-chat__result\"\n                 [class.mm-ai-chat__result--error]=\"parsed.view.isError\">\n          <header class=\"mm-ai-chat__result-header\">\n            <span class=\"mm-ai-chat__role\">{{ parsed.view.reason }}</span>\n            <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n          </header>\n          @if (parsed.view.text) {\n            <p class=\"mm-ai-chat__result-text\">{{ parsed.view.text }}</p>\n          }\n          <dl class=\"mm-ai-chat__result-stats\">\n            <div>\n              <dt>Duration</dt>\n              <dd>{{ formatDuration(parsed.view.durationMs) }}</dd>\n            </div>\n            <div>\n              <dt>Tokens (in/out)</dt>\n              <dd>\n                @if (parsed.view.usage) {\n                  {{ formatTokenCount(parsed.view.usage.input) }}\n                  /\n                  {{ formatTokenCount(parsed.view.usage.output) }}\n                } @else {\n                  \u2014\n                }\n              </dd>\n            </div>\n            <div>\n              <dt>Cost</dt>\n              <dd>{{ formatCost(parsed.view.costUsd) }}</dd>\n            </div>\n          </dl>\n        </article>\n      }\n\n      @case ('system') {\n        <button\n          type=\"button\"\n          class=\"mm-ai-chat__system\"\n          [class.mm-ai-chat__system--init]=\"parsed.view.subKind === 'init'\"\n          [class.mm-ai-chat__system--hook]=\"parsed.view.subKind === 'hook'\"\n          [class.mm-ai-chat__system--rate]=\"parsed.view.subKind === 'rate-limit'\"\n          [attr.aria-expanded]=\"isExpanded(parsed.event.sequence)\"\n          (click)=\"toggleRaw(parsed.event.sequence)\"\n        >\n          <span class=\"mm-ai-chat__system-chevron\">\n            {{ isExpanded(parsed.event.sequence) ? '\u25BE' : '\u25B8' }}\n          </span>\n          <span class=\"mm-ai-chat__system-summary\">{{ parsed.view.summary }}</span>\n          <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n        </button>\n        @if (isExpanded(parsed.event.sequence)) {\n          <pre class=\"mm-ai-chat__system-detail\">{{ formatRaw(parsed.view.raw) }}</pre>\n        }\n      }\n\n      @case ('status-change') {\n        <div class=\"mm-ai-chat__status\">\n          <span class=\"mm-ai-chat__status-label\">Status</span>\n          <span class=\"mm-ai-chat__status-value\">{{ parsed.view.status }}</span>\n          <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n        </div>\n      }\n\n      @case ('unknown') {\n        <button\n          type=\"button\"\n          class=\"mm-ai-chat__system mm-ai-chat__system--unknown\"\n          [attr.aria-expanded]=\"isExpanded(parsed.event.sequence)\"\n          (click)=\"toggleRaw(parsed.event.sequence)\"\n        >\n          <span class=\"mm-ai-chat__system-chevron\">\n            {{ isExpanded(parsed.event.sequence) ? '\u25BE' : '\u25B8' }}\n          </span>\n          <span class=\"mm-ai-chat__system-summary\">{{ parsed.view.summary }}</span>\n          <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n        </button>\n        @if (isExpanded(parsed.event.sequence)) {\n          <pre class=\"mm-ai-chat__system-detail\">{{ formatRaw(parsed.view.raw) }}</pre>\n        }\n      }\n    }\n  } @empty {\n    <div class=\"mm-ai-chat__empty\">\n      No events yet \u2014 the worker hasn't emitted anything.\n    </div>\n  }\n</div>\n", styles: [":host{display:block;--mm-ai-chat-bg: transparent;--mm-ai-chat-card-bg: rgba(31, 46, 64, .55);--mm-ai-chat-card-bg-elevated: rgba(31, 46, 64, .85);--mm-ai-chat-border: rgba(100, 206, 185, .18);--mm-ai-chat-border-strong: rgba(100, 206, 185, .4);--mm-ai-chat-text: #e6e6e6;--mm-ai-chat-muted: #9292a6;--mm-ai-chat-accent-assistant: #64ceb9;--mm-ai-chat-accent-tool: #00a8dc;--mm-ai-chat-accent-tool-result: #00a8dc;--mm-ai-chat-accent-system: #6c4da8;--mm-ai-chat-accent-rate-limit: #da9162;--mm-ai-chat-accent-result: #64ceb9;--mm-ai-chat-accent-error: #ec658f}.mm-ai-chat{display:flex;flex-direction:column;gap:.5rem;padding:.25rem;background:var(--mm-ai-chat-bg);color:var(--mm-ai-chat-text);font-size:.85rem;line-height:1.45}.mm-ai-chat__empty{color:var(--mm-ai-chat-muted);text-align:center;padding:1.5rem;font-style:italic}.mm-ai-chat__bubble{background:var(--mm-ai-chat-card-bg);border:1px solid var(--mm-ai-chat-border);border-left:3px solid var(--mm-ai-chat-accent-assistant);border-radius:.5rem;padding:.6rem .75rem;display:flex;flex-direction:column;gap:.5rem}.mm-ai-chat__bubble-header{display:flex;align-items:baseline;gap:.5rem;font-size:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__role{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mm-ai-chat-accent-assistant)}.mm-ai-chat__meta{font-family:Roboto Mono,monospace;font-size:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__time{margin-left:auto;font-variant-numeric:tabular-nums;font-size:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__text{margin:0;white-space:pre-wrap;word-break:break-word}.mm-ai-chat__tool-use{border:1px solid var(--mm-ai-chat-border);border-left:2px solid var(--mm-ai-chat-accent-tool);border-radius:.35rem;background:var(--mm-ai-chat-card-bg-elevated);padding:.4rem .5rem}.mm-ai-chat__tool-use-header{display:flex;align-items:baseline;gap:.4rem;font-size:.7rem}.mm-ai-chat__tool-badge{background:var(--mm-ai-chat-accent-tool);color:#07172b;padding:0 6px;border-radius:.25rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.65rem}.mm-ai-chat__tool-name{font-family:Roboto Mono,monospace;color:var(--mm-ai-chat-text);font-weight:600}.mm-ai-chat__tool-input{margin:.35rem 0 0;font-family:Roboto Mono,monospace;font-size:.75rem;white-space:pre-wrap;word-break:break-word;color:var(--mm-ai-chat-muted);max-height:14rem;overflow-y:auto}.mm-ai-chat__tool-result{background:var(--mm-ai-chat-card-bg);border:1px solid var(--mm-ai-chat-border);border-left:3px solid var(--mm-ai-chat-accent-tool-result);border-radius:.5rem;padding:.55rem .75rem;margin-left:1.25rem}.mm-ai-chat__tool-result--error{border-left-color:var(--mm-ai-chat-accent-error)}.mm-ai-chat__tool-result-header{display:flex;align-items:baseline;gap:.5rem;font-size:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__tool-result-header .mm-ai-chat__role{color:var(--mm-ai-chat-accent-tool-result)}.mm-ai-chat__error-badge{background:var(--mm-ai-chat-accent-error);color:#07172b;padding:0 6px;border-radius:.25rem;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.mm-ai-chat__tool-result-body{margin:.4rem 0 0;font-family:Roboto Mono,monospace;font-size:.75rem;white-space:pre-wrap;word-break:break-word;max-height:18rem;overflow-y:auto}.mm-ai-chat__result{background:var(--mm-ai-chat-card-bg-elevated);border:1px solid var(--mm-ai-chat-border-strong);border-top:3px solid var(--mm-ai-chat-accent-result);border-radius:.5rem;padding:.7rem .85rem;display:flex;flex-direction:column;gap:.5rem}.mm-ai-chat__result--error{border-top-color:var(--mm-ai-chat-accent-error)}.mm-ai-chat__result-header{display:flex;align-items:baseline;gap:.5rem;font-size:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__result-header .mm-ai-chat__role{color:var(--mm-ai-chat-accent-result);text-transform:uppercase}.mm-ai-chat__result-text{margin:0;white-space:pre-wrap;word-break:break-word;font-style:italic;color:var(--mm-ai-chat-text)}.mm-ai-chat__result-stats{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.5rem;font-family:Roboto Mono,monospace;font-size:.75rem}.mm-ai-chat__result-stats div{display:flex;flex-direction:column;gap:.2rem;padding:.4rem .5rem;background:#64ceb90f;border-radius:.3rem}.mm-ai-chat__result-stats dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mm-ai-chat-muted)}.mm-ai-chat__result-stats dd{margin:0;color:var(--mm-ai-chat-text);font-variant-numeric:tabular-nums}.mm-ai-chat__system{all:unset;cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.35rem .6rem;background:#64ceb908;border:1px solid var(--mm-ai-chat-border);border-left:2px solid var(--mm-ai-chat-accent-system);border-radius:.4rem;font-size:.78rem;color:var(--mm-ai-chat-muted);transition:background-color .15s ease}.mm-ai-chat__system:hover{background:#64ceb90f}.mm-ai-chat__system:focus-visible{outline:2px solid var(--mm-ai-chat-accent-assistant);outline-offset:1px}.mm-ai-chat__system--init{border-left-color:var(--mm-ai-chat-accent-tool)}.mm-ai-chat__system--hook{border-left-color:var(--mm-ai-chat-accent-system)}.mm-ai-chat__system--rate{border-left-color:var(--mm-ai-chat-accent-rate-limit)}.mm-ai-chat__system--unknown{border-left-color:var(--mm-ai-chat-accent-error)}.mm-ai-chat__system-chevron{font-size:.7rem;width:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__system-summary{flex:1;color:var(--mm-ai-chat-text);font-variant-numeric:tabular-nums}.mm-ai-chat__system-detail{margin:-.25rem 0 0 1.5rem;padding:.5rem .6rem;background:#00000040;border-radius:.35rem;font-family:Roboto Mono,monospace;font-size:.7rem;white-space:pre-wrap;word-break:break-word;max-height:22rem;overflow-y:auto;color:var(--mm-ai-chat-muted)}.mm-ai-chat__status{display:flex;align-items:baseline;gap:.5rem;padding:.25rem .5rem;font-size:.7rem;color:var(--mm-ai-chat-muted);text-transform:uppercase;letter-spacing:.06em}.mm-ai-chat__status-label{color:var(--mm-ai-chat-muted)}.mm-ai-chat__status-value{color:var(--mm-ai-chat-text);font-weight:600}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AiChatStreamComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mm-ai-chat-stream', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mm-ai-chat\">\n  @for (event of orderedEvents(); track event.sequence) {\n    <article class=\"mm-ai-chat__event mm-ai-chat__event--{{ variant(event.kind) }}\">\n      <header class=\"mm-ai-chat__event-header\">\n        <span class=\"mm-ai-chat__kind\">{{ event.kind }}</span>\n        <span class=\"mm-ai-chat__actor\">{{ event.actorRef }}</span>\n        <span class=\"mm-ai-chat__sequence\">#{{ event.sequence }}</span>\n        <time class=\"mm-ai-chat__time\" [attr.datetime]=\"event.at\">\n          {{ event.at }}\n        </time>\n      </header>\n      <pre class=\"mm-ai-chat__payload\">{{ event.payload }}</pre>\n    </article>\n  } @empty {\n    <div class=\"mm-ai-chat__empty\">\n      No events yet \u2014 the worker hasn't emitted anything.\n    </div>\n  }\n</div>\n", styles: [":host{display:block;--mm-ai-chat-bg: #16191d;--mm-ai-chat-card-bg: #1f2227;--mm-ai-chat-border: #2f343b;--mm-ai-chat-text: #e6e6e6;--mm-ai-chat-muted: #9aa0a6;--mm-ai-chat-message: #1f6feb;--mm-ai-chat-tool-call: #d29922;--mm-ai-chat-tool-result: #2ea44f;--mm-ai-chat-status: #6e7681;--mm-ai-chat-hook: #8957e5;--mm-ai-chat-error: #d73a49}.mm-ai-chat{display:flex;flex-direction:column;gap:.5rem;padding:.5rem;background:var(--mm-ai-chat-bg);color:var(--mm-ai-chat-text);border-radius:.5rem}.mm-ai-chat__event{background:var(--mm-ai-chat-card-bg);border:1px solid var(--mm-ai-chat-border);border-left-width:3px;border-radius:.4rem;padding:.5rem .6rem}.mm-ai-chat__event--message{border-left-color:var(--mm-ai-chat-message)}.mm-ai-chat__event--tool-call{border-left-color:var(--mm-ai-chat-tool-call)}.mm-ai-chat__event--tool-result{border-left-color:var(--mm-ai-chat-tool-result)}.mm-ai-chat__event--status{border-left-color:var(--mm-ai-chat-status)}.mm-ai-chat__event--hook{border-left-color:var(--mm-ai-chat-hook)}.mm-ai-chat__event--error{border-left-color:var(--mm-ai-chat-error)}.mm-ai-chat__event-header{display:flex;gap:.5rem;align-items:baseline;font-size:.75rem;color:var(--mm-ai-chat-muted);margin-bottom:.3rem}.mm-ai-chat__kind{font-weight:700;color:var(--mm-ai-chat-text);text-transform:uppercase;letter-spacing:.04em}.mm-ai-chat__sequence,.mm-ai-chat__time{font-variant-numeric:tabular-nums}.mm-ai-chat__time{margin-left:auto}.mm-ai-chat__payload{margin:0;font-size:.8rem;white-space:pre-wrap;word-break:break-word}.mm-ai-chat__empty{color:var(--mm-ai-chat-muted);text-align:center;padding:1rem;font-style:italic}\n"] }]
+            args: [{ selector: 'mm-ai-chat-stream', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mm-ai-chat\">\n  @for (parsed of parsedEvents(); track parsed.event.sequence) {\n    @switch (parsed.view.kind) {\n      @case ('assistant') {\n        <article class=\"mm-ai-chat__bubble mm-ai-chat__bubble--assistant\">\n          <header class=\"mm-ai-chat__bubble-header\">\n            <span class=\"mm-ai-chat__role\">Assistant</span>\n            @if (parsed.view.model; as model) {\n              <span class=\"mm-ai-chat__meta\">{{ model }}</span>\n            }\n            @if (parsed.view.usage; as usage) {\n              <span class=\"mm-ai-chat__meta\">\n                {{ formatTokenCount(usage.input + usage.output) }}\n              </span>\n            }\n            <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n          </header>\n          @for (part of parsed.view.parts; track $index) {\n            @switch (part.type) {\n              @case ('text') {\n                <p class=\"mm-ai-chat__text\">{{ part.text }}</p>\n              }\n              @case ('tool_use') {\n                <div class=\"mm-ai-chat__tool-use\">\n                  <header class=\"mm-ai-chat__tool-use-header\">\n                    <span class=\"mm-ai-chat__tool-badge\">tool</span>\n                    <span class=\"mm-ai-chat__tool-name\">{{ part.toolName }}</span>\n                  </header>\n                  <pre class=\"mm-ai-chat__tool-input\">{{ formatRaw(part.input) }}</pre>\n                </div>\n              }\n            }\n          }\n        </article>\n      }\n\n      @case ('tool-result') {\n        <article\n          class=\"mm-ai-chat__tool-result\"\n          [class.mm-ai-chat__tool-result--error]=\"parsed.view.isError\"\n        >\n          <header class=\"mm-ai-chat__tool-result-header\">\n            <span class=\"mm-ai-chat__role\">Tool result</span>\n            @if (parsed.view.isError) {\n              <span class=\"mm-ai-chat__error-badge\">error</span>\n            }\n            <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n          </header>\n          <pre class=\"mm-ai-chat__tool-result-body\">{{ parsed.view.content }}</pre>\n        </article>\n      }\n\n      @case ('result') {\n        <article class=\"mm-ai-chat__result\"\n                 [class.mm-ai-chat__result--error]=\"parsed.view.isError\">\n          <header class=\"mm-ai-chat__result-header\">\n            <span class=\"mm-ai-chat__role\">{{ parsed.view.reason }}</span>\n            <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n          </header>\n          @if (parsed.view.text) {\n            <p class=\"mm-ai-chat__result-text\">{{ parsed.view.text }}</p>\n          }\n          <dl class=\"mm-ai-chat__result-stats\">\n            <div>\n              <dt>Duration</dt>\n              <dd>{{ formatDuration(parsed.view.durationMs) }}</dd>\n            </div>\n            <div>\n              <dt>Tokens (in/out)</dt>\n              <dd>\n                @if (parsed.view.usage) {\n                  {{ formatTokenCount(parsed.view.usage.input) }}\n                  /\n                  {{ formatTokenCount(parsed.view.usage.output) }}\n                } @else {\n                  \u2014\n                }\n              </dd>\n            </div>\n            <div>\n              <dt>Cost</dt>\n              <dd>{{ formatCost(parsed.view.costUsd) }}</dd>\n            </div>\n          </dl>\n        </article>\n      }\n\n      @case ('system') {\n        <button\n          type=\"button\"\n          class=\"mm-ai-chat__system\"\n          [class.mm-ai-chat__system--init]=\"parsed.view.subKind === 'init'\"\n          [class.mm-ai-chat__system--hook]=\"parsed.view.subKind === 'hook'\"\n          [class.mm-ai-chat__system--rate]=\"parsed.view.subKind === 'rate-limit'\"\n          [attr.aria-expanded]=\"isExpanded(parsed.event.sequence)\"\n          (click)=\"toggleRaw(parsed.event.sequence)\"\n        >\n          <span class=\"mm-ai-chat__system-chevron\">\n            {{ isExpanded(parsed.event.sequence) ? '\u25BE' : '\u25B8' }}\n          </span>\n          <span class=\"mm-ai-chat__system-summary\">{{ parsed.view.summary }}</span>\n          <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n        </button>\n        @if (isExpanded(parsed.event.sequence)) {\n          <pre class=\"mm-ai-chat__system-detail\">{{ formatRaw(parsed.view.raw) }}</pre>\n        }\n      }\n\n      @case ('status-change') {\n        <div class=\"mm-ai-chat__status\">\n          <span class=\"mm-ai-chat__status-label\">Status</span>\n          <span class=\"mm-ai-chat__status-value\">{{ parsed.view.status }}</span>\n          <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n        </div>\n      }\n\n      @case ('unknown') {\n        <button\n          type=\"button\"\n          class=\"mm-ai-chat__system mm-ai-chat__system--unknown\"\n          [attr.aria-expanded]=\"isExpanded(parsed.event.sequence)\"\n          (click)=\"toggleRaw(parsed.event.sequence)\"\n        >\n          <span class=\"mm-ai-chat__system-chevron\">\n            {{ isExpanded(parsed.event.sequence) ? '\u25BE' : '\u25B8' }}\n          </span>\n          <span class=\"mm-ai-chat__system-summary\">{{ parsed.view.summary }}</span>\n          <time class=\"mm-ai-chat__time\">{{ formatTime(parsed.event.at) }}</time>\n        </button>\n        @if (isExpanded(parsed.event.sequence)) {\n          <pre class=\"mm-ai-chat__system-detail\">{{ formatRaw(parsed.view.raw) }}</pre>\n        }\n      }\n    }\n  } @empty {\n    <div class=\"mm-ai-chat__empty\">\n      No events yet \u2014 the worker hasn't emitted anything.\n    </div>\n  }\n</div>\n", styles: [":host{display:block;--mm-ai-chat-bg: transparent;--mm-ai-chat-card-bg: rgba(31, 46, 64, .55);--mm-ai-chat-card-bg-elevated: rgba(31, 46, 64, .85);--mm-ai-chat-border: rgba(100, 206, 185, .18);--mm-ai-chat-border-strong: rgba(100, 206, 185, .4);--mm-ai-chat-text: #e6e6e6;--mm-ai-chat-muted: #9292a6;--mm-ai-chat-accent-assistant: #64ceb9;--mm-ai-chat-accent-tool: #00a8dc;--mm-ai-chat-accent-tool-result: #00a8dc;--mm-ai-chat-accent-system: #6c4da8;--mm-ai-chat-accent-rate-limit: #da9162;--mm-ai-chat-accent-result: #64ceb9;--mm-ai-chat-accent-error: #ec658f}.mm-ai-chat{display:flex;flex-direction:column;gap:.5rem;padding:.25rem;background:var(--mm-ai-chat-bg);color:var(--mm-ai-chat-text);font-size:.85rem;line-height:1.45}.mm-ai-chat__empty{color:var(--mm-ai-chat-muted);text-align:center;padding:1.5rem;font-style:italic}.mm-ai-chat__bubble{background:var(--mm-ai-chat-card-bg);border:1px solid var(--mm-ai-chat-border);border-left:3px solid var(--mm-ai-chat-accent-assistant);border-radius:.5rem;padding:.6rem .75rem;display:flex;flex-direction:column;gap:.5rem}.mm-ai-chat__bubble-header{display:flex;align-items:baseline;gap:.5rem;font-size:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__role{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mm-ai-chat-accent-assistant)}.mm-ai-chat__meta{font-family:Roboto Mono,monospace;font-size:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__time{margin-left:auto;font-variant-numeric:tabular-nums;font-size:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__text{margin:0;white-space:pre-wrap;word-break:break-word}.mm-ai-chat__tool-use{border:1px solid var(--mm-ai-chat-border);border-left:2px solid var(--mm-ai-chat-accent-tool);border-radius:.35rem;background:var(--mm-ai-chat-card-bg-elevated);padding:.4rem .5rem}.mm-ai-chat__tool-use-header{display:flex;align-items:baseline;gap:.4rem;font-size:.7rem}.mm-ai-chat__tool-badge{background:var(--mm-ai-chat-accent-tool);color:#07172b;padding:0 6px;border-radius:.25rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.65rem}.mm-ai-chat__tool-name{font-family:Roboto Mono,monospace;color:var(--mm-ai-chat-text);font-weight:600}.mm-ai-chat__tool-input{margin:.35rem 0 0;font-family:Roboto Mono,monospace;font-size:.75rem;white-space:pre-wrap;word-break:break-word;color:var(--mm-ai-chat-muted);max-height:14rem;overflow-y:auto}.mm-ai-chat__tool-result{background:var(--mm-ai-chat-card-bg);border:1px solid var(--mm-ai-chat-border);border-left:3px solid var(--mm-ai-chat-accent-tool-result);border-radius:.5rem;padding:.55rem .75rem;margin-left:1.25rem}.mm-ai-chat__tool-result--error{border-left-color:var(--mm-ai-chat-accent-error)}.mm-ai-chat__tool-result-header{display:flex;align-items:baseline;gap:.5rem;font-size:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__tool-result-header .mm-ai-chat__role{color:var(--mm-ai-chat-accent-tool-result)}.mm-ai-chat__error-badge{background:var(--mm-ai-chat-accent-error);color:#07172b;padding:0 6px;border-radius:.25rem;font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.mm-ai-chat__tool-result-body{margin:.4rem 0 0;font-family:Roboto Mono,monospace;font-size:.75rem;white-space:pre-wrap;word-break:break-word;max-height:18rem;overflow-y:auto}.mm-ai-chat__result{background:var(--mm-ai-chat-card-bg-elevated);border:1px solid var(--mm-ai-chat-border-strong);border-top:3px solid var(--mm-ai-chat-accent-result);border-radius:.5rem;padding:.7rem .85rem;display:flex;flex-direction:column;gap:.5rem}.mm-ai-chat__result--error{border-top-color:var(--mm-ai-chat-accent-error)}.mm-ai-chat__result-header{display:flex;align-items:baseline;gap:.5rem;font-size:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__result-header .mm-ai-chat__role{color:var(--mm-ai-chat-accent-result);text-transform:uppercase}.mm-ai-chat__result-text{margin:0;white-space:pre-wrap;word-break:break-word;font-style:italic;color:var(--mm-ai-chat-text)}.mm-ai-chat__result-stats{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:.5rem;font-family:Roboto Mono,monospace;font-size:.75rem}.mm-ai-chat__result-stats div{display:flex;flex-direction:column;gap:.2rem;padding:.4rem .5rem;background:#64ceb90f;border-radius:.3rem}.mm-ai-chat__result-stats dt{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mm-ai-chat-muted)}.mm-ai-chat__result-stats dd{margin:0;color:var(--mm-ai-chat-text);font-variant-numeric:tabular-nums}.mm-ai-chat__system{all:unset;cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.35rem .6rem;background:#64ceb908;border:1px solid var(--mm-ai-chat-border);border-left:2px solid var(--mm-ai-chat-accent-system);border-radius:.4rem;font-size:.78rem;color:var(--mm-ai-chat-muted);transition:background-color .15s ease}.mm-ai-chat__system:hover{background:#64ceb90f}.mm-ai-chat__system:focus-visible{outline:2px solid var(--mm-ai-chat-accent-assistant);outline-offset:1px}.mm-ai-chat__system--init{border-left-color:var(--mm-ai-chat-accent-tool)}.mm-ai-chat__system--hook{border-left-color:var(--mm-ai-chat-accent-system)}.mm-ai-chat__system--rate{border-left-color:var(--mm-ai-chat-accent-rate-limit)}.mm-ai-chat__system--unknown{border-left-color:var(--mm-ai-chat-accent-error)}.mm-ai-chat__system-chevron{font-size:.7rem;width:.7rem;color:var(--mm-ai-chat-muted)}.mm-ai-chat__system-summary{flex:1;color:var(--mm-ai-chat-text);font-variant-numeric:tabular-nums}.mm-ai-chat__system-detail{margin:-.25rem 0 0 1.5rem;padding:.5rem .6rem;background:#00000040;border-radius:.35rem;font-family:Roboto Mono,monospace;font-size:.7rem;white-space:pre-wrap;word-break:break-word;max-height:22rem;overflow-y:auto;color:var(--mm-ai-chat-muted)}.mm-ai-chat__status{display:flex;align-items:baseline;gap:.5rem;padding:.25rem .5rem;font-size:.7rem;color:var(--mm-ai-chat-muted);text-transform:uppercase;letter-spacing:.06em}.mm-ai-chat__status-label{color:var(--mm-ai-chat-muted)}.mm-ai-chat__status-value{color:var(--mm-ai-chat-text);font-weight:600}\n"] }]
         }], propDecorators: { events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: true }] }] } });
 
 /**
@@ -674,6 +1132,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
             args: [{ selector: 'mm-ai-credential-ticket-issue', imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<section class=\"mm-ai-ticket\">\n  <header class=\"mm-ai-ticket__header\">\n    <div class=\"mm-ai-ticket__title\">Issue credential ticket</div>\n    <div class=\"mm-ai-ticket__subtitle\">\n      Mint a one-time code an operator redeems on their own machine.\n    </div>\n  </header>\n\n  @if (!issued()) {\n    <form\n      class=\"mm-ai-ticket__form\"\n      (ngSubmit)=\"onIssue()\"\n      #issueForm=\"ngForm\"\n    >\n      <label class=\"mm-ai-ticket__field\">\n        <span class=\"mm-ai-ticket__label\">Scope</span>\n        <select\n          class=\"mm-ai-ticket__select\"\n          [ngModel]=\"scope()\"\n          (ngModelChange)=\"scope.set($event)\"\n          name=\"scope\"\n          [disabled]=\"issuing()\"\n        >\n          @for (s of scopes; track s.value) {\n            <option [value]=\"s.value\">{{ s.label }}</option>\n          }\n        </select>\n      </label>\n      <p class=\"mm-ai-ticket__hint\">\n        @for (s of scopes; track s.value) {\n          @if (s.value === scope()) {\n            {{ s.hint }}\n          }\n        }\n      </p>\n\n      <label class=\"mm-ai-ticket__field\">\n        <span class=\"mm-ai-ticket__label\">TTL (minutes)</span>\n        <input\n          class=\"mm-ai-ticket__input\"\n          type=\"number\"\n          min=\"1\"\n          max=\"60\"\n          step=\"1\"\n          [ngModel]=\"ttlMinutes()\"\n          (ngModelChange)=\"ttlMinutes.set(+$event)\"\n          name=\"ttlMinutes\"\n          [disabled]=\"issuing()\"\n        />\n      </label>\n      <p class=\"mm-ai-ticket__hint\">\n        Default 5 minutes. Server clamps to 60 \u2014 long TTLs leak.\n      </p>\n\n      <div class=\"mm-ai-ticket__actions\">\n        <button\n          class=\"mm-ai-ticket__button mm-ai-ticket__button--primary\"\n          type=\"submit\"\n          [disabled]=\"issuing()\"\n        >\n          @if (issuing()) {\n            Issuing\u2026\n          } @else {\n            Issue ticket\n          }\n        </button>\n      </div>\n\n      @if (error()) {\n        <p class=\"mm-ai-ticket__error\">{{ error() }}</p>\n      }\n    </form>\n  } @else {\n    <div class=\"mm-ai-ticket__result\">\n      <p class=\"mm-ai-ticket__result-label\">\n        One-time code (copy now \u2014 not shown again):\n      </p>\n      <div class=\"mm-ai-ticket__code-row\">\n        <code class=\"mm-ai-ticket__code\">{{ issued()!.code }}</code>\n        <button\n          class=\"mm-ai-ticket__button mm-ai-ticket__button--secondary\"\n          type=\"button\"\n          (click)=\"onCopy()\"\n        >\n          @if (copied()) {\n            Copied\n          } @else {\n            Copy\n          }\n        </button>\n      </div>\n      <dl class=\"mm-ai-ticket__meta\">\n        <div>\n          <dt>Scope</dt>\n          <dd>{{ issued()!.scope }}</dd>\n        </div>\n        <div>\n          <dt>Expires at</dt>\n          <dd>{{ issued()!.expiresAt }}</dd>\n        </div>\n        <div>\n          <dt>Ticket rtId</dt>\n          <dd><code>{{ issued()!.rtId }}</code></dd>\n        </div>\n      </dl>\n      <div class=\"mm-ai-ticket__actions\">\n        <button\n          class=\"mm-ai-ticket__button\"\n          type=\"button\"\n          (click)=\"onClear()\"\n        >\n          Issue another\n        </button>\n      </div>\n    </div>\n  }\n</section>\n", styles: [":host{display:block;--mm-ai-ticket-bg: #16191d;--mm-ai-ticket-surface: #1f2227;--mm-ai-ticket-border: #2f343b;--mm-ai-ticket-text: #e6e6e6;--mm-ai-ticket-muted: #9aa0a6;--mm-ai-ticket-accent: #64ceb9;--mm-ai-ticket-error: #ec658f;--mm-ai-ticket-code-bg: #0f1115}.mm-ai-ticket{background:var(--mm-ai-ticket-bg);color:var(--mm-ai-ticket-text);border:1px solid var(--mm-ai-ticket-border);border-radius:.5rem;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.85rem;font-family:inherit}.mm-ai-ticket__header{display:flex;flex-direction:column;gap:.15rem}.mm-ai-ticket__title{font-size:1rem;font-weight:600}.mm-ai-ticket__subtitle{font-size:.8rem;color:var(--mm-ai-ticket-muted)}.mm-ai-ticket__form,.mm-ai-ticket__result{display:flex;flex-direction:column;gap:.6rem}.mm-ai-ticket__field{display:flex;flex-direction:column;gap:.25rem}.mm-ai-ticket__label{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mm-ai-ticket-muted)}.mm-ai-ticket__select,.mm-ai-ticket__input{background:var(--mm-ai-ticket-surface);color:var(--mm-ai-ticket-text);border:1px solid var(--mm-ai-ticket-border);border-radius:.3rem;padding:.4rem .55rem;font-family:inherit;font-size:.9rem}.mm-ai-ticket__select:focus,.mm-ai-ticket__input:focus{outline:2px solid var(--mm-ai-ticket-accent);outline-offset:1px}.mm-ai-ticket__select:disabled,.mm-ai-ticket__input:disabled{opacity:.6;cursor:not-allowed}.mm-ai-ticket__hint{margin:0;font-size:.75rem;color:var(--mm-ai-ticket-muted)}.mm-ai-ticket__actions{display:flex;gap:.5rem;margin-top:.25rem}.mm-ai-ticket__button{background:var(--mm-ai-ticket-surface);color:var(--mm-ai-ticket-text);border:1px solid var(--mm-ai-ticket-border);border-radius:.3rem;padding:.4rem .85rem;font-family:inherit;font-size:.85rem;cursor:pointer}.mm-ai-ticket__button:hover:not(:disabled){border-color:var(--mm-ai-ticket-accent)}.mm-ai-ticket__button:disabled{opacity:.5;cursor:not-allowed}.mm-ai-ticket__button--primary{background:var(--mm-ai-ticket-accent);color:#0a0c0f;border-color:var(--mm-ai-ticket-accent)}.mm-ai-ticket__error{margin:0;font-size:.8rem;color:var(--mm-ai-ticket-error)}.mm-ai-ticket__result-label{margin:0;font-size:.85rem;color:var(--mm-ai-ticket-muted)}.mm-ai-ticket__code-row{display:flex;align-items:center;gap:.5rem}.mm-ai-ticket__code{flex:1;background:var(--mm-ai-ticket-code-bg);color:var(--mm-ai-ticket-accent);padding:.5rem .75rem;border-radius:.3rem;font-family:Roboto Mono,ui-monospace,monospace;font-size:1.05rem;letter-spacing:.1em;-webkit-user-select:all;user-select:all}.mm-ai-ticket__meta{display:grid;grid-template-columns:max-content 1fr;gap:.2rem .75rem;margin:0;font-size:.8rem}.mm-ai-ticket__meta>div{display:contents}.mm-ai-ticket__meta dt{color:var(--mm-ai-ticket-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem}.mm-ai-ticket__meta dd{margin:0;font-family:Roboto Mono,ui-monospace,monospace}\n"] }]
         }] });
 
+/**
+ * "New App from Template" wizard (#4145). Presentation-only — the host fetches
+ * the template catalogue via {@link AiAdapterClientService.getAppTemplates},
+ * feeds it into the `templates` input, and listens for `submit` / `cancel` to
+ * call `createSession`.
+ *
+ * The component is intentionally framework-agnostic (no Kendo, no CDK overlay)
+ * so consumers can wrap it in whatever modal shell they already have — same
+ * convention as `AiApprovalModalComponent`.
+ *
+ * The interpolation engine is *deliberately* dumb: a regex substitution over
+ * `{{placeholder}}` tokens. The wizard only collects two inputs (project name +
+ * primary entity), and a full Handlebars dependency for two tokens would be
+ * overkill. If a future template needs richer rendering, switch this to
+ * `handlebars.precompile`-at-build-time and re-evaluate.
+ */
+class AiNewAppDialogComponent {
+    /** Available templates from the adapter — typically 3 in Phase 1. */
+    templates = input.required(...(ngDevMode ? [{ debugName: "templates" }] : /* istanbul ignore next */ []));
+    /** Tenant name shown in the dialog header so the operator confirms the scope. */
+    tenantName = input('', ...(ngDevMode ? [{ debugName: "tenantName" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted on Submit with the fully interpolated Goal + the picked template id.
+     * Named `confirmed` (not `submit`) because Angular flags native-event collisions
+     * — `submit` is a DOM event and triggers `@angular-eslint/no-output-native`.
+     */
+    confirmed = output();
+    /**
+     * Emitted on Cancel / dismiss. The host hides the wizard on this signal.
+     * Named `cancelled` for the same reason `confirmed` is not `submit`.
+     */
+    cancelled = output();
+    /** rtId-style id of the picked template, or empty until the operator picks one. */
+    selectedTemplateId = signal('', ...(ngDevMode ? [{ debugName: "selectedTemplateId" }] : /* istanbul ignore next */ []));
+    projectName = signal('', ...(ngDevMode ? [{ debugName: "projectName" }] : /* istanbul ignore next */ []));
+    primaryEntity = signal('', ...(ngDevMode ? [{ debugName: "primaryEntity" }] : /* istanbul ignore next */ []));
+    selectedTemplate = computed(() => {
+        const id = this.selectedTemplateId();
+        return this.templates().find((t) => t.id === id) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "selectedTemplate" }] : /* istanbul ignore next */ []));
+    /**
+     * Rendered Goal string the operator sees in the preview block. Stays empty
+     * until a template is picked AND every required placeholder has a value, so
+     * the operator never sees a half-interpolated string.
+     */
+    renderedGoal = computed(() => {
+        const template = this.selectedTemplate();
+        if (!template) {
+            return '';
+        }
+        if (!this.allRequiredFilled()) {
+            return '';
+        }
+        return this.interpolate(template.goalTemplate);
+    }, ...(ngDevMode ? [{ debugName: "renderedGoal" }] : /* istanbul ignore next */ []));
+    /** True when every placeholder the picked template declares has a non-empty value. */
+    allRequiredFilled = computed(() => {
+        const template = this.selectedTemplate();
+        if (!template) {
+            return false;
+        }
+        return template.requiredPlaceholders.every((key) => {
+            const value = this.valueFor(key);
+            return value !== null && value.trim().length > 0;
+        });
+    }, ...(ngDevMode ? [{ debugName: "allRequiredFilled" }] : /* istanbul ignore next */ []));
+    onSubmit() {
+        const template = this.selectedTemplate();
+        if (!template || !this.allRequiredFilled()) {
+            return;
+        }
+        this.confirmed.emit({
+            templateId: template.id,
+            jobKind: template.jobKind,
+            projectName: this.projectName().trim(),
+            primaryEntity: this.primaryEntity().trim(),
+            goal: this.interpolate(template.goalTemplate),
+        });
+    }
+    onCancel() {
+        this.cancelled.emit();
+    }
+    /** Read the signal that backs the named placeholder, or `null` if unknown. */
+    valueFor(placeholder) {
+        switch (placeholder) {
+            case 'projectName':
+                return this.projectName();
+            case 'primaryEntity':
+                return this.primaryEntity();
+            default:
+                return null;
+        }
+    }
+    interpolate(template) {
+        return template.replace(/{{\s*(\w+)\s*}}/g, (full, key) => {
+            const value = this.valueFor(key);
+            // Unknown placeholders survive verbatim so a typo in the catalogue
+            // surfaces in the preview rather than silently disappearing.
+            return value !== null ? value.trim() : full;
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AiNewAppDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AiNewAppDialogComponent, isStandalone: true, selector: "mm-ai-new-app-dialog", inputs: { templates: { classPropertyName: "templates", publicName: "templates", isSignal: true, isRequired: true, transformFunction: null }, tenantName: { classPropertyName: "tenantName", publicName: "tenantName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { confirmed: "confirmed", cancelled: "cancelled" }, ngImport: i0, template: "<div class=\"mm-ai-new-app\">\n  <header class=\"mm-ai-new-app__header\">\n    <h3 class=\"mm-ai-new-app__title\">\n      New App\n      @if (tenantName(); as tenant) {\n        <span class=\"mm-ai-new-app__tenant\"> \u00B7 {{ tenant }}</span>\n      }\n    </h3>\n    <button\n      type=\"button\"\n      class=\"mm-ai-new-app__close\"\n      (click)=\"onCancel()\"\n      aria-label=\"Dismiss\"\n    >\n      \u00D7\n    </button>\n  </header>\n\n  <div class=\"mm-ai-new-app__section\">\n    <h4 class=\"mm-ai-new-app__heading\">Template</h4>\n    <ul class=\"mm-ai-new-app__templates\" role=\"radiogroup\" aria-label=\"Template\">\n      @for (template of templates(); track template.id) {\n        <li>\n          <label\n            class=\"mm-ai-new-app__template\"\n            [class.mm-ai-new-app__template--active]=\"\n              selectedTemplateId() === template.id\n            \"\n          >\n            <input\n              type=\"radio\"\n              name=\"mm-ai-new-app-template\"\n              [value]=\"template.id\"\n              [checked]=\"selectedTemplateId() === template.id\"\n              (change)=\"selectedTemplateId.set(template.id)\"\n            />\n            <span class=\"mm-ai-new-app__template-body\">\n              <strong class=\"mm-ai-new-app__template-name\">{{ template.name }}</strong>\n              <span class=\"mm-ai-new-app__template-description\">\n                {{ template.description }}\n              </span>\n            </span>\n          </label>\n        </li>\n      }\n    </ul>\n  </div>\n\n  @if (selectedTemplate(); as template) {\n    <div class=\"mm-ai-new-app__section\">\n      <h4 class=\"mm-ai-new-app__heading\">Parameters</h4>\n      <div class=\"mm-ai-new-app__field\">\n        <label for=\"mm-ai-new-app-project-name\">Project name</label>\n        <input\n          id=\"mm-ai-new-app-project-name\"\n          type=\"text\"\n          [ngModel]=\"projectName()\"\n          (ngModelChange)=\"projectName.set($event)\"\n          placeholder=\"e.g. customer-list\"\n          autocomplete=\"off\"\n        />\n      </div>\n      <div class=\"mm-ai-new-app__field\">\n        <label for=\"mm-ai-new-app-primary-entity\">Primary entity (CK type)</label>\n        <input\n          id=\"mm-ai-new-app-primary-entity\"\n          type=\"text\"\n          [ngModel]=\"primaryEntity()\"\n          (ngModelChange)=\"primaryEntity.set($event)\"\n          placeholder=\"e.g. Customer\"\n          autocomplete=\"off\"\n        />\n      </div>\n    </div>\n\n    <div class=\"mm-ai-new-app__section\">\n      <h4 class=\"mm-ai-new-app__heading\">\n        Generated Goal <span>(this is what Claude will see)</span>\n      </h4>\n      <pre class=\"mm-ai-new-app__preview\">{{\n        renderedGoal() ||\n          'Fill in every field above to preview the Goal that will be sent.'\n      }}</pre>\n    </div>\n  }\n\n  <footer class=\"mm-ai-new-app__actions\">\n    <button\n      type=\"button\"\n      class=\"mm-ai-new-app__btn mm-ai-new-app__btn--cancel\"\n      (click)=\"onCancel()\"\n    >\n      Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"mm-ai-new-app__btn mm-ai-new-app__btn--submit\"\n      [disabled]=\"!allRequiredFilled()\"\n      (click)=\"onSubmit()\"\n    >\n      Create App Session\n    </button>\n  </footer>\n</div>\n", styles: [":host{display:block;--mm-ai-new-app-bg: #1f2227;--mm-ai-new-app-border: #2f343b;--mm-ai-new-app-text: #e6e6e6;--mm-ai-new-app-muted: #9aa0a6;--mm-ai-new-app-accent: #2ea44f;--mm-ai-new-app-accent-soft: rgba(46, 164, 79, .15);--mm-ai-new-app-cancel: #44494f;--mm-ai-new-app-code-bg: #16191d}.mm-ai-new-app{background:var(--mm-ai-new-app-bg);color:var(--mm-ai-new-app-text);border:1px solid var(--mm-ai-new-app-border);border-radius:.6rem;padding:1rem 1.25rem;width:min(40rem,100%)}.mm-ai-new-app__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.mm-ai-new-app__title{margin:0;font-size:1rem}.mm-ai-new-app__tenant{color:var(--mm-ai-new-app-muted);font-weight:400}.mm-ai-new-app__close{background:transparent;color:var(--mm-ai-new-app-muted);border:none;font-size:1.4rem;cursor:pointer;line-height:1;padding:0 .25rem}.mm-ai-new-app__close:hover{color:var(--mm-ai-new-app-text)}.mm-ai-new-app__section{margin-bottom:.75rem}.mm-ai-new-app__heading{margin:0 0 .35rem;font-size:.75rem;color:var(--mm-ai-new-app-muted);text-transform:uppercase;letter-spacing:.04em}.mm-ai-new-app__heading span{text-transform:none;letter-spacing:0;opacity:.6}.mm-ai-new-app__templates{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}.mm-ai-new-app__template{display:flex;gap:.6rem;padding:.55rem .7rem;border:1px solid var(--mm-ai-new-app-border);border-radius:.35rem;cursor:pointer;align-items:flex-start}.mm-ai-new-app__template--active{background:var(--mm-ai-new-app-accent-soft);border-color:var(--mm-ai-new-app-accent)}.mm-ai-new-app__template input[type=radio]{margin-top:.2rem}.mm-ai-new-app__template-body{display:grid;gap:.2rem}.mm-ai-new-app__template-name{font-size:.9rem}.mm-ai-new-app__template-description{font-size:.8rem;color:var(--mm-ai-new-app-muted)}.mm-ai-new-app__field{display:grid;gap:.25rem;margin-bottom:.5rem;font-size:.85rem}.mm-ai-new-app__field label{color:var(--mm-ai-new-app-muted)}.mm-ai-new-app__field input{padding:.45rem .55rem;background:var(--mm-ai-new-app-code-bg);color:inherit;border:1px solid var(--mm-ai-new-app-border);border-radius:.3rem;font-family:inherit;font-size:.9rem}.mm-ai-new-app__preview{margin:0;padding:.5rem .6rem;background:var(--mm-ai-new-app-code-bg);border-radius:.3rem;font-size:.8rem;white-space:pre-wrap;word-break:break-word;max-height:12rem;overflow-y:auto}.mm-ai-new-app__actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.75rem}.mm-ai-new-app__btn{padding:.45rem 1rem;border-radius:.3rem;font-weight:600;border:none;cursor:pointer;font-size:.85rem}.mm-ai-new-app__btn--submit{background:var(--mm-ai-new-app-accent);color:#fff}.mm-ai-new-app__btn--submit:disabled{opacity:.5;cursor:not-allowed}.mm-ai-new-app__btn--cancel{background:var(--mm-ai-new-app-cancel);color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AiNewAppDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'mm-ai-new-app-dialog', imports: [FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mm-ai-new-app\">\n  <header class=\"mm-ai-new-app__header\">\n    <h3 class=\"mm-ai-new-app__title\">\n      New App\n      @if (tenantName(); as tenant) {\n        <span class=\"mm-ai-new-app__tenant\"> \u00B7 {{ tenant }}</span>\n      }\n    </h3>\n    <button\n      type=\"button\"\n      class=\"mm-ai-new-app__close\"\n      (click)=\"onCancel()\"\n      aria-label=\"Dismiss\"\n    >\n      \u00D7\n    </button>\n  </header>\n\n  <div class=\"mm-ai-new-app__section\">\n    <h4 class=\"mm-ai-new-app__heading\">Template</h4>\n    <ul class=\"mm-ai-new-app__templates\" role=\"radiogroup\" aria-label=\"Template\">\n      @for (template of templates(); track template.id) {\n        <li>\n          <label\n            class=\"mm-ai-new-app__template\"\n            [class.mm-ai-new-app__template--active]=\"\n              selectedTemplateId() === template.id\n            \"\n          >\n            <input\n              type=\"radio\"\n              name=\"mm-ai-new-app-template\"\n              [value]=\"template.id\"\n              [checked]=\"selectedTemplateId() === template.id\"\n              (change)=\"selectedTemplateId.set(template.id)\"\n            />\n            <span class=\"mm-ai-new-app__template-body\">\n              <strong class=\"mm-ai-new-app__template-name\">{{ template.name }}</strong>\n              <span class=\"mm-ai-new-app__template-description\">\n                {{ template.description }}\n              </span>\n            </span>\n          </label>\n        </li>\n      }\n    </ul>\n  </div>\n\n  @if (selectedTemplate(); as template) {\n    <div class=\"mm-ai-new-app__section\">\n      <h4 class=\"mm-ai-new-app__heading\">Parameters</h4>\n      <div class=\"mm-ai-new-app__field\">\n        <label for=\"mm-ai-new-app-project-name\">Project name</label>\n        <input\n          id=\"mm-ai-new-app-project-name\"\n          type=\"text\"\n          [ngModel]=\"projectName()\"\n          (ngModelChange)=\"projectName.set($event)\"\n          placeholder=\"e.g. customer-list\"\n          autocomplete=\"off\"\n        />\n      </div>\n      <div class=\"mm-ai-new-app__field\">\n        <label for=\"mm-ai-new-app-primary-entity\">Primary entity (CK type)</label>\n        <input\n          id=\"mm-ai-new-app-primary-entity\"\n          type=\"text\"\n          [ngModel]=\"primaryEntity()\"\n          (ngModelChange)=\"primaryEntity.set($event)\"\n          placeholder=\"e.g. Customer\"\n          autocomplete=\"off\"\n        />\n      </div>\n    </div>\n\n    <div class=\"mm-ai-new-app__section\">\n      <h4 class=\"mm-ai-new-app__heading\">\n        Generated Goal <span>(this is what Claude will see)</span>\n      </h4>\n      <pre class=\"mm-ai-new-app__preview\">{{\n        renderedGoal() ||\n          'Fill in every field above to preview the Goal that will be sent.'\n      }}</pre>\n    </div>\n  }\n\n  <footer class=\"mm-ai-new-app__actions\">\n    <button\n      type=\"button\"\n      class=\"mm-ai-new-app__btn mm-ai-new-app__btn--cancel\"\n      (click)=\"onCancel()\"\n    >\n      Cancel\n    </button>\n    <button\n      type=\"button\"\n      class=\"mm-ai-new-app__btn mm-ai-new-app__btn--submit\"\n      [disabled]=\"!allRequiredFilled()\"\n      (click)=\"onSubmit()\"\n    >\n      Create App Session\n    </button>\n  </footer>\n</div>\n", styles: [":host{display:block;--mm-ai-new-app-bg: #1f2227;--mm-ai-new-app-border: #2f343b;--mm-ai-new-app-text: #e6e6e6;--mm-ai-new-app-muted: #9aa0a6;--mm-ai-new-app-accent: #2ea44f;--mm-ai-new-app-accent-soft: rgba(46, 164, 79, .15);--mm-ai-new-app-cancel: #44494f;--mm-ai-new-app-code-bg: #16191d}.mm-ai-new-app{background:var(--mm-ai-new-app-bg);color:var(--mm-ai-new-app-text);border:1px solid var(--mm-ai-new-app-border);border-radius:.6rem;padding:1rem 1.25rem;width:min(40rem,100%)}.mm-ai-new-app__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.mm-ai-new-app__title{margin:0;font-size:1rem}.mm-ai-new-app__tenant{color:var(--mm-ai-new-app-muted);font-weight:400}.mm-ai-new-app__close{background:transparent;color:var(--mm-ai-new-app-muted);border:none;font-size:1.4rem;cursor:pointer;line-height:1;padding:0 .25rem}.mm-ai-new-app__close:hover{color:var(--mm-ai-new-app-text)}.mm-ai-new-app__section{margin-bottom:.75rem}.mm-ai-new-app__heading{margin:0 0 .35rem;font-size:.75rem;color:var(--mm-ai-new-app-muted);text-transform:uppercase;letter-spacing:.04em}.mm-ai-new-app__heading span{text-transform:none;letter-spacing:0;opacity:.6}.mm-ai-new-app__templates{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}.mm-ai-new-app__template{display:flex;gap:.6rem;padding:.55rem .7rem;border:1px solid var(--mm-ai-new-app-border);border-radius:.35rem;cursor:pointer;align-items:flex-start}.mm-ai-new-app__template--active{background:var(--mm-ai-new-app-accent-soft);border-color:var(--mm-ai-new-app-accent)}.mm-ai-new-app__template input[type=radio]{margin-top:.2rem}.mm-ai-new-app__template-body{display:grid;gap:.2rem}.mm-ai-new-app__template-name{font-size:.9rem}.mm-ai-new-app__template-description{font-size:.8rem;color:var(--mm-ai-new-app-muted)}.mm-ai-new-app__field{display:grid;gap:.25rem;margin-bottom:.5rem;font-size:.85rem}.mm-ai-new-app__field label{color:var(--mm-ai-new-app-muted)}.mm-ai-new-app__field input{padding:.45rem .55rem;background:var(--mm-ai-new-app-code-bg);color:inherit;border:1px solid var(--mm-ai-new-app-border);border-radius:.3rem;font-family:inherit;font-size:.9rem}.mm-ai-new-app__preview{margin:0;padding:.5rem .6rem;background:var(--mm-ai-new-app-code-bg);border-radius:.3rem;font-size:.8rem;white-space:pre-wrap;word-break:break-word;max-height:12rem;overflow-y:auto}.mm-ai-new-app__actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.75rem}.mm-ai-new-app__btn{padding:.45rem 1rem;border-radius:.3rem;font-weight:600;border:none;cursor:pointer;font-size:.85rem}.mm-ai-new-app__btn--submit{background:var(--mm-ai-new-app-accent);color:#fff}.mm-ai-new-app__btn--submit:disabled{opacity:.5;cursor:not-allowed}.mm-ai-new-app__btn--cancel{background:var(--mm-ai-new-app-cancel);color:#fff}\n"] }]
+        }], propDecorators: { templates: [{ type: i0.Input, args: [{ isSignal: true, alias: "templates", required: true }] }], tenantName: [{ type: i0.Input, args: [{ isSignal: true, alias: "tenantName", required: false }] }], confirmed: [{ type: i0.Output, args: ["confirmed"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }] } });
+
 /*
  * Public API Surface of @meshmakers/octo-ai-console
  *
@@ -686,5 +1253,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AI_ADAPTER_OPTIONS, AI_SESSION_STREAM_CONNECTION_FACTORY, AiAdapterClientService, AiApprovalModalComponent, AiChatStreamComponent, AiCredentialTicketIssueComponent, AiJobStatusBadgeComponent, AiQuotaIndicatorComponent, AiSessionListComponent, AiSessionStreamService, AiToolCallComponent, provideOctoAiConsole };
+export { AI_ADAPTER_OPTIONS, AI_SESSION_STREAM_CONNECTION_FACTORY, AiAdapterClientService, AiApprovalModalComponent, AiChatStreamComponent, AiCredentialTicketIssueComponent, AiJobStatusBadgeComponent, AiNewAppDialogComponent, AiQuotaIndicatorComponent, AiSessionListComponent, AiSessionStreamService, AiToolCallComponent, provideOctoAiConsole };
 //# sourceMappingURL=meshmakers-octo-ai-console.mjs.map