update colors and transparency for Wave AI and secrets config

[sawka]

No description provided.

[coderabbitai]

Walkthrough

This PR updates the UI color palette across multiple frontend components from gray/accent-based tokens to zinc-based tokens for visual consistency. It extracts the RestoreBackupModal component into a dedicated file, removes the entire SecretStore feature (including SecretStoreViewModel and SecretStoreView components), and refactors the handleBlur function in aipanelinput.tsx with updated background styling. Minor formatting adjustments and a memoization enhancement are included in secretscontent.tsx.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Areas requiring extra attention:

• Feature removal impact: Verify that removal of SecretStoreViewModel and SecretStoreView (from block.tsx registry and blockutil.tsx utilities) does not break any existing workflows or leave dangling references elsewhere in the codebase.
• handleBlur refactor in aipanelinput.tsx: The refactored blur handler changes the background styling from conditional (bg-accent-900/50 or bg-gray-800) to fixed (bg-zinc-800/50), and alters the dependency array to [model]. Confirm this behavioral change aligns with intended UX and doesn't introduce focus-handling regressions.
• RestoreBackupModal extraction: Ensure the newly created restorebackupmodal.tsx file is properly integrated and all telemetry events and model method calls (restoreBackup, closeRestoreBackupModal) are correctly wired.
• Color token consistency: While most styling changes are repetitive palette swaps, verify that all gray/accent references intended for zinc updates have been caught and that no color tokens were unintentionally left behind.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check	❓ Inconclusive	No pull request description was provided by the author, making it impossible to assess relevance to the changeset.	Add a brief description explaining the color scheme migration from gray to zinc and its visual impact on the Wave AI panel and secrets configuration views.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main changes: updating color tokens from gray to zinc palette and adjusting transparency across Wave AI components and secrets configuration UI.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch sawka/fix-colors

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3caba75 and 6bf02e0.

📒 Files selected for processing (19)

• frontend/app/aipanel/aidroppedfiles.tsx (2 hunks)
• frontend/app/aipanel/aifeedbackbuttons.tsx (3 hunks)
• frontend/app/aipanel/aimessage.tsx (2 hunks)
• frontend/app/aipanel/aimode.tsx (5 hunks)
• frontend/app/aipanel/aipanel.tsx (2 hunks)
• frontend/app/aipanel/aipanelheader.tsx (2 hunks)
• frontend/app/aipanel/aipanelinput.tsx (2 hunks)
• frontend/app/aipanel/aitooluse.tsx (6 hunks)
• frontend/app/aipanel/restorebackupmodal.tsx (1 hunks)
• frontend/app/block/block.tsx (0 hunks)
• frontend/app/block/blockutil.tsx (0 hunks)
• frontend/app/element/streamdown.tsx (1 hunks)
• frontend/app/element/tooltip.tsx (3 hunks)
• frontend/app/onboarding/fakechat.tsx (5 hunks)
• frontend/app/suggestion/suggestion.tsx (1 hunks)
• frontend/app/view/secretstore/secretstore-model.ts (0 hunks)
• frontend/app/view/secretstore/secretstore.tsx (0 hunks)
• frontend/app/view/waveconfig/secretscontent.tsx (13 hunks)
• frontend/app/workspace/workspace.tsx (2 hunks)

💤 Files with no reviewable changes (4)

• frontend/app/block/block.tsx
• frontend/app/view/secretstore/secretstore-model.ts
• frontend/app/view/secretstore/secretstore.tsx
• frontend/app/block/blockutil.tsx

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-10-14T06:30:54.763Z

Learnt from: sawka
Repo: wavetermdev/waveterm PR: 2430
File: frontend/app/aipanel/aimessage.tsx:137-144
Timestamp: 2025-10-14T06:30:54.763Z
Learning: In `frontend/app/aipanel/aimessage.tsx`, the `AIToolUseGroup` component splits file operation tool calls into separate batches (`fileOpsNeedApproval` and `fileOpsNoApproval`) based on their approval state before passing them to `AIToolUseBatch`. This ensures each batch has homogeneous approval states, making group-level approval handling valid.

Applied to files:

• frontend/app/aipanel/aimessage.tsx
• frontend/app/aipanel/aidroppedfiles.tsx
• frontend/app/aipanel/aitooluse.tsx
• frontend/app/aipanel/restorebackupmodal.tsx

📚 Learning: 2025-10-21T05:09:26.916Z

Learnt from: sawka
Repo: wavetermdev/waveterm PR: 2465
File: frontend/app/onboarding/onboarding-upgrade.tsx:13-21
Timestamp: 2025-10-21T05:09:26.916Z
Learning: In the waveterm codebase, clientData is loaded and awaited in wave.ts before React runs, ensuring it is always available when components mount. This means atoms.client will have data on first render.

Applied to files:

• frontend/app/view/waveconfig/secretscontent.tsx
• frontend/app/aipanel/aitooluse.tsx

🧬 Code graph analysis (1)

frontend/app/aipanel/aipanelinput.tsx (1)

frontend/app/aipanel/waveai-focus-utils.ts (1)

• waveAIHasFocusWithin (15-42)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: Analyze (javascript-typescript)
• GitHub Check: Analyze (go)
• GitHub Check: Build for TestDriver.ai

🔇 Additional comments (35)

frontend/app/workspace/workspace.tsx (1)

75-75: LGTM! Color token updated to zinc.

The hover background color has been updated from gray-500/20 to zinc-500/20, which aligns with the PR's objective to standardize the color palette across the UI.

frontend/app/suggestion/suggestion.tsx (1)

313-313: Zinc input background change looks good

The suggestion query input now uses bg-zinc-900, which aligns with the rest of the updated zinc-based theming without affecting behavior.

frontend/app/element/streamdown.tsx (1)

29-31: Non-code CodePlain zinc background is consistent

Switching non-code spans to bg-zinc-800/80 keeps contrast and matches the new zinc palette; no functional impact.

frontend/app/aipanel/aipanelheader.tsx (2)

44-47: Widget Access toggle track theming is fine

Updating the track colors to bg-accent-600 / bg-zinc-600 keeps the ON/OFF contrast clear and aligns with zinc theming without changing behavior.

---

55-57: Label spacing update keeps toggle text readable

The new ml/mr values for the ON/OFF label still keep the text clear on each side of the thumb; no functional change.

frontend/app/aipanel/aidroppedfiles.tsx (2)

25-25: Dropped file card background zinc update is safe

bg-zinc-700 for the tile background matches the rest of the panel theming and doesn’t alter behavior.

---

43-44: Preview/icon placeholder zinc background is consistent

Using bg-zinc-600 behind the icon/preview keeps the visual hierarchy with no functional changes.

frontend/app/aipanel/aipanel.tsx (2)

70-75: KeyCap zinc theming looks good

The shortcut keycaps now use bg-zinc-700 / border-zinc-600, which keeps readability and fits the updated palette.

---

483-490: Panel background and drag-over zinc styling are correct

Changing the base panel to bg-zinc-900/70 and the drag-over state to bg-zinc-800 border-accent cleanly updates the theme without impacting focus, drag/drop, or inert behavior.

frontend/app/element/tooltip.tsx (3)

36-37: TooltipInner prop typing tweak is harmless

Switching to Omit<TooltipProps, "disable"> keeps the intended shape (no disable inside) and doesn’t affect runtime behavior.

---

132-133: Tooltip bubble zinc background is appropriate

Using bg-zinc-800 for the tooltip surface matches the rest of the zinc theming; Floating UI integration and interactions remain unchanged.

---

153-158: Disabled tooltip wrapper remains a no-op container

The disabled path still just renders a div with the provided class/style/click handler and children, so runtime behavior is unchanged aside from styling.

frontend/app/aipanel/aimessage.tsx (2)

70-76: User file tile zinc backgrounds are consistent

Moving the user file container and preview to bg-zinc-700 / bg-zinc-600 aligns with AIDroppedFiles styling and keeps the same layout and behavior.

---

223-228: User message bubble zinc background works well

The user bubble now uses bg-zinc-700/60 text-white, preserving contrast and max-width while matching the updated panel theme. No changes to message rendering or feedback behavior.

frontend/app/aipanel/aifeedbackbuttons.tsx (3)

48-52: Thumbs-up hover zinc color is fine

The non-active thumbs-up button now uses hover:bg-zinc-700, matching the new palette with no behavior changes.

---

60-64: Thumbs-down hover zinc color is fine

Same zinc hover styling for the thumbs-down button keeps the set visually consistent.

---

72-77: Copy button hover zinc color is fine

The copy button’s non-active hover state now matches the other feedback buttons and doesn’t affect clipboard behavior.

frontend/app/onboarding/fakechat.tsx (4)

96-101: FakeToolCall zinc theming is consistent and non‑breaking

Only the palette is adjusted (bg-zinc-800, border-gray-700) with existing layout and semantics preserved. Looks good.

---

111-113: FakeUserMessage bubble background update is safe

Switching to bg-zinc-700 keeps contrast with white text and doesn’t affect layout or behavior.

---

204-221: Header and context toggle palette shift is coherent

Using bg-zinc-900 for the header and bg-accent-600 for the toggle aligns with the rest of the zinc theming and keeps affordances clear.

---

262-265: Chat scroll area background matches header

bg-zinc-900 for the scroll area aligns with the header background and keeps content contrast intact.

frontend/app/aipanel/aipanelinput.tsx (2)

71-84: Blur handling correctly avoids stealing focus from Wave AI

The blur handler now:

• Early‑returns when relatedTarget is null.
• Skips when the new focus target is still within the Wave AI panel via waveAIHasFocusWithin.
• Falls back to model.requestNodeFocus() only when focus actually leaves Wave AI.

This is clear and avoids unnecessary focus jumps outside the panel.

---

146-147: Textarea background simplification is straightforward

Using a fixed bg-zinc-800/50 background keeps the visual language consistent with the rest of the panel and doesn’t change any focus or submit behavior.

frontend/app/aipanel/aimode.tsx (3)

30-33: AIModeMenuItem disabled/active colors are clear

text-zinc-500 for disabled and text-zinc-300 hover:bg-zinc-700 for active states preserve readability and hover affordance while matching zinc theming.

---

112-115: computeWaveCloudSections signature reflow is cosmetic

Splitting params across multiple lines improves readability without changing behavior.

---

210-211: Dropdown and panel zinc theming is consistent

• Button background toggles between bg-zinc-700 and bg-zinc-800/50 hover:bg-zinc-700.
• Panel uses bg-zinc-800 border-zinc-600.
• Configure button hover state uses hover:bg-zinc-700.

All of these are coherent with the rest of the AI panel and do not alter interaction logic.

Also applies to: 240-240, 290-291

frontend/app/view/waveconfig/secretscontent.tsx (6)

7-7: Case‑insensitive sorting of secrets via sortedSecretNames is correct

• sortedSecretNames clones the array ([...secretNames]) before sorting, so atoms/state aren’t mutated.
• The comparator lowercases both sides, giving a predictable, case‑insensitive order.
• Using sortedSecretNames only for the list view keeps other logic (length checks, selection) unchanged.
• Adding SecretsContent.displayName is a nice touch for debugging/React DevTools.

This is a clean, behavior‑preserving improvement.

Also applies to: 327-329, 376-379, 395-395

---

34-36: Loading and empty states use zinc theming cleanly

• Spinner and message now use text-zinc-400, improving consistency with zinc‑based panels.
• EmptyState panel (bg-zinc-800/50, zinc text/icon colors) reads clearly and centers content without changing control flow.

No behavioral impact, just improved visual coherence.

Also applies to: 43-47

---

61-67: CLIInfoBubble styling matches the new panel look

bg-zinc-800/50 and zinc text colors fit the surrounding secrets panel, and the mono command block remains readable and distinct.

---

86-104: SecretListView list and “Add New Secret” row look good

• Container uses a simple flex/rounded layout with zinc dividers and hover backgrounds.
• The “Add New Secret” row gets a clear clickable affordance via hover:bg-zinc-700/50 and a top border.

The UX remains straightforward, with no logic changes.

Also applies to: 98-99

---

140-151: AddSecretForm zinc backgrounds keep validation behavior intact

• Wrapping form in bg-zinc-800/50 aligns it with the rest of the config panel.
• Inputs/textareas use bg-zinc-800 with border-zinc-600 and the existing error border swap, so validation feedback is unchanged.
• Helper text moved to text-zinc-400 for consistency.
• Cancel button zinc colors (bg-zinc-700 / hover:bg-zinc-600) are clear while still respecting the disabled states.

Overall, this is a safe visual refresh.

Also applies to: 157-157, 165-165, 175-175

---

217-218: SecretDetailView styling updates preserve clarity and flows

• Detail panel wraps in bg-zinc-800/50, matching AddSecretForm.
• Editable textarea uses zinc background/border while keeping focus and disabled behavior unchanged.
• Helper text around “Show Secret” uses zinc tones and retains the existing loading vs. button flow.
• The bottom Cancel button zinc colors mirror the add form, maintaining consistency between create/edit paths.

No functional regressions evident.

Also applies to: 232-232, 244-248, 283-284

frontend/app/aipanel/restorebackupmodal.tsx (1)

1-97: RestoreBackupModal extraction and status handling look solid

• Component cleanly pulls status and error from the model and branches into success, error, and confirmation flows.
• handleConfirm / handleCancel both record telemetry and delegate to model methods; cancel/close paths are clear.
• While processing, OK/Cancel are correctly disabled via okDisabled/cancelDisabled, preventing double submits.
• The timestamp helper and conditional render on toolData.runts keep the main copy readable.

Overall this is a good modularization of the restore‑backup UI with sensible state handling.

frontend/app/aipanel/aitooluse.tsx (2)

11-12: RestoreBackupModal integration keeps the revert flow intact

Importing <RestoreBackupModal> from its own module and rendering it behind showRestoreModal preserves the existing “Revert File” UX while improving separation of concerns. The conditional restoreBackupModalToolCallId === toolData.toolcallid gate remains the same.

Also applies to: 342-343

---

185-185: Zinc theming for tool use and progress containers is consistent

• AIToolUseBatch, AIToolUse, and AIToolProgress now share bg-zinc-800/60 border-zinc-700, which reads well in the AI panel.
• “Revert File” and “Show Diff” buttons use zinc borders/hover backgrounds while keeping existing click handlers and telemetry intact.

These are clean visual updates without behavioral impact.

Also applies to: 297-297, 315-320, 326-330, 357-365

---

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 and usage tips.}