import { useAtomValue, Result } from "@effect-atom/atom-react";import { toolsAtom } from "../api/atoms";import { useScope } from "../hooks/use-scope";import { Badge } from "../components/badge"; export function ToolsPage() {  const scopeId = useScope();  const tools = useAtomValue(toolsAtom(scopeId));   return (    <div className="min-h-0 flex-1 overflow-y-auto">      <div className="mx-auto max-w-4xl px-6 py-10 lg:px-10 lg:py-14">        {/* Header */}        <div className="flex items-end justify-between mb-8">          <div>            <h1 className="font-display text-3xl tracking-tight text-foreground lg:text-4xl">              Tools            </h1>            <p className="mt-1.5 text-sm text-muted-foreground">              All registered tools across your connected sources.            </p>          </div>        </div>         {Result.match(tools, {          onInitial: () => <p className="text-sm text-muted-foreground">Loading tools…</p>,          onFailure: () => <p className="text-sm text-destructive">Failed to load tools</p>,          onSuccess: ({ value }) =>            value.length === 0 ? (              <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-border py-20">                <div className="flex size-12 items-center justify-center rounded-2xl bg-muted text-muted-foreground mb-4">                  <svg viewBox="0 0 16 16" className="size-5">                    <path                      d="M4 2h8l1 3H3l1-3zM3 6h10v8H3V6z"                      fill="none"                      stroke="currentColor"                      strokeWidth="1.2"                    />                  </svg>                </div>                <p className="text-sm font-medium text-foreground/70 mb-1">                  No tools registered                </p>                <p className="text-sm text-muted-foreground">                  Add a source to start discovering tools.                </p>              </div>            ) : (              <div className="grid gap-2">                {value.map((t) => (                  <div                    key={t.id}                    className="flex items-start justify-between gap-3 rounded-xl border border-border bg-card px-5 py-3.5 transition-colors hover:border-primary/25 hover:bg-card/90"                  >                    <div className="min-w-0 flex-1">                      <p className="text-sm font-semibold text-foreground truncate font-mono">                        {t.name}                      </p>                      {t.description && (                        <p className="mt-0.5 text-xs text-muted-foreground line-clamp-2">                          {t.description}                        </p>                      )}                    </div>                    <Badge variant="secondary">{t.sourceId}</Badge>                  </div>                ))}              </div>            ),        })}      </div>    </div>  );}