@tonyclaw/agent-inspector 4.0.1 → 4.0.3

package/src/components/OnboardingBanner.tsx

@@ -1,115 +0,0 @@
-import { Check, ChevronDown, Info, X } from "lucide-react";
-import { useState, type JSX } from "react";
-import { useOnboarding } from "../lib/useOnboarding";
-
-export function shouldShowOnboardingBanner({
-  isLoading,
-  hasSeenOnboarding,
-  dismissedInView,
-}: {
-  isLoading: boolean;
-  hasSeenOnboarding: boolean;
-  dismissedInView: boolean;
-}): boolean {
-  return !isLoading && !hasSeenOnboarding && !dismissedInView;
-}
-
-/**
- * Presentational onboarding surface, exported so responsive and accessibility
- * behavior can be verified without runtime configuration state.
- */
-export function OnboardingTip({
-  expanded,
-  onToggle,
-  onDismiss,
-}: {
-  expanded: boolean;
-  onToggle: () => void;
-  onDismiss: () => void;
-}): JSX.Element {
-  const detailClass = expanded ? "grid" : "hidden sm:grid";
-
-  return (
-    <div
-      role="note"
-      aria-label="Onboarding tip"
-      className="mx-3 mt-2 mb-1 rounded-md border border-warning/30 bg-warning/10 px-3 py-2 text-sm shadow-sm sm:mx-4"
-    >
-      <div className="flex items-start gap-3">
-        <Info className="mt-0.5 size-4 shrink-0 text-warning" aria-hidden="true" />
-        <div className="min-w-0 flex-1">
-          <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1">
-            <span className="font-medium text-foreground">Inspector ready</span>
-            <span className="hidden truncate text-xs text-muted-foreground sm:inline">
-              Request, response, tool, timing, token, replay, and memory signals are active.
-            </span>
-          </div>
-          <div className="mt-1 text-xs leading-relaxed text-muted-foreground sm:hidden">
-            Core capture is active.
-          </div>
-          <div
-            className={`${detailClass} mt-2 gap-x-4 gap-y-1 text-xs leading-relaxed text-muted-foreground sm:grid-cols-2`}
-          >
-            <div>
-              <strong>Evidence</strong>: logs, sessions, groups, and MCP exports are available.
-            </div>
-            <div>
-              <strong>Network</strong>: replace <code>localhost</code> if containers differ.
-            </div>
-          </div>
-        </div>
-        <button
-          type="button"
-          onClick={onToggle}
-          className="inline-flex h-8 shrink-0 items-center gap-1 rounded-md border border-warning/35 px-2 text-xs font-medium text-foreground transition-colors hover:bg-warning/15 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none sm:hidden"
-          aria-expanded={expanded}
-          aria-label={expanded ? "Hide onboarding details" : "Show onboarding details"}
-        >
-          <ChevronDown
-            className={`size-3.5 transition-transform ${expanded ? "rotate-180" : ""}`}
-          />
-        </button>
-        <button
-          type="button"
-          onClick={onDismiss}
-          className="hidden h-8 shrink-0 items-center gap-1.5 rounded-md border border-warning/40 px-3 text-xs font-medium text-foreground transition-colors hover:bg-warning/15 focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none sm:inline-flex"
-          aria-label="Dismiss onboarding tip"
-        >
-          <Check className="size-3.5" />
-          Got it
-        </button>
-        <button
-          type="button"
-          onClick={onDismiss}
-          className="-m-1 shrink-0 rounded-sm p-1 text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
-          aria-label="Dismiss"
-        >
-          <X className="size-3.5" />
-        </button>
-      </div>
-    </div>
-  );
-}
-
-/**
- * First-launch onboarding banner. Shows once on a fresh install and persists
- * dismissal through the server runtime config.
- */
-export function OnboardingBanner(): JSX.Element | null {
-  const { hasSeenOnboarding, isLoading, markSeen } = useOnboarding();
-  const [expanded, setExpanded] = useState(false);
-  const [dismissedInView, setDismissedInView] = useState(false);
-
-  if (!shouldShowOnboardingBanner({ isLoading, hasSeenOnboarding, dismissedInView })) return null;
-
-  return (
-    <OnboardingTip
-      expanded={expanded}
-      onToggle={() => setExpanded((value) => !value)}
-      onDismiss={() => {
-        setDismissedInView(true);
-        void markSeen().catch(() => undefined);
-      }}
-    />
-  );
-}