Match the observation card to the theme (#118)

src/features/packets/ObservationCard.tsx

@@ -19,7 +19,7 @@ export function ObservationCard({ observation: obs, selected, onClick, onViewNod
     <div
       className={`bg-bg-base border border-border rounded px-3 py-2.5 border-l-2 transition-colors ${
         selected
-          ? "border-l-secondary bg-secondary/5"
+          ? "border-l-primary bg-primary/6"
           // the edge mirrors the table's SNR coloring, so the list scans as a signal column
           : level
             ? SIGNAL_LEVEL_BORDER_CLASSES[level]
@@ -91,7 +91,7 @@ export function ObservationCard({ observation: obs, selected, onClick, onViewNod
           )}
         </div>
       )}
-      {actions && <div className="mt-2 flex flex-wrap items-center justify-end gap-3 border-t border-border-subtle pt-1.5" onClick={(e) => e.stopPropagation()}>{actions}</div>}
+      {actions && <div className="mt-2 flex flex-wrap items-center justify-end gap-1.5 border-t border-border-subtle pt-1.5" onClick={(e) => e.stopPropagation()}>{actions}</div>}
     </div>
   );
 }

src/features/packets/PacketInvestigation.tsx

@@ -9,7 +9,6 @@ import { ObservationCard } from "./ObservationCard";
 import { groupPacketReports } from "./packet-investigation";
 
 const PAGE = 3;
-const LINK = "font-mono text-[11px] text-text-muted transition-colors hover:text-primary disabled:cursor-not-allowed disabled:opacity-40 disabled:hover:text-text-muted";
 
 // Every retained reception, grouped by the path bytes it carried; each report is a selectable signal card.
 export function PacketInvestigation({ detail, selectedId, onSelect, onViewObserver, onViewPath, onViewNode, mappedKeys, observerCount, defaultOpen = false }: {
@@ -54,10 +53,10 @@ export function PacketInvestigation({ detail, selectedId, onSelect, onViewObserv
             isTrace={isTrace}
             selectLabel={`${t("investigation.inspect")}: ${name}`}
             actions={<>
-              {onViewObserver && <button type="button" className={LINK} onClick={() => { onSelect(report.id); onViewObserver(report.observerId); }}>{t("investigation.observer")}</button>}
+              {onViewObserver && <button type="button" className={ACTION_BUTTON_CLASS} onClick={() => { onSelect(report.id); onViewObserver(report.observerId); }}>{t("investigation.observer")}</button>}
               {canMap
-                ? <button type="button" className={LINK} disabled={!onViewPath} onClick={() => { onSelect(report.id); onViewPath?.(key); }}>{t("investigation.map")}</button>
-                : <Tooltip wrap label={t("investigation.unmappable")}><button type="button" className={`${LINK} pointer-events-none`} disabled>{t("investigation.map")}<span className="sr-only">: {t("investigation.unmappable")}</span></button></Tooltip>}
+                ? <button type="button" className={ACTION_BUTTON_CLASS} disabled={!onViewPath} onClick={() => { onSelect(report.id); onViewPath?.(key); }}>{t("investigation.map")}</button>
+                : <Tooltip wrap label={t("investigation.unmappable")}><button type="button" className={`${ACTION_BUTTON_CLASS} pointer-events-none`} disabled>{t("investigation.map")}<span className="sr-only">: {t("investigation.unmappable")}</span></button></Tooltip>}
             </>}
           />
         </li>;

tests/features/packets/ObservationCard.test.tsx

@@ -56,7 +56,7 @@ describe("ObservationCard", () => {
   it("lets selection override the signal edge", () => {
     const { container } = render(<ObservationCard observation={obs({ snr: 12 })} selected />);
     const cls = tokens(container.firstElementChild!);
-    expect(cls).toContain("border-l-secondary");
+    expect(cls).toEqual(expect.arrayContaining(["border-l-primary", "bg-primary/6"]));
     expect(cls).not.toContain("border-l-green");
   });
 

tests/features/packets/PacketAnalyzerDrawer.test.tsx

@@ -55,6 +55,7 @@ describe("packet reception evidence", () => {
     expect(within(beta).getByRole("button", { name: /Inspect report.*Beta/ })).toHaveAttribute("aria-pressed", "true");
     expect(within(beta).getByText("SNR")).toBeInTheDocument();
     expect(screen.queryByText(/^Observations \(/)).not.toBeInTheDocument();
+    for (const name of ["Inspect observer", "Map report"]) expect(within(beta).getByRole("button", { name })).toHaveClass("border", "border-border", "text-primary");
     fireEvent.click(within(beta).getByRole("button", { name: "Inspect observer" })); expect(onViewObserver).toHaveBeenCalledWith("beta");
     fireEvent.click(within(beta).getByRole("button", { name: "Map report" })); expect(onViewPath).toHaveBeenCalledWith("beta");
     expect(screen.getByTestId("search")).toHaveTextContent("observation=2"); expect(screen.getByTestId("search")).toHaveTextContent("q=keep");