ASB · Settings and Dashboard redesign · round 2, for Brian's approval
Every screen has one job, every list has a detail, and every control has one home
Round 2 answers Brian's six points on round 1, plus the ten changes the adversarial review asked for. No code has changed. This file is the explainer and the clickable mockup in one. Branch design/settings-redesign, src/ read-only.
1 Brian's six points, and where each is answered
Each row names the change, the section that explains it, and a button that puts the mockup on the screen that shows it.
| # | Brian said | What round 2 does | Answered in |
|---|---|---|---|
| 1 | About must have a link to read the changelog. | About gets a What's new card built from origin/feat/about-changelog (the running version open, older ones folded), and a Read the full changelog link that opens the bundled CHANGELOG.md in the viewer. The update notice links there too. | |
| 2 | Dashboard, Tree must be two panes like Windows Explorer. | Tree on the left, the selected project on the right. Expanding and selecting are two gestures. Full keyboard navigation, a resizable divider, and a pinned row when the selection is filtered out. Tested at Brian's scale: 166 projects, 7 levels. | |
| 3 | Dashboard tabs have no detail pages; Usage is completely empty. | Every tab is a list plus one shared detail component, Today included (as a sheet). Usage gets Spend over time, tokens by type, by model, by routine and by command, a budget, and Hours, each with a drill-down. The empty Usage tab had a real cause, named below. | |
| 4 | Organise Dashboard (and System) and Settings by what the user wants to achieve. | Nine goals, one home each. Settings nav grouped by goal: Get set up, Let the AI do my work, Keep my data safe, This app. Settings holds the control; System holds the status. Meetings get one home. Follow-ups fold into Work. | |
| 5 | Where does the Output menu go? | A chat-level side panel, opened from the Outputs button in the chat header or Ctrl+Shift+O. Today, Recent outputs reads the same index. Not a Dashboard tab, not a Settings pane. | |
| 6 | The mockup must carry the artifact-comments adapter. | window.ArtifactComments with state, restore, isCurrent, search, label and pause, over the app's area, tab, pane, selection, segment and data set. The publisher adds the comments script; this file carries none. |
2 Why Usage looked completely empty
One unguarded field blanks the whole Dashboard
The toast in the screenshot reads Cannot read properties of undefined (reading 'sessions7d'). renderUsage() (main.js 22950) and the Today momentum card (main.js 21624) read summary.sessionStats.sessions7d with no guard. When the field is missing, the read throws, and every tab renders nothing.
The same capture shows "vundefined is available" (main.js 1777). Both come from the screenshot stub, which returned an incomplete summary. So the Today, Usage and update-banner screenshots are invalid as evidence and are marked that way in the Before toggle.
Fix, as an acceptance test on PR 6: each card renders inside its own guard. A throw in one card blanks that card only, with an inline "Couldn't load" and Retry. Then before/ is re-shot against a complete stub or the real app.
2b What changed since round 1, and what the review changed in PROPOSAL_v2
| Kept from round 1 | |
|---|---|
Page anatomy, the chip vocabulary, theme-safe colour roles, the connect dialog stepper, Connected tools rows and tiles, the copy rules, the fixed modal. Ids never change: every move is a DOM move, so the jsdom suites and tools/app_source.mjs keep resolving. | |
| Reversed from round 1 | |
| "Tabs stay as they are": the tabs stay, the panels change shape. "GitHub sync and Chat backup stay on System as action cards": they stay as status rows with Run now; their set-up moves to Settings, Files and backup. The read-only Chat history row in Files becomes the control. |
| # | Review finding, and the fix in this mockup |
|---|---|
| 1 | No ledger write commands exist (only ledger_find, ledger_list). Every Work and Inbox action seeds the chat; the assistant writes behind its gates. A chase is stamped only once sent. |
| 2 | Follow-ups has a drawer, Draft the chases, Show closed too and #fuScope. Work carries all four and reuses the drawer. |
| 3 | Usage emptiness diagnosed (section 2); render isolation is a PR 6 test; before/ re-shoot required. |
| 4 | No "$84 this month" chip; Today shows no cost. Cost labelled API-equivalent. Budget only with a per-token provider, by calendar month. |
| 5 | Meetings get one home. Settings nav grouped by goal. A goal-to-surface check per goal (section 3). |
| 6 | First-week data set: a "Get your first result" card, empty states that say how they fill, plain labels, optional setup out of the badge. |
| 7 | Outputs index covers script writes and published links, persistent and incremental, scoped to the active workspace. PR 11 risk is High. Default scope is decision 3. |
| 8 | Today opens a detail sheet. Counts derive from lists. Real tree kinds. A heavy data set at Brian's scale. |
| 9 | "Read the full changelog" link. The branch already folds older releases and does not touch setup_tools.css; it is 18 commits behind and rewrites CHANGELOG.md, so it is rebased first. Sixteen PRs, numbered 0 to 15. |
| 10 | Adapter compares every saved field; tree state stores one node, not a list; search restores the start; no hand-written script tag. |
3 Information architecture from user goals
A control lives where its goal starts, not where its code shipped. Solid line: the one home. Dashed line: an allowed entry point that opens the home.
Goal to surface, checked one goal at a time
Settings holds the control, System holds the status
| Thing | Settings (control) | Dashboard, System (status) |
|---|---|---|
| Folder backup | Files and backup: schedule, Back up now | Row with last run, next run, Run now |
| Chat history backup | Files and backup: switch, repo, Restore from backup and Undo last restore (session_backup_pull, session_backup_undo, which had no home) | Row with last run, full error, Run now; Set up deep-links to Settings |
| GitHub sync | Files and backup: repo, branch | Row with last sync, Run now, and conflict dismissal (sync_dismiss_conflict, which had no home) |
| Account | Account: sign in, membership | Row: registered, WhatsApp verified, Re-verify |
| AI providers | Models: providers, default, monthly ceiling (per-token providers only) | Row: each provider, key, last good call |
| Setup checklist | The first-run subset of System health, same checks, required items only in the badge | Every check, always |
4 Where every existing control goes
Ids do not change; every move is a DOM move. Filter by an id, a pane or a word.
| Today (pane, control, id) | Tomorrow | Note |
|---|
5 Where Outputs goes
Mocked on 26 Sep (docs/mockups/outputs_panel_mockup.html) and never built. Round 2 places it and specifies the index it needs.
A chat-level side panel, from the Outputs button right of the chat name and Ctrl+Shift+O. It stays open while the agent works and shows NEW as files land. It is the existing viewer with a list in front, so one panel has two modes. Dashboard, Today, Recent outputs reads the same index; its See all opens the panel on All chats. Not a Dashboard tab: that loses the chat context and the stay-open behaviour.
A persistent, incremental index per workspace, not a scan on every open (
token_usage already truncates at 4000 files). Fed by Write, Edit and NotebookEdit events, plus a workspace mtime diff per turn for files a Bash script wrote (make-pdf, exports), plus the URL a publish step returns (Drive, merit-artifacts.pages.dev), plus the tool names non-Claude runtimes use. "All chats" means the active workspace, which can differ from a session's own (workspace_root_for).Default scope is a decision (decision 3): the 26 Sep mockup defaulted to All chats; round 2 recommends This chat from the chat header, because "what did this chat write" is the common question.
6The clickable mockup
One app window. Pick a scene, or just click around. Data switches between a typical week, a first-week member and Brian's real scale. Billing switches how the AI is paid for. Cards shows each Dashboard card loading or failing on its own. Before shows the screenshot of the same screen today.
7 The comments adapter
A pin made on Dashboard, Work, WAIT-0118 must land there for the next reviewer, not on whatever is on screen. This file defines window.ArtifactComments per .agent/skills/artifact-comments/docs/adapter.md.
asb-settings-redesign-v2. The publisher injects the comments script with that slug and skips injection when a tag is already present, so this file carries no script tag: a hand-written slug that differs from the published one would split the threads. Fixture ids (WAIT-0118, logamjaya-contract, apple, 2026-10-03, claude-sonnet-5, daily-update) stay fixed across revisions, so a pin survives a restyle.8 Rollout: sixteen PRs, numbered 0 to 15
| # | PR | Risk | Done when |
|---|---|---|---|
| 0 | Rebase, then merge feat/about-changelog. 18 commits behind the design branch; rewrites CHANGELOG.md (379 lines changed). It already folds older releases and does not touch setup_tools.css. | Low | about_pane_test.mjs green after the rebase |
| 1 | Tokens, buttons, chips, Routines placeholder (round 1) | Low | Round 1 |
| 2 | Fixed modal, nav grouped by goal, "Phone access" label | Low | Four goal headings render; reopen-on-last-pane test green |
| 3 | Pane anatomy, About cards (Updates, What's new card plus "Read the full changelog", Help, Diagnostics) | Low-medium | The link opens CHANGELOG.md in the viewer |
| 4 | Copy pass, plain labels (Decisions to make, Overdue reply, project) | Low | No "breached", "SLA" or "node" in user-facing copy |
| 5 | Move controls: backup, chat history (with restore and undo), GitHub sync into Files and backup; Spending card | Medium | Every id in section 4 resolves |
| 6 | Dashboard shell: dash-detail, per-card guard, loading, empty and error; retire #dashLoading and the toast; re-shoot before/ | Medium | Fault injection: a throw in one card blanks that card only |
| 7 | Tree two panes, keyboard, resizer; ledger_list gains node; work_tree_node_files | Medium | Keyboard table passes; usable at 166 nodes, 7 levels |
| 8 | Work and Inbox details via ledger_find and the ledger_link.js drawer; actions seed the chat; Meetings view gains Review; Dashboard Meetings tab retires | Medium | No app-side ledger write exists; a chase is stamped only after it is sent |
| 9 | Usage: Spend, Hours, Budget, by model, by routine and command, drill-downs | Medium | Unpriced models never show $0.00; budget is a calendar month |
| 10 | System details, nudges, notices, Dashboard badge | Medium | Badge equals Needs you rows; optional setup excluded |
| 11 | Outputs panel and the persistent index | High | Script writes and published links appear; Today and the panel agree |
| 12 | Connected tools layout (round 1 PR 7) | Medium-high | Round 1 |
| 13 | WhatsApp sheet and custom MCP sheet (round 1 PR 8) | Medium-high | Round 1 |
| 14 | Connect dialog stepper, agents merge (round 1 PR 9) | High | Round 1 |
| 15 | Follow-ups redirect (decision 1) | Low | The tab lands on Work with the drawer, Draft the chases, Show closed too and the scope line |
Backend additions, listed once: ledger_list accepts node (the only ledger change; no write commands); work_tree_node_files(id); a persistent outputs index; routine_usage() and routine_runs(jobId); token_usage_day(day) and a calendar-month window; a monthlyCeilingUsd setting; walk_listing returns its error instead of [].
9 Decisions for Brian
Four calls. The recommended option is first in each, and the mockup is built on it.
1. Fold the Follow-ups view into Dashboard, Work?
Follow-ups reads the same three ledgers as Work. It has a row drawer (ledger_link.js), a Draft the chases button, a Show closed too toggle and a line naming the workspace that answered. Work in this mockup carries all four and reuses the same drawer.
2. Where do meetings live?
Round 1 split capture (Meetings view) from review (Dashboard, Meetings). The review called that the "scattered" you named.
3. Which scope does Outputs open on?
The 26 Sep mockup opened on All chats. Round 2 opens on This chat from the chat header.
4. Where does cost show?
PROPOSAL_v2 added a "$84 this month" chip and kept a cost on Today. That made six read-outs, and the chip said "this month" over a rolling 30 days.