Openclaw Ui

1.2: Mobile Layout QA & Touch Optimization

• Responsive CSS breakpoints: 380px (ultra-small), 480px (small phone), 860px (tablet), ∞ (desktop)
• Touch-friendly button/input minimum size: 44x44px (WCAG 2.1 AA compliance)
• Error banner vertical stacking on <380px (word-break: break-word)
• Chat textarea: min-height: 44px for easier touch input
• All form inputs (text, number, password) sized for comfortable mobile tap
• Horizontally scrollable top-nav keeps the expanded tab set usable on 360-430px viewports without layout breaks

1.3: Loading States & Spinners

• Centralized setLoading(componentId, isLoading) utility function
• SVG spinner animation: 20x20px inline, 1s rotation via CSS @keyframes
• Component opacity: 0.6 during loading, 1.0 when complete
• Ready for integration in any fetch/API operation (Dashboard, Chat, RAG, MQTT)
• No automatic integration yet; manual calls by component

1.4: Keyboard Shortcuts Panel

• Modal dialog triggered by ? key (only outside typing contexts)
• Displays all shortcuts: 1-5 (page switch), R (refresh health), ? (help), Esc (close), Enter (send/search)
• Modal closes on: Esc key, click outside, or X button
• Accessibility: role="dialog", aria-labelledby, aria-hidden toggled correctly
• Styled with inline CSS: cyan accent (--accent), monospace KBD indicators, contrast-compliant colors

Phase 2 — Features & Interaktivität

2.2: Action-Log Histogram

• Added SVG histogram (#action-log-hist) above action log stream
• Aggregates last 24 hours by hour bucket from action-log.latest.json
• Stacked bars: success (green) + fail (red), adaptive max scale
• Time ticks every 6h (00h, 06h, 12h, 18h etc.)

2.3: Dynamic Action Menu

• Replaced hardcoded action buttons with dynamic renderer (#action-buttons)
• Attempts GET /api/actions from OpenClaw gateway
• Sanitizes and persists action names in local config (actions key)
• Fallback to defaults (hello, time, photo, dalek) if endpoint unavailable

2.4: Dark Mode Toggle

• Added Canvas setting checkbox (#set-dark-mode)
• Persisted via config key darkMode
• Runtime theme switching with applyTheme()
• Light theme implemented via CSS variable overrides on body.light-mode

2.5: Operations / Decisions / Runbooks Read Model

• Added three new read-only tabs: Operations, Decisions, Runbooks
• New static feed /ops-brief.latest.json aggregates open-work, handover, decisions and runbooks into one browser-friendly payload
• Feed is generated by scripts/canvas-ops-brief.sh and refreshed from heartbeat after orchestration runs
• Operations tab shows open work, handover order, start/closeout checks and source paths
• Decisions tab indexes decision documents and highlights review hints from re-evaluation sections
• Runbooks tab renders quick summaries plus first-step bullets for operator orientation
• Service worker treats /ops-brief.latest.json as dynamic and bypasses cache for fresh reads

2.6: Skill Scout / Health / Metrics Tabs

• Added three new Skill-Lifecycle tabs: Scout, Health, Metrics
• New static feed /state-brief.latest.json aggregates skill-forge state files into one browser-friendly payload
• Feed generated by scripts/canvas-state-brief.sh from: known-skills.json, canary.json, incident-freeze.json, pending-blacklist.json, metrics-weekly.json, skill-risk-report.json, metrics.jsonl
• Scout tab shows KPI row (Known/Active/Canary/PendingReview/PendingBlacklist) and scrollable skill inventory table (up to 80 entries, priority sort)
• Health tab shows Freeze governance banner, active canary list (up to 30), high-risk skills table (up to 20)
• Metrics tab shows weekly KPIs, three SVG sparklines (install success %, rollback rate %, known skills total), recent runs table
• Status badge system (.st, .st-ok, .st-warn, .st-bad, .st-canary) for consistent state coloring across tables
• Service worker treats /state-brief.latest.json as dynamic and bypasses cache
• Heartbeat calls canvas-state-brief.sh after canvas-ops-brief.sh and logs result to action-log

2.7: Dashboard Summary Cards

• Added three new Dashboard summary cards: Open Work Snapshot, Scout Snapshot, Governance Snapshot
• Cards load from ops-brief.latest.json and state-brief.latest.json feeds
• Open Work Snapshot shows top 3 priority items from operations.open_work.items (P0/P1), clickable to Operations tab
• Scout Snapshot shows KPI row: Known/Active/Canary/PendingReview (with ok/warn status coloring)
• Governance Snapshot shows KPI row: Freeze/Canaries/HighRisk/PendingBL with appropriate status indicators
• Auto-refresh every 2 minutes with 60s local cache; lazy-load pattern using fetchWithPolicy
• New functions in app-dashboard.js: renderOpenWorkSnap(), renderScoutSnap(), renderHealthSnap(), refreshSummarySnapshots()

2.8: RAG Quick-Query Chips

• Added five curated Quick-Query chips above RAG search results
• Chips: "Open Work", "Decisions", "Runbooks", "Skill Governance", "Health Risks"
• Chip click auto-fills query input and triggers search immediately
• Chips use existing .chip class styling; responsive horizontal flex layout with overflow capability
• New event listeners in app-rag.js for [data-rag-quick] buttons

2.9: Skills Hub + Deep Links

• Added dedicated Skills tab with searchable/filterable skill inventory and detail pane
• Skills page consumes both /state-brief.latest.json and /skill-pages.latest.json
• Skill detail supports docs links (SKILL.md / runbook) and action command copy buttons
• Added hash deeplink support for per-skill detail selection (#skills:<slug>)
• Main router dispatches skill-select events so links from other modules can open exact skill detail

2.10: Skill Pages Feed + Heartbeat Integration

• New feed generator scripts/canvas-skill-pages-brief.sh builds enriched skill detail payload
• Feed merges known-skills state with local agent/skills/* directories to avoid blind spots
• Local-only skills get explicit fallback status/source (local) if not present in known-skills state
• Heartbeat dispatch now refreshes /skill-pages.latest.json and logs canvas_skill_pages_brief updated/failed
• Service worker treats /skill-pages.latest.json as dynamic network-first content

Steps

1. Validate UI change scope and affected integrations.
2. Keep UI resilient under bridge/API failures.
3. Prefer incremental, testable changes.
4. Document smoke checks and rollback path.

Boundaries

• Do not expose secrets or tokens in UI.
• Do not couple UI tightly to unstable internal APIs.
• Keep changes compatible with Raspberry Pi host constraints.
• Respect lifecycle gates: canary, provenance, rollback.

Owned Artifact

• /home/steges/infra/openclaw-data/canvas/index.html (deployment via symlink)
• Single source: /home/steges/agent/skills/openclaw-ui/html/index.html

Lifecycle

• Author via: ~/scripts/skill-forge author skill openclaw-ui --mode auto --reason "UI capability"
• Canary start: ~/scripts/skill-forge canary start openclaw-ui 24
• Promote: ~/scripts/skill-forge canary promote openclaw-ui
• Rollback: ~/scripts/skill-forge rollback openclaw-ui
• Provenance required before production promotion.

Validation Checklist (Phase 1.1 - 1.4)

Phase 1.1: Global Error Banner

• Error banner appears when Growbox fetch fails (toggle HA token invalid)
• Banner auto-dismisses after 15s
• Multiple errors queue (max 3)
• Dismiss button (✕) works
• Error type classification: auth/timeout/network shows correct color/hint
• Chat error triggers banner notification
• RAG search error shows both inline + banner
• Action Log error shows both inline + banner
• Browser DevTools console shows no JS errors
• Canvas UI still works on mobile (360px viewport)

Phase 1.2: Mobile Layout QA

• Expanded tab set loads without horizontal layout break on 360px device
• Expanded tab set loads without horizontal layout break on 390px device
• Expanded tab set loads without horizontal layout break on 430px device
• Buttons/inputs all >= 44x44px (touch-friendly)
• Error banner stacks vertically on <380px (word-break working)
• Font sizes legible on small screen (not <12px text)
• Top-nav remains reachable via horizontal scroll on small screens

Phase 1.3: Loading States & Spinners

• setLoading() function callable from browser console
• Spinner renders correctly (20x20px SVG)
• Spinner rotates (animation works)
• Component opacity reduces to 0.6 during loading
• Spinner removes cleanly on setLoading(..., false)

Phase 1.4: Keyboard Shortcuts Panel

• ? key opens shortcuts modal
• Modal displays all 6 shortcuts with clear descriptions
• Esc key closes modal
• Click outside modal closes it
• X button (close icon) closes modal
• Keyboard shortcuts still work (1-5, R) while modal is open
• Modal is accessible (aria-hidden, role, aria-labelledby in place)
• No console errors when opening/closing modal

Phase 2.2: Action-Log Histogram

• Histogram renders when action-log contains entries
• Success bars (green) and fail bars (red) stack correctly
• 24h buckets respected; no buckets outside time window
• Refresh button re-renders histogram with latest data

Phase 2.3: Dynamic Action Menu

• Action buttons load from /api/actions when endpoint available
• Fallback buttons appear when endpoint unavailable
• Unknown/invalid action names are filtered by sanitizer
• Clicking dynamic action triggers sendWithRetry with ops.<name> source

Phase 2.4: Dark Mode Toggle

• Dark mode checkbox reflects stored value
• Saving settings applies theme immediately (no reload)
• Theme persists after page refresh
• Light mode text/border contrast remains readable

Phase 2.5: Operations / Decisions / Runbooks

• ops-brief.latest.json is generated and valid JSON
• Operations tab renders KPIs, open work and handover lists without console errors
• Decisions tab renders document cards and review hints without console errors
• Runbooks tab renders document cards and first-step bullets without console errors
• Refresh buttons reload the feed successfully
• Service worker does not serve stale ops-brief.latest.json after refresh

Phase 2.6: Scout / Health / Metrics

• state-brief.latest.json is generated and valid JSON
• Scout tab renders KPI row and skill inventory table without console errors
• Health tab renders freeze banner, canary list and high-risk table without console errors
• Metrics tab renders KPI row, three SVG sparklines and recent runs table without console errors
• Refresh buttons reload the feed for all three tabs successfully
• Service worker does not serve stale state-brief.latest.json after refresh
• Heartbeat generates state-brief.latest.json and logs canvas_state_brief updated to action log

Phase 2.7: Dashboard Summary Cards

• Open Work Snapshot card renders with top 3 items from operations.open_work.items
• Scout Snapshot card renders KPI row without console errors
• Governance Snapshot card renders KPI row without console errors
• Cards display with correct status coloring (ok/warn/bad classes)
• Open Work items are clickable and navigate to Operations tab
• All three cards auto-refresh without user action
• Cards degrade gracefully when feeds unavailable (show "Feed load error")

Phase 2.8: RAG Quick-Query Chips

• Five Quick-Query chips render above RAG search results
• Each chip has correct label and data-rag-quick attribute
• Clicking a chip auto-fills the query input with correct text
• Clicking a chip triggers search automatically
• Chips are styled with .chip class and display horizontally
• Chips are responsive and scrollable on small screens

Phase 2.9: Skills Hub + Deep Links

• Skills tab is visible and opens page-skills without console errors
• Skills KPIs render from feed data
• Search filters list rows by slug/source/version text
• Status filter narrows list correctly (all, active, canary, etc.)
• Row click opens detail pane with purpose/status/source/version fields
• Docs links appear when skill_md/runbook paths are available
• Action buttons copy command to clipboard and show user feedback
• URL hash updates to #skills:<slug> on selection
• Loading URL with #skills:<slug> restores and opens matching detail row

Phase 2.10: Skill Pages Feed + Heartbeat

• skill-pages.latest.json is generated and valid JSON
• Feed contains both known skills and local-only skills
• Local-only skills use fallback status=local and source=local
• Heartbeat logs canvas_skill_pages_brief updated on successful run
• Heartbeat logs canvas_skill_pages_brief failed with non-zero rc on failure
• Service worker bypasses stale cache for /skill-pages.latest.json