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