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