Redesign dashboard/screener UI for improved density and performance

- Add compact/dense CSS tokens for tighter layouts
- Add size prop to Button (default/compact) and Input (default/compact)
- Add density prop to Panel (normal/compact/dense)
- Add size prop to MetricCard (default/compact/inline)
- Create IndexCardRow component for horizontal metric display
- Create FilterChip component for removable filter tags
- Redesign Command Center with flat sections, reduced cards
- Tighten AppShell spacing (sidebar w-56, header mb-3, main space-y-4)

Design goals achieved:
- Denser, cleaner terminal-style layout
- Reduced card usage in favor of flat sections with dividers
- More space-efficient controls and metrics
- Better use of widescreen layouts

components/dashboard/index-card-row.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { memo } from "react";
+import { cn } from "@/lib/utils";
+
+type IndexCardProps = {
+  label: string;
+  value: string;
+  delta?: string;
+  positive?: boolean;
+};
+
+type IndexCardRowProps = {
+  cards: IndexCardProps[];
+  className?: string;
+};
+
+const IndexCard = memo(function IndexCard({
+  label,
+  value,
+  delta,
+  positive = true,
+}: IndexCardProps) {
+  return (
+    <div className="index-card">
+      <p className="label">{label}</p>
+      <p className="value">{value}</p>
+      {delta ? (
+        <p className={cn("delta", positive ? "positive" : "negative")}>
+          {delta}
+        </p>
+      ) : null}
+    </div>
+  );
+});
+
+export function IndexCardRow({ cards, className }: IndexCardRowProps) {
+  return (
+    <div className={cn("index-card-row", className)}>
+      {cards.map((card, index) => (
+        <IndexCard key={`${card.label}-${index}`} {...card} />
+      ))}
+    </div>
+  );
+}

components/dashboard/metric-card.tsx

@@ -1,4 +1,6 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
+
+type MetricCardSize = "default" | "compact" | "inline";
 
 type MetricCardProps = {
   label: string;
@@ -6,15 +8,79 @@ type MetricCardProps = {
   delta?: string;
   positive?: boolean;
   className?: string;
+  size?: MetricCardSize;
 };
 
-export function MetricCard({ label, value, delta, positive = true, className }: MetricCardProps) {
+export function MetricCard({
+  label,
+  value,
+  delta,
+  positive = true,
+  className,
+  size = "default",
+}: MetricCardProps) {
+  if (size === "inline") {
+    return (
+      <div className={cn("index-card", className)}>
+        <p className="label">{label}</p>
+        <p className="value">{value}</p>
+        {delta ? (
+          <p className={cn("delta", positive ? "positive" : "negative")}>
+            {delta}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (size === "compact") {
+    return (
+      <div
+        className={cn(
+          "min-w-0 border-t border-[color:var(--line-weak)] pt-2",
+          className,
+        )}
+      >
+        <p className="panel-heading text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">
+          {label}
+        </p>
+        <p className="mt-1 text-xl font-semibold text-[color:var(--terminal-bright)]">
+          {value}
+        </p>
+        {delta ? (
+          <p
+            className={cn(
+              "mt-1 text-[10px]",
+              positive ? "text-[#96f5bf]" : "text-[#ff9898]",
+            )}
+          >
+            {delta}
+          </p>
+        ) : null}
+      </div>
+    );
+  }
+
   return (
-    <div className={cn('min-w-0 border-t border-[color:var(--line-weak)] pt-3', className)}>
-      <p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">{label}</p>
-      <p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">{value}</p>
+    <div
+      className={cn(
+        "min-w-0 border-t border-[color:var(--line-weak)] pt-3",
+        className,
+      )}
+    >
+      <p className="panel-heading text-[11px] uppercase tracking-[0.18em] text-[color:var(--terminal-muted)]">
+        {label}
+      </p>
+      <p className="mt-2 text-3xl font-semibold text-[color:var(--terminal-bright)]">
+        {value}
+      </p>
       {delta ? (
-        <p className={cn('mt-2 text-xs', positive ? 'text-[#96f5bf]' : 'text-[#ff9898]')}>
+        <p
+          className={cn(
+            "mt-2 text-xs",
+            positive ? "text-[#96f5bf]" : "text-[#ff9898]",
+          )}
+        >
           {delta}
         </p>
       ) : null}

components/shell/app-shell.tsx

@@ -530,7 +530,7 @@ export function AppShell({
           className={cn(
             "hidden shrink-0 flex-col gap-4 border-r border-[color:var(--line-weak)] lg:flex",
             hasMounted ? "transition-[width,padding] duration-200" : "",
-            isSidebarCollapsed ? "w-16 pr-1" : "w-72 pr-4",
+            isSidebarCollapsed ? "w-16 pr-1" : "w-56 pr-4",
           )}
         >
           <div
@@ -655,7 +655,7 @@ export function AppShell({
         </aside>
 
         <div className="min-w-0 flex-1 pb-24 lg:pb-0">
-          <header className="relative mb-4 border-b border-[color:var(--line-weak)] pb-4 pr-16 sm:pb-5 sm:pr-20">
+          <header className="relative mb-3 border-b border-[color:var(--line-weak)] pb-3 pr-16 sm:pb-4 sm:pr-20">
             <div className="absolute right-4 top-4 z-10 sm:right-5 sm:top-5">
               <TaskNotificationsTrigger
                 unreadCount={notifications.unreadCount}
@@ -704,7 +704,7 @@ export function AppShell({
 
           <nav
             aria-label="Breadcrumb"
-            className="mb-6 overflow-x-auto border-b border-[color:var(--line-weak)] pb-3"
+            className="mb-4 overflow-x-auto border-b border-[color:var(--line-weak)] pb-2"
           >
             <ol className="flex min-w-max items-center gap-2 text-xs text-[color:var(--terminal-muted)] sm:min-w-0 sm:flex-wrap">
               {breadcrumbItems.map((item, index) => {
@@ -743,7 +743,7 @@ export function AppShell({
             </ol>
           </nav>
 
-          <main className="min-w-0 space-y-6">{children}</main>
+          <main className="min-w-0 space-y-4">{children}</main>
         </div>
       </div>
 

components/ui/button.tsx

@@ -1,25 +1,42 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
-type ButtonVariant = 'primary' | 'ghost' | 'danger' | 'secondary';
+type ButtonVariant = "primary" | "ghost" | "danger" | "secondary";
+type ButtonSize = "default" | "compact";
 
 type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   variant?: ButtonVariant;
+  size?: ButtonSize;
 };
 
 const variantMap: Record<ButtonVariant, string> = {
-  primary: 'border-[color:var(--line-strong)] bg-[color:var(--accent)] text-[#16181c] hover:bg-[color:var(--accent-strong)]',
-  secondary: 'border-[color:var(--line-weak)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel)]',
-  ghost: 'border-[color:var(--line-weak)] bg-transparent text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]',
-  danger: 'border-[color:var(--danger)] bg-[color:var(--danger-soft)] text-[#ffc9c9] hover:bg-[color:var(--danger)] hover:text-[#1e0d0d]'
+  primary:
+    "border-[color:var(--line-strong)] bg-[color:var(--accent)] text-[#16181c] hover:bg-[color:var(--accent-strong)]",
+  secondary:
+    "border-[color:var(--line-weak)] bg-[color:var(--panel-bright)] text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel)]",
+  ghost:
+    "border-[color:var(--line-weak)] bg-transparent text-[color:var(--terminal-bright)] hover:border-[color:var(--line-strong)] hover:bg-[color:var(--panel-soft)]",
+  danger:
+    "border-[color:var(--danger)] bg-[color:var(--danger-soft)] text-[#ffc9c9] hover:bg-[color:var(--danger)] hover:text-[#1e0d0d]",
 };
 
-export function Button({ className, variant = 'primary', ...props }: ButtonProps) {
+const sizeMap: Record<ButtonSize, string> = {
+  default: "min-h-11 px-3 py-2 text-sm gap-2",
+  compact: "min-h-8 px-2.5 py-1.5 text-xs gap-1.5",
+};
+
+export function Button({
+  className,
+  variant = "primary",
+  size = "default",
+  ...props
+}: ButtonProps) {
   return (
     <button
       className={cn(
-        'inline-flex min-h-11 items-center justify-center gap-2 rounded-xl border px-3 py-2 text-sm font-medium transition duration-200 disabled:cursor-not-allowed disabled:opacity-50',
+        "inline-flex items-center justify-center rounded-xl border font-medium transition duration-200 disabled:cursor-not-allowed disabled:opacity-50",
         variantMap[variant],
-        className
+        sizeMap[size],
+        className,
       )}
       {...props}
     />

components/ui/filter-chip.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+type FilterChipProps = {
+  label: string;
+  onRemove: () => void;
+  className?: string;
+};
+
+export function FilterChip({ label, onRemove, className }: FilterChipProps) {
+  return (
+    <span className={cn("filter-chip", className)}>
+      <span className="truncate">{label}</span>
+      <button
+        type="button"
+        onClick={onRemove}
+        className="remove"
+        aria-label={`Remove ${label} filter`}
+      >
+        <X className="size-3" />
+      </button>
+    </span>
+  );
+}

components/ui/input.tsx

@@ -1,13 +1,27 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
 
-type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+type InputSize = "default" | "compact";
 
-export function Input({ className, ...props }: InputProps) {
+type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  inputSize?: InputSize;
+};
+
+const sizeMap: Record<InputSize, string> = {
+  default: "min-h-11 px-3 py-2 text-sm",
+  compact: "min-h-8 px-2.5 py-1.5 text-xs",
+};
+
+export function Input({
+  className,
+  inputSize = "default",
+  ...props
+}: InputProps) {
   return (
     <input
       className={cn(
-        'min-h-11 w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2 text-sm text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_var(--focus-ring)]',
-        className
+        "w-full rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] text-[color:var(--terminal-bright)] outline-none transition placeholder:text-[color:var(--terminal-muted)] focus:border-[color:var(--line-strong)] focus:shadow-[0_0_0_3px_var(--focus-ring)]",
+        sizeMap[inputSize],
+        className,
       )}
       {...props}
     />

components/ui/panel.tsx

@@ -1,4 +1,7 @@
-import { cn } from '@/lib/utils';
+import { cn } from "@/lib/utils";
+
+type PanelVariant = "flat" | "surface";
+type PanelDensity = "normal" | "compact" | "dense";
 
 type PanelProps = {
   title?: string;
@@ -6,24 +9,82 @@ type PanelProps = {
   actions?: React.ReactNode;
   children: React.ReactNode;
   className?: string;
-  variant?: 'flat' | 'surface';
+  variant?: PanelVariant;
+  density?: PanelDensity;
 };
 
-export function Panel({ title, subtitle, actions, children, className, variant = 'flat' }: PanelProps) {
+const densityStyles: Record<PanelDensity, string> = {
+  normal: "",
+  compact: "",
+  dense: "",
+};
+
+const headerDensityStyles: Record<PanelDensity, string> = {
+  normal: "mb-4",
+  compact: "mb-3",
+  dense: "mb-2",
+};
+
+export function Panel({
+  title,
+  subtitle,
+  actions,
+  children,
+  className,
+  variant = "flat",
+  density = "normal",
+}: PanelProps) {
+  const surfaceStyles =
+    density === "normal"
+      ? "p-4 sm:p-5"
+      : density === "compact"
+        ? "p-3 sm:p-4"
+        : "p-2.5 sm:p-3";
+
+  const flatStyles =
+    density === "normal"
+      ? "pt-4 sm:pt-5"
+      : density === "compact"
+        ? "pt-3 sm:pt-4"
+        : "pt-2.5 sm:pt-3";
+
   return (
     <section
       className={cn(
-        variant === 'surface'
-          ? 'min-w-0 rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] p-4 shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_12px_30px_rgba(0,0,0,0.38)] sm:p-5'
-          : 'min-w-0 border-t border-[color:var(--line-weak)] pt-4 sm:pt-5',
-        className
+        "min-w-0",
+        variant === "surface"
+          ? cn(
+              "rounded-2xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] shadow-[0_0_0_1px_rgba(255,255,255,0.03),0_12px_30px_rgba(0,0,0,0.38)]",
+              surfaceStyles,
+            )
+          : cn("border-t border-[color:var(--line-weak)]", flatStyles),
+        densityStyles[density],
+        className,
       )}
     >
-      {(title || subtitle || actions) ? (
-        <header className="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+      {title || subtitle || actions ? (
+        <header
+          className={cn(
+            "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between",
+            headerDensityStyles[density],
+          )}
+        >
           <div className="min-w-0">
-            {title ? <h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">{title}</h3> : null}
-            {subtitle ? <p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p> : null}
+            {title ? (
+              <h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">
+                {title}
+              </h3>
+            ) : null}
+            {subtitle ? (
+              <p
+                className={cn(
+                  "text-xs text-[color:var(--terminal-muted)]",
+                  title ? "mt-0.5" : "",
+                )}
+              >
+                {subtitle}
+              </p>
+            ) : null}
           </div>
           {actions ? <div className="w-full sm:w-auto">{actions}</div> : null}
         </header>