mirror of
https://github.com/davidkaya/aryx.git
synced 2026-08-29 22:17:13 +02:00
David KayaandCopilot
f8b4c3cf4f
Complete visual overhaul of the Aryx application with the Luminous Depth design language — blue-tinted dark surfaces, brand gradient accents, glass-morphism effects, and refined typography. Design Foundation: - New color system with CSS custom properties for all surfaces, borders, text, accents, and status colors - Typography: Outfit (display), DM Sans (body), JetBrains Mono (code) - Animations: accent-flow, thinking-wave, ambient-glow - Utility classes: glass-surface, glow-border, brand-gradient-bg/text - Light theme with cool-tinted whites and blue-tinted shadows Components Updated: - UI primitives (TextInput, SelectInput, ToggleSwitch, FormField, etc.) - AppShell with ambient glow background - Sidebar with brand gradient selection and accent-flow running bars - ChatPane with semantic phase tinting and gradient user avatars - WelcomePane with nebula background and motion entrance animations - All chat banners (Approval, UserInput, PlanReview, MCP Auth, etc.) - ActivityPanel and RunTimeline with glass-surface cards - Settings panels, modals, and editor shells - TerminalPanel with harmonized ANSI palette - PatternGraph nodes with glass-surface styling - MarkdownComposer toolbar Zero hardcoded zinc/indigo color classes remain in renderer components. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
72 lines
3.0 KiB
TypeScript
72 lines
3.0 KiB
TypeScript
import { useCallback } from 'react';
|
|
import { ClipboardList, X } from 'lucide-react';
|
|
|
|
import { MarkdownContent } from '@renderer/components/MarkdownContent';
|
|
import type { PendingPlanReviewRecord } from '@shared/domain/planReview';
|
|
|
|
export function PlanReviewBanner({
|
|
planReview,
|
|
onDismiss,
|
|
}: {
|
|
planReview: PendingPlanReviewRecord;
|
|
onDismiss: (planReview: PendingPlanReviewRecord) => void;
|
|
}) {
|
|
const handleDismiss = useCallback(() => {
|
|
onDismiss(planReview);
|
|
}, [planReview, onDismiss]);
|
|
|
|
return (
|
|
<div className="rounded-xl border border-[var(--color-glass-border)] border-l-4 border-l-[var(--color-status-success)] bg-[var(--color-glass)] px-4 py-3" role="alert">
|
|
{/* Header */}
|
|
<div className="flex items-start gap-2.5">
|
|
<ClipboardList className="mt-0.5 size-4 shrink-0 text-[var(--color-status-success)]" />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-[13px] font-semibold text-[var(--color-status-success)]">Plan ready for review</span>
|
|
<span className="rounded-full bg-[var(--color-status-success)]/15 px-2 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-[var(--color-status-success)]">
|
|
Plan mode
|
|
</span>
|
|
</div>
|
|
<button
|
|
aria-label="Dismiss plan"
|
|
className="rounded p-0.5 text-[var(--color-text-muted)] transition-all duration-200 hover:bg-[var(--color-surface-3)]/50 hover:text-[var(--color-text-primary)]"
|
|
onClick={handleDismiss}
|
|
type="button"
|
|
>
|
|
<X className="size-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
{planReview.agentName && (
|
|
<div className="mt-1 text-[11px] text-[var(--color-text-secondary)]">
|
|
Agent: <span className="text-[var(--color-text-primary)]">{planReview.agentName}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Summary */}
|
|
{planReview.summary && (
|
|
<p className="mt-2 text-[13px] leading-relaxed text-[var(--color-text-primary)]">
|
|
{planReview.summary}
|
|
</p>
|
|
)}
|
|
|
|
{/* Plan content (rendered markdown) */}
|
|
{planReview.planContent && (
|
|
<div className="mt-3 max-h-80 overflow-y-auto rounded-lg border border-[var(--color-border-subtle)] bg-[var(--color-surface-1)] p-3">
|
|
<MarkdownContent content={planReview.planContent} />
|
|
</div>
|
|
)}
|
|
|
|
{/* Guidance */}
|
|
<p className="mt-3 text-[12px] leading-relaxed text-[var(--color-text-secondary)]">
|
|
Send a follow-up message to proceed — e.g.{' '}
|
|
<span className="text-[var(--color-text-primary)]">"implement the plan"</span>,{' '}
|
|
<span className="text-[var(--color-text-primary)]">"adjust step 3"</span>, or ask for a different approach.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|