v0.6.6.0 ux: polish — second wave of browser-agent review fixes by jayzalowitz · Pull Request #155 · jayzalowitz/skytwin

jayzalowitz · 2026-05-05T21:44:00Z

Summary

Picks up the P1/P2 findings deferred from #154 (the hardening pass). 6 of the remaining UX review items from `.context/ux-review/FINDINGS.md` closed.

What ships

Settings — what's required and where it lives

Theme switcher relocated to Settings (P1 feat: real OpenClaw execution, 6 new domains, expanded onboarding #7). Pre-fix the picker pill (`🌑 Quiet Confidence ▼`) sat on every page header next to the page title — looked like a breadcrumb, not a clickable control. Now in a dedicated "Visual theme" card.
AI brain section retitled (P1 Guided first-run: connect → see signals → approve → watch twin learn #9). "(optional)" → "needed for Chat (optional otherwise)". When no providers are configured the body explicitly says "The Chat surface needs at least one AI provider configured here."

Chat → Settings deep-link (P1 #9)

409 "No AI provider configured" used to render in a bubble with no path forward. Now the bubble explains the dependency + carries an intent footer ("Open Settings → AI brain →") that hash-routes into Settings.

Onboarding modal dimmer (P2 #15)

Overlay bumped `rgba(0,0,0,.85)` → `.92` + `backdrop-filter: blur(4px)`. Sidebar/page behind the modal is now properly muted (was bleeding through at `.85`).

Console error spam reduction (P2 #20)

New `isApiKnownOffline()` in `api-client.js`. Badge-poll loop in `app.js` backs off 10s → 60s when API is known down.
Pre-fix: 110+ console errors per minute against a dead server. The connection banner already tells the user — aggressive polling was just noise.

Date input theming on Audit (P1 #11)

New `.themed-date` class so `<input type="date">` matches the rest of the form-input styling.
`color-scheme: dark light` makes the native picker icon use light glyphs on dark themes (vs. invisible dark-on-dark).
Webkit-specific `::-webkit-calendar-picker-indicator` filter brings the icon to readable contrast.

Visual verification

`.context/ux-review/20-after-pr2-onboarding-dimmer.png` — sidebar properly muted behind modal
`.context/ux-review/23-after-pr2-settings-with-theme.png` — page header now clean (no theme pill); new "Visual theme" card; "AI brain — needed for Chat" subtitle; "Signed in as You (1111…)" footer

Test plan

`pnpm build` — 20 packages green
`pnpm test` — 40 packages, all green
`pnpm lint` — clean
Browser-agent walkthrough at `localhost:3210` (web only, no API)
Manual: navigate to `#/assistant` with no AI provider; verify the deep-link footer hash-routes to Settings
Manual: switch themes from Settings → "Visual theme" card; verify it persists across reloads
Manual: open Audit on dark theme; verify the date picker icon is visible

What's still open from FINDINGS.md

feat: bootstrap SkyTwin monorepo (v0.1.0.0) #1 Hosted OAuth — needs verified Google OAuth app + production hosting; tracked separately
Live notification layer: SSE, approval expiry cron, push alerts #8 Settings consolidate "Advanced" sections — still 5 collapsed Advanced sections; needs a small refactor of the pattern
Dashboard completeness: audit log, rollback UI, decision search #10 Auto-save with toast — needs a toast component
Epic: SkyTwin v0.4 — Local-First Product Completion (HN Launch Ready) #12 footer status is now redundant with the new banner (one of them can come out)

🤖 Generated with Claude Code

Picks up the P1/P2 findings deferred from #154 (the hardening pass). 6 of the remaining UX review findings closed. Settings cleanup (P1 #7, #9) - Theme switcher relocated from page header (where it looked like a breadcrumb pill) to a dedicated "Visual theme" card in Settings. - AI provider section now titled "AI brain — needed for Chat (optional otherwise)" instead of just "(optional)" — the Chat feature requires it, the old title was misleading. Chat → Settings deep-link (P1 #9) - When POST /messages returns 409 "no AI provider configured", the chat bubble explains the dependency + footer link to Settings → AI brain. Previously the user got "No AI provider configured" with no path forward. Onboarding modal dimmer (P2 #15) - Bumped overlay rgba(0,0,0,.85) → .92 + backdrop-filter: blur(4px) so the sidebar/page behind the modal is properly muted (was bleeding through the glass effect at .85). Console error spam reduction (P2 #20) - New isApiKnownOffline() in api-client.js. Badge-poll loop in app.js backs off 10s → 60s when API is known down. Pre-fix produced 110+ console errors/min against a dead server. Date input theming on Audit (P1 #11) - New .themed-date class so native date inputs match the dark glass aesthetic (background, border, color-scheme for picker icon). - Webkit calendar-picker-indicator filter inverts the icon glyph on dark themes so it's actually visible. Tests: no new unit tests (browser-only). Backend suite still green across 40 packages. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Copilot

Pull request overview

This PR ships a second wave of UX polish fixes from the browser-agent review follow-up to #154, focusing on making Settings/Chat flows clearer, reducing offline noise, and improving visual consistency.

Changes:

Relocates the theme switcher from the global header into a dedicated Settings “Visual theme” card, and updates Settings copy to better communicate AI provider requirements for Chat.
Adds a Chat error-state affordance that links users to Settings when no AI provider is configured.
Reduces offline console spam by tracking “API known offline” state and backing off the approvals badge polling cadence; improves Audit date input theming and strengthens the onboarding modal dimmer.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`VERSION`	Bumps version to `0.6.6.0`.
`CHANGELOG.md`	Documents the v0.6.6.0 UX polish items and testing notes.
`apps/web/public/js/theme-switcher.js`	Changes mounting strategy to require an explicit target container (Settings card).
`apps/web/public/js/pages/settings.js`	Adds a “Visual theme” card, mounts the theme switcher there, and updates AI brain section labeling/copy.
`apps/web/public/js/pages/audit.js`	Applies `.themed-date` styling and adds date input aria labels.
`apps/web/public/js/pages/assistant.js`	Adds a “needs setup” footer link for the “no provider configured” Chat failure mode.
`apps/web/public/js/app.js`	Stops header-mounting the theme switcher; backs off approval badge polling when API is known offline.
`apps/web/public/js/api-client.js`	Introduces `isApiKnownOffline()` and tracks offline/online transitions in `fetchJSON()`.
`apps/web/public/css/styles.css`	Adds `.themed-date` styling and strengthens onboarding overlay dimming (alpha + blur).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

+export function mountThemeSwitcher(target) {
+  if (!target) return; // header auto-mount removed; explicit target required
+  // Remove any prior mount so the dropdown lives at exactly one location.
  const existing = document.getElementById('theme-switcher-root');
-  if (existing) return;
+  if (existing) existing.remove();


+import { fetchPendingApprovals, fetchHealth, fetchUser, listUsers, escapeHtml, isApiKnownOffline } from './api-client.js';
+import { initTheme } from './theme-switcher.js';
 import { connectSSE, disconnectSSE, isConnected } from './sse-client.js';


+  if (intentRoute?.kind === 'needs-setup') {
+    // UX review #9: deep-link to Settings AI brain section. Hash route
+    // keeps it inside the SPA. Friendlier than telling the user
+    // "configure a provider" with no path forward.
+    const target = intentRoute.target || '#/settings';
+    return `
+      <div class="assistant-action-footer assistant-action-footer-approval">
+        <a class="assistant-action-link" href="${escapeHtml(target)}">Open Settings → AI brain →</a>
+      </div>


Copilot AI review requested due to automatic review settings May 5, 2026 21:44

Copilot started reviewing on behalf of jayzalowitz May 5, 2026 21:44 View session

Copilot AI reviewed May 5, 2026

View reviewed changes

jayzalowitz merged commit 15af6d7 into main May 5, 2026
12 checks passed

jayzalowitz deleted the jayzalowitz/ux-polish branch May 5, 2026 21:55

jayzalowitz mentioned this pull request May 5, 2026

v0.6.7.0 ux: hosted-OAuth code path + Settings cleanup #156

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v0.6.6.0 ux: polish — second wave of browser-agent review fixes#155

v0.6.6.0 ux: polish — second wave of browser-agent review fixes#155
jayzalowitz merged 1 commit into
mainfrom
jayzalowitz/ux-polish

jayzalowitz commented May 5, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jayzalowitz commented May 5, 2026

Summary

What ships

Settings — what's required and where it lives

Chat → Settings deep-link (P1 #9)

Onboarding modal dimmer (P2 #15)

Console error spam reduction (P2 #20)

Date input theming on Audit (P1 #11)

Visual verification

Test plan

What's still open from FINDINGS.md

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants