Give form and confirm dialogs one design-system layout

[DoodleBears]

Why the change

Before: about 30 form and confirm dialogs each chose their own label size, gaps, footer order, widths and danger style; some saved through a native form, some had no Cancel, and done-only states showed two buttons that both closed.

After: every form dialog uses one Field layout (label above, hint or error below, full-width control), ends with Cancel then one primary action, submits on Enter, and destructive confirms use a red primary. Dialogs that only report a result show a single button. Group management in Channel settings is two settings rows and the group name saves on Enter or blur.

Refs #1589
Closes #1600

Special things to note

• Merge risk: presentational. Bridge calls, validation and persisted data are unchanged. Review focus is ds/form-dialog.tsx (form wrapper, onClose vs onCancel, showCancel, optional onSubmit) and the behaviour notes below. Revertable as one squash commit.
• Behaviour changes that come with the layout:
  • Enter now submits every form dialog (create Bot, schedule editor included).
  • Source policy edit gains a Cancel button; History purge preview: X closes the dialog, Cancel returns to the source list.
  • Group name saves on Enter or blur; a blank name restores the current one.
• New design-system pieces: Field, TextField (monospace option), TextAreaField, FormDialog (small 440 / standard 560 / wide 1060, scrollable body), ConfirmDialog, DangerTextButton, Callout, Note warning tone, warning/danger surface tokens mapped to DSH state-warn-* / state-error-* (bot-zip previously referenced state-warning-*, which DSH does not define).
• The token guard now scans only stylex.create blocks, so data colours (primary-colour presets) can stay literal.
• 240 legacy CSS rules that nothing renders any more were removed (~700 lines), including 32 that were already dead on main.
• Out of scope, moved to Design system 3: workspace modals (IM pairing, permission groups, Marketplace, backups, history) #1601: the model editor, folder browser and avatar editor (self-saving workspace dialogs), plus IM pairing, permission groups, Marketplace and backups.
• Main CI is currently red from an ADR 0194 collision between Adopt a StyleX design system for Bot settings #1596 and Let a Bot start an MCP server with Owner secrets, one approved start at a time #1597; Remember approved secret MCP servers and list them in settings #1607 fixes it on main. This PR keeps the design-system ADR at 0194.
• Verification:
  • vitest client: 1503 passed; client-observer.test.ts fails with the pre-existing node:sqlite bundling error (also on main). Browser + computer: 599 passed.
  • Typecheck, lint, source policy, format and changelog checks pass.
  • Visual: before (main) / after on a local DSH dev instance in zh/en, light/dark, below.
  • e2e scripts whose selectors changed were updated but not run: e2e-channel-purge*.mjs, e2e-group-management.mjs, e2e-client-interactions.mjs, e2e-human-channel-names.mjs.
  • Not run: Human QA in the desktop app.

Change outline

• packages/client/src/client/ds/: field.tsx, form-dialog.tsx, callout.tsx; tokens and Note extended.
• Migrated dialogs: section/channel create, rename and delete; group management and disband; edit profile, banner, primary colour, nickname, invite member, member wake policy, source policy, standing limits; IM app bind/create/unbind, external identities, connectors, ingest, thread reception; create Bot, zip import/export, Bot deletion, schedules, history purge, avatar crops, diagnostics.
• Tests rewritten to drive dialogs by role and name through shared dialogPrimitives() helpers; new tests for group management, invite, nickname, ingest and diagnostics.
• changes/1600-design-system-dialogs.md.

Dialog	Before / After
Create Bot	create-bot
Create channel	create-channel
Create section	create-section
My nickname	nickname
Delete Bot	delete-bot
Ended Channel history	history

Agent task: claude-code/cloud/session_0152zfVCAc6MNB8R8xVq9b76

🤖 Generated with Claude Code

https://claude.ai/code/session_0152zfVCAc6MNB8R8xVq9b76

---

Generated by Claude Code

[coderabbitai]

Note

Currently processing new changes in this PR. This may take a few minutes, please wait...

⚙️ Run configuration

• Configuration used: defaults
• Review profile: CHILL
• Plan: Advanced
• Run ID: 26938eec-edf1-42b1-a549-c2a88d6a2d1b

📥 Commits

Reviewing files that changed from the base of the PR and between 76d262a and b3ed226.

⛔ Files ignored due to path filters: 6

• .github/pr-screenshots/design-system-dialogs/create-bot.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-dialogs/create-channel.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-dialogs/create-section.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-dialogs/delete-bot.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-dialogs/history.png is excluded by !**/*.png
• .github/pr-screenshots/design-system-dialogs/nickname.png is excluded by !**/*.png

📒 Files selected for processing: 59

• changes/1600-design-system-dialogs.md
• packages/client/src/client/bot-zip.tsx
• packages/client/src/client/channel-bridge-list.tsx
• packages/client/src/client/channel-history.tsx
• packages/client/src/client/channel-sidebar-builtins.tsx
• packages/client/src/client/conversation-ingest-list.tsx
• packages/client/src/client/create-app-form.tsx
• packages/client/src/client/diagnostic-bundle.tsx
• packages/client/src/client/ds/callout.tsx
• packages/client/src/client/ds/field.tsx
• packages/client/src/client/ds/form-dialog.tsx
• packages/client/src/client/ds/note.tsx
• packages/client/src/client/ds/tokens.stylex.ts
• packages/client/src/client/external-identity-list.tsx
• packages/client/src/client/group-avatar-crop.tsx
• packages/client/src/client/group-management-settings.tsx
• packages/client/src/client/group-member-controls.tsx
• packages/client/src/client/human-channel-name.tsx
• packages/client/src/client/im-apps-section.tsx
• packages/client/src/client/locale.ts
• packages/client/src/client/persona-bot-create.tsx
• packages/client/src/client/personabot-avatar-crop.tsx
• packages/client/src/client/personabot-deletion.tsx
• packages/client/src/client/primary-color-editor.tsx
• packages/client/src/client/profile-header.tsx
• packages/client/src/client/schedules-entry.tsx
• packages/client/src/client/section-management.tsx
• packages/client/src/client/standing-limits.tsx
• packages/client/src/client/styles.ts
• packages/client/src/client/thread-reception-settings.tsx
• packages/client/src/client/wake-policy-entry.tsx
• packages/client/test/bot-schedules-entry.test.ts
• packages/client/test/bot-zip-ui.test.ts
• packages/client/test/channel-bridge-list.test.ts
• packages/client/test/channel-history.test.ts
• packages/client/test/client-read-lifecycle.test.ts
• packages/client/test/conversation-ingest-list.test.ts
• packages/client/test/design-system-tokens.test.ts
• packages/client/test/diagnostic-bundle.test.ts
• packages/client/test/external-identity-list.test.ts
• packages/client/test/group-management-settings.test.ts
• packages/client/test/group-member-invite.test.ts
• packages/client/test/human-nickname-dialog.test.ts
• packages/client/test/im-apps-actions.test.ts
• packages/client/test/member-wake-restore.test.ts
• packages/client/test/messaging-grant.test.ts
• packages/client/test/persona-bot-create.test.ts
• packages/client/test/personabot-deletion.test.ts
• packages/client/test/personabot-profile.test.ts
• packages/client/test/primitive-mocks.ts
• packages/client/test/profile-banner.test.ts
• packages/client/test/profile-primary-color.test.ts
• packages/client/test/section-management.test.ts
• packages/client/test/standing-memory.test.ts
• scripts/e2e-channel-purge-completion.mjs
• scripts/e2e-channel-purge.mjs
• scripts/e2e-client-interactions.mjs
• scripts/e2e-group-management.mjs
• scripts/e2e-human-channel-names.mjs

 _________________________________________________
< Code Wars Episode II: Attack of the Git Clones. >
 -------------------------------------------------
  \
   \   \
        \ /\
        ( )
      .( o ).

✨ Finishing Touches

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[DoodleBears]

The lint, format, typecheck, test, build, docs check fails at check-adr-numbers. The cause is that main has two ADRs numbered 0194 (0194-deepseekbot-design-system-is-stylex-tokens-over-dsh.md from #1596 and 0194-a-bot-starts-an-mcp-server-with-owner-secrets-per-approved-start.md from #1597). This PR doesn't touch either file, and the check fails on main in the same way.

#1607 fixes this on main by renumbering the MCP record to 0195. I'm not porting that rename here, because it belongs to #1607's ADR series. Once #1607 lands I'll merge main into this branch. The rest of the job passes locally: typecheck, lint (other than the ADR check), format, client tests, and browser/computer tests.

---

Generated by Claude Code