feat(ui): overhaul settings and slash command UX#67819
Conversation
Greptile SummaryThis PR adds Quick Settings as the default settings experience (card layout replacing the raw schema form), reorganizes Advanced Settings into accordion groups, introduces config presets, and adds a 3-step cron creation wizard. The progressive-disclosure tiers for slash commands are well-implemented. Two functional gaps in the cron wizard need to be addressed before this path is usable:
Confidence Score: 3/5Not safe to merge until the cron wizard's "Create" button is wired to an API and the "once" preset provides a valid at-time. Two P1 gaps in the new cron wizard (missing API call on create, invalid "once" patch) mean the wizard's primary user action silently fails. The remaining findings are P2 style issues. The slash-command tiers and Quick Settings UI are otherwise well-structured. ui/src/ui/views/cron-quick-create.ts and ui/src/ui/app-render.ts (renderCronQuickCreateForTab.onCreate)
|
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 7240464ce2
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
PR SummaryHigh Risk Overview Adds config presets (opinionated multi-setting bundles applied via Introduces progressive disclosure for slash commands by adding a Reviewed by Cursor Bugbot for commit 41d3f22. Bugbot is set up for automated code reviews on this repo. Configure here. |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: ec78e00888
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 37e65c4dbb
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fda27b9d3e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
fda27b9 to
897e6fe
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e3ca560c0a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 2aa3650892
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Add CommandTier type (essential | standard | power) to the command registry and wire it through to the Control UI slash command system. Essential commands (~10): /new, /reset, /stop, /compact, /model, /think, /status, /help, /export, /stop — always visible in the dropdown. Standard commands (~15): /models, /fast, /reasoning, /verbose, /tools, /skill, /agents, /subagents, /kill, /steer, /usage, /tts, /context, /btw, /tasks — shown on expand. Power commands (~15): /config, /mcp, /plugins, /debug, /bash, /acp, /exec, /queue, /elevated, /trace, /activation, /send, /session, /focus, /unfocus, /whoami, /approve, /allowlist, /restart, /commands, /redirect — only surfaced via search. When no filter text is entered and showAll is not set, power-tier commands are hidden from the completion list. getHiddenCommandCount() exposes the count for UI 'Show N more' affordance. Sorting now respects tier order (essential → standard → power) before category order. Co-authored-by: Nova <nova@openknot.ai>
Assign tier to clear (standard) and redirect (power) UI-only commands. Re-export CommandTier from the main commands-registry module. Co-authored-by: Nova <nova@openknot.ai>
Replace the 34-tab settings dump with a 6-card Quick Settings page as the default view when navigating to Settings. Each card answers a "what do I want to do?" question with status + actions: - Model & Thinking: current model, thinking level segmented control, fast mode toggle - Channels: connection status for known channels (Telegram, Discord, Slack, WhatsApp, Signal, iMessage) - API Keys: masked key display for Anthropic, OpenAI, Google, OpenRouter with Change/Add actions - Automations: cron job count, skill count, MCP server count with Manage/Browse/Configure links - Security: gateway auth mode, exec policy, device auth status - Appearance: theme, mode, and roundness controls (reuses existing theme infrastructure) The Advanced button navigates to the existing full config form. Quick Settings extracts data from the config snapshot and wires actions to navigate to the appropriate advanced section or existing pages (cron, skills, etc.). New files: - ui/src/ui/views/config-quick.ts (Quick Settings renderer) - ui/src/styles/config-quick.css (card layout styles) State additions: - configSettingsMode: "quick" | "advanced" (defaults to "quick") Co-authored-by: Nova <nova@openknot.ai>
When navigating from Quick Settings → Advanced, the config page now renders section categories as collapsible accordion groups instead of a 34-tab horizontal scroll bar. Each accordion group header shows the category name with an icon and chevron. Clicking expands to reveal subsections. Only one group is visually expanded at a time (via activeSection tracking). A '← Quick Settings' back button at the top navigates back to the card-based Quick Settings view. New ConfigProps: - settingsLayout: 'tabs' | 'accordion' (default: 'tabs') - onBackToQuick: callback for accordion back navigation The existing tabs layout is unchanged for scoped config views (Communications, Automation, Infrastructure, AI & Agents) which already have focused section sets. Co-authored-by: Nova <nova@openknot.ai>
Add four opinionated configuration presets that bundle multiple settings into a single click: - Personal Assistant: balanced context (20k/150k chars), always inject - Code Agent: higher context for coding (50k/300k chars), always inject - Team Bot: multi-channel lean context (10k/80k chars), skip on continuation - Minimal: lowest cost per turn (5k/30k chars), skip on continuation Each preset is a config.patch payload applied via the gateway RPC. The active preset is auto-detected from current bootstrapMaxChars and bootstrapTotalMaxChars values. The preset picker card is added to the Quick Settings grid with a 2-column layout. Active preset is highlighted with an accent border. New files: - ui/src/ui/views/config-presets.ts (preset definitions + detection) CSS additions: - 2-column preset grid with hover/active states - Responsive: single column below 480px Co-authored-by: Nova <nova@openknot.ai>
Add a 3-step creation flow for cron automations inspired by Claude Code's Routines UX: Step 1 — What: Describe the task in natural language + optional name Step 2 — When: Pick a schedule from 6 presets (morning, evening, hourly, weekdays, weekly, run-once) or custom Step 3 — How: Choose delivery mode (notify me, silent, independent) The wizard maps to the existing CronFormState under the hood via draftToCronFormPatch(), converting friendly presets to cron expressions, schedule kinds, session targets, and delivery modes. A '+ New' button is added to the cron page header that opens the wizard. The existing full cron form remains accessible for fine-tuning. New files: - ui/src/ui/views/cron-quick-create.ts (wizard renderer + draft types) - ui/src/styles/cron-quick-create.css (step indicator, preset cards, radio cards, form elements) State additions: - cronQuickCreateOpen, cronQuickCreateStep, cronQuickCreateDraft Co-authored-by: Nova <nova@openknot.ai>
…n wizard - Quick Settings cards: real theme tokens (--card, --bg-elevated, color-mix), accent icon backgrounds, spring-eased toggle animation, refined spacing - Slash command dropdown: 'Show N more commands' footer with tier-aware expand/collapse, resets on menu close - Automation wizard: focus rings on inputs, preset card hover lift, step indicator glow on active dot, delivery card subtle accent - Fix btn--primary class to match design system (btn.primary) - Use semantic tokens (--ok, --warn, --accent-subtle) instead of hardcoded rgba
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
a3cbdc9 to
9238da0
Compare
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9238da093e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cd471bdf6e
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 3e691c1ca7
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 691436b067
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| state.tab = "cron" as import("./navigation.ts").Tab; | ||
| requestHostUpdate?.(); |
There was a problem hiding this comment.
Navigate via setTab when leaving Quick Settings
These Quick Settings actions mutate state.tab directly, which bypasses the tab-selection path in app-settings that runs refreshActiveTab(...) and syncUrlWithTab(...). From this flow, opening tabs like Cron/Skills/Infrastructure can show stale or empty data until a manual refresh, and the browser URL/history can remain on /config, so reload/back no longer reflects the visible tab. Route these transitions through state.setTab(...) instead of direct assignment.
Useful? React with 👍 / 👎.
| ${settingsLayout === "accordion" | ||
| ? renderAccordionNav() | ||
| : html` |
There was a problem hiding this comment.
Preserve settings search in accordion mode
When settingsLayout === "accordion", the render path returns renderAccordionNav() and skips the search input entirely, so Advanced Settings loses its setting-search/filter affordance. This is a functional regression for large configs because users can no longer narrow fields from this view even though searchQuery/onSearchChange state is still wired.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9616038a38
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| security: extractQuickSettingsSecurity(state), | ||
| onSecurityConfigure: () => { | ||
| state.configSettingsMode = "advanced"; | ||
| state.configActiveSection = "auth"; |
There was a problem hiding this comment.
Route security configure action to gateway settings
The Security card surfaces gateway.auth and gateway.controlUi status, but its Configure handler sets configActiveSection to "auth", which navigates to the auth-profiles section rather than gateway settings where those controls live. In practice, users clicking Configure from this card are taken away from the settings they need to change (gateway auth/device auth), so the call-to-action is misleading and blocks the intended fix path.
Useful? React with 👍 / 👎.
| <div class="qs-row"> | ||
| <span class="qs-row__label">Gateway auth</span> | ||
| <span class="qs-row__value"> | ||
| <span class="qs-badge ${gatewayAuth !== "none" ? "qs-badge--ok" : "qs-badge--warn"}" |
There was a problem hiding this comment.
Mark unknown gateway auth state as non-OK
The badge styling treats any value other than "none" as qs-badge--ok, so "unknown" is rendered as a positive security state. When auth mode cannot be determined (for example if gateway.auth is absent), this UI still shows a green badge, which misrepresents security posture and can cause users to miss that auth is not actually confirmed.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f8ec621e74
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| security: extractQuickSettingsSecurity(state), | ||
| onSecurityConfigure: () => { | ||
| state.configSettingsMode = "advanced"; | ||
| state.configActiveSection = "auth"; |
There was a problem hiding this comment.
Route Security Configure to gateway settings
The Security card displays gateway.auth/device-auth status, but this handler sends users to configActiveSection = "auth" in advanced mode. In the same render path, advanced config excludes infrastructure sections (including gateway), so clicking Configure cannot reach the fields the card is summarizing and users land on unrelated auth-profile settings instead.
Useful? React with 👍 / 👎.
…nks @BunsDev Co-authored-by: Val Alexander <68980965+BunsDev@users.noreply.github.com>
…nks @BunsDev Co-authored-by: Val Alexander <68980965+BunsDev@users.noreply.github.com>
…nks @BunsDev Co-authored-by: Val Alexander <68980965+BunsDev@users.noreply.github.com>
…nks @BunsDev Co-authored-by: Val Alexander <68980965+BunsDev@users.noreply.github.com>
|
In
This seems inconsistent with the documented behavior of OpenClaw fast mode. According to the docs, So showing
|
…nks @BunsDev Co-authored-by: Val Alexander <68980965+BunsDev@users.noreply.github.com>
…nks @BunsDev Co-authored-by: Val Alexander <68980965+BunsDev@users.noreply.github.com>

Summary
Testing
pnpm exec oxfmt --write ui/src/styles/config-quick.cssgit diff --checkCoauthored with Nova for the final layout polish and PR prep.