feat: inline Settings & History panels, fix tool-call contrast, add pill width scale#49
Open
okletstryitnow wants to merge 10 commits intolcoutodemos:mainfrom
Open
feat: inline Settings & History panels, fix tool-call contrast, add pill width scale#49okletstryitnow wants to merge 10 commits intolcoutodemos:mainfrom
okletstryitnow wants to merge 10 commits intolcoutodemos:mainfrom
Conversation
…ent clipping UI Panel Refactoring: - Refactor Settings from createPortal popover to inline panel above main card - Refactor History (Recent Sessions) from createPortal popover to inline panel - Split SettingsPopover into SettingsContent (panel) + SettingsPopover (trigger) - Split HistoryPicker into HistoryContent (panel) + HistoryTrigger (trigger) - Panels and expanded chat are mutually exclusive (prevents overflow beyond PILL_HEIGHT=720px window) - Click-outside-to-close via data-*-panel / data-*-trigger attributes - Mutual exclusion: only one of Settings/History/Marketplace open at a time Settings Enhancements: - Add pill width scale setting (75-150%) with live slider - Add Full Width toggle synced with slider - Add terminal preference picker (Auto/Terminal.app/Ghostty/iTerm2) - Persist all settings to localStorage Visual Fixes: - Fix tool-call text contrast: textMuted → textTertiary for Result badges, running status, and collapse header (was invisible against dark background) - Fix right-edge content clipping: asymmetric padding (pl-4 pr-5) to compensate for 4px custom scrollbar Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The terminal detection IPC is not registered when terminal-launcher module is not included. Without optional chaining, the undefined function call crashes the renderer when opening Settings. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
The width slider is inside the Settings panel — closing settings on drag start made the slider unusable. Now only History panel closes on scale-start; Settings stays open so users can adjust width live. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Settings panel width is frozen at drag-start and smoothly transitions to the new size on release (0.2s ease-out). Prevents frame-by-frame width recalculation that caused visual jitter during slider interaction. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…freeze Replace unreliable pointerUp-based freeze mechanism with a simple CSS transition (0.12s linear). CSS handles rapid value changes gracefully by smoothly interpolating toward the latest target — no event-based state management needed. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Replace dynamic width (tied to pillScale) with a fixed 602px width (equivalent to 140% of collapsed card base). Eliminates all slider- related jitter — the panel never resizes during width adjustment. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove contentWidth/cardWidth caps (dynamic window handles this) - Remove bodyMaxHeight compression for marketplace - Revert circle button spacing to original (56px/112px) - Marketplace no longer collapses chat when opening - History panel minHeight=maxHeight prevents loading size jump - Add paddingBottom: var(--clui-dock-margin) for Dock clearance - Fix drag code: window.innerHeight instead of hardcoded PILL_HEIGHT Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Remove dead windowHeight variable
- Extract PANEL_TRANSITION constant (was inline-duplicated)
- Remove dead ternary (expandedUI ? 15 : 15)
- Fix as-any casts in TerminalPicker with proper type narrowing
- Fix slider pointerUp leak with window-level {once:true} listener
- saveSettings reads from get() after set() for consistency
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Refactors the Settings and Recent Sessions (History) panels from
createPortal-based popovers into inline panels rendered above the main card — matching the existing Marketplace panel pattern. Also fixes tool-call text visibility and adds a configurable pill width scale.What changed
Panel Refactoring:
SettingsContent(panel body) +SettingsPopover(trigger button) — renders inline above card with glass-surface stylingHistoryContent+HistoryTrigger— same inline patternAnimatePresencewithmode="wait"for clean panel-to-panel transitionsdata-*-panel/data-*-triggerattributesSettings Enhancements:
Visual Fixes:
textMuted→textTertiaryfor Result badges, "running..." status, and collapse header — was invisible against dark background (~1.3:1 → ~3.4:1 contrast ratio)pl-4 pr-5) compensates for 4px custom scrollbarminHeight=maxHeightto prevent loading-state size jumpCode Quality (from pre-PR audit):
PANEL_TRANSITIONconstant (was duplicated inline)as anycasts with proper TypeScript narrowingpointerUpleak (window-level listener with{once: true})saveSettingsreads from store afterset()for consistency--clui-dock-margin(injected from main process)Why
The portal-based popovers were inconsistent with the Marketplace's inline pattern, had complex position-calculation logic, and couldn't benefit from the content column's centering. The inline approach is simpler, more consistent, and works naturally with the dynamic window sizing (see companion PR).
The text contrast fix addresses a real accessibility issue — tool-call results were literally invisible in dark mode. The
textMutedtoken (#353530) oncontainerBg(#242422) has a contrast ratio of ~1.3:1 (WCAG requires minimum 4.5:1).Related PRs
Test Plan
...in TabStrip → Settings panel opens inline, centered above card🤖 Generated with Claude Code