UI redesign mockups + Studio no-provider banner#103
Open
KerroKapple wants to merge 25 commits into
Open
Conversation
Audit results + 10-task plan to patch 12 mockups in docs/superpowers/specs/2026-05-13-ui-redesign/mockups/ against IF.zip reference PNGs. Headless Chrome screenshots as verification. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add .fake-thumb base + 8 named variants (night/dock/watch/character/fog/ dawn/ember/prop) so 02/05/07/08 mockups can stop using empty radial gradients. Each variant stays inside the Amber Noir token palette and adds noise + vignette overlays to look like a backed-off film still without needing image assets. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Studio Home project cards now use the 8 fake-thumb variants from _shared.css. Removes the local per-card gradient overrides + dead ::after star-dot block. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The 12 index tiles were img src="file:///D:/Docs/IMG/IF/*.png" — broken on any non-author machine. Replace each with an <iframe> pointing at the corresponding mockup HTML (same relative path as the tile's link href, so zero new hardcoding). CSS variable --s drives a uniform transform: scale so iframes shrink to thumb size while preserving the 1536×1024 viewport the mockups are designed for. pointer-events: none lets clicks pass through to the parent <a>. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Vanilla custom elements, light DOM (children stay styled by _shared.css): ink-page — .page wrapper ink-chrome — top bar (logo + breadcrumb + slotted actions + kbd + avatar + window-ctrl) ink-win-ctrl — — / ▢ / ✕ macOS-ish controls ink-btn — variant="cta|ghost|danger|…", optional icon attr ink-chip — variant="on|success|warning|danger|info" ink-tag — variant="accent|warn|danger|ok" ink-mock-nav — bottom 12-page nav, auto-derives active from filename No build step. No framework. Single 142-line file. Drives the upcoming mockup refactor — each page becomes ~50 lines of component composition instead of 200+ lines of duplicated chrome / sidebar / button markup. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace inline window controls + 15-line mock-nav block + raw .btn.cta markup with <ink-win-ctrl> / <ink-btn variant="cta"> / <ink-mock-nav>. Also rename the local .tag rule to .subtitle to escape the global _shared.css .tag pill (border+radius) that was wrongly wrapping the "A DESK FOR STORYBOARDERS" tagline — matches PNG reference now. Visually identical to previous render; 165 → 127 lines. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ating menu items Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… tab Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…n + flex stack layout Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Without explicit width/height the SVG element renders at the default 300×150 box even when positioned absolute inset:0 — paths drawn at M 220,170 sit outside the rendered viewport and don't paint. Add width:100%; height:100%; overflow:visible. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ebug strip Restructure the mockup set so opening index.html behaves like launching the actual app rather than landing on a developer gallery. Routing: - index.html now redirects to 01-lock.html (the app entry). - The previous 12-tile gallery is preserved as _gallery.html for review. - ink-mock-nav (the bottom debug strip) is hidden by default; append ?dev=1 to any URL to bring it back for navigation testing. In-app navigation wired: - ink-chrome logo → 02-studio-home.html (any page → home). - ink-chrome avatar → 10-account.html (any page → account view). - ink-btn supports href="…": Lock's Unlock button now navigates to Studio Home; Studio's "+ New Project" FAB position fixed (the user- provided "fab" class was being clobbered by the component re-render). - Studio project cards: <div class="proj"> → <a class="proj" href="03-canvas.html"> with display:block + color:inherit so the anchor lays out identically. - Studio sidebar footer: ⚙ → Settings, 🏷 → Asset Library (icons that have a sibling screen become anchors). Component class-merge bug fix: ink-btn / ink-chip / ink-tag now preserve user-provided classes on the host element (e.g. .fab) instead of overwriting them on each render. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
App entry no longer gates on a single provider key. The Lock screen is out of the main flow but kept as a screen mockup (still reachable via ?dev=1 nav strip) — it can be repurposed later as a workspace-level encryption lock if desired. Changes: - index.html redirects to 02-studio-home.html instead of 01-lock.html. - 02 Studio Home gets a "No provider configured" banner above the project grid: amber warning left border + pulse dot + message + link to 09 Settings 服务商 + dismiss. Rationale: provider keys are already managed in 09 Settings (multi- provider, statuses, primary/backup). Forcing a single key on every launch was redundant and friction. Pro desktop apps (Final Cut, DaVinci, Procreate) don't gate launch on credentials. Lazy / deeplink model is friendlier. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Wire an `views` attribute on ink-chrome that renders a cross-view switcher (Canvas/Storyboard/Script/Generation/Queue) with filename-based active highlight. Previously these episode-level screens were dead-ends in app-simulation mode, reachable only via the ?dev=1 strip. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Show StudioProviderBanner above Recent Projects when no provider API key is configured (apiKeyUnlockedProvider == false) and not dismissed this session. Action opens Settings; dismiss hides it for the session. This replaces the demoted Lock gate with a soft nudge. Adds l10n keys (studioNoProviderMessage/Action) and widget + integration tests. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This branch bundles two related UI tracks since they diverged from
main:docs/superpowers/specs/2026-05-13-ui-redesign/mockups/): the full 12-screen Amber Noir redesign migrated to vanillaink-*web components, fake-thumb placeholders, app-simulation navigation, and (new this session) an episode view switcher in the chrome so Canvas/Storyboard/Script/Generation/Queue are reachable in-app instead of dead-ending.StudioProviderBannershows above Recent Projects when no provider API key is configured (apiKeyUnlockedProvider == false) and not dismissed this session — a soft nudge replacing the demoted Lock gate. Action opens Settings; dismiss hides for the session. Self-contained (noMaterialancestor needed), localized (en+zh), a11y live-region.The branch also merges the latest
origin/main(PR #101, Amber Noir Flutter shell).Test plan
flutter analyze— no issuesflutter test— 489 passed / 35 skipped (full suite, green at every checkpoint + pre-push hook)studio_provider_banner_test.dart(2) + 4studio_home_test.dartcases (banner shown when unconfigured, action→Settings, hidden when configured, dismiss hides)🤖 Generated with Claude Code