@bongos/core 1.19.726 → 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 (226) hide show
  1. package/.bongos-core.json +176 -491
  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 +2 -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/gen-diagrams.js +1 -1
  64. package/scripts/gds/leak-scan-allowlist.js +293 -0
  65. package/scripts/gds/learning-capture.js +1 -1
  66. package/scripts/gds/linkify-refs.js +2 -2
  67. package/scripts/gds/local-preview-lib.js +1 -1
  68. package/scripts/gds/mirror-lineage-check.js +1 -1
  69. package/scripts/gds/mirror-redact.js +17 -2
  70. package/scripts/gds/newcomer-floor.templates.json +1 -1
  71. package/scripts/gds/package-core.js +18 -1
  72. package/scripts/gds/paste-token.js +1 -1
  73. package/scripts/gds/provision-units.js +2 -2
  74. package/scripts/gds/publish-manifest.js +15 -0
  75. package/scripts/gds/repo-metrics.js +1 -1
  76. package/scripts/gds/sandbox-stage.js +1 -1
  77. package/scripts/gds/seed-bongos-coreB-tranche1-tasks.js +1 -1
  78. package/scripts/gds/seed-bongos-coreB-tranche2-tasks.js +1 -1
  79. package/scripts/gds/seed-bongos-goal-hierarchy-tasks.js +1 -1
  80. package/scripts/gds/seed-bongos-tasks.js +2 -2
  81. package/scripts/gds/seed-gds-v4-tasks.js +1 -1
  82. package/scripts/gds/seed-medusa-tasks.js +10 -10
  83. package/scripts/gds/seed-module-upstreaming.js +1 -1
  84. package/scripts/gds/seed-productization-tasks.js +6 -6
  85. package/scripts/gds/seed-provisioning-tasks.js +2 -2
  86. package/scripts/gds/seed-staging.sh +19 -6
  87. package/scripts/gds/ship-deploy-target.js +1 -1
  88. package/scripts/gds/ship-flow.js +1 -1
  89. package/scripts/gds/smoke-gds.js +1 -1
  90. package/scripts/status-probe.mjs +2 -2
  91. package/src/bongos/auth-discord.js +2 -2
  92. package/src/bongos/live-channel.js +1 -1
  93. package/src/bongos/pool.js +1 -1
  94. package/src/bongos/routes/auth.js +11 -11
  95. package/src/bongos/routes/security.js +1 -1
  96. package/src/bongos/routes.js +1 -1
  97. package/src/branding.js +1 -1
  98. package/src/devbox-downloads.js +1 -1
  99. package/src/instance-config.js +2 -2
  100. package/src/module-api.js +1 -1
  101. package/src/module-loader/provenance.js +2 -2
  102. package/tests/art_stage.mjs +2 -2
  103. package/tests/auth_anthropic_identity.mjs +1 -1
  104. package/tests/auth_duplicate_cookie.mjs +1 -1
  105. package/tests/auth_error_brand.mjs +1 -1
  106. package/tests/auth_inactive_builder.mjs +1 -1
  107. package/tests/backup_cli.mjs +4 -4
  108. package/tests/bongos_box_connect.mjs +2 -2
  109. package/tests/bongos_downloads.mjs +2 -2
  110. package/tests/bongos_login.mjs +5 -5
  111. package/tests/box_connect_e2e.mjs +2 -2
  112. package/tests/box_dns_repoint.mjs +10 -10
  113. package/tests/box_host_keys.mjs +1 -1
  114. package/tests/box_onboard.mjs +9 -9
  115. package/tests/box_scope_session.mjs +1 -1
  116. package/tests/box_terminal_ssrf.mjs +7 -7
  117. package/tests/boxes.mjs +9 -9
  118. package/tests/branding.mjs +2 -2
  119. package/tests/bump_version.mjs +2 -2
  120. package/tests/cf_tunnel.mjs +40 -40
  121. package/tests/cli_token_reissue.mjs +7 -7
  122. package/tests/cloud_bongos_pack.mjs +1 -1
  123. package/tests/currency_label.mjs +8 -8
  124. package/tests/dev_lib.mjs +4 -4
  125. package/tests/devbox_dmg_backdrop.mjs +1 -1
  126. package/tests/devbox_downloads.mjs +2 -2
  127. package/tests/devbox_icons.mjs +1 -1
  128. package/tests/discord_approvals.mjs +1 -1
  129. package/tests/discord_oauth.mjs +2 -2
  130. package/tests/executed_closure.mjs +6 -1
  131. package/tests/first_admin_bootstrap.mjs +1 -1
  132. package/tests/gate_approvals.mjs +5 -5
  133. package/tests/grade_aggregates_unavailable.mjs +1 -1
  134. package/tests/hook_user_agents.mjs +2 -2
  135. package/tests/init.mjs +6 -6
  136. package/tests/instance_config.mjs +1 -1
  137. package/tests/instance_manifest.mjs +5 -5
  138. package/tests/instance_mismatch_guard.mjs +13 -13
  139. package/tests/leak_scan_allowlist.mjs +94 -0
  140. package/tests/migrate_root_resolution.mjs +4 -4
  141. package/tests/mirror_redact.mjs +28 -4
  142. package/tests/module_catalog.mjs +5 -5
  143. package/tests/module_submissions.mjs +3 -3
  144. package/tests/package_core.mjs +1 -1
  145. package/tests/parallel-load.mjs +6 -6
  146. package/tests/projects_hub.mjs +2 -2
  147. package/tests/provision.mjs +50 -50
  148. package/tests/provisioning_github_app_routes.mjs +1 -1
  149. package/tests/provisioning_onboard_mode.mjs +2 -2
  150. package/tests/publish_reconciler.mjs +4 -4
  151. package/tests/sandbox_stage.mjs +1 -1
  152. package/tests/scrubber_corpus.mjs +3 -3
  153. package/tests/search_isolation.mjs +1 -1
  154. package/tests/session_records.mjs +1 -1
  155. package/tests/ship_card.mjs +6 -6
  156. package/tests/ship_ci_deploy.mjs +1 -1
  157. package/tests/single_host_hall.mjs +9 -9
  158. package/tests/smoke_preflight.mjs +1 -1
  159. package/tests/smoke_target.mjs +1 -1
  160. package/tests/status-probe.mjs +1 -1
  161. package/tests/status_mirror_sync.mjs +1 -1
  162. package/docs/adr/0004-amazonprimea-name-and-trademark-acceptance.md +0 -45
  163. package/docs/design/mocks/_schemes.css +0 -604
  164. package/docs/design/mocks/component-sheet.html +0 -428
  165. package/docs/design/mocks/hall/_tokens.css +0 -370
  166. package/docs/design/mocks/hall/board/v1.html +0 -846
  167. package/docs/design/mocks/hall/board/v2.html +0 -858
  168. package/docs/design/mocks/hall/board/v3.html +0 -884
  169. package/docs/design/mocks/hall/goals/v1.html +0 -1212
  170. package/docs/design/mocks/hall/goals/v2.html +0 -1192
  171. package/docs/design/mocks/hall/goals/v3.html +0 -1205
  172. package/docs/design/mocks/hall/hall-sheet.html +0 -244
  173. package/docs/design/mocks/hall/reading/v1.html +0 -1125
  174. package/docs/design/mocks/hall/reading/v2.html +0 -1177
  175. package/docs/design/mocks/hall/reading/v3.html +0 -1150
  176. package/docs/design/mocks/hall/settings/v1.html +0 -1238
  177. package/docs/design/mocks/hall/settings/v2.html +0 -1235
  178. package/docs/design/mocks/hall/settings/v3.html +0 -1299
  179. package/docs/design/mocks/hall/task/v1.html +0 -633
  180. package/docs/design/mocks/hall/task/v2.html +0 -646
  181. package/docs/design/mocks/hall/task/v3.html +0 -647
  182. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg +0 -0
  183. package/docs/design/mocks/hub/assets/r3-space-deepfield-half.jpg.json +0 -13
  184. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg +0 -0
  185. package/docs/design/mocks/hub/assets/r3-space-dust-half.jpg.json +0 -13
  186. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg +0 -0
  187. package/docs/design/mocks/hub/assets/r3-space-nebula-half.jpg.json +0 -13
  188. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg +0 -0
  189. package/docs/design/mocks/hub/assets/r3-space-starfield-half.jpg.json +0 -13
  190. package/docs/design/mocks/hub/hub-sheet.html +0 -192
  191. package/docs/design/mocks/hub/mine.html +0 -465
  192. package/docs/design/mocks/hub/picker.html +0 -421
  193. package/docs/design/mocks/hub/planets.html +0 -356
  194. package/docs/design/mocks/hub/v1.html +0 -1209
  195. package/docs/design/mocks/hub/v2.html +0 -1257
  196. package/docs/design/mocks/hub/v3.html +0 -1496
  197. package/docs/design/mocks/hub/wizard.html +0 -421
  198. package/docs/design/mocks/landing/landing-sheet.html +0 -131
  199. package/docs/design/mocks/landing/v1.html +0 -956
  200. package/docs/design/mocks/landing/v2.html +0 -708
  201. package/docs/design/mocks/landing/v3.html +0 -911
  202. package/docs/design/mocks/landing-page-mock.html +0 -687
  203. package/docs/design/mocks/landing-palettes.html +0 -103
  204. package/docs/design/mocks/projects-hub-mock.html +0 -991
  205. package/docs/design/mocks/projects-hub-variants.html +0 -146
  206. package/docs/design/mocks/projects-page-mock.html +0 -167
  207. package/docs/design/mocks/world/blue-hud/_tokens.css +0 -246
  208. package/docs/design/mocks/world/blue-hud/hall.html +0 -595
  209. package/docs/design/mocks/world/blue-hud/landing.html +0 -424
  210. package/docs/design/mocks/world/blue-hud/status.html +0 -410
  211. package/docs/design/mocks/world/chrome-blobs/_tokens.css +0 -479
  212. package/docs/design/mocks/world/chrome-blobs/hall.html +0 -553
  213. package/docs/design/mocks/world/chrome-blobs/landing-b.html +0 -581
  214. package/docs/design/mocks/world/chrome-blobs/landing.html +0 -328
  215. package/docs/design/mocks/world/chrome-blobs/status.html +0 -416
  216. package/docs/design/mocks/world/natgeo-editorial/_tokens.css +0 -377
  217. package/docs/design/mocks/world/natgeo-editorial/hall.html +0 -649
  218. package/docs/design/mocks/world/natgeo-editorial/landing-b.html +0 -743
  219. package/docs/design/mocks/world/natgeo-editorial/landing.html +0 -475
  220. package/docs/design/mocks/world/natgeo-editorial/status.html +0 -437
  221. package/docs/design/mocks/world/organic-cards/_tokens.css +0 -462
  222. package/docs/design/mocks/world/organic-cards/hall.html +0 -625
  223. package/docs/design/mocks/world/organic-cards/landing-b.html +0 -736
  224. package/docs/design/mocks/world/organic-cards/landing.html +0 -420
  225. package/docs/design/mocks/world/organic-cards/status.html +0 -458
  226. package/docs/design/mocks/world/world-sheet.html +0 -156
package/docs/design/mocks/hall/settings/v1.html DELETED
@@ -1,1238 +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, v1 "the ledger" (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
- /* ═══════ v1 "the ledger" ═══════════════════════════════════════════════════
446
- No panels anywhere. The page is hairline rules and rows directly on --bg. A
447
- card becomes a band: one hairline on top, content, air. The sidebar is a
448
- hairline list with no fills, and the current item takes a 2px accent hairline
449
- on its left edge, the lifecycle rail's lit-step grammar. */
450
- *{box-sizing:border-box}
451
- body{
452
- --gut:26px; --gutter-narrow:20px;
453
- --sidebar-w:240px; --content-max:1120px;
454
- --rail-w:184px; --rail-pad:14px; --rail-lit-x:0px; --rail-active-bg:transparent;
455
- --sb-bg:transparent; --sb-edge:var(--rule); --sb-blur:0px; --sb-pad:22px; --sb-foot-bg:transparent;
456
- --nav-radius:0px; --nav-inset:0px; --nav-lit-x:0px; --nav-active-bg:transparent;
457
- --nav-hover:color-mix(in srgb, var(--ink) 5%, transparent);
458
- --user-bg:transparent; --user-edge:transparent; --user-radius:0px; --user-pad:0px;
459
- --bar-bg:var(--bg); --bar-edge:var(--rule); --bar-blur:0px;
460
- --ctl-bg:transparent; --ctl-edge:var(--rule); --ctl-radius:0px;
461
- --btn-bg:transparent; --btn-edge:var(--rule);
462
- --btn-bg-hi:color-mix(in srgb, var(--ink) 6%, transparent);
463
- --field-bg:transparent; --field-border:var(--line) solid var(--rule);
464
- --field-radius:0px; --field-pad:2px;
465
- --track-bg:color-mix(in srgb, var(--ink) 8%, transparent);
466
- --panel-bg:transparent; --panel-border:0; --panel-radius:0px; --panel-pad:0px;
467
- --panel-gap:34px; --grp-gap:52px;
468
- --quote-bg:color-mix(in srgb, var(--ink) 5%, var(--bg));
469
- --quote-border:0; --quote-radius:0px;
470
- --skel-bg:color-mix(in srgb, var(--ink) 6%, var(--bg)); --skel-radius:0px;
471
- --stat-bg:transparent; --stat-border:0; --stat-pad:var(--sp-sm) 0 var(--sp-md); --stat-gap:var(--sp-md);
472
- --ach-bg:transparent; --ach-border:0; --ach-pad:var(--sp-sm) 0 var(--sp-md); --ach-gap:var(--sp-md);
473
- --ident-pad:0 0 var(--sp-md);
474
- --banner-radius:0px; --drawer-bg:var(--bg);
475
- background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:15.5px;
476
- line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
477
- }
478
- /* a band, not a card: one hairline on top, content, air */
479
- .panel{border-top:var(--line) solid var(--rule-soft);padding-top:var(--sp-sm)}
480
- .grp .panel:first-of-type{border-top:0;padding-top:var(--sp-xs)}
481
- .gate{border-top:var(--line) solid var(--rule);padding-top:var(--sp-sm)}
482
- .ident{border-bottom:var(--line) solid var(--rule)}
483
- /* a bare field: one hairline under it, nothing around it */
484
- .input{border-width:0 0 var(--line);border-radius:0}
485
- .input:focus-visible{border-bottom-color:var(--focus)}
486
- /* the figure sits bare on the page ground, a rule-soft hairline under its label */
487
- .stat{border-top:var(--line) solid var(--rule)}
488
- .stat__label{padding-bottom:var(--sp-hair);border-bottom:var(--line) solid var(--rule-soft)}
489
- .ach{border-top:var(--line) solid var(--rule-soft)}
490
- /* the secret is quoted by hairlines and one tonal step, never by a box */
491
- .quote{border-top:var(--line) solid var(--rule);border-bottom:var(--line) solid var(--rule);
492
- margin-inline:calc(var(--sp-sm) * -1);padding-inline:var(--sp-sm)}
493
- .banner{background:none;padding-left:var(--sp-sm);padding-right:0}
494
- .section-rail{border-top:var(--line) solid var(--rule);padding-top:var(--sp-hair)}
495
- .rail-link--active{background:none}
496
- @media (max-width:860px){
497
- .quote{margin-inline:0}
498
- .section-rail{border-top:0;border-bottom:var(--line) solid var(--rule);padding-bottom:var(--sp-hair)}
499
- }
500
- </style>
501
- <script>
502
- (function(){try{var q=new URLSearchParams(location.search||location.hash.slice(1)||'').get('mode');
503
- var m=(q==='light'||q==='dark')?q:'dark';
504
- document.documentElement.setAttribute('data-mode',m);
505
- document.documentElement.setAttribute('data-theme',m);}catch(e){}})();
506
- </script>
507
- </head>
508
- <body class="mock" data-state="populated">
509
- <!--
510
- Settings and profile in the chrome world, v1 "the ledger" (task 1003302, goal 1000081).
511
- THESIS A settings page with no panels at all: every field, every switch and every secret is a row on the page ground, held by hairlines alone.
512
- COMPOSITION A hairline section rail at the left, each group opening on a mono label over a rule that runs the full content width, and field rows separated by rule-soft hairlines. The CLI re-issue flow is three banded moments, resting, minting and issued, so the whole interaction reads at once; below the world's hairline the profile is the same ledger, its figures bare on the ground under mono labels.
513
- LIGHT Nothing inverts and no ground is painted, so light is literally the same room on paper. This is the version the owner's light reference reads closest to at 1440.
514
- RISK A form is where undifferentiated hairline bites hardest: with no sheet to hold them, a long panel's fields, notes and status lines can read as one column of grey, and the secret in the pre has only one tonal step to separate it from prose.
515
- ?state=populated the page with real data
516
- ?state=loading skeletons in the SHAPE of the final content
517
- ?state=empty the honest signed-out view: the settings gate, and the public profile
518
- ?state=error a save failed, the status line carries it and the field keeps the entry
519
- ?state=rail the sidebar collapsed to its 64px rail
520
- ?state=drawer the mobile drawer open
521
- ?state=focus keyboard focus rings on the page's real controls
522
- -->
523
-
524
- <a class="skip" href="#main">Skip to content</a>
525
-
526
- <div class="app">
527
-
528
- <div class="app-sidebar" id="app-sidebar">
529
- <div class="app-sidebar__brand">
530
- <a class="brand-mark" href="/" id="brand-mark">
531
- <span class="brand-mark__dot"></span><span class="brand-mark__name">Cloud Bongos</span></a>
532
- </div>
533
- <nav class="app-sidebar__nav" aria-label="Primary">
534
- <div class="nav-group">
535
- <a class="nav-item" id="nav-home" href="/" data-gate="always">
536
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2 7.2 8 2.6l6 4.6V13.4H2Z"/></svg>
537
- <span class="nav-item__label">Home</span></a>
538
- <a class="nav-item" id="nav-roadmap" href="/roadmap" data-gate="always">
539
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 4h11M2.5 8h7.5M2.5 12h4.5"/></svg>
540
- <span class="nav-item__label">Roadmap</span></a>
541
- <a class="nav-item" id="nav-goals" href="/goals" data-gate="always">
542
- <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>
543
- <span class="nav-item__label">Goals</span></a>
544
- <a class="nav-item is-focus" id="nav-work" href="/work" data-gate="always">
545
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.6 3.4h10.8v9.2H2.6Zm0 3h10.8"/></svg>
546
- <span class="nav-item__label">Tasks</span></a>
547
- <a class="nav-item" id="nav-ideas" href="/ideas" data-gate="always">
548
- <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>
549
- <span class="nav-item__label">Ideas</span></a>
550
- <a class="nav-item" id="nav-copy-desk" href="/copy-desk" data-gate="always">
551
- <svg class="nav-icon" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 2.6h8v10.8H4Zm2 3h4M6 8h4M6 10.4h2.5"/></svg>
552
- <span class="nav-item__label">Copy desk</span></a>
553
- </div>
554
- <div class="nav-group nav-group--collapsible" id="navgrp-you" data-group="you">
555
- <button class="nav-group__head" type="button" data-gate="signed" data-group="you" aria-expanded="true" aria-controls="navgrp-you">
556
- <span class="nav-group__head-label">You</span>
557
- <svg class="nav-group__chevron" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4"/></svg></button>
558
- <a class="nav-item" id="nav-standing" href="/#standing" data-gate="signed">
559
- <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>
560
- <span class="nav-item__label">Standing</span></a>
561
- <a class="nav-item nav-item--active" id="nav-profile" href="/profile" data-gate="signed" aria-current="page">
562
- <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>
563
- <span class="nav-item__label">Profile</span></a>
564
- </div>
565
- <div class="nav-group nav-group--collapsible" id="navgrp-community" data-group="community">
566
- <button class="nav-group__head" type="button" data-gate="always" data-group="community" aria-expanded="true" aria-controls="navgrp-community">
567
- <span class="nav-group__head-label">Community</span>
568
- <svg class="nav-group__chevron" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4"/></svg></button>
569
- <a class="nav-item" id="nav-collab" href="/collab" data-gate="always">
570
- <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>
571
- <span class="nav-item__label">Collab</span></a>
572
- <a class="nav-item" id="nav-leaderboard" href="/#leaderboard" data-gate="always">
573
- <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>
574
- <span class="nav-item__label">Leaderboard</span></a>
575
- <a class="nav-item" id="nav-people" href="/people" data-gate="always">
576
- <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>
577
- <span class="nav-item__label">People</span></a>
578
- </div>
579
- <div class="nav-group nav-group--collapsible" id="navgrp-docs" data-group="docs">
580
- <button class="nav-group__head" type="button" data-gate="always" data-group="docs" aria-expanded="true" aria-controls="navgrp-docs">
581
- <span class="nav-group__head-label">Docs</span>
582
- <svg class="nav-group__chevron" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4"/></svg></button>
583
- <a class="nav-item" id="nav-primer" href="/primer" data-gate="always">
584
- <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>
585
- <span class="nav-item__label">Primer</span></a>
586
- <a class="nav-item" id="nav-ranks" href="/ranks" data-gate="always">
587
- <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>
588
- <span class="nav-item__label">Ranks</span></a>
589
- <a class="nav-item" id="nav-economy" href="/drachmae" data-gate="always">
590
- <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>
591
- <span class="nav-item__label">Economy</span></a>
592
- <a class="nav-item" id="nav-diagrams" href="/diagrams" data-gate="always">
593
- <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>
594
- <span class="nav-item__label">Diagrams</span></a>
595
- <a class="nav-item" id="nav-atlas" href="/atlas" data-gate="always">
596
- <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>
597
- <span class="nav-item__label">Repo Atlas</span></a>
598
- <a class="nav-item" id="nav-modules" href="/modules" data-gate="always">
599
- <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>
600
- <span class="nav-item__label">Modules</span></a>
601
- <a class="nav-item" id="nav-apidocs" href="/docs" data-gate="always">
602
- <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>
603
- <span class="nav-item__label">API docs</span></a>
604
- </div>
605
- <div class="nav-group nav-group--collapsible" id="navgrp-government" data-group="government">
606
- <button class="nav-group__head" type="button" data-gate="signed" data-group="government" aria-expanded="true" aria-controls="navgrp-government">
607
- <span class="nav-group__head-label">Government</span>
608
- <svg class="nav-group__chevron" viewBox="0 0 10 6" aria-hidden="true"><path d="M1 1l4 4 4-4"/></svg></button>
609
- <a class="nav-item" id="nav-watch" href="/watch" data-gate="signed">
610
- <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>
611
- <span class="nav-item__label">Watch</span></a>
612
- <a class="nav-item" id="nav-harbor" href="/harbor" data-gate="signed">
613
- <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>
614
- <span class="nav-item__label">Harbor</span></a>
615
- <a class="nav-item" id="nav-gate" href="/gate" data-gate="signed">
616
- <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>
617
- <span class="nav-item__label">Gate</span></a>
618
- <a class="nav-item" id="nav-sessions" href="/sessions" data-gate="signed">
619
- <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>
620
- <span class="nav-item__label">Sessions</span></a>
621
- <a class="nav-item" id="nav-government" href="/government" data-gate="signed">
622
- <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>
623
- <span class="nav-item__label">Permissions</span></a>
624
- </div>
625
- </nav>
626
- <div class="app-sidebar__foot">
627
- <a class="shell-user" id="shell-user" href="/settings" title="Settings">
628
- <span class="shell-user__avatar"></span>
629
- <span class="shell-user__meta">
630
- <span class="shell-user__name">Percy Jackson</span>
631
- <span class="shell-user__rank">Owner</span></span></a>
632
- <a class="shell-signin" href="/api/bongos/auth/web/start">Sign in</a>
633
- <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>
634
- <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>
635
- </div>
636
- </div>
637
-
638
- <div class="app-scrim" id="app-scrim"></div>
639
-
640
- <div class="app-body">
641
-
642
- <header class="app-topbar" id="app-topbar">
643
- <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>
644
- <h2 class="topbar-title">Settings</h2>
645
- <div class="topbar-side">
646
- <span class="topbar-note num s-signed">14,441 credits</span>
647
- <button class="topbar-jump" id="topbar-jump" type="button" aria-label="Jump to a page or record">
648
- <span class="topbar-jump__label">Jump to</span><kbd class="topbar-jump__kbd">Ctrl K</kbd></button>
649
- <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>
650
- <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>
651
- </div>
652
- </header>
653
-
654
- <main class="app-content" id="main" tabindex="-1">
655
-
656
- <div class="pageHead">
657
- <h1 class="pageH">settings</h1>
658
- <p class="lede">Your connections, your keys, your box, and the way the hall behaves. Below the rule: the profile everyone else reads.</p>
659
- </div>
660
-
661
- <section class="gate s-empty" aria-labelledby="gate-h">
662
- <h2 class="gate__h" id="gate-h">Not signed in</h2>
663
- <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>
664
- <a class="btn btn--save" href="/api/bongos/auth/web/start">Sign in</a>
665
- </section>
666
-
667
- <div class="settings-layout s-signed">
668
- <div class="rail-wrap">
669
- <nav class="section-rail s-real" aria-label="Settings sections">
670
- <a class="rail-link rail-link--active" href="#grp-account" data-key="account" aria-current="true">Account</a>
671
- <a class="rail-link is-focus" href="#grp-access" data-key="access">Access &amp; keys</a>
672
- <a class="rail-link" href="#grp-devbox" data-key="devbox">Dev box</a>
673
- <a class="rail-link" href="#grp-preferences" data-key="preferences">Preferences</a>
674
- <a class="rail-link" href="#grp-sound" data-key="sound">Sound</a>
675
- <a class="rail-link" href="#grp-extensions" data-key="extensions" hidden>Extensions</a>
676
- </nav>
677
- <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>
678
- <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>
679
- </div>
680
- <div class="settings-groups s-real" data-active="account">
681
- <section class="grp" id="grp-account" aria-labelledby="grp-account-h">
682
- <div class="grp__head">
683
- <h2 class="grp__h" id="grp-account-h">Account</h2>
684
- <span class="grp__eyebrow lbl">/settings#account</span>
685
- </div>
686
- <section class="panel" id="connections" aria-labelledby="connections-h">
687
- <h3 class="panel__h" id="connections-h">Connections</h3>
688
- <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>
689
- <div class="rows">
690
- <div class="row">
691
- <div class="row__main"><p class="row__label">Discord</p><p class="row__desc">Linked to jaxri on 2026-08-14.</p></div>
692
- <div class="row__ctl"><span class="chip chip--ok">Connected</span><button class="btn btn--quiet" type="button">Disconnect</button></div>
693
- </div>
694
- </div>
695
- <p class="panel__note">Linking opens Discord's consent screen; unlinking applies at once.</p>
696
- </section>
697
- <section class="panel" id="display-name" aria-labelledby="display-name-h">
698
- <h3 class="panel__h" id="display-name-h">Display name</h3>
699
- <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>
700
- <label class="fieldLbl" for="display-name-input">Display name</label>
701
- <div class="field">
702
- <input class="input is-focus" id="display-name-input" name="display-name" type="text" maxlength="60" value="Percy Jackson" autocomplete="off" spellcheck="false">
703
- <button class="btn btn--save" id="display-name-save" type="button">Save</button>
704
- </div>
705
- <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>
706
- <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>
707
- <p class="panel__note">Saves when you press Save; shows everywhere at once.</p>
708
- </section>
709
- <section class="panel" id="cross-project" aria-labelledby="cross-project-h">
710
- <h3 class="panel__h" id="cross-project-h">Cross-project record</h3>
711
- <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>
712
- <div class="rows">
713
- <div class="row">
714
- <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>
715
- <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>
716
- </div>
717
- </div>
718
- <p class="status" role="status" aria-live="polite">On since 2026-08-14.</p>
719
- </section>
720
- <section class="panel" id="privacy" aria-labelledby="privacy-h">
721
- <h3 class="panel__h" id="privacy-h">Profile privacy</h3>
722
- <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>
723
- <div class="rows">
724
- <div class="row">
725
- <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>
726
- <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>
727
- </div>
728
- <div class="row">
729
- <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>
730
- <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>
731
- </div>
732
- </div>
733
- <p class="status" role="status" aria-live="polite">Both applied. Private already answers not found everywhere your profile is read.</p>
734
- </section>
735
- <section class="panel" id="craft" aria-labelledby="craft-h">
736
- <h3 class="panel__h" id="craft-h">Preferred disciplines</h3>
737
- <p class="panel__lede">The kinds of work you prefer. Task suggestions lean toward your choices: pick one, several, or none.</p>
738
- <div class="chips">
739
- <label class="chip-ctl"><input type="checkbox" name="craft" value="engineer" checked><span>engineer</span></label>
740
- <label class="chip-ctl"><input type="checkbox" name="craft" value="artist"><span>artist</span></label>
741
- <label class="chip-ctl"><input type="checkbox" name="craft" value="ideator" checked><span>ideator</span></label>
742
- </div>
743
- <div class="rowEnd">
744
- <button class="btn btn--save" type="button">Save</button>
745
- <p class="status status--ok" role="status" aria-live="polite">Saved. Your next /builder-start reflects it.</p>
746
- </div>
747
- </section>
748
- </section>
749
- <section class="grp" id="grp-access" aria-labelledby="grp-access-h">
750
- <div class="grp__head">
751
- <h2 class="grp__h" id="grp-access-h">Access &amp; keys</h2>
752
- <span class="grp__eyebrow lbl">/settings#access</span>
753
- </div>
754
- <section class="panel" id="cli" aria-labelledby="cli-h">
755
- <h3 class="panel__h" id="cli-h">CLI access</h3>
756
- <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>
757
- <ol class="ladder">
758
- <li class="step">
759
- <p class="step__eyebrow lbl">1 &middot; resting</p>
760
- <div class="step__body">
761
- <button class="btn is-focus" id="cli-reissue-btn" type="button">Re-issue CLI token</button>
762
- <span class="hint">paste it into your terminal, bypasses Device Flow</span>
763
- </div>
764
- </li>
765
- <li class="step">
766
- <p class="step__eyebrow lbl">2 &middot; minting</p>
767
- <div class="step__body">
768
- <button class="btn" type="button" disabled aria-disabled="true">Minting</button>
769
- <span class="hint">the browser session is being exchanged for a bearer</span>
770
- </div>
771
- </li>
772
- <li class="step">
773
- <p class="step__eyebrow lbl">3 &middot; issued</p>
774
- <div class="step__body step__body--col">
775
- <p class="step__say">Fresh CLI token issued. Paste it in your terminal:</p>
776
- <div class="quote">
777
- <p class="quote__eyebrow lbl">paste command</p>
778
- <pre class="quote__pre"><span class="quote__cmd">node scripts/gds/paste-token.js</span> <span class="quote__tok num">EXAMPLETOKENnotarealcredentialEXAMPLETOKENnotarealcredential0000</span></pre>
779
- <div class="quote__foot">
780
- <button class="btn btn--quiet" type="button">Copy</button>
781
- <span class="hint num">Expires 2026-09-29, refreshes on use.</span>
782
- </div>
783
- </div>
784
- </div>
785
- </li>
786
- </ol>
787
- <p class="panel__note">Tokens refresh on use; re-issuing never signs you out anywhere else.</p>
788
- </section>
789
- <section class="panel" id="sessions" aria-labelledby="sessions-h">
790
- <h3 class="panel__h" id="sessions-h">Active sessions</h3>
791
- <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>
792
- <ul class="sessions">
793
- <li class="session">
794
- <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>
795
- <div class="row__ctl"><span class="chip chip--info">This one</span><button class="btn btn--quiet" type="button">End</button></div>
796
- </li>
797
- <li class="session">
798
- <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>
799
- <div class="row__ctl"><button class="btn btn--quiet" type="button">End</button></div>
800
- </li>
801
- <li class="session">
802
- <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>
803
- <div class="row__ctl"><button class="btn btn--quiet" type="button">End</button></div>
804
- </li>
805
- </ul>
806
- <div class="rowEnd">
807
- <button class="btn btn--quiet" type="button">Sign out everywhere</button>
808
- <span class="hint">ends every session including this one, you will be asked to sign in again</span>
809
- </div>
810
- <p class="panel__note">Ending a session takes effect immediately; the token stops working on its very next request.</p>
811
- </section>
812
- <section class="panel" id="art-key" aria-labelledby="art-key-h">
813
- <h3 class="panel__h" id="art-key-h">Image-generation key</h3>
814
- <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>
815
- <p class="banner banner--warn">Action needed. Your covered art allowance has ended, so add your own key to keep generating.</p>
816
- <div class="rows">
817
- <div class="row">
818
- <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>
819
- <div class="row__ctl"><span class="chip chip--ok">On file</span><span class="masked num">Ending 4f21</span></div>
820
- </div>
821
- </div>
822
- <div class="rowEnd">
823
- <button class="btn btn--quiet" type="button">Replace</button>
824
- <button class="btn btn--quiet" type="button">Remove</button>
825
- </div>
826
- <label class="fieldLbl" for="artkey-input">Replacement key</label>
827
- <div class="field">
828
- <input class="input" id="artkey-input" name="artkey" type="password" autocomplete="off" spellcheck="false" placeholder="Paste your Google AI Studio key">
829
- <button class="btn btn--save" type="button">Save key</button>
830
- </div>
831
- <p class="status" role="status" aria-live="polite">Stored encrypted. Only the last four digits are ever read back.</p>
832
- <p class="panel__note">Set, replace or remove. There is no read: the field above writes, it never shows.</p>
833
- </section>
834
- </section>
835
- <section class="grp" id="grp-devbox" aria-labelledby="grp-devbox-h">
836
- <div class="grp__head">
837
- <h2 class="grp__h" id="grp-devbox-h">Dev box</h2>
838
- <span class="grp__eyebrow lbl">/settings#devbox</span>
839
- </div>
840
- <section class="panel" id="box" aria-labelledby="box-h">
841
- <h3 class="panel__h" id="box-h">Your dev box</h3>
842
- <p class="panel__lede">The hosted machine your work runs on. Open it in your browser, or connect over SSH, whichever you prefer.</p>
843
- <div class="rows">
844
- <div class="row">
845
- <div class="row__main"><p class="row__label">box-jaxri</p><p class="row__desc">Running since 2026-08-29 21:02.</p></div>
846
- <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>
847
- </div>
848
- <div class="row">
849
- <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>
850
- <div class="row__ctl"><button class="btn btn--quiet" type="button">Copy</button></div>
851
- </div>
852
- </div>
853
- <p class="panel__note">Actions apply at once. Closing stops and deletes the box; you can start a fresh one anytime.</p>
854
- </section>
855
- <section class="panel" id="boxapp" aria-labelledby="boxapp-h">
856
- <h3 class="panel__h" id="boxapp-h">Dev box app</h3>
857
- <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>
858
- <div class="rowEnd">
859
- <a class="btn" href="/downloads/devbox/mac-arm64">Download for Mac</a>
860
- <a class="btn" href="/downloads/devbox/win-x64">Download for Windows</a>
861
- </div>
862
- <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>
863
- <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>
864
- </section>
865
- <section class="panel" id="pairing" aria-labelledby="pairing-h">
866
- <h3 class="panel__h" id="pairing-h">Pair Claude Desktop</h3>
867
- <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>
868
- <div class="rowEnd"><a class="btn" href="/pair">Open the pairing page</a></div>
869
- </section>
870
- </section>
871
- <section class="grp" id="grp-preferences" aria-labelledby="grp-preferences-h">
872
- <div class="grp__head">
873
- <h2 class="grp__h" id="grp-preferences-h">Preferences</h2>
874
- <span class="grp__eyebrow lbl">/settings#preferences</span>
875
- </div>
876
- <section class="panel" id="wandering" aria-labelledby="wandering-h">
877
- <h3 class="panel__h" id="wandering-h">Wandering</h3>
878
- <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>
879
- <div class="rows">
880
- <label class="row row--pick" for="w-locked">
881
- <input class="radio" type="radio" name="wandering" id="w-locked" value="locked">
882
- <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>
883
- </label>
884
- <label class="row row--pick" for="w-focused">
885
- <input class="radio" type="radio" name="wandering" id="w-focused" value="focused">
886
- <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>
887
- </label>
888
- <label class="row row--pick" for="w-balanced">
889
- <input class="radio" type="radio" name="wandering" id="w-balanced" value="balanced">
890
- <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>
891
- </label>
892
- <label class="row row--pick" for="w-exploratory">
893
- <input class="radio" type="radio" name="wandering" id="w-exploratory" value="exploratory" checked>
894
- <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>
895
- </label>
896
- </div>
897
- <p class="status" role="status" aria-live="polite">Now: Exploratory. Your rank allows up to exploratory.</p>
898
- <p class="panel__note">Saves the moment you pick; applies from your next session.</p>
899
- </section>
900
- <section class="panel" id="render" aria-labelledby="render-h">
901
- <h3 class="panel__h" id="render-h">Rendering</h3>
902
- <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>
903
- <div class="rows">
904
- <div class="row">
905
- <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>
906
- <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>
907
- </div>
908
- </div>
909
- <p class="status" role="status" aria-live="polite">On. Applies from your next session.</p>
910
- </section>
911
- </section>
912
- <section class="grp" id="grp-sound" aria-labelledby="grp-sound-h">
913
- <div class="grp__head">
914
- <h2 class="grp__h" id="grp-sound-h">Sound</h2>
915
- <span class="grp__eyebrow lbl">/settings#sound</span>
916
- </div>
917
- <section class="panel" id="voices" aria-labelledby="voices-h">
918
- <h3 class="panel__h" id="voices-h">Skill voices</h3>
919
- <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>
920
- <div class="tableWrap">
921
- <table class="grid">
922
- <thead><tr><th scope="col">Skill</th><th scope="col">Default</th><th scope="col">Your choice</th></tr></thead>
923
- <tbody>
924
- <tr>
925
- <th scope="row" class="grid__k num">/builder-ship</th>
926
- <td class="grid__v">Opus</td>
927
- <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>
928
- </tr>
929
- <tr>
930
- <th scope="row" class="grid__k num">/builder-start</th>
931
- <td class="grid__v">Haiku</td>
932
- <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>
933
- </tr>
934
- <tr>
935
- <th scope="row" class="grid__k num">/planning-session</th>
936
- <td class="grid__v">Opus</td>
937
- <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>
938
- </tr>
939
- </tbody>
940
- </table>
941
- </div>
942
- <p class="status status--ok" role="status" aria-live="polite">Saved. Default clears your override and falls back to the system choice.</p>
943
- <p class="panel__note">Changes save the moment you pick.</p>
944
- </section>
945
- <section class="panel" id="sounds" aria-labelledby="sounds-h">
946
- <h3 class="panel__h" id="sounds-h">Sounds</h3>
947
- <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>
948
- <div class="volume">
949
- <label class="fieldLbl" for="sound-volume">Volume</label>
950
- <input class="range" type="range" id="sound-volume" name="sound-volume" min="0" max="100" step="5" value="100">
951
- <span class="hint num">100%</span>
952
- </div>
953
- <div class="rows">
954
- <div class="row">
955
- <div class="row__main"><p class="row__label">Claude is waiting for you</p><p class="row__desc">chime.wav</p></div>
956
- <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>
957
- </div>
958
- <div class="row">
959
- <div class="row__main"><p class="row__label">A task ships</p><p class="row__desc">ship.wav</p></div>
960
- <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>
961
- </div>
962
- <div class="row">
963
- <div class="row__main"><p class="row__label">Your rank rises</p><p class="row__desc">fanfare.wav</p></div>
964
- <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>
965
- </div>
966
- </div>
967
- <p class="panel__note">Changes save at once and take effect the next time you start a session on this machine.</p>
968
- </section>
969
- <section class="panel" id="event-sounds" aria-labelledby="event-sounds-h">
970
- <h3 class="panel__h" id="event-sounds-h">Event sounds</h3>
971
- <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>
972
- <div class="rows">
973
- <div class="row">
974
- <div class="row__main"><p class="row__label">Task shipped</p><p class="row__desc num">ship.wav</p></div>
975
- <div class="row__ctl">
976
- <label class="srOnly" for="ev-ship">Sound for Task shipped</label>
977
- <select class="sel" id="ev-ship" name="ev-ship"><option selected>Ship (default)</option><option>Fanfare</option><option>Triumph</option></select>
978
- <button class="btn btn--quiet" type="button" aria-label="Preview Task shipped sound">Play</button>
979
- </div>
980
- </div>
981
- <div class="row">
982
- <div class="row__main"><p class="row__label">Credits arrive</p><p class="row__desc num">triumph.wav</p></div>
983
- <div class="row__ctl">
984
- <label class="srOnly" for="ev-credit">Sound for Credits arrive</label>
985
- <select class="sel" id="ev-credit" name="ev-credit"><option>Chime (default)</option><option selected>Triumph</option><option>Alert</option></select>
986
- <button class="btn btn--quiet" type="button" aria-label="Preview Credits arrive sound">Play</button>
987
- </div>
988
- </div>
989
- </div>
990
- <p class="panel__note">Changes save at once. Your new choice plays the next time that event fires.</p>
991
- </section>
992
- </section>
993
- <div class="grp" id="grp-extensions" data-group="extensions" hidden>
994
- <div class="grp__head"><h2 class="grp__h">Extensions</h2><span class="grp__eyebrow lbl">extensions</span></div>
995
- </div>
996
- </div>
997
- <div class="skelPanels s-load" aria-hidden="true">
998
- <span class="skel skel--h"></span>
999
- <span class="skel skel--row"></span><span class="skel skel--row"></span>
1000
- <span class="skel skel--row"></span><span class="skel skel--row"></span>
1001
- <span class="skel skel--h"></span>
1002
- <span class="skel skel--row"></span><span class="skel skel--row"></span>
1003
- </div>
1004
- </div>
1005
-
1006
- <section class="profile" aria-labelledby="prof-h">
1007
- <div class="split">
1008
- <span class="split__eyebrow lbl">the page everyone else reads</span>
1009
- </div>
1010
- <h2 class="prof-h" id="prof-h">Profile</h2>
1011
-
1012
- <div class="ident s-real">
1013
- <span class="ident__avatar" aria-hidden="true"></span>
1014
- <div class="ident__meta">
1015
- <p class="ident__name">Percy Jackson</p>
1016
- <p class="ident__sub"><span class="lbl ident__rank">Owner</span><span class="ident__login num">jaxri</span></p>
1017
- </div>
1018
- <a class="btn btn--quiet s-signed" href="#grp-account">Edit your details</a>
1019
- </div>
1020
- <div class="skelIdent s-load" aria-hidden="true"><span class="skel skel--disc"></span><span class="skel skel--h"></span></div>
1021
-
1022
- <section class="panel" id="numbers" aria-labelledby="numbers-h">
1023
- <h3 class="panel__h" id="numbers-h">By the numbers</h3>
1024
- <div class="stat-row s-real">
1025
- <div class="stat">
1026
- <span class="stat__label lbl">Credits</span>
1027
- <span class="stat__num num">14,441</span>
1028
- <span class="stat__sub">earned on shipped work</span>
1029
- </div>
1030
- <div class="stat">
1031
- <span class="stat__label lbl">Rank</span>
1032
- <span class="stat__num">Owner</span>
1033
- <span class="stat__sub">archon, the top of the ladder</span>
1034
- </div>
1035
- <div class="stat">
1036
- <span class="stat__label lbl">Achievements</span>
1037
- <span class="stat__num num">6</span>
1038
- <span class="stat__sub">of 8 on the shelf</span>
1039
- </div>
1040
- </div>
1041
- <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>
1042
- </section>
1043
-
1044
- <section class="panel" id="achievements" aria-labelledby="ach-h">
1045
- <h3 class="panel__h" id="ach-h">Achievements</h3>
1046
- <div class="ach-grid s-real">
1047
- <div class="ach">
1048
- <p class="ach__id lbl">first-ship</p>
1049
- <p class="ach__name">First Ship</p>
1050
- <p class="ach__desc">Ship your first task.</p>
1051
- <p class="ach__meta">Won 2026-02-19</p>
1052
- </div>
1053
- <div class="ach">
1054
- <p class="ach__id lbl">first-claim</p>
1055
- <p class="ach__name">First Claim</p>
1056
- <p class="ach__desc">Claim your first task.</p>
1057
- <p class="ach__meta">Won 2026-02-19</p>
1058
- </div>
1059
- <div class="ach">
1060
- <p class="ach__id lbl">first-parallel-claim</p>
1061
- <p class="ach__name">First Parallel Claim</p>
1062
- <p class="ach__desc">Hold two simultaneous claims, and ship both.</p>
1063
- <p class="ach__meta">Won 2026-03-04</p>
1064
- </div>
1065
- <div class="ach">
1066
- <p class="ach__id lbl">streak-3</p>
1067
- <p class="ach__name">Streak: 3 Nights</p>
1068
- <p class="ach__desc">Ship a task on 3 consecutive nights.</p>
1069
- <p class="ach__meta">Won 2026-03-11</p>
1070
- </div>
1071
- <div class="ach ach--locked">
1072
- <p class="ach__id lbl">streak-7</p>
1073
- <p class="ach__name">Streak: 7 Nights</p>
1074
- <p class="ach__desc">Ship a task on 7 consecutive nights.</p>
1075
- <p class="ach__meta ach__meta--off">Not yet earned</p>
1076
- </div>
1077
- <div class="ach">
1078
- <p class="ach__id lbl">art-pipeline-shipper</p>
1079
- <p class="ach__name">Art Pipeline Shipper</p>
1080
- <p class="ach__desc">Ship a task that touches the art pipeline.</p>
1081
- <p class="ach__meta">Won 2026-06-02</p>
1082
- </div>
1083
- <div class="ach ach--locked">
1084
- <p class="ach__id lbl">subtractor</p>
1085
- <p class="ach__name">Subtractor</p>
1086
- <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>
1087
- <p class="ach__meta ach__meta--off">Not yet earned</p>
1088
- </div>
1089
- <div class="ach">
1090
- <p class="ach__id lbl">breaking-the-100c-bar</p>
1091
- <p class="ach__name">Breaking the 100c Bar</p>
1092
- <p class="ach__desc">Cross 100 total credits.</p>
1093
- <p class="ach__meta">Won 2026-03-01</p>
1094
- </div>
1095
- </div>
1096
- <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>
1097
- </section>
1098
-
1099
- <section class="panel" id="works" aria-labelledby="works-h">
1100
- <h3 class="panel__h" id="works-h">Recent works</h3>
1101
- <p class="panel__lede">The most recent works this builder has shipped.</p>
1102
- <div class="tableWrap s-real">
1103
- <table class="ledger">
1104
- <thead>
1105
- <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>
1106
- </thead>
1107
- <tbody>
1108
- <tr>
1109
- <td class="lg__num num">1003322</td>
1110
- <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>
1111
- <td class="lg__rew num">60</td>
1112
- <td class="lg__date num">2026-08-30</td>
1113
- </tr>
1114
- <tr>
1115
- <td class="lg__num num">1003352</td>
1116
- <td class="lg__work">Project settings: the card's backdrop, a platform-drawn plate set the owner picks for the poster</td>
1117
- <td class="lg__rew num">45</td>
1118
- <td class="lg__date num">2026-08-29</td>
1119
- </tr>
1120
- <tr>
1121
- <td class="lg__num num">1003297</td>
1122
- <td class="lg__work">Landing composition round: three versions of the approved world</td>
1123
- <td class="lg__rew num">80</td>
1124
- <td class="lg__date num">2026-08-27</td>
1125
- </tr>
1126
- <tr>
1127
- <td class="lg__num num">1003296</td>
1128
- <td class="lg__work">World round: PRODUCT.md and four style candidates across landing, hall and status</td>
1129
- <td class="lg__rew num">80</td>
1130
- <td class="lg__date num">2026-08-27</td>
1131
- </tr>
1132
- </tbody>
1133
- </table>
1134
- </div>
1135
- <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>
1136
- </section>
1137
-
1138
- <section class="panel" id="activity" aria-labelledby="activity-h">
1139
- <h3 class="panel__h" id="activity-h">Activity, by craft</h3>
1140
- <p class="panel__lede">What this builder has done, seen one craft at a time.</p>
1141
-
1142
- <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>
1143
-
1144
- <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>
1145
-
1146
- <div class="s-signed s-real">
1147
- <div class="tabs" role="group" aria-label="Craft">
1148
- <button class="tab tab--active" type="button" aria-pressed="true" data-craft="all">All</button>
1149
- <button class="tab" type="button" aria-pressed="false" data-craft="engineer">Engineer</button>
1150
- <button class="tab" type="button" aria-pressed="false" data-craft="artist">Artist</button>
1151
- <button class="tab" type="button" aria-pressed="false" data-craft="ideator">Ideator</button>
1152
- <button class="tab" type="button" aria-pressed="false" data-craft="ui">UI</button>
1153
- </div>
1154
-
1155
- <div class="act">
1156
- <h4 class="act__h">Works completed</h4>
1157
- <div class="tableWrap">
1158
- <table class="ledger ledger--tight">
1159
- <thead><tr><th scope="col" class="lg__num">#</th><th scope="col">Work</th><th scope="col" class="lg__date">Completed</th></tr></thead>
1160
- <tbody>
1161
- <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>
1162
- <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>
1163
- <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>
1164
- </tbody>
1165
- </table>
1166
- </div>
1167
- <div class="pager">
1168
- <span class="hint num">Page 1</span>
1169
- <button class="btn btn--quiet" type="button" disabled aria-disabled="true" aria-label="Previous page of works completed">Previous</button>
1170
- <button class="btn btn--quiet" type="button" aria-label="Next page of works completed">Next</button>
1171
- </div>
1172
- </div>
1173
-
1174
- <div class="act">
1175
- <h4 class="act__h">Goals created</h4>
1176
- <div class="tableWrap">
1177
- <table class="ledger ledger--tight">
1178
- <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>
1179
- <tbody>
1180
- <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>
1181
- <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>
1182
- <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>
1183
- </tbody>
1184
- </table>
1185
- </div>
1186
- <div class="pager">
1187
- <span class="hint num">Page 1</span>
1188
- <button class="btn btn--quiet" type="button" disabled aria-disabled="true" aria-label="Previous page of goals created">Previous</button>
1189
- <button class="btn btn--quiet" type="button" aria-label="Next page of goals created">Next</button>
1190
- </div>
1191
- </div>
1192
-
1193
- <div class="act">
1194
- <h4 class="act__h">Ideas filed, and what became of them</h4>
1195
- <p class="panel__lede">Every idea this builder captured: promoted, discarded, merged, or still open.</p>
1196
- <div class="tableWrap">
1197
- <table class="ledger ledger--tight">
1198
- <thead><tr><th scope="col">Idea</th><th scope="col">What became of it</th></tr></thead>
1199
- <tbody>
1200
- <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>
1201
- <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>
1202
- <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>
1203
- </tbody>
1204
- </table>
1205
- </div>
1206
- <div class="pager">
1207
- <span class="hint num">Page 1</span>
1208
- <button class="btn btn--quiet" type="button" disabled aria-disabled="true" aria-label="Previous page of ideas filed">Previous</button>
1209
- <button class="btn btn--quiet" type="button" aria-label="Next page of ideas filed">Next</button>
1210
- </div>
1211
- </div>
1212
- </div>
1213
- </section>
1214
- </section>
1215
-
1216
- </main>
1217
-
1218
- <footer class="app-foot">
1219
- <span class="foot__say">Cloud Bongos, the builders' hall.</span>
1220
- <a class="link" href="/primer">Primer</a>
1221
- <a class="link" href="/ranks">Ranks</a>
1222
- <a class="link" href="/drachmae">Economy</a>
1223
- </footer>
1224
-
1225
- </div>
1226
- </div>
1227
-
1228
- <script>
1229
- /* the mock's state contract: read ?state= once and apply it. Nothing is built here, and no motion. */
1230
- (function () {
1231
- var ok = ['populated', 'loading', 'empty', 'error', 'rail', 'drawer', 'focus'];
1232
- var s = new URLSearchParams(location.search || location.hash.slice(1) || '').get('state') || 'populated';
1233
- if (ok.indexOf(s) === -1) s = 'populated';
1234
- document.body.setAttribute('data-state', s);
1235
- })();
1236
- </script>
1237
- </body>
1238
- </html>