Add Sandbox page prototype with interactive containment risk bar#2
Open
karkarl wants to merge 7 commits into
Open
Add Sandbox page prototype with interactive containment risk bar#2karkarl wants to merge 7 commits into
karkarl wants to merge 7 commits into
Conversation
Port the WinUI Sandbox settings page ("This Computer" -> Sandbox) into the
colophon prototype format so it can be previewed and iterated as a
click-through mockup. Adds the screen to prototypes.jsonc and the
supporting components (settings controls + app-shell chrome) to
components.jsonc.
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
…zing Improve the floating ContainmentRiskBar recap on the sandbox-riskbar prototype screen: - Strengthen the acrylic (92% surface tint + blur(40px) saturate(1.6)) so page content reads legibly beneath it instead of plain transparency. - Slim the level pill to match the header row's line height (drop fixed 30px height, 8px dot). - Extend the bar 12px past the cards on the left and right via a widened width and negative side margins. - Tune vertical padding so the acrylic extends below the tick meter. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Add PermToggle, ContainmentMeter, LevelReadout, and ContainmentRiskBarLive components driving a live security meter from the Files permission toggles via CSS :has() counting; rewire the sandbox-riskbar screen to use them and nudge the floating live bar up 24px. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Explain that pinned vs scrolling regions are configured per-screen (fit:"screen") and per-region (scroll:true) in the prototype data, not in the renderer, so each app/prototype pins its own parts. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
Note in the prototypes.jsonc schema header that the "winui" device frame draws a modern titlebar (content extends into the caption area, min/max/close float top-right), so a screen's title-bar row should include a fixed-width right spacer (tb-caption-reserve) to keep controls clear of the caption buttons. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
The prototype renderer now gates the extend-into-titlebar caption overlay behind an opt-in `windows-modern` chrome (colophon PR) instead of changing the default Windows frame globally. Point the two sandbox screens at the new `winui-modern` device so their titlebar row (hamburger, app icon, search, Disconnected badge) renders on the same level as the system min/max/close buttons, and update the header note accordingly. Preview-only design intent in .agents/design/ — no app code changed.
On the Sandbox risk-bar screen the level cards (Unprotected/Recommended/ Locked down) set `preset` but only re-highlighted their own labels: the ticker meter and level badge were wired to a separate control (the Files Write toggles) through fragile CSS :has(:checked) counting, so selecting a level never moved the ticker. Rewire the Security level readout, in-page ticker, and the floating recap bar to the `preset` state using the runtime's reliable visibleWhen re-render: - header badge -> preset-gated Badge (critical/positive/warning) - in-page meter -> preset-gated LevelTicksStatic (active u/r/l) - floating recap -> preset-gated ContainmentRiskBar variants Selecting a level now reliably moves the ticker and flips the badge in sync (in-page and floating), with no :has(:checked) invalidation races. Preview-only design intent in .agents/design/; no app code changed. Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.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 PR adds the click-through Sandbox page prototype to the design system (
.agents/design/), ported fromSandboxPage.xaml, plus an interactive containment-risk-bar demo.It is stacked on top of the seed design-system PR openclaw#962, so this PR's base is
karkarl-seed-design-systemand the diff shows only the prototype work (two files under.agents/design/).What's in it
SandboxPage.xamlsurface, expressed as design intent in.agents/design/prototypes.jsonc.PermToggle,ContainmentMeter,LevelReadout,ContainmentRiskBarLive) in.agents/design/components.jsonc. It's a live security meter driven purely by the Files permission toggles:Badgeflips from Recommended to Unprotected.:has()toggle-counting — no app code involved.Scope / caveats
.agents/design/; no application code is changed. Per the design-system authority model,components.jsonc/prototypes.jsoncare framework-agnostic preview intent, and the color hex values are preview-only (bind the mapped Fluent resource keys when porting to WinUI 3).karkarl-seed-design-system(PR Seed design system for OpenClaw Windows Hub openclaw/openclaw-windows-node#962). After Seed design system for OpenClaw Windows Hub openclaw/openclaw-windows-node#962 merges, this PR should be retargeted tomain.Files changed
.agents/design/components.jsonc.agents/design/prototypes.jsonc