');
+ inBlockquote = true;
+ }
+ html.push(`${inlineMarkdown(line.replace(/^>\s?/, ''))}
`);
+ i += 1;
+ continue;
+ }
+ if (inBlockquote) closeQuote();
+
+ // unordered list
+ const ul = line.match(/^\s*[-*+]\s+(.*)$/);
+ if (ul) {
+ closeQuote();
+ if (inOl) {
+ html.push('');
+ inOl = false;
+ }
+ if (!inUl) {
+ html.push('');
+ inUl = true;
+ }
+ html.push(`${inlineMarkdown(ul[1])} `);
+ i += 1;
+ continue;
+ }
+
+ // ordered list
+ const ol = line.match(/^\s*\d+\.\s+(.*)$/);
+ if (ol) {
+ closeQuote();
+ if (inUl) {
+ html.push(' ');
+ inUl = false;
+ }
+ if (!inOl) {
+ html.push('');
+ inOl = true;
+ }
+ html.push(`${inlineMarkdown(ol[1])} `);
+ i += 1;
+ continue;
+ }
+
+ closeLists();
+
+ // blank → paragraph break
+ if (!line.trim()) {
+ i += 1;
+ continue;
+ }
+
+ // paragraph (merge consecutive non-blank non-special lines)
+ const para = [line];
+ i += 1;
+ while (i < lines.length) {
+ const n = lines[i];
+ if (
+ !n.trim() ||
+ /^#{1,6}\s/.test(n) ||
+ /^```/.test(n) ||
+ /^\s*[-*+]\s+/.test(n) ||
+ /^\s*\d+\.\s+/.test(n) ||
+ /^>\s?/.test(n) ||
+ /^\s*(?:-{3,}|\*{3,}|_{3,})\s*$/.test(n)
+ ) {
+ break;
+ }
+ para.push(n);
+ i += 1;
+ }
+ html.push(`${inlineMarkdown(para.join(' '))}
`);
+ }
+
+ closeBlocks();
+ return html.join('\n');
+}
+
+const TOOLS = [
+ { id: 'bold', label: 'B', title: 'Bold', kind: 'wrap', before: '**', after: '**', placeholder: 'bold' },
+ { id: 'italic', label: 'I', title: 'Italic', kind: 'wrap', before: '*', after: '*', placeholder: 'italic' },
+ { id: 'heading', label: 'H', title: 'Heading', kind: 'prefix', prefix: '## ' },
+ { id: 'quote', label: '>', title: 'Quote', kind: 'prefix', prefix: '> ' },
+ { id: 'code', label: '`', title: 'Inline code', kind: 'wrap', before: '`', after: '`', placeholder: 'code' },
+ { id: 'link', label: 'Link', title: 'Link', kind: 'link' },
+ { id: 'ul', label: 'List', title: 'Bullet list', kind: 'prefix', prefix: '- ' },
+ { id: 'ol', label: '1.', title: 'Numbered list', kind: 'prefix', prefix: '1. ' },
+];
+
+const MODES = [
+ { id: 'edit', label: '编辑' },
+ { id: 'split', label: '分栏' },
+ { id: 'preview', label: '预览' },
+];
+
+/**
+ * MarkdownEditor — markdown-first editor with toolbar + live preview.
+ *
+ * @param {object} [deps]
+ * @param {string} [deps.value]
+ * @param {'edit'|'split'|'preview'} [deps.mode] default `split`
+ * @param {number|string} [deps.height] editor body height (default 280)
+ * @param {string} [deps.placeholder]
+ * @param {boolean} [deps.toolbar]
+ * @param {(value:string)=>void} [deps.onChange]
+ * @param {(mode:string)=>void} [deps.onModeChange]
+ */
+export class MarkdownEditor extends Component {
+ constructor(deps = {}) {
+ super(deps);
+ this.state.data.value = deps.value ?? '';
+ this.state.data.mode = deps.mode === 'edit' || deps.mode === 'preview' ? deps.mode : 'split';
+ this.state.data.height = deps.height ?? 280;
+ this.state.data.placeholder = deps.placeholder ?? 'Write Markdown…';
+ this.state.data.toolbar = deps.toolbar !== false;
+ this._onChange = deps.onChange || null;
+ this._onModeChange = deps.onModeChange || null;
+ }
+
+ async mount(host, params = {}) {
+ await loadUi();
+ return super.mount(host, params);
+ }
+
+ getValue() {
+ return String(this.state.data.value ?? '');
+ }
+
+ setValue(value, { refresh = true } = {}) {
+ const next = String(value ?? '');
+ this.state.data.value = next;
+ if (refresh && this._mounted) this.refresh();
+ else if (this._mounted) this._syncPreview();
+ return this;
+ }
+
+ setMode(mode) {
+ if (mode !== 'edit' && mode !== 'split' && mode !== 'preview') return this;
+ this.state.data.mode = mode;
+ this._onModeChange?.(mode);
+ if (this._mounted) this.refresh();
+ return this;
+ }
+
+ focus() {
+ this.ids().gdMdInput?.focus();
+ return this;
+ }
+
+ _emit(value) {
+ this.state.data.value = value;
+ this._onChange?.(value);
+ this._syncPreview();
+ }
+
+ _applyTool(tool) {
+ const ta = this.ids().gdMdInput;
+ if (!ta) return;
+ let next = ta.value;
+ if (tool.kind === 'wrap') {
+ next = wrapSelection(ta, tool.before, tool.after, tool.placeholder);
+ } else if (tool.kind === 'prefix') {
+ next = prefixLines(ta, tool.prefix);
+ } else if (tool.kind === 'link') {
+ const selected = ta.value.slice(ta.selectionStart, ta.selectionEnd);
+ const label = selected || 'link';
+ next = wrapSelection(ta, '[', '](https://)', label);
+ }
+ this._emit(next);
+ }
+
+ _syncMode() {
+ const root = this.ids().gdMdRoot;
+ if (!root) return;
+ root.dataset.mode = this.state.data.mode;
+ root.classList.toggle('gd-md-editor--edit', this.state.data.mode === 'edit');
+ root.classList.toggle('gd-md-editor--split', this.state.data.mode === 'split');
+ root.classList.toggle('gd-md-editor--preview', this.state.data.mode === 'preview');
+
+ for (const m of MODES) {
+ const btn = this.ids()[`gdMdMode_${m.id}`];
+ if (!btn) continue;
+ btn.classList.toggle('gd-md-editor__mode--active', m.id === this.state.data.mode);
+ btn.setAttribute('aria-pressed', m.id === this.state.data.mode ? 'true' : 'false');
+ }
+
+ const edit = this.ids().gdMdEdit;
+ const preview = this.ids().gdMdPreviewPane;
+ if (edit) {
+ edit.hidden = this.state.data.mode === 'preview';
+ }
+ if (preview) {
+ preview.hidden = this.state.data.mode === 'edit';
+ }
+ }
+
+ _syncPreview() {
+ const pane = this.ids().gdMdPreview;
+ if (!pane) return;
+ const html = renderMarkdown(this.state.data.value);
+ pane.innerHTML = html || 'Nothing to preview
';
+ }
+
+ _syncInput() {
+ const ta = this.ids().gdMdInput;
+ if (!ta) return;
+ if (typeof document !== 'undefined' && document.activeElement === ta) return;
+ if (ta.value !== this.state.data.value) ta.value = this.state.data.value;
+ }
+
+ _syncHeight() {
+ const body = this.ids().gdMdBody;
+ if (!body) return;
+ const h = this.state.data.height;
+ body.style.height = typeof h === 'number' ? `${h}px` : String(h);
+ }
+
+ render() {
+ const { value, placeholder, toolbar, height } = this.state.data;
+
+ this.ensureShell(
+ (ids) => ids.gdMdRoot,
+ ({ div, textarea, button }) => {
+ div(
+ {
+ id: 'gdMdRoot',
+ className: 'gd-md-editor gd-md-editor--split',
+ attrs: { 'data-mode': 'split' },
+ },
+ div({ id: 'gdMdToolbar', className: 'gd-md-editor__toolbar' }),
+ div(
+ {
+ id: 'gdMdBody',
+ className: 'gd-md-editor__body',
+ style: { height: typeof height === 'number' ? `${height}px` : String(height) },
+ },
+ div(
+ { id: 'gdMdEdit', className: 'gd-md-editor__edit' },
+ textarea({
+ id: 'gdMdInput',
+ className: 'gd-md-editor__input gd-textarea',
+ attrs: {
+ spellcheck: 'true',
+ autocomplete: 'off',
+ 'aria-label': 'Markdown source',
+ },
+ placeholder,
+ value: value,
+ onInput: (e) => {
+ this._emit(e.currentTarget.value);
+ },
+ })
+ ),
+ div(
+ {
+ id: 'gdMdPreviewPane',
+ className: 'gd-md-editor__preview-pane',
+ },
+ div({
+ id: 'gdMdPreview',
+ className: 'gd-md-editor__preview',
+ attrs: { role: 'document', 'aria-label': 'Markdown preview' },
+ })
+ )
+ )
+ );
+
+ // silence unused — toolbar filled after shell
+ void button;
+ }
+ );
+
+ const bar = this.ids().gdMdToolbar;
+ if (bar && !bar.dataset.ready) {
+ bar.dataset.ready = '1';
+ if (toolbar) {
+ const formatDom = el('div', { className: 'gd-md-editor__tools' }).dom();
+ for (const tool of TOOLS) {
+ formatDom.appendChild(
+ el('button', {
+ type: 'button',
+ className: cx(
+ 'gd-btn',
+ 'gd-btn--text',
+ 'gd-btn--sm',
+ 'gd-md-editor__tool',
+ tool.id === 'bold' && 'gd-md-editor__tool--bold',
+ tool.id === 'italic' && 'gd-md-editor__tool--italic'
+ ),
+ text: tool.label,
+ title: tool.title,
+ attrs: { 'aria-label': tool.title, 'data-tool': tool.id },
+ onClick: (e) => {
+ e.preventDefault();
+ this._applyTool(tool);
+ },
+ }).dom()
+ );
+ }
+ bar.appendChild(formatDom);
+ }
+
+ const modesEl = el('div', {
+ className: 'gd-md-editor__modes',
+ attrs: { role: 'group', 'aria-label': 'View mode' },
+ });
+ const modesDom = modesEl.dom();
+ for (const m of MODES) {
+ const btnEl = el('button', {
+ type: 'button',
+ className: cx('gd-btn', 'gd-btn--default', 'gd-btn--sm', 'gd-md-editor__mode'),
+ text: m.label,
+ attrs: { 'aria-pressed': 'false', 'data-mode': m.id },
+ onClick: (e) => {
+ e.preventDefault();
+ this.setMode(m.id);
+ },
+ });
+ const node = btnEl.dom();
+ modesDom.appendChild(node);
+ }
+ bar.appendChild(modesDom);
+ }
+
+ // Mode buttons live outside ensureShell ids — resolve from toolbar each render.
+ this.state.ref.id = this.state.ref.id || {};
+ for (const m of MODES) {
+ const found = bar?.querySelector?.(`[data-mode="${m.id}"]`);
+ if (found) this.state.ref.id[`gdMdMode_${m.id}`] = found;
+ }
+
+ this._syncHeight();
+ this._syncInput();
+ this._syncMode();
+ this._syncPreview();
+ }
+}
+
+/**
+ * @param {string} value
+ * @param {HTMLElement|string} host
+ * @param {object} [options]
+ */
+export function createMarkdownEditor(value, host, options = {}) {
+ const ed = new MarkdownEditor({ ...options, value });
+ const elHost =
+ typeof host === 'string'
+ ? typeof document !== 'undefined'
+ ? document.getElementById(host)
+ : null
+ : host;
+ if (elHost) {
+ void ed.mount(elHost);
+ }
+ return ed;
+}
diff --git a/src/pyouter/webui/gd5/ui/menu.js b/src/pyouter/webui/gd5/ui/menu.js
new file mode 100644
index 0000000..35845a7
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/menu.js
@@ -0,0 +1,103 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Menu — vertical or horizontal nav menu with optional submenus (antd Menu).
+ * @param {object} [props]
+ * @param {Array<{key:string,label:string,children?:array,disabled?:boolean,danger?:boolean,type?:'divider'|'group'}>} [props.items]
+ * @param {'vertical'|'horizontal'|'inline'} [props.mode]
+ * @param {string} [props.selectedKey]
+ * @param {string[]} [props.openKeys]
+ * @param {function} [props.onClick]
+ * @param {function} [props.onOpenChange]
+ */
+export function Menu(props = {}) {
+ const {
+ items = [],
+ mode = 'vertical',
+ selectedKey,
+ openKeys = [],
+ onClick,
+ onOpenChange,
+ className,
+ } = props;
+
+ const openSet = new Set(openKeys);
+
+ const renderItems = (list, depth = 0) =>
+ list.flatMap((it) => {
+ if (it.type === 'divider') {
+ return [el('div', { className: 'gd-menu__divider', key: it.key || `d-${depth}` })];
+ }
+ if (it.type === 'group') {
+ return [
+ el('div', {
+ className: 'gd-menu__group-title',
+ text: it.label,
+ key: it.key || it.label,
+ }),
+ ...renderItems(it.children || [], depth),
+ ];
+ }
+ const hasKids = Array.isArray(it.children) && it.children.length > 0;
+ const opened = openSet.has(it.key);
+ if (hasKids) {
+ return [
+ el(
+ 'div',
+ { className: 'gd-menu__submenu', key: it.key },
+ el('button', {
+ type: 'button',
+ className: cx('gd-menu__item', 'gd-menu__submenu-title'),
+ text: `${it.label}${mode === 'horizontal' ? '' : opened ? ' ▾' : ' ▸'}`,
+ disabled: !!it.disabled,
+ onClick: () => {
+ const next = new Set(openSet);
+ if (opened) next.delete(it.key);
+ else next.add(it.key);
+ onOpenChange?.([...next]);
+ },
+ }),
+ (opened || mode === 'horizontal')
+ ? el(
+ 'div',
+ { className: cx('gd-menu__sub', mode === 'horizontal' && 'gd-menu__sub--popup') },
+ ...renderItems(it.children, depth + 1)
+ )
+ : null
+ ),
+ ];
+ }
+ return [
+ el('button', {
+ type: 'button',
+ key: it.key,
+ className: cx(
+ 'gd-menu__item',
+ selectedKey === it.key && 'gd-menu__item--selected',
+ it.danger && 'gd-menu__item--danger'
+ ),
+ text: it.label,
+ disabled: !!it.disabled,
+ onClick: () => onClick?.({ key: it.key, item: it }),
+ }),
+ ];
+ });
+
+ return el(
+ 'nav',
+ {
+ ...omit(props, [
+ 'items',
+ 'mode',
+ 'selectedKey',
+ 'openKeys',
+ 'onClick',
+ 'onOpenChange',
+ 'className',
+ ]),
+ className: cx('gd-menu', `gd-menu--${mode}`, className),
+ role: 'menu',
+ },
+ ...renderItems(items)
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/navigation.js b/src/pyouter/webui/gd5/ui/navigation.js
new file mode 100644
index 0000000..77a26cd
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/navigation.js
@@ -0,0 +1,195 @@
+import { cx, el, omit } from './util.js';
+import { Button } from './button.js';
+
+/**
+ * Navbar — row of page links (inside a SiteHeader).
+ * @param {object} [props]
+ * @param {Array<{key?:string,label:string,href?:string,active?:boolean,onClick?:function}>} [props.items]
+ */
+export function Navbar(props = {}, ...children) {
+ const { items = [], className } = props;
+ return el(
+ 'nav',
+ {
+ ...omit(props, ['items', 'className']),
+ className: cx('gd-navbar', className),
+ },
+ ...(children.length
+ ? children
+ : items.map((it) =>
+ el('a', {
+ className: cx('gd-navbar__link', it.active && 'gd-navbar__link--active'),
+ text: it.label,
+ href: it.href || '#',
+ onClick: it.onClick
+ ? (e) => {
+ e.preventDefault();
+ it.onClick(e);
+ }
+ : undefined,
+ })
+ ))
+ );
+}
+
+/**
+ * SiteHeader — top strip containing brand + Navbar + extra.
+ */
+export function SiteHeader(props = {}, ...children) {
+ const { brand, extra, className, sticky = false } = props;
+ return el(
+ 'header',
+ {
+ ...omit(props, ['brand', 'extra', 'className', 'sticky']),
+ className: cx('gd-site-header', sticky && 'gd-sticky', className),
+ },
+ brand != null ? el('div', { className: 'gd-site-header__brand', text: String(brand) }) : null,
+ ...children,
+ extra || null
+ );
+}
+
+/**
+ * BottomNav — mobile tab bar.
+ * @param {object} [props]
+ * @param {Array<{key:string,label:string,icon?:string,active?:boolean,onClick?:function}>} [props.items]
+ */
+export function BottomNav(props = {}) {
+ const { items = [], className } = props;
+ return el(
+ 'nav',
+ {
+ ...omit(props, ['items', 'className']),
+ className: cx('gd-bottom-nav', className),
+ attrs: { 'aria-label': 'Bottom navigation' },
+ },
+ ...items.map((it) =>
+ el('button', {
+ type: 'button',
+ className: cx('gd-bottom-nav__item', it.active && 'gd-bottom-nav__item--active'),
+ onClick: it.onClick,
+ },
+ it.icon ? el('span', { className: 'gd-bottom-nav__icon', text: it.icon }) : null,
+ el('span', { className: 'gd-bottom-nav__label', text: it.label })
+ )
+ )
+ );
+}
+
+/**
+ * Sidebar — left navigation column.
+ */
+export function Sidebar(props = {}, ...children) {
+ const { items = [], title, className, width = 220 } = props;
+ return el(
+ 'aside',
+ {
+ ...omit(props, ['items', 'title', 'className', 'width']),
+ className: cx('gd-sidebar', className),
+ style: { width: typeof width === 'number' ? `${width}px` : width },
+ },
+ title != null ? el('div', { className: 'gd-sidebar__title', text: title }) : null,
+ el(
+ 'div',
+ { className: 'gd-sidebar__nav' },
+ ...(children.length
+ ? children
+ : items.map((it) =>
+ el('a', {
+ className: cx('gd-sidebar__link', it.active && 'gd-sidebar__link--active'),
+ text: it.label,
+ href: it.href || '#',
+ onClick: it.onClick
+ ? (e) => {
+ e.preventDefault();
+ it.onClick(e);
+ }
+ : undefined,
+ })
+ ))
+ )
+ );
+}
+
+/**
+ * Toolbar — action row.
+ */
+export function Toolbar(props = {}, ...children) {
+ const { className, extra } = props;
+ return el(
+ 'div',
+ {
+ ...omit(props, ['className', 'extra']),
+ className: cx('gd-toolbar', className),
+ role: 'toolbar',
+ },
+ el('div', { className: 'gd-toolbar__actions' }, ...children),
+ extra || null
+ );
+}
+
+/**
+ * HamburgerButton — three-line trigger for a nav drawer.
+ */
+export function HamburgerButton(props = {}) {
+ const { className, label = 'Menu', onClick } = props;
+ return el('button', {
+ ...omit(props, ['className', 'label']),
+ type: 'button',
+ className: cx('gd-hamburger', className),
+ attrs: { 'aria-label': label },
+ onClick,
+ },
+ el('span'),
+ el('span'),
+ el('span')
+ );
+}
+
+/**
+ * Scrollspy — “On this page” list; mark active via `activeKey`.
+ */
+export function Scrollspy(props = {}) {
+ const { items = [], activeKey, onChange, className, title = 'On this page' } = props;
+ return el(
+ 'nav',
+ {
+ ...omit(props, ['items', 'activeKey', 'onChange', 'className', 'title']),
+ className: cx('gd-scrollspy', className),
+ attrs: { 'aria-label': title },
+ },
+ el('div', { className: 'gd-scrollspy__title', text: title }),
+ ...items.map((it) =>
+ el('a', {
+ className: cx('gd-scrollspy__link', it.key === activeKey && 'gd-scrollspy__link--active'),
+ text: it.label,
+ href: it.href || `#${it.key}`,
+ onClick: (e) => {
+ if (onChange) {
+ e.preventDefault();
+ onChange(it.key);
+ }
+ },
+ })
+ )
+ );
+}
+
+/**
+ * SplitButton — primary action + overflow menu trigger.
+ */
+export function SplitButton(props = {}) {
+ const { text = 'Action', onClick, onMenuClick, className, type = 'primary' } = props;
+ return el(
+ 'div',
+ { className: cx('gd-split-btn', className) },
+ Button({ type, text, onClick, className: 'gd-split-btn__main' }),
+ Button({
+ type,
+ text: '▾',
+ className: 'gd-split-btn__caret',
+ onClick: onMenuClick,
+ attrs: { 'aria-label': 'More actions' },
+ })
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/overlay.js b/src/pyouter/webui/gd5/ui/overlay.js
new file mode 100644
index 0000000..6252778
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/overlay.js
@@ -0,0 +1,176 @@
+import { cx, el, omit } from './util.js';
+
+/** Scrim — translucent backdrop layer. */
+export function Scrim(props = {}) {
+ const { className, visible = true, onClick } = props;
+ return el('div', {
+ ...omit(props, ['className', 'visible']),
+ className: cx('gd-scrim', visible && 'gd-scrim--visible', className),
+ onClick,
+ });
+}
+
+/**
+ * Tooltip — anchored hint (CSS hover / focus).
+ * Wrap a trigger; show `title` text.
+ */
+export function Tooltip(props = {}, ...children) {
+ const { title, placement = 'top', className } = props;
+ return el(
+ 'span',
+ {
+ ...omit(props, ['title', 'placement', 'className']),
+ className: cx('gd-tooltip', `gd-tooltip--${placement}`, className),
+ },
+ ...children,
+ el('span', { className: 'gd-tooltip__bubble', role: 'tooltip', text: title })
+ );
+}
+
+/**
+ * Popover — richer anchored panel (visibility controlled).
+ * @param {object} [props]
+ * @param {boolean} [props.open]
+ * @param {any} [props.content]
+ * @param {string} [props.title]
+ */
+export function Popover(props = {}, ...children) {
+ const { open = false, content, title, className, placement = 'bottom' } = props;
+ return el(
+ 'span',
+ {
+ ...omit(props, ['open', 'content', 'title', 'className', 'placement']),
+ className: cx('gd-popover', `gd-popover--${placement}`, open && 'gd-popover--open', className),
+ },
+ ...children,
+ open
+ ? el(
+ 'div',
+ { className: 'gd-popover__panel', role: 'dialog' },
+ title != null ? el('div', { className: 'gd-popover__title', text: title }) : null,
+ el('div', { className: 'gd-popover__body' }, content)
+ )
+ : null
+ );
+}
+
+/**
+ * DropdownMenu — list of actions under a trigger.
+ * @param {object} [props]
+ * @param {boolean} [props.open]
+ * @param {Array<{key?:string,label:string,danger?:boolean,disabled?:boolean,onClick?:function,divider?:boolean}>} [props.items]
+ */
+export function DropdownMenu(props = {}, ...children) {
+ const { open = false, items = [], className, onOpenChange } = props;
+ return el(
+ 'span',
+ {
+ ...omit(props, ['open', 'items', 'className', 'onOpenChange']),
+ className: cx('gd-dropdown', open && 'gd-dropdown--open', className),
+ },
+ ...children,
+ open
+ ? el(
+ 'div',
+ { className: 'gd-dropdown__menu', role: 'menu' },
+ ...items.map((it, i) =>
+ it.divider
+ ? el('div', { className: 'gd-dropdown__divider', key: `d-${i}` })
+ : el('button', {
+ type: 'button',
+ role: 'menuitem',
+ className: cx(
+ 'gd-dropdown__item',
+ it.danger && 'gd-dropdown__item--danger'
+ ),
+ text: it.label,
+ disabled: !!it.disabled,
+ onClick: (e) => {
+ it.onClick?.(e);
+ onOpenChange?.(false);
+ },
+ })
+ )
+ )
+ : null
+ );
+}
+
+/**
+ * HoverCard — rich preview on hover (CSS :hover).
+ */
+export function HoverCard(props = {}, ...children) {
+ const { content, className, title } = props;
+ return el(
+ 'span',
+ {
+ ...omit(props, ['content', 'className', 'title']),
+ className: cx('gd-hover-card', className),
+ },
+ ...children,
+ el(
+ 'div',
+ { className: 'gd-hover-card__panel', role: 'tooltip' },
+ title != null ? el('div', { className: 'gd-hover-card__title', text: title }) : null,
+ el('div', { className: 'gd-hover-card__body' }, content)
+ )
+ );
+}
+
+/**
+ * ContextMenu — right-click menu host.
+ * Pass open + position {x,y} + items.
+ */
+export function ContextMenu(props = {}) {
+ const { open = false, x = 0, y = 0, items = [], onClose, className } = props;
+ if (!open) return el('div', { className: 'gd-context-menu gd-context-menu--hidden' });
+ return el(
+ 'div',
+ {
+ ...omit(props, ['open', 'x', 'y', 'items', 'onClose', 'className']),
+ className: cx('gd-context-menu', className),
+ style: { left: `${x}px`, top: `${y}px` },
+ role: 'menu',
+ },
+ ...items.map((it, i) =>
+ it.divider
+ ? el('div', { className: 'gd-dropdown__divider', key: `cd-${i}` })
+ : el('button', {
+ type: 'button',
+ role: 'menuitem',
+ className: cx('gd-dropdown__item', it.danger && 'gd-dropdown__item--danger'),
+ text: it.label,
+ disabled: !!it.disabled,
+ onClick: (e) => {
+ it.onClick?.(e);
+ onClose?.();
+ },
+ })
+ )
+ );
+}
+
+/**
+ * OverflowMenu — three-dots / kebab trigger + menu.
+ * @param {'horizontal'|'vertical'|'hamburger'} [props.variant]
+ */
+export function OverflowMenu(props = {}) {
+ const {
+ variant = 'horizontal',
+ open = false,
+ items = [],
+ onOpenChange,
+ className,
+ } = props;
+ const glyph = variant === 'vertical' ? '⋮' : variant === 'hamburger' ? '☰' : '⋯';
+ return DropdownMenu(
+ { open, items, onOpenChange, className: cx('gd-overflow-menu', className) },
+ el('button', {
+ type: 'button',
+ className: 'gd-overflow-menu__trigger',
+ text: glyph,
+ attrs: { 'aria-label': 'More' },
+ onClick: () => onOpenChange?.(!open),
+ })
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/pagination.js b/src/pyouter/webui/gd5/ui/pagination.js
new file mode 100644
index 0000000..b8ab4f3
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/pagination.js
@@ -0,0 +1,70 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Pagination — numbered page buttons.
+ * @param {object} [props]
+ * @param {number} [props.current]
+ * @param {number} [props.total] total pages
+ * @param {function} [props.onChange]
+ */
+export function Pagination(props = {}) {
+ const { current = 1, total = 1, onChange, className } = props;
+ const pages = Array.from({ length: Math.max(1, total) }, (_, i) => i + 1);
+ return el(
+ 'nav',
+ {
+ ...omit(props, ['current', 'total', 'onChange', 'className']),
+ className: cx('gd-pagination', className),
+ attrs: { 'aria-label': 'Pagination' },
+ },
+ el('button', {
+ type: 'button',
+ className: 'gd-pagination__btn',
+ text: '‹',
+ disabled: current <= 1,
+ onClick: () => onChange?.(current - 1),
+ }),
+ ...pages.map((p) =>
+ el('button', {
+ type: 'button',
+ className: cx('gd-pagination__btn', p === current && 'gd-pagination__btn--active'),
+ text: String(p),
+ onClick: () => onChange?.(p),
+ })
+ ),
+ el('button', {
+ type: 'button',
+ className: 'gd-pagination__btn',
+ text: '›',
+ disabled: current >= total,
+ onClick: () => onChange?.(current + 1),
+ })
+ );
+}
+
+/**
+ * PageControl — dot pagination (carousel-style).
+ * @param {object} [props]
+ * @param {number} [props.count]
+ * @param {number} [props.current] 0-based
+ * @param {function} [props.onChange]
+ */
+export function PageControl(props = {}) {
+ const { count = 3, current = 0, onChange, className } = props;
+ return el(
+ 'div',
+ {
+ ...omit(props, ['count', 'current', 'onChange', 'className']),
+ className: cx('gd-page-control', className),
+ role: 'tablist',
+ },
+ ...Array.from({ length: count }, (_, i) =>
+ el('button', {
+ type: 'button',
+ className: cx('gd-page-control__dot', i === current && 'gd-page-control__dot--active'),
+ attrs: { 'aria-label': `Page ${i + 1}` },
+ onClick: () => onChange?.(i),
+ })
+ )
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/progress.js b/src/pyouter/webui/gd5/ui/progress.js
new file mode 100644
index 0000000..0180dba
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/progress.js
@@ -0,0 +1,121 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * ProgressBar — determinate or indeterminate.
+ * @param {object} [props]
+ * @param {number} [props.percent] 0–100; omit for indeterminate
+ * @param {'sm'|'md'|'lg'} [props.size]
+ * @param {boolean} [props.showInfo]
+ */
+export function ProgressBar(props = {}) {
+ const { percent, size = 'md', showInfo = false, className } = props;
+ const indeterminate = percent == null;
+ const pct = Math.max(0, Math.min(100, Number(percent) || 0));
+ return el(
+ 'div',
+ {
+ ...omit(props, ['percent', 'size', 'showInfo', 'className']),
+ className: cx('gd-progress', `gd-progress--${size}`, className),
+ role: 'progressbar',
+ attrs: indeterminate
+ ? { 'aria-valuemin': '0', 'aria-valuemax': '100' }
+ : {
+ 'aria-valuenow': String(pct),
+ 'aria-valuemin': '0',
+ 'aria-valuemax': '100',
+ },
+ },
+ el(
+ 'div',
+ { className: 'gd-progress__track' },
+ el('div', {
+ className: cx('gd-progress__bar', indeterminate && 'gd-progress__bar--indeterminate'),
+ style: indeterminate ? undefined : { width: `${pct}%` },
+ })
+ ),
+ showInfo && !indeterminate
+ ? el('span', { className: 'gd-progress__info', text: `${Math.round(pct)}%` })
+ : null
+ );
+}
+
+/**
+ * ProgressRing — circular progress (SVG).
+ * @param {object} [props]
+ * @param {number} [props.percent]
+ * @param {number} [props.size] px
+ * @param {number} [props.strokeWidth]
+ */
+export function ProgressRing(props = {}) {
+ const { percent = 0, size = 48, strokeWidth = 4, className } = props;
+ const pct = Math.max(0, Math.min(100, Number(percent) || 0));
+ const r = (size - strokeWidth) / 2;
+ const c = 2 * Math.PI * r;
+ const offset = c - (pct / 100) * c;
+
+ const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+ svg.setAttribute('viewBox', `0 0 ${size} ${size}`);
+ svg.setAttribute('width', String(size));
+ svg.setAttribute('height', String(size));
+ svg.setAttribute('class', 'gd-progress-ring__svg');
+
+ const track = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+ track.setAttribute('class', 'gd-progress-ring__track');
+ track.setAttribute('cx', String(size / 2));
+ track.setAttribute('cy', String(size / 2));
+ track.setAttribute('r', String(r));
+ track.setAttribute('fill', 'none');
+ track.setAttribute('stroke-width', String(strokeWidth));
+
+ const bar = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+ bar.setAttribute('class', 'gd-progress-ring__bar');
+ bar.setAttribute('cx', String(size / 2));
+ bar.setAttribute('cy', String(size / 2));
+ bar.setAttribute('r', String(r));
+ bar.setAttribute('fill', 'none');
+ bar.setAttribute('stroke-width', String(strokeWidth));
+ bar.setAttribute('stroke-dasharray', String(c));
+ bar.setAttribute('stroke-dashoffset', String(offset));
+ bar.setAttribute('transform', `rotate(-90 ${size / 2} ${size / 2})`);
+
+ svg.appendChild(track);
+ svg.appendChild(bar);
+ const svgEl = { e: svg, dom: () => svg };
+
+ return el(
+ 'div',
+ {
+ ...omit(props, ['percent', 'size', 'strokeWidth', 'className']),
+ className: cx('gd-progress-ring', className),
+ role: 'progressbar',
+ attrs: {
+ 'aria-valuenow': String(pct),
+ 'aria-valuemin': '0',
+ 'aria-valuemax': '100',
+ },
+ style: { width: `${size}px`, height: `${size}px` },
+ },
+ svgEl,
+ el('span', { className: 'gd-progress-ring__label', text: `${Math.round(pct)}%` })
+ );
+}
+
+/** Meter — capacity / level gauge. */
+export function Meter(props = {}) {
+ const { value = 0, min = 0, max = 100, low, high, optimum, className, label } = props;
+ return el(
+ 'div',
+ { className: cx('gd-meter', className) },
+ label != null ? el('div', { className: 'gd-meter__label', text: label }) : null,
+ el('meter', {
+ ...omit(props, ['className', 'label']),
+ className: 'gd-meter__control',
+ value,
+ min,
+ max,
+ ...(low != null ? { low } : {}),
+ ...(high != null ? { high } : {}),
+ ...(optimum != null ? { optimum } : {}),
+ })
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/radio.js b/src/pyouter/webui/gd5/ui/radio.js
new file mode 100644
index 0000000..e307b3e
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/radio.js
@@ -0,0 +1,66 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Radio — single choice in a named group.
+ * @param {object} [props]
+ * @param {string} [props.label]
+ * @param {string} [props.name]
+ * @param {string|number} [props.value]
+ * @param {boolean} [props.checked]
+ */
+export function Radio(props = {}) {
+ const { label, className, checked, disabled, name, value, onChange, id } = props;
+ return el(
+ 'label',
+ {
+ className: cx('gd-radio', disabled && 'gd-radio--disabled', className),
+ },
+ el('input', {
+ ...omit(props, ['label', 'className', 'text']),
+ type: 'radio',
+ className: 'gd-radio__input',
+ name,
+ value,
+ checked: !!checked,
+ disabled: !!disabled,
+ onChange,
+ id,
+ }),
+ el('span', { className: 'gd-radio__dot', attrs: { 'aria-hidden': 'true' } }),
+ label != null ? el('span', { className: 'gd-radio__label', text: label }) : null
+ );
+}
+
+/**
+ * RadioGroup — convenience wrapper.
+ * @param {object} [props]
+ * @param {Array<{value:string,label:string,disabled?:boolean}>} [props.options]
+ * @param {string} [props.value]
+ * @param {string} [props.name]
+ * @param {function} [props.onChange]
+ */
+export function RadioGroup(props = {}) {
+ const { options = [], value, name = 'gd-radio', className, onChange, direction = 'vertical' } =
+ props;
+ return el(
+ 'div',
+ {
+ className: cx(
+ 'gd-radio-group',
+ direction === 'horizontal' && 'gd-radio-group--horizontal',
+ className
+ ),
+ role: 'radiogroup',
+ },
+ ...options.map((opt) =>
+ Radio({
+ name,
+ value: opt.value,
+ label: opt.label,
+ disabled: opt.disabled,
+ checked: value === opt.value,
+ onChange: (e) => onChange?.(e.target.value, e),
+ })
+ )
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/rate.js b/src/pyouter/webui/gd5/ui/rate.js
new file mode 100644
index 0000000..806d2d8
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/rate.js
@@ -0,0 +1,48 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Rate — star rating (antd Rate).
+ * @param {object} [props]
+ * @param {number} [props.value]
+ * @param {number} [props.count]
+ * @param {boolean} [props.allowClear]
+ * @param {boolean} [props.disabled]
+ * @param {function} [props.onChange]
+ */
+export function Rate(props = {}) {
+ const {
+ value = 0,
+ count = 5,
+ allowClear = true,
+ disabled = false,
+ onChange,
+ className,
+ character = '★',
+ } = props;
+
+ return el(
+ 'div',
+ {
+ ...omit(props, ['value', 'count', 'allowClear', 'disabled', 'onChange', 'className', 'character']),
+ className: cx('gd-rate', disabled && 'gd-rate--disabled', className),
+ role: 'radiogroup',
+ attrs: { 'aria-label': 'Rating' },
+ },
+ ...Array.from({ length: count }, (_, i) => {
+ const n = i + 1;
+ const active = n <= value;
+ return el('button', {
+ type: 'button',
+ className: cx('gd-rate__star', active && 'gd-rate__star--active'),
+ text: character,
+ disabled: !!disabled,
+ attrs: { 'aria-label': `${n} star${n > 1 ? 's' : ''}` },
+ onClick: () => {
+ if (disabled) return;
+ if (allowClear && value === n) onChange?.(0);
+ else onChange?.(n);
+ },
+ });
+ })
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/result.js b/src/pyouter/webui/gd5/ui/result.js
new file mode 100644
index 0000000..98d9fc3
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/result.js
@@ -0,0 +1,111 @@
+import { cx, el, omit } from './util.js';
+import { Button } from './button.js';
+
+/**
+ * Result — success / error / info page block (antd Result).
+ * @param {object} [props]
+ * @param {'success'|'error'|'info'|'warning'|'404'|'403'|'500'} [props.status]
+ * @param {string} [props.title]
+ * @param {string} [props.subTitle]
+ * @param {any} [props.extra]
+ */
+export function Result(props = {}, ...children) {
+ const {
+ status = 'info',
+ title,
+ subTitle,
+ extra,
+ className,
+ icon,
+ } = props;
+
+ const defaultIcon = {
+ success: '✓',
+ error: '✕',
+ info: 'ℹ',
+ warning: '!',
+ '404': '404',
+ '403': '403',
+ '500': '500',
+ }[status] || 'ℹ';
+
+ return el(
+ 'div',
+ {
+ ...omit(props, ['status', 'title', 'subTitle', 'extra', 'className', 'icon']),
+ className: cx('gd-result', `gd-result--${status}`, className),
+ },
+ el('div', {
+ className: 'gd-result__icon',
+ text: icon != null ? String(icon) : defaultIcon,
+ }),
+ title != null ? el('div', { className: 'gd-result__title', text: title }) : null,
+ subTitle != null ? el('div', { className: 'gd-result__subtitle', text: subTitle }) : null,
+ children.length ? el('div', { className: 'gd-result__body' }, ...children) : null,
+ extra != null ? el('div', { className: 'gd-result__extra' }, extra) : null
+ );
+}
+
+/**
+ * Popconfirm — confirm popover on an action (antd Popconfirm).
+ * Controlled via `open`.
+ */
+export function Popconfirm(props = {}, ...children) {
+ const {
+ open = false,
+ title = 'Are you sure?',
+ okText = 'OK',
+ cancelText = 'Cancel',
+ onConfirm,
+ onCancel,
+ onOpenChange,
+ className,
+ } = props;
+
+ return el(
+ 'span',
+ {
+ ...omit(props, [
+ 'open',
+ 'title',
+ 'okText',
+ 'cancelText',
+ 'onConfirm',
+ 'onCancel',
+ 'onOpenChange',
+ 'className',
+ ]),
+ className: cx('gd-popconfirm', open && 'gd-popconfirm--open', className),
+ },
+ ...children,
+ open
+ ? el(
+ 'div',
+ { className: 'gd-popconfirm__panel', role: 'dialog' },
+ el('div', { className: 'gd-popconfirm__title', text: title }),
+ el(
+ 'div',
+ { className: 'gd-popconfirm__actions' },
+ Button({
+ type: 'default',
+ size: 'sm',
+ text: cancelText,
+ onClick: () => {
+ onCancel?.();
+ onOpenChange?.(false);
+ },
+ }),
+ Button({
+ type: 'primary',
+ size: 'sm',
+ text: okText,
+ onClick: () => {
+ onConfirm?.();
+ onOpenChange?.(false);
+ },
+ })
+ )
+ )
+ : null
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/skeleton.js b/src/pyouter/webui/gd5/ui/skeleton.js
new file mode 100644
index 0000000..e5b59ff
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/skeleton.js
@@ -0,0 +1,41 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Skeleton — placeholder shimmer for loading layouts.
+ * @param {object} [props]
+ * @param {'text'|'title'|'avatar'|'button'|'image'|'block'} [props.variant]
+ * @param {number|string} [props.width]
+ * @param {number|string} [props.height]
+ * @param {boolean} [props.active]
+ */
+export function Skeleton(props = {}) {
+ const { variant = 'text', width, height, active = true, className, style } = props;
+ const dim = { ...(typeof style === 'object' ? style : {}) };
+ if (width != null) dim.width = typeof width === 'number' ? `${width}px` : width;
+ if (height != null) dim.height = typeof height === 'number' ? `${height}px` : height;
+
+ return el('div', {
+ ...omit(props, ['variant', 'width', 'height', 'active', 'className', 'style']),
+ className: cx(
+ 'gd-skeleton',
+ `gd-skeleton--${variant}`,
+ active && 'gd-skeleton--active',
+ className
+ ),
+ style: dim,
+ attrs: { 'aria-hidden': 'true' },
+ });
+}
+
+/** Skeleton.Paragraph — a few text lines. */
+export function SkeletonParagraph(props = {}) {
+ const { rows = 3, className } = props;
+ const widths = ['100%', '92%', '78%', '88%', '64%'];
+ return el(
+ 'div',
+ { className: cx('gd-skeleton-paragraph', className) },
+ ...Array.from({ length: rows }, (_, i) =>
+ Skeleton({ variant: 'text', width: widths[i % widths.length] })
+ )
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/space.js b/src/pyouter/webui/gd5/ui/space.js
new file mode 100644
index 0000000..60600d5
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/space.js
@@ -0,0 +1,44 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Flex stack / row — antd Space analogue.
+ *
+ * @param {object} [props]
+ * @param {'horizontal'|'vertical'} [props.direction]
+ * @param {'sm'|'md'|'lg'} [props.size]
+ * @param {'start'|'center'|'end'} [props.align]
+ * @param {'start'|'center'|'end'|'between'} [props.justify]
+ */
+export function Space(props = {}, ...children) {
+ const {
+ direction = 'horizontal',
+ size = 'md',
+ align,
+ justify,
+ className,
+ } = props;
+
+ return el(
+ 'div',
+ {
+ ...omit(props, ['direction', 'size', 'align', 'justify', 'className']),
+ className: cx(
+ 'gd-space',
+ direction === 'vertical' && 'gd-space--vertical',
+ `gd-space--gap-${size}`,
+ align && `gd-space--align-${align}`,
+ justify && `gd-space--justify-${justify}`,
+ className
+ ),
+ },
+ ...children
+ );
+}
+
+export function Divider(props = {}) {
+ const { type = 'horizontal', className } = props;
+ return el('hr', {
+ ...omit(props, ['type', 'className']),
+ className: cx('gd-divider', type === 'vertical' && 'gd-divider--vertical', className),
+ });
+}
diff --git a/src/pyouter/webui/gd5/ui/steps.js b/src/pyouter/webui/gd5/ui/steps.js
new file mode 100644
index 0000000..1e3429f
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/steps.js
@@ -0,0 +1,83 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Steps — checkout / wizard stage indicators.
+ * @param {object} [props]
+ * @param {Array<{title:string,description?:string}>} [props.items]
+ * @param {number} [props.current] 0-based
+ * @param {'horizontal'|'vertical'} [props.direction]
+ */
+export function Steps(props = {}) {
+ const { items = [], current = 0, direction = 'horizontal', className } = props;
+ return el(
+ 'div',
+ {
+ ...omit(props, ['items', 'current', 'direction', 'className']),
+ className: cx(
+ 'gd-steps',
+ direction === 'vertical' && 'gd-steps--vertical',
+ className
+ ),
+ },
+ ...items.map((item, i) => {
+ const status = i < current ? 'finish' : i === current ? 'process' : 'wait';
+ return el(
+ 'div',
+ { className: cx('gd-steps__item', `gd-steps__item--${status}`) },
+ el('div', { className: 'gd-steps__indicator', text: String(i + 1) }),
+ el(
+ 'div',
+ { className: 'gd-steps__content' },
+ el('div', { className: 'gd-steps__title', text: item.title }),
+ item.description
+ ? el('div', { className: 'gd-steps__desc', text: item.description })
+ : null
+ )
+ );
+ })
+ );
+}
+
+/**
+ * QuantityStepper — increment / decrement numeric value.
+ * @param {object} [props]
+ * @param {number} [props.value]
+ * @param {number} [props.min]
+ * @param {number} [props.max]
+ * @param {number} [props.step]
+ * @param {function} [props.onChange]
+ */
+export function QuantityStepper(props = {}) {
+ const { value = 0, min = 0, max = Infinity, step = 1, onChange, className, disabled } =
+ props;
+ const dec = () => {
+ const next = Math.max(min, value - step);
+ if (next !== value) onChange?.(next);
+ };
+ const inc = () => {
+ const next = Math.min(max, value + step);
+ if (next !== value) onChange?.(next);
+ };
+ return el(
+ 'div',
+ {
+ ...omit(props, ['value', 'min', 'max', 'step', 'onChange', 'className']),
+ className: cx('gd-qty-stepper', className),
+ },
+ el('button', {
+ type: 'button',
+ className: 'gd-qty-stepper__btn',
+ text: '−',
+ disabled: disabled || value <= min,
+ onClick: dec,
+ }),
+ el('span', { className: 'gd-qty-stepper__value', text: String(value) }),
+ el('button', {
+ type: 'button',
+ className: 'gd-qty-stepper__btn',
+ text: '+',
+ disabled: disabled || value >= max,
+ onClick: inc,
+ })
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/table.js b/src/pyouter/webui/gd5/ui/table.js
new file mode 100644
index 0000000..9f92f30
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/table.js
@@ -0,0 +1,95 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Table / DataTable — rows & columns with optional sort headers.
+ * @param {object} [props]
+ * @param {Array<{key:string,title:string,sortable?:boolean}>} [props.columns]
+ * @param {Array} [props.dataSource]
+ * @param {string} [props.sortKey]
+ * @param {'asc'|'desc'} [props.sortOrder]
+ * @param {function} [props.onSort]
+ * @param {function} [props.rowKey]
+ */
+export function Table(props = {}) {
+ const {
+ columns = [],
+ dataSource = [],
+ sortKey,
+ sortOrder,
+ onSort,
+ rowKey = (row, i) => row.key ?? i,
+ className,
+ } = props;
+
+ return el(
+ 'div',
+ {
+ ...omit(props, [
+ 'columns',
+ 'dataSource',
+ 'sortKey',
+ 'sortOrder',
+ 'onSort',
+ 'rowKey',
+ 'className',
+ ]),
+ className: cx('gd-table-wrap', className),
+ },
+ el(
+ 'table',
+ { className: 'gd-table' },
+ el(
+ 'thead',
+ {},
+ el(
+ 'tr',
+ {},
+ ...columns.map((col) =>
+ el('th', {
+ className: cx(
+ 'gd-table__th',
+ col.sortable && 'gd-table__th--sortable',
+ sortKey === col.key && 'gd-table__th--sorted'
+ ),
+ text:
+ col.title +
+ (col.sortable && sortKey === col.key
+ ? sortOrder === 'asc'
+ ? ' ↑'
+ : ' ↓'
+ : ''),
+ onClick: col.sortable
+ ? () => {
+ const next =
+ sortKey === col.key && sortOrder === 'asc' ? 'desc' : 'asc';
+ onSort?.(col.key, next);
+ }
+ : undefined,
+ })
+ )
+ )
+ ),
+ el(
+ 'tbody',
+ {},
+ ...dataSource.map((row, i) =>
+ el(
+ 'tr',
+ { key: String(rowKey(row, i)), className: 'gd-table__tr' },
+ ...columns.map((col) =>
+ el('td', {
+ className: 'gd-table__td',
+ text:
+ row[col.key] != null
+ ? String(typeof row[col.key] === 'object' ? '' : row[col.key])
+ : '',
+ }, typeof row[col.key] === 'object' && row[col.key]?.dom ? row[col.key] : null)
+ )
+ )
+ )
+ )
+ )
+ );
+}
+
+export const DataTable = Table;
diff --git a/src/pyouter/webui/gd5/ui/tabs.js b/src/pyouter/webui/gd5/ui/tabs.js
new file mode 100644
index 0000000..56ececb
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/tabs.js
@@ -0,0 +1,78 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Tabs — label row + one active panel.
+ * Controlled via `activeKey` + `onChange`.
+ * @param {object} [props]
+ * @param {Array<{key:string,label:string,content?:any,disabled?:boolean}>} [props.items]
+ * @param {string} [props.activeKey]
+ * @param {function} [props.onChange]
+ */
+export function Tabs(props = {}) {
+ const { items = [], activeKey, onChange, className } = props;
+ const key = activeKey ?? items[0]?.key;
+ const active = items.find((it) => it.key === key) || items[0];
+
+ return el(
+ 'div',
+ {
+ ...omit(props, ['items', 'activeKey', 'onChange', 'className']),
+ className: cx('gd-tabs', className),
+ },
+ el(
+ 'div',
+ { className: 'gd-tabs__list', role: 'tablist' },
+ ...items.map((it) =>
+ el('button', {
+ type: 'button',
+ role: 'tab',
+ className: cx('gd-tabs__tab', it.key === key && 'gd-tabs__tab--active'),
+ text: it.label,
+ disabled: !!it.disabled,
+ attrs: {
+ 'aria-selected': it.key === key ? 'true' : 'false',
+ },
+ onClick: () => onChange?.(it.key),
+ })
+ )
+ ),
+ el(
+ 'div',
+ { className: 'gd-tabs__panel', role: 'tabpanel' },
+ active?.content ?? null
+ )
+ );
+}
+
+/**
+ * ToggleGroup / SegmentedControl — connected exclusive options.
+ * @param {object} [props]
+ * @param {Array<{value:string,label:string,disabled?:boolean}>} [props.options]
+ * @param {string} [props.value]
+ * @param {function} [props.onChange]
+ */
+export function ToggleGroup(props = {}) {
+ const { options = [], value, onChange, className, size = 'md' } = props;
+ return el(
+ 'div',
+ {
+ ...omit(props, ['options', 'value', 'onChange', 'className', 'size']),
+ className: cx('gd-toggle-group', `gd-toggle-group--${size}`, className),
+ role: 'group',
+ },
+ ...options.map((opt) =>
+ el('button', {
+ type: 'button',
+ className: cx(
+ 'gd-toggle-group__item',
+ opt.value === value && 'gd-toggle-group__item--active'
+ ),
+ text: opt.label,
+ disabled: !!opt.disabled,
+ onClick: () => onChange?.(opt.value),
+ })
+ )
+ );
+}
+
+export const SegmentedControl = ToggleGroup;
diff --git a/src/pyouter/webui/gd5/ui/text-extra.js b/src/pyouter/webui/gd5/ui/text-extra.js
new file mode 100644
index 0000000..ca843e4
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/text-extra.js
@@ -0,0 +1,127 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Truncate — ellipsis / line-clamp text.
+ * @param {object} [props]
+ * @param {string} [props.text]
+ * @param {number} [props.lines] 1 = single-line ellipsis
+ */
+export function Truncate(props = {}, ...children) {
+ const { text, lines = 1, className } = props;
+ const kids = children.length ? children : text != null ? [text] : [];
+ return el(
+ 'span',
+ {
+ ...omit(props, ['text', 'lines', 'className']),
+ className: cx(
+ 'gd-truncate',
+ lines > 1 ? 'gd-truncate--clamp' : 'gd-truncate--ellipsis',
+ className
+ ),
+ style: lines > 1 ? { WebkitLineClamp: String(lines) } : undefined,
+ },
+ ...kids
+ );
+}
+
+/**
+ * PasswordInput — sign-in form eye toggle pattern.
+ */
+export function PasswordInput(props = {}) {
+ const { visible = false, onToggleVisible, className, ...rest } = props;
+ return el(
+ 'div',
+ { className: cx('gd-password', className) },
+ el('input', {
+ ...rest,
+ type: visible ? 'text' : 'password',
+ className: cx('gd-input', 'gd-password__input'),
+ }),
+ el('button', {
+ type: 'button',
+ className: 'gd-password__eye',
+ text: visible ? 'Hide' : 'Show',
+ onClick: onToggleVisible,
+ })
+ );
+}
+
+/**
+ * OrDivider — “OR” rule used in sign-in forms.
+ */
+export function OrDivider(props = {}) {
+ const { text = 'OR', className } = props;
+ return el(
+ 'div',
+ { className: cx('gd-or-divider', className) },
+ el('span', { className: 'gd-or-divider__line' }),
+ el('span', { className: 'gd-or-divider__text', text }),
+ el('span', { className: 'gd-or-divider__line' })
+ );
+}
+
+/**
+ * SignInForm — labeled anatomy of a login form (composition).
+ */
+export function SignInForm(props = {}) {
+ const {
+ className,
+ email,
+ password,
+ passwordVisible,
+ onEmail,
+ onPassword,
+ onToggleVisible,
+ onSubmit,
+ onContinueWith,
+ providers = ['Google', 'GitHub'],
+ } = props;
+
+ return el(
+ 'form',
+ {
+ className: cx('gd-sign-in', className),
+ onSubmit: (e) => {
+ e.preventDefault();
+ onSubmit?.({ email, password });
+ },
+ },
+ el('label', { className: 'gd-field' },
+ el('span', { className: 'gd-field__label', text: 'Email' }),
+ el('input', {
+ type: 'email',
+ className: 'gd-input',
+ value: email,
+ placeholder: 'you@company.com',
+ onInput: (e) => onEmail?.(e.target.value),
+ })
+ ),
+ el('label', { className: 'gd-field' },
+ el('span', { className: 'gd-field__label', text: 'Password' }),
+ PasswordInput({
+ value: password,
+ visible: passwordVisible,
+ onToggleVisible,
+ onInput: (e) => onPassword?.(e.target.value),
+ })
+ ),
+ el('button', {
+ type: 'submit',
+ className: 'gd-btn gd-btn--primary gd-btn--md gd-btn--block',
+ text: 'Sign in',
+ }),
+ OrDivider({}),
+ el(
+ 'div',
+ { className: 'gd-sign-in__providers' },
+ ...providers.map((p) =>
+ el('button', {
+ type: 'button',
+ className: 'gd-btn gd-btn--default gd-btn--md gd-btn--block',
+ text: `Continue with ${p}`,
+ onClick: () => onContinueWith?.(p),
+ })
+ )
+ )
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/theme.js b/src/pyouter/webui/gd5/ui/theme.js
new file mode 100644
index 0000000..700b625
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/theme.js
@@ -0,0 +1,92 @@
+/**
+ * Built-in UI themes: orange (default), blue, green.
+ *
+ * import { setTheme, getTheme, themes } from '../ui/index.js';
+ * setTheme('blue'); // document.documentElement[data-gd-theme]
+ * setTheme('green', rootEl); // scope to an element
+ */
+
+/** @typedef {'orange'|'blue'|'green'} GdThemeName */
+
+/** @type {Record} */
+export const themes = {
+ orange: {
+ label: 'Orange',
+ primary: '#e86a17',
+ bg: '#ffffff',
+ },
+ blue: {
+ label: 'Blue',
+ primary: '#2f6fed',
+ bg: '#f3f6fb',
+ },
+ green: {
+ label: 'Green',
+ primary: '#2f8f5b',
+ bg: '#f3f8f4',
+ },
+};
+
+export const THEME_ATTR = 'data-gd-theme';
+
+/** @type {GdThemeName} */
+let currentTheme = 'orange';
+
+/**
+ * @param {string} name
+ * @returns {name is GdThemeName}
+ */
+export function isThemeName(name) {
+ return Object.prototype.hasOwnProperty.call(themes, name);
+}
+
+/**
+ * Apply a named theme. Default target is .
+ * @param {GdThemeName|string} name
+ * @param {HTMLElement|Document} [target]
+ * @returns {GdThemeName}
+ */
+export function setTheme(name, target) {
+ const theme = isThemeName(name) ? name : 'orange';
+ const el =
+ target && target.nodeType === 9
+ ? /** @type {Document} */ (target).documentElement
+ : target || (typeof document !== 'undefined' ? document.documentElement : null);
+
+ if (el && el.setAttribute) {
+ el.setAttribute(THEME_ATTR, theme);
+ }
+ currentTheme = theme;
+ return theme;
+}
+
+/**
+ * @param {HTMLElement|Document} [target]
+ * @returns {GdThemeName}
+ */
+export function getTheme(target) {
+ const el =
+ target && target.nodeType === 9
+ ? /** @type {Document} */ (target).documentElement
+ : target || (typeof document !== 'undefined' ? document.documentElement : null);
+ const fromDom = el?.getAttribute?.(THEME_ATTR);
+ if (isThemeName(fromDom)) return fromDom;
+ return currentTheme;
+}
+
+/**
+ * Resolve ConfigProvider / setTheme input to a theme name or token map.
+ * @param {string|{name?:string,algorithm?:string,token?:object}|null|undefined} theme
+ * @returns {{ name?: GdThemeName, token?: object }}
+ */
+export function resolveThemeInput(theme) {
+ if (theme == null || theme === '') return { name: undefined, token: undefined };
+ if (typeof theme === 'string') {
+ return { name: isThemeName(theme) ? theme : undefined, token: undefined };
+ }
+ const name = theme.name || theme.algorithm;
+ return {
+ name: isThemeName(name) ? name : undefined,
+ token: theme.token || undefined,
+ };
+}
diff --git a/src/pyouter/webui/gd5/ui/timeline.js b/src/pyouter/webui/gd5/ui/timeline.js
new file mode 100644
index 0000000..f68feb9
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/timeline.js
@@ -0,0 +1,38 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Timeline — vertical dated events.
+ * @param {object} [props]
+ * @param {Array<{key?:string,time?:string,title:string,description?:string,color?:string}>} [props.items]
+ */
+export function Timeline(props = {}) {
+ const { items = [], className } = props;
+ return el(
+ 'div',
+ {
+ ...omit(props, ['items', 'className']),
+ className: cx('gd-timeline', className),
+ },
+ ...items.map((item, i) =>
+ el(
+ 'div',
+ {
+ className: cx('gd-timeline__item', item.color && `gd-timeline__item--${item.color}`),
+ key: item.key || `tl-${i}`,
+ },
+ el('div', { className: 'gd-timeline__rail' }, el('span', { className: 'gd-timeline__dot' })),
+ el(
+ 'div',
+ { className: 'gd-timeline__body' },
+ item.time
+ ? el('div', { className: 'gd-timeline__time', text: item.time })
+ : null,
+ el('div', { className: 'gd-timeline__title', text: item.title }),
+ item.description
+ ? el('div', { className: 'gd-timeline__desc', text: item.description })
+ : null
+ )
+ )
+ )
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/todo.js b/src/pyouter/webui/gd5/ui/todo.js
new file mode 100644
index 0000000..3dfd842
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/todo.js
@@ -0,0 +1,274 @@
+import { Component } from '../engine/index.js';
+import { cx, el, loadUi } from './util.js';
+
+/**
+ * @typedef {'pending'|'active'|'done'} TodoStatus
+ * @typedef {{
+ * key?: string|number,
+ * text?: string,
+ * title?: string,
+ * status?: TodoStatus|'in_progress'|'completed'|'todo',
+ * disabled?: boolean,
+ * }} TodoItemInput
+ */
+
+/**
+ * Normalize status aliases.
+ * @param {string} [status]
+ * @returns {TodoStatus}
+ */
+export function normalizeTodoStatus(status) {
+ const s = String(status || 'pending').toLowerCase();
+ if (s === 'active' || s === 'in_progress' || s === 'current' || s === 'running') return 'active';
+ if (s === 'done' || s === 'completed' || s === 'complete' || s === 'finished') return 'done';
+ return 'pending';
+}
+
+/**
+ * @param {TodoItemInput[]|string[]} items
+ * @returns {Array<{key:string,text:string,status:TodoStatus,disabled:boolean,raw:any}>}
+ */
+export function normalizeTodoItems(items = []) {
+ return (items || []).map((item, i) => {
+ if (item == null || typeof item === 'string' || typeof item === 'number') {
+ return {
+ key: `todo-${i}`,
+ text: String(item ?? ''),
+ status: 'pending',
+ disabled: false,
+ raw: item,
+ };
+ }
+ return {
+ key: String(item.key ?? item.id ?? `todo-${i}`),
+ text: String(item.text ?? item.title ?? item.label ?? ''),
+ status: normalizeTodoStatus(item.status),
+ disabled: !!item.disabled,
+ raw: item,
+ };
+ });
+}
+
+/**
+ * Count done / total for header badge.
+ * @param {Array<{status:TodoStatus}>} items
+ */
+export function countTodoProgress(items = []) {
+ const total = items.length;
+ const done = items.filter((it) => it.status === 'done').length;
+ return { done, total };
+}
+
+/**
+ * Cycle pending → active → done → pending (handy for demos).
+ * @param {TodoStatus} status
+ * @returns {TodoStatus}
+ */
+export function nextTodoStatus(status) {
+ const s = normalizeTodoStatus(status);
+ if (s === 'pending') return 'active';
+ if (s === 'active') return 'done';
+ return 'pending';
+}
+
+function statusIcon(status) {
+ if (status === 'active') {
+ return el(
+ 'span',
+ {
+ className: 'gd-todo__icon gd-todo__icon--active',
+ attrs: { 'aria-hidden': 'true' },
+ },
+ el('span', { className: 'gd-todo__arrow' })
+ );
+ }
+ if (status === 'done') {
+ return el(
+ 'span',
+ {
+ className: 'gd-todo__icon gd-todo__icon--done',
+ attrs: { 'aria-hidden': 'true' },
+ },
+ el('span', { className: 'gd-todo__check' })
+ );
+ }
+ return el('span', {
+ className: 'gd-todo__icon gd-todo__icon--pending',
+ attrs: { 'aria-hidden': 'true' },
+ });
+}
+
+/**
+ * TodoList view — mountable Component (prefer calling `TodoList(props)` in trees).
+ */
+export class TodoListView extends Component {
+ constructor(deps = {}) {
+ super(deps);
+ this.state.data.title = deps.title ?? 'To-dos';
+ this.state.data.items = normalizeTodoItems(deps.items);
+ this.state.data.showProgress = deps.showProgress !== false;
+ this.state.data.className = deps.className || '';
+ // Bind so inline handlers can use this.setItems / this.getItems
+ this._onItemClick =
+ typeof deps.onItemClick === 'function' ? deps.onItemClick.bind(this) : null;
+ }
+
+ async mount(host, params = {}) {
+ await loadUi();
+ return super.mount(host, params);
+ }
+
+ /**
+ * @param {TodoItemInput[]|string[]} items
+ */
+ setItems(items) {
+ this.setData({ items: normalizeTodoItems(items) }, { refresh: !!this._mounted });
+ return this;
+ }
+
+ getItems() {
+ return this.state.data.items;
+ }
+
+ getProgress() {
+ return countTodoProgress(this.state.data.items);
+ }
+
+ setTitle(title) {
+ this.setData({ title: String(title ?? '') }, { refresh: !!this._mounted });
+ return this;
+ }
+
+ _renderItem(item, index) {
+ const interactive = typeof this._onItemClick === 'function' && !item.disabled;
+ const body = [statusIcon(item.status), el('span', { className: 'gd-todo__text', text: item.text })];
+ return el(
+ 'li',
+ {
+ key: item.key,
+ className: cx(
+ 'gd-todo__item',
+ `gd-todo__item--${item.status}`,
+ item.disabled && 'gd-todo__item--disabled'
+ ),
+ attrs: {
+ role: 'listitem',
+ 'data-status': item.status,
+ 'aria-current': item.status === 'active' ? 'step' : undefined,
+ },
+ },
+ interactive
+ ? el(
+ 'button',
+ {
+ type: 'button',
+ className: 'gd-todo__row gd-todo__row--interactive',
+ onClick: (e) => {
+ e.preventDefault();
+ this._onItemClick?.(item, index);
+ },
+ },
+ ...body
+ )
+ : el('div', { className: 'gd-todo__row' }, ...body)
+ );
+ }
+
+ render() {
+ const { title, items, showProgress, className } = this.state.data;
+ const { done, total } = countTodoProgress(items);
+
+ this.ensureShell(
+ (ids) => ids.gdTodoRoot,
+ ({ div, ul, span }) => {
+ div(
+ {
+ id: 'gdTodoRoot',
+ className: cx('gd-todo', className),
+ attrs: { role: 'list', 'aria-label': title },
+ },
+ div(
+ { className: 'gd-todo__header' },
+ span({ id: 'gdTodoTitle', className: 'gd-todo__title', text: title }),
+ showProgress
+ ? span({
+ id: 'gdTodoProgress',
+ className: 'gd-todo__progress',
+ text: `${done}/${total}`,
+ attrs: { 'aria-label': `${done} of ${total} completed` },
+ })
+ : null
+ ),
+ ul({ id: 'gdTodoList', className: 'gd-todo__list' })
+ );
+ }
+ );
+
+ const root = this.ids().gdTodoRoot;
+ const titleEl = this.ids().gdTodoTitle;
+ const progressEl = this.ids().gdTodoProgress;
+ const list = this.ids().gdTodoList;
+ if (!root || !list) return;
+
+ if (titleEl) titleEl.innerText = title;
+ if (typeof root.setAttribute === 'function') {
+ root.setAttribute('aria-label', title);
+ }
+
+ if (progressEl) {
+ progressEl.innerText = `${done}/${total}`;
+ if (typeof progressEl.setAttribute === 'function') {
+ progressEl.setAttribute('aria-label', `${done} of ${total} completed`);
+ }
+ }
+
+ list.textContent = '';
+ for (let i = 0; i < items.length; i++) {
+ list.appendChild(this._renderItem(items[i], i).dom());
+ }
+ }
+}
+
+/**
+ * TodoList — Cursor-style to-dos (like Button: call in the tree, no pre-`new` on `this`).
+ *
+ * ```js
+ * div(
+ * { id: 'root' },
+ * TodoList({
+ * items: [...],
+ * onItemClick(item, index) {
+ * this.setItems(this.getItems().map(...)); // `this` is the list
+ * },
+ * })
+ * )
+ * ```
+ *
+ * Statuses: `pending` · `active` · `done`
+ *
+ * @param {object} [props]
+ * @returns {TodoListView}
+ */
+export function TodoList(props = {}) {
+ return new TodoListView(props);
+}
+
+/**
+ * @param {object} [options]
+ * @param {HTMLElement|string} [host]
+ */
+export function createTodoList(options = {}, host) {
+ const list = TodoList(options);
+ const elHost =
+ typeof host === 'string'
+ ? typeof document !== 'undefined'
+ ? document.getElementById(host)
+ : null
+ : host;
+ if (elHost) void list.mount(elHost);
+ return list;
+}
+
+/** Alias */
+export const Todos = TodoList;
+export const Todo = TodoList;
diff --git a/src/pyouter/webui/gd5/ui/tree-select.js b/src/pyouter/webui/gd5/ui/tree-select.js
new file mode 100644
index 0000000..1d006ce
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/tree-select.js
@@ -0,0 +1,78 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * TreeSelect — select a node from a tree (antd TreeSelect, simplified).
+ * @param {object} [props]
+ * @param {Array<{value:string,title:string,children?:array}>} [props.treeData]
+ * @param {string} [props.value]
+ * @param {boolean} [props.open]
+ * @param {function} [props.onChange]
+ * @param {function} [props.onOpenChange]
+ */
+export function TreeSelect(props = {}) {
+ const {
+ treeData = [],
+ value,
+ open = false,
+ onChange,
+ onOpenChange,
+ placeholder = 'Please select',
+ className,
+ } = props;
+
+ const findTitle = (nodes, v) => {
+ for (const n of nodes) {
+ if (n.value === v) return n.title;
+ if (n.children) {
+ const t = findTitle(n.children, v);
+ if (t) return t;
+ }
+ }
+ return null;
+ };
+
+ const label = value != null ? findTitle(treeData, value) || value : placeholder;
+
+ const renderNodes = (nodes, depth = 0) =>
+ nodes.flatMap((n) => [
+ el('button', {
+ type: 'button',
+ className: cx(
+ 'gd-tree-select__option',
+ n.value === value && 'gd-tree-select__option--active'
+ ),
+ style: { paddingLeft: `${12 + depth * 14}px` },
+ text: n.title,
+ onClick: () => {
+ onChange?.(n.value, n);
+ onOpenChange?.(false);
+ },
+ }),
+ ...(n.children ? renderNodes(n.children, depth + 1) : []),
+ ]);
+
+ return el(
+ 'div',
+ {
+ ...omit(props, [
+ 'treeData',
+ 'value',
+ 'open',
+ 'onChange',
+ 'onOpenChange',
+ 'placeholder',
+ 'className',
+ ]),
+ className: cx('gd-tree-select', open && 'gd-tree-select--open', className),
+ },
+ el('button', {
+ type: 'button',
+ className: 'gd-tree-select__trigger',
+ text: String(label),
+ onClick: () => onOpenChange?.(!open),
+ }),
+ open
+ ? el('div', { className: 'gd-tree-select__dropdown' }, ...renderNodes(treeData))
+ : null
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/tree.js b/src/pyouter/webui/gd5/ui/tree.js
new file mode 100644
index 0000000..2a05cdd
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/tree.js
@@ -0,0 +1,222 @@
+import { cx, el, omit } from './util.js';
+
+/**
+ * Walk treeData and return keys from root to `key` (inclusive), or [].
+ * @param {Array<{key:string,children?:array}>} treeData
+ * @param {string} key
+ * @returns {string[]}
+ */
+export function treePathKeys(treeData, key) {
+ const walk = (nodes, trail) => {
+ for (const n of nodes || []) {
+ const next = [...trail, n.key];
+ if (n.key === key) return next;
+ if (n.children?.length) {
+ const found = walk(n.children, next);
+ if (found) return found;
+ }
+ }
+ return null;
+ };
+ return walk(treeData, []) || [];
+}
+
+/**
+ * Compute next expandedKeys after toggling `key`.
+ * Accordion: keep only root→key when opening; keep ancestors when closing.
+ * @param {object} opts
+ * @param {Array} opts.treeData
+ * @param {Set|string[]} opts.expandedKeys
+ * @param {string} opts.key
+ * @param {boolean} [opts.accordion]
+ * @returns {string[]}
+ */
+export function nextTreeExpandedKeys({
+ treeData,
+ expandedKeys,
+ key,
+ accordion = false,
+}) {
+ const expanded =
+ expandedKeys instanceof Set
+ ? expandedKeys
+ : new Set(expandedKeys || []);
+ const open = expanded.has(key);
+
+ if (accordion) {
+ const path = treePathKeys(treeData, key);
+ if (!path.length) return [...expanded];
+ return open ? path.slice(0, -1) : path;
+ }
+
+ const next = new Set(expanded);
+ if (open) next.delete(key);
+ else next.add(key);
+ return [...next];
+}
+
+function toKeySet(expandedKeys) {
+ return expandedKeys instanceof Set
+ ? new Set(expandedKeys)
+ : new Set(expandedKeys || []);
+}
+
+/**
+ * Tree / OutlineView — expandable rows with guide lines.
+ * Self-repaints on expand/select so it works under ensureShell.
+ *
+ * @param {object} [props]
+ * @param {Array<{key:string,title:string,children?:array}>} [props.treeData]
+ * @param {Set|string[]} [props.expandedKeys]
+ * @param {function} [props.onExpand]
+ * @param {string} [props.selectedKey]
+ * @param {function} [props.onSelect]
+ * @param {boolean} [props.accordion] 手风琴：只保留根→当前节点路径
+ */
+export function Tree(props = {}) {
+ const {
+ treeData = [],
+ expandedKeys,
+ onExpand,
+ selectedKey: selectedKeyProp,
+ onSelect,
+ accordion = false,
+ className,
+ } = props;
+
+ let expanded = toKeySet(expandedKeys);
+ let selectedKey = selectedKeyProp;
+
+ const root = el('div', {
+ ...omit(props, [
+ 'treeData',
+ 'expandedKeys',
+ 'onExpand',
+ 'selectedKey',
+ 'onSelect',
+ 'accordion',
+ 'className',
+ ]),
+ className: cx('gd-tree', accordion && 'gd-tree--accordion', className),
+ role: 'tree',
+ });
+
+ const paint = () => {
+ const host = root.dom();
+ while (host.firstChild) host.removeChild(host.firstChild);
+ for (const n of treeData) {
+ host.appendChild(renderNode(n).dom());
+ }
+ };
+
+ const applyExpand = (key) => {
+ const next = nextTreeExpandedKeys({
+ treeData,
+ expandedKeys: expanded,
+ key,
+ accordion,
+ });
+ expanded = new Set(next);
+ onExpand?.(next);
+ paint();
+ };
+
+ const renderNode = (node) => {
+ const hasKids = Array.isArray(node.children) && node.children.length > 0;
+ const open = expanded.has(node.key);
+
+ const twist = hasKids
+ ? el('button', {
+ type: 'button',
+ className: cx('gd-tree__twist', open && 'gd-tree__twist--open'),
+ attrs: { 'aria-label': open ? 'Collapse' : 'Expand' },
+ onClick: (e) => {
+ e.stopPropagation();
+ applyExpand(node.key);
+ },
+ })
+ : el('span', { className: 'gd-tree__twist gd-tree__twist--leaf' });
+
+ const selectNode = () => {
+ selectedKey = node.key;
+ onSelect?.(node.key, node);
+ if (!accordion) {
+ paint();
+ return;
+ }
+ if (hasKids) {
+ applyExpand(node.key);
+ } else {
+ expanded = new Set(treePathKeys(treeData, node.key).slice(0, -1));
+ onExpand?.([...expanded]);
+ paint();
+ }
+ };
+
+ const label = el('span', {
+ className: 'gd-tree__label',
+ text: node.title,
+ });
+
+ const row = el(
+ 'div',
+ {
+ className: cx(
+ 'gd-tree__row',
+ selectedKey === node.key && 'gd-tree__row--selected'
+ ),
+ onClick: selectNode,
+ },
+ twist,
+ label
+ );
+
+ if (hasKids && open) {
+ return el(
+ 'div',
+ {
+ className: 'gd-tree__node',
+ attrs: {
+ role: 'treeitem',
+ 'aria-expanded': 'true',
+ },
+ },
+ row,
+ el(
+ 'div',
+ { className: 'gd-tree__children', role: 'group' },
+ ...node.children.map((c) => renderNode(c))
+ )
+ );
+ }
+
+ return el(
+ 'div',
+ {
+ className: cx('gd-tree__node', !hasKids && 'gd-tree__node--leaf'),
+ attrs: {
+ role: 'treeitem',
+ 'aria-expanded': hasKids ? 'false' : undefined,
+ },
+ },
+ row
+ );
+ };
+
+ paint();
+ return root;
+}
+
+export const OutlineView = Tree;
+
+/** DisclosureTriangle — standalone twisty control (arrow). */
+export function DisclosureTriangle(props = {}) {
+ const { open = false, onClick, className } = props;
+ return el('button', {
+ ...omit(props, ['open', 'className']),
+ type: 'button',
+ className: cx('gd-tree__twist', open && 'gd-tree__twist--open', className),
+ onClick,
+ attrs: { 'aria-expanded': open ? 'true' : 'false' },
+ });
+}
diff --git a/src/pyouter/webui/gd5/ui/typography.js b/src/pyouter/webui/gd5/ui/typography.js
new file mode 100644
index 0000000..0f273a5
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/typography.js
@@ -0,0 +1,47 @@
+import { cx, el, omit } from './util.js';
+
+const TITLE_TAGS = { 1: 'h1', 2: 'h2', 3: 'h3', 4: 'h4', 5: 'h5' };
+
+/**
+ * @param {object} [props]
+ * @param {1|2|3|4|5} [props.level]
+ * @param {string} [props.text]
+ */
+export function Title(props = {}, ...children) {
+ const { level = 3, className, text } = props;
+ const tag = TITLE_TAGS[level] || 'h3';
+ const kids = children.length ? children : text != null ? [text] : [];
+ return el(
+ tag,
+ {
+ ...omit(props, ['level', 'className', 'text']),
+ className: cx('gd-title', `gd-title--${level}`, className),
+ },
+ ...kids
+ );
+}
+
+/**
+ * @param {object} [props]
+ * @param {'default'|'secondary'|'muted'|'danger'} [props.type]
+ * @param {boolean} [props.code]
+ * @param {boolean} [props.small]
+ */
+export function Text(props = {}, ...children) {
+ const { type = 'default', code, small, className, text, as = 'p' } = props;
+ const kids = children.length ? children : text != null ? [text] : [];
+ return el(
+ as,
+ {
+ ...omit(props, ['type', 'code', 'small', 'className', 'text', 'as']),
+ className: cx(
+ 'gd-text',
+ type !== 'default' && `gd-text--${type}`,
+ code && 'gd-text--code',
+ small && 'gd-text--small',
+ className
+ ),
+ },
+ ...kids
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/upload.js b/src/pyouter/webui/gd5/ui/upload.js
new file mode 100644
index 0000000..2bbb279
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/upload.js
@@ -0,0 +1,173 @@
+import { cx, el, omit } from './util.js';
+import { Button } from './button.js';
+
+/**
+ * Upload — file picker with file list (antd Upload, simplified).
+ * @param {object} [props]
+ * @param {Array<{uid:string,name:string,status?:string}>} [props.fileList]
+ * @param {boolean} [props.multiple]
+ * @param {string} [props.accept]
+ * @param {function} [props.onChange] ({ fileList, file })
+ * @param {function} [props.onRemove]
+ */
+export function Upload(props = {}) {
+ const {
+ fileList = [],
+ multiple = false,
+ accept,
+ onChange,
+ onRemove,
+ className,
+ text = 'Click to upload',
+ disabled,
+ } = props;
+
+ const inputId = props.id || `gd-upload-${Math.random().toString(36).slice(2, 8)}`;
+
+ return el(
+ 'div',
+ {
+ ...omit(props, [
+ 'fileList',
+ 'multiple',
+ 'accept',
+ 'onChange',
+ 'onRemove',
+ 'className',
+ 'text',
+ 'disabled',
+ ]),
+ className: cx('gd-upload', className),
+ },
+ el(
+ 'label',
+ { className: cx('gd-upload__trigger', disabled && 'gd-upload__trigger--disabled'), attrs: { for: inputId } },
+ Button({ type: 'default', text, disabled: !!disabled }),
+ el('input', {
+ id: inputId,
+ type: 'file',
+ className: 'gd-upload__input',
+ multiple: !!multiple,
+ accept,
+ disabled: !!disabled,
+ onChange: (e) => {
+ const files = Array.from(e.target.files || []);
+ const next = [
+ ...fileList,
+ ...files.map((f, i) => ({
+ uid: `${Date.now()}-${i}`,
+ name: f.name,
+ status: 'done',
+ originFileObj: f,
+ })),
+ ];
+ onChange?.({ fileList: next, file: next[next.length - 1] });
+ e.target.value = '';
+ },
+ })
+ ),
+ fileList.length
+ ? el(
+ 'ul',
+ { className: 'gd-upload__list' },
+ ...fileList.map((f) =>
+ el(
+ 'li',
+ { className: 'gd-upload__item', key: f.uid },
+ el('span', { className: 'gd-upload__name', text: f.name }),
+ el('button', {
+ type: 'button',
+ className: 'gd-upload__remove',
+ text: '×',
+ onClick: () => {
+ onRemove?.(f);
+ onChange?.({
+ fileList: fileList.filter((x) => x.uid !== f.uid),
+ file: f,
+ });
+ },
+ })
+ )
+ )
+ )
+ : null
+ );
+}
+
+/**
+ * Mentions — textarea with @ trigger suggestions (simplified antd Mentions).
+ * @param {object} [props]
+ * @param {string} [props.value]
+ * @param {string[]} [props.options]
+ * @param {boolean} [props.open]
+ * @param {function} [props.onChange]
+ * @param {function} [props.onOpenChange]
+ * @param {function} [props.onSelect]
+ */
+export function Mentions(props = {}) {
+ const {
+ value = '',
+ options = [],
+ open = false,
+ onChange,
+ onOpenChange,
+ onSelect,
+ className,
+ placeholder = 'Type @ to mention…',
+ } = props;
+
+ const at = value.lastIndexOf('@');
+ const query = at >= 0 ? value.slice(at + 1).split(/\s/)[0].toLowerCase() : '';
+ const filtered =
+ at >= 0
+ ? options.filter((o) => String(o).toLowerCase().includes(query))
+ : [];
+
+ return el(
+ 'div',
+ {
+ ...omit(props, [
+ 'value',
+ 'options',
+ 'open',
+ 'onChange',
+ 'onOpenChange',
+ 'onSelect',
+ 'className',
+ 'placeholder',
+ ]),
+ className: cx('gd-mentions', open && filtered.length && 'gd-mentions--open', className),
+ },
+ el('textarea', {
+ className: 'gd-textarea gd-mentions__input',
+ value,
+ placeholder,
+ onInput: (e) => {
+ const v = e.target.value;
+ onChange?.(v);
+ onOpenChange?.(v.includes('@'));
+ },
+ }),
+ open && filtered.length
+ ? el(
+ 'div',
+ { className: 'gd-mentions__list', role: 'listbox' },
+ ...filtered.map((name) =>
+ el('button', {
+ type: 'button',
+ className: 'gd-mentions__option',
+ text: `@${name}`,
+ onClick: () => {
+ const before = value.slice(0, at);
+ const after = value.slice(at + 1 + query.length);
+ const next = `${before}@${name} ${after}`;
+ onChange?.(next);
+ onSelect?.(name);
+ onOpenChange?.(false);
+ },
+ })
+ )
+ )
+ : null
+ );
+}
diff --git a/src/pyouter/webui/gd5/ui/util.js b/src/pyouter/webui/gd5/ui/util.js
new file mode 100644
index 0000000..097a20c
--- /dev/null
+++ b/src/pyouter/webui/gd5/ui/util.js
@@ -0,0 +1,66 @@
+import { D, adoptStyles } from '../engine/index.js';
+
+/** @type {Promise|null} */
+let stylesPromise = null;
+
+/**
+ * Load gd5 UI kit stylesheet once (co-located CSS).
+ * Apps can also `` +
+ `${text} `
+ );
+
+ return el(
+ 'div',
+ {
+ ...omit(props, ['content', 'gap', 'fontSize', 'color', 'className', 'rotate']),
+ className: cx('gd-watermark', className),
+ },
+ el('div', {
+ className: 'gd-watermark__layer',
+ style: {
+ backgroundImage: `url("data:image/svg+xml,${svg}")`,
+ backgroundSize: `${gap}px ${gap}px`,
+ },
+ attrs: { 'aria-hidden': 'true' },
+ }),
+ el('div', { className: 'gd-watermark__content' }, ...children)
+ );
+}
diff --git a/src/pyouter/webui/labels.js b/src/pyouter/webui/labels.js
new file mode 100644
index 0000000..d0c6c0f
--- /dev/null
+++ b/src/pyouter/webui/labels.js
@@ -0,0 +1,42 @@
+/** Shared Chinese labels for the pyouter web ui. */
+export const STATUS_LABEL = {
+ idle: "空闲",
+ pending: "等待",
+ running: "运行中",
+ success: "成功",
+ error: "失败",
+ cancelled: "已取消",
+};
+
+export const KIND_LABEL = {
+ router: "路由",
+ function: "函数",
+ object: "对象",
+ web: "接口",
+ docker: "命令",
+ compose: "编排",
+ ssh: "远程",
+ cluster: "集群",
+};
+
+export const LAYER_LABEL = {
+ docker: "容器",
+ ssh: "主机",
+ cluster: "集群",
+ server: "服务",
+};
+
+export const UI_LABEL = {
+ directory: "目录",
+ logs: "日志",
+ map: "路由图",
+ here: "你在这里",
+ local: "本机",
+ search: "搜索路由路径",
+ expand: "全部展开",
+ collapse: "全部折叠",
+ run: "执行",
+ stop: "停止",
+ copy: "复制命令",
+ copied: "已复制命令",
+};
diff --git a/src/pyouter/webui/labels.py b/src/pyouter/webui/labels.py
new file mode 100644
index 0000000..96d1529
--- /dev/null
+++ b/src/pyouter/webui/labels.py
@@ -0,0 +1,22 @@
+"""Labels embedded in the HTML boot payload for tests and the page shell."""
+
+BOOT_LABELS = {
+ "directory": "目录",
+ "logs": "日志",
+ "map": "路由图",
+ "here": "你在这里",
+ "local": "本机",
+ "kinds": {
+ "router": "路由",
+ "function": "函数",
+ "object": "对象",
+ "web": "接口",
+ "docker": "命令",
+ "compose": "编排",
+ "ssh": "远程",
+ "cluster": "集群",
+ "container": "容器",
+ "host": "主机",
+ "service": "服务",
+ },
+}
diff --git a/src/pyouter/webui/store.js b/src/pyouter/webui/store.js
new file mode 100644
index 0000000..c99039f
--- /dev/null
+++ b/src/pyouter/webui/store.js
@@ -0,0 +1,351 @@
+import { KIND_LABEL, LAYER_LABEL, STATUS_LABEL, UI_LABEL } from "./labels.js";
+
+const BOOT =
+ typeof window !== "undefined" && window.__PYOUTER_BOOT__
+ ? window.__PYOUTER_BOOT__
+ : {};
+
+export const state = {
+ tree: null,
+ nodes: {},
+ selected: "",
+ seq: 0,
+ filter: "",
+ expanded: new Set(),
+ script: BOOT.script || "pyouter",
+ mode: BOOT.mode || "app",
+ here: "",
+ focus: BOOT.focus || "",
+ live: false,
+};
+
+const listeners = new Set();
+
+export function subscribe(fn) {
+ listeners.add(fn);
+ return () => listeners.delete(fn);
+}
+
+export function notify() {
+ for (const fn of [...listeners]) fn(state);
+}
+
+export function runtimeMode() {
+ return state.mode === "runtime";
+}
+
+export function overlaps(left, right) {
+ if (left === right) return true;
+ if (left === "" || right === "") return true;
+ return left.startsWith(right + ".") || right.startsWith(left + ".");
+}
+
+export function nodeState(path) {
+ return (
+ state.nodes[path] || {
+ status: "idle",
+ logs: [],
+ error: null,
+ started_at: null,
+ finished_at: null,
+ owner: null,
+ }
+ );
+}
+
+export function findNode(node, path) {
+ if (!node) return null;
+ if (node.path === path) return node;
+ for (const child of node.children || []) {
+ const found = findNode(child, path);
+ if (found) return found;
+ }
+ return null;
+}
+
+export function layerKind(node) {
+ if (!node) return "";
+ if (node.layer && LAYER_LABEL[node.layer]) return node.layer;
+ return "";
+}
+
+export function httpLabel(node) {
+ if (!node || node.kind !== "web" || !node.rule) return "";
+ return ((node.method || "") + " " + node.rule).trim();
+}
+
+export function kindText(node) {
+ if (!node) return "";
+ const layer = layerKind(node);
+ if (layer) return LAYER_LABEL[layer];
+ const http = httpLabel(node);
+ if (http) return http;
+ if (node.route_type === "web" && node.kind === "router") return "服务";
+ if (node.route_type === "docker" && node.kind === "router") return "容器";
+ if (node.route_type === "compose" && node.kind === "router") return "编排";
+ if (node.route_type === "ssh" && node.kind === "router") return "主机";
+ if (node.route_type === "cluster" && node.kind === "router") return "集群";
+ return KIND_LABEL[node.kind] || node.kind || "";
+}
+
+export function kindName(node) {
+ if (!node) return "";
+ const layer = layerKind(node);
+ if (layer) return LAYER_LABEL[layer];
+ if (node.kind === "web") return KIND_LABEL.web;
+ if (node.kind === "docker") return KIND_LABEL.docker;
+ if (node.kind === "ssh") return KIND_LABEL.ssh;
+ if (node.route_type === "web" && node.kind === "router") return "服务";
+ if (node.route_type === "docker" && node.kind === "router") return "容器";
+ if (node.route_type === "compose" && node.kind === "router") return "编排";
+ if (node.route_type === "ssh" && node.kind === "router") return "主机";
+ if (node.route_type === "cluster" && node.kind === "router") return "集群";
+ return KIND_LABEL[node.kind] || node.kind || "";
+}
+
+export function statusDot(status) {
+ if (status === "running") return "processing";
+ if (status === "pending") return "away";
+ if (status === "success") return "success";
+ if (status === "error") return "error";
+ if (status === "cancelled") return "warning";
+ return "offline";
+}
+
+export function tagColor(status) {
+ if (status === "success") return "primary";
+ if (status === "error") return "danger";
+ return "default";
+}
+
+export function textMatch(node, filter) {
+ const blob = (
+ (node.path || "") +
+ " " +
+ (node.name || "") +
+ " " +
+ (node.target || "")
+ ).toLowerCase();
+ return blob.includes(filter);
+}
+
+export function subtreeVisible(node, filter) {
+ if (!filter || textMatch(node, filter)) return true;
+ return (node.children || []).some((child) => subtreeVisible(child, filter));
+}
+
+export function expandAll(node, into = state.expanded) {
+ if (!node) return into;
+ if ((node.children || []).length) into.add(node.path);
+ for (const child of node.children || []) expandAll(child, into);
+ return into;
+}
+
+export function collectExpanded(node, into = []) {
+ if (!node) return into;
+ if ((node.children || []).length && state.expanded.has(node.path)) {
+ into.push(node.path || "__root__");
+ }
+ for (const child of node.children || []) collectExpanded(child, into);
+ return into;
+}
+
+export function toTreeData(node, filter = "") {
+ if (!node) return [];
+ const normalized = (filter || "").trim().toLowerCase();
+
+ const convert = (item) => {
+ const children = item.children || [];
+ const showAll = !normalized || textMatch(item, normalized);
+ const kids = showAll
+ ? children
+ : children.filter((child) => subtreeVisible(child, normalized));
+ if (normalized && !showAll && !kids.length) return null;
+ const status = nodeState(item.path).status;
+ const kind = kindText(item);
+ const mark =
+ status && status !== "idle"
+ ? ` · ${STATUS_LABEL[status] || status}`
+ : kind
+ ? ` · ${kind}`
+ : "";
+ const key = item.path === "" ? "__root__" : item.path;
+ const entry = {
+ key,
+ path: item.path,
+ title: (item.name || "(root)") + mark,
+ node: item,
+ };
+ if (kids.length) {
+ entry.children = kids.map(convert).filter(Boolean);
+ }
+ return entry;
+ };
+
+ const root = convert(node);
+ return root ? [root] : [];
+}
+
+export function formatTime(ts) {
+ if (!ts) return "";
+ const date = new Date(ts * 1000);
+ const pad = (value) => String(value).padStart(2, "0");
+ return (
+ pad(date.getHours()) +
+ ":" +
+ pad(date.getMinutes()) +
+ ":" +
+ pad(date.getSeconds())
+ );
+}
+
+export function formatDuration(start, end) {
+ if (!start) return "—";
+ const ms = ((end || Date.now() / 1000) - start) * 1000;
+ if (ms < 1000) return Math.max(0, Math.round(ms)) + " ms";
+ if (ms < 60000) return (ms / 1000).toFixed(2) + " s";
+ const seconds = Math.floor(ms / 1000);
+ return Math.floor(seconds / 60) + " m " + (seconds % 60) + " s";
+}
+
+export function shellQuote(value) {
+ if (/^[A-Za-z0-9._+/-]+$/.test(value)) return value;
+ return '"' + value + '"';
+}
+
+export function commandFor(path) {
+ const script = shellQuote(state.script || "app.py");
+ if (!path) return "python " + script + " --web";
+ return "python " + script + " " + shellQuote(path);
+}
+
+export function activeOwner(path) {
+ for (const [key, node] of Object.entries(state.nodes)) {
+ if (node.status !== "running" && node.status !== "pending") continue;
+ if (!overlaps(key, path)) continue;
+ return node.owner != null ? node.owner : key;
+ }
+ return null;
+}
+
+export function childStats(path) {
+ const stats = {
+ running: 0,
+ pending: 0,
+ success: 0,
+ error: 0,
+ cancelled: 0,
+ };
+ for (const [key, node] of Object.entries(state.nodes)) {
+ if (key === path) continue;
+ if (path !== "" && !key.startsWith(path + ".")) continue;
+ if (stats[node.status] != null) stats[node.status] += 1;
+ }
+ return stats;
+}
+
+export function applyEvent(event) {
+ const node =
+ state.nodes[event.path] || {
+ status: "idle",
+ logs: [],
+ error: null,
+ started_at: null,
+ finished_at: null,
+ owner: null,
+ };
+ state.nodes[event.path] = node;
+ if (event.type === "reset") {
+ node.logs = [];
+ node.error = null;
+ node.started_at = null;
+ node.finished_at = null;
+ node.owner = null;
+ } else if (event.type === "status") {
+ node.status = event.status;
+ node.error = event.error;
+ node.started_at = event.started_at;
+ node.finished_at = event.finished_at;
+ node.owner = event.owner;
+ } else if (event.type === "log") {
+ node.logs = node.logs || [];
+ node.logs.push({
+ ts: event.ts,
+ stream: event.stream,
+ message: event.message,
+ });
+ }
+}
+
+export function applySnap(snap) {
+ state.tree = snap.tree;
+ state.mode = snap.mode || state.mode;
+ state.here = snap.here || "";
+ if (snap.script) state.script = snap.script;
+ if (snap.focus != null && snap.focus !== "") state.focus = snap.focus;
+}
+
+export async function fetchSnapshot() {
+ const snap = await (await fetch("/api/snapshot")).json();
+ applySnap(snap);
+ state.nodes = snap.nodes || {};
+ state.seq = snap.seq || 0;
+ state.live = true;
+ notify();
+ return snap;
+}
+
+export async function pollEvents() {
+ try {
+ const response = await fetch("/api/events?since=" + state.seq);
+ const data = await response.json();
+ if (data.gap) {
+ await fetchSnapshot();
+ return;
+ }
+ if (data.events && data.events.length) {
+ state.seq = data.seq;
+ data.events.forEach(applyEvent);
+ notify();
+ } else {
+ state.seq = data.seq;
+ }
+ state.live = true;
+ } catch (_error) {
+ state.live = false;
+ notify();
+ }
+}
+
+export async function runPath(path) {
+ const response = await fetch("/api/run", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ path }),
+ });
+ const data = await response.json().catch(() => ({}));
+ if (!response.ok || !data.ok) {
+ throw new Error(data.error || "执行失败");
+ }
+ return data;
+}
+
+export async function stopPath(path) {
+ const response = await fetch("/api/stop", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ path }),
+ });
+ const data = await response.json().catch(() => ({}));
+ if (!response.ok || !data.ok) {
+ throw new Error(data.error || "无法停止");
+ }
+ return data;
+}
+
+export function selectPath(path) {
+ state.selected = path || "";
+ notify();
+}
+
+export { KIND_LABEL, LAYER_LABEL, STATUS_LABEL, UI_LABEL, BOOT };
diff --git a/src/tests/test_web.py b/src/tests/test_web.py
index a08dd2f..149304e 100644
--- a/src/tests/test_web.py
+++ b/src/tests/test_web.py
@@ -218,7 +218,15 @@ def test_page_and_snapshot(self):
self.assertIn("目录", html)
self.assertIn("日志", html)
self.assertIn("路由图", html)
+ self.assertIn("/webui/app.js", html)
+ self.assertIn("gd5", html)
self.assertIn('"focus": "job.sync"', html)
+ status, raw = self._get("/webui/app.js")
+ self.assertEqual(status, 200)
+ self.assertIn("HomePage", raw.decode("utf-8"))
+ status, raw = self._get("/webui/gd5/ui/index.js")
+ self.assertEqual(status, 200)
+ self.assertIn("Tree", raw.decode("utf-8"))
status, raw = self._get("/api/snapshot")
snap = json.loads(raw.decode("utf-8"))
self.assertEqual(status, 200)