fix: nice-to-have polish — breadcrumbs, close button, status badges

- 7.1: Add deployment status badge (StatusDot + Badge) to AppsTab app
  list, sourced from catalog.deployment.status via slug lookup
- 7.3: Add X close button to top-right of exchange detail right panel
  in ExchangesPage (position:absolute, triggers handleClearSelection)
- 7.5: PunchcardHeatmap shows "Requires at least 2 days of data"
  when timeRangeMs < 2 days; DashboardL1 passes the range down
- 7.6: Command palette exchange results truncate IDs to ...{last8}
  matching the exchanges table display

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/pages/DashboardTab/DashboardL1.tsx

@@ -462,7 +462,7 @@ export default function DashboardL1() {
             />
           </Card>
           <Card title="7-Day Pattern">
-            <PunchcardHeatmap cells={punchcardData ?? []} />
+            <PunchcardHeatmap cells={punchcardData ?? []} timeRangeMs={timeRange.end.getTime() - timeRange.start.getTime()} />
           </Card>
         </div>
       )}

ui/src/pages/DashboardTab/PunchcardHeatmap.tsx

@@ -10,6 +10,7 @@ export interface PunchcardCell {
 
 interface PunchcardHeatmapProps {
   cells: PunchcardCell[];
+  timeRangeMs?: number;
 }
 
 type Mode = 'transactions' | 'errors';
@@ -38,8 +39,11 @@ const GAP = 2;
 const LABEL_W = 28;
 const LABEL_H = 14;
 
-export function PunchcardHeatmap({ cells }: PunchcardHeatmapProps) {
+const TWO_DAYS_MS = 2 * 24 * 60 * 60 * 1000;
+
+export function PunchcardHeatmap({ cells, timeRangeMs }: PunchcardHeatmapProps) {
   const [mode, setMode] = useState<Mode>('transactions');
+  const insufficientData = timeRangeMs !== undefined && timeRangeMs < TWO_DAYS_MS;
 
   const { grid, maxVal } = useMemo(() => {
     const cellMap = new Map<string, PunchcardCell>();
@@ -63,6 +67,14 @@ export function PunchcardHeatmap({ cells }: PunchcardHeatmapProps) {
   const svgW = LABEL_W + cols * (CELL + GAP);
   const svgH = LABEL_H + rows * (CELL + GAP);
 
+  if (insufficientData) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '2rem 1rem', color: 'var(--text-muted)', fontSize: '0.8125rem', fontStyle: 'italic' }}>
+        Requires at least 2 days of data
+      </div>
+    );
+  }
+
   return (
     <div>
       <div className={styles.toggleRow}>