Skip to content

refactor: composer surface polish, header layout cleanup, and model selector relocation#41

Merged
batmn-dev merged 3 commits intomainfrom
make-it-cleaaaaaan
Feb 21, 2026
Merged

refactor: composer surface polish, header layout cleanup, and model selector relocation#41
batmn-dev merged 3 commits intomainfrom
make-it-cleaaaaaan

Conversation

@batmn-dev
Copy link
Owner

@batmn-dev batmn-dev commented Feb 21, 2026

Summary

  • Align the composer surface with ChatGPT-style shadow tokens and refine prompt suggestion styles
  • Move the model selector from the header into the multi-chat input area and simplify layout
  • Add cursor-pointer to the shared button base so all buttons get it by default

Composer & Styling

  • Apply shadow-composer and composer-bg CSS tokens to PromptInput instead of generic border/shadow-xs
  • Darken --secondary to oklch(0.30) for better contrast in dark mode
  • Bump header height from 52px to 56px
  • Switch prompt suggestions from outline/ghost to secondary/ghost with hover:bg-secondary
  • Remove manual cursor-pointer from suggestions (now inherited from button base)
  • Remove the "Writing" suggestion category

Header & Layout

  • Convert header from sticky to fixed positioning
  • Switch app shell from h-svh to h-dvh
  • Simplify the header three-column layout structure
  • Remove ModelSelectorHeader component and header-level model selector
  • Update scroll-area calc to account for fixed header height

Multi-Model State

  • Delete MultiModelSelectionProvider context — localize multi-model selection state into MultiChat component
  • Add ModelSelector directly inside MultiChatInput with new onSelectedModelIdsChange prop
  • Adjust multi-conversation top padding for fixed header clearance (pt-4 -> pt-20)

Cleanup

  • Remove obsolete .agents/ plan and skill files superseded on main

Test Plan

  • Verify composer input has correct shadow/background in light and dark mode
  • Verify all buttons show pointer cursor on hover
  • Verify prompt suggestions use correct variant and hover styles
  • Verify header stays fixed at top during scroll
  • Verify model selector works in multi-chat input area
  • Verify single-model and multi-model modes still function correctly
  • Run bun run lint and bun run typecheck with no regressions

@vercel
Copy link

vercel bot commented Feb 21, 2026

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

Project Deployment Actions Updated (UTC)
not-a-wrapper Ready Ready Preview, Comment Feb 21, 2026 2:23am

Copy link

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

No issues found across 7 files

@greptile-apps
Copy link

greptile-apps bot commented Feb 21, 2026

Greptile Summary

This PR refactors the composer surface styling to align with ChatGPT's design tokens and consolidates button cursor behavior. The changes improve visual consistency in both light and dark modes while simplifying the component styling hierarchy.

Key Changes

  • Composer styling: Migrated from generic border/shadow-xs to ChatGPT-aligned shadow-composer utility and --composer-bg CSS tokens in PromptInput
  • Button base enhancement: Added cursor-pointer to the shared button variants, removing the need for manual cursor styling in individual components
  • Dark mode contrast: Darkened --secondary from oklch(0.32) to oklch(0.30) for better readability
  • Prompt suggestions: Switched from outline/ghost to secondary/ghost variants with hover:bg-secondary for consistent hover states
  • Configuration cleanup: Removed "Writing" suggestion category from SUGGESTIONS array
  • Documentation updates: Expanded ChatGPT design token reference with detailed shadow strategy analysis; added PR creation guidelines and timeline estimate restrictions to AGENTS.md and CLAUDE.md

All changes are cosmetic refactoring with no functional impact. The CSS tokens are properly defined in globals.css with mode-aware values.

Confidence Score: 5/5

  • This PR is safe to merge — all changes are cosmetic styling refactoring with no functional modifications
  • The refactoring is well-executed with proper CSS token definitions, consistent application across components, and no breaking changes. All modified files show clean, focused changes that align with the stated objectives.
  • No files require special attention

Important Files Changed

Filename Overview
components/ui/button.tsx Added cursor-pointer to button base variants for consistent pointer cursor across all buttons
components/ui/prompt-input.tsx Switched from generic border/shadow to ChatGPT-aligned shadow-composer and --composer-bg CSS tokens
components/ui/prompt-suggestion.tsx Changed variant from outline/ghost to secondary/ghost, updated hover from bg-accent to bg-secondary, removed manual cursor-pointer
app/components/chat-input/chat-input.tsx Removed redundant bg-popover, shadow-xs, and backdrop-blur-xl classes from PromptInput (now handled by component defaults)
app/globals.css Darkened --secondary from oklch(0.32) to oklch(0.30) in dark mode for better contrast
lib/config.ts Removed "Writing" suggestion category and cleaned up unused Note01Icon import

Last reviewed commit: 9cd9a98

@batmn-dev batmn-dev changed the title feat: PayClaw integration, unified reasoning UI, markdown overhaul, and UI polish refactor: composer surface polish, header layout cleanup, and model selector relocation Feb 21, 2026
Copy link

@cubic-dev-ai cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

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

1 issue found across 2 files (changes from recent commits).

Prompt for AI agents (all issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="AGENTS.md">

<violation number="1" location="AGENTS.md:132">
P3: Fix the typo in the new guideline so the documentation reads correctly (“appropriate”).</violation>
</file>

Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.

AGENTS.md Outdated

## No Timeline Estimates

**Never include time estimates, durations, or effort assessments** in plans, summaries, or implementation outputs. This includes phrases like "~30 minutes", "2-3 hours", "Phase 1 (Day 1)", "Quick win", or any similar timeline/effort language. AI-generated timeline estimates are unreliable and misleading. Only include difficulty complexity risk estimates when appropiate.
Copy link

@cubic-dev-ai cubic-dev-ai bot Feb 21, 2026

Choose a reason for hiding this comment

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

P3: Fix the typo in the new guideline so the documentation reads correctly (“appropriate”).

Prompt for AI agents
Check if this issue is valid — if so, understand the root cause and fix it. At AGENTS.md, line 132:

<comment>Fix the typo in the new guideline so the documentation reads correctly (“appropriate”).</comment>

<file context>
@@ -127,6 +127,10 @@ When the user asks to "create a prompt" (or similar), return the prompt directly
 
+## No Timeline Estimates
+
+**Never include time estimates, durations, or effort assessments** in plans, summaries, or implementation outputs. This includes phrases like "~30 minutes", "2-3 hours", "Phase 1 (Day 1)", "Quick win", or any similar timeline/effort language. AI-generated timeline estimates are unreliable and misleading. Only include difficulty complexity risk estimates when appropiate.
+
 ## Critical Patterns
</file context>
Suggested change
**Never include time estimates, durations, or effort assessments** in plans, summaries, or implementation outputs. This includes phrases like "~30 minutes", "2-3 hours", "Phase 1 (Day 1)", "Quick win", or any similar timeline/effort language. AI-generated timeline estimates are unreliable and misleading. Only include difficulty complexity risk estimates when appropiate.
**Never include time estimates, durations, or effort assessments** in plans, summaries, or implementation outputs. This includes phrases like "~30 minutes", "2-3 hours", "Phase 1 (Day 1)", "Quick win", or any similar timeline/effort language. AI-generated timeline estimates are unreliable and misleading. Only include difficulty complexity risk estimates when appropriate.
Fix with Cubic

batmn-dev and others added 3 commits February 20, 2026 21:20
… up suggestions

- Apply shadow-composer and composer-bg tokens to PromptInput instead of generic border/shadow-xs
- Use inverted edge shadow strategy (outer dark edge light, inset white glow dark)
- Darken --secondary to oklch(0.30) for better contrast
- Switch prompt suggestions from outline/ghost to secondary variant
- Remove "Writing" suggestion category
- Update design token docs with confirmed light/dark shadow details

Co-authored-by: Cursor <cursoragent@cursor.com>
…ion styles

Move cursor-pointer into the shared button variant so all buttons get it
by default. Switch prompt suggestions to ghost variant with hover:bg-secondary
for a subtler visual treatment.

Co-authored-by: Cursor <cursoragent@cursor.com>
@batmn-dev batmn-dev merged commit 72896d3 into main Feb 21, 2026
2 of 3 checks passed
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