import { useMemo, useState } from "react";import { Link } from "@tanstack/react-router";import { useAtomValue } from "@effect/atom-react";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";import { effectivePolicyFromSorted } from "@executor-js/sdk"; import { policiesOptimisticAtom, toolsAtom } from "../api/atoms";import { useScope } from "../hooks/use-scope";import { usePolicyActions } from "../hooks/use-policy-actions";import { ToolTree, type ToolSummary } from "../components/tool-tree";import { ToolDetail, ToolDetailEmpty } from "../components/tool-detail";import { Button } from "../components/button";import { Skeleton } from "../components/skeleton"; export function ToolsPage() {  const scopeId = useScope();  const tools = useAtomValue(toolsAtom(scopeId));  const policies = useAtomValue(policiesOptimisticAtom(scopeId));  const policyActions = usePolicyActions(scopeId);   const [selectedToolId, setSelectedToolId] = useState<string | null>(null);   const policyList = useMemo(    () => (AsyncResult.isSuccess(policies) ? policies.value : []),    [policies],  );   const sortedPolicies = useMemo(    () =>      [...policyList].sort((a, b) => {        if (a.position < b.position) return -1;        if (a.position > b.position) return 1;        return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;      }),    [policyList],  );   const summaries: ToolSummary[] = useMemo(() => {    if (!AsyncResult.isSuccess(tools)) return [];    return tools.value.map(      (t: {        readonly id: string;        readonly name: string;        readonly pluginId: string;        readonly description?: string;        readonly requiresApproval?: boolean;      }) => ({        id: t.id,        // Tree path + saved pattern must be the canonical tool id        // (`stripe_api.account.getAccount`), not the short `t.name`        // which strips the source prefix and would never match at        // resolution time.        name: t.id,        pluginKey: t.pluginId,        description: t.description,        policy: effectivePolicyFromSorted(t.id, sortedPolicies, t.requiresApproval),      }),    );  }, [tools, sortedPolicies]);   const selectedTool = useMemo(    () => summaries.find((t) => t.id === selectedToolId) ?? null,    [summaries, selectedToolId],  );   return (    <div className="flex min-h-0 flex-1 flex-col overflow-hidden">      {/* Header bar */}      <div className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-background/95 px-4 backdrop-blur-sm">        <div className="flex min-w-0 items-center gap-3">          <h2 className="truncate text-sm font-semibold text-foreground">Tools</h2>          {AsyncResult.isSuccess(tools) && (            <span className="hidden text-xs tabular-nums text-muted-foreground sm:block">              {summaries.length} {summaries.length === 1 ? "tool" : "tools"}            </span>          )}        </div>        <div className="flex shrink-0 items-center gap-2">          <Button asChild variant="outline" size="sm">            <Link to="/policies">Manage policies</Link>          </Button>        </div>      </div>       {AsyncResult.match(tools, {        onInitial: () => <ToolsPageSkeleton />,        onFailure: () => <div className="p-6 text-sm text-destructive">Failed to load tools</div>,        onSuccess: () =>          summaries.length === 0 ? (            <div className="flex min-h-0 flex-1 items-center justify-center">              <div className="text-center">                <p className="text-sm font-medium text-foreground/70">No tools registered</p>                <p className="mt-1 text-sm text-muted-foreground">                  Add a source to start discovering tools.                </p>              </div>            </div>          ) : (            <div className="flex min-h-0 flex-1 overflow-hidden">              <div className="flex w-72 shrink-0 flex-col border-r border-border/60 lg:w-80 xl:w-[22rem]">                <ToolTree                  tools={summaries}                  selectedToolId={selectedToolId}                  onSelect={setSelectedToolId}                  onSetPolicy={(pattern, action) => void policyActions.set(pattern, action)}                  onClearPolicy={(pattern) => void policyActions.clear(pattern)}                  policies={sortedPolicies}                />              </div>              <div className="flex min-w-0 flex-1 flex-col overflow-hidden">                {selectedTool ? (                  <ToolDetail                    toolId={selectedTool.id}                    toolName={selectedTool.name}                    toolDescription={selectedTool.description}                    scopeId={scopeId}                    policy={selectedTool.policy}                    onSetPolicy={(pattern, action) => void policyActions.set(pattern, action)}                    onClearPolicy={(pattern) => void policyActions.clear(pattern)}                  />                ) : (                  <ToolDetailEmpty hasTools={summaries.length > 0} />                )}              </div>            </div>          ),      })}    </div>  );} function ToolsPageSkeleton() {  return (    <div className="flex min-h-0 flex-1 overflow-hidden">      <div className="flex w-72 shrink-0 flex-col gap-1 border-r border-border/60 p-3 lg:w-80 xl:w-[22rem]">        <Skeleton className="mb-2 h-8 w-full rounded-md" />        {Array.from({ length: 8 }).map((_, i) => (          <div key={i} className="flex items-center gap-2 rounded-md px-2 py-1.5">            <Skeleton className="size-4 shrink-0 rounded" />            <Skeleton className="h-3.5" style={{ width: `${55 + ((i * 13) % 35)}%` }} />          </div>        ))}      </div>      <div className="flex min-w-0 flex-1 flex-col gap-6 overflow-hidden p-6">        <div className="flex flex-col gap-2">          <Skeleton className="h-5 w-48" />          <Skeleton className="h-4 w-80" />          <Skeleton className="h-4 w-64" />        </div>        <div className="flex flex-col gap-3">          <Skeleton className="h-4 w-24" />          <Skeleton className="h-20 w-full rounded-md" />          <Skeleton className="h-4 w-24" />          <Skeleton className="h-20 w-full rounded-md" />        </div>      </div>    </div>  );}