@agent-native/dispatch 0.8.5 → 0.8.7

package/dist/routes/pages/apps.js

@@ -1,12 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from "react";
 import { useActionMutation, useActionQuery } from "@agent-native/core/client";
-import { IconApps, IconBrush, IconCalendarMonth, IconChartBar, IconClipboardList, IconEyeOff, IconFileText, IconLoader2, IconMail, IconPlus, IconPresentation, IconScreenShare, IconSparkles, IconStack3, IconVideo, } from "@tabler/icons-react";
+import { IconApps, IconBrush, IconCalendarMonth, IconChartBar, IconChevronDown, IconClipboardList, IconEyeOff, IconFileText, IconLoader2, IconMail, IconPlus, IconPresentation, IconScreenShare, IconSparkles, IconStack3, IconVideo, } from "@tabler/icons-react";
 import { toast } from "sonner";
 import { CreateAppPopover } from "../../components/create-app-popover.js";
 import { DispatchShell } from "../../components/dispatch-shell.js";
 import { WorkspaceAppCard } from "../../components/workspace-app-card.js";
 import { Button } from "../../components/ui/button.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "../../components/ui/collapsible.js";
+import { Skeleton } from "../../components/ui/skeleton.js";
+import { cn } from "../../lib/utils.js";
 export function meta() {
     return [{ title: "Apps — Dispatch" }];
 }
@@ -23,22 +26,34 @@ const TEMPLATE_ICONS = {
 };
 export default function AppsRoute() {
     const [showHidden, setShowHidden] = useState(false);
-    const { data: apps = [] } = useActionQuery("list-workspace-apps", { includeAgentCards: false, includeArchived: true }, {
+    const [templatesOpen, setTemplatesOpen] = useState(false);
+    const { data: apps = [], isLoading: appsLoading } = useActionQuery("list-workspace-apps", { includeAgentCards: false, includeArchived: true }, {
         refetchInterval: 2_000,
     });
     const { data: workspace } = useActionQuery("get-workspace-info", {}, { staleTime: 60_000 });
-    const { data: templates = [] } = useActionQuery("list-available-workspace-templates", {}, { refetchInterval: 5_000 });
+    const { data: templates = [], isLoading: templatesLoading } = useActionQuery("list-available-workspace-templates", {}, { refetchInterval: 5_000 });
     const ws = workspace;
     const workspaceLabel = ws?.displayName ?? ws?.name ?? null;
     const allApps = apps.filter((app) => !app.isDispatch);
     const visibleApps = allApps.filter((app) => !app.archived);
     const archivedApps = allApps.filter((app) => app.archived);
     const typedTemplates = templates;
+    const showAppSkeletons = appsLoading && allApps.length === 0;
     return (_jsx(DispatchShell, { title: "Apps", description: workspaceLabel
             ? `Apps in the "${workspaceLabel}" workspace. Each app gets its own route under this workspace and shares its database, auth, and agent chat.`
-            : "Open workspace apps and start new app creation from Dispatch.", children: _jsxs("div", { className: "space-y-6", children: [_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconApps, { size: 16, className: "text-muted-foreground" }), _jsx("h2", { className: "text-sm font-semibold text-foreground", children: workspaceLabel
-                                                ? `Apps in ${workspaceLabel}`
-                                                : "Workspace apps" })] }), _jsx(CreateAppPopover, { align: "end", trigger: _jsxs(Button, { size: "sm", variant: "outline", children: [_jsx(IconPlus, { size: 15, className: "mr-1.5" }), "App"] }) })] }), _jsxs("div", { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3", children: [visibleApps.map((app) => (_jsx(WorkspaceAppCard, { app: app }, app.id))), _jsx(CreateAppPopover, {})] })] }), typedTemplates.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconStack3, { size: 16, className: "text-muted-foreground" }), _jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Add a template" }), _jsxs("span", { className: "text-xs text-muted-foreground", children: ["Scaffold a first-party app into", " ", _jsx("code", { className: "font-mono text-[11px]", children: "apps/" }), "."] })] }), _jsx("div", { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3", children: typedTemplates.map((template) => (_jsx(AddTemplateCard, { template: template }, template.name))) })] })) : null, archivedApps.length > 0 ? (_jsxs("section", { className: "space-y-3", children: [_jsxs("button", { type: "button", onClick: () => setShowHidden((cur) => !cur), className: "inline-flex cursor-pointer items-center gap-2 text-xs text-muted-foreground hover:text-foreground", children: [_jsx(IconEyeOff, { size: 14 }), showHidden ? "Hide" : "Show", " ", archivedApps.length, " hidden", " ", archivedApps.length === 1 ? "app" : "apps"] }), showHidden ? (_jsx("div", { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3", children: archivedApps.map((app) => (_jsx(WorkspaceAppCard, { app: app }, app.id))) })) : null] })) : null] }) }));
+            : "Open workspace apps and start new app creation from Dispatch.", children: _jsxs("div", { className: "space-y-8", children: [_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-end justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-2", children: [_jsx(IconApps, { size: 16, className: "mt-0.5 shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "truncate text-sm font-semibold text-foreground", children: workspaceLabel
+                                                        ? `Apps in ${workspaceLabel}`
+                                                        : "Workspace apps" }), _jsxs("p", { className: "mt-0.5 text-xs text-muted-foreground", children: [visibleApps.length, " active", archivedApps.length > 0
+                                                            ? ` · ${archivedApps.length} hidden`
+                                                            : ""] })] })] }), visibleApps.length > 0 ? (_jsx(CreateAppPopover, { align: "end", trigger: _jsxs(Button, { size: "sm", children: [_jsx(IconPlus, { size: 15, className: "mr-1.5" }), "Create app"] }) })) : null] }), showAppSkeletons ? (_jsx(AppsSkeletonGrid, {})) : visibleApps.length > 0 ? (_jsx("div", { className: "grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3", children: visibleApps.map((app) => (_jsx(WorkspaceAppCard, { app: app, className: "h-full" }, app.id))) })) : (_jsx(EmptyAppsState, {}))] }), typedTemplates.length > 0 || templatesLoading ? (_jsx(Collapsible, { open: templatesOpen, onOpenChange: setTemplatesOpen, children: _jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t pt-4", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(IconStack3, { size: 16, className: "shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Templates" }), _jsx("p", { className: "text-xs text-muted-foreground", children: templatesLoading
+                                                            ? "Checking available templates"
+                                                            : `${typedTemplates.length} available to scaffold` })] })] }), _jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "gap-1.5", children: [templatesOpen ? "Hide" : "Show", _jsx(IconChevronDown, { size: 14, className: cn("transition-transform", templatesOpen && "rotate-180") })] }) })] }), _jsx(CollapsibleContent, { children: templatesLoading && typedTemplates.length === 0 ? (_jsx(AppsSkeletonGrid, {})) : (_jsx("div", { className: "grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3", children: typedTemplates.map((template) => (_jsx(AddTemplateCard, { template: template }, template.name))) })) })] }) })) : null, archivedApps.length > 0 ? (_jsx(Collapsible, { open: showHidden, onOpenChange: setShowHidden, children: _jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-t pt-4", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(IconEyeOff, { size: 16, className: "shrink-0 text-muted-foreground" }), _jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Hidden apps" }), _jsxs("p", { className: "text-xs text-muted-foreground", children: [archivedApps.length, " hidden", " ", archivedApps.length === 1 ? "app" : "apps"] })] })] }), _jsx(CollapsibleTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "gap-1.5", children: [showHidden ? "Hide" : "Show", _jsx(IconChevronDown, { size: 14, className: cn("transition-transform", showHidden && "rotate-180") })] }) })] }), _jsx(CollapsibleContent, { children: _jsx("div", { className: "grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3", children: archivedApps.map((app) => (_jsx(WorkspaceAppCard, { app: app, className: "h-full" }, app.id))) }) })] }) })) : null] }) }));
+}
+function AppsSkeletonGrid() {
+    return (_jsx("div", { className: "grid gap-3 md:grid-cols-2 xl:grid-cols-3", children: Array.from({ length: 3 }).map((_, index) => (_jsx("div", { className: "rounded-lg border bg-card p-4", children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [_jsx(Skeleton, { className: "h-4 w-32" }), _jsx(Skeleton, { className: "h-3 w-24" }), _jsxs("div", { className: "space-y-2 pt-1", children: [_jsx(Skeleton, { className: "h-3 w-full" }), _jsx(Skeleton, { className: "h-3 w-2/3" })] })] }), _jsx(Skeleton, { className: "h-7 w-7 rounded-md" })] }) }, index))) }));
+}
+function EmptyAppsState() {
+    return (_jsxs("div", { className: "rounded-lg border border-dashed bg-card px-4 py-10 text-center", children: [_jsx("div", { className: "mx-auto flex size-10 items-center justify-center rounded-lg bg-muted text-muted-foreground", children: _jsx(IconApps, { size: 18 }) }), _jsx("h3", { className: "mt-3 text-sm font-semibold text-foreground", children: "No workspace apps yet" }), _jsx("p", { className: "mx-auto mt-1 max-w-sm text-sm text-muted-foreground", children: "Create an app when a workflow needs its own focused place to live." }), _jsx("div", { className: "mt-4", children: _jsx(CreateAppPopover, { trigger: _jsxs(Button, { size: "sm", children: [_jsx(IconPlus, { size: 15, className: "mr-1.5" }), "Create app"] }) }) })] }));
 }
 function AddTemplateCard({ template }) {
     const Icon = TEMPLATE_ICONS[template.icon] ?? IconSparkles;
@@ -50,9 +65,9 @@ function AddTemplateCard({ template }) {
             toast.error(`Could not scaffold ${template.label}: ${err instanceof Error ? err.message : String(err)}`);
         },
     });
-    return (_jsxs("div", { className: "group relative flex items-start gap-3 rounded-lg border bg-card p-4 transition hover:border-foreground/30", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-md", style: {
+    return (_jsxs("div", { className: "group relative flex h-full min-h-36 items-stretch gap-3 rounded-lg border bg-card p-4 transition hover:border-foreground/30", children: [_jsx("div", { className: "flex h-9 w-9 shrink-0 items-center justify-center self-start rounded-md", style: {
                     backgroundColor: `rgb(${template.colorRgb} / 0.12)`,
                     color: template.color,
-                }, children: _jsx(Icon, { size: 18 }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "flex min-w-0 items-center gap-2", children: _jsx("h3", { className: "truncate text-sm font-semibold text-foreground", children: template.label }) }), _jsx("p", { className: "mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground", children: template.hint }), _jsx("div", { className: "mt-3", children: _jsx(Button, { size: "sm", variant: "outline", disabled: scaffold.isPending, onClick: () => scaffold.mutate({ template: template.name }), children: scaffold.isPending ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 14, className: "mr-1.5 animate-spin" }), "Adding\u2026"] })) : (_jsxs(_Fragment, { children: [_jsx(IconPlus, { size: 14, className: "mr-1.5" }), "Add to workspace"] })) }) })] })] }));
+                }, children: _jsx(Icon, { size: 18 }) }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("div", { className: "flex min-w-0 items-center gap-2", children: _jsx("h3", { className: "truncate text-sm font-semibold text-foreground", children: template.label }) }), _jsx("p", { className: "mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground", children: template.hint }), _jsx("div", { className: "mt-auto pt-3", children: _jsx(Button, { size: "sm", variant: "outline", disabled: scaffold.isPending, onClick: () => scaffold.mutate({ template: template.name }), children: scaffold.isPending ? (_jsxs(_Fragment, { children: [_jsx(IconLoader2, { size: 14, className: "mr-1.5 animate-spin" }), "Adding..."] })) : (_jsxs(_Fragment, { children: [_jsx(IconPlus, { size: 14, className: "mr-1.5" }), "Add to workspace"] })) }) })] })] }));
 }
 //# sourceMappingURL=apps.js.map

package/dist/routes/pages/apps.js.map

@@ -1 +1 @@
-{"version":3,"file":"apps.js","sourceRoot":"","sources":["../../../src/routes/pages/apps.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useActionMutation, useActionQuery } from \"@agent-native/core/client\";\nimport {\n  IconApps,\n  IconBrush,\n  IconCalendarMonth,\n  IconChartBar,\n  IconClipboardList,\n  IconEyeOff,\n  IconFileText,\n  IconLoader2,\n  IconMail,\n  IconPlus,\n  IconPresentation,\n  IconScreenShare,\n  IconSparkles,\n  IconStack3,\n  IconVideo,\n} from \"@tabler/icons-react\";\nimport { toast } from \"sonner\";\nimport { CreateAppPopover } from \"@/components/create-app-popover\";\nimport { DispatchShell } from \"@/components/dispatch-shell\";\nimport { WorkspaceAppCard } from \"@/components/workspace-app-card\";\nimport { Button } from \"@/components/ui/button\";\nimport type { WorkspaceAppSummary } from \"@/lib/workspace-apps\";\n\nexport function meta() {\n  return [{ title: \"Apps — Dispatch\" }];\n}\n\ninterface WorkspaceInfo {\n  name: string | null;\n  displayName: string | null;\n  appCount: number;\n}\n\ninterface AvailableTemplate {\n  name: string;\n  label: string;\n  hint: string;\n  icon: string;\n  color: string;\n  colorRgb: string;\n  core: boolean;\n}\n\nconst TEMPLATE_ICONS: Record<string, typeof IconMail> = {\n  Mail: IconMail,\n  CalendarMonth: IconCalendarMonth,\n  FileText: IconFileText,\n  Presentation: IconPresentation,\n  ScreenShare: IconScreenShare,\n  ChartBar: IconChartBar,\n  ClipboardList: IconClipboardList,\n  Brush: IconBrush,\n  Video: IconVideo,\n};\n\nexport default function AppsRoute() {\n  const [showHidden, setShowHidden] = useState(false);\n  const { data: apps = [] } = useActionQuery(\n    \"list-workspace-apps\",\n    { includeAgentCards: false, includeArchived: true },\n    {\n      refetchInterval: 2_000,\n    },\n  );\n  const { data: workspace } = useActionQuery(\n    \"get-workspace-info\",\n    {},\n    { staleTime: 60_000 },\n  );\n  const { data: templates = [] } = useActionQuery(\n    \"list-available-workspace-templates\",\n    {},\n    { refetchInterval: 5_000 },\n  );\n\n  const ws = workspace as WorkspaceInfo | undefined;\n  const workspaceLabel = ws?.displayName ?? ws?.name ?? null;\n  const allApps = (apps as WorkspaceAppSummary[]).filter(\n    (app) => !app.isDispatch,\n  );\n  const visibleApps = allApps.filter((app) => !app.archived);\n  const archivedApps = allApps.filter((app) => app.archived);\n  const typedTemplates = templates as AvailableTemplate[];\n\n  return (\n    <DispatchShell\n      title=\"Apps\"\n      description={\n        workspaceLabel\n          ? `Apps in the \"${workspaceLabel}\" workspace. Each app gets its own route under this workspace and shares its database, auth, and agent chat.`\n          : \"Open workspace apps and start new app creation from Dispatch.\"\n      }\n    >\n      <div className=\"space-y-6\">\n        <section className=\"space-y-3\">\n          <div className=\"flex items-center justify-between gap-3\">\n            <div className=\"flex items-center gap-2\">\n              <IconApps size={16} className=\"text-muted-foreground\" />\n              <h2 className=\"text-sm font-semibold text-foreground\">\n                {workspaceLabel\n                  ? `Apps in ${workspaceLabel}`\n                  : \"Workspace apps\"}\n              </h2>\n            </div>\n            <CreateAppPopover\n              align=\"end\"\n              trigger={\n                <Button size=\"sm\" variant=\"outline\">\n                  <IconPlus size={15} className=\"mr-1.5\" />\n                  App\n                </Button>\n              }\n            />\n          </div>\n\n          <div className=\"grid gap-3 md:grid-cols-2 xl:grid-cols-3\">\n            {visibleApps.map((app) => (\n              <WorkspaceAppCard key={app.id} app={app} />\n            ))}\n\n            <CreateAppPopover />\n          </div>\n        </section>\n\n        {typedTemplates.length > 0 ? (\n          <section className=\"space-y-3\">\n            <div className=\"flex items-center gap-2\">\n              <IconStack3 size={16} className=\"text-muted-foreground\" />\n              <h2 className=\"text-sm font-semibold text-foreground\">\n                Add a template\n              </h2>\n              <span className=\"text-xs text-muted-foreground\">\n                Scaffold a first-party app into{\" \"}\n                <code className=\"font-mono text-[11px]\">apps/</code>.\n              </span>\n            </div>\n            <div className=\"grid gap-3 md:grid-cols-2 xl:grid-cols-3\">\n              {typedTemplates.map((template) => (\n                <AddTemplateCard key={template.name} template={template} />\n              ))}\n            </div>\n          </section>\n        ) : null}\n\n        {archivedApps.length > 0 ? (\n          <section className=\"space-y-3\">\n            <button\n              type=\"button\"\n              onClick={() => setShowHidden((cur) => !cur)}\n              className=\"inline-flex cursor-pointer items-center gap-2 text-xs text-muted-foreground hover:text-foreground\"\n            >\n              <IconEyeOff size={14} />\n              {showHidden ? \"Hide\" : \"Show\"} {archivedApps.length} hidden{\" \"}\n              {archivedApps.length === 1 ? \"app\" : \"apps\"}\n            </button>\n            {showHidden ? (\n              <div className=\"grid gap-3 md:grid-cols-2 xl:grid-cols-3\">\n                {archivedApps.map((app) => (\n                  <WorkspaceAppCard key={app.id} app={app} />\n                ))}\n              </div>\n            ) : null}\n          </section>\n        ) : null}\n      </div>\n    </DispatchShell>\n  );\n}\n\nfunction AddTemplateCard({ template }: { template: AvailableTemplate }) {\n  const Icon = TEMPLATE_ICONS[template.icon] ?? IconSparkles;\n  const scaffold = useActionMutation(\"scaffold-workspace-app\", {\n    onSuccess: (result: any) => {\n      toast.success(\n        `Scaffolded apps/${result?.appId || template.name}. The gateway will pick it up shortly.`,\n      );\n    },\n    onError: (err) => {\n      toast.error(\n        `Could not scaffold ${template.label}: ${\n          err instanceof Error ? err.message : String(err)\n        }`,\n      );\n    },\n  });\n\n  return (\n    <div className=\"group relative flex items-start gap-3 rounded-lg border bg-card p-4 transition hover:border-foreground/30\">\n      <div\n        className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-md\"\n        style={{\n          backgroundColor: `rgb(${template.colorRgb} / 0.12)`,\n          color: template.color,\n        }}\n      >\n        <Icon size={18} />\n      </div>\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <h3 className=\"truncate text-sm font-semibold text-foreground\">\n            {template.label}\n          </h3>\n        </div>\n        <p className=\"mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground\">\n          {template.hint}\n        </p>\n        <div className=\"mt-3\">\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={scaffold.isPending}\n            onClick={() => scaffold.mutate({ template: template.name })}\n          >\n            {scaffold.isPending ? (\n              <>\n                <IconLoader2 size={14} className=\"mr-1.5 animate-spin\" />\n                Adding…\n              </>\n            ) : (\n              <>\n                <IconPlus size={14} className=\"mr-1.5\" />\n                Add to workspace\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"apps.js","sourceRoot":"","sources":["../../../src/routes/pages/apps.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { useActionMutation, useActionQuery } from \"@agent-native/core/client\";\nimport {\n  IconApps,\n  IconBrush,\n  IconCalendarMonth,\n  IconChartBar,\n  IconChevronDown,\n  IconClipboardList,\n  IconEyeOff,\n  IconFileText,\n  IconLoader2,\n  IconMail,\n  IconPlus,\n  IconPresentation,\n  IconScreenShare,\n  IconSparkles,\n  IconStack3,\n  IconVideo,\n} from \"@tabler/icons-react\";\nimport { toast } from \"sonner\";\nimport { CreateAppPopover } from \"@/components/create-app-popover\";\nimport { DispatchShell } from \"@/components/dispatch-shell\";\nimport { WorkspaceAppCard } from \"@/components/workspace-app-card\";\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"@/components/ui/collapsible\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/utils\";\nimport type { WorkspaceAppSummary } from \"@/lib/workspace-apps\";\n\nexport function meta() {\n  return [{ title: \"Apps — Dispatch\" }];\n}\n\ninterface WorkspaceInfo {\n  name: string | null;\n  displayName: string | null;\n  appCount: number;\n}\n\ninterface AvailableTemplate {\n  name: string;\n  label: string;\n  hint: string;\n  icon: string;\n  color: string;\n  colorRgb: string;\n  core: boolean;\n}\n\nconst TEMPLATE_ICONS: Record<string, typeof IconMail> = {\n  Mail: IconMail,\n  CalendarMonth: IconCalendarMonth,\n  FileText: IconFileText,\n  Presentation: IconPresentation,\n  ScreenShare: IconScreenShare,\n  ChartBar: IconChartBar,\n  ClipboardList: IconClipboardList,\n  Brush: IconBrush,\n  Video: IconVideo,\n};\n\nexport default function AppsRoute() {\n  const [showHidden, setShowHidden] = useState(false);\n  const [templatesOpen, setTemplatesOpen] = useState(false);\n  const { data: apps = [], isLoading: appsLoading } = useActionQuery(\n    \"list-workspace-apps\",\n    { includeAgentCards: false, includeArchived: true },\n    {\n      refetchInterval: 2_000,\n    },\n  );\n  const { data: workspace } = useActionQuery(\n    \"get-workspace-info\",\n    {},\n    { staleTime: 60_000 },\n  );\n  const { data: templates = [], isLoading: templatesLoading } = useActionQuery(\n    \"list-available-workspace-templates\",\n    {},\n    { refetchInterval: 5_000 },\n  );\n\n  const ws = workspace as WorkspaceInfo | undefined;\n  const workspaceLabel = ws?.displayName ?? ws?.name ?? null;\n  const allApps = (apps as WorkspaceAppSummary[]).filter(\n    (app) => !app.isDispatch,\n  );\n  const visibleApps = allApps.filter((app) => !app.archived);\n  const archivedApps = allApps.filter((app) => app.archived);\n  const typedTemplates = templates as AvailableTemplate[];\n  const showAppSkeletons = appsLoading && allApps.length === 0;\n\n  return (\n    <DispatchShell\n      title=\"Apps\"\n      description={\n        workspaceLabel\n          ? `Apps in the \"${workspaceLabel}\" workspace. Each app gets its own route under this workspace and shares its database, auth, and agent chat.`\n          : \"Open workspace apps and start new app creation from Dispatch.\"\n      }\n    >\n      <div className=\"space-y-8\">\n        <section className=\"space-y-3\">\n          <div className=\"flex flex-wrap items-end justify-between gap-3\">\n            <div className=\"flex min-w-0 items-start gap-2\">\n              <IconApps\n                size={16}\n                className=\"mt-0.5 shrink-0 text-muted-foreground\"\n              />\n              <div className=\"min-w-0\">\n                <h2 className=\"truncate text-sm font-semibold text-foreground\">\n                  {workspaceLabel\n                    ? `Apps in ${workspaceLabel}`\n                    : \"Workspace apps\"}\n                </h2>\n                <p className=\"mt-0.5 text-xs text-muted-foreground\">\n                  {visibleApps.length} active\n                  {archivedApps.length > 0\n                    ? ` · ${archivedApps.length} hidden`\n                    : \"\"}\n                </p>\n              </div>\n            </div>\n            {visibleApps.length > 0 ? (\n              <CreateAppPopover\n                align=\"end\"\n                trigger={\n                  <Button size=\"sm\">\n                    <IconPlus size={15} className=\"mr-1.5\" />\n                    Create app\n                  </Button>\n                }\n              />\n            ) : null}\n          </div>\n\n          {showAppSkeletons ? (\n            <AppsSkeletonGrid />\n          ) : visibleApps.length > 0 ? (\n            <div className=\"grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3\">\n              {visibleApps.map((app) => (\n                <WorkspaceAppCard key={app.id} app={app} className=\"h-full\" />\n              ))}\n            </div>\n          ) : (\n            <EmptyAppsState />\n          )}\n        </section>\n\n        {typedTemplates.length > 0 || templatesLoading ? (\n          <Collapsible open={templatesOpen} onOpenChange={setTemplatesOpen}>\n            <section className=\"space-y-3\">\n              <div className=\"flex flex-wrap items-center justify-between gap-3 border-t pt-4\">\n                <div className=\"flex min-w-0 items-center gap-2\">\n                  <IconStack3\n                    size={16}\n                    className=\"shrink-0 text-muted-foreground\"\n                  />\n                  <div className=\"min-w-0\">\n                    <h2 className=\"text-sm font-semibold text-foreground\">\n                      Templates\n                    </h2>\n                    <p className=\"text-xs text-muted-foreground\">\n                      {templatesLoading\n                        ? \"Checking available templates\"\n                        : `${typedTemplates.length} available to scaffold`}\n                    </p>\n                  </div>\n                </div>\n                <CollapsibleTrigger asChild>\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"gap-1.5\"\n                  >\n                    {templatesOpen ? \"Hide\" : \"Show\"}\n                    <IconChevronDown\n                      size={14}\n                      className={cn(\n                        \"transition-transform\",\n                        templatesOpen && \"rotate-180\",\n                      )}\n                    />\n                  </Button>\n                </CollapsibleTrigger>\n              </div>\n              <CollapsibleContent>\n                {templatesLoading && typedTemplates.length === 0 ? (\n                  <AppsSkeletonGrid />\n                ) : (\n                  <div className=\"grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3\">\n                    {typedTemplates.map((template) => (\n                      <AddTemplateCard\n                        key={template.name}\n                        template={template}\n                      />\n                    ))}\n                  </div>\n                )}\n              </CollapsibleContent>\n            </section>\n          </Collapsible>\n        ) : null}\n\n        {archivedApps.length > 0 ? (\n          <Collapsible open={showHidden} onOpenChange={setShowHidden}>\n            <section className=\"space-y-3\">\n              <div className=\"flex flex-wrap items-center justify-between gap-3 border-t pt-4\">\n                <div className=\"flex min-w-0 items-center gap-2\">\n                  <IconEyeOff\n                    size={16}\n                    className=\"shrink-0 text-muted-foreground\"\n                  />\n                  <div className=\"min-w-0\">\n                    <h2 className=\"text-sm font-semibold text-foreground\">\n                      Hidden apps\n                    </h2>\n                    <p className=\"text-xs text-muted-foreground\">\n                      {archivedApps.length} hidden{\" \"}\n                      {archivedApps.length === 1 ? \"app\" : \"apps\"}\n                    </p>\n                  </div>\n                </div>\n                <CollapsibleTrigger asChild>\n                  <Button\n                    type=\"button\"\n                    variant=\"outline\"\n                    size=\"sm\"\n                    className=\"gap-1.5\"\n                  >\n                    {showHidden ? \"Hide\" : \"Show\"}\n                    <IconChevronDown\n                      size={14}\n                      className={cn(\n                        \"transition-transform\",\n                        showHidden && \"rotate-180\",\n                      )}\n                    />\n                  </Button>\n                </CollapsibleTrigger>\n              </div>\n              <CollapsibleContent>\n                <div className=\"grid auto-rows-fr gap-3 md:grid-cols-2 xl:grid-cols-3\">\n                  {archivedApps.map((app) => (\n                    <WorkspaceAppCard\n                      key={app.id}\n                      app={app}\n                      className=\"h-full\"\n                    />\n                  ))}\n                </div>\n              </CollapsibleContent>\n            </section>\n          </Collapsible>\n        ) : null}\n      </div>\n    </DispatchShell>\n  );\n}\n\nfunction AppsSkeletonGrid() {\n  return (\n    <div className=\"grid gap-3 md:grid-cols-2 xl:grid-cols-3\">\n      {Array.from({ length: 3 }).map((_, index) => (\n        <div key={index} className=\"rounded-lg border bg-card p-4\">\n          <div className=\"flex items-start justify-between gap-3\">\n            <div className=\"min-w-0 flex-1 space-y-3\">\n              <Skeleton className=\"h-4 w-32\" />\n              <Skeleton className=\"h-3 w-24\" />\n              <div className=\"space-y-2 pt-1\">\n                <Skeleton className=\"h-3 w-full\" />\n                <Skeleton className=\"h-3 w-2/3\" />\n              </div>\n            </div>\n            <Skeleton className=\"h-7 w-7 rounded-md\" />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction EmptyAppsState() {\n  return (\n    <div className=\"rounded-lg border border-dashed bg-card px-4 py-10 text-center\">\n      <div className=\"mx-auto flex size-10 items-center justify-center rounded-lg bg-muted text-muted-foreground\">\n        <IconApps size={18} />\n      </div>\n      <h3 className=\"mt-3 text-sm font-semibold text-foreground\">\n        No workspace apps yet\n      </h3>\n      <p className=\"mx-auto mt-1 max-w-sm text-sm text-muted-foreground\">\n        Create an app when a workflow needs its own focused place to live.\n      </p>\n      <div className=\"mt-4\">\n        <CreateAppPopover\n          trigger={\n            <Button size=\"sm\">\n              <IconPlus size={15} className=\"mr-1.5\" />\n              Create app\n            </Button>\n          }\n        />\n      </div>\n    </div>\n  );\n}\n\nfunction AddTemplateCard({ template }: { template: AvailableTemplate }) {\n  const Icon = TEMPLATE_ICONS[template.icon] ?? IconSparkles;\n  const scaffold = useActionMutation(\"scaffold-workspace-app\", {\n    onSuccess: (result: any) => {\n      toast.success(\n        `Scaffolded apps/${result?.appId || template.name}. The gateway will pick it up shortly.`,\n      );\n    },\n    onError: (err) => {\n      toast.error(\n        `Could not scaffold ${template.label}: ${\n          err instanceof Error ? err.message : String(err)\n        }`,\n      );\n    },\n  });\n\n  return (\n    <div className=\"group relative flex h-full min-h-36 items-stretch gap-3 rounded-lg border bg-card p-4 transition hover:border-foreground/30\">\n      <div\n        className=\"flex h-9 w-9 shrink-0 items-center justify-center self-start rounded-md\"\n        style={{\n          backgroundColor: `rgb(${template.colorRgb} / 0.12)`,\n          color: template.color,\n        }}\n      >\n        <Icon size={18} />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <h3 className=\"truncate text-sm font-semibold text-foreground\">\n            {template.label}\n          </h3>\n        </div>\n        <p className=\"mt-1 line-clamp-2 text-xs leading-relaxed text-muted-foreground\">\n          {template.hint}\n        </p>\n        <div className=\"mt-auto pt-3\">\n          <Button\n            size=\"sm\"\n            variant=\"outline\"\n            disabled={scaffold.isPending}\n            onClick={() => scaffold.mutate({ template: template.name })}\n          >\n            {scaffold.isPending ? (\n              <>\n                <IconLoader2 size={14} className=\"mr-1.5 animate-spin\" />\n                Adding...\n              </>\n            ) : (\n              <>\n                <IconPlus size={14} className=\"mr-1.5\" />\n                Add to workspace\n              </>\n            )}\n          </Button>\n        </div>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/routes/pages/metrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"metrics.d.ts","sourceRoot":"","sources":["../../../src/routes/pages/metrics.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,IAAI;;IAEnB;AAsmBD,MAAM,CAAC,OAAO,UAAU,YAAY,4CAsInC"}
+{"version":3,"file":"metrics.d.ts","sourceRoot":"","sources":["../../../src/routes/pages/metrics.tsx"],"names":[],"mappings":"AAmBA,wBAAgB,IAAI;;IAEnB;AAymBD,MAAM,CAAC,OAAO,UAAU,YAAY,4CAsInC"}

package/dist/routes/pages/metrics.js

@@ -123,7 +123,9 @@ function AppAccessTable({ rows, billing, }) {
         return (_jsx("div", { className: "rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground", children: "No workspace apps discovered yet." }));
     }
     return (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full min-w-[720px] text-left text-xs", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b text-muted-foreground", children: [_jsx("th", { className: "px-2 py-2 font-medium", children: "App" }), _jsx("th", { className: "px-2 py-2 font-medium", children: "Access" }), _jsx("th", { className: "px-2 py-2 text-right font-medium", children: "Users" }), _jsx("th", { className: "px-2 py-2 text-right font-medium", children: "Chats" }), _jsx("th", { className: "px-2 py-2 text-right font-medium", children: billing.shortLabel }), _jsx("th", { className: "px-2 py-2 text-right font-medium", children: "Last activity" })] }) }), _jsx("tbody", { children: visibleRows.map((row) => (_jsxs("tr", { className: "border-b last:border-0", children: [_jsxs("td", { className: "px-2 py-3", children: [_jsx("div", { className: "font-medium text-foreground", children: row.name }), _jsx("div", { className: "font-mono text-[11px] text-muted-foreground", children: row.path })] }), _jsx("td", { className: "px-2 py-3", children: _jsx(Badge, { variant: "outline", className: cn(row.status === "pending" &&
-                                        "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"), children: row.status === "pending" ? "Building" : row.accessLabel }) }), _jsxs("td", { className: "px-2 py-3 text-right tabular-nums", children: [formatNumber(row.usersWithUsage), " /", " ", formatNumber(row.accessUsers)] }), _jsx("td", { className: "px-2 py-3 text-right tabular-nums", children: formatNumber(row.chatCalls) }), _jsx("td", { className: "px-2 py-3 text-right tabular-nums", children: formatSpend(row.costCents, billing) }), _jsx("td", { className: "px-2 py-3 text-right text-muted-foreground", children: timeAgo(row.lastActiveAt) })] }, row.id))) })] }) }));
+                                        "border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300"), children: row.status === "pending"
+                                        ? row.statusLabel || "Builder branch"
+                                        : row.accessLabel }) }), _jsxs("td", { className: "px-2 py-3 text-right tabular-nums", children: [formatNumber(row.usersWithUsage), " /", " ", formatNumber(row.accessUsers)] }), _jsx("td", { className: "px-2 py-3 text-right tabular-nums", children: formatNumber(row.chatCalls) }), _jsx("td", { className: "px-2 py-3 text-right tabular-nums", children: formatSpend(row.costCents, billing) }), _jsx("td", { className: "px-2 py-3 text-right text-muted-foreground", children: timeAgo(row.lastActiveAt) })] }, row.id))) })] }) }));
 }
 function UserTable({ rows, billing, }) {
     if (rows.length === 0) {

package/dist/routes/pages/metrics.js.map

@@ -1 +1 @@
-{"version":3,"file":"metrics.js","sourceRoot":"","sources":["../../../src/routes/pages/metrics.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EACL,YAAY,EACZ,iBAAiB,EACjB,QAAQ,EACR,YAAY,EACZ,cAAc,EACd,QAAQ,EACR,YAAY,EACZ,cAAc,GACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AAEjC,MAAM,UAAU,IAAI;IAClB,OAAO,CAAC,EAAE,KAAK,EAAE,oBAAoB,EAAE,CAAC,CAAC;AAC3C,CAAC;AAmGD,MAAM,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,CAAU,CAAC;AAEpC,MAAM,WAAW,GAAqB;IACpC,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,iBAAiB;IACxB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,yBAAyB;CAClC,CAAC;AAEF,SAAS,0BAA0B,CACjC,KAAa,EACb,OAAyB;IAEzB,IAAI,OAAO,CAAC,IAAI,KAAK,iBAAiB;QAAE,OAAO,KAAK,CAAC;IACrD,MAAM,MAAM,GAAG,OAAO,CAAC,wBAAwB,IAAI,IAAI,CAAC;IACxD,MAAM,aAAa,GAAG,OAAO,CAAC,aAAa,IAAI,EAAE,CAAC;IAClD,MAAM,OAAO,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,MAAM,GAAG,aAAa,CAAC;IACvD,OAAO,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;AAC7D,CAAC;AAED,SAAS,aAAa,CAAC,OAAe;IACpC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,OAAO,KAAK,CAAC;QAAE,OAAO,WAAW,CAAC;IACnE,MAAM,qBAAqB,GAAG,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACrE,MAAM,KAAK,GAAG,OAAO,CAAC,cAAc,CAAC,SAAS,EAAE;QAC9C,qBAAqB;KACtB,CAAC,CAAC;IACH,OAAO,GAAG,KAAK,IAAI,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EAAE,CAAC;AAC5D,CAAC;AAED,SAAS,WAAW,CAAC,KAAa,EAAE,OAAyB;IAC3D,IAAI,OAAO,CAAC,IAAI,KAAK,iBAAiB,EAAE,CAAC;QACvC,OAAO,aAAa,CAAC,0BAA0B,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC;IACnE,CAAC;IACD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,OAAO,CAAC;IAC3D,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC;QAAE,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;IACvD,IAAI,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,GAAG;QAAE,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;IACzD,OAAO,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,cAAc,CAAC,SAAS,EAAE;QAC7C,KAAK,EAAE,UAAU;QACjB,QAAQ,EAAE,KAAK;QACf,qBAAqB,EAAE,CAAC;KACzB,CAAC,CAAC;AACL,CAAC;AAED,SAAS,YAAY,CAAC,KAAa;IACjC,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE;QACtC,QAAQ,EAAE,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,UAAU;QAClD,qBAAqB,EAAE,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;KAC/C,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACnB,CAAC;AAED,SAAS,YAAY,CAAC,KAAa;IACjC,OAAO,IAAI,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE;QACtC,QAAQ,EAAE,SAAS;QACnB,qBAAqB,EAAE,CAAC;KACzB,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACnB,CAAC;AAED,SAAS,OAAO,CAAC,SAAwB;IACvC,IAAI,CAAC,SAAS;QAAE,OAAO,aAAa,CAAC;IACrC,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,SAAS,CAAC;IACpC,IAAI,IAAI,GAAG,MAAM;QAAE,OAAO,UAAU,CAAC;IACrC,IAAI,IAAI,GAAG,SAAS;QAAE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,MAAM,CAAC,OAAO,CAAC;IACjE,IAAI,IAAI,GAAG,UAAU;QAAE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC;IACrE,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC,OAAO,CAAC;AACjD,CAAC;AAED,SAAS,UAAU,CAAC,KAAgC;IAClD,MAAM,OAAO,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC;IAC9B,IAAI,CAAC,OAAO,IAAI,OAAO,KAAK,cAAc;QAAE,OAAO,cAAc,CAAC;IAClE,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,SAAS,QAAQ,CACf,IAAkC,EAClC,OAAyB;IAEzB,OAAO,IAAI,CAAC,MAAM,CAChB,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CACX,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,0BAA0B,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,EACnE,CAAC,CACF,CAAC;AACJ,CAAC;AAED,SAAS,QAAQ,CAAC,KAAa,EAAE,GAAW;IAC1C,IAAI,GAAG,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC;IACxC,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,CAAC;AAC5D,CAAC;AAED,SAAS,aAAa,CAAC,EACrB,KAAK,EACL,QAAQ,GAIT;IACC,OAAO,CACL,cAAK,SAAS,EAAC,sCAAsC,YAClD,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CACrB,MAAC,MAAM,IAEL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,EAChD,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,kBAAkB,EAC5B,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,aAE7B,KAAK,UAPD,KAAK,CAQH,CACV,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,UAAU,CAAC,EAClB,KAAK,EACL,KAAK,EACL,MAAM,EACN,IAAI,GAML;IACC,OAAO,CACL,eAAK,SAAS,EAAC,+BAA+B,aAC5C,eAAK,SAAS,EAAC,8CAA8C,aAC3D,eAAM,SAAS,EAAC,2CAA2C,YACxD,KAAK,GACD,EACP,eAAM,SAAS,EAAC,uBAAuB,YAAE,IAAI,GAAQ,IACjD,EACN,cAAK,SAAS,EAAC,qDAAqD,YACjE,KAAK,GACF,EACN,cAAK,SAAS,EAAC,6CAA6C,YACzD,MAAM,GACH,IACF,CACP,CAAC;AACJ,CAAC;AAED,SAAS,KAAK,CAAC,EACb,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,MAAM,GAMP;IACC,OAAO,CACL,mBAAS,SAAS,EAAC,2BAA2B,aAC5C,eAAK,SAAS,EAAC,4DAA4D,aACzE,eAAK,SAAS,EAAC,iCAAiC,aAC9C,eAAM,SAAS,EAAC,uBAAuB,YAAE,IAAI,GAAQ,EACrD,aAAI,SAAS,EAAC,gDAAgD,YAC3D,KAAK,GACH,IACD,EACL,MAAM,IACH,EACN,cAAK,SAAS,EAAC,KAAK,YAAE,QAAQ,GAAO,IAC7B,CACX,CAAC;AACJ,CAAC;AAED,SAAS,cAAc;IACrB,OAAO,CACL,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,0CAA0C,YACtD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,eAAiB,SAAS,EAAC,+BAA+B,aACxD,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,EACtC,KAAC,QAAQ,IAAC,SAAS,EAAC,UAAU,GAAG,EACjC,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,KAH9B,KAAK,CAIT,CACP,CAAC,GACE,EACN,KAAC,QAAQ,IAAC,SAAS,EAAC,iBAAiB,GAAG,IACpC,CACP,CAAC;AACJ,CAAC;AAED,SAAS,YAAY,CAAC,EACpB,IAAI,EACJ,OAAO,GAIR;IACC,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACpC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,CACL,cAAK,SAAS,EAAC,yEAAyE,uDAElF,CACP,CAAC;IACJ,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,YACvB,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,eAAmB,SAAS,EAAC,aAAa,aACxC,eAAK,SAAS,EAAC,iDAAiD,aAC9D,eAAK,SAAS,EAAC,SAAS,aACtB,cAAK,SAAS,EAAC,sCAAsC,YAClD,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,GAChB,EACN,eAAK,SAAS,EAAC,+BAA+B,aAC3C,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,mBAAU,GAAG,EACxC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,cAC1B,IACF,EACN,eAAK,SAAS,EAAC,qBAAqB,aAClC,cAAK,SAAS,EAAC,0CAA0C,YACtD,WAAW,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,GAChC,EACN,eAAK,SAAS,EAAC,+BAA+B,aAC3C,YAAY,CAAC,GAAG,CAAC,KAAK,CAAC,cACpB,IACF,IACF,EACN,cAAK,SAAS,EAAC,2CAA2C,YACxD,cACE,SAAS,EAAC,mCAAmC,EAC7C,KAAK,EAAE;4BACL,KAAK,EAAE,QAAQ,CACb,0BAA0B,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,EAClD,GAAG,CACJ;yBACF,GACD,GACE,KA9BE,GAAG,CAAC,GAAG,CA+BX,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,aAAa,CAAC,EAAE,IAAI,EAAgC;IAC3D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAClB,CAAC,EACD,IAAI,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAC3D,CAAC;IACF,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,CACL,cAAK,SAAS,EAAC,yEAAyE,4CAElF,CACP,CAAC;IACJ,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAC,2BAA2B,YACvC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACjB,eAEE,SAAS,EAAC,uDAAuD,aAEjE,cAAK,SAAS,EAAC,4DAA4D,YACzE,cACE,SAAS,EAAC,mEAAmE,EAC7E,KAAK,EAAE,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,EAAE,GAC7D,GACE,EACN,cAAK,SAAS,EAAC,mDAAmD,YAC/D,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GACd,KAXD,GAAG,CAAC,IAAI,CAYT,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,cAAc,CAAC,EACtB,IAAI,EACJ,OAAO,GAIR;IACC,MAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;IAC1D,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QAC7B,OAAO,CACL,cAAK,SAAS,EAAC,yEAAyE,kDAElF,CACP,CAAC;IACJ,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAC,iBAAiB,YAC9B,iBAAO,SAAS,EAAC,wCAAwC,aACvD,0BACE,cAAI,SAAS,EAAC,gCAAgC,aAC5C,aAAI,SAAS,EAAC,uBAAuB,oBAAS,EAC9C,aAAI,SAAS,EAAC,uBAAuB,uBAAY,EACjD,aAAI,SAAS,EAAC,kCAAkC,sBAAW,EAC3D,aAAI,SAAS,EAAC,kCAAkC,sBAAW,EAC3D,aAAI,SAAS,EAAC,kCAAkC,YAC7C,OAAO,CAAC,UAAU,GAChB,EACL,aAAI,SAAS,EAAC,kCAAkC,8BAAmB,IAChE,GACC,EACR,0BACG,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACxB,cAAiB,SAAS,EAAC,wBAAwB,aACjD,cAAI,SAAS,EAAC,WAAW,aACvB,cAAK,SAAS,EAAC,6BAA6B,YAAE,GAAG,CAAC,IAAI,GAAO,EAC7D,cAAK,SAAS,EAAC,6CAA6C,YACzD,GAAG,CAAC,IAAI,GACL,IACH,EACL,aAAI,SAAS,EAAC,WAAW,YACvB,KAAC,KAAK,IACJ,OAAO,EAAC,SAAS,EACjB,SAAS,EAAE,EAAE,CACX,GAAG,CAAC,MAAM,KAAK,SAAS;wCACtB,wEAAwE,CAC3E,YAEA,GAAG,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,GAClD,GACL,EACL,cAAI,SAAS,EAAC,mCAAmC,aAC9C,YAAY,CAAC,GAAG,CAAC,cAAc,CAAC,QAAI,GAAG,EACvC,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,IAC3B,EACL,aAAI,SAAS,EAAC,mCAAmC,YAC9C,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,GACzB,EACL,aAAI,SAAS,EAAC,mCAAmC,YAC9C,WAAW,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,GACjC,EACL,aAAI,SAAS,EAAC,4CAA4C,YACvD,OAAO,CAAC,GAAG,CAAC,YAAY,CAAC,GACvB,KA9BE,GAAG,CAAC,EAAE,CA+BV,CACN,CAAC,GACI,IACF,GACJ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,EACjB,IAAI,EACJ,OAAO,GAIR;IACC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,CACL,cAAK,SAAS,EAAC,yEAAyE,kEAElF,CACP,CAAC;IACJ,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAC,iBAAiB,YAC9B,iBAAO,SAAS,EAAC,wCAAwC,aACvD,0BACE,cAAI,SAAS,EAAC,gCAAgC,aAC5C,aAAI,SAAS,EAAC,uBAAuB,qBAAU,EAC/C,aAAI,SAAS,EAAC,uBAAuB,qBAAU,EAC/C,aAAI,SAAS,EAAC,uBAAuB,wBAAa,EAClD,aAAI,SAAS,EAAC,kCAAkC,sBAAW,EAC3D,aAAI,SAAS,EAAC,kCAAkC,wBAAa,EAC7D,aAAI,SAAS,EAAC,kCAAkC,uBAAY,EAC5D,aAAI,SAAS,EAAC,kCAAkC,YAC7C,OAAO,CAAC,UAAU,GAChB,IACF,GACC,EACR,0BACG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC9B,cAAyB,SAAS,EAAC,wBAAwB,aACzD,cAAI,SAAS,EAAC,oBAAoB,aAChC,cAAK,SAAS,EAAC,sCAAsC,YAClD,GAAG,CAAC,UAAU,GACX,EACN,cAAK,SAAS,EAAC,uBAAuB,YACnC,OAAO,CAAC,GAAG,CAAC,YAAY,IAAI,GAAG,CAAC,UAAU,CAAC,GACxC,IACH,EACL,aAAI,SAAS,EAAC,WAAW,YACvB,KAAC,KAAK,IAAC,OAAO,EAAC,WAAW,YAAE,GAAG,CAAC,IAAI,IAAI,MAAM,GAAS,GACpD,EACL,aAAI,SAAS,EAAC,iCAAiC,YAC5C,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,GACpB,EACL,aAAI,SAAS,EAAC,mCAAmC,YAC9C,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,GACzB,EACL,aAAI,SAAS,EAAC,mCAAmC,YAC9C,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,GAC3B,EACL,aAAI,SAAS,EAAC,mCAAmC,YAC9C,YAAY,CAAC,GAAG,CAAC,WAAW,GAAG,GAAG,CAAC,YAAY,CAAC,GAC9C,EACL,aAAI,SAAS,EAAC,mCAAmC,YAC9C,WAAW,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,GACjC,KA1BE,GAAG,CAAC,UAAU,CA2BlB,CACN,CAAC,GACI,IACF,GACJ,CACP,CAAC;AACJ,CAAC;AAED,SAAS,gBAAgB,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,OAAO,GAKR;IACC,MAAM,GAAG,GAAG,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IACpC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,cAAK,SAAS,EAAC,+BAA+B,YAAE,KAAK,GAAO,CAAC;IACtE,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAC,WAAW,YACvB,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC7B,eAAmB,SAAS,EAAC,WAAW,aACtC,eAAK,SAAS,EAAC,iDAAiD,aAC9D,eAAM,SAAS,EAAC,sCAAsC,YACnD,GAAG,CAAC,KAAK,GACL,EACP,eAAM,SAAS,EAAC,6CAA6C,YAC1D,WAAW,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,GAC/B,IACH,EACN,cAAK,SAAS,EAAC,6CAA6C,YAC1D,cACE,SAAS,EAAC,yCAAyC,EACnD,KAAK,EAAE;4BACL,KAAK,EAAE,QAAQ,CACb,0BAA0B,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,EAClD,GAAG,CACJ;yBACF,GACD,GACE,KAnBE,GAAG,CAAC,GAAG,CAoBX,CACP,CAAC,GACE,CACP,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,IAAI,EACJ,OAAO,GAIR;IACC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,CACL,cAAK,SAAS,EAAC,yEAAyE,qCAElF,CACP,CAAC;IACJ,CAAC;IACD,OAAO,CACL,cAAK,SAAS,EAAC,iBAAiB,YAC9B,iBAAO,SAAS,EAAC,wCAAwC,aACvD,0BACE,cAAI,SAAS,EAAC,gCAAgC,aAC5C,aAAI,SAAS,EAAC,uBAAuB,qBAAU,EAC/C,aAAI,SAAS,EAAC,uBAAuB,qBAAU,EAC/C,aAAI,SAAS,EAAC,uBAAuB,oBAAS,EAC9C,aAAI,SAAS,EAAC,uBAAuB,sBAAW,EAChD,aAAI,SAAS,EAAC,uBAAuB,sBAAW,EAChD,aAAI,SAAS,EAAC,kCAAkC,YAC7C,OAAO,CAAC,UAAU,GAChB,IACF,GACC,EACR,0BACG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CAC9B,cAAiB,SAAS,EAAC,wBAAwB,aACjD,aAAI,SAAS,EAAC,iCAAiC,YAC5C,OAAO,CAAC,GAAG,CAAC,SAAS,CAAC,GACpB,EACL,aAAI,SAAS,EAAC,oBAAoB,YAChC,cAAK,SAAS,EAAC,0BAA0B,YAAE,GAAG,CAAC,UAAU,GAAO,GAC7D,EACL,aAAI,SAAS,EAAC,iCAAiC,YAC5C,UAAU,CAAC,GAAG,CAAC,GAAG,CAAC,GACjB,EACL,aAAI,SAAS,EAAC,WAAW,YACvB,KAAC,KAAK,IAAC,OAAO,EAAC,SAAS,YAAE,GAAG,CAAC,KAAK,GAAS,GACzC,EACL,aAAI,SAAS,EAAC,oBAAoB,YAChC,cAAK,SAAS,EAAC,gCAAgC,YAC5C,GAAG,CAAC,KAAK,GACN,GACH,EACL,aAAI,SAAS,EAAC,mCAAmC,YAC9C,WAAW,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,GACjC,KApBE,GAAG,CAAC,EAAE,CAqBV,CACN,CAAC,GACI,IACF,GACJ,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,YAAY;IAClC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAC/C,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,cAAc,CAC/C,6BAA6B,EAC7B,EAAE,SAAS,EAAE,EACb,EAAE,eAAe,EAAE,MAAM,EAAE,CAC5B,CAAC;IACF,MAAM,OAAO,GAAG,IAAwC,CAAC;IACzD,MAAM,OAAO,GAAG,OAAO,EAAE,OAAO,IAAI,WAAW,CAAC;IAChD,MAAM,WAAW,GAAG,OAAO,CAAC,GAAG,EAAE;QAC/B,IAAI,CAAC,OAAO;YAAE,OAAO,CAAC,CAAC;QACvB,OAAO,CACL,OAAO,CAAC,MAAM,CAAC,WAAW;YAC1B,OAAO,CAAC,MAAM,CAAC,YAAY;YAC3B,OAAO,CAAC,MAAM,CAAC,eAAe;YAC9B,OAAO,CAAC,MAAM,CAAC,gBAAgB,CAChC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC;IAEd,OAAO,CACL,KAAC,aAAa,IACZ,KAAK,EAAC,SAAS,EACf,WAAW,EACT,OAAO,CAAC,IAAI,KAAK,iBAAiB;YAChC,CAAC,CAAC,qFAAqF;YACvF,CAAC,CAAC,uEAAuE,YAG7E,eAAK,SAAS,EAAC,WAAW,aACxB,eAAK,SAAS,EAAC,mDAAmD,aAChE,cAAK,SAAS,EAAC,+BAA+B,YAC3C,OAAO,EAAE,MAAM,CAAC,KAAK,KAAK,cAAc;gCACvC,CAAC,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,UAAU,kBAAkB;gCAChD,CAAC,CAAC,GAAG,OAAO,EAAE,MAAM,CAAC,UAAU,IAAI,CAAC,kBAAkB,GACpD,EACN,KAAC,aAAa,IAAC,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,GAAI,IACvD,EAEL,KAAK,CAAC,CAAC,CAAC,CACP,MAAC,KAAK,IAAC,OAAO,EAAC,aAAa,aAC1B,KAAC,iBAAiB,IAAC,SAAS,EAAC,SAAS,GAAG,EACzC,KAAC,UAAU,sCAAiC,EAC5C,KAAC,gBAAgB,cACd,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAChD,IACb,CACT,CAAC,CAAC,CAAC,IAAI,EAEP,SAAS,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAC,cAAc,KAAG,CAAC,CAAC,CAAC,IAAI,EAEjD,OAAO,CAAC,CAAC,CAAC,CACT,8BACE,eAAK,SAAS,EAAC,0CAA0C,aACvD,KAAC,UAAU,IACT,KAAK,EAAE,OAAO,CAAC,KAAK,EACpB,KAAK,EAAE,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,OAAO,CAAC,EACrD,MAAM,EAAE,GAAG,YAAY,CAAC,WAAW,CAAC,eAAe,EACnD,IAAI,EAAE,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GAC5B,EACF,KAAC,UAAU,IACT,KAAK,EAAC,WAAW,EACjB,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,EACzC,MAAM,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,SAAS,CAAC,aAAa,EAC9D,IAAI,EAAE,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,GAAI,GAChC,EACF,KAAC,UAAU,IACT,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,EAC/C,MAAM,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,UAAU,CAAC,oBAAoB,EACtE,IAAI,EAAE,KAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI,GAClC,EACF,KAAC,UAAU,IACT,KAAK,EAAC,gBAAgB,EACtB,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,aAAa,CAAC,EACjD,MAAM,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,CAAC,aAAa,EAC1D,IAAI,EAAE,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,GAC5B,EACF,KAAC,UAAU,IACT,KAAK,EAAC,cAAc,EACpB,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,WAAW,CAAC,EAC/C,MAAM,EAAE,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,WAAW,EAC/D,IAAI,EAAE,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,GAAI,GAChC,IACE,EAEN,eAAK,SAAS,EAAC,iEAAiE,aAC9E,KAAC,KAAK,IACJ,KAAK,EACH,OAAO,CAAC,IAAI,KAAK,iBAAiB;wCAChC,CAAC,CAAC,qBAAqB;wCACvB,CAAC,CAAC,cAAc,EAEpB,IAAI,EAAE,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,GAAI,YAEhC,KAAC,YAAY,IAAC,IAAI,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI,GACjD,EACR,KAAC,KAAK,IAAC,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,KAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI,YAC9D,KAAC,aAAa,IAAC,IAAI,EAAE,OAAO,CAAC,KAAK,GAAI,GAChC,IACJ,EAEN,KAAC,KAAK,IAAC,KAAK,EAAC,eAAe,EAAC,IAAI,EAAE,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,GAAI,YACvD,KAAC,cAAc,IAAC,IAAI,EAAE,OAAO,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,GAAI,GACvD,EAER,KAAC,KAAK,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,KAAC,cAAc,IAAC,IAAI,EAAE,EAAE,GAAI,YACrD,KAAC,SAAS,IAAC,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,GAC/C,EAER,eAAK,SAAS,EAAC,2BAA2B,aACxC,KAAC,KAAK,IAAC,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAE,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,GAAI,YACpD,KAAC,gBAAgB,IACf,IAAI,EAAE,OAAO,CAAC,OAAO,EACrB,KAAK,EAAC,gCAAgC,EACtC,OAAO,EAAE,OAAO,GAChB,GACI,EACR,KAAC,KAAK,IAAC,KAAK,EAAC,YAAY,EAAC,IAAI,EAAE,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,GAAI,YACxD,KAAC,gBAAgB,IACf,IAAI,EAAE,OAAO,CAAC,OAAO,EACrB,KAAK,EAAC,kCAAkC,EACxC,OAAO,EAAE,OAAO,GAChB,GACI,IACJ,EAEN,KAAC,KAAK,IAAC,KAAK,EAAC,kBAAkB,EAAC,IAAI,EAAE,KAAC,YAAY,IAAC,IAAI,EAAE,EAAE,GAAI,YAC9D,KAAC,WAAW,IAAC,IAAI,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,EAAE,OAAO,GAAI,GACjD,IACP,CACJ,CAAC,CAAC,CAAC,IAAI,IACJ,GACQ,CACjB,CAAC;AACJ,CAAC","sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { useActionQuery } from \"@agent-native/core/client\";\nimport {\n  IconActivity,\n  IconAlertTriangle,\n  IconApps,\n  IconChartBar,\n  IconClockHour4,\n  IconCoin,\n  IconMessages,\n  IconUsersGroup,\n} from \"@tabler/icons-react\";\nimport { DispatchShell } from \"@/components/dispatch-shell\";\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/utils\";\n\nexport function meta() {\n  return [{ title: \"Metrics — Dispatch\" }];\n}\n\ninterface UsageMetricBucket {\n  key: string;\n  label: string;\n  costCents: number;\n  calls: number;\n  chatCalls: number;\n  inputTokens: number;\n  outputTokens: number;\n  activeUsers: number;\n  lastActiveAt: number | null;\n}\n\ninterface UserUsageMetric extends UsageMetricBucket {\n  ownerEmail: string;\n  chatThreads: number;\n  chatMessages: number;\n  lastChatAt: number | null;\n  topApp: string | null;\n  role: string | null;\n}\n\ninterface AppAccessMetric {\n  id: string;\n  name: string;\n  path: string;\n  status?: \"ready\" | \"pending\";\n  isDispatch: boolean;\n  accessLabel: string;\n  accessUsers: number;\n  usersWithUsage: number;\n  usageCalls: number;\n  chatCalls: number;\n  costCents: number;\n  lastActiveAt: number | null;\n}\n\ninterface DailyUsageMetric {\n  date: string;\n  costCents: number;\n  calls: number;\n  chatCalls: number;\n  activeUsers: number;\n}\n\ninterface RecentUsageMetric {\n  id: number;\n  createdAt: number;\n  ownerEmail: string;\n  app: string;\n  label: string;\n  model: string;\n  inputTokens: number;\n  outputTokens: number;\n  costCents: number;\n}\n\ninterface UsageBillingMode {\n  unit: \"usd\" | \"builder-credits\";\n  label: string;\n  shortLabel: string;\n  source: \"estimated-provider-cost\" | \"builder-agent-credits\";\n  hardCostMarginMultiplier?: number;\n  creditsPerUsd?: number;\n}\n\ninterface DispatchUsageMetrics {\n  billing?: UsageBillingMode;\n  sinceDays: number;\n  access: {\n    viewerEmail: string;\n    orgId: string | null;\n    role: string | null;\n    scope: \"organization\" | \"solo\";\n    totalUsers: number;\n  };\n  totals: {\n    costCents: number;\n    calls: number;\n    chatCalls: number;\n    inputTokens: number;\n    outputTokens: number;\n    cacheReadTokens: number;\n    cacheWriteTokens: number;\n    activeUsers: number;\n    chatThreads: number;\n    chatMessages: number;\n    workspaceApps: number;\n  };\n  byApp: UsageMetricBucket[];\n  byUser: UserUsageMetric[];\n  byLabel: UsageMetricBucket[];\n  byModel: UsageMetricBucket[];\n  daily: DailyUsageMetric[];\n  appAccess: AppAccessMetric[];\n  recent: RecentUsageMetric[];\n}\n\nconst RANGES = [7, 30, 90] as const;\n\nconst USD_BILLING: UsageBillingMode = {\n  unit: \"usd\",\n  label: \"Estimated spend\",\n  shortLabel: \"Cost\",\n  source: \"estimated-provider-cost\",\n};\n\nfunction displayAmountFromCostCents(\n  cents: number,\n  billing: UsageBillingMode,\n): number {\n  if (billing.unit !== \"builder-credits\") return cents;\n  const margin = billing.hardCostMarginMultiplier ?? 1.25;\n  const creditsPerUsd = billing.creditsPerUsd ?? 20;\n  const credits = (cents / 100) * margin * creditsPerUsd;\n  return credits <= 0 ? 0 : Math.ceil(credits * 1000) / 1000;\n}\n\nfunction formatCredits(credits: number): string {\n  if (!Number.isFinite(credits) || credits === 0) return \"0 credits\";\n  const maximumFractionDigits = credits < 1 ? 3 : credits < 10 ? 2 : 1;\n  const value = credits.toLocaleString(undefined, {\n    maximumFractionDigits,\n  });\n  return `${value} ${credits === 1 ? \"credit\" : \"credits\"}`;\n}\n\nfunction formatSpend(cents: number, billing: UsageBillingMode): string {\n  if (billing.unit === \"builder-credits\") {\n    return formatCredits(displayAmountFromCostCents(cents, billing));\n  }\n  if (!Number.isFinite(cents) || cents === 0) return \"$0.00\";\n  if (Math.abs(cents) < 1) return `${cents.toFixed(3)}¢`;\n  if (Math.abs(cents) < 100) return `${cents.toFixed(2)}¢`;\n  return (cents / 100).toLocaleString(undefined, {\n    style: \"currency\",\n    currency: \"USD\",\n    maximumFractionDigits: 2,\n  });\n}\n\nfunction formatNumber(value: number): string {\n  return new Intl.NumberFormat(undefined, {\n    notation: value >= 10_000 ? \"compact\" : \"standard\",\n    maximumFractionDigits: value >= 10_000 ? 1 : 0,\n  }).format(value);\n}\n\nfunction formatTokens(value: number): string {\n  return new Intl.NumberFormat(undefined, {\n    notation: \"compact\",\n    maximumFractionDigits: 1,\n  }).format(value);\n}\n\nfunction timeAgo(timestamp: number | null): string {\n  if (!timestamp) return \"No activity\";\n  const diff = Date.now() - timestamp;\n  if (diff < 60_000) return \"just now\";\n  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;\n  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;\n  return `${Math.floor(diff / 86_400_000)}d ago`;\n}\n\nfunction displayApp(value: string | null | undefined): string {\n  const trimmed = value?.trim();\n  if (!trimmed || trimmed === \"unattributed\") return \"Unattributed\";\n  return trimmed;\n}\n\nfunction maxSpend(\n  rows: Array<{ costCents: number }>,\n  billing: UsageBillingMode,\n): number {\n  return rows.reduce(\n    (max, row) =>\n      Math.max(max, displayAmountFromCostCents(row.costCents, billing)),\n    0,\n  );\n}\n\nfunction barWidth(value: number, max: number): string {\n  if (max <= 0 || value <= 0) return \"0%\";\n  return `${Math.max(4, Math.round((value / max) * 100))}%`;\n}\n\nfunction RangeSelector({\n  value,\n  onChange,\n}: {\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  return (\n    <div className=\"flex rounded-md border bg-card p-0.5\">\n      {RANGES.map((range) => (\n        <Button\n          key={range}\n          type=\"button\"\n          variant={value === range ? \"secondary\" : \"ghost\"}\n          size=\"sm\"\n          className=\"h-7 px-3 text-xs\"\n          onClick={() => onChange(range)}\n        >\n          {range}d\n        </Button>\n      ))}\n    </div>\n  );\n}\n\nfunction MetricCard({\n  label,\n  value,\n  detail,\n  icon,\n}: {\n  label: string;\n  value: string;\n  detail: string;\n  icon: ReactNode;\n}) {\n  return (\n    <div className=\"rounded-lg border bg-card p-4\">\n      <div className=\"mb-3 flex items-center justify-between gap-3\">\n        <span className=\"text-xs font-medium text-muted-foreground\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">{icon}</span>\n      </div>\n      <div className=\"text-2xl font-semibold tabular-nums text-foreground\">\n        {value}\n      </div>\n      <div className=\"mt-1 truncate text-xs text-muted-foreground\">\n        {detail}\n      </div>\n    </div>\n  );\n}\n\nfunction Panel({\n  title,\n  icon,\n  children,\n  action,\n}: {\n  title: string;\n  icon: ReactNode;\n  children: ReactNode;\n  action?: ReactNode;\n}) {\n  return (\n    <section className=\"rounded-lg border bg-card\">\n      <div className=\"flex items-center justify-between gap-3 border-b px-4 py-3\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"text-muted-foreground\">{icon}</span>\n          <h2 className=\"truncate text-sm font-semibold text-foreground\">\n            {title}\n          </h2>\n        </div>\n        {action}\n      </div>\n      <div className=\"p-4\">{children}</div>\n    </section>\n  );\n}\n\nfunction LoadingMetrics() {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"grid gap-3 md:grid-cols-2 xl:grid-cols-5\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <div key={index} className=\"rounded-lg border bg-card p-4\">\n            <Skeleton className=\"mb-4 h-4 w-24\" />\n            <Skeleton className=\"h-7 w-20\" />\n            <Skeleton className=\"mt-3 h-3 w-28\" />\n          </div>\n        ))}\n      </div>\n      <Skeleton className=\"h-80 rounded-lg\" />\n    </div>\n  );\n}\n\nfunction AppSpendRows({\n  rows,\n  billing,\n}: {\n  rows: UsageMetricBucket[];\n  billing: UsageBillingMode;\n}) {\n  const max = maxSpend(rows, billing);\n  if (rows.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground\">\n        No LLM usage recorded for this window.\n      </div>\n    );\n  }\n  return (\n    <div className=\"space-y-3\">\n      {rows.map((row) => (\n        <div key={row.key} className=\"space-y-1.5\">\n          <div className=\"flex items-center justify-between gap-3 text-sm\">\n            <div className=\"min-w-0\">\n              <div className=\"truncate font-medium text-foreground\">\n                {displayApp(row.key)}\n              </div>\n              <div className=\"text-xs text-muted-foreground\">\n                {formatNumber(row.chatCalls)} chats ·{\" \"}\n                {formatNumber(row.activeUsers)} users\n              </div>\n            </div>\n            <div className=\"shrink-0 text-right\">\n              <div className=\"font-medium tabular-nums text-foreground\">\n                {formatSpend(row.costCents, billing)}\n              </div>\n              <div className=\"text-xs text-muted-foreground\">\n                {formatNumber(row.calls)} calls\n              </div>\n            </div>\n          </div>\n          <div className=\"h-2 overflow-hidden rounded-full bg-muted\">\n            <div\n              className=\"h-full rounded-full bg-foreground\"\n              style={{\n                width: barWidth(\n                  displayAmountFromCostCents(row.costCents, billing),\n                  max,\n                ),\n              }}\n            />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction DailyActivity({ rows }: { rows: DailyUsageMetric[] }) {\n  const max = Math.max(\n    1,\n    rows.reduce((value, row) => Math.max(value, row.calls), 0),\n  );\n  if (rows.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground\">\n        No activity in this window.\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex h-44 items-end gap-1\">\n      {rows.map((row) => (\n        <div\n          key={row.date}\n          className=\"group flex min-w-0 flex-1 flex-col items-center gap-2\"\n        >\n          <div className=\"relative flex h-36 w-full items-end rounded-sm bg-muted/60\">\n            <div\n              className=\"w-full rounded-sm bg-foreground transition group-hover:bg-primary\"\n              style={{ height: `${Math.max(4, (row.calls / max) * 100)}%` }}\n            />\n          </div>\n          <div className=\"hidden text-[10px] text-muted-foreground sm:block\">\n            {row.date.slice(5)}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction AppAccessTable({\n  rows,\n  billing,\n}: {\n  rows: AppAccessMetric[];\n  billing: UsageBillingMode;\n}) {\n  const visibleRows = rows.filter((row) => !row.isDispatch);\n  if (visibleRows.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground\">\n        No workspace apps discovered yet.\n      </div>\n    );\n  }\n  return (\n    <div className=\"overflow-x-auto\">\n      <table className=\"w-full min-w-[720px] text-left text-xs\">\n        <thead>\n          <tr className=\"border-b text-muted-foreground\">\n            <th className=\"px-2 py-2 font-medium\">App</th>\n            <th className=\"px-2 py-2 font-medium\">Access</th>\n            <th className=\"px-2 py-2 text-right font-medium\">Users</th>\n            <th className=\"px-2 py-2 text-right font-medium\">Chats</th>\n            <th className=\"px-2 py-2 text-right font-medium\">\n              {billing.shortLabel}\n            </th>\n            <th className=\"px-2 py-2 text-right font-medium\">Last activity</th>\n          </tr>\n        </thead>\n        <tbody>\n          {visibleRows.map((row) => (\n            <tr key={row.id} className=\"border-b last:border-0\">\n              <td className=\"px-2 py-3\">\n                <div className=\"font-medium text-foreground\">{row.name}</div>\n                <div className=\"font-mono text-[11px] text-muted-foreground\">\n                  {row.path}\n                </div>\n              </td>\n              <td className=\"px-2 py-3\">\n                <Badge\n                  variant=\"outline\"\n                  className={cn(\n                    row.status === \"pending\" &&\n                      \"border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300\",\n                  )}\n                >\n                  {row.status === \"pending\" ? \"Building\" : row.accessLabel}\n                </Badge>\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatNumber(row.usersWithUsage)} /{\" \"}\n                {formatNumber(row.accessUsers)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatNumber(row.chatCalls)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatSpend(row.costCents, billing)}\n              </td>\n              <td className=\"px-2 py-3 text-right text-muted-foreground\">\n                {timeAgo(row.lastActiveAt)}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction UserTable({\n  rows,\n  billing,\n}: {\n  rows: UserUsageMetric[];\n  billing: UsageBillingMode;\n}) {\n  if (rows.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground\">\n        No users have triggered LLM usage in this window.\n      </div>\n    );\n  }\n  return (\n    <div className=\"overflow-x-auto\">\n      <table className=\"w-full min-w-[760px] text-left text-xs\">\n        <thead>\n          <tr className=\"border-b text-muted-foreground\">\n            <th className=\"px-2 py-2 font-medium\">User</th>\n            <th className=\"px-2 py-2 font-medium\">Role</th>\n            <th className=\"px-2 py-2 font-medium\">Top app</th>\n            <th className=\"px-2 py-2 text-right font-medium\">Chats</th>\n            <th className=\"px-2 py-2 text-right font-medium\">Threads</th>\n            <th className=\"px-2 py-2 text-right font-medium\">Tokens</th>\n            <th className=\"px-2 py-2 text-right font-medium\">\n              {billing.shortLabel}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          {rows.slice(0, 12).map((row) => (\n            <tr key={row.ownerEmail} className=\"border-b last:border-0\">\n              <td className=\"max-w-64 px-2 py-3\">\n                <div className=\"truncate font-medium text-foreground\">\n                  {row.ownerEmail}\n                </div>\n                <div className=\"text-muted-foreground\">\n                  {timeAgo(row.lastActiveAt ?? row.lastChatAt)}\n                </div>\n              </td>\n              <td className=\"px-2 py-3\">\n                <Badge variant=\"secondary\">{row.role ?? \"user\"}</Badge>\n              </td>\n              <td className=\"px-2 py-3 text-muted-foreground\">\n                {displayApp(row.topApp)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatNumber(row.chatCalls)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatNumber(row.chatThreads)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatTokens(row.inputTokens + row.outputTokens)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatSpend(row.costCents, billing)}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction CompactBreakdown({\n  rows,\n  empty,\n  billing,\n}: {\n  rows: UsageMetricBucket[];\n  empty: string;\n  billing: UsageBillingMode;\n}) {\n  const max = maxSpend(rows, billing);\n  if (rows.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{empty}</div>;\n  }\n  return (\n    <div className=\"space-y-3\">\n      {rows.slice(0, 6).map((row) => (\n        <div key={row.key} className=\"space-y-1\">\n          <div className=\"flex items-center justify-between gap-3 text-xs\">\n            <span className=\"truncate font-medium text-foreground\">\n              {row.label}\n            </span>\n            <span className=\"shrink-0 tabular-nums text-muted-foreground\">\n              {formatSpend(row.costCents, billing)}\n            </span>\n          </div>\n          <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n            <div\n              className=\"h-full rounded-full bg-muted-foreground\"\n              style={{\n                width: barWidth(\n                  displayAmountFromCostCents(row.costCents, billing),\n                  max,\n                ),\n              }}\n            />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction RecentTable({\n  rows,\n  billing,\n}: {\n  rows: RecentUsageMetric[];\n  billing: UsageBillingMode;\n}) {\n  if (rows.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground\">\n        No recent LLM calls.\n      </div>\n    );\n  }\n  return (\n    <div className=\"overflow-x-auto\">\n      <table className=\"w-full min-w-[760px] text-left text-xs\">\n        <thead>\n          <tr className=\"border-b text-muted-foreground\">\n            <th className=\"px-2 py-2 font-medium\">When</th>\n            <th className=\"px-2 py-2 font-medium\">User</th>\n            <th className=\"px-2 py-2 font-medium\">App</th>\n            <th className=\"px-2 py-2 font-medium\">Label</th>\n            <th className=\"px-2 py-2 font-medium\">Model</th>\n            <th className=\"px-2 py-2 text-right font-medium\">\n              {billing.shortLabel}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          {rows.slice(0, 10).map((row) => (\n            <tr key={row.id} className=\"border-b last:border-0\">\n              <td className=\"px-2 py-3 text-muted-foreground\">\n                {timeAgo(row.createdAt)}\n              </td>\n              <td className=\"max-w-56 px-2 py-3\">\n                <div className=\"truncate text-foreground\">{row.ownerEmail}</div>\n              </td>\n              <td className=\"px-2 py-3 text-muted-foreground\">\n                {displayApp(row.app)}\n              </td>\n              <td className=\"px-2 py-3\">\n                <Badge variant=\"outline\">{row.label}</Badge>\n              </td>\n              <td className=\"max-w-48 px-2 py-3\">\n                <div className=\"truncate text-muted-foreground\">\n                  {row.model}\n                </div>\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatSpend(row.costCents, billing)}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nexport default function MetricsRoute() {\n  const [sinceDays, setSinceDays] = useState(30);\n  const { data, isLoading, error } = useActionQuery(\n    \"list-dispatch-usage-metrics\",\n    { sinceDays },\n    { refetchInterval: 30_000 },\n  );\n  const metrics = data as DispatchUsageMetrics | undefined;\n  const billing = metrics?.billing ?? USD_BILLING;\n  const totalTokens = useMemo(() => {\n    if (!metrics) return 0;\n    return (\n      metrics.totals.inputTokens +\n      metrics.totals.outputTokens +\n      metrics.totals.cacheReadTokens +\n      metrics.totals.cacheWriteTokens\n    );\n  }, [metrics]);\n\n  return (\n    <DispatchShell\n      title=\"Metrics\"\n      description={\n        billing.unit === \"builder-credits\"\n          ? \"Workspace-wide Builder.io credit spend, chat volume, user activity, and app access.\"\n          : \"Workspace-wide LLM spend, chat volume, user activity, and app access.\"\n      }\n    >\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap items-center justify-between gap-3\">\n          <div className=\"text-sm text-muted-foreground\">\n            {metrics?.access.scope === \"organization\"\n              ? `${metrics.access.totalUsers} workspace users`\n              : `${metrics?.access.totalUsers ?? 0} signed-in users`}\n          </div>\n          <RangeSelector value={sinceDays} onChange={setSinceDays} />\n        </div>\n\n        {error ? (\n          <Alert variant=\"destructive\">\n            <IconAlertTriangle className=\"h-4 w-4\" />\n            <AlertTitle>Metrics unavailable</AlertTitle>\n            <AlertDescription>\n              {error instanceof Error ? error.message : \"Unable to load usage.\"}\n            </AlertDescription>\n          </Alert>\n        ) : null}\n\n        {isLoading && !metrics ? <LoadingMetrics /> : null}\n\n        {metrics ? (\n          <>\n            <div className=\"grid gap-3 md:grid-cols-2 xl:grid-cols-5\">\n              <MetricCard\n                label={billing.label}\n                value={formatSpend(metrics.totals.costCents, billing)}\n                detail={`${formatTokens(totalTokens)} total tokens`}\n                icon={<IconCoin size={17} />}\n              />\n              <MetricCard\n                label=\"LLM calls\"\n                value={formatNumber(metrics.totals.calls)}\n                detail={`${formatNumber(metrics.totals.chatCalls)} chat turns`}\n                icon={<IconActivity size={17} />}\n              />\n              <MetricCard\n                label=\"Active users\"\n                value={formatNumber(metrics.totals.activeUsers)}\n                detail={`${formatNumber(metrics.access.totalUsers)} users with access`}\n                icon={<IconUsersGroup size={17} />}\n              />\n              <MetricCard\n                label=\"Workspace apps\"\n                value={formatNumber(metrics.totals.workspaceApps)}\n                detail={`${formatNumber(metrics.byApp.length)} with usage`}\n                icon={<IconApps size={17} />}\n              />\n              <MetricCard\n                label=\"Chat threads\"\n                value={formatNumber(metrics.totals.chatThreads)}\n                detail={`${formatNumber(metrics.totals.chatMessages)} messages`}\n                icon={<IconMessages size={17} />}\n              />\n            </div>\n\n            <div className=\"grid gap-4 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.65fr)]\">\n              <Panel\n                title={\n                  billing.unit === \"builder-credits\"\n                    ? \"Credit Spend By App\"\n                    : \"Spend By App\"\n                }\n                icon={<IconChartBar size={16} />}\n              >\n                <AppSpendRows rows={metrics.byApp} billing={billing} />\n              </Panel>\n              <Panel title=\"Daily Activity\" icon={<IconClockHour4 size={16} />}>\n                <DailyActivity rows={metrics.daily} />\n              </Panel>\n            </div>\n\n            <Panel title=\"Access By App\" icon={<IconApps size={16} />}>\n              <AppAccessTable rows={metrics.appAccess} billing={billing} />\n            </Panel>\n\n            <Panel title=\"Users\" icon={<IconUsersGroup size={16} />}>\n              <UserTable rows={metrics.byUser} billing={billing} />\n            </Panel>\n\n            <div className=\"grid gap-4 lg:grid-cols-2\">\n              <Panel title=\"Models\" icon={<IconChartBar size={16} />}>\n                <CompactBreakdown\n                  rows={metrics.byModel}\n                  empty=\"No model usage in this window.\"\n                  billing={billing}\n                />\n              </Panel>\n              <Panel title=\"Work Types\" icon={<IconActivity size={16} />}>\n                <CompactBreakdown\n                  rows={metrics.byLabel}\n                  empty=\"No labeled usage in this window.\"\n                  billing={billing}\n                />\n              </Panel>\n            </div>\n\n            <Panel title=\"Recent LLM Calls\" icon={<IconActivity size={16} />}>\n              <RecentTable rows={metrics.recent} billing={billing} />\n            </Panel>\n          </>\n        ) : null}\n      </div>\n    </DispatchShell>\n  );\n}\n"]}
+{"version":3,"file":"metrics.js","sourceRoot":"","sources":["../../../src/routes/pages/metrics.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useState, type ReactNode } from \"react\";\nimport { useActionQuery } from \"@agent-native/core/client\";\nimport {\n  IconActivity,\n  IconAlertTriangle,\n  IconApps,\n  IconChartBar,\n  IconClockHour4,\n  IconCoin,\n  IconMessages,\n  IconUsersGroup,\n} from \"@tabler/icons-react\";\nimport { DispatchShell } from \"@/components/dispatch-shell\";\nimport { Alert, AlertDescription, AlertTitle } from \"@/components/ui/alert\";\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Skeleton } from \"@/components/ui/skeleton\";\nimport { cn } from \"@/lib/utils\";\n\nexport function meta() {\n  return [{ title: \"Metrics — Dispatch\" }];\n}\n\ninterface UsageMetricBucket {\n  key: string;\n  label: string;\n  costCents: number;\n  calls: number;\n  chatCalls: number;\n  inputTokens: number;\n  outputTokens: number;\n  activeUsers: number;\n  lastActiveAt: number | null;\n}\n\ninterface UserUsageMetric extends UsageMetricBucket {\n  ownerEmail: string;\n  chatThreads: number;\n  chatMessages: number;\n  lastChatAt: number | null;\n  topApp: string | null;\n  role: string | null;\n}\n\ninterface AppAccessMetric {\n  id: string;\n  name: string;\n  path: string;\n  status?: \"ready\" | \"pending\";\n  statusLabel?: string;\n  isDispatch: boolean;\n  accessLabel: string;\n  accessUsers: number;\n  usersWithUsage: number;\n  usageCalls: number;\n  chatCalls: number;\n  costCents: number;\n  lastActiveAt: number | null;\n}\n\ninterface DailyUsageMetric {\n  date: string;\n  costCents: number;\n  calls: number;\n  chatCalls: number;\n  activeUsers: number;\n}\n\ninterface RecentUsageMetric {\n  id: number;\n  createdAt: number;\n  ownerEmail: string;\n  app: string;\n  label: string;\n  model: string;\n  inputTokens: number;\n  outputTokens: number;\n  costCents: number;\n}\n\ninterface UsageBillingMode {\n  unit: \"usd\" | \"builder-credits\";\n  label: string;\n  shortLabel: string;\n  source: \"estimated-provider-cost\" | \"builder-agent-credits\";\n  hardCostMarginMultiplier?: number;\n  creditsPerUsd?: number;\n}\n\ninterface DispatchUsageMetrics {\n  billing?: UsageBillingMode;\n  sinceDays: number;\n  access: {\n    viewerEmail: string;\n    orgId: string | null;\n    role: string | null;\n    scope: \"organization\" | \"solo\";\n    totalUsers: number;\n  };\n  totals: {\n    costCents: number;\n    calls: number;\n    chatCalls: number;\n    inputTokens: number;\n    outputTokens: number;\n    cacheReadTokens: number;\n    cacheWriteTokens: number;\n    activeUsers: number;\n    chatThreads: number;\n    chatMessages: number;\n    workspaceApps: number;\n  };\n  byApp: UsageMetricBucket[];\n  byUser: UserUsageMetric[];\n  byLabel: UsageMetricBucket[];\n  byModel: UsageMetricBucket[];\n  daily: DailyUsageMetric[];\n  appAccess: AppAccessMetric[];\n  recent: RecentUsageMetric[];\n}\n\nconst RANGES = [7, 30, 90] as const;\n\nconst USD_BILLING: UsageBillingMode = {\n  unit: \"usd\",\n  label: \"Estimated spend\",\n  shortLabel: \"Cost\",\n  source: \"estimated-provider-cost\",\n};\n\nfunction displayAmountFromCostCents(\n  cents: number,\n  billing: UsageBillingMode,\n): number {\n  if (billing.unit !== \"builder-credits\") return cents;\n  const margin = billing.hardCostMarginMultiplier ?? 1.25;\n  const creditsPerUsd = billing.creditsPerUsd ?? 20;\n  const credits = (cents / 100) * margin * creditsPerUsd;\n  return credits <= 0 ? 0 : Math.ceil(credits * 1000) / 1000;\n}\n\nfunction formatCredits(credits: number): string {\n  if (!Number.isFinite(credits) || credits === 0) return \"0 credits\";\n  const maximumFractionDigits = credits < 1 ? 3 : credits < 10 ? 2 : 1;\n  const value = credits.toLocaleString(undefined, {\n    maximumFractionDigits,\n  });\n  return `${value} ${credits === 1 ? \"credit\" : \"credits\"}`;\n}\n\nfunction formatSpend(cents: number, billing: UsageBillingMode): string {\n  if (billing.unit === \"builder-credits\") {\n    return formatCredits(displayAmountFromCostCents(cents, billing));\n  }\n  if (!Number.isFinite(cents) || cents === 0) return \"$0.00\";\n  if (Math.abs(cents) < 1) return `${cents.toFixed(3)}¢`;\n  if (Math.abs(cents) < 100) return `${cents.toFixed(2)}¢`;\n  return (cents / 100).toLocaleString(undefined, {\n    style: \"currency\",\n    currency: \"USD\",\n    maximumFractionDigits: 2,\n  });\n}\n\nfunction formatNumber(value: number): string {\n  return new Intl.NumberFormat(undefined, {\n    notation: value >= 10_000 ? \"compact\" : \"standard\",\n    maximumFractionDigits: value >= 10_000 ? 1 : 0,\n  }).format(value);\n}\n\nfunction formatTokens(value: number): string {\n  return new Intl.NumberFormat(undefined, {\n    notation: \"compact\",\n    maximumFractionDigits: 1,\n  }).format(value);\n}\n\nfunction timeAgo(timestamp: number | null): string {\n  if (!timestamp) return \"No activity\";\n  const diff = Date.now() - timestamp;\n  if (diff < 60_000) return \"just now\";\n  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;\n  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;\n  return `${Math.floor(diff / 86_400_000)}d ago`;\n}\n\nfunction displayApp(value: string | null | undefined): string {\n  const trimmed = value?.trim();\n  if (!trimmed || trimmed === \"unattributed\") return \"Unattributed\";\n  return trimmed;\n}\n\nfunction maxSpend(\n  rows: Array<{ costCents: number }>,\n  billing: UsageBillingMode,\n): number {\n  return rows.reduce(\n    (max, row) =>\n      Math.max(max, displayAmountFromCostCents(row.costCents, billing)),\n    0,\n  );\n}\n\nfunction barWidth(value: number, max: number): string {\n  if (max <= 0 || value <= 0) return \"0%\";\n  return `${Math.max(4, Math.round((value / max) * 100))}%`;\n}\n\nfunction RangeSelector({\n  value,\n  onChange,\n}: {\n  value: number;\n  onChange: (value: number) => void;\n}) {\n  return (\n    <div className=\"flex rounded-md border bg-card p-0.5\">\n      {RANGES.map((range) => (\n        <Button\n          key={range}\n          type=\"button\"\n          variant={value === range ? \"secondary\" : \"ghost\"}\n          size=\"sm\"\n          className=\"h-7 px-3 text-xs\"\n          onClick={() => onChange(range)}\n        >\n          {range}d\n        </Button>\n      ))}\n    </div>\n  );\n}\n\nfunction MetricCard({\n  label,\n  value,\n  detail,\n  icon,\n}: {\n  label: string;\n  value: string;\n  detail: string;\n  icon: ReactNode;\n}) {\n  return (\n    <div className=\"rounded-lg border bg-card p-4\">\n      <div className=\"mb-3 flex items-center justify-between gap-3\">\n        <span className=\"text-xs font-medium text-muted-foreground\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">{icon}</span>\n      </div>\n      <div className=\"text-2xl font-semibold tabular-nums text-foreground\">\n        {value}\n      </div>\n      <div className=\"mt-1 truncate text-xs text-muted-foreground\">\n        {detail}\n      </div>\n    </div>\n  );\n}\n\nfunction Panel({\n  title,\n  icon,\n  children,\n  action,\n}: {\n  title: string;\n  icon: ReactNode;\n  children: ReactNode;\n  action?: ReactNode;\n}) {\n  return (\n    <section className=\"rounded-lg border bg-card\">\n      <div className=\"flex items-center justify-between gap-3 border-b px-4 py-3\">\n        <div className=\"flex min-w-0 items-center gap-2\">\n          <span className=\"text-muted-foreground\">{icon}</span>\n          <h2 className=\"truncate text-sm font-semibold text-foreground\">\n            {title}\n          </h2>\n        </div>\n        {action}\n      </div>\n      <div className=\"p-4\">{children}</div>\n    </section>\n  );\n}\n\nfunction LoadingMetrics() {\n  return (\n    <div className=\"space-y-4\">\n      <div className=\"grid gap-3 md:grid-cols-2 xl:grid-cols-5\">\n        {Array.from({ length: 5 }).map((_, index) => (\n          <div key={index} className=\"rounded-lg border bg-card p-4\">\n            <Skeleton className=\"mb-4 h-4 w-24\" />\n            <Skeleton className=\"h-7 w-20\" />\n            <Skeleton className=\"mt-3 h-3 w-28\" />\n          </div>\n        ))}\n      </div>\n      <Skeleton className=\"h-80 rounded-lg\" />\n    </div>\n  );\n}\n\nfunction AppSpendRows({\n  rows,\n  billing,\n}: {\n  rows: UsageMetricBucket[];\n  billing: UsageBillingMode;\n}) {\n  const max = maxSpend(rows, billing);\n  if (rows.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground\">\n        No LLM usage recorded for this window.\n      </div>\n    );\n  }\n  return (\n    <div className=\"space-y-3\">\n      {rows.map((row) => (\n        <div key={row.key} className=\"space-y-1.5\">\n          <div className=\"flex items-center justify-between gap-3 text-sm\">\n            <div className=\"min-w-0\">\n              <div className=\"truncate font-medium text-foreground\">\n                {displayApp(row.key)}\n              </div>\n              <div className=\"text-xs text-muted-foreground\">\n                {formatNumber(row.chatCalls)} chats ·{\" \"}\n                {formatNumber(row.activeUsers)} users\n              </div>\n            </div>\n            <div className=\"shrink-0 text-right\">\n              <div className=\"font-medium tabular-nums text-foreground\">\n                {formatSpend(row.costCents, billing)}\n              </div>\n              <div className=\"text-xs text-muted-foreground\">\n                {formatNumber(row.calls)} calls\n              </div>\n            </div>\n          </div>\n          <div className=\"h-2 overflow-hidden rounded-full bg-muted\">\n            <div\n              className=\"h-full rounded-full bg-foreground\"\n              style={{\n                width: barWidth(\n                  displayAmountFromCostCents(row.costCents, billing),\n                  max,\n                ),\n              }}\n            />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction DailyActivity({ rows }: { rows: DailyUsageMetric[] }) {\n  const max = Math.max(\n    1,\n    rows.reduce((value, row) => Math.max(value, row.calls), 0),\n  );\n  if (rows.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground\">\n        No activity in this window.\n      </div>\n    );\n  }\n  return (\n    <div className=\"flex h-44 items-end gap-1\">\n      {rows.map((row) => (\n        <div\n          key={row.date}\n          className=\"group flex min-w-0 flex-1 flex-col items-center gap-2\"\n        >\n          <div className=\"relative flex h-36 w-full items-end rounded-sm bg-muted/60\">\n            <div\n              className=\"w-full rounded-sm bg-foreground transition group-hover:bg-primary\"\n              style={{ height: `${Math.max(4, (row.calls / max) * 100)}%` }}\n            />\n          </div>\n          <div className=\"hidden text-[10px] text-muted-foreground sm:block\">\n            {row.date.slice(5)}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction AppAccessTable({\n  rows,\n  billing,\n}: {\n  rows: AppAccessMetric[];\n  billing: UsageBillingMode;\n}) {\n  const visibleRows = rows.filter((row) => !row.isDispatch);\n  if (visibleRows.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground\">\n        No workspace apps discovered yet.\n      </div>\n    );\n  }\n  return (\n    <div className=\"overflow-x-auto\">\n      <table className=\"w-full min-w-[720px] text-left text-xs\">\n        <thead>\n          <tr className=\"border-b text-muted-foreground\">\n            <th className=\"px-2 py-2 font-medium\">App</th>\n            <th className=\"px-2 py-2 font-medium\">Access</th>\n            <th className=\"px-2 py-2 text-right font-medium\">Users</th>\n            <th className=\"px-2 py-2 text-right font-medium\">Chats</th>\n            <th className=\"px-2 py-2 text-right font-medium\">\n              {billing.shortLabel}\n            </th>\n            <th className=\"px-2 py-2 text-right font-medium\">Last activity</th>\n          </tr>\n        </thead>\n        <tbody>\n          {visibleRows.map((row) => (\n            <tr key={row.id} className=\"border-b last:border-0\">\n              <td className=\"px-2 py-3\">\n                <div className=\"font-medium text-foreground\">{row.name}</div>\n                <div className=\"font-mono text-[11px] text-muted-foreground\">\n                  {row.path}\n                </div>\n              </td>\n              <td className=\"px-2 py-3\">\n                <Badge\n                  variant=\"outline\"\n                  className={cn(\n                    row.status === \"pending\" &&\n                      \"border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-300\",\n                  )}\n                >\n                  {row.status === \"pending\"\n                    ? row.statusLabel || \"Builder branch\"\n                    : row.accessLabel}\n                </Badge>\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatNumber(row.usersWithUsage)} /{\" \"}\n                {formatNumber(row.accessUsers)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatNumber(row.chatCalls)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatSpend(row.costCents, billing)}\n              </td>\n              <td className=\"px-2 py-3 text-right text-muted-foreground\">\n                {timeAgo(row.lastActiveAt)}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction UserTable({\n  rows,\n  billing,\n}: {\n  rows: UserUsageMetric[];\n  billing: UsageBillingMode;\n}) {\n  if (rows.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground\">\n        No users have triggered LLM usage in this window.\n      </div>\n    );\n  }\n  return (\n    <div className=\"overflow-x-auto\">\n      <table className=\"w-full min-w-[760px] text-left text-xs\">\n        <thead>\n          <tr className=\"border-b text-muted-foreground\">\n            <th className=\"px-2 py-2 font-medium\">User</th>\n            <th className=\"px-2 py-2 font-medium\">Role</th>\n            <th className=\"px-2 py-2 font-medium\">Top app</th>\n            <th className=\"px-2 py-2 text-right font-medium\">Chats</th>\n            <th className=\"px-2 py-2 text-right font-medium\">Threads</th>\n            <th className=\"px-2 py-2 text-right font-medium\">Tokens</th>\n            <th className=\"px-2 py-2 text-right font-medium\">\n              {billing.shortLabel}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          {rows.slice(0, 12).map((row) => (\n            <tr key={row.ownerEmail} className=\"border-b last:border-0\">\n              <td className=\"max-w-64 px-2 py-3\">\n                <div className=\"truncate font-medium text-foreground\">\n                  {row.ownerEmail}\n                </div>\n                <div className=\"text-muted-foreground\">\n                  {timeAgo(row.lastActiveAt ?? row.lastChatAt)}\n                </div>\n              </td>\n              <td className=\"px-2 py-3\">\n                <Badge variant=\"secondary\">{row.role ?? \"user\"}</Badge>\n              </td>\n              <td className=\"px-2 py-3 text-muted-foreground\">\n                {displayApp(row.topApp)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatNumber(row.chatCalls)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatNumber(row.chatThreads)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatTokens(row.inputTokens + row.outputTokens)}\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatSpend(row.costCents, billing)}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nfunction CompactBreakdown({\n  rows,\n  empty,\n  billing,\n}: {\n  rows: UsageMetricBucket[];\n  empty: string;\n  billing: UsageBillingMode;\n}) {\n  const max = maxSpend(rows, billing);\n  if (rows.length === 0) {\n    return <div className=\"text-sm text-muted-foreground\">{empty}</div>;\n  }\n  return (\n    <div className=\"space-y-3\">\n      {rows.slice(0, 6).map((row) => (\n        <div key={row.key} className=\"space-y-1\">\n          <div className=\"flex items-center justify-between gap-3 text-xs\">\n            <span className=\"truncate font-medium text-foreground\">\n              {row.label}\n            </span>\n            <span className=\"shrink-0 tabular-nums text-muted-foreground\">\n              {formatSpend(row.costCents, billing)}\n            </span>\n          </div>\n          <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n            <div\n              className=\"h-full rounded-full bg-muted-foreground\"\n              style={{\n                width: barWidth(\n                  displayAmountFromCostCents(row.costCents, billing),\n                  max,\n                ),\n              }}\n            />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nfunction RecentTable({\n  rows,\n  billing,\n}: {\n  rows: RecentUsageMetric[];\n  billing: UsageBillingMode;\n}) {\n  if (rows.length === 0) {\n    return (\n      <div className=\"rounded-lg border border-dashed px-4 py-8 text-sm text-muted-foreground\">\n        No recent LLM calls.\n      </div>\n    );\n  }\n  return (\n    <div className=\"overflow-x-auto\">\n      <table className=\"w-full min-w-[760px] text-left text-xs\">\n        <thead>\n          <tr className=\"border-b text-muted-foreground\">\n            <th className=\"px-2 py-2 font-medium\">When</th>\n            <th className=\"px-2 py-2 font-medium\">User</th>\n            <th className=\"px-2 py-2 font-medium\">App</th>\n            <th className=\"px-2 py-2 font-medium\">Label</th>\n            <th className=\"px-2 py-2 font-medium\">Model</th>\n            <th className=\"px-2 py-2 text-right font-medium\">\n              {billing.shortLabel}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          {rows.slice(0, 10).map((row) => (\n            <tr key={row.id} className=\"border-b last:border-0\">\n              <td className=\"px-2 py-3 text-muted-foreground\">\n                {timeAgo(row.createdAt)}\n              </td>\n              <td className=\"max-w-56 px-2 py-3\">\n                <div className=\"truncate text-foreground\">{row.ownerEmail}</div>\n              </td>\n              <td className=\"px-2 py-3 text-muted-foreground\">\n                {displayApp(row.app)}\n              </td>\n              <td className=\"px-2 py-3\">\n                <Badge variant=\"outline\">{row.label}</Badge>\n              </td>\n              <td className=\"max-w-48 px-2 py-3\">\n                <div className=\"truncate text-muted-foreground\">\n                  {row.model}\n                </div>\n              </td>\n              <td className=\"px-2 py-3 text-right tabular-nums\">\n                {formatSpend(row.costCents, billing)}\n              </td>\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n\nexport default function MetricsRoute() {\n  const [sinceDays, setSinceDays] = useState(30);\n  const { data, isLoading, error } = useActionQuery(\n    \"list-dispatch-usage-metrics\",\n    { sinceDays },\n    { refetchInterval: 30_000 },\n  );\n  const metrics = data as DispatchUsageMetrics | undefined;\n  const billing = metrics?.billing ?? USD_BILLING;\n  const totalTokens = useMemo(() => {\n    if (!metrics) return 0;\n    return (\n      metrics.totals.inputTokens +\n      metrics.totals.outputTokens +\n      metrics.totals.cacheReadTokens +\n      metrics.totals.cacheWriteTokens\n    );\n  }, [metrics]);\n\n  return (\n    <DispatchShell\n      title=\"Metrics\"\n      description={\n        billing.unit === \"builder-credits\"\n          ? \"Workspace-wide Builder.io credit spend, chat volume, user activity, and app access.\"\n          : \"Workspace-wide LLM spend, chat volume, user activity, and app access.\"\n      }\n    >\n      <div className=\"space-y-4\">\n        <div className=\"flex flex-wrap items-center justify-between gap-3\">\n          <div className=\"text-sm text-muted-foreground\">\n            {metrics?.access.scope === \"organization\"\n              ? `${metrics.access.totalUsers} workspace users`\n              : `${metrics?.access.totalUsers ?? 0} signed-in users`}\n          </div>\n          <RangeSelector value={sinceDays} onChange={setSinceDays} />\n        </div>\n\n        {error ? (\n          <Alert variant=\"destructive\">\n            <IconAlertTriangle className=\"h-4 w-4\" />\n            <AlertTitle>Metrics unavailable</AlertTitle>\n            <AlertDescription>\n              {error instanceof Error ? error.message : \"Unable to load usage.\"}\n            </AlertDescription>\n          </Alert>\n        ) : null}\n\n        {isLoading && !metrics ? <LoadingMetrics /> : null}\n\n        {metrics ? (\n          <>\n            <div className=\"grid gap-3 md:grid-cols-2 xl:grid-cols-5\">\n              <MetricCard\n                label={billing.label}\n                value={formatSpend(metrics.totals.costCents, billing)}\n                detail={`${formatTokens(totalTokens)} total tokens`}\n                icon={<IconCoin size={17} />}\n              />\n              <MetricCard\n                label=\"LLM calls\"\n                value={formatNumber(metrics.totals.calls)}\n                detail={`${formatNumber(metrics.totals.chatCalls)} chat turns`}\n                icon={<IconActivity size={17} />}\n              />\n              <MetricCard\n                label=\"Active users\"\n                value={formatNumber(metrics.totals.activeUsers)}\n                detail={`${formatNumber(metrics.access.totalUsers)} users with access`}\n                icon={<IconUsersGroup size={17} />}\n              />\n              <MetricCard\n                label=\"Workspace apps\"\n                value={formatNumber(metrics.totals.workspaceApps)}\n                detail={`${formatNumber(metrics.byApp.length)} with usage`}\n                icon={<IconApps size={17} />}\n              />\n              <MetricCard\n                label=\"Chat threads\"\n                value={formatNumber(metrics.totals.chatThreads)}\n                detail={`${formatNumber(metrics.totals.chatMessages)} messages`}\n                icon={<IconMessages size={17} />}\n              />\n            </div>\n\n            <div className=\"grid gap-4 xl:grid-cols-[minmax(0,1.35fr)_minmax(320px,0.65fr)]\">\n              <Panel\n                title={\n                  billing.unit === \"builder-credits\"\n                    ? \"Credit Spend By App\"\n                    : \"Spend By App\"\n                }\n                icon={<IconChartBar size={16} />}\n              >\n                <AppSpendRows rows={metrics.byApp} billing={billing} />\n              </Panel>\n              <Panel title=\"Daily Activity\" icon={<IconClockHour4 size={16} />}>\n                <DailyActivity rows={metrics.daily} />\n              </Panel>\n            </div>\n\n            <Panel title=\"Access By App\" icon={<IconApps size={16} />}>\n              <AppAccessTable rows={metrics.appAccess} billing={billing} />\n            </Panel>\n\n            <Panel title=\"Users\" icon={<IconUsersGroup size={16} />}>\n              <UserTable rows={metrics.byUser} billing={billing} />\n            </Panel>\n\n            <div className=\"grid gap-4 lg:grid-cols-2\">\n              <Panel title=\"Models\" icon={<IconChartBar size={16} />}>\n                <CompactBreakdown\n                  rows={metrics.byModel}\n                  empty=\"No model usage in this window.\"\n                  billing={billing}\n                />\n              </Panel>\n              <Panel title=\"Work Types\" icon={<IconActivity size={16} />}>\n                <CompactBreakdown\n                  rows={metrics.byLabel}\n                  empty=\"No labeled usage in this window.\"\n                  billing={billing}\n                />\n              </Panel>\n            </div>\n\n            <Panel title=\"Recent LLM Calls\" icon={<IconActivity size={16} />}>\n              <RecentTable rows={metrics.recent} billing={billing} />\n            </Panel>\n          </>\n        ) : null}\n      </div>\n    </DispatchShell>\n  );\n}\n"]}

package/dist/routes/pages/overview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overview.d.ts","sourceRoot":"","sources":["../../../src/routes/pages/overview.tsx"],"names":[],"mappings":"AAmcA,wBAAgB,IAAI;;IAEnB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,4CA4RpC"}
+{"version":3,"file":"overview.d.ts","sourceRoot":"","sources":["../../../src/routes/pages/overview.tsx"],"names":[],"mappings":"AAycA,wBAAgB,IAAI;;IAEnB;AAED,MAAM,CAAC,OAAO,UAAU,aAAa,4CA4RpC"}

package/dist/routes/pages/overview.js

@@ -52,9 +52,7 @@ function WorkspaceAppsSection({ apps, isLoading, }) {
     const filteredApps = apps.filter((app) => !app.isDispatch);
     const visibleApps = filteredApps.slice(0, 6);
     const showSkeletons = isLoading && visibleApps.length === 0;
-    return (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconApps, { size: 16, className: "text-muted-foreground" }), _jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Workspace apps" })] }), _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsxs(Link, { to: "/apps", children: ["View all", _jsx(IconArrowUpRight, { size: 15, className: "ml-1.5" })] }) })] }), _jsxs("div", { className: "grid gap-3 sm:grid-cols-2 xl:grid-cols-3", children: [showSkeletons
-                        ? Array.from({ length: 6 }).map((_, index) => (_jsx(AppCardSkeleton, {}, index)))
-                        : visibleApps.map((app) => (_jsx(WorkspaceAppCard, { app: app, className: "min-h-32" }, app.id))), !showSkeletons ? _jsx(CreateAppPopover, {}) : null] })] }));
+    return (_jsxs("section", { className: "space-y-3", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(IconApps, { size: 16, className: "text-muted-foreground" }), _jsx("h2", { className: "text-sm font-semibold text-foreground", children: "Workspace apps" })] }), _jsx(Button, { asChild: true, variant: "outline", size: "sm", children: _jsxs(Link, { to: "/apps", children: ["View all", _jsx(IconArrowUpRight, { size: 15, className: "ml-1.5" })] }) })] }), _jsx("div", { className: "grid auto-rows-fr gap-3 sm:grid-cols-2 xl:grid-cols-3", children: showSkeletons ? (Array.from({ length: 6 }).map((_, index) => (_jsx(AppCardSkeleton, {}, index)))) : visibleApps.length > 0 ? (visibleApps.map((app) => (_jsx(WorkspaceAppCard, { app: app, className: "h-full min-h-32" }, app.id)))) : (_jsx(CreateAppPopover, {})) })] }));
 }
 function formatAgeSeconds(seconds) {
     if (!seconds || seconds < 0)