@gaia-ai/addon-gaia-ui 0.16.0 → 0.16.2

package/dist/src/Entity/ticket/Screen/ticket-content-screen.d.ts

@@ -1,14 +1,15 @@
-import { type ReactNode } from 'react';
 import { type ActionItem } from '../../../Component/footer-actions/index.js';
 import { AsyncScreen, type FullScreenChrome } from '../../../Screen/async-screen.js';
-import { ReactScreen } from '../../../Screen/react-screen.js';
-import type { ScreenAction, ScreenContext, ScreenId, ScreenPresentation } from '../../../Screen/screen.js';
+import type { ScreenAction, ScreenContext, ScreenId } from '../../../Screen/screen.js';
 import type { TicketDetailDocument, UiViewMode } from '../../../types.js';
 import { type TicketContentProps } from '../Component/ticket-content/index.js';
 import { type TicketContentTab } from '../Component/ticket-content/model.js';
 import { type AssignmentLabels } from '../Component/ticket-detail/index.js';
-/** Owns ticket content load, selection and chrome; the wrapper paints React. */
-export declare abstract class TicketContentController extends AsyncScreen<TicketDetailDocument> {
+/**
+ * Owns ticket content load, selection, chrome and paint for the three ticket
+ * document routes. Route subclasses supply the tab, includes and pipe output.
+ */
+export declare abstract class TicketContentScreen extends AsyncScreen<TicketDetailDocument> {
     abstract readonly id: ScreenId;
     abstract readonly tab: TicketContentTab;
     readonly frameId = "ticket";
@@ -20,9 +21,19 @@ export declare abstract class TicketContentController extends AsyncScreen<Ticket
     private releaseStore;
     private expanded;
     protected viewMode: UiViewMode;
+    /** Visit-local: the sidebar pane and Planning document tab last chosen. */
+    private sidebarTab;
+    private documentKey;
+    private modelMemo;
     compact(): boolean;
     get document(): TicketDetailDocument | undefined;
     message(context: ScreenContext): string[] | undefined;
+    /**
+     * What the content tree is built from. Every callback is guarded by the
+     * visit it was built for — a click that lands after the route was left
+     * changes nothing — and one press that calls several of them (select, then
+     * toggle) paints once.
+     */
     contentProps(context: ScreenContext): TicketContentProps;
     reload(context: ScreenContext): void;
     enter(context: ScreenContext): void;
@@ -41,6 +52,8 @@ export declare abstract class TicketContentController extends AsyncScreen<Ticket
     actionForInput(input: string, context: ScreenContext): ScreenAction | undefined;
     receiveResult(result: unknown, context: ScreenContext): void;
     protected renderReady(document: TicketDetailDocument, context: ScreenContext): import("@opentui/core").VNode<any, import("@opentui/core").VChild[]>;
+    /** The full document reads as content inside the frame; compact is flush. */
+    protected flushBody(): boolean;
     protected chrome(context: ScreenContext): FullScreenChrome;
     protected actions(context: ScreenContext): readonly ActionItem[];
     protected notice(): string | undefined;
@@ -49,44 +62,12 @@ export declare abstract class TicketContentController extends AsyncScreen<Ticket
     protected abstract fullNonInteractive(document: TicketDetailDocument, context: ScreenContext): string[];
     private initialize;
     private syncModel;
+    /**
+     * The projection of one document, built once per document, labels and
+     * second. A keypress reads it from input handling, selection, chrome,
+     * actions and the body; parsing every body that many times per frame was
+     * most of a keypress's cost on a long ticket.
+     */
+    private modelOf;
     private selectedIndexOf;
 }
-/** Ticket-local ReactScreen adapter. Forwards AsyncScreen lifecycle by delegation. */
-export declare abstract class TicketContentScreen extends ReactScreen {
-    abstract readonly id: ScreenId;
-    readonly frameId = "ticket";
-    protected abstract readonly controller: TicketContentController;
-    get document(): TicketDetailDocument | undefined;
-    get state(): import("../../../Screen/async-screen.js").AsyncScreenState;
-    get busy(): boolean;
-    enter(context: ScreenContext): void;
-    leave(): void;
-    reset(): void;
-    handleInput(input: string, context?: ScreenContext): boolean;
-    reload(context: ScreenContext): void;
-    setLabels(labels: AssignmentLabels | undefined): void;
-    select(index: number, context: ScreenContext): boolean;
-    activate(index: number, context: ScreenContext): boolean;
-    saveState(): {
-        readonly selectedKey?: string;
-    };
-    restoreState(token: unknown): void;
-    commandForInput(input: string): string | undefined;
-    actionForInput(input: string, context: ScreenContext): ScreenAction | undefined;
-    receiveResult(result: unknown, context: ScreenContext): void;
-    renderNonInteractive(context: ScreenContext): string[];
-    present(context: ScreenContext): ScreenPresentation;
-    protected render(context: ScreenContext): ReactNode;
-    protected chrome(context: ScreenContext): {
-        selectable: number;
-        selectedIndex: number;
-        rowIds?: readonly string[];
-        cursorMode?: "select" | "scroll";
-        title?: string;
-        meta?: string;
-        header?: import("@opentui/core").VNode;
-        status?: string;
-        toast?: string;
-        actions?: readonly ActionItem[];
-    };
-}

package/dist/src/Entity/ticket/Screen/ticket-content-screen.js

@@ -1,17 +1,20 @@
-import { createElement } from 'react';
 import { actionItem, } from '../../../Component/footer-actions/index.js';
 import { copyThrough } from '../../../lib/clipboard.js';
-import { BORDER, columnNode, textNode } from '../../../lib/vnode.js';
+import { BORDER, textNode } from '../../../lib/vnode.js';
 import { AsyncScreen, } from '../../../Screen/async-screen.js';
-import { ReactScreen } from '../../../Screen/react-screen.js';
 import { TicketContent, } from '../Component/ticket-content/index.js';
 import { initialExpandedKeys, resolveSelectedKey, retainExpandedKeys, ticketContentModel, ticketContentRowId, } from '../Component/ticket-content/model.js';
 import { handleTicketCopy, ticketCopyActions, ticketEditAction, ticketHeaderTree, ticketTitleOf, } from '../Component/ticket-detail/index.js';
 import { ticketTeaserLines, ticketTeaserTree, } from '../Component/ticket-teaser/index.js';
 import { ticketDetailInputContext } from '../Data/input.js';
 import { loadTicketView, readTicket, refreshTicket, saveTicket, ticketLoaded, watchTicket, } from '../Data/store.js';
-/** Owns ticket content load, selection and chrome; the wrapper paints React. */
-export class TicketContentController extends AsyncScreen {
+/** Overview width when the context carries none — a pipe has no terminal. */
+const DEFAULT_COLUMNS = 80;
+/**
+ * Owns ticket content load, selection, chrome and paint for the three ticket
+ * document routes. Route subclasses supply the tab, includes and pipe output.
+ */
+export class TicketContentScreen extends AsyncScreen {
     frameId = 'ticket';
     selectedKey;
     initializedKey;
@@ -20,6 +23,10 @@ export class TicketContentController extends AsyncScreen {
     releaseStore;
     expanded = new Set();
     viewMode = 'full';
+    /** Visit-local: the sidebar pane and Planning document tab last chosen. */
+    sidebarTab;
+    documentKey;
+    modelMemo;
     compact() {
         return this.viewMode !== 'full';
     }
@@ -29,28 +36,59 @@ export class TicketContentController extends AsyncScreen {
     message(context) {
         return this.noticeRows(context);
     }
+    /**
+     * What the content tree is built from. Every callback is guarded by the
+     * visit it was built for — a click that lands after the route was left
+     * changes nothing — and one press that calls several of them (select, then
+     * toggle) paints once.
+     */
     contentProps(context) {
         const model = this.syncModel(context);
         const selectedKey = this.selectedKey;
+        let drawQueued = false;
+        const live = (action) => {
+            if (!context.isActive())
+                return;
+            action();
+            if (drawQueued)
+                return;
+            drawQueued = true;
+            queueMicrotask(() => {
+                drawQueued = false;
+                context.requestDraw();
+            });
+        };
         return {
+            id: 'ticket-content',
             model,
             tab: this.tab,
             ...(selectedKey === undefined ? {} : { selectedKey }),
             expandedKeys: this.expanded,
-            select: (key) => {
+            terminalColumns: context.terminalColumns ?? DEFAULT_COLUMNS,
+            ...(this.sidebarTab === undefined ? {} : { sidebarTab: this.sidebarTab }),
+            ...(this.documentKey === undefined
+                ? {}
+                : { documentKey: this.documentKey }),
+            onSidebarTab: (tab) => live(() => {
+                this.sidebarTab = tab;
+            }),
+            onDocumentTab: (key) => live(() => {
+                this.documentKey = key;
+            }),
+            select: (key) => live(() => {
                 this.selectedKey = key;
-                context.requestDraw();
-            },
-            toggle: (key) => {
+            }),
+            toggle: (key) => live(() => {
                 const next = new Set(this.expanded);
                 if (next.has(key))
                     next.delete(key);
                 else
                     next.add(key);
                 this.expanded = next;
-                context.requestDraw();
-            },
+            }),
             activateProperty: (item) => {
+                if (!context.isActive())
+                    return;
                 if (item.ticketId !== undefined) {
                     context.navigate?.('ticket.detail', { ticketId: item.ticketId });
                 }
@@ -69,6 +107,8 @@ export class TicketContentController extends AsyncScreen {
     }
     enter(context) {
         this.releaseStore?.();
+        this.sidebarTab = undefined;
+        this.documentKey = undefined;
         super.enter(context);
         if (context.contexts?.has(ticketDetailInputContext)) {
             const document = readTicket(context);
@@ -195,7 +235,11 @@ export class TicketContentController extends AsyncScreen {
         this.initialize(document, context);
         return this.viewMode !== 'full'
             ? ticketTeaserTree(document, this.viewMode)
-            : columnNode('ticket-controller-placeholder');
+            : TicketContent(this.contentProps(context));
+    }
+    /** The full document reads as content inside the frame; compact is flush. */
+    flushBody() {
+        return this.viewMode !== 'full';
     }
     chrome(context) {
         const document = this.document;
@@ -247,6 +291,9 @@ export class TicketContentController extends AsyncScreen {
         this.releaseStore?.();
         this.releaseStore = undefined;
         super.reset();
+        this.modelMemo = undefined;
+        this.sidebarTab = undefined;
+        this.documentKey = undefined;
         this.selectedKey = undefined;
         this.initializedKey = undefined;
         this.labels = undefined;
@@ -264,7 +311,7 @@ export class TicketContentController extends AsyncScreen {
     }
     initialize(document, context) {
         const identity = document.data?.id ?? document;
-        const model = ticketContentModel(document, this.tab, this.labels, context.nowSeconds?.() ?? Math.floor(Date.now() / 1000));
+        const model = this.modelOf(document, context);
         if (this.initializedKey === identity) {
             this.selectedKey = resolveSelectedKey(model.selectableKeys, this.selectedKey);
             this.expanded = retainExpandedKeys(model.selectableKeys, this.expanded);
@@ -278,7 +325,25 @@ export class TicketContentController extends AsyncScreen {
     syncModel(context) {
         const document = this.document ?? {};
         this.initialize(document, context);
-        return ticketContentModel(document, this.tab, this.labels, context.nowSeconds?.() ?? Math.floor(Date.now() / 1000));
+        return this.modelOf(document, context);
+    }
+    /**
+     * The projection of one document, built once per document, labels and
+     * second. A keypress reads it from input handling, selection, chrome,
+     * actions and the body; parsing every body that many times per frame was
+     * most of a keypress's cost on a long ticket.
+     */
+    modelOf(document, context) {
+        const now = context.nowSeconds?.() ?? Math.floor(Date.now() / 1000);
+        const memo = this.modelMemo;
+        if (memo !== undefined &&
+            memo.document === document &&
+            memo.labels === this.labels &&
+            memo.now === now)
+            return memo.model;
+        const model = ticketContentModel(document, this.tab, this.labels, now);
+        this.modelMemo = { document, labels: this.labels, now, model };
+        return model;
     }
     selectedIndexOf(keys) {
         if (this.selectedKey === undefined)
@@ -287,76 +352,3 @@ export class TicketContentController extends AsyncScreen {
         return index < 0 ? 0 : index;
     }
 }
-/** Ticket-local ReactScreen adapter. Forwards AsyncScreen lifecycle by delegation. */
-export class TicketContentScreen extends ReactScreen {
-    frameId = 'ticket';
-    get document() {
-        return this.controller.document;
-    }
-    get state() {
-        return this.controller.state;
-    }
-    get busy() {
-        return this.controller.busy;
-    }
-    // ReactScreen.enter only requestDraw; load/store guards stay on the controller.
-    enter(context) {
-        this.controller.enter(context);
-    }
-    leave() {
-        this.controller.leave();
-    }
-    reset() {
-        this.controller.reset();
-    }
-    handleInput(input, context) {
-        if (super.handleInput(input))
-            return true;
-        return context ? this.controller.handleInput(input, context) : false;
-    }
-    reload(context) {
-        this.controller.reload(context);
-    }
-    setLabels(labels) {
-        this.controller.setLabels(labels);
-    }
-    select(index, context) {
-        return this.controller.select(index, context);
-    }
-    activate(index, context) {
-        return this.controller.activate(index, context);
-    }
-    saveState() {
-        return this.controller.saveState();
-    }
-    restoreState(token) {
-        this.controller.restoreState(token);
-    }
-    commandForInput(input) {
-        return this.controller.commandForInput(input);
-    }
-    actionForInput(input, context) {
-        return this.controller.actionForInput(input, context);
-    }
-    receiveResult(result, context) {
-        this.controller.receiveResult(result, context);
-    }
-    renderNonInteractive(context) {
-        return this.controller.renderNonInteractive(context);
-    }
-    present(context) {
-        if (this.controller.compact())
-            return this.controller.present(context);
-        return super.present(context);
-    }
-    render(context) {
-        const message = this.controller.message(context);
-        return message
-            ? createElement('text', { wrapMode: 'word' }, message.join('\n'))
-            : createElement(TicketContent, this.controller.contentProps(context));
-    }
-    chrome(context) {
-        const { body, reactBody, ...chrome } = this.controller.present(context);
-        return chrome;
-    }
-}

package/dist/src/Entity/ticket/Screen/ticket-detail.d.ts

@@ -1,17 +1,9 @@
 import type { ScreenContext } from '../../../Screen/screen.js';
 import type { TicketDetailDocument } from '../../../types.js';
-import { TicketContentController, TicketContentScreen } from './ticket-content-screen.js';
+import { TicketContentScreen } from './ticket-content-screen.js';
 export type { TicketDetailInput } from '../Data/input.js';
 export { ticketDetailInputContext } from '../Data/input.js';
-/** Owns the ticket's overview view and its interaction state. */
-declare class TicketOverviewController extends TicketContentController {
-    readonly id: string;
-    readonly tab = "overview";
-    protected readonly includes: string[];
-    protected renderLoading(): string[];
-    protected fullNonInteractive(document: TicketDetailDocument, context: ScreenContext): string[];
-}
-/** Public Overview route: ReactScreen wrapper around the overview controller. */
+/** Public Overview route: the ticket's overview view and its interaction state. */
 export declare class TicketDetailScreen extends TicketContentScreen {
     static readonly route: {
         id: string;
@@ -34,5 +26,8 @@ export declare class TicketDetailScreen extends TicketContentScreen {
         context: (params: Readonly<Record<string, string>>, state: unknown, base: import("../../../Routing/context.js").ContextBag) => import("../../../Routing/context.js").ContextBag;
     };
     readonly id: string;
-    protected readonly controller: TicketOverviewController;
+    readonly tab = "overview";
+    protected readonly includes: string[];
+    protected renderLoading(): string[];
+    protected fullNonInteractive(document: TicketDetailDocument, context: ScreenContext): string[];
 }

package/dist/src/Entity/ticket/Screen/ticket-detail.js

@@ -1,7 +1,7 @@
 import { flattenSections } from '../../../Component/section-list/index.js';
 import { detailSections, sectionsForTab, } from '../Component/ticket-detail/index.js';
 import { ticketInputContext } from '../Data/input.js';
-import { TicketContentController, TicketContentScreen, } from './ticket-content-screen.js';
+import { TicketContentScreen } from './ticket-content-screen.js';
 export { ticketDetailInputContext } from '../Data/input.js';
 const INCLUDES = [
     'labels',
@@ -18,23 +18,7 @@ const INCLUDES = [
     'sub_tickets',
     'referenced_tickets',
 ];
-/** Owns the ticket's overview view and its interaction state. */
-class TicketOverviewController extends TicketContentController {
-    id = TicketDetailScreen.route.id;
-    tab = 'overview';
-    includes = INCLUDES;
-    renderLoading() {
-        return ['Loading ticket…'];
-    }
-    fullNonInteractive(document, context) {
-        const nowSeconds = context.nowSeconds?.() ?? Math.floor(Date.now() / 1000);
-        return flattenSections([
-            ...detailSections(document, this.labels, nowSeconds).filter((section) => section.heading === 'State' || section.heading === 'Labels'),
-            ...sectionsForTab(document, 0, this.labels, nowSeconds),
-        ]).lines;
-    }
-}
-/** Public Overview route: ReactScreen wrapper around the overview controller. */
+/** Public Overview route: the ticket's overview view and its interaction state. */
 export class TicketDetailScreen extends TicketContentScreen {
     static route = {
         id: 'ticket.detail',
@@ -49,5 +33,16 @@ export class TicketDetailScreen extends TicketContentScreen {
         context: ticketInputContext,
     };
     id = TicketDetailScreen.route.id;
-    controller = new TicketOverviewController();
+    tab = 'overview';
+    includes = INCLUDES;
+    renderLoading() {
+        return ['Loading ticket…'];
+    }
+    fullNonInteractive(document, context) {
+        const nowSeconds = context.nowSeconds?.() ?? Math.floor(Date.now() / 1000);
+        return flattenSections([
+            ...detailSections(document, this.labels, nowSeconds).filter((section) => section.heading === 'State' || section.heading === 'Labels'),
+            ...sectionsForTab(document, 0, this.labels, nowSeconds),
+        ]).lines;
+    }
 }

package/dist/src/Entity/ticket/Screen/ticket-filter-bar.js

@@ -105,18 +105,11 @@ export class TicketFilterBar {
             }
             return false;
         }
-        if (!this.disable.has('search') && input === '/') {
-            return true;
-        }
         return false;
     }
     applyTo(row) {
-        const query = this.host.criteria.query.toLocaleLowerCase();
-        return ((!query ||
-            row.identifier.toLocaleLowerCase().includes(query) ||
-            row.title.toLocaleLowerCase().includes(query)) &&
-            (this.host.criteria.state === null ||
-                row.state === this.host.criteria.state) &&
+        return ((this.host.criteria.state === null ||
+            row.state === this.host.criteria.state) &&
             (this.host.criteria.closed === null ||
                 row.closed === this.host.criteria.closed) &&
             (this.host.criteria.parent === null ||

package/dist/src/Entity/ticket/Screen/ticket-planning.d.ts

@@ -1,15 +1,7 @@
 import type { ScreenContext } from '../../../Screen/screen.js';
 import type { TicketDetailDocument } from '../../../types.js';
-import { TicketContentController, TicketContentScreen } from './ticket-content-screen.js';
-/** Owns the ticket's planning view and its interaction state. */
-declare class TicketPlanningController extends TicketContentController {
-    readonly id: string;
-    readonly tab = "planning";
-    protected readonly includes: string[];
-    protected renderLoading(): string[];
-    protected fullNonInteractive(document: TicketDetailDocument, context: ScreenContext): string[];
-}
-/** Public Planning route: ReactScreen wrapper around the planning controller. */
+import { TicketContentScreen } from './ticket-content-screen.js';
+/** Public Planning route: the ticket's planning view and its interaction state. */
 export declare class TicketPlanningScreen extends TicketContentScreen {
     static readonly route: {
         id: string;
@@ -27,6 +19,8 @@ export declare class TicketPlanningScreen extends TicketContentScreen {
         context: (params: Readonly<Record<string, string>>, state: unknown, base: import("../../../Routing/context.js").ContextBag) => import("../../../Routing/context.js").ContextBag;
     };
     readonly id: string;
-    protected readonly controller: TicketPlanningController;
+    readonly tab = "planning";
+    protected readonly includes: string[];
+    protected renderLoading(): string[];
+    protected fullNonInteractive(document: TicketDetailDocument, context: ScreenContext): string[];
 }
-export {};

package/dist/src/Entity/ticket/Screen/ticket-planning.js

@@ -1,10 +1,18 @@
 import { flattenSections } from '../../../Component/section-list/index.js';
 import { ticketContentModel } from '../Component/ticket-content/model.js';
 import { ticketInputContext } from '../Data/input.js';
-import { TicketContentController, TicketContentScreen, } from './ticket-content-screen.js';
+import { TicketContentScreen } from './ticket-content-screen.js';
 const INCLUDES = ['comments', 'labels'];
-/** Owns the ticket's planning view and its interaction state. */
-class TicketPlanningController extends TicketContentController {
+/** Public Planning route: the ticket's planning view and its interaction state. */
+export class TicketPlanningScreen extends TicketContentScreen {
+    static route = {
+        id: 'ticket.planning',
+        path: '/tickets/:ticketId/planning',
+        parent: 'project.tickets',
+        tab: { id: 'planning', label: 'Planning', scope: 'ticket', weight: 15 },
+        fallback: { routeId: 'my.work' },
+        context: ticketInputContext,
+    };
     id = TicketPlanningScreen.route.id;
     tab = 'planning';
     includes = INCLUDES;
@@ -19,16 +27,3 @@ class TicketPlanningController extends TicketContentController {
         }))).lines;
     }
 }
-/** Public Planning route: ReactScreen wrapper around the planning controller. */
-export class TicketPlanningScreen extends TicketContentScreen {
-    static route = {
-        id: 'ticket.planning',
-        path: '/tickets/:ticketId/planning',
-        parent: 'project.tickets',
-        tab: { id: 'planning', label: 'Planning', scope: 'ticket', weight: 15 },
-        fallback: { routeId: 'my.work' },
-        context: ticketInputContext,
-    };
-    id = TicketPlanningScreen.route.id;
-    controller = new TicketPlanningController();
-}

package/dist/src/Entity/ticket/Screen/ticket-react-markdown.d.ts

@@ -1,7 +1,8 @@
-import { ReactScreen } from '../../../Screen/react-screen.js';
+import { type VNode } from '@opentui/core';
+import { AsyncScreen, type FullScreenChrome } from '../../../Screen/async-screen.js';
 import type { ScreenContext } from '../../../Screen/screen.js';
 /** A separate document screen using the kernel's existing scrolling viewport. */
-export declare class TicketReactMarkdownScreen extends ReactScreen {
+export declare class TicketReactMarkdownScreen extends AsyncScreen<true> {
     static readonly route: {
         id: string;
         path: string;
@@ -19,10 +20,11 @@ export declare class TicketReactMarkdownScreen extends ReactScreen {
     };
     readonly id: string;
     readonly frameId = "ticket";
-    protected render(context: ScreenContext): import("react").ReactNode;
-    protected chrome(context: ScreenContext): {
-        title: string;
-        header: import("@opentui/core").VNode<any, import("@opentui/core").VChild[]>;
-    };
+    protected load(): Promise<true>;
+    enter(context: ScreenContext): void;
+    protected renderLoading(): string[];
+    protected flushBody(): boolean;
+    protected renderReady(_data: true, context: ScreenContext): VNode;
+    protected chrome(context: ScreenContext): FullScreenChrome;
     renderNonInteractive(context: ScreenContext): string[];
 }

package/dist/src/Entity/ticket/Screen/ticket-react-markdown.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "@opentui/react/jsx-runtime";
-import { useTerminalDimensions } from '@opentui/react';
-import { ReactScreen } from '../../../Screen/react-screen.js';
-import { Markdown } from '../../../Vendor/termcn/ui/markdown.js';
+import { BoxRenderable, h } from '@opentui/core';
+import { Markdown } from '../../../Component/markdown/index.js';
+import { FOREGROUND, paragraphNode, plainRun } from '../../../lib/vnode.js';
+import { AsyncScreen, } from '../../../Screen/async-screen.js';
 import { ticketHeaderTree, ticketTitleOf, } from '../Component/ticket-detail/index.js';
 import { ticketInputContext } from '../Data/input.js';
 import { readTicket } from '../Data/store.js';
+const ID = 'ticket-markdown-demo';
 function ticketDescription(context) {
     const description = readTicket(context).data?.attributes?.description;
     if (typeof description === 'string')
@@ -24,10 +25,10 @@ const EXAMPLE = [
     '> The native ticket header and tabs stay visible while the document scrolls.',
     '',
     '- **Strong emphasis**, *italic text* and `inline code`.',
-    '- A [termcn link](https://termcn.dev) remains visible with its destination.',
+    '- A [documentation link](https://example.test/docs) remains visible with its destination.',
     '',
     '```ts',
-    'const screen = "ReactScreen";',
+    'const screen = "NativeScreen";',
     'render({ statistics: true, markdown: true });',
     '```',
     '',
@@ -44,12 +45,8 @@ const EXAMPLE = [
     '',
     'You reached the bottom. Scroll back up to the actual ticket description.',
 ].join('\n');
-function Preview({ description }) {
-    const { width } = useTerminalDimensions();
-    return (_jsxs("box", { flexDirection: "column", gap: 1, children: [_jsx("text", { children: "Markdown preview \u00B7 \u2191\u2193 / j,k / mouse wheel: scroll" }), _jsx(Markdown, { width: Math.max(16, width - 12), children: `# Ticket description\n\n${description}\n\n---\n\n${EXAMPLE}` })] }));
-}
 /** A separate document screen using the kernel's existing scrolling viewport. */
-export class TicketReactMarkdownScreen extends ReactScreen {
+export class TicketReactMarkdownScreen extends AsyncScreen {
     static route = {
         id: 'ticket.react-markdown',
         path: '/tickets/:ticketId/react-markdown',
@@ -65,8 +62,34 @@ export class TicketReactMarkdownScreen extends ReactScreen {
     };
     id = TicketReactMarkdownScreen.route.id;
     frameId = 'ticket';
-    render(context) {
-        return _jsx(Preview, { description: ticketDescription(context) });
+    load() {
+        return Promise.resolve(true);
+    }
+    enter(context) {
+        super.enter(context);
+        // The document is the ticket already in context: ready at once.
+        if (this.state !== 'ready') {
+            this.replaceReady(true);
+            context.requestDraw();
+        }
+    }
+    renderLoading() {
+        return ['Loading Markdown preview…'];
+    }
+    flushBody() {
+        return false;
+    }
+    renderReady(_data, context) {
+        const width = context.terminalColumns ?? 80;
+        return h(BoxRenderable, { id: ID, flexDirection: 'column', gap: 1 }, paragraphNode({
+            id: `${ID}-hint`,
+            runs: [plainRun('Markdown preview · ↑↓ / j,k / mouse wheel: scroll')],
+            fg: FOREGROUND,
+        }), Markdown({
+            id: `${ID}-document`,
+            width: Math.max(16, width - 12),
+            source: `# Ticket description\n\n${ticketDescription(context)}\n\n---\n\n${EXAMPLE}`,
+        }));
     }
     chrome(context) {
         const document = readTicket(context);