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

package/dist/src/Entity/ticket/Component/ticket-content/index.js

@@ -1,29 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@opentui/react/jsx-runtime";
-// biome-ignore-all lint/suspicious/noArrayIndexKey: Painted body rows are identified by their positions in an already-parsed line list.
-/* @jsxImportSource @opentui/react */
-import { useTerminalDimensions } from '@opentui/react';
-import { useEffect, useState } from 'react';
-import { markdownLineFromStyled } from '../../../../Component/markdown/index.js';
+import { BoxRenderable, h } from '@opentui/core';
+import { Card } from '../../../../Component/card/index.js';
+import { Divider } from '../../../../Component/divider/index.js';
+import { HeatMap } from '../../../../Component/heat-map/index.js';
+import { KeyValue, } from '../../../../Component/key-value/index.js';
+import { HeadlineMarkdown, MarkdownLines, } from '../../../../Component/markdown/index.js';
 import { lineText, } from '../../../../Component/section-list/index.js';
-import { useTheme } from '../../../../Vendor/termcn/hooks/use-theme.js';
-import { Card } from '../../../../Vendor/termcn/ui/card.js';
-import { Divider } from '../../../../Vendor/termcn/ui/divider.js';
-import { HeatMap } from '../../../../Vendor/termcn/ui/heat-map.js';
-import { KeyValue, } from '../../../../Vendor/termcn/ui/key-value.js';
-import { HeadlineMarkdown, MarkdownLines, } from '../../../../Vendor/termcn/ui/markdown.js';
+import { BORDER, FOREGROUND, FOREGROUND_ACTIVE, FOREGROUND_HIGHLIGHT, } from '../../../../lib/theme.js';
+import { BOLD, DIM, paragraphNode, plainRun, pressHandler, } from '../../../../lib/vnode.js';
 import { documentTabLabel, ticketContentRowId, } from './model.js';
-const isCells = (line) => typeof line !== 'string' && 'cells' in line;
-const isStyled = (line) => typeof line !== 'string' && 'runs' in line;
-const TECHNICAL_KEY = 'section:Technical details';
-const LINKS_KEY = 'section:Links';
-const WIDE_OVERVIEW_COLUMNS = 100;
 // Links are NOT here: a URL cannot fit the narrow sidebar without wrapping, so
-// they render full-width in the left column (see LinksSection) instead.
-const SIDEBAR_TABS = [
+// they render full-width in the left column (see linksSection) instead.
+export const SIDEBAR_TABS = [
     { id: 'details', label: 'Details' },
     { id: 'stats', label: 'Stats' },
     { id: 'related', label: 'Related' },
 ];
+/** The pane a sidebar opens on: Stats once the ticket is done, else Details. */
+export const defaultSidebarTab = (sidebar) => sidebar.showMetrics ? 'stats' : 'details';
+const isCells = (line) => typeof line !== 'string' && 'cells' in line;
+const isStyled = (line) => typeof line !== 'string' && 'runs' in line;
+const TECHNICAL_KEY = 'section:Technical details';
+const LINKS_KEY = 'section:Links';
+const WIDE_OVERVIEW_COLUMNS = 100;
+const column = (id, props, ...children) => h(BoxRenderable, { id, flexDirection: 'column', ...props }, ...children);
 const kvItems = (lines) => {
     const items = [];
     for (const line of lines) {
@@ -57,191 +56,366 @@ const linkItems = (lines) => {
     }
     return items;
 };
-const Lines = ({ lines, emphasis = false, }) => {
-    const theme = useTheme();
+/** Plain and cell rows as wrapped paragraphs, styled runs as Markdown. */
+const lines = (id, source, emphasis) => {
     const parts = [];
     let styled = [];
     const flushStyled = () => {
         if (styled.length === 0)
             return;
-        parts.push(_jsx(MarkdownLines, { lines: styled, ...(emphasis ? { emphasis: true } : {}) }, parts.length));
+        parts.push(MarkdownLines({ id: `${id}-${parts.length}`, lines: styled, emphasis }));
         styled = [];
     };
-    for (const line of lines) {
+    for (const line of source) {
         if (typeof line === 'string' || isCells(line)) {
             flushStyled();
             const text = typeof line === 'string' ? line : lineText(line);
-            parts.push(_jsx("text", { width: "100%", wrapMode: "word", flexShrink: 0, fg: emphasis ? theme.colors.primary : theme.colors.foreground, children: emphasis ? _jsx("b", { children: text }) : text }, parts.length));
+            parts.push(paragraphNode({
+                id: `${id}-${parts.length}`,
+                runs: [plainRun(text, emphasis ? BOLD : 0)],
+                fg: emphasis ? FOREGROUND_HIGHLIGHT : FOREGROUND,
+                width: '100%',
+                flexShrink: 0,
+            }));
             continue;
         }
         if (isStyled(line))
-            styled.push(markdownLineFromStyled(line));
+            styled.push(line);
     }
     flushStyled();
-    return (_jsx("box", { flexDirection: "column", width: "100%", children: parts }));
+    return column(id, { width: '100%' }, ...parts);
 };
+/**
+ * A press on a region that does nothing. A selectable entry's row id sits on
+ * an ENCLOSING node the kernel binds clicks to, so an area that must stay
+ * inert has to consume its own press rather than let it bubble there.
+ */
+const INERT = () => { };
 const activate = (entry, select, toggle) => {
     select(entry.key);
     if (entry.expandable)
         toggle(entry.key);
 };
 const visibleLines = (entry, expandedKeys) => expandedKeys.has(entry.key) ? entry.expanded : entry.collapsed;
-const TechnicalBody = ({ entry }) => {
-    const theme = useTheme();
-    return (_jsx(KeyValue, { items: kvItems(entry.expanded), keyColor: theme.colors.foreground, valueColor: theme.colors.primary }));
-};
-const SectionBody = ({ entry, expandedKeys, }) => {
-    const theme = useTheme();
-    if (entry.key === TECHNICAL_KEY) {
-        return _jsx(TechnicalBody, { entry: entry });
-    }
-    if (entry.key === LINKS_KEY) {
-        return (_jsx(KeyValue, { items: linkItems(visibleLines(entry, expandedKeys)), keyColor: theme.colors.foreground, valueColor: theme.colors.primary }));
-    }
-    return (_jsx(Lines, { lines: visibleLines(entry, expandedKeys), emphasis: entry.key.startsWith('section:') }));
+const sectionBody = (id, entry, expandedKeys) => {
+    if (entry.key === TECHNICAL_KEY)
+        return KeyValue({
+            id,
+            items: kvItems(entry.expanded),
+            keyColor: FOREGROUND,
+            valueColor: FOREGROUND_HIGHLIGHT,
+        });
+    if (entry.key === LINKS_KEY)
+        return KeyValue({
+            id,
+            items: linkItems(visibleLines(entry, expandedKeys)),
+            keyColor: FOREGROUND,
+            valueColor: FOREGROUND_HIGHLIGHT,
+        });
+    return lines(id, visibleLines(entry, expandedKeys), entry.key.startsWith('section:'));
 };
-const HeadlineContent = ({ tabs, activeId, selected, onTab, children, }) => {
-    const theme = useTheme();
+/** A body that activates its entry while collapsed, and nothing once open. */
+const entryBody = (id, entry, props, layout) => {
+    const bodyActivates = entry.expandable && !props.expandedKeys.has(entry.key);
+    return h(BoxRenderable, {
+        id,
+        flexDirection: 'column',
+        width: '100%',
+        ...layout,
+        onMouseDown: pressHandler(bodyActivates
+            ? () => activate(entry, props.select, props.toggle)
+            : undefined),
+    }, sectionBody(`${id}-content`, entry, props.expandedKeys));
+};
+const tabLabel = (id, label, active, fg, onPress) => paragraphNode({
+    id,
+    runs: [plainRun(active ? `[${label}]` : ` ${label} `, active ? BOLD : 0)],
+    fg,
+    onMouseDown: onPress,
+});
+const headlineContent = (id, tabs, activeId, selected, onTab, body) => {
     const many = tabs.length > 1;
-    return (_jsxs("box", { flexDirection: "column", width: "100%", flexGrow: 1, flexShrink: 1, marginTop: 1, children: [_jsx("box", { id: ticketContentRowId(activeId), flexDirection: "row", width: "100%", flexShrink: 0, gap: 1, children: many ? (tabs.map((tab) => (
-                // biome-ignore lint/a11y/noStaticElementInteractions: OpenTUI terminal node; inner tabs are mouse-driven.
-                _jsx("text", { fg: tab.id === activeId
-                        ? selected
-                            ? theme.colors.primaryForeground
-                            : theme.colors.primary
-                        : theme.colors.foreground, onMouseDown: () => onTab(tab.id), children: tab.id === activeId ? (_jsx("b", { children: `[${tab.label}]` })) : (` ${tab.label} `) }, tab.id)))) : (
-                // biome-ignore lint/a11y/noStaticElementInteractions: OpenTUI terminal node; keyboard selection stays on the screen.
-                _jsx("text", { fg: selected ? theme.colors.primaryForeground : theme.colors.primary, onMouseDown: () => onTab(tabs[0]?.id ?? activeId), children: _jsx("b", { children: tabs[0]?.label ?? '' }) })) }), _jsx(Divider, { color: selected ? theme.colors.primary : theme.colors.border }), _jsx("box", { flexDirection: "column", width: "100%", flexGrow: 1, flexShrink: 1, paddingLeft: 1, marginTop: 1, children: children })] }));
-};
-const OverviewDocuments = ({ documents, expandedKeys, select, toggle, }) => {
-    return (_jsx("box", { flexDirection: "column", width: "100%", flexGrow: 1, flexShrink: 1, marginTop: 1, children: documents.map((entry) => {
-            const expanded = expandedKeys.has(entry.key);
-            const bodyActivates = entry.expandable && !expanded;
-            return (_jsx(HeadlineMarkdown, { headline: documentTabLabel(entry.title), id: ticketContentRowId(entry.key), onMouseDown: () => activate(entry, select, toggle), paddingBottom: 1, paddingLeft: 1, children: _jsx("box", { flexDirection: "column", width: "100%", flexShrink: 0, ...(bodyActivates
-                        ? { onMouseDown: () => activate(entry, select, toggle) }
-                        : {}), children: _jsx(SectionBody, { entry: entry, expandedKeys: expandedKeys }) }) }, entry.key));
-        }) }));
-};
-const DocumentPane = ({ documents, selectedKey, expandedKeys, select, toggle, }) => {
-    const descriptionKey = documents.find((entry) => entry.key === 'section:Description')?.key ??
-        documents[0]?.key ??
-        '';
-    const [tab, setTab] = useState(selectedKey !== undefined &&
-        documents.some((entry) => entry.key === selectedKey)
-        ? selectedKey
-        : descriptionKey);
-    useEffect(() => {
-        if (selectedKey !== undefined &&
-            documents.some((entry) => entry.key === selectedKey)) {
-            setTab(selectedKey);
-        }
-    }, [documents, selectedKey]);
-    const activeKey = documents.some((entry) => entry.key === tab)
-        ? tab
-        : descriptionKey;
+    return column(id, { width: '100%', flexGrow: 1, flexShrink: 1, marginTop: 1 }, h(BoxRenderable, {
+        id: ticketContentRowId(activeId),
+        flexDirection: 'row',
+        width: '100%',
+        flexShrink: 0,
+    }, h(BoxRenderable, {
+        id: `${id}-tabs`,
+        flexDirection: 'row',
+        width: '100%',
+        flexShrink: 0,
+        gap: 1,
+        onMouseDown: pressHandler(INERT),
+    }, ...(many
+        ? tabs.map((tab) => tabLabel(`${id}-tab-${tab.id}`, tab.label, tab.id === activeId, tab.id === activeId
+            ? selected
+                ? FOREGROUND_ACTIVE
+                : FOREGROUND_HIGHLIGHT
+            : FOREGROUND, () => onTab(tab.id)))
+        : [
+            paragraphNode({
+                id: `${id}-tab-only`,
+                runs: [plainRun(tabs[0]?.label ?? '', BOLD)],
+                fg: selected ? FOREGROUND_ACTIVE : FOREGROUND_HIGHLIGHT,
+                onMouseDown: () => onTab(tabs[0]?.id ?? activeId),
+            }),
+        ]))), Divider({
+        id: `${id}-divider`,
+        color: selected ? FOREGROUND_HIGHLIGHT : BORDER,
+    }), column(`${id}-pane`, {
+        width: '100%',
+        flexGrow: 1,
+        flexShrink: 1,
+        paddingLeft: 1,
+        marginTop: 1,
+    }, body));
+};
+const overviewDocuments = (id, documents, props) => column(id, { width: '100%', flexGrow: 1, flexShrink: 1, marginTop: 1 }, ...documents.map((entry) => HeadlineMarkdown({
+    id: `${id}-${entry.key}`,
+    headline: documentTabLabel(entry.title),
+    headlineId: ticketContentRowId(entry.key),
+    onMouseDown: () => activate(entry, props.select, props.toggle),
+    paddingBottom: 1,
+    paddingLeft: 1,
+    children: [
+        entryBody(`${id}-${entry.key}-entry`, entry, props, {
+            flexShrink: 0,
+        }),
+    ],
+})));
+/** The Planning pane's active document: the selection, the visit's tab, or Description. */
+export const activeDocumentKey = (documents, selectedKey, documentKey) => {
+    const isDocument = (key) => key !== undefined && documents.some((entry) => entry.key === key);
+    if (isDocument(selectedKey))
+        return selectedKey;
+    if (isDocument(documentKey))
+        return documentKey;
+    return (documents.find((entry) => entry.key === 'section:Description')?.key ??
+        documents[0]?.key);
+};
+const documentPane = (id, documents, props) => {
+    const activeKey = activeDocumentKey(documents, props.selectedKey, props.documentKey);
     const active = documents.find((entry) => entry.key === activeKey) ?? documents[0];
     if (active === undefined)
-        return null;
-    const expanded = expandedKeys.has(active.key);
-    const bodyActivates = active.expandable && !expanded;
-    return (_jsx(HeadlineContent, { tabs: documents.map((entry) => ({
-            id: entry.key,
-            label: documentTabLabel(entry.title),
-        })), activeId: active.key, selected: selectedKey === active.key, onTab: (id) => {
-            setTab(id);
-            if (id === active.key)
-                toggle(id);
-            else
-                select(id);
-        }, children: _jsx("box", { flexDirection: "column", width: "100%", flexGrow: 1, flexShrink: 1, ...(bodyActivates
-                ? { onMouseDown: () => activate(active, select, toggle) }
-                : {}), children: _jsx(SectionBody, { entry: active, expandedKeys: expandedKeys }) }) }));
-};
-const EntryCard = ({ entry, selected, expandedKeys, select, toggle, }) => {
-    const theme = useTheme();
-    return (_jsxs(Card, { id: ticketContentRowId(entry.key), width: "100%", borderColor: selected ? theme.colors.primary : theme.colors.border, children: [_jsxs("box", { flexDirection: "column", width: "100%", flexShrink: 0, paddingBottom: 1, onMouseDown: () => activate(entry, select, toggle), children: [_jsx("text", { fg: theme.colors.foreground, children: _jsx("b", { children: entry.title }) }), entry.metadata !== undefined ? (_jsx("text", { fg: theme.colors.mutedForeground, children: entry.metadata })) : null] }), _jsx(SectionBody, { entry: entry, expandedKeys: expandedKeys })] }));
-};
-const Properties = ({ items, activateProperty, }) => {
-    const theme = useTheme();
-    return (_jsx(KeyValue, { items: items.map((item) => {
-            const linked = item.ticketId !== undefined || item.href !== undefined;
-            return {
-                key: item.key,
-                value: linked ? _jsx("u", { children: item.value }) : item.value,
-                ...(linked && activateProperty !== undefined
-                    ? { onMouseDown: () => activateProperty(item) }
-                    : {}),
-            };
-        }), keyColor: theme.colors.foreground, valueColor: theme.colors.primary }));
-};
-const heatGrid = (grid) => {
+        return column(id, {});
+    return headlineContent(id, documents.map((entry) => ({
+        id: entry.key,
+        label: documentTabLabel(entry.title),
+    })), active.key, props.selectedKey === active.key, (key) => {
+        props.onDocumentTab(key);
+        if (key === active.key)
+            props.toggle(key);
+        else
+            props.select(key);
+    }, entryBody(`${id}-body`, active, props, { flexGrow: 1, flexShrink: 1 }));
+};
+const entryCard = (entry, selected, props) => {
+    const id = ticketContentRowId(entry.key);
+    return Card({
+        id,
+        width: '100%',
+        borderColor: selected ? FOREGROUND_HIGHLIGHT : BORDER,
+        children: [
+            h(BoxRenderable, {
+                id: `${id}-header`,
+                flexDirection: 'column',
+                width: '100%',
+                flexShrink: 0,
+                paddingBottom: 1,
+                onMouseDown: pressHandler(() => activate(entry, props.select, props.toggle)),
+            }, paragraphNode({
+                id: `${id}-title-text`,
+                runs: [plainRun(entry.title, BOLD)],
+                fg: FOREGROUND,
+            }), ...(entry.metadata !== undefined
+                ? [
+                    paragraphNode({
+                        id: `${id}-metadata`,
+                        runs: [plainRun(entry.metadata, DIM)],
+                        fg: FOREGROUND,
+                    }),
+                ]
+                : [])),
+            h(BoxRenderable, {
+                id: `${id}-body`,
+                flexDirection: 'column',
+                width: '100%',
+                onMouseDown: pressHandler(INERT),
+            }, sectionBody(`${id}-body-content`, entry, props.expandedKeys)),
+        ],
+    });
+};
+const properties = (id, items, activateProperty) => KeyValue({
+    id,
+    items: items.map((item) => {
+        const linked = item.ticketId !== undefined || item.href !== undefined;
+        return {
+            key: item.key,
+            value: item.value,
+            underline: linked,
+            ...(linked && activateProperty !== undefined
+                ? { onMouseDown: () => activateProperty(item) }
+                : {}),
+        };
+    }),
+    keyColor: FOREGROUND,
+    valueColor: FOREGROUND_HIGHLIGHT,
+});
+const heatGrid = (id, grid) => {
     if (grid.columns.length === 0 || grid.rows.length === 0)
         return null;
-    return (_jsx(HeatMap, { data: grid.rows.map((row) => row.cells.map((cell) => cell.value ?? 0)), rowLabels: grid.rows.map((row) => row.label), colLabels: grid.columns.map((column) => column.label), showValues: true }));
+    return HeatMap({
+        id,
+        data: grid.rows.map((row) => row.cells.map((cell) => cell.value ?? 0)),
+        rowLabels: grid.rows.map((row) => row.label),
+        colLabels: grid.columns.map((column) => column.label),
+        showValues: true,
+    });
 };
-const ticketStats = (grid) => {
-    const theme = useTheme();
+const ticketStats = (id, grid) => {
     const row = grid.rows[0];
     if (grid.columns.length === 0 || row === undefined)
         return null;
-    return (_jsx(KeyValue, { items: grid.columns.map((column, index) => ({
+    return KeyValue({
+        id,
+        items: grid.columns.map((column, index) => ({
             key: column.label,
             value: row.cells[index]?.display ?? 'none',
-        })), keyColor: theme.colors.foreground, valueColor: theme.colors.primary }));
-};
-const MetricsMatrix = ({ matrix }) => {
-    const theme = useTheme();
-    const ticket = ticketStats(matrix.ticket);
-    const runs = heatGrid(matrix.runs);
-    if (ticket === null && runs === null) {
-        return (_jsx("text", { fg: theme.colors.primary, flexShrink: 0, children: "none" }));
-    }
-    return (_jsxs("box", { flexDirection: "column", width: "100%", flexShrink: 0, children: [ticket === null ? null : (_jsx(HeadlineMarkdown, { headline: "ticket", paddingBottom: 1, paddingLeft: 1, children: ticket })), runs === null ? null : (_jsx(HeadlineMarkdown, { headline: "runs", paddingBottom: 1, paddingLeft: 1, children: runs }))] }));
+        })),
+        keyColor: FOREGROUND,
+        valueColor: FOREGROUND_HIGHLIGHT,
+    });
 };
-const Sidebar = ({ sidebar, selected, select, activateProperty, }) => {
-    const theme = useTheme();
+const metricsMatrix = (id, matrix) => {
+    const ticket = ticketStats(`${id}-ticket-values`, matrix.ticket);
+    const runs = heatGrid(`${id}-runs-values`, matrix.runs);
+    if (ticket === null && runs === null)
+        return paragraphNode({
+            id: `${id}-none`,
+            runs: [plainRun('none')],
+            fg: FOREGROUND_HIGHLIGHT,
+            flexShrink: 0,
+        });
+    return column(id, { width: '100%', flexShrink: 0 }, ...(ticket === null
+        ? []
+        : [
+            HeadlineMarkdown({
+                id: `${id}-ticket`,
+                headline: 'ticket',
+                children: [ticket],
+            }),
+        ]), ...(runs === null
+        ? []
+        : [
+            HeadlineMarkdown({
+                id: `${id}-runs`,
+                headline: 'runs',
+                children: [runs],
+            }),
+        ]));
+};
+const sidebarCard = (id, sidebar, props) => {
     // The Stats tab only exists once the ticket is done (`showMetrics`); until
     // then the sidebar opens on Details and never offers a Stats tab.
     const tabs = sidebar.showMetrics
         ? SIDEBAR_TABS
         : SIDEBAR_TABS.filter((item) => item.id !== 'stats');
-    const [tab, setTab] = useState(sidebar.showMetrics ? 'stats' : 'details');
+    const requested = props.sidebarTab ?? defaultSidebarTab(sidebar);
+    const tab = tabs.some((item) => item.id === requested)
+        ? requested
+        : defaultSidebarTab(sidebar);
     const pane = tab === 'related' ? sidebar.related : sidebar.details;
-    return (_jsxs(Card, { width: "100%", paddingY: 1, borderColor: selected ? theme.colors.primary : theme.colors.border, children: [_jsx("box", { id: ticketContentRowId(TECHNICAL_KEY), flexDirection: "row", width: "100%", flexShrink: 0, gap: 1, onMouseDown: () => select(TECHNICAL_KEY), children: tabs.map((item) => (
-                // biome-ignore lint/a11y/noStaticElementInteractions: OpenTUI terminal node; inner tabs are mouse-driven.
-                _jsx("text", { fg: tab === item.id ? theme.colors.primary : theme.colors.foreground, onMouseDown: () => {
-                        setTab(item.id);
-                        select(TECHNICAL_KEY);
-                    }, children: tab === item.id ? _jsx("b", { children: `[${item.label}]` }) : ` ${item.label} ` }, item.id))) }), _jsx("box", { flexDirection: "column", width: "100%", flexShrink: 0, marginTop: 1, gap: 1, children: tab === 'stats' ? (_jsx(MetricsMatrix, { matrix: sidebar.matrix })) : (_jsx(Properties, { items: pane, ...(activateProperty === undefined ? {} : { activateProperty }) })) })] }));
-};
-const LinksSection = ({ links, activateProperty, }) => {
+    return Card({
+        id,
+        width: '100%',
+        paddingY: 1,
+        borderColor: props.selectedKey === TECHNICAL_KEY ? FOREGROUND_HIGHLIGHT : BORDER,
+        children: [
+            // The row carries the Technical entry's id, which the kernel scrolls to;
+            // the inner strip selects the entry and the tab labels pick a pane, each
+            // consuming its own press.
+            h(BoxRenderable, {
+                id: ticketContentRowId(TECHNICAL_KEY),
+                flexDirection: 'row',
+                width: '100%',
+                flexShrink: 0,
+            }, h(BoxRenderable, {
+                id: `${id}-tabs`,
+                flexDirection: 'row',
+                width: '100%',
+                flexShrink: 0,
+                gap: 1,
+                onMouseDown: pressHandler(() => props.select(TECHNICAL_KEY)),
+            }, ...tabs.map((item) => tabLabel(`${id}-tab-${item.id}`, item.label, tab === item.id, tab === item.id ? FOREGROUND_HIGHLIGHT : FOREGROUND, () => {
+                props.onSidebarTab(item.id);
+                props.select(TECHNICAL_KEY);
+            })))),
+            column(`${id}-pane`, { width: '100%', flexShrink: 0, marginTop: 1, gap: 1 }, tab === 'stats'
+                ? metricsMatrix(`${id}-metrics`, sidebar.matrix)
+                : properties(`${id}-properties-${tab}`, pane, props.activateProperty)),
+        ],
+    });
+};
+const linksSection = (id, links, activateProperty) => {
     // Drop the `none` placeholder linkProperties emits for a linkless ticket, so
     // the section is omitted entirely rather than painting "links : none".
     const real = links.filter((item) => item.value !== 'none' && item.value !== '');
     if (real.length === 0)
         return null;
-    return (_jsx(HeadlineMarkdown, { headline: "links", paddingBottom: 1, children: _jsx(Properties, { items: real, ...(activateProperty === undefined ? {} : { activateProperty }) }) }));
+    return HeadlineMarkdown({
+        id,
+        headline: 'links',
+        paddingBottom: 1,
+        children: [properties(`${id}-items`, real, activateProperty)],
+    });
 };
-const Overview = ({ model, selectedKey, expandedKeys, select, toggle, activateProperty, }) => {
-    const { width } = useTerminalDimensions();
-    const wide = width >= WIDE_OVERVIEW_COLUMNS;
+/**
+ * ONE tree for both widths: side by side at 100 columns and wider, stacked
+ * below. Only layout props differ between the two, so a resize across the
+ * breakpoint patches them instead of rebuilding nodes that keep their row ids.
+ */
+const overview = (id, props) => {
+    const { model } = props;
+    const wide = props.terminalColumns >= WIDE_OVERVIEW_COLUMNS;
     const main = model.entries.filter((entry) => entry.key !== TECHNICAL_KEY);
-    const documents = (_jsxs(_Fragment, { children: [_jsx(OverviewDocuments, { documents: main, expandedKeys: expandedKeys, select: select, toggle: toggle }), _jsx(LinksSection, { links: model.sidebar?.links ?? [], ...(activateProperty === undefined ? {} : { activateProperty }) })] }));
-    const side = model.sidebar === undefined ? null : (_jsx(Sidebar, { sidebar: model.sidebar, selected: selectedKey === TECHNICAL_KEY, select: select, ...(activateProperty === undefined ? {} : { activateProperty }) }));
-    if (wide && side !== null) {
-        return (_jsxs("box", { flexDirection: "row", width: "100%", flexGrow: 1, flexShrink: 1, gap: 2, children: [_jsx("box", { flexDirection: "column", flexGrow: 1, flexShrink: 1, children: documents }), _jsx("box", { flexDirection: "column", width: "30%", flexShrink: 0, children: side })] }));
-    }
-    return (_jsxs("box", { flexDirection: "column", width: "100%", flexGrow: 1, flexShrink: 1, gap: 2, children: [documents, side] }));
+    const links = linksSection(`${id}-links`, model.sidebar?.links ?? [], props.activateProperty);
+    const side = model.sidebar === undefined
+        ? null
+        : sidebarCard(`${id}-sidebar`, model.sidebar, props);
+    const sideBySide = wide && side !== null;
+    return h(BoxRenderable, {
+        id,
+        flexDirection: sideBySide ? 'row' : 'column',
+        width: '100%',
+        flexGrow: 1,
+        flexShrink: 1,
+        gap: 2,
+    }, column(`${id}-main`, {
+        width: sideBySide ? 'auto' : '100%',
+        flexGrow: 1,
+        // Side by side it yields WIDTH to the sidebar; stacked, nothing may
+        // squeeze its height below the documents it holds.
+        flexShrink: sideBySide ? 1 : 0,
+        gap: sideBySide ? 0 : 2,
+    }, overviewDocuments(`${id}-documents`, main, props), ...(links === null ? [] : [links])), ...(side === null
+        ? []
+        : [
+            column(`${id}-side`, { width: sideBySide ? '30%' : '100%', flexShrink: 0 }, side),
+        ]));
 };
-export function TicketContent({ model, tab, selectedKey, expandedKeys, select, toggle, activateProperty, }) {
-    if (tab === 'comments' && model.entries.length === 0) {
-        return (_jsx("box", { flexDirection: "column", width: "100%", flexGrow: 1, flexShrink: 1, children: _jsx("text", { width: "100%", wrapMode: "word", children: "No comments." }) }));
-    }
-    if (tab === 'overview') {
-        return (_jsx(Overview, { model: model, ...(selectedKey === undefined ? {} : { selectedKey }), expandedKeys: expandedKeys, select: select, ...(activateProperty === undefined ? {} : { activateProperty }), toggle: toggle }));
-    }
-    if (tab === 'planning') {
-        return (_jsx(DocumentPane, { documents: model.entries, ...(selectedKey === undefined ? {} : { selectedKey }), expandedKeys: expandedKeys, select: select, toggle: toggle }));
-    }
-    return (_jsx("box", { flexDirection: "column", width: "100%", flexGrow: 1, flexShrink: 1, gap: 1, children: model.entries.map((entry) => (_jsx(EntryCard, { entry: entry, selected: selectedKey === entry.key, expandedKeys: expandedKeys, select: select, toggle: toggle }, entry.key))) }));
+export function TicketContent(props) {
+    const { id, model, tab } = props;
+    if (tab === 'comments' && model.entries.length === 0)
+        return column(id, { width: '100%', flexGrow: 1, flexShrink: 1 }, paragraphNode({
+            id: `${id}-empty`,
+            runs: [plainRun('No comments.')],
+            fg: FOREGROUND,
+            width: '100%',
+        }));
+    if (tab === 'overview')
+        return overview(`${id}-overview`, props);
+    if (tab === 'planning')
+        return documentPane(`${id}-planning`, model.entries, props);
+    return column(`${id}-history`, { width: '100%', flexGrow: 1, flexShrink: 1, gap: 1 }, ...model.entries.map((entry) => entryCard(entry, props.selectedKey === entry.key, props)));
 }

package/dist/src/Entity/ticket/Data/parents.js

@@ -9,7 +9,7 @@
 // convenience: it already implements the project filter plus the free-text
 // search, so the parent picker cannot drift from the ticket list. How WIDE the
 // search matches is the caller's choice (`match`): the create form keeps the
-// builder's identifier+title OR group (GAIA-257 S5), while the parent FILTER
+// builder's server-resolved identifier+title search (GAIA-257 S5), while the parent FILTER
 // picker matches by identifier only — the operator knows `GAIA-273`, not the
 // title (GAIA-284, PM steer during coding) — and asks for tickets WITH
 // children only (`filter[has_children]=1`, GAIA-300 D1, answered server-side

package/dist/src/Entity/ticket/Data/query.d.ts

@@ -57,7 +57,7 @@ export declare function describeCriteria(criteria: TicketCriteria): string;
 /**
  * Build the JSON:API query for a project's tickets under the given criteria.
  * project + state + closed + parent + who are AND filters at the top level; the
- * free-text search is an OR group matching identifier OR title (substring).
+ * free-text search is one `filter[search]` the server resolves (GAIA-544).
  */
 /** How a caller narrows the shared builder (GAIA-292 D1/D8). */
 export interface TicketQueryOptions {
@@ -92,4 +92,4 @@ export declare function buildTeamMemberTicketQueryParams(userId: string, project
 export declare function buildConductorTicketQueryParams(conductorId: string, page?: {
     size: number;
     index: number;
-}): DrupalJsonApiParams;
+}, query?: string): DrupalJsonApiParams;