Michael Chihlas
0156aae684
Multi-step UX refactor of the assistant chat session screen, run via the $impeccable skill. Heuristic score moved 24/40 → 33/40 (+9), with the biggest gains on Aesthetic & Minimalist (1→3), Consistency & Standards (1→3), and Recognition Rather Than Recall (2→4). Distill — chat region: - Remove the "Suggested checks" chip strip + selected-chip detail card; the TaskLane is the single canonical home for "what to do next" - Add an inline Next steps · N pending cue above the latest action-bearing AI bubble (anchors attention without duplicating the lane's items) - Link banner ↔ script-panel lifecycle: collapsing or dismissing the ProposalBanner now also hides the InlineNoTemplateDialog / TemplateMatchPanel - Drop backdrop-blur on the handoff-context overlay (DESIGN-SYSTEM hard rule) Quieter — drop decoration overshoot: - Remove 3px side stripes on TaskLane done cards, all 6 ProposalBanner modes, WhatWeKnowItem fact rows - Drop bg-gradient surfaces on WhatWeKnow + every ProposalBanner mode - Drop 2px accent borderTop on the TaskLane header - Replace bordered avatar boxes in banners with inline state-colored icons - Each surface now uses a single decoration channel (top border + inline icon) Layout: - Header consolidates to Resolve + Escalate + ⋯ kebab; Context, New Ticket, Update Ticket, Pause now live behind the kebab on desktop, with feature parity in the existing mobile overflow menu - Messages column anchors to max-w-3xl mx-auto to match the composer - Chat bubbles drop from rounded-2xl to rounded-xl for vocabulary alignment Typeset: - Unify text sizing from 14 distinct sizes (with sub-pixel oddities and rem/px duplicates) to a 5-step scale: 10px / 11px / text-xs / 13px / text-sm WhatWeKnow collapsible: - Header is now a toggle; section body hides when collapsed - Auto-collapses on first render when facts ≥ 5 so Questions / Diagnostic Checks stay above the fold - Engineer's choice persists in sessionStorage per session and beats the auto-collapse heuristic on subsequent renders - key=activeChatId on both render sites resets state cleanly across sessions Polish: - Split MessageCircleQuestion into Pencil (question Answer CTA, write affordance) + HelpCircle (per-check Explain toggle, universal help icon) — same icon for two different jobs was a discoverability bug - Drop redundant text-xs from font-sans text-[0.625rem] / text-[0.6875rem] double-class definitions; the more-specific size always wins TaskLane keyboard flow: - Enter submits and auto-advances to the next pending task; Shift+Enter inserts a newline (consistent across question and action textareas — paste events don't fire keydown, so paste-then-Enter still works as expected) - Esc cancels (same as the Cancel button) - After the last pending task is submitted, focus moves to the Send Responses button so the engineer can fire the whole batch with one more keystroke - Subtle hint row under each open input teaches the shortcut Type-check, lint, and build all clean. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
/**
|
|
* ChatTabStrip — two-tab strip at the top of the chat region:
|
|
* [Chat] [Script Builder ●]
|
|
*
|
|
* Visibility is controlled by the parent (AssistantChatPage) — this
|
|
* component renders whenever it's mounted. The parent decides whether
|
|
* to mount it based on fix state.
|
|
*
|
|
* Tab switching uses onChange; the parent toggles display:none on the
|
|
* tab contents so state is preserved across switches.
|
|
*/
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export type ChatTab = 'chat' | 'script_builder'
|
|
|
|
export interface ChatTabStripProps {
|
|
active: ChatTab
|
|
onChange: (tab: ChatTab) => void
|
|
/** When true, shows the amber indicator dot on the Script Builder tab. */
|
|
scriptBuilderHasProgress?: boolean
|
|
}
|
|
|
|
export function ChatTabStrip({
|
|
active, onChange, scriptBuilderHasProgress,
|
|
}: ChatTabStripProps) {
|
|
return (
|
|
<div
|
|
role="tablist"
|
|
className="flex gap-1 px-4 pt-2 border-b border-default bg-bg-sidebar"
|
|
>
|
|
<TabButton
|
|
label="Chat"
|
|
active={active === 'chat'}
|
|
onClick={() => onChange('chat')}
|
|
/>
|
|
<TabButton
|
|
label="Script Builder"
|
|
active={active === 'script_builder'}
|
|
onClick={() => onChange('script_builder')}
|
|
indicator={scriptBuilderHasProgress}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TabButton({
|
|
label, active, onClick, indicator,
|
|
}: {
|
|
label: string
|
|
active: boolean
|
|
onClick: () => void
|
|
indicator?: boolean
|
|
}) {
|
|
return (
|
|
<button
|
|
role="tab"
|
|
aria-selected={active}
|
|
onClick={onClick}
|
|
className={cn(
|
|
'relative px-3 py-[7px] text-xs font-medium rounded-t-md transition-colors',
|
|
'border-b-2 -mb-px',
|
|
active
|
|
? 'text-heading border-accent bg-bg-page'
|
|
: 'text-muted-foreground border-transparent hover:text-primary hover:bg-white/[0.08]',
|
|
)}
|
|
>
|
|
{label}
|
|
{indicator && (
|
|
<span
|
|
role="img"
|
|
aria-label="unsaved progress"
|
|
className="ml-1.5 inline-block w-1.5 h-1.5 rounded-full bg-warning align-middle"
|
|
/>
|
|
)}
|
|
</button>
|
|
)
|
|
}
|
|
|
|
export default ChatTabStrip
|