Otoe Preview Gallery

Static entry points for Otoe's current pre-alpha product surfaces: local operational interfaces, reference apps, portable UI evidence, and Wraith case studies.

Front-Door Previews

Hardware, Portable Core UI, and UI Kit are the neutral starting points. Wraith remains here as case-study evidence, not the product identity.

Reference app Product preview

Hardware Control Panel

Demonstrates: Python-first appliance UI for telemetry, controls, safe actions, and local hardware state.
Maturity: Static HTML is usable for review. Native PNG and offline bundle paths are pre-alpha evidence.
HTML: hardware.html hardware_cli.html
Regenerate: PYTHONPATH=src:. python -m examples.hardware.preview > preview/hardware.html PYTHONPATH=src:. python -m otoe render examples.hardware.control_panel:app --out /tmp/hardware_cli.fragment.html --css preview/hardware_portable.css --pretty Then copy the rendered fragment into the checked-in hardware_cli.html wrapper.

Reference gallery Public pre-alpha

Portable Core UI

Demonstrates: The current portable widget and product-preview UI primitive matrix.
Maturity: Support-matrix evidence for HTML/native/build parity work, not a stable API guarantee.
HTML: portable_core_ui.html
Regenerate: PYTHONPATH=src:. python -m otoe render examples.portable_core_ui:app --out preview/portable_core_ui.html --css preview/portable_core_ui.css --pretty

Reference app Product preview

UI Kit

Demonstrates: Shared UI primitives, route chrome, command palette, dialogs, select/menu states, and dense surfaces.
Maturity: Useful for visual review and live-preview interaction checks; native parity varies by component.
HTML: ui.html
Regenerate: PYTHONPATH=src:. python -m examples.ui.preview > preview/ui.html

Case study Static HTML

SaaS Case Study

Demonstrates: A polished dashboard shape using the same component/runtime path outside the appliance niche.
Maturity: Browser/static product-shape example; not Otoe's primary target market.
HTML: saas.html
Regenerate: PYTHONPATH=src:. python -m examples.saas.preview > preview/saas.html

Reference app Product preview

Utility Ops

Demonstrates: Utility-first operational console with helper components, low-level utility classes, and fallback states.
Maturity: Static reference app for app-author ergonomics; native/offline behavior is still evidence work.
HTML: utility_ops.html
Regenerate: PYTHONPATH=src:. python -m examples.utility.preview > preview/utility_ops.html

Case study Legacy static

Wraith Case Study

Demonstrates: The original Wraith-inspired runtime/status/arsenal surface that helped reveal Otoe's needs.
Maturity: Legacy case-study context. Useful evidence, but not Otoe's front-door product identity.
HTML: wraith.html
Regenerate: PYTHONPATH=src:. python -m examples.wraith.preview > preview/wraith.html

Case study Pre-alpha evidence

Wraith Mission Exec Case Study

Demonstrates: Dense operator-console showcase with fake local state, preflight checks, emergency controls, logs, and timeline.
Maturity: Pre-alpha showcase for HTML/native/build evidence. It does not touch hardware or mission runners.
HTML: wraith_mission_exec.html
Regenerate: PYTHONPATH=src:. python -m otoe render examples.wraith.mission_exec_showcase:app --out preview/wraith_mission_exec.html --css preview/wraith_mission_exec.css --pretty

Supporting Previews

These files keep reference CSS and case-study support surfaces visible even when they are not front-door cards.

Asset	HTML	Status	Regenerate
`admin.css`	admin.html	Supporting local-admin reference preview.	`PYTHONPATH=src:. python -m examples.admin.preview > preview/admin.html`
`data_workflow.css`	data_workflow.html	Supporting data workflow reference preview.	`PYTHONPATH=src:. python -m examples.data_workflow.preview > preview/data_workflow.html`
`wraith_input_console.css`	wraith_input_console.html	Wraith case-study support surface for portable input and command patterns.	`PYTHONPATH=src:. python -m otoe render examples.wraith_input_console:app --out preview/wraith_input_console.html --css preview/wraith_input_console.css --pretty`

CSS Inventory

CSS files are paired with checked-in HTML. Otoe CLI renders may inline resolved styles, so the HTML does not always contain a stylesheet link.

CSS	Checked-in HTML	Notes
`admin.css`	admin.html	Supporting local-admin reference preview.
`data_workflow.css`	data_workflow.html	Supporting data workflow reference preview.
`hardware.css`	hardware.html	Rich static hardware reference preview.
`hardware_portable.css`	hardware_cli.html	Strict portable CSS path for CLI render, native PNG, plan, and build evidence.
`portable_core_ui.css`	portable_core_ui.html	Portable Core UI support matrix/gallery source CSS.
`reference_theme.css`	hardware.html, admin.html, data_workflow.html, utility_ops.html	Shared browser-preview theme for neutral reference apps. Utility Ops also inlines generated utility CSS.
`saas.css`	saas.html	SaaS case-study browser stylesheet.
`ui.css`	ui.html	UI Kit browser stylesheet.
`wraith.css`	wraith.html	Legacy Wraith case-study stylesheet. Mission Exec now uses `wraith_mission_exec.css`.
`wraith_input_console.css`	wraith_input_console.html	Wraith case-study support surface.
`wraith_mission_exec.css`	wraith_mission_exec.html	Current Mission Exec showcase CSS. The legacy `wraith.css` link is no longer used by the checked-in showcase HTML.