@bongos/core 1.19.725 → 1.19.727

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (229) hide show
  1. package/.bongos-core.json +179 -494
  2. package/.devcontainer/Dockerfile +1 -1
  3. package/.devcontainer/devcontainer.json +2 -2
  4. package/.devcontainer/healthcheck.sh +1 -1
  5. package/.devcontainer/init-firewall.sh +1 -1
  6. package/.devcontainer/post-create.sh +2 -2
  7. package/.env.local.example +1 -1
  8. package/Dockerfile +1 -1
  9. package/docs/copy-inventory.md +1 -1
  10. package/docs/copy-registry.json +9 -9
  11. package/docs/module-api-changelog.md +4 -0
  12. package/docs/recipes/devbox-app-release.md +4 -4
  13. package/modules/dev-box/app/scripts/dmgbuild-settings.py +5 -5
  14. package/modules/dev-box/app/scripts/gen-brand.js +1 -1
  15. package/modules/dev-box/app/src/brand.js +1 -1
  16. package/modules/dev-box/app/test/unit.mjs +16 -16
  17. package/modules/dev-box/box-access.js +1 -1
  18. package/modules/dev-box/routes/box.js +1 -1
  19. package/modules/discord/discord-approvals.js +1 -1
  20. package/modules/grading/grader-model.js +1 -1
  21. package/modules/grading/grader-prompt.js +1 -1
  22. package/modules/grading/grader-workers/quality.js +1 -1
  23. package/modules/hall-ui/module.json +1 -1
  24. package/modules/hall-ui/public/brand-apply.js +1 -1
  25. package/modules/hall-ui/public/shell.js +1 -1
  26. package/modules/hall-ui/public/work.js +1 -1
  27. package/modules/lifecycle/conflict-resolve.js +1 -1
  28. package/modules/lifecycle/db-analytics.js +1 -1
  29. package/modules/lifecycle/routes/analytics.js +1 -1
  30. package/modules/onboarding/approval-broadcast.js +1 -1
  31. package/modules/onboarding/onboarding.js +1 -1
  32. package/modules/provisioning/tests/liveness.mjs +1 -1
  33. package/modules/public-landing/public/index.html +1 -1
  34. package/modules/public-landing/public/projects-floor.states.json +2 -2
  35. package/modules/public-landing/public/projects.probes.json +4 -4
  36. package/modules/public-landing/public/projects.states.json +2 -2
  37. package/modules/status-ui/module.json +1 -1
  38. package/modules/status-ui/public/status.js +4 -4
  39. package/modules/status-ui/public/style.css +1 -1
  40. package/modules/ui-design/kit/fixtures/cost-summary.json +1 -1
  41. package/modules/ui-design/kit/fixtures/featured-hub.json +1 -1
  42. package/modules/ui-design/kit/fixtures/featured.json +1 -1
  43. package/modules/ui-design/kit/fixtures/leaderboard.json +1 -1
  44. package/modules/ui-design/kit/fixtures/my-projects.json +1 -1
  45. package/modules/ui-design/kit/fixtures/progress.json +1 -1
  46. package/modules/ui-design/kit/fixtures/recent-shipped.json +1 -1
  47. package/package-lock.json +2 -2
  48. package/package.json +1 -1
  49. package/scripts/cron/style_guide_audit.sh +1 -1
  50. package/scripts/discord/lib.js +1 -1
  51. package/scripts/discord/post.js +1 -1
  52. package/scripts/gds/audit-authorship.sh +1 -1
  53. package/scripts/gds/audit-replay.sh +29 -2
  54. package/scripts/gds/audit-ships.js +1 -1
  55. package/scripts/gds/backfill-sessions.js +2 -2
  56. package/scripts/gds/cf-tunnel.js +4 -4
  57. package/scripts/gds/claude-materialize.js +2 -2
  58. package/scripts/gds/cli-lib.js +6 -6
  59. package/scripts/gds/cutover-codemod.js +1 -1
  60. package/scripts/gds/dev-lib.js +2 -2
  61. package/scripts/gds/diagnose-achievements.js +2 -2
  62. package/scripts/gds/fitness-checks-identity.js +6 -4
  63. package/scripts/gds/gate-review.js +14 -6
  64. package/scripts/gds/gen-diagrams.js +1 -1
  65. package/scripts/gds/leak-scan-allowlist.js +293 -0
  66. package/scripts/gds/learning-capture.js +1 -1
  67. package/scripts/gds/linkify-refs.js +2 -2
  68. package/scripts/gds/local-preview-lib.js +1 -1
  69. package/scripts/gds/mirror-lineage-check.js +1 -1
  70. package/scripts/gds/mirror-redact.js +17 -2
  71. package/scripts/gds/newcomer-floor.templates.json +1 -1
  72. package/scripts/gds/package-core.js +18 -1
  73. package/scripts/gds/paste-token.js +1 -1
  74. package/scripts/gds/provision-units.js +2 -2
  75. package/scripts/gds/publish-manifest.js +15 -0
  76. package/scripts/gds/repo-metrics.js +1 -1
  77. package/scripts/gds/sandbox-stage.js +1 -1
  78. package/scripts/gds/seed-bongos-coreB-tranche1-tasks.js +1 -1
  79. package/scripts/gds/seed-bongos-coreB-tranche2-tasks.js +1 -1
  80. package/scripts/gds/seed-bongos-goal-hierarchy-tasks.js +1 -1
  81. package/scripts/gds/seed-bongos-tasks.js +2 -2
  82. package/scripts/gds/seed-gds-v4-tasks.js +1 -1
  83. package/scripts/gds/seed-medusa-tasks.js +10 -10
  84. package/scripts/gds/seed-module-upstreaming.js +1 -1
  85. package/scripts/gds/seed-productization-tasks.js +6 -6
  86. package/scripts/gds/seed-provisioning-tasks.js +2 -2
  87. package/scripts/gds/seed-staging.sh +19 -6
  88. package/scripts/gds/ship-deploy-target.js +1 -1
  89. package/scripts/gds/ship-flow.js +1 -1
  90. package/scripts/gds/smoke-gds.js +1 -1
  91. package/scripts/status-probe.mjs +2 -2
  92. package/src/bongos/auth-discord.js +2 -2
  93. package/src/bongos/live-channel.js +1 -1
  94. package/src/bongos/permission-path-check.js +80 -3
  95. package/src/bongos/pool.js +1 -1
  96. package/src/bongos/routes/auth.js +11 -11
  97. package/src/bongos/routes/security.js +1 -1
  98. package/src/bongos/routes.js +1 -1
  99. package/src/branding.js +1 -1
  100. package/src/devbox-downloads.js +1 -1
  101. package/src/instance-config.js +2 -2
  102. package/src/module-api.js +1 -1
  103. package/src/module-loader/provenance.js +2 -2
  104. package/tests/art_stage.mjs +2 -2
  105. package/tests/auth_anthropic_identity.mjs +1 -1
  106. package/tests/auth_duplicate_cookie.mjs +1 -1
  107. package/tests/auth_error_brand.mjs +1 -1
  108. package/tests/auth_inactive_builder.mjs +1 -1
  109. package/tests/backup_cli.mjs +4 -4
  110. package/tests/bongos_box_connect.mjs +2 -2
  111. package/tests/bongos_downloads.mjs +2 -2
  112. package/tests/bongos_login.mjs +5 -5
  113. package/tests/box_connect_e2e.mjs +2 -2
  114. package/tests/box_dns_repoint.mjs +10 -10
  115. package/tests/box_host_keys.mjs +1 -1
  116. package/tests/box_onboard.mjs +9 -9
  117. package/tests/box_scope_session.mjs +1 -1
  118. package/tests/box_terminal_ssrf.mjs +7 -7
  119. package/tests/boxes.mjs +9 -9
  120. package/tests/branding.mjs +2 -2
  121. package/tests/bump_version.mjs +2 -2
  122. package/tests/cf_tunnel.mjs +40 -40
  123. package/tests/cli_token_reissue.mjs +7 -7
  124. package/tests/cloud_bongos_pack.mjs +1 -1
  125. package/tests/currency_label.mjs +8 -8
  126. package/tests/dev_lib.mjs +4 -4
  127. package/tests/devbox_dmg_backdrop.mjs +1 -1
  128. package/tests/devbox_downloads.mjs +2 -2
  129. package/tests/devbox_icons.mjs +1 -1
  130. package/tests/discord_approvals.mjs +1 -1
  131. package/tests/discord_oauth.mjs +2 -2
  132. package/tests/executed_closure.mjs +6 -1
  133. package/tests/first_admin_bootstrap.mjs +1 -1
  134. package/tests/gate_approvals.mjs +5 -5
  135. package/tests/government_protected_surfaces.mjs +137 -0
  136. package/tests/grade_aggregates_unavailable.mjs +1 -1
  137. package/tests/hook_user_agents.mjs +2 -2
  138. package/tests/init.mjs +6 -6
  139. package/tests/instance_config.mjs +1 -1
  140. package/tests/instance_manifest.mjs +5 -5
  141. package/tests/instance_mismatch_guard.mjs +13 -13
  142. package/tests/leak_scan_allowlist.mjs +94 -0
  143. package/tests/migrate_root_resolution.mjs +4 -4
  144. package/tests/mirror_redact.mjs +28 -4
  145. package/tests/module_catalog.mjs +5 -5
  146. package/tests/module_submissions.mjs +3 -3
  147. package/tests/package_core.mjs +1 -1
  148. package/tests/parallel-load.mjs +6 -6
  149. package/tests/projects_hub.mjs +2 -2
  150. package/tests/provision.mjs +50 -50
  151. package/tests/provisioning_github_app_routes.mjs +1 -1
  152. package/tests/provisioning_onboard_mode.mjs +2 -2
  153. package/tests/publish_reconciler.mjs +4 -4
  154. package/tests/sandbox_stage.mjs +1 -1
  155. package/tests/scrubber_corpus.mjs +3 -3
  156. package/tests/search_isolation.mjs +1 -1
  157. package/tests/session_records.mjs +1 -1
  158. package/tests/ship_card.mjs +6 -6
  159. package/tests/ship_ci_deploy.mjs +1 -1
  160. package/tests/single_host_hall.mjs +9 -9
  161. package/tests/smoke_preflight.mjs +1 -1
  162. package/tests/smoke_target.mjs +1 -1
  163. package/tests/status-probe.mjs +1 -1
  164. package/tests/status_mirror_sync.mjs +1 -1
  165. package/docs/adr/0004-amazonprimea-name-and-trademark-acceptance.md +0 -45
  166. package/docs/design/mocks/_schemes.css +0 -604
  167. package/docs/design/mocks/component-sheet.html +0 -428
  168. package/docs/design/mocks/hall/_tokens.css +0 -370
  169. package/docs/design/mocks/hall/board/v1.html +0 -846
  170. package/docs/design/mocks/hall/board/v2.html +0 -858
  171. package/docs/design/mocks/hall/board/v3.html +0 -884
  172. package/docs/design/mocks/hall/goals/v1.html +0 -1212
  173. package/docs/design/mocks/hall/goals/v2.html +0 -1192
  174. package/docs/design/mocks/hall/goals/v3.html +0 -1205
  175. package/docs/design/mocks/hall/hall-sheet.html +0 -244
  176. package/docs/design/mocks/hall/reading/v1.html +0 -1125
  177. package/docs/design/mocks/hall/reading/v2.html +0 -1177
  178. package/docs/design/mocks/hall/reading/v3.html +0 -1150
  179. package/docs/design/mocks/hall/settings/v1.html +0 -1238
  180. package/docs/design/mocks/hall/settings/v2.html +0 -1235
  181. package/docs/design/mocks/hall/settings/v3.html +0 -1299
  182. package/docs/design/mocks/hall/task/v1.html +0 -633
  183. package/docs/design/mocks/hall/task/v2.html +0 -646
  184. package/docs/design/mocks/hall/task/v3.html +0 -647
  185. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg +0 -0
  186. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg.json +0 -13
  187. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg +0 -0
  188. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg.json +0 -13
  189. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg +0 -0
  190. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg.json +0 -13
  191. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg +0 -0
  192. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg.json +0 -13
  193. package/docs/design/mocks/hub/hub-sheet.html +0 -192
  194. package/docs/design/mocks/hub/mine.html +0 -465
  195. package/docs/design/mocks/hub/picker.html +0 -421
  196. package/docs/design/mocks/hub/planets.html +0 -356
  197. package/docs/design/mocks/hub/v1.html +0 -1209
  198. package/docs/design/mocks/hub/v2.html +0 -1257
  199. package/docs/design/mocks/hub/v3.html +0 -1496
  200. package/docs/design/mocks/hub/wizard.html +0 -421
  201. package/docs/design/mocks/landing/landing-sheet.html +0 -131
  202. package/docs/design/mocks/landing/v1.html +0 -956
  203. package/docs/design/mocks/landing/v2.html +0 -708
  204. package/docs/design/mocks/landing/v3.html +0 -911
  205. package/docs/design/mocks/landing-page-mock.html +0 -687
  206. package/docs/design/mocks/landing-palettes.html +0 -103
  207. package/docs/design/mocks/projects-hub-mock.html +0 -991
  208. package/docs/design/mocks/projects-hub-variants.html +0 -146
  209. package/docs/design/mocks/projects-page-mock.html +0 -167
  210. package/docs/design/mocks/world/blue-hud/_tokens.css +0 -246
  211. package/docs/design/mocks/world/blue-hud/hall.html +0 -595
  212. package/docs/design/mocks/world/blue-hud/landing.html +0 -424
  213. package/docs/design/mocks/world/blue-hud/status.html +0 -410
  214. package/docs/design/mocks/world/chrome-blobs/_tokens.css +0 -479
  215. package/docs/design/mocks/world/chrome-blobs/hall.html +0 -553
  216. package/docs/design/mocks/world/chrome-blobs/landing-b.html +0 -581
  217. package/docs/design/mocks/world/chrome-blobs/landing.html +0 -328
  218. package/docs/design/mocks/world/chrome-blobs/status.html +0 -416
  219. package/docs/design/mocks/world/natgeo-editorial/_tokens.css +0 -377
  220. package/docs/design/mocks/world/natgeo-editorial/hall.html +0 -649
  221. package/docs/design/mocks/world/natgeo-editorial/landing-b.html +0 -743
  222. package/docs/design/mocks/world/natgeo-editorial/landing.html +0 -475
  223. package/docs/design/mocks/world/natgeo-editorial/status.html +0 -437
  224. package/docs/design/mocks/world/organic-cards/_tokens.css +0 -462
  225. package/docs/design/mocks/world/organic-cards/hall.html +0 -625
  226. package/docs/design/mocks/world/organic-cards/landing-b.html +0 -736
  227. package/docs/design/mocks/world/organic-cards/landing.html +0 -420
  228. package/docs/design/mocks/world/organic-cards/status.html +0 -458
  229. package/docs/design/mocks/world/world-sheet.html +0 -156
package/docs/design/mocks/hall/settings/v3.html DELETED
@@ -1,1299 +0,0 @@
1
- <!doctype html>
2
- <html lang="en" data-mode="dark" data-theme="dark">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width,initial-scale=1">
6
- <title>Settings and profile, the hall in the world, v3 "the glass hall" (task 1003302)</title>
7
- <link rel="icon" href="data:,">
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&family=Manrope:wght@300;400;500;600&display=swap">
11
- <link rel="stylesheet" href="../_tokens.css">
12
- <style>
13
- *{box-sizing:border-box}
14
- html,body{margin:0;padding:0}
15
- [hidden]{display:none!important}
16
- img,svg{display:block;max-width:100%}
17
-
18
- /* ---------- the world's small vocabulary ---------- */
19
- .lbl{font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);
20
- text-transform:var(--label-case);color:var(--ink-faint);font-weight:400}
21
- .num{font-variant-numeric:tabular-nums}
22
- .srOnly{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
23
- ::selection{background:var(--accent);color:var(--accent-on)}
24
-
25
- a{color:inherit;text-decoration:none}
26
- .link{display:inline-block;padding:3px 0;min-height:24px;color:var(--accent-ink);
27
- text-decoration:underline;text-underline-offset:3px}
28
-
29
- /* the two-tone ring: an accent-derived outline inside a ground halo, so the
30
- indicator keeps its own edge over whatever it lands on. */
31
- :focus-visible{outline:2px solid var(--focus);outline-offset:3px;box-shadow:0 0 0 8px var(--bg)}
32
- body[data-state="focus"] .is-focus{outline:2px solid var(--focus);outline-offset:3px;
33
- box-shadow:0 0 0 8px var(--bg)}
34
- /* the sidebar clips its own overflow, so a ring around a nav item loses its left
35
- and right edges: inside the item it keeps all four, at every rail width */
36
- .nav-item:focus-visible,.nav-group__head:focus-visible,.brand-mark:focus-visible,
37
- .shell-user:focus-visible,.shell-home:focus-visible,.shell-signout:focus-visible,
38
- .shell-signin:focus-visible,body[data-state="focus"] .nav-item.is-focus{outline-offset:-2px;
39
- box-shadow:none}
40
- .skip{position:absolute;left:-9999px;top:0;z-index:200;display:inline-flex;align-items:center;
41
- min-height:38px;padding:0 18px;border-radius:var(--radius-pill);background:var(--bg-card);
42
- color:var(--ink);border:1px solid var(--rule);font-size:14px}
43
- .skip:focus{left:14px;top:14px}
44
-
45
- /* ---------- the shell ---------- */
46
- .app{position:relative;display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);
47
- min-height:100dvh;background:var(--bg)}
48
- .app-sidebar{position:sticky;top:0;z-index:var(--z-sidebar);display:flex;flex-direction:column;
49
- height:100dvh;overflow:hidden;background:var(--sb-bg);border-right:var(--line) solid var(--sb-edge);
50
- backdrop-filter:blur(var(--sb-blur));-webkit-backdrop-filter:blur(var(--sb-blur))}
51
- .app-sidebar__brand{display:flex;align-items:center;height:var(--topbar-h);flex:none;
52
- padding:0 var(--sb-pad);border-bottom:var(--line) solid var(--sb-edge)}
53
- .brand-mark{display:flex;align-items:center;gap:10px;min-height:38px;min-width:38px;
54
- font-weight:500;font-size:15.5px;letter-spacing:-.015em;white-space:nowrap}
55
- .brand-mark__dot{width:11px;height:11px;flex:none;border-radius:var(--radius-pill);
56
- border:1px solid var(--ink-faint);background:var(--bg-deep)}
57
- .app-sidebar__nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;
58
- padding:var(--sp-sm) 0 var(--sp-md)}
59
- .nav-group{display:flex;flex-direction:column;padding:var(--sp-hair) 0}
60
- .nav-group + .nav-group{border-top:var(--line) solid var(--rule-soft);margin-top:var(--sp-hair)}
61
- .nav-group__head{display:flex;align-items:center;justify-content:space-between;width:100%;
62
- min-height:34px;padding:0 var(--sb-pad);margin:var(--sp-hair) 0 2px;border:0;background:none;
63
- cursor:pointer;font-family:var(--label-face);font-size:var(--label-size);
64
- letter-spacing:var(--label-space);text-transform:var(--label-case);color:var(--ink-faint)}
65
- .nav-group__chevron{width:10px;height:6px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;
66
- stroke-linecap:round;stroke-linejoin:round;opacity:.7}
67
- .nav-item{text-transform:lowercase;position:relative;display:flex;align-items:center;gap:11px;min-height:38px;
68
- padding:0 var(--sb-pad);color:var(--ink-soft);font-size:14.5px;white-space:nowrap;
69
- border-radius:var(--nav-radius);margin:1px var(--nav-inset);
70
- transition:background 200ms cubic-bezier(.2,.7,.3,1),color 200ms cubic-bezier(.2,.7,.3,1)}
71
- .nav-item:hover{background:var(--nav-hover);color:var(--ink)}
72
- .nav-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.3;
73
- stroke-linecap:round;stroke-linejoin:round;opacity:.85}
74
- .nav-item--active{color:var(--ink);background:var(--nav-active-bg)}
75
- .nav-item--active::before{content:"";position:absolute;left:var(--nav-lit-x);top:6px;bottom:6px;
76
- width:2px;background:var(--accent);border-radius:var(--radius-pill)}
77
- .nav-item--active .nav-icon{opacity:1}
78
-
79
- .app-sidebar__foot{flex:none;display:flex;align-items:center;gap:var(--sp-hair);
80
- padding:var(--sp-xs) var(--sb-pad);border-top:var(--line) solid var(--sb-edge);
81
- background:var(--sb-foot-bg)}
82
- .shell-user{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;min-height:38px;
83
- padding:var(--sp-hair) var(--user-pad);border:var(--line) solid var(--user-edge);
84
- background:var(--user-bg);border-radius:var(--user-radius)}
85
- .shell-user__avatar{width:26px;height:26px;flex:none;border-radius:var(--radius-pill);
86
- background:var(--bg-deep);border:1px solid var(--rule)}
87
- .shell-user__meta{display:flex;flex-direction:column;min-width:0;line-height:1.25}
88
- .shell-user__name{font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
89
- .shell-user__rank{font-family:var(--label-face);font-size:10.5px;letter-spacing:var(--label-space);
90
- text-transform:var(--label-case);color:var(--ink-faint)}
91
- .shell-signin{display:none;align-items:center;flex:1 1 auto;min-height:38px;padding:0 14px;
92
- border:var(--line) solid var(--rule);border-radius:var(--user-radius);font-size:14px}
93
- .shell-home,.shell-signout{display:inline-flex;align-items:center;justify-content:center;
94
- width:38px;height:38px;flex:none;border-radius:var(--nav-radius);color:var(--ink-faint)}
95
- .shell-home:hover,.shell-signout:hover{background:var(--nav-hover);color:var(--ink)}
96
- .bar-icon{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.3;
97
- stroke-linecap:round;stroke-linejoin:round}
98
-
99
- .app-scrim{display:none;position:fixed;inset:0;z-index:var(--z-scrim);background:rgba(0,0,0,.5)}
100
- .app-body{display:flex;flex-direction:column;min-width:0}
101
-
102
- .app-topbar{position:sticky;top:0;z-index:var(--z-topbar);display:flex;align-items:center;gap:var(--sp-sm);
103
- height:var(--topbar-h);flex:none;padding:0 var(--gut);background:var(--bar-bg);
104
- border-bottom:var(--line) solid var(--bar-edge);
105
- backdrop-filter:blur(var(--bar-blur));-webkit-backdrop-filter:blur(var(--bar-blur))}
106
- .topbar-menu{display:none;align-items:center;justify-content:center;width:38px;height:38px;
107
- border:var(--line) solid var(--ctl-edge);background:none;color:var(--ink);
108
- border-radius:var(--ctl-radius);cursor:pointer}
109
- .topbar-title{margin:0;font-size:15px;font-weight:500;letter-spacing:-.012em;color:var(--ink)}
110
- .topbar-side{display:flex;align-items:center;gap:var(--sp-hair);margin-left:auto}
111
- .topbar-note{font-size:13px;color:var(--ink-soft);padding-right:var(--sp-hair);white-space:nowrap}
112
- .topbar-jump{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 12px;
113
- border:var(--line) solid var(--ctl-edge);background:var(--ctl-bg);color:var(--ink-soft);
114
- border-radius:var(--ctl-radius);cursor:pointer;font:inherit;font-size:13.5px}
115
- .topbar-jump:hover{color:var(--ink)}
116
- .topbar-jump__kbd{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-faint);
117
- padding:2px 5px;border:1px solid var(--rule-soft);border-radius:4px}
118
- .zoom-toggle,.theme-toggle{display:inline-flex;align-items:center;justify-content:center;
119
- width:38px;height:38px;border:var(--line) solid var(--ctl-edge);background:var(--ctl-bg);
120
- color:var(--ink-soft);border-radius:var(--ctl-radius);cursor:pointer}
121
- .zoom-toggle:hover,.theme-toggle:hover{color:var(--ink)}
122
-
123
- .app-content{flex:1 1 auto;width:100%;max-width:var(--content-max);margin:0 auto;
124
- padding:var(--sp-lg) var(--gut) var(--sp-xl)}
125
- .app-content:focus{outline:none}
126
- .app-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-sm);width:100%;
127
- max-width:var(--content-max);margin:0 auto;padding:var(--sp-md) var(--gut) var(--sp-lg);
128
- border-top:var(--line) solid var(--rule-soft);font-size:13.5px;color:var(--ink-soft)}
129
- .foot__say{flex:1 1 auto}
130
-
131
- /* ---------- type ---------- */
132
- .pageHead{margin-bottom:var(--sp-lg)}
133
- .pageH{margin:0;font-family:var(--font-display);font-weight:300;
134
- font-size:clamp(34px,4.4vw,56px);line-height:.94;letter-spacing:-.042em;text-transform:lowercase}
135
- .lede{margin:var(--sp-sm) 0 0;max-width:58ch;color:var(--ink-soft);font-size:16px}
136
- .prof-h{margin:0 0 var(--sp-md);font-family:var(--font-display);font-weight:300;
137
- font-size:clamp(26px,2.9vw,40px);line-height:1.06;letter-spacing:-.035em}
138
- .grp__h{margin:0;font-family:var(--font-display);font-weight:300;
139
- font-size:clamp(22px,2.1vw,29px);line-height:1.1;letter-spacing:-.03em}
140
- .panel__h{margin:0;font-size:16.5px;font-weight:500;letter-spacing:-.012em}
141
- .act__h{margin:0 0 var(--sp-xs);font-size:15px;font-weight:500}
142
- .panel__lede{margin:var(--sp-hair) 0 0;max-width:64ch;color:var(--ink-soft);font-size:14.5px}
143
- .panel__note{margin:var(--sp-sm) 0 0;color:var(--ink-faint);font-size:13px;max-width:64ch}
144
- .hint{color:var(--ink-faint);font-size:13px}
145
- .status{margin:var(--sp-xs) 0 0;font-size:13.5px;color:var(--ink-soft)}
146
- .status--ok{color:var(--ok)}
147
- .status--danger{color:var(--danger)}
148
-
149
- /* ---------- controls: every one clears 24px on both sides ---------- */
150
- .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;
151
- min-width:38px;padding:0 15px;border:var(--line) solid var(--btn-edge);background:var(--btn-bg);
152
- color:var(--ink);border-radius:var(--ctl-radius);cursor:pointer;font:inherit;font-size:14px;
153
- white-space:nowrap;transition:background 200ms cubic-bezier(.2,.7,.3,1),
154
- border-color 200ms cubic-bezier(.2,.7,.3,1),color 200ms cubic-bezier(.2,.7,.3,1)}
155
- .btn:hover{background:var(--btn-bg-hi)}
156
- .btn[disabled],.btn[aria-disabled="true"]{color:var(--ink-faint);cursor:default;background:var(--btn-bg)}
157
- .btn--quiet{background:transparent}
158
- .btn--quiet:hover{background:var(--btn-bg-hi)}
159
- .btn--save{background:var(--accent);border-color:var(--accent);color:var(--accent-on);font-weight:500}
160
- .btn--save:hover{background:var(--accent-lift);border-color:var(--accent-lift)}
161
-
162
- .fieldLbl{display:block;margin:var(--sp-sm) 0 var(--sp-hair);font-family:var(--label-face);
163
- font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:var(--label-case);
164
- color:var(--ink-faint)}
165
- .field{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-xs)}
166
- .input{flex:1 1 260px;max-width:360px;min-height:38px;padding:0 var(--field-pad);color:var(--ink);
167
- background:var(--field-bg);border:var(--field-border);border-radius:var(--field-radius);
168
- font:inherit;font-size:15px;transition:border-color 200ms cubic-bezier(.2,.7,.3,1)}
169
- .input::placeholder{color:var(--ink-faint)}
170
- .input:hover{border-color:var(--rule)}
171
- body[data-state="error"] #display-name-input{border-color:var(--danger)}
172
- .sel{min-height:38px;padding:0 var(--sp-xs);color:var(--ink);background:var(--field-bg);
173
- border:var(--line) solid var(--ctl-edge);border-radius:var(--ctl-radius);font:inherit;font-size:14px;cursor:pointer}
174
- .range{flex:1 1 200px;max-width:260px;height:38px;accent-color:var(--accent);cursor:pointer}
175
- .radio{width:16px;height:16px;flex:none;margin:0;accent-color:var(--accent);cursor:pointer}
176
- .volume{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-xs);margin-bottom:var(--sp-xs)}
177
- .volume .fieldLbl{margin:0}
178
-
179
- .sw{position:relative;display:inline-flex;align-items:center;width:46px;height:38px;flex:none;
180
- padding:0;border:0;background:none;cursor:pointer}
181
- .sw__track{width:44px;height:24px;border-radius:var(--radius-pill);background:var(--track-bg);
182
- border:1px solid var(--rule);transition:background 240ms cubic-bezier(.2,.7,.3,1),
183
- border-color 240ms cubic-bezier(.2,.7,.3,1)}
184
- .sw__knob{position:absolute;left:5px;width:16px;height:16px;border-radius:var(--radius-pill);
185
- background:var(--ink-faint);transition:transform 260ms cubic-bezier(.2,.7,.3,1),
186
- background 240ms cubic-bezier(.2,.7,.3,1)}
187
- .sw[aria-checked="true"] .sw__track{background:var(--accent-tint);border-color:var(--accent)}
188
- .sw[aria-checked="true"] .sw__knob{transform:translateX(20px);background:var(--accent)}
189
-
190
- .chips{display:flex;flex-wrap:wrap;gap:var(--sp-hair);margin-top:var(--sp-sm)}
191
- .chip-ctl{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;
192
- border:var(--line) solid var(--ctl-edge);border-radius:var(--radius-pill);cursor:pointer;
193
- font-size:14px;color:var(--ink-soft);background:var(--btn-bg)}
194
- .chip-ctl input{width:14px;height:14px;margin:0;accent-color:var(--accent);cursor:pointer}
195
- .chip-ctl:has(input:checked){color:var(--ink);border-color:var(--rule)}
196
-
197
- .chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 9px;
198
- border-radius:var(--radius-pill);font-family:var(--label-face);font-size:10.5px;
199
- letter-spacing:var(--label-space);text-transform:var(--label-case);border:1px solid currentColor}
200
- .chip--ok{color:var(--ok)}
201
- .chip--warn{color:var(--warn)}
202
- .chip--danger{color:var(--danger)}
203
- .chip--info{color:var(--info)}
204
- .banner{margin:var(--sp-sm) 0 0;padding:var(--sp-xs) var(--sp-sm);font-size:14px;
205
- border-left:2px solid var(--warn);background:var(--warn-weak);color:var(--ink);
206
- border-radius:var(--banner-radius)}
207
-
208
- /* ---------- the settings half ---------- */
209
- .settings-layout{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);gap:var(--gut);
210
- align-items:start}
211
- .rail-wrap{position:sticky;top:calc(var(--topbar-h) + var(--sp-md))}
212
- .section-rail{display:flex;flex-direction:column;gap:2px}
213
- .rail-link{position:relative;display:flex;align-items:center;min-height:38px;
214
- padding:0 var(--rail-pad);color:var(--ink-soft);font-size:14.5px;border-radius:var(--nav-radius);
215
- transition:background 200ms cubic-bezier(.2,.7,.3,1),color 200ms cubic-bezier(.2,.7,.3,1)}
216
- .rail-link:hover{color:var(--ink);background:var(--nav-hover)}
217
- .rail-link--active{color:var(--ink);font-weight:500;background:var(--rail-active-bg)}
218
- .rail-link--active::before{content:"";position:absolute;left:var(--rail-lit-x);top:7px;bottom:7px;
219
- width:2px;background:var(--accent);border-radius:var(--radius-pill)}
220
- .rail-note{margin:var(--sp-md) 0 0;padding-left:var(--rail-pad);max-width:24ch;
221
- color:var(--ink-faint);font-size:12px;line-height:1.45}
222
-
223
- .settings-groups{display:flex;flex-direction:column;gap:var(--grp-gap)}
224
- .grp{display:flex;flex-direction:column;gap:var(--panel-gap)}
225
- /* the group eyebrow and an achievement id quote the machine, so they take the
226
- mono face and keep their real case, never the shouting label case */
227
- .grp__eyebrow,.ach__id{font-family:var(--font-mono);text-transform:none;letter-spacing:0}
228
- .grp__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-sm);
229
- padding-bottom:var(--sp-xs);border-bottom:var(--line) solid var(--rule)}
230
- .panel{display:block;background:var(--panel-bg);border:var(--panel-border);
231
- border-radius:var(--panel-radius);padding:var(--panel-pad)}
232
- .rows{display:flex;flex-direction:column;margin-top:var(--sp-sm)}
233
- .row{display:flex;align-items:center;gap:var(--sp-sm);padding:var(--sp-sm) 0;
234
- border-top:var(--line) solid var(--rule-soft)}
235
- .row--pick{cursor:pointer}
236
- .row__main{flex:1 1 auto;min-width:0}
237
- .row__label{margin:0;font-size:14.5px;font-weight:500;display:block}
238
- .row__desc{margin:2px 0 0;color:var(--ink-soft);font-size:13.5px;display:block}
239
- .row__ctl{display:flex;align-items:center;gap:var(--sp-hair);flex:none;flex-wrap:wrap;justify-content:flex-end}
240
- .rowEnd{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-xs);margin-top:var(--sp-sm)}
241
- .rowEnd .status{margin:0}
242
- .masked{font-size:13.5px;color:var(--ink-soft)}
243
- .sessions{list-style:none;margin:var(--sp-sm) 0 0;padding:0;display:flex;flex-direction:column}
244
- .session{display:flex;align-items:center;gap:var(--sp-sm);padding:var(--sp-sm) 0;
245
- border-top:var(--line) solid var(--rule-soft)}
246
-
247
- /* the ladder: three moments of one interaction, each under a mono eyebrow */
248
- .ladder{list-style:none;margin:var(--sp-md) 0 0;padding:0;display:flex;flex-direction:column;
249
- gap:var(--sp-md)}
250
- .step{padding-top:var(--sp-xs);border-top:var(--line) solid var(--rule-soft)}
251
- .step__eyebrow{margin:0 0 var(--sp-xs)}
252
- .step__body{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-xs)}
253
- .step__body--col{flex-direction:column;align-items:stretch}
254
- .step__say{margin:0;font-size:14.5px}
255
-
256
- /* the secret. A 64 character token cannot be a line of prose, so it is quoted:
257
- one tonal step down from the ground, closed top and bottom by hairlines, the
258
- machine's words receding to ink-soft so the secret itself is the only ink. */
259
- .quote{margin-top:var(--sp-xs);background:var(--quote-bg);border:var(--quote-border);
260
- border-radius:var(--quote-radius);padding:var(--sp-xs) var(--sp-sm) var(--sp-hair)}
261
- .quote__eyebrow{margin:0 0 var(--sp-hair)}
262
- .quote__pre{margin:0;font-family:var(--font-mono);font-size:13px;line-height:1.6;
263
- white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all}
264
- .quote__cmd{color:var(--ink-soft)}
265
- .quote__tok{color:var(--ink)}
266
- .quote__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-xs);
267
- margin-top:var(--sp-xs);padding-top:var(--sp-hair);
268
- border-top:var(--line) solid var(--rule-soft)}
269
-
270
- .tableWrap{margin-top:var(--sp-sm);overflow-x:auto}
271
- table{width:100%;border-collapse:collapse;text-align:left}
272
- th,td{padding:var(--sp-sm) var(--sp-xs) var(--sp-sm) 0;vertical-align:top;
273
- border-top:var(--line) solid var(--rule-soft)}
274
- thead th{padding-top:0;border-top:0;border-bottom:var(--line) solid var(--rule);
275
- font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);
276
- text-transform:var(--label-case);color:var(--ink-faint);font-weight:400;white-space:nowrap}
277
- .grid__k{font-weight:400;color:var(--ink-soft);font-size:13px;white-space:nowrap}
278
- .grid__v{color:var(--ink-soft);font-size:14px}
279
- .grid__c{width:1%;white-space:nowrap}
280
- .ledger td{font-size:14.5px;line-height:1.45}
281
- .ledger--tight td,.ledger--tight th{padding-top:var(--sp-xs);padding-bottom:var(--sp-xs);font-size:14px}
282
- .lg__num{width:1%;white-space:nowrap;color:var(--ink-faint);font-family:var(--font-mono);font-size:12.5px}
283
- .lg__rew,.lg__date{width:1%;white-space:nowrap;text-align:right;color:var(--ink-soft)}
284
- .lg__scope{color:var(--ink-faint);font-size:12.5px}
285
- .lg__out{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
286
- .lg__outsay{color:var(--ink-soft);font-size:13px}
287
- .pager{display:flex;align-items:center;gap:var(--sp-hair);margin-top:var(--sp-xs);
288
- padding-top:var(--sp-xs);border-top:var(--line) solid var(--rule-soft)}
289
- .pager .hint{flex:1 1 auto}
290
-
291
- /* ---------- the profile half ---------- */
292
- .split{margin:var(--sp-xl) 0 var(--sp-md);padding-top:var(--sp-sm);
293
- border-top:var(--line) solid var(--rule)}
294
- .split__eyebrow{display:block}
295
- .profile{display:block}
296
- .ident{display:flex;align-items:center;gap:var(--sp-sm);padding:var(--ident-pad);
297
- background:var(--panel-bg);border:var(--panel-border);border-radius:var(--panel-radius);
298
- margin-bottom:var(--panel-gap)}
299
- .ident__avatar{width:56px;height:56px;flex:none;border-radius:var(--radius-pill);
300
- background:var(--bg-deep);border:1px solid var(--rule)}
301
- .ident__meta{flex:1 1 auto;min-width:0}
302
- .ident__name{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2vw,28px);
303
- letter-spacing:-.03em;line-height:1.1}
304
- .ident__sub{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-xs);margin:6px 0 0}
305
- .ident__rank{color:var(--ink-soft)}
306
- .ident__login{color:var(--ink-faint);font-family:var(--font-mono);font-size:12.5px}
307
-
308
- .stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
309
- gap:var(--stat-gap);margin-top:var(--sp-md)}
310
- .stat{display:flex;flex-direction:column;gap:var(--sp-hair);padding:var(--stat-pad);
311
- background:var(--stat-bg);border:var(--stat-border);border-radius:var(--panel-radius);
312
- border-top:var(--line) solid var(--rule)}
313
- .stat__num{font-family:var(--font-display);font-weight:300;font-size:clamp(30px,3.3vw,46px);
314
- line-height:1;letter-spacing:-.035em}
315
- .stat__sub{color:var(--ink-faint);font-size:12.5px}
316
-
317
- .ach-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--ach-gap);
318
- margin-top:var(--sp-md)}
319
- .ach{display:flex;flex-direction:column;gap:5px;padding:var(--ach-pad);background:var(--ach-bg);
320
- border:var(--ach-border);border-radius:var(--panel-radius);border-top:var(--line) solid var(--rule)}
321
- .ach--locked{border-top-color:var(--rule-soft)}
322
- .ach--locked .ach__name,.ach--locked .ach__desc{color:var(--ink-faint)}
323
- .ach__id{margin:0;font-size:10px}
324
- .ach__name{margin:0;font-size:14.5px;font-weight:500}
325
- .ach__desc{margin:0;color:var(--ink-soft);font-size:13px;line-height:1.4}
326
- .ach__meta{margin:auto 0 0;padding-top:var(--sp-hair);color:var(--ink-soft);font-size:12.5px}
327
- .ach__meta--off{color:var(--ink-faint)}
328
-
329
- .tabs{display:flex;flex-wrap:wrap;gap:2px;margin-top:var(--sp-md);
330
- border-bottom:var(--line) solid var(--rule)}
331
- .tab{position:relative;min-height:38px;padding:0 14px;border:0;background:none;cursor:pointer;
332
- color:var(--ink-soft);font:inherit;font-size:14px;
333
- transition:color 200ms cubic-bezier(.2,.7,.3,1)}
334
- .tab:hover{color:var(--ink)}
335
- .tab--active{color:var(--ink);font-weight:500}
336
- .tab--active::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
337
- background:var(--accent)}
338
- .act{margin-top:var(--sp-lg)}
339
- .signin-note{margin:var(--sp-md) 0 0;padding:var(--sp-sm) 0;font-size:14.5px;color:var(--ink-soft);
340
- border-top:var(--line) solid var(--rule-soft);border-bottom:var(--line) solid var(--rule-soft)}
341
- .gate{padding:var(--panel-pad);background:var(--panel-bg);border:var(--panel-border);
342
- border-radius:var(--panel-radius);border-top:var(--line) solid var(--rule)}
343
- .gate__h{margin:0;font-family:var(--font-display);font-weight:300;font-size:clamp(22px,2.1vw,29px);
344
- letter-spacing:-.03em}
345
- .gate__lede{margin:var(--sp-xs) 0 var(--sp-sm);max-width:60ch;color:var(--ink-soft);font-size:15px}
346
-
347
- /* ---------- the state contract: real markup, shown or hidden by CSS ---------- */
348
- .s-load,.s-empty,.s-err{display:none}
349
- .skel{display:block;background:var(--skel-bg);border-radius:var(--skel-radius)}
350
- .skel--rail{height:38px}
351
- .skel--h{height:26px;width:min(240px,60%)}
352
- .skel--row{height:52px}
353
- .skel--tile{height:104px}
354
- .skel--disc{width:56px;height:56px;border-radius:var(--radius-pill)}
355
- .skelRail{gap:2px}
356
- .skelPanels{gap:var(--sp-sm)}
357
- .skelStats{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--stat-gap);
358
- margin-top:var(--sp-md)}
359
- .skelIdent{align-items:center;gap:var(--sp-sm);margin-bottom:var(--panel-gap)}
360
- .skelLedger{gap:var(--sp-hair);margin-top:var(--sp-sm)}
361
- .skelAch{grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:var(--ach-gap);margin-top:var(--sp-md)}
362
- .skelAct{gap:var(--sp-hair);margin-top:var(--sp-md)}
363
-
364
- body[data-state="loading"] .s-real{display:none}
365
- body[data-state="loading"] .skelRail,
366
- body[data-state="loading"] .skelStats,
367
- body[data-state="loading"] .skelAch{display:grid}
368
- body[data-state="loading"] .skelPanels,
369
- body[data-state="loading"] .skelIdent{display:flex}
370
- body[data-state="loading"] .skelPanels{flex-direction:column}
371
- body[data-state="loading"] .skelLedger,
372
- body[data-state="loading"] .skelAct{display:flex;flex-direction:column}
373
- body[data-state="empty"] .s-signed{display:none}
374
- body[data-state="empty"] .s-empty{display:block}
375
- body[data-state="empty"] [data-gate="signed"]{display:none}
376
- /* signed out, the foot offers the door in rather than a person who is not there */
377
- body[data-state="empty"] .shell-user,
378
- body[data-state="empty"] .shell-signout{display:none}
379
- body[data-state="empty"] .shell-signin{display:inline-flex}
380
- body[data-state="error"] .s-err{display:block}
381
- body[data-state="error"] .s-ok{display:none}
382
-
383
- body[data-state="rail"]{--sidebar-w:var(--sidebar-w-rail)}
384
- body[data-state="rail"] .nav-item__label,
385
- body[data-state="rail"] .nav-group__head,
386
- body[data-state="rail"] .brand-mark__name,
387
- body[data-state="rail"] .shell-user__meta,
388
- body[data-state="rail"] .shell-signin{display:none}
389
- body[data-state="rail"] .nav-item,
390
- body[data-state="rail"] .brand-mark,
391
- body[data-state="rail"] .shell-user{justify-content:center;padding:0;margin-inline:0}
392
- body[data-state="rail"] .app-sidebar__foot{flex-direction:column}
393
-
394
- /* a fixed sidebar leaves the grid flow, so the body must not fall into its track */
395
- body[data-state="drawer"] .app{grid-template-columns:minmax(0,1fr)}
396
- body[data-state="drawer"] .app-scrim{display:block}
397
- /* an open drawer is a panel over the page, so it needs its own ground and its
398
- labels back, whatever the rail was doing at this width */
399
- body[data-state="drawer"] .app-sidebar{position:fixed;top:0;bottom:0;left:0;width:264px;
400
- z-index:var(--z-drawer);background:var(--drawer-bg);
401
- border-right:var(--line) solid var(--rule)}
402
- body[data-state="drawer"] .topbar-menu{display:inline-flex}
403
- body[data-state="drawer"] .nav-item__label,
404
- body[data-state="drawer"] .brand-mark__name{display:inline;opacity:1;width:auto;overflow:visible}
405
- body[data-state="drawer"] .nav-group__head,
406
- body[data-state="drawer"] .shell-user__meta{display:flex;opacity:1;width:auto;overflow:visible}
407
- body[data-state="drawer"] .nav-item{justify-content:flex-start;padding:0 var(--sb-pad);
408
- margin-inline:var(--nav-inset);gap:11px}
409
- body[data-state="drawer"] .brand-mark,
410
- body[data-state="drawer"] .shell-user{justify-content:flex-start;gap:10px;
411
- padding-inline:var(--user-pad)}
412
- body[data-state="drawer"] .app-sidebar__foot{flex-direction:row}
413
-
414
- /* ---------- responsive ---------- */
415
- @media (max-width:1024px){
416
- body{--sidebar-w:var(--sidebar-w-rail)}
417
- .nav-item__label,.nav-group__head,.brand-mark__name,.shell-user__meta,.shell-signin{display:none}
418
- .nav-item,.brand-mark,.shell-user{justify-content:center;padding:0;margin-inline:0}
419
- .app-sidebar__foot{flex-direction:column}
420
- .rail-note{display:none}
421
- }
422
- @media (max-width:860px){
423
- .app{grid-template-columns:minmax(0,1fr)}
424
- .app-sidebar{position:fixed;top:0;bottom:0;left:0;width:264px;transform:translateX(-100%);
425
- z-index:var(--z-drawer)}
426
- body[data-state="drawer"] .app-sidebar{transform:none}
427
- .topbar-menu{display:inline-flex}
428
- .topbar-note{display:none}
429
- .topbar-jump__label{display:none}
430
- .settings-layout{grid-template-columns:minmax(0,1fr);gap:var(--sp-md)}
431
- .rail-wrap{position:static}
432
- .section-rail{flex-direction:row;flex-wrap:wrap;gap:var(--sp-hair);padding-bottom:2px}
433
- .rail-link{white-space:nowrap}
434
- .skelRail{display:none!important}
435
- .app-content{padding:var(--sp-md) var(--gutter-narrow) var(--sp-lg)}
436
- .app-foot{padding:var(--sp-md) var(--gutter-narrow) var(--sp-lg)}
437
- }
438
- @media (max-width:520px){
439
- .row,.session{flex-direction:column;align-items:flex-start;gap:var(--sp-xs)}
440
- .row__ctl{justify-content:flex-start}
441
- .row--pick{flex-direction:row;align-items:flex-start}
442
- .grp__head{flex-direction:column;align-items:flex-start;gap:4px}
443
- }
444
-
445
- /* ═══════ v3 "the glass hall" ═══════════════════════════════════════════════
446
- The owner's dark reference. The hall's own rendered plate sits behind the
447
- whole shell in dark under --plate-veil; the sidebar and top bar are glass over
448
- it; content is --bg-card at --radius. The sidebar is the 64px rail at every
449
- width and expands on hover or focus-within. In light there is no plate: light
450
- is the same room on paper, never a black panel. --plate is the keyword none until the
451
- hall's own plate is shot, and the page is composed to be complete without it. */
452
- *{box-sizing:border-box}
453
- body{
454
- --gut:30px; --gutter-narrow:20px;
455
- --sidebar-w:var(--sidebar-w-rail); --sidebar-w-open:248px; --content-max:1240px;
456
- --rail-w:206px; --rail-pad:14px; --rail-lit-x:0px;
457
- --rail-active-bg:var(--glass);
458
- --sb-bg:var(--glass); --sb-edge:var(--glass-edge); --sb-blur:var(--glass-blur); --sb-pad:22px;
459
- --sb-foot-bg:transparent;
460
- --nav-radius:var(--radius-pill); --nav-inset:var(--sp-xs); --nav-lit-x:0px;
461
- --nav-active-bg:var(--glass-strong);
462
- --nav-hover:var(--glass);
463
- --user-bg:var(--glass); --user-edge:var(--glass-edge); --user-radius:var(--radius-pill);
464
- --user-pad:6px;
465
- --bar-bg:var(--glass); --bar-edge:var(--glass-edge); --bar-blur:var(--glass-blur);
466
- --ctl-bg:var(--glass); --ctl-edge:var(--glass-edge); --ctl-radius:var(--radius-pill);
467
- --btn-bg:var(--glass); --btn-edge:var(--glass-edge);
468
- --btn-bg-hi:var(--glass-strong);
469
- --field-bg:var(--glass); --field-border:var(--line) solid var(--glass-edge);
470
- --field-radius:var(--radius-pill); --field-pad:16px;
471
- --track-bg:var(--glass-strong);
472
- --panel-bg:var(--bg-card); --panel-border:var(--line) solid var(--glass-edge);
473
- --panel-radius:var(--radius); --panel-pad:26px;
474
- --panel-gap:var(--sp-sm); --grp-gap:var(--sp-lg);
475
- --quote-bg:var(--glass); --quote-border:var(--line) solid var(--glass-edge);
476
- --quote-radius:var(--radius-sm);
477
- --skel-bg:var(--glass); --skel-radius:var(--radius-sm);
478
- --stat-bg:var(--bg-card); --stat-border:var(--line) solid var(--glass-edge);
479
- --stat-pad:22px; --stat-gap:var(--sp-sm);
480
- --ach-bg:var(--bg-card); --ach-border:var(--line) solid var(--glass-edge);
481
- --ach-pad:18px; --ach-gap:var(--sp-sm);
482
- --ident-pad:22px 26px;
483
- --banner-radius:var(--radius-sm); --drawer-bg:var(--bg-card);
484
- background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15.5px;
485
- line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
486
- }
487
- /* the ground: the hall's own plate under a veil, in dark only. --plate resolves
488
- to none until the plate is shot, and the page then reads as the flat void,
489
- which is the honest fallback and what light shows anyway. */
490
- .app::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
491
- background-image:var(--plate);background-size:cover;background-position:center;
492
- mix-blend-mode:var(--plate-blend)}
493
- .app::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
494
- background:var(--plate-veil)}
495
- .app-sidebar,.app-body{position:relative;z-index:1}
496
- /* the rail is fixed, so it leaves the grid flow: the shell becomes one column
497
- inset by the rail width, and nothing reflows when the rail expands over it */
498
- .app{grid-template-columns:minmax(0,1fr);padding-left:var(--sidebar-w)}
499
- /* the rail is the default at every width; it expands over the content, so
500
- nothing reflows when it opens */
501
- .app-sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--sidebar-w);
502
- z-index:var(--z-sidebar);border-right:var(--line) solid var(--glass-edge);
503
- transition:width 300ms cubic-bezier(.2,.7,.3,1)}
504
- .app-sidebar:hover,.app-sidebar:focus-within{width:var(--sidebar-w-open)}
505
- /* closed, a label must not merely fade: it must leave the layout, or a wide one
506
- (Leaderboard) pushes its own icon out of the 64px strip */
507
- .nav-item__label,.brand-mark__name,.shell-user__meta{opacity:0;width:0;overflow:hidden;
508
- transition:opacity 200ms cubic-bezier(.2,.7,.3,1)}
509
- .nav-group__head{opacity:0;transition:opacity 200ms cubic-bezier(.2,.7,.3,1)}
510
- .nav-item,.brand-mark,.shell-user{gap:0}
511
- .app-sidebar:hover .nav-item__label,.app-sidebar:focus-within .nav-item__label,
512
- .app-sidebar:hover .brand-mark__name,.app-sidebar:focus-within .brand-mark__name,
513
- .app-sidebar:hover .shell-user__meta,.app-sidebar:focus-within .shell-user__meta{width:auto;
514
- overflow:visible}
515
- .app-sidebar:hover .nav-item,.app-sidebar:focus-within .nav-item{gap:11px}
516
- .app-sidebar:hover .brand-mark,.app-sidebar:focus-within .brand-mark,
517
- .app-sidebar:hover .shell-user,.app-sidebar:focus-within .shell-user{gap:10px}
518
- /* closed, the rail is icons only: centre them, and let the scroller disappear */
519
- .nav-item,.brand-mark,.shell-user{justify-content:center;padding:0;margin-inline:0}
520
- .app-sidebar:not(:hover):not(:focus-within) .app-sidebar__nav{scrollbar-width:none}
521
- .app-sidebar:hover .nav-item,.app-sidebar:focus-within .nav-item,
522
- .app-sidebar:hover .brand-mark,.app-sidebar:focus-within .brand-mark,
523
- .app-sidebar:hover .shell-user,.app-sidebar:focus-within .shell-user{justify-content:flex-start}
524
- .app-sidebar:hover .nav-item,.app-sidebar:focus-within .nav-item{padding:0 var(--sb-pad);
525
- margin-inline:var(--nav-inset)}
526
- .app-sidebar:hover .brand-mark,.app-sidebar:focus-within .brand-mark,
527
- .app-sidebar:hover .shell-user,.app-sidebar:focus-within .shell-user{padding-inline:var(--user-pad)}
528
- .app-sidebar:hover .nav-item__label,.app-sidebar:focus-within .nav-item__label,
529
- .app-sidebar:hover .nav-group__head,.app-sidebar:focus-within .nav-group__head,
530
- .app-sidebar:hover .brand-mark__name,.app-sidebar:focus-within .brand-mark__name,
531
- .app-sidebar:hover .shell-user__meta,.app-sidebar:focus-within .shell-user__meta{opacity:1}
532
- /* the current item is the pill plus an accent icon: a 2px left hairline cannot
533
- read against a 999px pill, and the icon is the only mark a 64px rail has */
534
- .nav-item--active::before{display:none}
535
- .nav-item--active .nav-icon{color:var(--accent);opacity:1}
536
- .app-sidebar__foot{flex-wrap:wrap}
537
- .stat__num{font-size:clamp(32px,3.6vw,52px)}
538
- .grp__head{border-bottom-color:var(--glass-edge)}
539
- .tabs{border-bottom-color:var(--glass-edge)}
540
- .row,.session,.step,.quote__foot,th,td,.pager,.signin-note{border-color:var(--glass-edge)}
541
- .gate{border-top-color:var(--glass-edge)}
542
- .stat,.ach{border-top-color:var(--glass-edge)}
543
- /* the rail state pins it: no hover expansion, the calm the thesis buys */
544
- body[data-state="rail"] .app-sidebar:hover,
545
- body[data-state="rail"] .app-sidebar:focus-within{width:var(--sidebar-w)}
546
- body[data-state="drawer"] .nav-item__label,body[data-state="drawer"] .nav-group__head,
547
- body[data-state="drawer"] .brand-mark__name,body[data-state="drawer"] .shell-user__meta{opacity:1}
548
- @media (max-width:1024px){
549
- .nav-item__label,.brand-mark__name,.shell-user__meta{display:flex}
550
- .nav-group__head{display:flex}
551
- }
552
- @media (max-width:860px){
553
- .app{padding-left:0}
554
- .app-sidebar{transform:translateX(-100%);width:var(--sidebar-w-open)}
555
- .app-sidebar:hover,.app-sidebar:focus-within{width:var(--sidebar-w-open)}
556
- .nav-item__label,.nav-group__head,.brand-mark__name,.shell-user__meta{opacity:1;width:auto;
557
- overflow:visible}
558
- .nav-item{gap:11px;justify-content:flex-start;padding:0 var(--sb-pad)}
559
- .brand-mark,.shell-user{gap:10px;justify-content:flex-start}
560
- }
561
- </style>
562
- <script>
563
- (function(){try{var q=new URLSearchParams(location.search||location.hash.slice(1)||'').get('mode');
564
- var m=(q==='light'||q==='dark')?q:'dark';
565
- document.documentElement.setAttribute('data-mode',m);
566
- document.documentElement.setAttribute('data-theme',m);}catch(e){}})();
567
- </script>
568
- </head>
569
- <body class="mock" data-state="populated">
570
- <!--
571
- Settings and profile in the chrome world, v3 "the glass hall" (task 1003302, goal 1000081).
572
- THESIS The owner's dark reference: the hall gets a ground, the shell is glass over it, and the sidebar is the 64px rail at every width that expands only when you reach for it.
573
- COMPOSITION The plate fills the viewport under a veil, the sidebar and top bar float on it as blurred glass, and the content column is bg-card at the large radius with the loosest air of the three. The CLI ladder's token sits in a glass well, so the secret reads as quoted material rather than as a painted box.
574
- LIGHT Light drops the plate entirely and the glass becomes a tint, not a frost: the same room on paper, never a black panel. The rail behaviour and the spacing are unchanged, so only the atmosphere is missing.
575
- RISK A photographic ground under a 27 page hall costs legibility on a form and adds a per-page cost the other two do not have, and the rail by default trades discoverability of the government and docs groups for calm.
576
- ?state=populated the page with real data
577
- ?state=loading skeletons in the SHAPE of the final content
578
- ?state=empty the honest signed-out view: the settings gate, and the public profile
579
- ?state=error a save failed, the status line carries it and the field keeps the entry
580
- ?state=rail the sidebar collapsed to its 64px rail
581
- ?state=drawer the mobile drawer open
582
- ?state=focus keyboard focus rings on the page's real controls
583
- -->
584
-
585
- <a class="skip" href="#main">Skip to content</a>
586
-
587
- <div class="app">
588
-
589
- <div class="app-sidebar" id="app-sidebar">
590
- <div class="app-sidebar__brand">
591
- <a class="brand-mark" href="/" id="brand-mark">
592
- <span class="brand-mark__dot"></span><span class="brand-mark__name">Cloud Bongos</span></a>
593
- </div>
594
- <nav class="app-sidebar__nav" aria-label="Primary">
595
- <div class="nav-group">
596
- <a class="nav-item" id="nav-home" href="/" data-gate="always">
597
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 7.2 8 2.6l6 4.6V13.4H2Z"/></svg>
598
- <span class="nav-item__label">Home</span></a>
599
- <a class="nav-item" id="nav-roadmap" href="/roadmap" data-gate="always">
600
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 4h11M2.5 8h7.5M2.5 12h4.5"/></svg>
601
- <span class="nav-item__label">Roadmap</span></a>
602
- <a class="nav-item" id="nav-goals" href="/goals" data-gate="always">
603
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.4a5.6 5.6 0 1 0 0 11.2 5.6 5.6 0 0 0 0-11.2Zm0 3.6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z"/></svg>
604
- <span class="nav-item__label">Goals</span></a>
605
- <a class="nav-item is-focus" id="nav-work" href="/work" data-gate="always">
606
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.6 3.4h10.8v9.2H2.6Zm0 3h10.8"/></svg>
607
- <span class="nav-item__label">Tasks</span></a>
608
- <a class="nav-item" id="nav-ideas" href="/ideas" data-gate="always">
609
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.4v2M8 11.6v2M2.4 8h2M11.6 8h2M8 5.6a2.4 2.4 0 1 0 0 4.8 2.4 2.4 0 0 0 0-4.8Z"/></svg>
610
- <span class="nav-item__label">Ideas</span></a>
611
- <a class="nav-item" id="nav-copy-desk" href="/copy-desk" data-gate="always">
612
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2.6h8v10.8H4Zm2 3h4M6 8h4M6 10.4h2.5"/></svg>
613
- <span class="nav-item__label">Copy desk</span></a>
614
- </div>
615
- <div class="nav-group nav-group--collapsible" id="navgrp-you" data-group="you">
616
- <button class="nav-group__head" type="button" data-gate="signed" data-group="you" aria-expanded="true" aria-controls="navgrp-you">
617
- <span class="nav-group__head-label">You</span>
618
- <svg class="nav-group__chevron" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4"/></svg></button>
619
- <a class="nav-item" id="nav-standing" href="/#standing" data-gate="signed">
620
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M3.2 13.4V8.6M8 13.4V3.4M12.8 13.4V6.2"/></svg>
621
- <span class="nav-item__label">Standing</span></a>
622
- <a class="nav-item nav-item--active" id="nav-profile" href="/profile" data-gate="signed" aria-current="page">
623
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3a2.4 2.4 0 1 0 0 4.8A2.4 2.4 0 0 0 8 3Zm-5 10.4c0-2.6 2.2-3.9 5-3.9s5 1.3 5 3.9"/></svg>
624
- <span class="nav-item__label">Profile</span></a>
625
- </div>
626
- <div class="nav-group nav-group--collapsible" id="navgrp-community" data-group="community">
627
- <button class="nav-group__head" type="button" data-gate="always" data-group="community" aria-expanded="true" aria-controls="navgrp-community">
628
- <span class="nav-group__head-label">Community</span>
629
- <svg class="nav-group__chevron" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4"/></svg></button>
630
- <a class="nav-item" id="nav-collab" href="/collab" data-gate="always">
631
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M5.8 3.6a2.2 2.2 0 1 0 0 4.4 2.2 2.2 0 0 0 0-4.4Zm4.6 1a2.2 2.2 0 1 0 0 4.4M2 13.2c0-2.2 1.7-3.4 3.8-3.4s3.8 1.2 3.8 3.4M11 9.9c1.8.2 3 1.4 3 3.3"/></svg>
632
- <span class="nav-item__label">Collab</span></a>
633
- <a class="nav-item" id="nav-leaderboard" href="/#leaderboard" data-gate="always">
634
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 13.4V9.4h3v4M6.5 13.4V5.4h3v8M10 13.4V7.4h3v6"/></svg>
635
- <span class="nav-item__label">Leaderboard</span></a>
636
- <a class="nav-item" id="nav-people" href="/people" data-gate="always">
637
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4.6 3.8a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm6.8 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM1.6 13c0-2 1.4-3.1 3-3.1s3 1.1 3 3.1m1.4 0c0-2 1.4-3.1 3-3.1s3 1.1 3 3.1"/></svg>
638
- <span class="nav-item__label">People</span></a>
639
- </div>
640
- <div class="nav-group nav-group--collapsible" id="navgrp-docs" data-group="docs">
641
- <button class="nav-group__head" type="button" data-gate="always" data-group="docs" aria-expanded="true" aria-controls="navgrp-docs">
642
- <span class="nav-group__head-label">Docs</span>
643
- <svg class="nav-group__chevron" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4"/></svg></button>
644
- <a class="nav-item" id="nav-primer" href="/primer" data-gate="always">
645
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 4.2C6.9 3.3 5.4 3 3 3v9.2c2.4 0 3.9.3 5 1.2 1.1-.9 2.6-1.2 5-1.2V3c-2.4 0-3.9.3-5 1.2Zm0 0v9.4"/></svg>
646
- <span class="nav-item__label">Primer</span></a>
647
- <a class="nav-item" id="nav-ranks" href="/ranks" data-gate="always">
648
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M3.6 9.6 8 5.6l4.4 4M3.6 12.8 8 8.8l4.4 4"/></svg>
649
- <span class="nav-item__label">Ranks</span></a>
650
- <a class="nav-item" id="nav-economy" href="/drachmae" data-gate="always">
651
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.4a5.6 5.6 0 1 0 0 11.2 5.6 5.6 0 0 0 0-11.2ZM5.8 6.2h4.4M5.8 9.8h4.4M8 4.4v7.2"/></svg>
652
- <span class="nav-item__label">Economy</span></a>
653
- <a class="nav-item" id="nav-diagrams" href="/diagrams" data-gate="always">
654
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.6 2.8h4.2V7H2.6Zm6.6 6.2h4.2v4.2H9.2ZM6.8 4.9h2.4v6.2"/></svg>
655
- <span class="nav-item__label">Diagrams</span></a>
656
- <a class="nav-item" id="nav-atlas" href="/atlas" data-gate="always">
657
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.4a5.6 5.6 0 1 0 0 11.2 5.6 5.6 0 0 0 0-11.2Zm-5.4 5.6h10.8M8 2.4c1.5 1.6 2.2 3.5 2.2 5.6S9.5 12 8 13.6C6.5 12 5.8 10.1 5.8 8s.7-4 2.2-5.6Z"/></svg>
658
- <span class="nav-item__label">Repo Atlas</span></a>
659
- <a class="nav-item" id="nav-modules" href="/modules" data-gate="always">
660
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.6 2.8h4.2V7H2.6Zm6.6 0h4.2V7H9.2ZM2.6 9h4.2v4.2H2.6Zm6.6 0h4.2v4.2H9.2Z"/></svg>
661
- <span class="nav-item__label">Modules</span></a>
662
- <a class="nav-item" id="nav-apidocs" href="/docs" data-gate="always">
663
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M5.8 4 2.6 8l3.2 4M10.2 4l3.2 4-3.2 4"/></svg>
664
- <span class="nav-item__label">API docs</span></a>
665
- </div>
666
- <div class="nav-group nav-group--collapsible" id="navgrp-government" data-group="government">
667
- <button class="nav-group__head" type="button" data-gate="signed" data-group="government" aria-expanded="true" aria-controls="navgrp-government">
668
- <span class="nav-group__head-label">Government</span>
669
- <svg class="nav-group__chevron" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4"/></svg></button>
670
- <a class="nav-item" id="nav-watch" href="/watch" data-gate="signed">
671
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M1.8 8S4 4.4 8 4.4 14.2 8 14.2 8 12 11.6 8 11.6 1.8 8 1.8 8Zm6.2-1.6a1.6 1.6 0 1 0 0 3.2 1.6 1.6 0 0 0 0-3.2Z"/></svg>
672
- <span class="nav-item__label">Watch</span></a>
673
- <a class="nav-item" id="nav-harbor" href="/harbor" data-gate="signed">
674
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.6a1.3 1.3 0 1 0 0 2.6 1.3 1.3 0 0 0 0-2.6Zm0 2.6v8.2M5.6 6.6h4.8M3 9.2a5 5 0 0 0 10 0"/></svg>
675
- <span class="nav-item__label">Harbor</span></a>
676
- <a class="nav-item" id="nav-gate" href="/gate" data-gate="signed">
677
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.8 13.4V5.2L8 2.6l5.2 2.6v8.2M6.4 13.4V8.4h3.2v5"/></svg>
678
- <span class="nav-item__label">Gate</span></a>
679
- <a class="nav-item" id="nav-sessions" href="/sessions" data-gate="signed">
680
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.6 3.4h10.8v9.2H2.6Zm0 3h10.8M5 9.4h6"/></svg>
681
- <span class="nav-item__label">Sessions</span></a>
682
- <a class="nav-item" id="nav-government" href="/government" data-gate="signed">
683
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M1.8 13.4h12.4M4 13.4V7.2M8 13.4V7.2M12 13.4V7.2M1.8 5.8 8 2.6l6.2 3.2Z"/></svg>
684
- <span class="nav-item__label">Permissions</span></a>
685
- </div>
686
- </nav>
687
- <div class="app-sidebar__foot">
688
- <a class="shell-user" id="shell-user" href="/settings" title="Settings">
689
- <span class="shell-user__avatar"></span>
690
- <span class="shell-user__meta">
691
- <span class="shell-user__name">Percy Jackson</span>
692
- <span class="shell-user__rank">Owner</span></span></a>
693
- <a class="shell-signin" href="/api/bongos/auth/web/start">Sign in</a>
694
- <a class="shell-home" href="/" title="Back to Cloud Bongos" aria-label="Back to Cloud Bongos"><svg class="bar-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 7.2 8 2.6l6 4.6V13.4H2Z"/></svg></a>
695
- <a class="shell-signout" href="/api/bongos/auth/logout" title="Sign out" aria-label="Sign out"><svg class="bar-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M6.2 3.2H3v9.6h3.2M9.4 5.6 12.2 8l-2.8 2.4M6.4 8h5.6"/></svg></a>
696
- </div>
697
- </div>
698
-
699
- <div class="app-scrim" id="app-scrim"></div>
700
-
701
- <div class="app-body">
702
-
703
- <header class="app-topbar" id="app-topbar">
704
- <button class="topbar-menu" id="topbar-menu" type="button" aria-label="Open navigation" aria-expanded="false" aria-controls="app-sidebar"><svg class="bar-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/></svg></button>
705
- <h2 class="topbar-title">Settings</h2>
706
- <div class="topbar-side">
707
- <span class="topbar-note num s-signed">14,441 credits</span>
708
- <button class="topbar-jump" id="topbar-jump" type="button" aria-label="Jump to a page or record">
709
- <span class="topbar-jump__label">Jump to</span><kbd class="topbar-jump__kbd">Ctrl K</kbd></button>
710
- <button class="zoom-toggle" type="button" aria-label="Text size"><svg class="bar-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.6 12.4 5.6 3.6l3 8.8M3.6 9.6h4M10.4 12.4V6.6M8.6 8.4h3.6"/></svg></button>
711
- <button class="theme-toggle" type="button" aria-label="Switch theme"><svg class="bar-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 2.4v1.8M8 11.8v1.8M2.4 8h1.8M11.8 8h1.8M4 4l1.3 1.3M10.7 10.7 12 12M12 4l-1.3 1.3M5.3 10.7 4 12M8 5.4a2.6 2.6 0 1 0 0 5.2 2.6 2.6 0 0 0 0-5.2Z"/></svg></button>
712
- </div>
713
- </header>
714
-
715
- <main class="app-content" id="main" tabindex="-1">
716
-
717
- <div class="pageHead">
718
- <h1 class="pageH">settings</h1>
719
- <p class="lede">Your connections, your keys, your box, and the way the hall behaves. Below the rule: the profile everyone else reads.</p>
720
- </div>
721
-
722
- <section class="gate s-empty" aria-labelledby="gate-h">
723
- <h2 class="gate__h" id="gate-h">Not signed in</h2>
724
- <p class="gate__lede">You are not signed in yet. Sign in to manage your connections, your keys, your dev box and the way the hall sounds. Everything below the rule is the public profile a stranger reads.</p>
725
- <a class="btn btn--save" href="/api/bongos/auth/web/start">Sign in</a>
726
- </section>
727
-
728
- <div class="settings-layout s-signed">
729
- <div class="rail-wrap">
730
- <nav class="section-rail s-real" aria-label="Settings sections">
731
- <a class="rail-link rail-link--active" href="#grp-account" data-key="account" aria-current="true">Account</a>
732
- <a class="rail-link is-focus" href="#grp-access" data-key="access">Access &amp; keys</a>
733
- <a class="rail-link" href="#grp-devbox" data-key="devbox">Dev box</a>
734
- <a class="rail-link" href="#grp-preferences" data-key="preferences">Preferences</a>
735
- <a class="rail-link" href="#grp-sound" data-key="sound">Sound</a>
736
- <a class="rail-link" href="#grp-extensions" data-key="extensions" hidden>Extensions</a>
737
- </nav>
738
- <div class="skelRail s-load" aria-hidden="true"><span class="skel skel--rail"></span><span class="skel skel--rail"></span><span class="skel skel--rail"></span><span class="skel skel--rail"></span><span class="skel skel--rail"></span></div>
739
- <p class="rail-note">The live page shows one group at a time. This sheet stacks all five so the round can judge every panel at once.</p>
740
- </div>
741
- <div class="settings-groups s-real" data-active="account">
742
- <section class="grp" id="grp-account" aria-labelledby="grp-account-h">
743
- <div class="grp__head">
744
- <h2 class="grp__h" id="grp-account-h">Account</h2>
745
- <span class="grp__eyebrow lbl">/settings#account</span>
746
- </div>
747
- <section class="panel" id="connections" aria-labelledby="connections-h">
748
- <h3 class="panel__h" id="connections-h">Connections</h3>
749
- <p class="panel__lede">Link your Discord account and you are added to the Cloud Bongos server with your rank role already set, no invite to share or leak.</p>
750
- <div class="rows">
751
- <div class="row">
752
- <div class="row__main"><p class="row__label">Discord</p><p class="row__desc">Linked to jaxri on 2026-08-14.</p></div>
753
- <div class="row__ctl"><span class="chip chip--ok">Connected</span><button class="btn btn--quiet" type="button">Disconnect</button></div>
754
- </div>
755
- </div>
756
- <p class="panel__note">Linking opens Discord's consent screen; unlinking applies at once.</p>
757
- </section>
758
- <section class="panel" id="display-name" aria-labelledby="display-name-h">
759
- <h3 class="panel__h" id="display-name-h">Display name</h3>
760
- <p class="panel__lede">The name shown beside your work, in the roster, the leaderboard and the work feed. Your sign-in and the credit for shipped work stay tied to your account, not this label.</p>
761
- <label class="fieldLbl" for="display-name-input">Display name</label>
762
- <div class="field">
763
- <input class="input is-focus" id="display-name-input" name="display-name" type="text" maxlength="60" value="Percy Jackson" autocomplete="off" spellcheck="false">
764
- <button class="btn btn--save" id="display-name-save" type="button">Save</button>
765
- </div>
766
- <p class="status status--ok s-ok" id="display-name-status" role="status" aria-live="polite">Saved 2026-08-30 at 09:14. Everyone sees it at once.</p>
767
- <p class="status status--danger s-err" role="status" aria-live="polite">Could not save: the server refused the change (HTTP 500). Nothing was written, and your entry is still in the field. Press Save to try again.</p>
768
- <p class="panel__note">Saves when you press Save; shows everywhere at once.</p>
769
- </section>
770
- <section class="panel" id="cross-project" aria-labelledby="cross-project-h">
771
- <h3 class="panel__h" id="cross-project-h">Cross-project record</h3>
772
- <p class="panel__lede">Your track record across every project you build on, shown on your public profile. Hiding it takes effect immediately everywhere: your profile, the People directory, and recruiting views.</p>
773
- <div class="rows">
774
- <div class="row">
775
- <div class="row__main"><p class="row__label">Show my cross-project record</p><p class="row__desc">Four projects, 1,181 works, visible to anyone reading your profile.</p></div>
776
- <div class="row__ctl"><button class="sw" type="button" role="switch" aria-checked="true" id="sw-xp" aria-label="Show my cross-project record"><span class="sw__track"></span><span class="sw__knob"></span></button></div>
777
- </div>
778
- </div>
779
- <p class="status" role="status" aria-live="polite">On since 2026-08-14.</p>
780
- </section>
781
- <section class="panel" id="privacy" aria-labelledby="privacy-h">
782
- <h3 class="panel__h" id="privacy-h">Profile privacy</h3>
783
- <p class="panel__lede">Who can find you. Your profile page can be public or private, and recruiters looking for builders are allowed in separately, so a private profile can still be reachable for work and a public one can stay out of recruiting entirely.</p>
784
- <div class="rows">
785
- <div class="row">
786
- <div class="row__main"><p class="row__label">Profile page</p><p class="row__desc">Public. Anyone with the link reads your works, your rank and your shelf.</p></div>
787
- <div class="row__ctl"><button class="sw" type="button" role="switch" aria-checked="true" id="sw-public" aria-label="Profile page is public"><span class="sw__track"></span><span class="sw__knob"></span></button></div>
788
- </div>
789
- <div class="row">
790
- <div class="row__main"><p class="row__label">Discoverable by recruiters</p><p class="row__desc">You appear in the recruiting search and in the People directory.</p></div>
791
- <div class="row__ctl"><button class="sw" type="button" role="switch" aria-checked="true" id="sw-recruit" aria-label="Discoverable by recruiters"><span class="sw__track"></span><span class="sw__knob"></span></button></div>
792
- </div>
793
- </div>
794
- <p class="status" role="status" aria-live="polite">Both applied. Private already answers not found everywhere your profile is read.</p>
795
- </section>
796
- <section class="panel" id="craft" aria-labelledby="craft-h">
797
- <h3 class="panel__h" id="craft-h">Preferred disciplines</h3>
798
- <p class="panel__lede">The kinds of work you prefer. Task suggestions lean toward your choices: pick one, several, or none.</p>
799
- <div class="chips">
800
- <label class="chip-ctl"><input type="checkbox" name="craft" value="engineer" checked><span>engineer</span></label>
801
- <label class="chip-ctl"><input type="checkbox" name="craft" value="artist"><span>artist</span></label>
802
- <label class="chip-ctl"><input type="checkbox" name="craft" value="ideator" checked><span>ideator</span></label>
803
- </div>
804
- <div class="rowEnd">
805
- <button class="btn btn--save" type="button">Save</button>
806
- <p class="status status--ok" role="status" aria-live="polite">Saved. Your next /builder-start reflects it.</p>
807
- </div>
808
- </section>
809
- </section>
810
- <section class="grp" id="grp-access" aria-labelledby="grp-access-h">
811
- <div class="grp__head">
812
- <h2 class="grp__h" id="grp-access-h">Access &amp; keys</h2>
813
- <span class="grp__eyebrow lbl">/settings#access</span>
814
- </div>
815
- <section class="panel" id="cli" aria-labelledby="cli-h">
816
- <h3 class="panel__h" id="cli-h">CLI access</h3>
817
- <p class="panel__lede">Mint a fresh CLI token using this browser session and paste it into your terminal: the quick way back in when a /builder-* command says your session expired.</p>
818
- <ol class="ladder">
819
- <li class="step">
820
- <p class="step__eyebrow lbl">1 &middot; resting</p>
821
- <div class="step__body">
822
- <button class="btn is-focus" id="cli-reissue-btn" type="button">Re-issue CLI token</button>
823
- <span class="hint">paste it into your terminal, bypasses Device Flow</span>
824
- </div>
825
- </li>
826
- <li class="step">
827
- <p class="step__eyebrow lbl">2 &middot; minting</p>
828
- <div class="step__body">
829
- <button class="btn" type="button" disabled aria-disabled="true">Minting</button>
830
- <span class="hint">the browser session is being exchanged for a bearer</span>
831
- </div>
832
- </li>
833
- <li class="step">
834
- <p class="step__eyebrow lbl">3 &middot; issued</p>
835
- <div class="step__body step__body--col">
836
- <p class="step__say">Fresh CLI token issued. Paste it in your terminal:</p>
837
- <div class="quote">
838
- <p class="quote__eyebrow lbl">paste command</p>
839
- <pre class="quote__pre"><span class="quote__cmd">node scripts/gds/paste-token.js</span> <span class="quote__tok num">EXAMPLETOKENnotarealcredentialEXAMPLETOKENnotarealcredential0000</span></pre>
840
- <div class="quote__foot">
841
- <button class="btn btn--quiet" type="button">Copy</button>
842
- <span class="hint num">Expires 2026-09-29, refreshes on use.</span>
843
- </div>
844
- </div>
845
- </div>
846
- </li>
847
- </ol>
848
- <p class="panel__note">Tokens refresh on use; re-issuing never signs you out anywhere else.</p>
849
- </section>
850
- <section class="panel" id="sessions" aria-labelledby="sessions-h">
851
- <h3 class="panel__h" id="sessions-h">Active sessions</h3>
852
- <p class="panel__lede">Every place you are currently signed in: this browser, your terminal, any dev box. A session refreshes for another 24 hours each time it is used, so one you have forgotten about can stay alive indefinitely. If a token has leaked, end it here.</p>
853
- <ul class="sessions">
854
- <li class="session">
855
- <div class="row__main"><p class="row__label">This browser</p><p class="row__desc num">Windows, Chrome &middot; started 2026-08-30 09:12 &middot; active now</p></div>
856
- <div class="row__ctl"><span class="chip chip--info">This one</span><button class="btn btn--quiet" type="button">End</button></div>
857
- </li>
858
- <li class="session">
859
- <div class="row__main"><p class="row__label">Terminal</p><p class="row__desc num">CLI bearer &middot; last used 2026-08-30 08:40</p></div>
860
- <div class="row__ctl"><button class="btn btn--quiet" type="button">End</button></div>
861
- </li>
862
- <li class="session">
863
- <div class="row__main"><p class="row__label">Dev box</p><p class="row__desc num">box-jaxri &middot; last used 2026-08-29 22:05</p></div>
864
- <div class="row__ctl"><button class="btn btn--quiet" type="button">End</button></div>
865
- </li>
866
- </ul>
867
- <div class="rowEnd">
868
- <button class="btn btn--quiet" type="button">Sign out everywhere</button>
869
- <span class="hint">ends every session including this one, you will be asked to sign in again</span>
870
- </div>
871
- <p class="panel__note">Ending a session takes effect immediately; the token stops working on its very next request.</p>
872
- </section>
873
- <section class="panel" id="art-key" aria-labelledby="art-key-h">
874
- <h3 class="panel__h" id="art-key-h">Image-generation key</h3>
875
- <p class="panel__lede">The art pipeline draws tiles and sprites with Google AI Studio. Needed only if you generate art: your key, your bill, paid only for what you make.</p>
876
- <p class="banner banner--warn">Action needed. Your covered art allowance has ended, so add your own key to keep generating.</p>
877
- <div class="rows">
878
- <div class="row">
879
- <div class="row__main"><p class="row__label">Key on file</p><p class="row__desc">Write only. Added 2026-08-14, and never shown again after saving.</p></div>
880
- <div class="row__ctl"><span class="chip chip--ok">On file</span><span class="masked num">Ending 4f21</span></div>
881
- </div>
882
- </div>
883
- <div class="rowEnd">
884
- <button class="btn btn--quiet" type="button">Replace</button>
885
- <button class="btn btn--quiet" type="button">Remove</button>
886
- </div>
887
- <label class="fieldLbl" for="artkey-input">Replacement key</label>
888
- <div class="field">
889
- <input class="input" id="artkey-input" name="artkey" type="password" autocomplete="off" spellcheck="false" placeholder="Paste your Google AI Studio key">
890
- <button class="btn btn--save" type="button">Save key</button>
891
- </div>
892
- <p class="status" role="status" aria-live="polite">Stored encrypted. Only the last four digits are ever read back.</p>
893
- <p class="panel__note">Set, replace or remove. There is no read: the field above writes, it never shows.</p>
894
- </section>
895
- </section>
896
- <section class="grp" id="grp-devbox" aria-labelledby="grp-devbox-h">
897
- <div class="grp__head">
898
- <h2 class="grp__h" id="grp-devbox-h">Dev box</h2>
899
- <span class="grp__eyebrow lbl">/settings#devbox</span>
900
- </div>
901
- <section class="panel" id="box" aria-labelledby="box-h">
902
- <h3 class="panel__h" id="box-h">Your dev box</h3>
903
- <p class="panel__lede">The hosted machine your work runs on. Open it in your browser, or connect over SSH, whichever you prefer.</p>
904
- <div class="rows">
905
- <div class="row">
906
- <div class="row__main"><p class="row__label">box-jaxri</p><p class="row__desc">Running since 2026-08-29 21:02.</p></div>
907
- <div class="row__ctl"><span class="chip chip--ok">Running</span><button class="btn btn--quiet" type="button">Open terminal</button><button class="btn btn--quiet" type="button">Close the box</button></div>
908
- </div>
909
- <div class="row">
910
- <div class="row__main"><p class="row__label">Over SSH</p><p class="row__desc"><span class="num">ssh builder@box.example.com</span></p></div>
911
- <div class="row__ctl"><button class="btn btn--quiet" type="button">Copy</button></div>
912
- </div>
913
- </div>
914
- <p class="panel__note">Actions apply at once. Closing stops and deletes the box; you can start a fresh one anytime.</p>
915
- </section>
916
- <section class="panel" id="boxapp" aria-labelledby="boxapp-h">
917
- <h3 class="panel__h" id="boxapp-h">Dev box app</h3>
918
- <p class="panel__lede">A small app for your menu bar on Mac or your system tray on Windows: one switch to start and stop your dev box, with a chime when it is ready. It signs in with browser clicks and sets up Claude Desktop for you, no terminal at all.</p>
919
- <div class="rowEnd">
920
- <a class="btn" href="/downloads/devbox/mac-arm64">Download for Mac</a>
921
- <a class="btn" href="/downloads/devbox/win-x64">Download for Windows</a>
922
- </div>
923
- <p class="hint">Intel Mac? <a class="link" href="/downloads/devbox/mac-x64">This one</a>. ARM Windows (Surface, Snapdragon, Parallels)? <a class="link" href="/downloads/devbox/win-arm64">This one</a>.</p>
924
- <p class="panel__note">First open: your computer warns about an unknown developer, which is expected. Mac: System Settings, Privacy and Security, Open Anyway. Windows: More info, Run anyway.</p>
925
- </section>
926
- <section class="panel" id="pairing" aria-labelledby="pairing-h">
927
- <h3 class="panel__h" id="pairing-h">Pair Claude Desktop</h3>
928
- <p class="panel__lede">Connect your Claude Desktop to your dev box with a one-time pairing code. The guided flow lives on its own page.</p>
929
- <div class="rowEnd"><a class="btn" href="/pair">Open the pairing page</a></div>
930
- </section>
931
- </section>
932
- <section class="grp" id="grp-preferences" aria-labelledby="grp-preferences-h">
933
- <div class="grp__head">
934
- <h2 class="grp__h" id="grp-preferences-h">Preferences</h2>
935
- <span class="grp__eyebrow lbl">/settings#preferences</span>
936
- </div>
937
- <section class="panel" id="wandering" aria-labelledby="wandering-h">
938
- <h3 class="panel__h" id="wandering-h">Wandering</h3>
939
- <p class="panel__lede">How readily Claude opens a new thread of work, a tangent, an investigation, an unprompted suggestion, instead of staying on your claimed task. It never limits the work on the task itself. Your rank sets the starting point; newcomers stay locked low.</p>
940
- <div class="rows">
941
- <label class="row row--pick" for="w-locked">
942
- <input class="radio" type="radio" name="wandering" id="w-locked" value="locked">
943
- <span class="row__main"><span class="row__label">Locked</span><span class="row__desc">Strictly the claimed task. Off-task notes are filed silently, never raised.</span></span>
944
- </label>
945
- <label class="row row--pick" for="w-focused">
946
- <input class="radio" type="radio" name="wandering" id="w-focused" value="focused">
947
- <span class="row__main"><span class="row__label">Focused</span><span class="row__desc">On task, full in-task initiative; at most one captured follow-up at the end.</span></span>
948
- </label>
949
- <label class="row row--pick" for="w-balanced">
950
- <input class="radio" type="radio" name="wandering" id="w-balanced" value="balanced">
951
- <span class="row__main"><span class="row__label">Balanced</span><span class="row__desc">May surface a high-value tangent mid-task as a question: capture, or pursue? Your call.</span></span>
952
- </label>
953
- <label class="row row--pick" for="w-exploratory">
954
- <input class="radio" type="radio" name="wandering" id="w-exploratory" value="exploratory" checked>
955
- <span class="row__main"><span class="row__label">Exploratory</span><span class="row__desc">A thinking partner. Actively surfaces adjacent work and investigations.</span></span>
956
- </label>
957
- </div>
958
- <p class="status" role="status" aria-live="polite">Now: Exploratory. Your rank allows up to exploratory.</p>
959
- <p class="panel__note">Saves the moment you pick; applies from your next session.</p>
960
- </section>
961
- <section class="panel" id="render" aria-labelledby="render-h">
962
- <h3 class="panel__h" id="render-h">Rendering</h3>
963
- <p class="panel__lede">Whether your session cards, what /builder-start, claiming and shipping show, render as rich in-feed widgets or as plain text. Widgets are prettier but spend tokens; plain text is cheaper with the same information.</p>
964
- <div class="rows">
965
- <div class="row">
966
- <div class="row__main"><p class="row__label">Rich in-feed cards</p><p class="row__desc">Claude relays a rendered widget verbatim. Off uses the cheap text form.</p></div>
967
- <div class="row__ctl"><button class="sw" type="button" role="switch" aria-checked="true" id="sw-render" aria-label="Rich in-feed cards"><span class="sw__track"></span><span class="sw__knob"></span></button></div>
968
- </div>
969
- </div>
970
- <p class="status" role="status" aria-live="polite">On. Applies from your next session.</p>
971
- </section>
972
- </section>
973
- <section class="grp" id="grp-sound" aria-labelledby="grp-sound-h">
974
- <div class="grp__head">
975
- <h2 class="grp__h" id="grp-sound-h">Sound</h2>
976
- <span class="grp__eyebrow lbl">/settings#sound</span>
977
- </div>
978
- <section class="panel" id="voices" aria-labelledby="voices-h">
979
- <h3 class="panel__h" id="voices-h">Skill voices</h3>
980
- <p class="panel__lede">Each slash-command can run on a different model. The system has a default for every skill; choose another to override it, or leave it on Default.</p>
981
- <div class="tableWrap">
982
- <table class="grid">
983
- <thead><tr><th scope="col">Skill</th><th scope="col">Default</th><th scope="col">Your choice</th></tr></thead>
984
- <tbody>
985
- <tr>
986
- <th scope="row" class="grid__k num">/builder-ship</th>
987
- <td class="grid__v">Opus</td>
988
- <td class="grid__c"><label class="srOnly" for="voice-0">Voice for /builder-ship</label><select class="sel" id="voice-0" name="voice-0"><option selected>Default</option><option>Opus</option><option>Sonnet</option><option>Haiku</option></select></td>
989
- </tr>
990
- <tr>
991
- <th scope="row" class="grid__k num">/builder-start</th>
992
- <td class="grid__v">Haiku</td>
993
- <td class="grid__c"><label class="srOnly" for="voice-1">Voice for /builder-start</label><select class="sel" id="voice-1" name="voice-1"><option>Default</option><option>Opus</option><option selected>Sonnet</option><option>Haiku</option></select></td>
994
- </tr>
995
- <tr>
996
- <th scope="row" class="grid__k num">/planning-session</th>
997
- <td class="grid__v">Opus</td>
998
- <td class="grid__c"><label class="srOnly" for="voice-2">Voice for /planning-session</label><select class="sel" id="voice-2" name="voice-2"><option selected>Default</option><option>Opus</option><option>Sonnet</option><option>Haiku</option></select></td>
999
- </tr>
1000
- </tbody>
1001
- </table>
1002
- </div>
1003
- <p class="status status--ok" role="status" aria-live="polite">Saved. Default clears your override and falls back to the system choice.</p>
1004
- <p class="panel__note">Changes save the moment you pick.</p>
1005
- </section>
1006
- <section class="panel" id="sounds" aria-labelledby="sounds-h">
1007
- <h3 class="panel__h" id="sounds-h">Sounds</h3>
1008
- <p class="panel__lede">A sound plays at each turn of your work: a gentle chime when Claude finishes, a flourish when a task ships or your rank rises. Turn off any you would rather not hear.</p>
1009
- <div class="volume">
1010
- <label class="fieldLbl" for="sound-volume">Volume</label>
1011
- <input class="range" type="range" id="sound-volume" name="sound-volume" min="0" max="100" step="5" value="100">
1012
- <span class="hint num">100%</span>
1013
- </div>
1014
- <div class="rows">
1015
- <div class="row">
1016
- <div class="row__main"><p class="row__label">Claude is waiting for you</p><p class="row__desc">chime.wav</p></div>
1017
- <div class="row__ctl"><button class="sw" type="button" role="switch" aria-checked="true" id="sw-s1" aria-label="Sound when Claude is waiting for you"><span class="sw__track"></span><span class="sw__knob"></span></button></div>
1018
- </div>
1019
- <div class="row">
1020
- <div class="row__main"><p class="row__label">A task ships</p><p class="row__desc">ship.wav</p></div>
1021
- <div class="row__ctl"><button class="sw" type="button" role="switch" aria-checked="true" id="sw-s2" aria-label="Sound when a task ships"><span class="sw__track"></span><span class="sw__knob"></span></button></div>
1022
- </div>
1023
- <div class="row">
1024
- <div class="row__main"><p class="row__label">Your rank rises</p><p class="row__desc">fanfare.wav</p></div>
1025
- <div class="row__ctl"><button class="sw" type="button" role="switch" aria-checked="false" id="sw-s3" aria-label="Sound when your rank rises"><span class="sw__track"></span><span class="sw__knob"></span></button></div>
1026
- </div>
1027
- </div>
1028
- <p class="panel__note">Changes save at once and take effect the next time you start a session on this machine.</p>
1029
- </section>
1030
- <section class="panel" id="event-sounds" aria-labelledby="event-sounds-h">
1031
- <h3 class="panel__h" id="event-sounds-h">Event sounds</h3>
1032
- <p class="panel__lede">Choose which sound plays for each build event: one when Claude waits for your input, another when a task ships, a coin clink when credits arrive. Each event offers a small set of choices; more will be added as new audio ships.</p>
1033
- <div class="rows">
1034
- <div class="row">
1035
- <div class="row__main"><p class="row__label">Task shipped</p><p class="row__desc num">ship.wav</p></div>
1036
- <div class="row__ctl">
1037
- <label class="srOnly" for="ev-ship">Sound for Task shipped</label>
1038
- <select class="sel" id="ev-ship" name="ev-ship"><option selected>Ship (default)</option><option>Fanfare</option><option>Triumph</option></select>
1039
- <button class="btn btn--quiet" type="button" aria-label="Preview Task shipped sound">Play</button>
1040
- </div>
1041
- </div>
1042
- <div class="row">
1043
- <div class="row__main"><p class="row__label">Credits arrive</p><p class="row__desc num">triumph.wav</p></div>
1044
- <div class="row__ctl">
1045
- <label class="srOnly" for="ev-credit">Sound for Credits arrive</label>
1046
- <select class="sel" id="ev-credit" name="ev-credit"><option>Chime (default)</option><option selected>Triumph</option><option>Alert</option></select>
1047
- <button class="btn btn--quiet" type="button" aria-label="Preview Credits arrive sound">Play</button>
1048
- </div>
1049
- </div>
1050
- </div>
1051
- <p class="panel__note">Changes save at once. Your new choice plays the next time that event fires.</p>
1052
- </section>
1053
- </section>
1054
- <div class="grp" id="grp-extensions" data-group="extensions" hidden>
1055
- <div class="grp__head"><h2 class="grp__h">Extensions</h2><span class="grp__eyebrow lbl">extensions</span></div>
1056
- </div>
1057
- </div>
1058
- <div class="skelPanels s-load" aria-hidden="true">
1059
- <span class="skel skel--h"></span>
1060
- <span class="skel skel--row"></span><span class="skel skel--row"></span>
1061
- <span class="skel skel--row"></span><span class="skel skel--row"></span>
1062
- <span class="skel skel--h"></span>
1063
- <span class="skel skel--row"></span><span class="skel skel--row"></span>
1064
- </div>
1065
- </div>
1066
-
1067
- <section class="profile" aria-labelledby="prof-h">
1068
- <div class="split">
1069
- <span class="split__eyebrow lbl">the page everyone else reads</span>
1070
- </div>
1071
- <h2 class="prof-h" id="prof-h">Profile</h2>
1072
-
1073
- <div class="ident s-real">
1074
- <span class="ident__avatar" aria-hidden="true"></span>
1075
- <div class="ident__meta">
1076
- <p class="ident__name">Percy Jackson</p>
1077
- <p class="ident__sub"><span class="lbl ident__rank">Owner</span><span class="ident__login num">jaxri</span></p>
1078
- </div>
1079
- <a class="btn btn--quiet s-signed" href="#grp-account">Edit your details</a>
1080
- </div>
1081
- <div class="skelIdent s-load" aria-hidden="true"><span class="skel skel--disc"></span><span class="skel skel--h"></span></div>
1082
-
1083
- <section class="panel" id="numbers" aria-labelledby="numbers-h">
1084
- <h3 class="panel__h" id="numbers-h">By the numbers</h3>
1085
- <div class="stat-row s-real">
1086
- <div class="stat">
1087
- <span class="stat__label lbl">Credits</span>
1088
- <span class="stat__num num">14,441</span>
1089
- <span class="stat__sub">earned on shipped work</span>
1090
- </div>
1091
- <div class="stat">
1092
- <span class="stat__label lbl">Rank</span>
1093
- <span class="stat__num">Owner</span>
1094
- <span class="stat__sub">archon, the top of the ladder</span>
1095
- </div>
1096
- <div class="stat">
1097
- <span class="stat__label lbl">Achievements</span>
1098
- <span class="stat__num num">6</span>
1099
- <span class="stat__sub">of 8 on the shelf</span>
1100
- </div>
1101
- </div>
1102
- <div class="skelStats s-load" aria-hidden="true"><span class="skel skel--tile"></span><span class="skel skel--tile"></span><span class="skel skel--tile"></span></div>
1103
- </section>
1104
-
1105
- <section class="panel" id="achievements" aria-labelledby="ach-h">
1106
- <h3 class="panel__h" id="ach-h">Achievements</h3>
1107
- <div class="ach-grid s-real">
1108
- <div class="ach">
1109
- <p class="ach__id lbl">first-ship</p>
1110
- <p class="ach__name">First Ship</p>
1111
- <p class="ach__desc">Ship your first task.</p>
1112
- <p class="ach__meta">Won 2026-02-19</p>
1113
- </div>
1114
- <div class="ach">
1115
- <p class="ach__id lbl">first-claim</p>
1116
- <p class="ach__name">First Claim</p>
1117
- <p class="ach__desc">Claim your first task.</p>
1118
- <p class="ach__meta">Won 2026-02-19</p>
1119
- </div>
1120
- <div class="ach">
1121
- <p class="ach__id lbl">first-parallel-claim</p>
1122
- <p class="ach__name">First Parallel Claim</p>
1123
- <p class="ach__desc">Hold two simultaneous claims, and ship both.</p>
1124
- <p class="ach__meta">Won 2026-03-04</p>
1125
- </div>
1126
- <div class="ach">
1127
- <p class="ach__id lbl">streak-3</p>
1128
- <p class="ach__name">Streak: 3 Nights</p>
1129
- <p class="ach__desc">Ship a task on 3 consecutive nights.</p>
1130
- <p class="ach__meta">Won 2026-03-11</p>
1131
- </div>
1132
- <div class="ach ach--locked">
1133
- <p class="ach__id lbl">streak-7</p>
1134
- <p class="ach__name">Streak: 7 Nights</p>
1135
- <p class="ach__desc">Ship a task on 7 consecutive nights.</p>
1136
- <p class="ach__meta ach__meta--off">Not yet earned</p>
1137
- </div>
1138
- <div class="ach">
1139
- <p class="ach__id lbl">art-pipeline-shipper</p>
1140
- <p class="ach__name">Art Pipeline Shipper</p>
1141
- <p class="ach__desc">Ship a task that touches the art pipeline.</p>
1142
- <p class="ach__meta">Won 2026-06-02</p>
1143
- </div>
1144
- <div class="ach ach--locked">
1145
- <p class="ach__id lbl">subtractor</p>
1146
- <p class="ach__name">Subtractor</p>
1147
- <p class="ach__desc">Earn the net-negative ship bonus on 3 ships: across your work you have deleted more than you have added.</p>
1148
- <p class="ach__meta ach__meta--off">Not yet earned</p>
1149
- </div>
1150
- <div class="ach">
1151
- <p class="ach__id lbl">breaking-the-100c-bar</p>
1152
- <p class="ach__name">Breaking the 100c Bar</p>
1153
- <p class="ach__desc">Cross 100 total credits.</p>
1154
- <p class="ach__meta">Won 2026-03-01</p>
1155
- </div>
1156
- </div>
1157
- <div class="skelAch s-load" aria-hidden="true"><span class="skel skel--tile"></span><span class="skel skel--tile"></span><span class="skel skel--tile"></span><span class="skel skel--tile"></span></div>
1158
- </section>
1159
-
1160
- <section class="panel" id="works" aria-labelledby="works-h">
1161
- <h3 class="panel__h" id="works-h">Recent works</h3>
1162
- <p class="panel__lede">The most recent works this builder has shipped.</p>
1163
- <div class="tableWrap s-real">
1164
- <table class="ledger">
1165
- <thead>
1166
- <tr><th scope="col" class="lg__num">#</th><th scope="col">Work</th><th scope="col" class="lg__rew">Reward</th><th scope="col" class="lg__date">Shipped</th></tr>
1167
- </thead>
1168
- <tbody>
1169
- <tr>
1170
- <td class="lg__num num">1003322</td>
1171
- <td class="lg__work">Carve public-landing/ into modules/public-landing/: manifest, the apex-root web surface, the nested CLAUDE.md for a newcomer</td>
1172
- <td class="lg__rew num">60</td>
1173
- <td class="lg__date num">2026-08-30</td>
1174
- </tr>
1175
- <tr>
1176
- <td class="lg__num num">1003352</td>
1177
- <td class="lg__work">Project settings: the card's backdrop, a platform-drawn plate set the owner picks for the poster</td>
1178
- <td class="lg__rew num">45</td>
1179
- <td class="lg__date num">2026-08-29</td>
1180
- </tr>
1181
- <tr>
1182
- <td class="lg__num num">1003297</td>
1183
- <td class="lg__work">Landing composition round: three versions of the approved world</td>
1184
- <td class="lg__rew num">80</td>
1185
- <td class="lg__date num">2026-08-27</td>
1186
- </tr>
1187
- <tr>
1188
- <td class="lg__num num">1003296</td>
1189
- <td class="lg__work">World round: PRODUCT.md and four style candidates across landing, hall and status</td>
1190
- <td class="lg__rew num">80</td>
1191
- <td class="lg__date num">2026-08-27</td>
1192
- </tr>
1193
- </tbody>
1194
- </table>
1195
- </div>
1196
- <div class="skelLedger s-load" aria-hidden="true"><span class="skel skel--row"></span><span class="skel skel--row"></span><span class="skel skel--row"></span><span class="skel skel--row"></span></div>
1197
- </section>
1198
-
1199
- <section class="panel" id="activity" aria-labelledby="activity-h">
1200
- <h3 class="panel__h" id="activity-h">Activity, by craft</h3>
1201
- <p class="panel__lede">What this builder has done, seen one craft at a time.</p>
1202
-
1203
- <p class="signin-note s-empty">Works, goals and idea trails are visible to signed-in builders. <a class="link" href="/api/bongos/auth/web/start">Sign in</a> to read this builder's activity. Everything above stays public.</p>
1204
-
1205
- <div class="skelAct s-load" aria-hidden="true"><span class="skel skel--h"></span><span class="skel skel--row"></span><span class="skel skel--row"></span><span class="skel skel--row"></span></div>
1206
-
1207
- <div class="s-signed s-real">
1208
- <div class="tabs" role="group" aria-label="Craft">
1209
- <button class="tab tab--active" type="button" aria-pressed="true" data-craft="all">All</button>
1210
- <button class="tab" type="button" aria-pressed="false" data-craft="engineer">Engineer</button>
1211
- <button class="tab" type="button" aria-pressed="false" data-craft="artist">Artist</button>
1212
- <button class="tab" type="button" aria-pressed="false" data-craft="ideator">Ideator</button>
1213
- <button class="tab" type="button" aria-pressed="false" data-craft="ui">UI</button>
1214
- </div>
1215
-
1216
- <div class="act">
1217
- <h4 class="act__h">Works completed</h4>
1218
- <div class="tableWrap">
1219
- <table class="ledger ledger--tight">
1220
- <thead><tr><th scope="col" class="lg__num">#</th><th scope="col">Work</th><th scope="col" class="lg__date">Completed</th></tr></thead>
1221
- <tbody>
1222
- <tr><td class="lg__num num">1003322</td><td>Carve public-landing/ into modules/public-landing/</td><td class="lg__date num">2026-08-30</td></tr>
1223
- <tr><td class="lg__num num">1003352</td><td>Project settings: the card's backdrop</td><td class="lg__date num">2026-08-29</td></tr>
1224
- <tr><td class="lg__num num">1003297</td><td>Landing composition round: three versions of the approved world</td><td class="lg__date num">2026-08-27</td></tr>
1225
- </tbody>
1226
- </table>
1227
- </div>
1228
- <div class="pager">
1229
- <span class="hint num">Page 1</span>
1230
- <button class="btn btn--quiet" type="button" disabled aria-disabled="true" aria-label="Previous page of works completed">Previous</button>
1231
- <button class="btn btn--quiet" type="button" aria-label="Next page of works completed">Next</button>
1232
- </div>
1233
- </div>
1234
-
1235
- <div class="act">
1236
- <h4 class="act__h">Goals created</h4>
1237
- <div class="tableWrap">
1238
- <table class="ledger ledger--tight">
1239
- <thead><tr><th scope="col" class="lg__num">#</th><th scope="col">Goal</th><th scope="col">Scope</th><th scope="col" class="lg__date">Status</th></tr></thead>
1240
- <tbody>
1241
- <tr><td class="lg__num num">1000081</td><td>Builders' hall in the world</td><td class="lg__scope num">hall-ui</td><td class="lg__date"><span class="chip chip--info">open</span></td></tr>
1242
- <tr><td class="lg__num num">1000080</td><td>Apex UI pass 2</td><td class="lg__scope num">public-landing, platform-identity</td><td class="lg__date"><span class="chip chip--ok">achieved</span></td></tr>
1243
- <tr><td class="lg__num num">1000063</td><td>The front door</td><td class="lg__scope num">public-landing</td><td class="lg__date"><span class="chip chip--info">open</span></td></tr>
1244
- </tbody>
1245
- </table>
1246
- </div>
1247
- <div class="pager">
1248
- <span class="hint num">Page 1</span>
1249
- <button class="btn btn--quiet" type="button" disabled aria-disabled="true" aria-label="Previous page of goals created">Previous</button>
1250
- <button class="btn btn--quiet" type="button" aria-label="Next page of goals created">Next</button>
1251
- </div>
1252
- </div>
1253
-
1254
- <div class="act">
1255
- <h4 class="act__h">Ideas filed, and what became of them</h4>
1256
- <p class="panel__lede">Every idea this builder captured: promoted, discarded, merged, or still open.</p>
1257
- <div class="tableWrap">
1258
- <table class="ledger ledger--tight">
1259
- <thead><tr><th scope="col">Idea</th><th scope="col">What became of it</th></tr></thead>
1260
- <tbody>
1261
- <tr><td>The hall needs one composition round, not five drifting pages</td><td class="lg__out"><span class="chip chip--ok">promoted</span><span class="lg__outsay">Became task 1003302</span></td></tr>
1262
- <tr><td>Space behind the planets, and three new materials</td><td class="lg__out"><span class="chip chip--ok">promoted</span><span class="lg__outsay">Became task 1003337</span></td></tr>
1263
- <tr><td>A second accent for the status chips</td><td class="lg__out"><span class="chip chip--warn">discarded</span><span class="lg__outsay">Discarded: the status vocabulary is fixed, and that is the point</span></td></tr>
1264
- </tbody>
1265
- </table>
1266
- </div>
1267
- <div class="pager">
1268
- <span class="hint num">Page 1</span>
1269
- <button class="btn btn--quiet" type="button" disabled aria-disabled="true" aria-label="Previous page of ideas filed">Previous</button>
1270
- <button class="btn btn--quiet" type="button" aria-label="Next page of ideas filed">Next</button>
1271
- </div>
1272
- </div>
1273
- </div>
1274
- </section>
1275
- </section>
1276
-
1277
- </main>
1278
-
1279
- <footer class="app-foot">
1280
- <span class="foot__say">Cloud Bongos, the builders' hall.</span>
1281
- <a class="link" href="/primer">Primer</a>
1282
- <a class="link" href="/ranks">Ranks</a>
1283
- <a class="link" href="/drachmae">Economy</a>
1284
- </footer>
1285
-
1286
- </div>
1287
- </div>
1288
-
1289
- <script>
1290
- /* the mock's state contract: read ?state= once and apply it. Nothing is built here, and no motion. */
1291
- (function () {
1292
- var ok = ['populated', 'loading', 'empty', 'error', 'rail', 'drawer', 'focus'];
1293
- var s = new URLSearchParams(location.search || location.hash.slice(1) || '').get('state') || 'populated';
1294
- if (ok.indexOf(s) === -1) s = 'populated';
1295
- document.body.setAttribute('data-state', s);
1296
- })();
1297
- </script>
1298
- </body>
1299
- </html>