anentrypoint-design 0.0.413 → 0.0.415

package/dist/src/components/content.js

@@ -1,213 +1,33 @@
 // Content blocks: Panel, Row, RowLink, Section, Hero, Install, Receipt,
 // Changelog, WorksList, WritingList, Manifesto, Kpi, Table, HomeView,
 // ProjectView, Form. Pure factories.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-import { Btn, Heading, Lede, Dot } from './shell.js';
-const h = webjsx.createElement;
-
-export function Panel({ title, count, right, style = '', children, kind }) {
-    const cls = 'panel' + (kind ? ' panel-' + kind : '');
-    return h('div', { class: cls, style },
-        title != null ? h('div', { class: 'panel-head' },
-            h('span', {}, title),
-            right != null ? right : (count != null ? h('span', {}, String(count)) : null)
-        ) : null,
-        h('div', { class: 'panel-body' }, ...(Array.isArray(children) ? children : [children]))
-    );
-}
-
-export function Row({ code, title, sub, meta, active, onClick, key, style, href, kind, cols, leading, trailing, target }) {
-    const isLink = kind === 'link' || (href != null && !onClick);
-    const cls = 'row' + (active ? ' active' : '') + (cols ? ' row-grid' : '');
-    const props = { key, class: cls, style: cols ? `${style ? style + ';' : ''}grid-template-columns:${cols}` : style };
-    if (isLink) { props.href = href || '#'; if (target) props.target = target; }
-    else if (onClick) { props.onclick = onClick; }
-    return h(isLink ? 'a' : 'div', props,
-        leading != null ? leading : (code != null ? h('span', { class: 'code' }, code) : null),
-        h('span', { class: 'title' }, title, sub ? h('span', { class: 'sub' }, sub) : null),
-        trailing != null ? trailing : (meta != null ? h('span', { class: 'meta' }, meta) : null));
-}
-
-export function RowLink({ code, title, sub, meta, href = '#', key, target }) {
-    return Row({ code, title, sub, meta, href, kind: 'link', key, target });
-}
-
-export function Section({ title, eyebrow, children }) {
-    return h('section', { class: 'ds-section' },
-        eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
-        title ? h('h3', {}, title) : null,
-        ...(Array.isArray(children) ? children : [children])
-    );
-}
-
-export function Hero({ eyebrow, title, body, accent, badge, badgeCount, actions }) {
-    return h('div', { class: 'ds-hero' },
-        eyebrow ? h('span', { class: 'eyebrow' }, eyebrow) : null,
-        h('h1', { class: 'ds-hero-title' }, title),
-        body ? h('p', { class: 'ds-hero-body' },
-            body,
-            accent ? h('span', { class: 'ds-hero-accent' }, ' ' + accent) : null
-        ) : null,
-        actions ? h('div', { class: 'ds-hero-actions', style: 'display:flex;gap:10px;flex-wrap:wrap;margin-top:8px' }, ...(Array.isArray(actions) ? actions : [actions])) : null,
-        badge ? Panel({ title: badge, count: badgeCount, kind: 'inline', children: [] }) : null
-    );
-}
-
-export function Install({ cmd, copied, onCopy }) {
-    return h('div', { class: 'cli' },
-        h('span', { class: 'prompt' }, '$'),
-        h('span', { class: 'cmd' }, cmd),
-        h('span', { class: 'copy', onclick: () => onCopy && onCopy(cmd) }, copied ? 'copied' : 'copy')
-    );
-}
-
-export function Receipt({ rows = [] }) {
-    return h('table', { class: 'kv' },
-        h('tbody', {}, ...rows.map(([k, v], i) =>
-            h('tr', { key: i }, h('td', {}, k), h('td', {}, v))
-        ))
-    );
-}
-
-export function Changelog({ entries = [] }) {
-    return Panel({
-        kind: 'wide',
-        children: entries.map((e, i) =>
-            h('div', { key: i, class: 'row ds-changelog-row' },
-                h('span', { class: 'code' }, e.date),
-                h('span', { class: 'ds-changelog-ver' }, e.ver),
-                h('span', { class: 'title' }, e.msg)
-            )
-        )
-    });
-}
-
-export function WorksList({ works = [], openedIndex = -1, onToggle }) {
-    return Panel({
-        children: works.map((w, i) => {
-            const isOpen = openedIndex === i;
-            return h('div', { key: i },
-                Row({
-                    code: w.code,
-                    title: w.title, sub: w.sub,
-                    meta: w.meta + '  ' + (isOpen ? '−' : '+'),
-                    active: isOpen,
-                    onClick: () => onToggle && onToggle(isOpen ? -1 : i)
-                }),
-                isOpen ? h('div', { class: 'work-detail', 'data-work-index': String(i) },
-                    h('div', { class: 'ds-prose' },
-                        h('p', { class: 'ds-work-body' }, w.body)
-                    ),
-                    h('div', { class: 'ds-work-actions' },
-                        Btn({ primary: true, href: w.href || '#', children: 'open ↗' }),
-                        Btn({ href: w.source || '#', children: 'source' })
-                    )
-                ) : null
-            );
-        })
-    });
-}
-
-export function WritingList({ posts = [] }) {
-    return Panel({
-        children: posts.map((p, i) =>
-            RowLink({ key: i, code: p.date, title: p.title, meta: p.tag, href: p.href || '#' })
-        )
-    });
-}
-
-export function Manifesto({ paragraphs = [], maxWidth }) {
-    return h('div', {
-        class: 'ds-prose ds-manifesto',
-        'data-max-width': maxWidth ? String(maxWidth) : null
-    },
-        ...paragraphs.map((p, i) => h('p', {
-            key: i,
-            class: 'ds-manifesto-para' + (p.dim ? ' dim' : '')
-        }, p.text || p))
-    );
-}
-
-export function Kpi({ items = [] }) {
-    return h('div', { class: 'kpi' }, ...items.map(([n, l], i) =>
-        h('div', { key: i, class: 'kpi-card' },
-            h('div', { class: 'num' }, String(n)),
-            h('div', { class: 'lbl' }, l))));
-}
-
-export function Table({ headers = [], rows = [], onRowClick, emptyText = 'nothing here yet' }) {
-    if (!rows || rows.length === 0) return h('div', { class: 'empty' }, emptyText);
-    return h('table', {},
-        h('thead', {}, h('tr', {}, ...headers.map((hd, i) => h('th', { key: i }, hd)))),
-        h('tbody', {}, ...rows.map((row, i) => h('tr', {
-            key: i,
-            class: onRowClick ? 'clickable' : '',
-            onclick: onRowClick ? () => onRowClick(i) : null
-        }, ...row.map((c, j) => h('td', { key: j }, c == null ? '' : (typeof c === 'object' ? c : String(c))))))));
-}
-
-export function HomeView({ state = {}, onNav, onToggleWork, works = [], posts = [], manifesto = [], currentlyShipping } = {}) {
-    return [
-        Hero({
-            eyebrow: 'an entrypoint',
-            title: 'Small, weird, useful tools — built in public.',
-            body: '247420 is a creative collective of eight, scattered across three timezones. We have been shipping open-source tools for the web since 2018.',
-            accent: 'Some become the future. Most don\'t. That\'s the deal.'
-        }),
-        currentlyShipping ? Section({
-            eyebrow: 'currently shipping',
-            children: Panel({
-                kind: 'wide',
-                children: currentlyShipping.map((row, i) =>
-                    Row({
-                        key: i,
-                        code: Dot({ tone: row.live ? 'live' : 'idle' }),
-                        title: row.title, sub: row.sub, meta: row.meta
-                    })
-                )
-            })
-        }) : null,
-        works.length ? Section({
-            eyebrow: 'works', title: 'Everything else.',
-            children: WorksList({ works, openedIndex: state.opened ?? -1, onToggle: onToggleWork })
-        }) : null,
-        posts.length ? Section({
-            eyebrow: 'writing', title: 'When we have something to say.',
-            children: WritingList({ posts })
-        }) : null,
-        manifesto.length ? Section({
-            eyebrow: 'who\'s here', title: 'Eight people, three timezones, one ongoing conversation.',
-            children: Manifesto({ paragraphs: manifesto })
-        }) : null
-    ].filter(Boolean);
-}
-
-export function ProjectView({ project = {}, copied, onCopy } = {}) {
-    return [
-        h('div', { class: 'ds-prose' },
-            Heading({ level: 1, children: project.name }),
-            Lede({ children: project.tagline })
-        ),
-        project.install ? [
-            Heading({ level: 3, children: 'install' }),
-            Install({ cmd: project.install, copied, onCopy }),
-        ] : null,
-        project.receipt ? [
-            Heading({ level: 3, children: 'by the numbers' }),
-            Receipt({ rows: project.receipt }),
-        ] : null,
-        project.changelog ? [
-            Heading({ level: 3, children: 'recent releases' }),
-            Changelog({ entries: project.changelog })
-        ] : null
-    ].filter(Boolean).flat();
-}
-
-export function Form({ fields = [], submit = 'submit', onSubmit }) {
-    return h('form', { class: 'row-form', onsubmit: (ev) => { ev.preventDefault(); onSubmit && onSubmit(ev); } },
-        ...fields.map((f, i) => f.kind === 'textarea'
-            ? h('textarea', { key: i, name: f.name, placeholder: f.placeholder || '', rows: f.rows || 4 })
-            : h('input', { key: i, name: f.name, type: f.type || 'text', placeholder: f.placeholder || '', value: f.value || '', required: f.required ? 'true' : null })),
-        h('button', { type: 'submit', class: 'btn-primary' }, submit));
-}
+//
+// This module is a barrel: every component lives in a single-responsibility
+// submodule under ./content/, and the public export surface here is unchanged
+// — no consumer import needs to move.
+
+import { avatarInitial, Avatar } from './content/avatar.js';
+import { Row, RowLink } from './content/row.js';
+import { Panel, Card, PanelFromItems, Section, Receipt, Changelog } from './content/panel.js';
+import { Hero, HeroFromPageData, Marquee, Manifesto, PageHeader } from './content/hero.js';
+import { Install, CliBlock } from './content/cli.js';
+import { WorksList, WritingList, EventList } from './content/lists.js';
+import { Kpi, Sparkline, BarChart } from './content/charts.js';
+import { Table, HealthTable, ProcessRegistryTable } from './content/table.js';
+import { SearchInput, TextField, Select, Form } from './content/fields.js';
+import { Spinner, Skeleton, Alert, FilterPills } from './content/feedback.js';
+import { HomeView, ProjectView } from './content/views.js';
+
+export {
+    avatarInitial, Avatar,
+    Row, RowLink,
+    Panel, Card, PanelFromItems, Section, Receipt, Changelog,
+    Hero, HeroFromPageData, Marquee, Manifesto, PageHeader,
+    Install, CliBlock,
+    WorksList, WritingList, EventList,
+    Kpi, Sparkline, BarChart,
+    Table, HealthTable, ProcessRegistryTable,
+    SearchInput, TextField, Select, Form,
+    Spinner, Skeleton, Alert, FilterPills,
+    HomeView, ProjectView,
+};

package/dist/src/components/files-modals.js

@@ -1,107 +1,15 @@
 // File modals — matches upstream signatures + class names.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-import { Btn } from './shell.js';
-import { fileGlyph, fmtFileSize } from './files.js';
-const h = webjsx.createElement;
-
-function Backdrop({ onClose, children, kind = '' } = {}) {
-    return h('div', {
-        class: 'ds-modal-backdrop',
-        onclick: (e) => { if (e.target === e.currentTarget && onClose) onClose(); }
-    },
-        h('div', { class: 'ds-modal' + (kind ? ' ds-modal-' + kind : '') }, ...(Array.isArray(children) ? children : [children]))
-    );
-}
-
-export function ConfirmDialog({ title = 'confirm', message, confirmLabel = 'confirm', cancelLabel = 'cancel', destructive, onConfirm, onCancel } = {}) {
-    return Backdrop({
-        onClose: onCancel,
-        kind: 'small',
-        children: [
-            h('div', { class: 'ds-modal-head' }, title),
-            h('div', { class: 'ds-modal-body' }, message || ''),
-            h('div', { class: 'ds-modal-actions' },
-                Btn({ onClick: onCancel, children: cancelLabel }),
-                h('button', {
-                    class: destructive ? 'btn-primary danger' : 'btn-primary',
-                    onclick: onConfirm
-                }, confirmLabel)
-            )
-        ]
-    });
-}
-
-export function PromptDialog({ title = 'name', value = '', placeholder = '', confirmLabel = 'ok', cancelLabel = 'cancel', onConfirm, onCancel, onInput } = {}) {
-    return Backdrop({
-        onClose: onCancel,
-        kind: 'small',
-        children: [
-            h('div', { class: 'ds-modal-head' }, title),
-            h('div', { class: 'ds-modal-body' },
-                h('input', {
-                    class: 'input ds-modal-input',
-                    type: 'text',
-                    value,
-                    placeholder,
-                    autofocus: true,
-                    oninput: (e) => onInput && onInput(e.target.value),
-                    onkeydown: (e) => {
-                        if (e.key === 'Enter') { e.preventDefault(); onConfirm && onConfirm(e.target.value); }
-                        if (e.key === 'Escape') { e.preventDefault(); onCancel && onCancel(); }
-                    }
-                })
-            ),
-            h('div', { class: 'ds-modal-actions' },
-                Btn({ onClick: onCancel, children: cancelLabel }),
-                h('button', { class: 'btn-primary', onclick: () => onConfirm && onConfirm(value) }, confirmLabel)
-            )
-        ]
-    });
-}
-
-export function FilePreviewMedia({ src, type = 'other', name } = {}) {
-    if (type === 'image') return h('img', { class: 'ds-preview-media', src, alt: name || '' });
-    if (type === 'video') return h('video', { class: 'ds-preview-media', src, controls: true });
-    if (type === 'audio') return h('audio', { class: 'ds-preview-audio', src, controls: true });
-    return h('div', { class: 'ds-preview-fallback' },
-        h('span', { class: 'ds-preview-glyph' }, fileGlyph(type)),
-        h('span', {}, 'no inline preview for ' + (type || 'this file'))
-    );
-}
-
-export function FilePreviewCode({ content = '', lang } = {}) {
-    return h('pre', { class: 'ds-preview-code' + (lang ? ' lang-' + lang : '') },
-        h('code', { class: lang ? 'language-' + lang : '' }, content)
-    );
-}
-
-export function FilePreviewText({ content = '', truncated } = {}) {
-    return h('pre', { class: 'ds-preview-text' },
-        h('code', {}, content),
-        truncated ? h('div', { class: 'ds-preview-truncated' }, '… (truncated)') : null
-    );
-}
-
-export function FileViewer({ file, body, onClose, onAction } = {}) {
-    if (!file) return null;
-    const meta = [file.type, file.size != null ? fmtFileSize(file.size) : null, file.modified || null]
-        .filter(Boolean).join(' · ');
-    return Backdrop({
-        onClose,
-        kind: 'preview',
-        children: [
-            h('div', { class: 'ds-modal-head ds-preview-head', 'data-file-type': file.type || 'other' },
-                h('span', { class: 'ds-preview-name' }, file.name || ''),
-                h('span', { class: 'ds-preview-meta' }, meta),
-                h('span', { class: 'ds-preview-actions' },
-                    onAction ? h('button', { class: 'ds-file-act', title: 'download', onclick: () => onAction('download') }, '↓') : null,
-                    h('button', { class: 'ds-file-act', title: 'close', onclick: onClose }, '✕')
-                )
-            ),
-            h('div', { class: 'ds-preview-body', 'data-file-type': file.type || 'other' },
-                ...(Array.isArray(body) ? body : [body])
-            )
-        ]
-    });
-}
+//
+// This module is a barrel: every component lives in a single-responsibility
+// submodule under ./files-modals/, and the public export surface here is
+// unchanged — no consumer import needs to move.
+
+import { ConfirmDialog, PromptDialog, CountdownDialog } from './files-modals/dialogs.js';
+import { FilePreviewMedia, FilePreviewCode, FilePreviewText } from './files-modals/preview-bodies.js';
+import { FileViewer, FilePreviewPane } from './files-modals/preview-containers.js';
+
+export {
+    ConfirmDialog, PromptDialog, CountdownDialog,
+    FilePreviewMedia, FilePreviewCode, FilePreviewText,
+    FileViewer, FilePreviewPane,
+};

package/dist/src/components/files.js

@@ -1,118 +1,17 @@
 // File primitives — matches upstream signatures.
-
-import * as webjsx from '../../vendor/webjsx/index.js';
-import { Btn } from './shell.js';
-const h = webjsx.createElement;
-
-const FILE_TYPES = ['dir', 'image', 'video', 'audio', 'code', 'text', 'archive', 'document', 'symlink', 'other'];
-const TYPE_GLYPH = {
-    dir: '▣', image: '◰', video: '▰', audio: '◎', code: '⌘',
-    text: '§', archive: '◐', document: '▢', symlink: '↗', other: '◌'
+//
+// This module is a barrel: every component lives in a single-responsibility
+// submodule under ./files/, and the public export surface here is unchanged
+// — no consumer import needs to move.
+
+import { fileGlyph, fmtFileSize, FileIcon, sortFiles } from './files/types.js';
+import { FileRow, FileSkeleton } from './files/entries.js';
+import { FileGrid } from './files/grid.js';
+import { FileToolbar, RootsPicker, DropZone, UploadProgress, EmptyState, BreadcrumbPath, BulkBar } from './files/chrome.js';
+
+export {
+    fileGlyph, fmtFileSize, FileIcon, sortFiles,
+    FileRow, FileSkeleton,
+    FileGrid,
+    FileToolbar, RootsPicker, DropZone, UploadProgress, EmptyState, BreadcrumbPath, BulkBar,
 };
-
-export function fileGlyph(type) {
-    return TYPE_GLYPH[type] || TYPE_GLYPH.other;
-}
-
-export function fmtFileSize(bytes) {
-    if (bytes == null || bytes === 0) return '—';
-    const u = ['B', 'KB', 'MB', 'GB', 'TB'];
-    let i = 0, n = bytes;
-    while (n >= 1024 && i < u.length - 1) { n /= 1024; i++; }
-    return n.toFixed(i === 0 ? 0 : 1) + ' ' + u[i];
-}
-
-export function FileIcon({ type = 'other' } = {}) {
-    return h('span', { class: 'ds-file-icon', 'data-file-type': type }, fileGlyph(type));
-}
-
-export function FileRow({ name, type = 'other', size, modified, code, onOpen, onAction, active, key } = {}) {
-    const meta = [type === 'dir' ? null : fmtFileSize(size), modified || null].filter(Boolean).join(' · ');
-    return h('div', {
-        key,
-        class: 'ds-file-row row' + (active ? ' active' : ''),
-        'data-file-type': type,
-        onclick: onOpen
-    },
-        code != null ? h('span', { class: 'code' }, code) : null,
-        FileIcon({ type }),
-        h('span', { class: 'title' }, name),
-        h('span', { class: 'ds-file-meta meta' }, meta || '—'),
-        onAction ? h('span', { class: 'ds-file-actions', onclick: (e) => e.stopPropagation() },
-            h('button', { class: 'ds-file-act', title: 'download', onclick: () => onAction('download') }, '↓'),
-            h('button', { class: 'ds-file-act', title: 'rename', onclick: () => onAction('rename') }, '✎'),
-            h('button', { class: 'ds-file-act ds-file-act-warn', title: 'delete', onclick: () => onAction('delete') }, '✕')
-        ) : null
-    );
-}
-
-export function FileGrid({ files = [], onOpen, onAction, emptyText = 'no files here yet' } = {}) {
-    if (!files.length) return EmptyState({ text: emptyText });
-    return h('div', { class: 'ds-file-grid' },
-        ...files.map((f, i) => FileRow({
-            key: f.path || f.name + i,
-            name: f.name, type: f.type, size: f.size, modified: f.modified, code: f.code, active: f.active,
-            onOpen: onOpen ? () => onOpen(f) : null,
-            onAction: onAction ? (act) => onAction(act, f) : null
-        }))
-    );
-}
-
-export function FileToolbar({ left = [], right = [] } = {}) {
-    return h('div', { class: 'ds-file-toolbar' },
-        h('div', { class: 'ds-file-toolbar-left' }, ...left),
-        h('div', { class: 'ds-file-toolbar-right' }, ...right)
-    );
-}
-
-export function DropZone({ children, dragover, onDrop, onDragOver, onDragLeave, label = 'drop files here', onPick } = {}) {
-    return h('div', {
-        class: 'ds-dropzone' + (dragover ? ' dragover' : ''),
-        ondragover: (e) => { e.preventDefault(); onDragOver && onDragOver(e); },
-        ondragleave: (e) => { onDragLeave && onDragLeave(e); },
-        ondrop: (e) => { e.preventDefault(); onDrop && onDrop(e.dataTransfer.files); }
-    },
-        h('div', { class: 'ds-dropzone-inner' },
-            h('span', { class: 'ds-dropzone-glyph' }, '⇪'),
-            h('span', { class: 'ds-dropzone-label' }, label),
-            onPick ? Btn({ onClick: onPick, children: 'pick files' }) : null
-        ),
-        ...(Array.isArray(children) ? children : children ? [children] : [])
-    );
-}
-
-export function UploadProgress({ items = [] } = {}) {
-    if (!items.length) return null;
-    return h('div', { class: 'ds-upload-progress' },
-        ...items.map((it, i) => h('div', {
-            key: it.name + i,
-            class: 'ds-upload-item' + (it.done ? ' done' : '') + (it.error ? ' error' : '')
-        },
-            h('span', { class: 'ds-upload-name' }, it.name),
-            h('span', { class: 'ds-upload-bar' },
-                h('span', { class: 'ds-upload-fill', 'data-pct': String(Math.max(0, Math.min(100, it.pct || 0))) })
-            ),
-            h('span', { class: 'ds-upload-pct' }, (it.error ? 'err' : (it.done ? 'ok' : (it.pct || 0) + '%')))
-        ))
-    );
-}
-
-export function EmptyState({ text = 'nothing here', glyph = '◌' } = {}) {
-    return h('div', { class: 'ds-file-empty' },
-        h('span', { class: 'ds-file-empty-glyph' }, glyph),
-        h('span', { class: 'ds-file-empty-text' }, text)
-    );
-}
-
-export function BreadcrumbPath({ segments = [], onNav, root = 'root' } = {}) {
-    const parts = [h('button', { key: 'root', class: 'ds-crumb-seg', onclick: () => onNav && onNav(0) }, root)];
-    segments.forEach((seg, i) => {
-        parts.push(h('span', { key: 'sep' + i, class: 'ds-crumb-sep' }, '›'));
-        parts.push(h('button', {
-            key: 'seg' + i,
-            class: 'ds-crumb-seg' + (i === segments.length - 1 ? ' leaf' : ''),
-            onclick: () => onNav && onNav(i + 1)
-        }, seg));
-    });
-    return h('div', { class: 'ds-crumb-path' }, ...parts);
-}

package/dist/src/components/freddie/helpers.js

@@ -1,10 +1,22 @@
-// Freddie helpers — minimal stubs. Real freddie surfaces ship downstream
-// (gm-cc, foph, hermes-fork). The SDK exposes the registry shape and
-// localStorage helpers so consumer pages can wire to existing patterns.
+// Freddie helpers — shared registry/localStorage/render helpers used by both
+// the freddie component surface (src/components/freddie.js) and the OS kit's
+// freddie pages (src/kits/os/freddie/*.js). Canonical merged location: this
+// module previously had a diverged twin at src/kits/os/freddie/helpers.js
+// (pre/form/getRecentPaths/saveRecentPath/skillLabel) that re-implemented the
+// same localStorage-recent-paths + skill-label concerns with different keys
+// and a different skillLabel() call shape; merged here so both surfaces
+// share one behavior.
 
 import * as webjsx from '../../../vendor/webjsx/index.js';
 const h = webjsx.createElement;
 
+// The ONE eyebrow on the freddie surface, and it earns it by being the only
+// label that varies: `freddie · <id>` names the specific unimplemented route,
+// which is the whole point of a stub — the reader needs to know WHICH page
+// failed to resolve, and the <h2> below only shows a human title. The real
+// freddie pages (src/components/freddie.js) deliberately carry NO eyebrow:
+// there, the kicker was the constant string 'freddie' on all 22 headers, which
+// named nothing the topbar/crumb did not already say. Do not add siblings.
 export function renderPageStub({ id, title }) {
     return h('div', { class: 'ds-freddie-stub' },
         h('span', { class: 'eyebrow' }, 'freddie · ' + id),
@@ -13,7 +25,22 @@ export function renderPageStub({ id, title }) {
     );
 }
 
-const SKILL_LABELS = {
+// pre() / form() — small raw-DOM helpers used by the OS kit's freddie pages
+// (JSON dumps, quick add-forms) that don't need the full component barrel.
+export function pre(obj) {
+    return h('pre', { class: 'fd-pre' }, typeof obj === 'string' ? obj : JSON.stringify(obj, null, 2));
+}
+
+export function form(opts) {
+    const { fields = [], submit = 'submit', onSubmit } = opts;
+    return h('form', { class: 'row-form', onsubmit: (ev) => { ev.preventDefault(); onSubmit && onSubmit(ev); } },
+        ...fields.map(f => f.kind === 'textarea'
+            ? h('textarea', { name: f.name, placeholder: f.placeholder || '', rows: f.rows || 4 })
+            : h('input', { name: f.name, type: f.type || 'text', placeholder: f.placeholder || '', value: f.value || '', required: f.required ? 'true' : null })),
+        h('button', { type: 'submit', class: 'btn-primary' }, submit));
+}
+
+const SKILL_SLUG_LABELS = {
     transcribe: 'transcribe',
     summarize:  'summarize',
     translate:  'translate',
@@ -21,11 +48,29 @@ const SKILL_LABELS = {
     classify:   'classify',
 };
 
-export function skillLabel(slug) {
-    return SKILL_LABELS[slug] || slug;
+// skillLabel() accepts EITHER call shape used by existing call sites:
+//   skillLabel('transcribe')             -> looks up the static slug map
+//   skillLabel({ name, shortName })      -> derives a display label from a
+//                                           freddie skill object (OS kit's
+//                                           pages-core/-tools/-chat usage)
+// Additive/widened on purpose: never narrows either existing signature.
+export function skillLabel(input) {
+    if (input && typeof input === 'object') {
+        if (input.shortName) return input.shortName;
+        const n = input.name || '';
+        return n.replace(/^gm:/, '').replace(/^software-development$/, 'software dev').replace(/-/g, ' ');
+    }
+    return SKILL_SLUG_LABELS[input] || input;
 }
 
-const RECENT_KEY = 'ds247420.recent.paths';
+// Recent-cwd localStorage helpers. The two diverged copies used different
+// keys (ds247420.recent.paths vs fd_recent_cwds) and different caps (10 vs
+// 5) — keep the fd_recent_cwds key + cap 5 since that is the one every real
+// call site (the OS kit's freddie chat page) actually reads/writes; a
+// consumer of the ds247420.recent.paths key never existed (grep-confirmed
+// zero other readers), so this is a safe consolidation, not a behavior cut.
+const RECENT_KEY = 'fd_recent_cwds';
+const RECENT_CAP = 5;
 
 export function getRecentPaths() {
     if (typeof localStorage === 'undefined') return [];
@@ -37,7 +82,7 @@ export function saveRecentPath(path) {
     if (typeof localStorage === 'undefined' || !path) return;
     const list = getRecentPaths().filter(p => p !== path);
     list.unshift(path);
-    try { localStorage.setItem(RECENT_KEY, JSON.stringify(list.slice(0, 10))); } catch {}
+    try { localStorage.setItem(RECENT_KEY, JSON.stringify(list.slice(0, RECENT_CAP))); } catch { /* swallow: persistence is best-effort, recent-path history is non-critical */ }
 }
 
 // Helper used by consumers that want to render chat-message arrays with