Skip to content

feat(mobile): pick your terminal theme in Settings → Terminal - #10421

Draft
bbingz wants to merge 2 commits into
stablyai:mainfrom
bbingz:feat/mobile-terminal-theme-picker
Draft

bbingz wants to merge 2 commits into
stablyai:mainfrom
bbingz:feat/mobile-terminal-theme-picker

Conversation

@bbingz

@bbingz bbingz commented Jul 24, 2026 •

Copy link
Copy Markdown
Contributor

Summary

Add a device-local terminal theme picker under Settings → Terminal. A phone can select a built-in palette or Follow desktop, and mounted terminal panes update without navigation. The WebView frame follows the chosen background. Dark/light preferences and Match dark mode are saved independently; current mobile chrome is dark-only, so the dark slot is active and the light slot is stored for a future light-mode integration.

The built-in catalog moves into shared code for desktop/mobile reuse, preserving the 30 theme names and palettes. The picker drawer lives at screen root to avoid clipping and exposes selected/disabled states to accessibility tools. Missing or unknown choices follow the host palette.

This remains a draft and is the stack base for #10419, which supplies host-side theme publication. This PR does not change the remote theme contract or add a stream opcode.

Testing and review

At a1dcff2cab9a16c6511c25179d3f5a376c6df67c, independent verification passed 46 mobile tests across 7 files using official react-test-renderer 19.2.8 with mocked React Native primitives, plus 35 desktop/shared tests across 3 files. Checks cover persistence, failed-read retry, choices during hydration, slot resolution, live hook updates, picker selection/accessibility, pane propagation and WebView background.

CLI, Node and Web TypeScript checks (--composite false), changed-file lint/format and diff whitespace passed. These desktop typechecks do not cover the mobile app. Independent Cursor review passed for this exact SHA (spec-compliance PASS; quality APPROVED).

Mobile app typecheck, native iOS/Android rendering, complete Expo bundling and live paired-host/SSH smoke were not run: the complete Expo/React Native dependency environment was not installed. No full repository suite was repeated. Manual Settings → Terminal palette selection / Follow desktop / restart validation remains unchecked; this is not a ready-for-merge claim.

AI disclosure

Cursor ported the change. Codex independently checked the original scope and source and reran the affected tests with the real React test renderer in isolated dependencies.

@coderabbitai

coderabbitai Bot commented Jul 24, 2026 •

Copy link
Copy Markdown
Contributor

Review Change Stack

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Introduces a shared catalog of 30 built-in terminal themes and migrates renderer lookups to it. Adds AsyncStorage-backed mobile theme preferences, theme selection resolution, settings rows, picker drawers, accessibility metadata, and terminal pane integration. Applies resolved terminal background colors to the WebView frame and adds tests covering catalog behavior, persistence, selection, settings interactions, pane resolution, and WebView styling.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 21.15% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
Title check ✅ Passed The title clearly and concisely describes the main change: adding mobile terminal theme selection in Settings.
Description check ✅ Passed The description includes all required sections and documents the UI change, testing, review, security audit, and platform notes.

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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (1)
mobile/src/terminal/TerminalWebView.test.ts (1)

1-2: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Migrate new coverage away from deprecated react-test-renderer.

React 19 deprecates this renderer, and this test now suppresses its warning. Prefer React Native Testing Library if available.

  • mobile/src/terminal/TerminalWebView.test.ts#L1-L2: replace the renderer import and host-node assertions.
  • mobile/src/terminal/TerminalWebView.test.ts#L35-L47: remove warning suppression after migration.
  • mobile/src/components/PickerListDrawer.test.ts#L1-L2: replace the renderer import and row assertions.
// verify-test-library.mjs
// Run with: node verify-test-library.mjs
import { readFile } from 'node:fs/promises'

for (const file of ['package.json', 'mobile/package.json']) {
  try {
    const pkg = JSON.parse(await readFile(file, 'utf8'))
    const deps = { ...pkg.dependencies, ...pkg.devDependencies }
    console.log(file, {
      reactTestRenderer: deps['react-test-renderer'] ?? null,
      reactNativeTestingLibrary: deps['`@testing-library/react-native`'] ?? null
    })
  } catch {}
}

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 8fa77db7-bca3-4ed7-8f01-cc863a120c49

📥 Commits

Reviewing files that changed from the base of the PR and between 17959a2 and 43f9bac1dade7e5be3ea5af66b9050cd7b4ece89.

📒 Files selected for processing (30)
  • mobile/app/terminal-settings.tsx
  • mobile/src/components/PickerListDrawer.test.ts
  • mobile/src/components/PickerListDrawer.tsx
  • mobile/src/session/TerminalPaneView.test.ts
  • mobile/src/session/TerminalPaneView.tsx
  • mobile/src/storage/terminal-theme-preference.test.ts
  • mobile/src/storage/terminal-theme-preference.ts
  • mobile/src/terminal/TerminalThemeSettings.test.ts
  • mobile/src/terminal/TerminalThemeSettings.tsx
  • mobile/src/terminal/TerminalWebView.test.ts
  • mobile/src/terminal/TerminalWebView.tsx
  • mobile/src/terminal/terminal-theme-slot-selection.test.ts
  • mobile/src/terminal/terminal-theme-slot-selection.ts
  • mobile/src/terminal/terminal-webview-html.ts
  • mobile/src/terminal/use-mobile-terminal-theme.test.ts
  • mobile/src/terminal/use-mobile-terminal-theme.ts
  • src/renderer/src/lib/terminal-contrast-correction.test.ts
  • src/renderer/src/lib/terminal-theme.ts
  • src/renderer/src/lib/terminal-themes-data.ts
  • src/renderer/src/lib/terminal-themes/types.ts
  • src/shared/terminal-themes/catalog-merge.ts
  • src/shared/terminal-themes/classic.ts
  • src/shared/terminal-themes/defaults.ts
  • src/shared/terminal-themes/index.ts
  • src/shared/terminal-themes/popular-dark-core.ts
  • src/shared/terminal-themes/popular-dark-extended.ts
  • src/shared/terminal-themes/popular-dark.ts
  • src/shared/terminal-themes/popular-light.ts
  • src/shared/terminal-themes/terminal-theme-catalog.test.ts
  • src/shared/terminal-themes/types.ts
💤 Files with no reviewable changes (2)
  • src/renderer/src/lib/terminal-themes-data.ts
  • src/renderer/src/lib/terminal-themes/types.ts

@AmethystLiang
AmethystLiang requested a review from OrcaWin July 24, 2026 16:48
@bbingz
bbingz force-pushed the feat/mobile-terminal-theme-picker branch from 43f9bac to 3f7bde8 Compare July 25, 2026 04:26
@bbingz

bbingz commented Jul 25, 2026

Copy link
Copy Markdown
Contributor Author

Rebased onto current main. One content change beyond the rebase: TerminalThemeSettings.tsx reads the frozen colors alias like every other screen at this point in the stack, so it is now listed in the unthemed-color-imports ratchet — without the entry that test fails on this head. Whichever lands second, this picker or the themed-styles migration (#10490), converts the screen and deletes the entry.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
mobile/src/theme/mobile-theme.ts (1)

19-21: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Condense the migration/history comments.

These comments explain implementation history rather than the current non-obvious contract. Keep a short statement of intent instead.

[diff]
-// Pressed state for the surfaceBright fill — bg-primary/90 composited over bgBase
-// (src/renderer/src/components/ui/button.tsx:12). Dark keeps the value
-// NewWorkspaceFab already rendered, so this is a rename, not a repaint.
+// Pressed state for the primary-action fill.
...
-// Why: unconverted modules keep compiling and keep rendering dark until the
-// themed-styles migration reaches them (see theme/unthemed-color-imports.test.ts).
+// Legacy dark-only alias while the themed-style migration is in progress.
[/diff]

As per coding guidelines, comments must be concise, limited to non-obvious information, and preferably one line.

Also applies to: 115-116

Source: Coding guidelines


ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 594a8649-3412-4a42-98dc-49d2d1b888e8

📥 Commits

Reviewing files that changed from the base of the PR and between 43f9bac1dade7e5be3ea5af66b9050cd7b4ece89 and 3f7bde86608f68097a3eb683d04131c3c4c228bd.

📒 Files selected for processing (35)
  • mobile/app/terminal-settings.tsx
  • mobile/src/components/NewWorkspaceFab.tsx
  • mobile/src/components/PickerListDrawer.test.ts
  • mobile/src/components/PickerListDrawer.tsx
  • mobile/src/session/TerminalPaneView.test.ts
  • mobile/src/session/TerminalPaneView.tsx
  • mobile/src/storage/terminal-theme-preference.test.ts
  • mobile/src/storage/terminal-theme-preference.ts
  • mobile/src/terminal/TerminalThemeSettings.test.ts
  • mobile/src/terminal/TerminalThemeSettings.tsx
  • mobile/src/terminal/TerminalWebView.test.ts
  • mobile/src/terminal/TerminalWebView.tsx
  • mobile/src/terminal/terminal-theme-slot-selection.test.ts
  • mobile/src/terminal/terminal-theme-slot-selection.ts
  • mobile/src/terminal/terminal-webview-html.ts
  • mobile/src/terminal/use-mobile-terminal-theme.test.ts
  • mobile/src/terminal/use-mobile-terminal-theme.ts
  • mobile/src/theme/mobile-theme-palette.test.ts
  • mobile/src/theme/mobile-theme.ts
  • mobile/src/theme/themed-style-factories.test.ts
  • mobile/src/theme/unthemed-color-imports.test.ts
  • src/renderer/src/lib/terminal-contrast-correction.test.ts
  • src/renderer/src/lib/terminal-theme.ts
  • src/renderer/src/lib/terminal-themes-data.ts
  • src/renderer/src/lib/terminal-themes/types.ts
  • src/shared/terminal-themes/catalog-merge.ts
  • src/shared/terminal-themes/classic.ts
  • src/shared/terminal-themes/defaults.ts
  • src/shared/terminal-themes/index.ts
  • src/shared/terminal-themes/popular-dark-core.ts
  • src/shared/terminal-themes/popular-dark-extended.ts
  • src/shared/terminal-themes/popular-dark.ts
  • src/shared/terminal-themes/popular-light.ts
  • src/shared/terminal-themes/terminal-theme-catalog.test.ts
  • src/shared/terminal-themes/types.ts
💤 Files with no reviewable changes (2)
  • src/renderer/src/lib/terminal-themes/types.ts
  • src/renderer/src/lib/terminal-themes-data.ts
🚧 Files skipped from review as they are similar to previous changes (27)
  • src/shared/terminal-themes/popular-dark.ts
  • mobile/src/components/PickerListDrawer.test.ts
  • src/shared/terminal-themes/types.ts
  • src/shared/terminal-themes/classic.ts
  • src/shared/terminal-themes/popular-dark-core.ts
  • src/renderer/src/lib/terminal-contrast-correction.test.ts
  • src/shared/terminal-themes/catalog-merge.ts
  • mobile/src/terminal/terminal-theme-slot-selection.ts
  • mobile/src/session/TerminalPaneView.test.ts
  • src/shared/terminal-themes/popular-dark-extended.ts
  • src/shared/terminal-themes/defaults.ts
  • mobile/src/terminal/use-mobile-terminal-theme.ts
  • mobile/src/terminal/terminal-webview-html.ts
  • mobile/src/session/TerminalPaneView.tsx
  • mobile/src/terminal/TerminalThemeSettings.test.ts
  • mobile/src/components/PickerListDrawer.tsx
  • src/shared/terminal-themes/popular-light.ts
  • mobile/src/terminal/TerminalThemeSettings.tsx
  • mobile/src/terminal/TerminalWebView.tsx
  • src/shared/terminal-themes/terminal-theme-catalog.test.ts
  • mobile/src/storage/terminal-theme-preference.test.ts
  • mobile/src/terminal/TerminalWebView.test.ts
  • mobile/src/terminal/use-mobile-terminal-theme.test.ts
  • src/shared/terminal-themes/index.ts
  • mobile/app/terminal-settings.tsx
  • mobile/src/terminal/terminal-theme-slot-selection.test.ts
  • mobile/src/storage/terminal-theme-preference.ts

@bbingz
bbingz force-pushed the feat/mobile-terminal-theme-picker branch from 3f7bde8 to 0316250 Compare July 25, 2026 04:49
@bbingz

bbingz commented Jul 25, 2026

Copy link
Copy Markdown
Contributor Author

Correction to my previous comment: the ratchet entry is no longer needed and has been dropped — this branch is back to its original single commit. The earlier rebase had linearised a merge in the stack below, which pulled the light palette (and its ratchet test) into this branch's history; redone with --rebase-merges, so this PR is again exactly the catalog + slot-selection commits plus the picker, and its diff is the same 30 files / 1651 insertions it was before. Sorry for the churn.

@bbingz
bbingz force-pushed the feat/mobile-terminal-theme-picker branch from 0316250 to 003fe0c Compare July 25, 2026 09:24
@bbingz

bbingz commented Jul 25, 2026

Copy link
Copy Markdown
Contributor Author

Rebased onto current main via updated #10420 tip (112bf74eb).

  • Reviewable surface remains the top commit (5 files: terminal theme picker UI)
  • No content change in the picker commit itself
  • Verified: TerminalThemeSettings + PickerListDrawer + slot/preference/use-theme tests (42) + catalog (5)

CodeRabbit notes:

  • mobile-theme.ts commentary — not in this PR
  • react-test-renderer migration — deferred; mobile has no @testing-library/react-native dep and the rest of the suite still uses RTR with the same deprecation suppress pattern

@bbingz
bbingz force-pushed the feat/mobile-terminal-theme-picker branch from 003fe0c to 59dc943 Compare July 25, 2026 10:13
@bbingz

bbingz commented Jul 25, 2026

Copy link
Copy Markdown
Contributor Author

Catch-up rebase onto latest main via refreshed #10420 (no content change).

@nwparker nwparker added the enhancement New feature or request label Jul 27, 2026
@bbingz
bbingz force-pushed the feat/mobile-terminal-theme-picker branch from 59dc943 to 04ec3c5 Compare July 28, 2026 03:55
@bbingz
bbingz force-pushed the feat/mobile-terminal-theme-picker branch from 04ec3c5 to 61f45c9 Compare August 6, 2026 01:54
@coderabbitai

coderabbitai Bot commented Aug 6, 2026

Copy link
Copy Markdown
Contributor

Note

GitHub couldn't provide a complete incremental comparison for this pull request, so CodeRabbit is performing a full review instead. This review may take a little longer.

@bbingz bbingz changed the title feat(mobile): terminal theme picker in Settings → Terminal feat(mobile): pick your terminal theme in Settings → Terminal Aug 6, 2026
@bbingz

bbingz commented Aug 6, 2026

Copy link
Copy Markdown
Contributor Author

Resolving the save-before-hydration thread with the adjudication that was previously only in the body: on the hydrate-succeeds-mid-call path a subscriber can observe two publishes in the same microtask chain (disk value, then the merged value) — an accepted, bounded degradation, not data loss. The truth table in the description covers the cases.

@bbingz

bbingz commented Aug 11, 2026

Copy link
Copy Markdown
Contributor Author

Queue hygiene (contributor): converting this PR to draft.

It is not superseded by main — still a valid product stack — but at +hundreds–thousands of lines it sits behind a large campaign backlog and is unlikely to get review soon. Draft reduces noise for maintainers.

If product wants this stack prioritized, say so and we will mark ready again / rebase.

@bbingz

bbingz commented Aug 19, 2026

Copy link
Copy Markdown
Contributor Author

Relationship note — this is the base of a two-PR stack, not a duplicate of #10419.

All 31 files here are contained in #10419. The six files that are only in #10419 are the headless half:

  • src/shared/terminal-theme-resolution.ts
  • src/shared/runtime-mobile-terminal-theme.ts (+ test)
  • src/main/runtime/orca-runtime.ts
  • src/main/runtime/headless-mobile-terminal-theme.test.ts
  • src/renderer/src/runtime/sync-runtime-graph.ts

Intended order: this PR first (relocate the theme catalog to src/shared and add the mobile picker), then #10419 rebased down to just those six files (headless/SSH hosts pushing their configured theme to mobile tabs).

Reviewing them in that order avoids reading the same 31-file relocation twice. If the relocation itself is the objection, say so here and I'll close both rather than have you review either.

kargnas added a commit to kargnas/orca that referenced this pull request Sep 8, 2026
휴대폰 테마 선택에서 기존 Orca 기본 색상을 재사용하도록 기본 팔레트를 shared로 옮겼다. 데스크톱 카탈로그의 색상과 이름은 유지했다.

Related: stablyai/orca#10421
Tested: 터미널 테마와 대비 테스트 23개; pnpm tc
@bbingz
bbingz force-pushed the feat/mobile-terminal-theme-picker branch from 61f45c9 to a1dcff2 Compare September 8, 2026 22:50

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants