fix(settings): Account and General speak the Preferences row grammar

[wibus-wee]

Related issue

Problem / pressure

The owner rated the desktop Settings tabs: Preferences good, About fine; Account, General and Billing very bad; Appearance and Agent Roles odd; Agents not great. Read against the code, the good tabs share one grammar: titled groups, and every line a CompactRow with one answer on the right, built from shared styles (Preferences has 6 bespoke StyleX keys). Account and General (31 keys) invent their own rows: machine rows with five controls, member rows with avatars, a ghost role menu and red trash icons, invitation tiles with two actions, and boxed record cards next to flat preference rows. Flat versus card is not the cause (Preferences is flat). #997, which polished Account's bespoke layout, is closed in favour of this.

Summary

Account and General now use the Preferences row grammar throughout; records become rows.

• Machines: name · "This machine · Online · darwin · Private · 6 Agents · 10 directories" · Manage (opens machine settings, where Agents, sharing and directories already live). The badge, Agent icon stack, Configure button, directory menu and icon button are gone.
• CLI tokens: note · "preview · source · created · last used" · Revoke. Dates follow the product language.
• Members: name · email · role as a menu (Member / Admin / Remove from workspace). Owners and uneditable members show the role as text.
• Invitations: email · role · status as a menu (Copy link / Withdraw invitation).
• Account order: Profile (email, name, avatar, connected accounts as on main), My machines, CLI Token, then Sign-in (password, Sign out) last. No group on either page is boxed. A header action that does something is text ("Create Token", "Invite members").
• Pane background regression (from feat(components): deep-sea palette and sidebar group labels #961): the settings page was drawn in the root's gray --card (rgb(239,239,241)), level with the nav, instead of the white its --card remap intends, because the product palette resolves elevatedBackground on the root. productSettingsSurfacePalette re-declares the surface tokens on the pane: the page measures white again, the nav keeps its step, and dark mode is unchanged.
• The settings AGENTS.md makes Preferences the reference page. A new note records the diagnosis table and what is still unconverted (Billing, Appearance, Agent Roles, Agents, other catalogs).

Visual explanation

flowchart LR
  subgraph Before["Account / General before"]
    P0["Profile (flat rows, email as header aside,<br/>logo row, password, Sign Out)"]
    M0["My machines (boxed)<br/>dot · name · badge · icon stack · Configure · folder menu · icon"]
    T0["CLI Token (boxed)<br/>note · badge · time · meta · ghost Revoke"]
    W0["Members (boxed)<br/>avatar · name · ghost role menu · trash"]
    I0["Invitations (boxed)<br/>mail tile · email · Copy link · ×"]
  end
  subgraph After["After: every line = CompactRow(label, helper, one answer)"]
    P1["Profile: Email · Name · Avatar · Connected accounts (unchanged logos)"]
    M1["My machines: name / state line → Manage"]
    T1["CLI Token: note / state line → Revoke"]
    S1["Sign-in: Password → Change · Sign out → Sign out"]
    W1["Members: name / email → role ▾ (incl. Remove)"]
    I1["Invitations: email / role → status ▾ (Copy / Withdraw)"]
  end
  P0 --> P1 & S1
  M0 --> M1
  T0 --> T1
  W0 --> W1
  I0 --> I1

Loading

Before / after

Captured from the new Settings/AccountSettings/DesktopPaneAccount and DesktopPaneWorkspace stories (pane scope and material), in Chinese; the before shots swap the three components back to main. The screenshots were shared in the authoring Lody conversation.

Before	After
Account: flat profile with email aside and brand logos; boxed machine rows with five differently styled controls; boxed token card; Sign Out mid-page	Account: five titled flat groups; each line a label with one answer (value, logos, Manage, Revoke, Change password, Sign out)
General: boxed members with avatars, ghost role menus and red trash icons; boxed invitations with mail tiles, Copy link and ×	General: flat members answered by a role menu that also removes; invitations answered by a status menu

Test plan

• NODE_ENV=development pnpm exec vitest run tests/account-machines-overview.test.tsx (in packages/components): 4 passed, covering the machine status line, the local-machine mark and the single Manage button.
• pnpm --filter @lody/components typecheck: passes. oxlint on the touched files: 0 findings. node scripts/check-i18n.mjs: all keys present. pnpm run docs check: 0 errors; settings AGENTS.md is 8178 bytes, under the gate.
• Storybook before and after shots, light and dark. Pane fill measured with getComputedStyle in the real Settings/DesktopSettingsModal story: rgb(239,239,241) before, rgb(255,255,255) after (light); dark rgb(25,26,29).
• Not run: the full pnpm check and the full test suite. Not verified in the packaged Electron app. Member removal and invitation withdrawal now sit inside menus; they are not covered by a new test.

Context handoff

🤖 Generated with Claude Code