From 7a6c55b469e812562d644fa3f4345961f8be37f6 Mon Sep 17 00:00:00 2001
From: Brad Harris <bmharris@gmail.com>
Date: Mon, 13 Jul 2026 03:07:58 -0600
Subject: [PATCH] chore(web): remove 3 dead components (AppHeader,
 StatusFooter, BrainTabContent)

These components are defined but never imported anywhere in the codebase.
They were likely superseded during earlier refactors.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/components/app/app-header.tsx    |  90 --------------
 .../src/components/app/brain-tab-content.tsx  | 115 ------------------
 apps/web/src/components/app/status-footer.tsx |  36 ------
 3 files changed, 241 deletions(-)
 delete mode 100644 apps/web/src/components/app/app-header.tsx
 delete mode 100644 apps/web/src/components/app/brain-tab-content.tsx
 delete mode 100644 apps/web/src/components/app/status-footer.tsx

diff --git a/apps/web/src/components/app/app-header.tsx b/apps/web/src/components/app/app-header.tsx
deleted file mode 100644
index e983638f..00000000
--- a/apps/web/src/components/app/app-header.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { PanelLeftOpen, PanelRightOpen } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-import { useIconColor } from "@/hooks/use-icon-color";
-import { cn } from "@/lib/utils";
-
-type AppHeaderProps = {
-  leftOpen: boolean;
-  mediaOpen: boolean;
-  isMobile: boolean;
-  showReconnectIndicator: boolean;
-  hasActiveAgent: boolean;
-  unseenMediaCount: number;
-  setLeftOpen: (open: boolean) => void;
-  setMediaOpen: (open: boolean) => void;
-};
-
-export function AppHeader({
-  leftOpen,
-  mediaOpen,
-  isMobile,
-  showReconnectIndicator,
-  hasActiveAgent,
-  unseenMediaCount,
-  setLeftOpen,
-  setMediaOpen,
-}: AppHeaderProps): JSX.Element {
-  const { iconColor } = useIconColor();
-  const showLeftToggle = isMobile ? !leftOpen : !leftOpen;
-  const showMediaToggle = hasActiveAgent && (!mediaOpen || isMobile);
-
-  return (
-    <header
-      data-testid="app-header"
-      className={cn(
-        "relative flex min-h-14 min-w-0 items-center gap-2 border-b-2 border-b-border bg-surface px-3 py-2 pt-[env(safe-area-inset-top)]"
-      )}
-    >
-      <div className="flex min-w-0 flex-1 items-center">
-        {showLeftToggle ? (
-          <div className={cn("inline-flex items-center gap-1")}>
-            <Button
-              size="icon"
-              variant="ghost"
-              onClick={() => setLeftOpen(true)}
-              title="Open agent sidebar"
-            >
-              <PanelRightOpen className="h-4 w-4" />
-            </Button>
-            {!isMobile ? (
-              <img
-                src={`/icons/${iconColor}/brand-icon.svg`}
-                alt="Dispatch logo"
-                className="h-6 w-auto object-contain"
-              />
-            ) : null}
-          </div>
-        ) : (
-          <div />
-        )}
-      </div>
-
-      <div className="ml-3 flex shrink-0 items-center gap-1">
-        {showMediaToggle ? (
-          <Button
-            size="icon"
-            variant="ghost"
-            className="relative"
-            onClick={() => setMediaOpen(true)}
-            title="Open media sidebar"
-            data-testid="toggle-media-sidebar"
-          >
-            <PanelLeftOpen className="h-4 w-4" />
-            {unseenMediaCount > 0 ? (
-              <span className="absolute -right-1.5 -top-1.5 min-w-5 rounded-full border border-border bg-primary px-1 text-[10px] font-semibold text-primary-foreground">
-                {unseenMediaCount}
-              </span>
-            ) : null}
-          </Button>
-        ) : null}
-      </div>
-
-      {showReconnectIndicator ? (
-        <div className="pointer-events-none absolute inset-x-0 bottom-0 h-0.5 overflow-hidden">
-          <div className="dispatch-reconnect-scan h-full w-1/3 will-change-transform bg-[linear-gradient(to_right,transparent,hsl(var(--status-blocked)),hsl(var(--status-waiting)),hsl(var(--status-working)),hsl(var(--status-done)),transparent)] saturate-[1.35] brightness-[1.05] animate-[reconnect-scan_1350ms_ease-in-out_infinite] motion-reduce:animate-none motion-reduce:translate-x-[140%]" />
-        </div>
-      ) : null}
-    </header>
-  );
-}
diff --git a/apps/web/src/components/app/brain-tab-content.tsx b/apps/web/src/components/app/brain-tab-content.tsx
deleted file mode 100644
index bd1bbeea..00000000
--- a/apps/web/src/components/app/brain-tab-content.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { Link } from "react-router-dom";
-import { ArrowRight, Brain, Database, List, Radio } from "lucide-react";
-
-import { useAgentBrainActivity } from "@/hooks/use-brain";
-import { encodeRepoRoot } from "@/lib/brain-encoding";
-import { cn } from "@/lib/utils";
-import {
-  CollapsibleSection,
-  ObjectCard,
-  ListCard,
-  EventCard,
-} from "@/components/app/brain-cards";
-
-type BrainTabContentProps = {
-  agentId: string | null;
-  repoRoot: string | null;
-};
-
-export function BrainTabContent({
-  agentId,
-  repoRoot,
-}: BrainTabContentProps): JSX.Element {
-  const { data, isLoading, isError } = useAgentBrainActivity(agentId, repoRoot);
-
-  if (!agentId || !repoRoot) {
-    return (
-      <div className="grid h-full place-items-center p-4 text-center text-sm text-muted-foreground">
-        <div className="flex flex-col items-center gap-2">
-          <Brain className="h-8 w-8 text-muted-foreground" />
-          <div className="mt-4">No brain context available for this agent.</div>
-        </div>
-      </div>
-    );
-  }
-
-  if (isLoading) {
-    return (
-      <div className="grid h-full place-items-center p-4">
-        <div className="h-5 w-5 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
-      </div>
-    );
-  }
-
-  if (isError) {
-    return (
-      <div className="grid h-full place-items-center p-4 text-center text-sm text-muted-foreground">
-        <div className="flex flex-col items-center gap-2">
-          <Brain className="h-8 w-8 text-muted-foreground" />
-          <div className="mt-4">Failed to load brain data.</div>
-        </div>
-      </div>
-    );
-  }
-
-  const objects = data?.objects ?? [];
-  const lists = data?.lists ?? [];
-  const events = data?.events ?? [];
-
-  if (objects.length === 0 && lists.length === 0 && events.length === 0) {
-    return (
-      <div className="grid h-full place-items-center p-4 text-center text-sm text-muted-foreground">
-        <div className="flex flex-col items-center gap-2">
-          <Brain className="h-8 w-8 text-muted-foreground" />
-          <div className="mt-4">
-            This agent hasn't written any brain data yet.
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className={cn("flex flex-col overflow-y-auto")}>
-      <div className="px-3 py-3 border-b border-border flex items-center justify-between">
-        <p className="text-xs text-muted-foreground">
-          Shared memory this agent has written.
-        </p>
-        {repoRoot ? (
-          <Link
-            to={`/automations/brains/${encodeRepoRoot(repoRoot)}`}
-            className="flex items-center gap-1 text-[11px] text-primary/70 hover:text-primary transition-colors shrink-0"
-          >
-            View full brain
-            <ArrowRight className="h-3 w-3" />
-          </Link>
-        ) : null}
-      </div>
-      <CollapsibleSection
-        title="Objects"
-        icon={Database}
-        count={objects.length}
-      >
-        {objects.map((obj) => (
-          <ObjectCard key={`${obj.collection}/${obj.name}`} obj={obj} />
-        ))}
-      </CollapsibleSection>
-
-      <CollapsibleSection title="Lists" icon={List} count={lists.length}>
-        {lists.map((list) => (
-          <ListCard
-            key={`${list.collection}/${list.name}`}
-            list={list}
-            repoRoot={repoRoot!}
-          />
-        ))}
-      </CollapsibleSection>
-
-      <CollapsibleSection title="Events" icon={Radio} count={events.length}>
-        {events.map((event) => (
-          <EventCard key={event.id} event={event} />
-        ))}
-      </CollapsibleSection>
-    </div>
-  );
-}
diff --git a/apps/web/src/components/app/status-footer.tsx b/apps/web/src/components/app/status-footer.tsx
deleted file mode 100644
index 1a5dc528..00000000
--- a/apps/web/src/components/app/status-footer.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import { Database, Server } from "lucide-react";
-
-import { ServiceStatus } from "@/components/app/service-status";
-import { type ServiceState } from "@/components/app/types";
-
-type StatusFooterProps = {
-  apiState: ServiceState;
-  dbState: ServiceState;
-  serviceDotClass: (state: ServiceState) => string;
-};
-
-export function StatusFooter({
-  apiState,
-  dbState,
-  serviceDotClass,
-}: StatusFooterProps): JSX.Element {
-  return (
-    <footer
-      data-testid="status-footer"
-      className="flex h-11 items-center justify-end gap-8 border-t-2 border-border bg-surface px-3 pb-[env(safe-area-inset-bottom)] text-[10px] text-muted-foreground sm:text-xs"
-    >
-      <ServiceStatus
-        icon={<Server className="h-3.5 w-3.5" />}
-        label="API"
-        value={apiState}
-        dotClass={serviceDotClass(apiState)}
-      />
-      <ServiceStatus
-        icon={<Database className="h-3.5 w-3.5" />}
-        label="DB"
-        value={dbState}
-        dotClass={serviceDotClass(dbState)}
-      />
-    </footer>
-  );
-}