"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { OrgUsagePanel } from "../usage/OrgUsagePanel";
import { useDeploymentMode } from "../deployment-mode";
import { CloudFeatureNotice } from "../internal/CloudFeatureNotice";
import { useOrg } from "../organization/OrgProvider";
/** Settings section for organization usage and cost reporting. */
export function UsageSection() {
    const { activeOrg } = useOrg();
    const mode = useDeploymentMode();
    const orgId = activeOrg?.metadata?.id ?? "";
    return (_jsxs("section", { "aria-labelledby": "usage-heading", children: [_jsx("h2", { id: "usage-heading", className: "text-foreground mb-1 text-sm font-semibold", children: "Usage" }), _jsx("p", { className: "text-muted-foreground mb-4 text-xs", children: "Monitor token consumption, cost, and execution activity across your organization." }), mode === "local" ? (_jsx(CloudFeatureNotice, { children: "Usage reports are not available in local mode. Connect to Stigmer Cloud to view organization-level cost and token analytics." })) : !orgId ? (_jsx("p", { className: "text-muted-foreground py-4 text-center text-xs", children: "Select an organization to view usage." })) : (_jsx(OrgUsagePanel, { orgId: orgId }))] }));
}
//# sourceMappingURL=UsageSection.js.map