Skip to content

Ade Web Renderer Refinements#643

Merged
arul28 merged 1 commit into
mainfrom
ade/ade-web-renderer-refinements-aaf56c6b
Jun 23, 2026
Merged

Ade Web Renderer Refinements#643
arul28 merged 1 commit into
mainfrom
ade/ade-web-renderer-refinements-aaf56c6b

Conversation

@arul28

@arul28 arul28 commented Jun 23, 2026

Copy link
Copy Markdown
Owner

Summary

Describe the change.

What Changed

Key files and behaviors.

Validation

How you tested.

Risks

Anything to watch.

ADE   Open in ADE  ·  ade/ade-web-renderer-refinements-aaf56c6b branch  ·  PR #643

Greptile Summary

This PR refactors the ADE desktop settings UI from a tab-based "Integrations" section into a unified GeneralSection composed of purpose-built subsections, each wrapped in a new SettingsSectionShell component with icon, title, and description headers.

  • New shared UI primitives (settingsSectionUi.tsx): SettingsSectionShell and SettingsToggle standardise section layout and toggle controls across all settings pages.
  • Section decomposition: AgentCompletionSoundSection, LaunchPromptSection, PrChatTranscriptsSection, GitHubIntegrationSection, LinearIntegrationSection, and EnvironmentSection are extracted as independent components and composed into the redesigned GeneralSection; the IntegrationsSettingsSection tab is deleted.
  • Routing backward-compat: Legacy ?integration=github/linear and ?tab=integrations URLs are redirected to ?tab=general with appropriate hash targets; new #github-connection, #linear-connection, and #agent-completion-sound hash anchors are registered.
  • Chat renderer fixes: List items and inline code now carry break-words [overflow-wrap:anywhere] to prevent horizontal overflow; ChatAppearancePreview wraps the assistant transcript in overflow-x-hidden to contain wide content in the preview pane.
  • ReasoningEffortPicker: New useFamilyDefaults prop (default true) lets background-job pickers opt out of shared per-family reasoning memory.

Confidence Score: 3/5

Safe to merge for most settings, but the GitHub auth instructions can silently show the wrong token scope after the user enables PR chat transcripts.

The two components that were previously coupled — the transcript gists toggle and the GitHub auth command display — now each maintain their own independent copy of transcriptGistsEnabled loaded at mount time. A user who enables transcript gists in PrChatTranscriptsSection and then reads the GitHub auth instructions in the sibling GitHubSection will see commands that omit the gist scope, and could configure a token that cannot actually publish transcripts. Everything else in the refactor looks correct.

GitHubSection.tsx and PrChatTranscriptsSection.tsx — they share a project-config setting but each load it independently with no synchronisation between them.

Important Files Changed

Filename Overview
apps/desktop/src/renderer/components/settings/GitHubSection.tsx Refactored to support an embedded prop and removes the transcript-gists toggle card, but still independently loads transcriptGistsEnabled from projectConfig.get() — this value is now stale relative to the sibling PrChatTranscriptsSection, causing the GitHub auth command suggestions to show incorrect scope requirements after the user toggles the feature.
apps/desktop/src/renderer/components/settings/settingsSectionUi.tsx New shared UI primitives: SettingsSectionShell (icon header + title + description) and SettingsToggle (accessible switch button with role=switch/aria-checked). Straightforward and well-structured.
apps/desktop/src/renderer/components/app/SettingsPage.tsx Removes the Integrations tab; adds backward-compat redirects for ?integration=github/linear and hash fragments; cleans up the padded section index labels. Project setup / onboarding entry point removed with no apparent replacement.
apps/desktop/src/renderer/components/settings/GeneralSection.tsx Significantly simplified: all content is now delegated to focused subsections. Previous onboarding/project-setup card, about section, and CLI section are relocated or dropped.
apps/desktop/src/renderer/components/settings/ProjectSection.tsx Major visual overhaul: collapsible detail panels, health summary cards, and SettingsSectionShell header. Logic is sound; auto-open effect correctly opens only when issues exist.
apps/desktop/src/renderer/components/settings/PrChatTranscriptsSection.tsx Extracted from GitHubSection into its own section with SettingsSectionShell. The logic is correct but its transcriptGistsEnabled state is no longer shared with GitHubSection's matching state, causing the auth-command staleness issue.
apps/desktop/src/renderer/components/settings/AgentCompletionSoundSection.tsx New file: extraction of the agent completion sound controls from AppearanceSection into a dedicated SettingsSectionShell. Functionally equivalent; minor indentation inconsistency inside the outer flex container.
apps/desktop/src/renderer/components/settings/DictationSection.tsx Refactored to use SettingsSectionShell and SettingsToggle; improved download progress UI with percentage badge and bullet-point feature list. No logic changes.
apps/desktop/src/renderer/components/settings/EnvironmentSection.tsx New composite section embedding AboutSection and AdeCliSection under a single SettingsSectionShell. Clean and straightforward.
apps/desktop/src/renderer/components/chat/chatMarkdown.tsx Adds break-words [overflow-wrap:anywhere] to list items and inline code elements to prevent horizontal overflow. Small but useful fix.
apps/desktop/src/renderer/components/shared/ModelPicker/ReasoningEffortPicker.tsx Adds useFamilyDefaults prop (default true) to allow callers to opt out of shared per-family reasoning defaults; accompanied by a test. Well-implemented.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    GP[GeneralSection] --> GH[GitHubIntegrationSection]
    GP --> LI[LinearIntegrationSection]
    GP --> DI[DictationSection]
    GP --> LP[LaunchPromptSection]
    GP --> AC[AgentCompletionSoundSection]
    GP --> PR[PrChatTranscriptsSection]
    GP --> PS[ProjectSection]
    GP --> EN[EnvironmentSection]

    GH --> GHS[GitHubSection embedded]
    LI --> LS[LinearSection embedded]
    EN --> AB[AboutSection embedded]
    EN --> CLI[AdeCliSection embedded]

    GHS -- "loads projectConfig.get()" --> PC[(ProjectConfig)]
    PR -- "loads + saves projectConfig" --> PC

    GHS -- "transcriptGistsEnabled state" --> CMD[gh auth / PAT URL shown to user]
    PR -- "transcriptGistsEnabled state" --> TG[Toggle UI]

    style PC fill:#f90,color:#000
    style CMD fill:#f44,color:#fff
    style TG fill:#4a4,color:#fff
Loading
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    GP[GeneralSection] --> GH[GitHubIntegrationSection]
    GP --> LI[LinearIntegrationSection]
    GP --> DI[DictationSection]
    GP --> LP[LaunchPromptSection]
    GP --> AC[AgentCompletionSoundSection]
    GP --> PR[PrChatTranscriptsSection]
    GP --> PS[ProjectSection]
    GP --> EN[EnvironmentSection]

    GH --> GHS[GitHubSection embedded]
    LI --> LS[LinearSection embedded]
    EN --> AB[AboutSection embedded]
    EN --> CLI[AdeCliSection embedded]

    GHS -- "loads projectConfig.get()" --> PC[(ProjectConfig)]
    PR -- "loads + saves projectConfig" --> PC

    GHS -- "transcriptGistsEnabled state" --> CMD[gh auth / PAT URL shown to user]
    PR -- "transcriptGistsEnabled state" --> TG[Toggle UI]

    style PC fill:#f90,color:#000
    style CMD fill:#f44,color:#fff
    style TG fill:#4a4,color:#fff
Loading

Comments Outside Diff (1)

  1. apps/desktop/src/renderer/components/settings/GitHubSection.tsx, line 94-116 (link)

    P1 Stale transcript gists flag in GitHub auth instructions

    GitHubSection loads transcriptGistsEnabled once at mount and uses it to decide which gh auth command and classic-token URL to display. Now that the toggle lives in PrChatTranscriptsSection (a sibling on the same General page), toggling it there never updates GitHubSection's local copy. A user who enables PR chat transcripts and then looks at the GitHub auth instructions will see the non-gist version of the commands — meaning they could set up a token that's missing the required gist scope.

    Prompt To Fix With AI
    This is a comment left during a code review.
    Path: apps/desktop/src/renderer/components/settings/GitHubSection.tsx
    Line: 94-116
    
    Comment:
    **Stale transcript gists flag in GitHub auth instructions**
    
    `GitHubSection` loads `transcriptGistsEnabled` once at mount and uses it to decide which `gh auth` command and classic-token URL to display. Now that the toggle lives in `PrChatTranscriptsSection` (a sibling on the same General page), toggling it there never updates `GitHubSection`'s local copy. A user who enables PR chat transcripts and then looks at the GitHub auth instructions will see the non-gist version of the commands — meaning they could set up a token that's missing the required gist scope.
    
    How can I resolve this? If you propose a fix, please make it concise.

    Fix in Claude Code

Fix All in Claude Code

Prompt To Fix All With AI
Fix the following 3 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 3
apps/desktop/src/renderer/components/settings/GitHubSection.tsx:94-116
**Stale transcript gists flag in GitHub auth instructions**

`GitHubSection` loads `transcriptGistsEnabled` once at mount and uses it to decide which `gh auth` command and classic-token URL to display. Now that the toggle lives in `PrChatTranscriptsSection` (a sibling on the same General page), toggling it there never updates `GitHubSection`'s local copy. A user who enables PR chat transcripts and then looks at the GitHub auth instructions will see the non-gist version of the commands — meaning they could set up a token that's missing the required gist scope.

### Issue 2 of 3
apps/desktop/src/renderer/components/app/SettingsPage.tsx:1-30
**Project setup / onboarding entry point removed**

The old `GeneralSection` contained a "PROJECT SETUP" card with an "Open Project Setup" / "Run Setup Again" button that navigated to `/onboarding`. That card is gone from the new `GeneralSection` and doesn't appear anywhere else in the diff (command palette, TopBar, etc.). Users who want to re-run the onboarding flow for AI, GitHub, and Linear setup currently have no in-app path to do so from Settings.

### Issue 3 of 3
apps/desktop/src/renderer/components/settings/AgentCompletionSoundSection.tsx:48-51
Inconsistent indentation inside the outer `flexDirection: "column"` `<div>` — the first child `<div>` is indented four extra spaces relative to the rest. Normalising this prevents future diff noise and keeps the nesting level legible.

```suggestion
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div>
            <label
              htmlFor={soundSelectId}
```

Reviews (1): Last reviewed commit: "Reorganize settings General tab and refi..." | Re-trigger Greptile

Greptile also left 2 inline comments on this PR.

Consolidate GitHub, Linear, voice input, launch prompts, completion sound,
PR transcripts, project files, and environment into General with branded
section headers. Remove the Integrations tab, fix independent reasoning
effort on Background Jobs, and update deep links plus docs.

Co-authored-by: Cursor <cursoragent@cursor.com>
@vercel

vercel Bot commented Jun 23, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
ade Ignored Ignored Jun 23, 2026 4:53pm

@arul28

arul28 commented Jun 23, 2026

Copy link
Copy Markdown
Owner Author

@copilot review but do not make fixes

@coderabbitai

coderabbitai Bot commented Jun 23, 2026

Copy link
Copy Markdown

Warning

Review limit reached

@arul28, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 49 minutes and 1 second. Learn how PR review limits work.

Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file).

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits.

🚦 How do rate limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate.

For paid Pro and Pro+ PR reviews, CodeRabbit uses rolling per-developer review limits. Reviews become available again as older review attempts age out of the rolling limit window.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: f9473726-eaf4-41f7-af1e-04b2d3458e7a

📥 Commits

Reviewing files that changed from the base of the PR and between 84502b7 and 13eda09.

⛔ Files ignored due to path filters (1)
  • docs/features/onboarding-and-settings/README.md is excluded by !docs/**
📒 Files selected for processing (34)
  • apps/desktop/src/renderer/components/app/AppShell.tsx
  • apps/desktop/src/renderer/components/app/CommandPalette.tsx
  • apps/desktop/src/renderer/components/app/LinearQuickViewButton.tsx
  • apps/desktop/src/renderer/components/app/SettingsPage.tsx
  • apps/desktop/src/renderer/components/app/TopBar.test.tsx
  • apps/desktop/src/renderer/components/app/settingsSections.ts
  • apps/desktop/src/renderer/components/chat/AgentChatPane.tsx
  • apps/desktop/src/renderer/components/chat/ChatSurfaceShell.tsx
  • apps/desktop/src/renderer/components/chat/chatMarkdown.tsx
  • apps/desktop/src/renderer/components/cto/LinearSyncPanel.tsx
  • apps/desktop/src/renderer/components/lanes/LanesPage.tsx
  • apps/desktop/src/renderer/components/prs/tabs/GitHubTab.tsx
  • apps/desktop/src/renderer/components/settings/AboutSection.tsx
  • apps/desktop/src/renderer/components/settings/AdeCliSection.tsx
  • apps/desktop/src/renderer/components/settings/AgentCompletionSoundSection.tsx
  • apps/desktop/src/renderer/components/settings/AiFeaturesSection.tsx
  • apps/desktop/src/renderer/components/settings/AppearanceSection.tsx
  • apps/desktop/src/renderer/components/settings/ChatAppearancePreview.test.tsx
  • apps/desktop/src/renderer/components/settings/ChatAppearancePreview.tsx
  • apps/desktop/src/renderer/components/settings/DictationSection.tsx
  • apps/desktop/src/renderer/components/settings/EnvironmentSection.tsx
  • apps/desktop/src/renderer/components/settings/GeneralSection.tsx
  • apps/desktop/src/renderer/components/settings/GitHubIntegrationSection.tsx
  • apps/desktop/src/renderer/components/settings/GitHubSection.tsx
  • apps/desktop/src/renderer/components/settings/IntegrationsSettingsSection.tsx
  • apps/desktop/src/renderer/components/settings/LaunchPromptSection.tsx
  • apps/desktop/src/renderer/components/settings/LinearIntegrationSection.tsx
  • apps/desktop/src/renderer/components/settings/LinearSection.tsx
  • apps/desktop/src/renderer/components/settings/PrChatTranscriptsSection.tsx
  • apps/desktop/src/renderer/components/settings/ProjectSection.tsx
  • apps/desktop/src/renderer/components/settings/settingsSectionUi.tsx
  • apps/desktop/src/renderer/components/shared/ModelPicker/ReasoningEffortPicker.test.tsx
  • apps/desktop/src/renderer/components/shared/ModelPicker/ReasoningEffortPicker.tsx
  • apps/desktop/src/renderer/onboarding/tours/settingsHighlightsTour.ts
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch ade/ade-web-renderer-refinements-aaf56c6b

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

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

Comment on lines 1 to 30
@@ -17,7 +16,6 @@ const SECTIONS = [
{ id: "appearance", label: "Appearance", icon: Palette },
{ id: "ai", label: "AI Connections", icon: Brain },
{ id: "background-jobs", label: "Background Jobs", icon: Robot },
{ id: "integrations", label: "Integrations", icon: Plugs },
{ id: "lane-templates", label: "Lane Templates", icon: Stack },
{ id: "ade-usage", label: "Stats", icon: ChartLineUp },
] as const;
@@ -30,12 +28,13 @@ const TAB_ALIASES: Record<string, SectionId> = {
context: "general",
providers: "ai",
automations: "background-jobs",

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Project setup / onboarding entry point removed

The old GeneralSection contained a "PROJECT SETUP" card with an "Open Project Setup" / "Run Setup Again" button that navigated to /onboarding. That card is gone from the new GeneralSection and doesn't appear anywhere else in the diff (command palette, TopBar, etc.). Users who want to re-run the onboarding flow for AI, GitHub, and Linear setup currently have no in-app path to do so from Settings.

Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/desktop/src/renderer/components/app/SettingsPage.tsx
Line: 1-30

Comment:
**Project setup / onboarding entry point removed**

The old `GeneralSection` contained a "PROJECT SETUP" card with an "Open Project Setup" / "Run Setup Again" button that navigated to `/onboarding`. That card is gone from the new `GeneralSection` and doesn't appear anywhere else in the diff (command palette, TopBar, etc.). Users who want to re-run the onboarding flow for AI, GitHub, and Linear setup currently have no in-app path to do so from Settings.

How can I resolve this? If you propose a fix, please make it concise.

Fix in Claude Code

Comment on lines +48 to +51
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
<div>
<label
htmlFor={soundSelectId}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Inconsistent indentation inside the outer flexDirection: "column" <div> — the first child <div> is indented four extra spaces relative to the rest. Normalising this prevents future diff noise and keeps the nesting level legible.

Suggested change
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
<div>
<label
htmlFor={soundSelectId}
<div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
<div>
<label
htmlFor={soundSelectId}
Prompt To Fix With AI
This is a comment left during a code review.
Path: apps/desktop/src/renderer/components/settings/AgentCompletionSoundSection.tsx
Line: 48-51

Comment:
Inconsistent indentation inside the outer `flexDirection: "column"` `<div>` — the first child `<div>` is indented four extra spaces relative to the rest. Normalising this prevents future diff noise and keeps the nesting level legible.

```suggestion
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          <div>
            <label
              htmlFor={soundSelectId}
```

How can I resolve this? If you propose a fix, please make it concise.

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

Fix in Claude Code

@arul28 arul28 merged commit 615071f into main Jun 23, 2026
27 checks passed
@arul28 arul28 deleted the ade/ade-web-renderer-refinements-aaf56c6b branch June 23, 2026 17:54
arul28 added a commit that referenced this pull request Jun 23, 2026
Two desktop changes landed on main after the initial v1.2.9 changelog:
Settings General-tab reorganization (#643) and stale lane worktree
cleanup retry. Add them to the v1.2.9 release notes so the re-pointed
tag and release notes match what ships.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant