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/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>