import { Link, Outlet, useLocation } from "@tanstack/react-router";import { useEffect, useRef, useState } from "react";import { useAtomRefresh, useAtomValue } from "@effect/atom-react";import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";import type { Integration } from "@executor-js/sdk/shared";import { integrationsAtom, integrationsOptimisticAtom, toolsAllAtom,} from "@executor-js/react/api/atoms";import { Button } from "@executor-js/react/components/button";import { integrationPresetIconUrl } from "@executor-js/react/components/integration-favicon";import { IntegrationIconWithAccount } from "@executor-js/react/components/integration-icon-with-account";import { CommandPalette } from "@executor-js/react/components/command-palette";import { useClientPlugins, useIntegrationPlugins } from "@executor-js/sdk/client";import { SidebarUpdateCard } from "@executor-js/react/components/update-card";import { ServerConnectionMenu } from "./server-connection-menu"; // ── Env ───────────────────────────────────────────────────────────────── type AppMetaEnv = { readonly VITE_APP_VERSION: string; readonly VITE_GITHUB_URL: string;}; const { VITE_APP_VERSION, VITE_GITHUB_URL } = ( import.meta as ImportMeta & { readonly env: AppMetaEnv; }).env; // ── NavItem ────────────────────────────────────────────────────────────── function NavItem(props: { to: string; label: string; active: boolean; onNavigate?: () => void }) { return ( <Link to={props.to} onClick={props.onNavigate} className={[ "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors", props.active ? "bg-sidebar-active text-foreground font-medium" : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground", ].join(" ")} > {props.label} </Link> );} // ── PluginNav ────────────────────────────────────────────────────────────//// Renders one nav link per plugin page that opted in via// `pages[].nav.label`. The catch-all `/plugins/$pluginId/$` route is the// mount point; the splat is the page's relative path with the leading// slash stripped. function PluginNav(props: { pathname: string; onNavigate?: () => void }) { const plugins = useClientPlugins(); const entries = plugins.flatMap((plugin) => (plugin.pages ?? []) .filter((page) => page.nav) .map((page) => { const splat = page.path.replace(/^\//, ""); const href = `/plugins/${plugin.id}${splat ? `/${splat}` : "/"}`; return { key: `${plugin.id}:${page.path}`, pluginId: plugin.id, splat, href, label: page.nav!.label, }; }), ); if (entries.length === 0) return null; return ( <> {entries.map((entry) => ( <Link key={entry.key} to="/{-$orgSlug}/plugins/$pluginId/$" params={{ pluginId: entry.pluginId, _splat: entry.splat }} onClick={props.onNavigate} className={[ "flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors", props.pathname === entry.href || props.pathname.startsWith(`${entry.href}/`) ? "bg-sidebar-active text-foreground font-medium" : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground", ].join(" ")} > {entry.label} </Link> ))} </> );} // ── IntegrationList ─────────────────────────────────────────────────────────── function IntegrationList(props: { pathname: string; onNavigate?: () => void }) { const integrations = useAtomValue(integrationsOptimisticAtom); const integrationPlugins = useIntegrationPlugins(); return AsyncResult.match(integrations, { onInitial: () => <div className="px-2.5 py-2 text-xs text-muted-foreground">Loading…</div>, onFailure: () => ( <div className="px-2.5 py-2 text-xs text-muted-foreground">No integrations yet</div> ), onSuccess: ({ value }: { readonly value: readonly Integration[] }) => value.length === 0 ? ( <div className="px-2.5 py-2 text-sm leading-relaxed text-muted-foreground"> No integrations yet </div> ) : ( <div className="flex flex-col gap-px"> {value.map((integration: Integration) => { const slug = String(integration.slug); const name = integration.name || slug; const detailPath = `/integrations/${slug}`; const active = props.pathname === detailPath || props.pathname.startsWith(`${detailPath}/`); return ( <Link key={slug} to="/{-$orgSlug}/integrations/$namespace" params={{ namespace: slug }} onClick={props.onNavigate} className={[ "group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs transition-colors", active ? "bg-sidebar-active text-foreground font-medium" : "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground", ].join(" ")} > <IntegrationIconWithAccount icon={integrationPresetIconUrl( { id: slug, kind: integration.kind }, integrationPlugins, )} sourceId={slug} size="sm" /> <span className="flex-1 truncate">{name}</span> </Link> ); })} </div> ), });} // ── SidebarContent ─────────────────────────────────────────────────────── function SidebarContent(props: { pathname: string; onNavigate?: () => void; showBrand?: boolean }) { const isHome = props.pathname === "/"; const isSecrets = props.pathname === "/secrets"; const isPolicies = props.pathname === "/policies"; const isToolkits = props.pathname === "/toolkits" || props.pathname.startsWith("/toolkits/"); return ( <> {props.showBrand !== false && ( <div className="desktop-macos-titlebar flex h-12 shrink-0 items-center gap-2 border-b border-sidebar-border px-4"> <Link to="/{-$orgSlug}" className="desktop-macos-no-drag flex shrink-0 items-center gap-1.5" > <span className="font-mono text-sm font-medium tracking-tight text-foreground"> executor </span> <span className="rounded bg-primary/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-primary"> Beta </span> </Link> <div className="desktop-macos-no-drag ml-auto flex min-w-0 flex-1 justify-end pl-3"> <ServerConnectionMenu variant="header" /> </div> </div> )} <nav className="flex flex-1 flex-col overflow-y-auto p-2"> <NavItem to="/{-$orgSlug}" label="Integrations" active={isHome} onNavigate={props.onNavigate} /> <NavItem to="/{-$orgSlug}/secrets" label="Secrets" active={isSecrets} onNavigate={props.onNavigate} /> <NavItem to="/{-$orgSlug}/policies" label="Policies" active={isPolicies} onNavigate={props.onNavigate} /> <NavItem to="/{-$orgSlug}/toolkits" label="Toolkits" active={isToolkits} onNavigate={props.onNavigate} /> <PluginNav pathname={props.pathname} onNavigate={props.onNavigate} /> {/* Sources list */} <div className="mt-5 mb-1 px-2.5 text-xs font-medium uppercase tracking-widest text-muted-foreground"> <span>Integrations</span> </div> <IntegrationList pathname={props.pathname} onNavigate={props.onNavigate} /> </nav> <SidebarUpdateCard /> {/* Footer */} <div className="shrink-0 border-t border-sidebar-border px-4 py-2.5"> <div className="flex flex-col gap-1.5 text-xs leading-none"> <a href="https://executor.sh/docs" target="_blank" rel="noreferrer" className="text-muted-foreground transition-colors hover:text-foreground" > Docs </a> <a href={`${VITE_GITHUB_URL}/issues`} target="_blank" rel="noreferrer" className="text-muted-foreground transition-colors hover:text-foreground" > Feedback / bug? </a> <a href={VITE_GITHUB_URL} target="_blank" rel="noreferrer" className="text-muted-foreground transition-colors hover:text-foreground" > Star on GitHub </a> <span className="mt-0.5 text-xs text-muted-foreground tabular-nums"> v{VITE_APP_VERSION} </span> </div> </div> </> );} // ── Shell ───────────────────────────────────────────────────────────────── export function Shell() { const location = useLocation(); const pathname = location.pathname; const refreshSources = useAtomRefresh(integrationsAtom); const refreshTools = useAtomRefresh(toolsAllAtom); const lastPathname = useRef(pathname); const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false); if (lastPathname.current !== pathname) { lastPathname.current = pathname; if (mobileSidebarOpen) setMobileSidebarOpen(false); } // Lock scroll when mobile sidebar open useEffect(() => { if (!mobileSidebarOpen) return; const prev = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = prev; }; }, [mobileSidebarOpen]); useEffect(() => { if (!import.meta.hot) { return; } const refreshBackendData = () => { refreshSources(); refreshTools(); }; import.meta.hot.on("executor:backend-updated", refreshBackendData); return () => { import.meta.hot?.off("executor:backend-updated", refreshBackendData); }; }, [refreshSources, refreshTools]); return ( <div className="flex h-screen overflow-hidden"> <CommandPalette /> {/* Desktop sidebar */} <aside className="desktop-macos-sidebar hidden w-52 shrink-0 border-r border-sidebar-border bg-sidebar md:flex md:flex-col lg:w-56"> <SidebarContent pathname={pathname} /> </aside> {/* Mobile sidebar overlay */} {mobileSidebarOpen && ( <div className="fixed inset-0 z-50 flex md:hidden"> {/* oxlint-disable-next-line react/forbid-elements */} <button type="button" aria-label="Close navigation" className="absolute inset-0 bg-black/45 backdrop-blur-[1px]" onClick={() => setMobileSidebarOpen(false)} /> <div className="relative flex h-full w-[84vw] max-w-xs flex-col border-r border-sidebar-border bg-sidebar shadow-2xl"> <div className="flex h-12 shrink-0 items-center justify-between border-b border-sidebar-border px-4"> <Link to="/{-$orgSlug}" className="flex items-center gap-1.5"> <span className="font-mono text-sm font-medium tracking-tight text-foreground"> executor </span> <span className="rounded bg-primary/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-primary"> Beta </span> </Link> <Button variant="ghost" size="icon-sm" aria-label="Close navigation" onClick={() => setMobileSidebarOpen(false)} className="text-sidebar-foreground hover:bg-sidebar-active hover:text-foreground" > <svg viewBox="0 0 16 16" className="size-3.5"> <path d="M3 3l10 10M13 3L3 13" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" /> </svg> </Button> </div> <SidebarContent pathname={pathname} onNavigate={() => setMobileSidebarOpen(false)} showBrand={false} /> </div> </div> )} {/* Main content */} <main className="relative flex min-h-0 flex-1 flex-col min-w-0 overflow-hidden"> {/* Desktop (macOS frameless) draggable title-bar strip. Gives the main area the same native window drag + double-click-to-zoom as the sidebar header; hidden everywhere else via CSS. Overlays the top of the main area (behind page content) so page headers stay flush with the top and their borders line up with the sidebar header. */} <div className="desktop-macos-main-titlebar" /> {/* Mobile top bar */} <div className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-background px-4 md:hidden"> <Button variant="outline" size="icon-sm" aria-label="Open navigation" onClick={() => setMobileSidebarOpen(true)} className="bg-card hover:bg-accent/50" > <svg viewBox="0 0 16 16" className="size-4"> <path d="M2 4h12M2 8h12M2 12h12" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" /> </svg> </Button> <Link to="/{-$orgSlug}" className="flex items-center gap-1.5"> <span className="font-mono text-sm font-medium tracking-tight text-foreground"> executor </span> </Link> <div className="w-8 shrink-0" /> </div> <Outlet /> </main> </div> );}
import { Link, Outlet, useLocation } from "@tanstack/react-router";
import { useEffect, useRef, useState } from "react";
import { useAtomRefresh, useAtomValue } from "@effect/atom-react";
import * as AsyncResult from "effect/unstable/reactivity/AsyncResult";
import type { Integration } from "@executor-js/sdk/shared";
import {
integrationsAtom,
integrationsOptimisticAtom,
toolsAllAtom,
} from "@executor-js/react/api/atoms";
import { Button } from "@executor-js/react/components/button";
import { integrationPresetIconUrl } from "@executor-js/react/components/integration-favicon";
import { IntegrationIconWithAccount } from "@executor-js/react/components/integration-icon-with-account";
import { CommandPalette } from "@executor-js/react/components/command-palette";
import { useClientPlugins, useIntegrationPlugins } from "@executor-js/sdk/client";
import { SidebarUpdateCard } from "@executor-js/react/components/update-card";
import { ServerConnectionMenu } from "./server-connection-menu";
// ── Env ─────────────────────────────────────────────────────────────────
type AppMetaEnv = {
readonly VITE_APP_VERSION: string;
readonly VITE_GITHUB_URL: string;
};
const { VITE_APP_VERSION, VITE_GITHUB_URL } = (
import.meta as ImportMeta & {
readonly env: AppMetaEnv;
}
).env;
// ── NavItem ──────────────────────────────────────────────────────────────
function NavItem(props: { to: string; label: string; active: boolean; onNavigate?: () => void }) {
return (
<Link
to={props.to}
onClick={props.onNavigate}
className={[
"flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
props.active
? "bg-sidebar-active text-foreground font-medium"
: "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
].join(" ")}
>
{props.label}
</Link>
);
}
// ── PluginNav ────────────────────────────────────────────────────────────
//
// Renders one nav link per plugin page that opted in via
// `pages[].nav.label`. The catch-all `/plugins/$pluginId/$` route is the
// mount point; the splat is the page's relative path with the leading
// slash stripped.
function PluginNav(props: { pathname: string; onNavigate?: () => void }) {
const plugins = useClientPlugins();
const entries = plugins.flatMap((plugin) =>
(plugin.pages ?? [])
.filter((page) => page.nav)
.map((page) => {
const splat = page.path.replace(/^\//, "");
const href = `/plugins/${plugin.id}${splat ? `/${splat}` : "/"}`;
return {
key: `${plugin.id}:${page.path}`,
pluginId: plugin.id,
splat,
href,
label: page.nav!.label,
};
}),
);
if (entries.length === 0) return null;
return (
<>
{entries.map((entry) => (
<Link
key={entry.key}
to="/{-$orgSlug}/plugins/$pluginId/$"
params={{ pluginId: entry.pluginId, _splat: entry.splat }}
onClick={props.onNavigate}
className={[
"flex items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
props.pathname === entry.href || props.pathname.startsWith(`${entry.href}/`)
? "bg-sidebar-active text-foreground font-medium"
: "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
].join(" ")}
>
{entry.label}
</Link>
))}
</>
);
}
// ── IntegrationList ───────────────────────────────────────────────────────────
function IntegrationList(props: { pathname: string; onNavigate?: () => void }) {
const integrations = useAtomValue(integrationsOptimisticAtom);
const integrationPlugins = useIntegrationPlugins();
return AsyncResult.match(integrations, {
onInitial: () => <div className="px-2.5 py-2 text-xs text-muted-foreground">Loading…</div>,
onFailure: () => (
<div className="px-2.5 py-2 text-xs text-muted-foreground">No integrations yet</div>
),
onSuccess: ({ value }: { readonly value: readonly Integration[] }) =>
value.length === 0 ? (
<div className="px-2.5 py-2 text-sm leading-relaxed text-muted-foreground">
No integrations yet
</div>
) : (
<div className="flex flex-col gap-px">
{value.map((integration: Integration) => {
const slug = String(integration.slug);
const name = integration.name || slug;
const detailPath = `/integrations/${slug}`;
const active =
props.pathname === detailPath || props.pathname.startsWith(`${detailPath}/`);
return (
<Link
key={slug}
to="/{-$orgSlug}/integrations/$namespace"
params={{ namespace: slug }}
onClick={props.onNavigate}
className={[
"group flex items-center gap-2 rounded-md px-2.5 py-1.5 text-xs transition-colors",
active
? "bg-sidebar-active text-foreground font-medium"
: "text-sidebar-foreground hover:bg-sidebar-active/60 hover:text-foreground",
].join(" ")}
>
<IntegrationIconWithAccount
icon={integrationPresetIconUrl(
{ id: slug, kind: integration.kind },
integrationPlugins,
)}
sourceId={slug}
size="sm"
/>
<span className="flex-1 truncate">{name}</span>
</Link>
);
})}
</div>
),
});
}
// ── SidebarContent ───────────────────────────────────────────────────────
function SidebarContent(props: { pathname: string; onNavigate?: () => void; showBrand?: boolean }) {
const isHome = props.pathname === "/";
const isSecrets = props.pathname === "/secrets";
const isPolicies = props.pathname === "/policies";
const isToolkits = props.pathname === "/toolkits" || props.pathname.startsWith("/toolkits/");
return (
<>
{props.showBrand !== false && (
<div className="desktop-macos-titlebar flex h-12 shrink-0 items-center gap-2 border-b border-sidebar-border px-4">
<Link
to="/{-$orgSlug}"
className="desktop-macos-no-drag flex shrink-0 items-center gap-1.5"
>
<span className="font-mono text-sm font-medium tracking-tight text-foreground">
executor
</span>
<span className="rounded bg-primary/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-primary">
Beta
</span>
</Link>
<div className="desktop-macos-no-drag ml-auto flex min-w-0 flex-1 justify-end pl-3">
<ServerConnectionMenu variant="header" />
</div>
</div>
)}
<nav className="flex flex-1 flex-col overflow-y-auto p-2">
<NavItem
to="/{-$orgSlug}"
label="Integrations"
active={isHome}
onNavigate={props.onNavigate}
/>
<NavItem
to="/{-$orgSlug}/secrets"
label="Secrets"
active={isSecrets}
onNavigate={props.onNavigate}
/>
<NavItem
to="/{-$orgSlug}/policies"
label="Policies"
active={isPolicies}
onNavigate={props.onNavigate}
/>
<NavItem
to="/{-$orgSlug}/toolkits"
label="Toolkits"
active={isToolkits}
onNavigate={props.onNavigate}
/>
<PluginNav pathname={props.pathname} onNavigate={props.onNavigate} />
{/* Sources list */}
<div className="mt-5 mb-1 px-2.5 text-xs font-medium uppercase tracking-widest text-muted-foreground">
<span>Integrations</span>
</div>
<IntegrationList pathname={props.pathname} onNavigate={props.onNavigate} />
</nav>
<SidebarUpdateCard />
{/* Footer */}
<div className="shrink-0 border-t border-sidebar-border px-4 py-2.5">
<div className="flex flex-col gap-1.5 text-xs leading-none">
<a
href="https://executor.sh/docs"
target="_blank"
rel="noreferrer"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Docs
</a>
<a
href={`${VITE_GITHUB_URL}/issues`}
target="_blank"
rel="noreferrer"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Feedback / bug?
</a>
<a
href={VITE_GITHUB_URL}
target="_blank"
rel="noreferrer"
className="text-muted-foreground transition-colors hover:text-foreground"
>
Star on GitHub
</a>
<span className="mt-0.5 text-xs text-muted-foreground tabular-nums">
v{VITE_APP_VERSION}
</span>
</div>
</div>
</>
);
}
// ── Shell ─────────────────────────────────────────────────────────────────
export function Shell() {
const location = useLocation();
const pathname = location.pathname;
const refreshSources = useAtomRefresh(integrationsAtom);
const refreshTools = useAtomRefresh(toolsAllAtom);
const lastPathname = useRef(pathname);
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
if (lastPathname.current !== pathname) {
lastPathname.current = pathname;
if (mobileSidebarOpen) setMobileSidebarOpen(false);
}
// Lock scroll when mobile sidebar open
useEffect(() => {
if (!mobileSidebarOpen) return;
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = prev;
};
}, [mobileSidebarOpen]);
useEffect(() => {
if (!import.meta.hot) {
return;
}
const refreshBackendData = () => {
refreshSources();
refreshTools();
};
import.meta.hot.on("executor:backend-updated", refreshBackendData);
return () => {
import.meta.hot?.off("executor:backend-updated", refreshBackendData);
};
}, [refreshSources, refreshTools]);
return (
<div className="flex h-screen overflow-hidden">
<CommandPalette />
{/* Desktop sidebar */}
<aside className="desktop-macos-sidebar hidden w-52 shrink-0 border-r border-sidebar-border bg-sidebar md:flex md:flex-col lg:w-56">
<SidebarContent pathname={pathname} />
</aside>
{/* Mobile sidebar overlay */}
{mobileSidebarOpen && (
<div className="fixed inset-0 z-50 flex md:hidden">
{/* oxlint-disable-next-line react/forbid-elements */}
<button
type="button"
aria-label="Close navigation"
className="absolute inset-0 bg-black/45 backdrop-blur-[1px]"
onClick={() => setMobileSidebarOpen(false)}
/>
<div className="relative flex h-full w-[84vw] max-w-xs flex-col border-r border-sidebar-border bg-sidebar shadow-2xl">
<div className="flex h-12 shrink-0 items-center justify-between border-b border-sidebar-border px-4">
<Link to="/{-$orgSlug}" className="flex items-center gap-1.5">
<span className="font-mono text-sm font-medium tracking-tight text-foreground">
executor
</span>
<span className="rounded bg-primary/15 px-1.5 py-px text-[10px] font-semibold uppercase tracking-wider text-primary">
Beta
</span>
</Link>
<Button
variant="ghost"
size="icon-sm"
aria-label="Close navigation"
onClick={() => setMobileSidebarOpen(false)}
className="text-sidebar-foreground hover:bg-sidebar-active hover:text-foreground"
>
<svg viewBox="0 0 16 16" className="size-3.5">
<path
d="M3 3l10 10M13 3L3 13"
stroke="currentColor"
strokeWidth="1.4"
strokeLinecap="round"
/>
</svg>
</Button>
</div>
<SidebarContent
pathname={pathname}
onNavigate={() => setMobileSidebarOpen(false)}
showBrand={false}
/>
</div>
</div>
)}
{/* Main content */}
<main className="relative flex min-h-0 flex-1 flex-col min-w-0 overflow-hidden">
{/* Desktop (macOS frameless) draggable title-bar strip. Gives the main
area the same native window drag + double-click-to-zoom as the
sidebar header; hidden everywhere else via CSS. Overlays the top of
the main area (behind page content) so page headers stay flush with
the top and their borders line up with the sidebar header. */}
<div className="desktop-macos-main-titlebar" />
{/* Mobile top bar */}
<div className="flex h-12 shrink-0 items-center justify-between border-b border-border bg-background px-4 md:hidden">
<Button
variant="outline"
size="icon-sm"
aria-label="Open navigation"
onClick={() => setMobileSidebarOpen(true)}
className="bg-card hover:bg-accent/50"
>
<svg viewBox="0 0 16 16" className="size-4">
<path
d="M2 4h12M2 8h12M2 12h12"
stroke="currentColor"
strokeWidth="1.2"
strokeLinecap="round"
/>
</svg>
</Button>
<Link to="/{-$orgSlug}" className="flex items-center gap-1.5">
<span className="font-mono text-sm font-medium tracking-tight text-foreground">
executor
</span>
</Link>
<div className="w-8 shrink-0" />
</div>
<Outlet />
</main>
</div>
);
}