+ {settingsLoadError &&
+ )
+}
diff --git a/app/(dashboard)/[scope]/settings/_components/provider-keys-page.tsx b/app/(dashboard)/[scope]/settings/_components/provider-keys-page.tsx
new file mode 100644
index 00000000..cc019450
--- /dev/null
+++ b/app/(dashboard)/[scope]/settings/_components/provider-keys-page.tsx
@@ -0,0 +1,9 @@
+"use client";
+
+import { useUser } from "@/hooks/use-user";
+import { ApiKeysSection } from "./api-keys-section";
+
+export function ProviderKeysPage() {
+ const { user, isLoading } = useUser();
+ return {settingsLoadError}
}
+
- (
- "/api/settings",
- (url: string) => fetchJsonObject(url, "Failed to load settings"),
- )
- const settingsLoadError = settingsError ? "Unable to load settings preferences" : null
- const {
- data: githubInstallations,
- error: githubInstallationsError,
- } = useSWR(
- "/api/github/installations",
- (url: string) => fetchJsonArray(url, "Failed to load GitHub installations"),
- )
- const { data: githubOwnerTargets } = useSWR(
- user?.github_connected ? "/api/github/owners" : null,
- (url: string) => fetchJsonArray(url, "Failed to load GitHub accounts"),
- )
- const ownerTargets = githubOwnerTargets ?? []
- const ownerTargetsNeedingInstall = ownerTargets.filter((target) => target.github_installation_id == null)
- const githubInstallationsLoadError = githubInstallationsError ? "Unable to load GitHub App installations" : null
- const platformAccess = user ? user.platform_access : null
- const platformAiEnabled = platformAccess?.allowPlatformAi ?? null
-
- const githubPrimaryAction = useMemo(() => {
- if (user?.github_primary_action) return user.github_primary_action
- if (!user?.github_connected) {
- return {
- label: user?.github_app_available ? "Install GitHub App" : "Connect GitHub",
- href: "/api/auth/github",
- }
- }
- return null
- }, [user])
-
- const showGithubAddInstallAction = Boolean(
- user?.github_app_available &&
- user?.github_connected &&
- githubPrimaryAction?.href !== "/api/auth/github",
- )
-
- const nextStep = useMemo(() => {
- if (githubPrimaryAction) {
- const githubState = user?.github_state
- const title = githubState === "app_installed"
- ? "Sync repositories next"
- : githubState === "app_install_pending"
- ? "Complete the GitHub App install"
- : githubState === "oauth_connected"
- ? "Upgrade GitHub from OAuth to the App"
- : "Install GitHub App next"
- const description = githubState === "app_installed"
- ? "Open Projects and sync the repositories covered by your GitHub App installation into Mogplex."
- : user?.github_status_detail || "GitHub powers repo sync, trigger coverage, and automation."
- return {
- title,
- description,
- href: githubPrimaryAction.href,
- label: githubPrimaryAction.label,
- }
- }
-
- if (!user?.github_connected) {
- return {
- title: user?.github_app_available ? "Install GitHub App next" : "Connect GitHub next",
- description: "GitHub is required to import repositories and make Open Workspace useful.",
- href: "/api/auth/github",
- label: user?.github_app_available ? "Install GitHub App" : "Connect GitHub",
- }
- }
-
- return null
- }, [githubPrimaryAction, user])
-
- const trackConnectionStart = useCallback((provider: "github", source: string) => {
- if (provider === "github") {
- trackActivation("github_connect_started", {
- source,
- connection_mode: user?.github_app_available ? "app" : "oauth",
- })
- }
- }, [user?.github_app_available])
-
- return (
- (null);
+ const settingsPath = scopedHref(scope, "/settings");
+ const inSettings = pathname === settingsPath || pathname.startsWith(`${settingsPath}/`);
+ const showSettings = inSettings && mainNavigationPath !== pathname;
const [resizing, setResizing] = useState(false);
const activePointerId = useRef(null);
- const compact = width <= COMPACT_THRESHOLD;
+ const compact = !showSettings && width <= COMPACT_THRESHOLD;
useEffect(() => {
const storedWidth = Number(window.localStorage.getItem(SIDEBAR_WIDTH_KEY));
@@ -213,7 +223,7 @@ export function AppSidebar() {
data-compact={compact ? "true" : "false"}
data-resizing={resizing ? "true" : "false"}
data-testid="app-sidebar"
- style={{ width }}
+ style={{ width: showSettings ? Math.max(width, 240) : width }}
>
@@ -229,8 +239,11 @@ export function AppSidebar() {
)}
+ {showSettings ? (
+ Billing
+
+
);
diff --git a/app/(dashboard)/[scope]/settings/settings-page-client.tsx b/app/(dashboard)/[scope]/settings/settings-page-client.tsx
index e208d419..79e637de 100644
--- a/app/(dashboard)/[scope]/settings/settings-page-client.tsx
+++ b/app/(dashboard)/[scope]/settings/settings-page-client.tsx
@@ -1,227 +1,15 @@
-"use client"
+"use client";
-import { useEffect, useCallback, useMemo } from "react"
-import { usePathname, useRouter, useSearchParams } from "next/navigation"
-import useSWR from "swr"
-import { useUser } from "@/hooks/use-user"
-import { fetchJsonArray, fetchJsonObject } from "@/lib/client-fetch"
-import { TeamSettingsClient } from "@/components/settings/team-settings-client"
-import { TeamsListSection } from "@/components/settings/teams-list-section"
-import { BillingSection } from "@/components/settings/billing-section"
-import { DecisionChecksSection } from "@/components/settings/decision-checks-section"
-import { CliApiKeysSection } from "@/components/settings/cli-api-keys-section"
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"
-import { trackActivation } from "@/lib/activation-tracking"
-import { getLegacySettingsDestination } from "@/lib/settings-redirect"
-import type { ScopeContext } from "@/lib/scope-context"
-
-import {
- AccountSection,
- ApiKeysSection,
- type GithubInstallationView,
- type GithubOwnerTarget,
- type SettingsView,
- type SettingsTab,
- type KeysSubTab,
- SETTINGS_TAB_SET,
- KEYS_SUB_TAB_SET,
-} from "./_components"
+import { useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { getLegacySettingsDestination } from "@/lib/settings-redirect";
+import type { ScopeContext } from "@/lib/scope-context";
export function SettingsPageClient({ scope }: { scope: ScopeContext }) {
- const router = useRouter()
- const searchParams = useSearchParams()
- const query = searchParams.toString()
- const destination = getLegacySettingsDestination(scope, query)
+ const router = useRouter();
+ const query = useSearchParams().toString();
useEffect(() => {
- const target = getLegacySettingsDestination(scope, query, window.location.hash)
- if (target) router.replace(target, { scroll: false })
- }, [scope, query, router])
- if (destination) return null
-
- if (scope.kind === "team") {
- return Billing
-
-
-
- Account
- Teams
- Keys & Tokens
- Billing
-
-
-
-
-
-
-
-
-
-
-
-
- Provider Keys
- Mogplex Keys
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default SettingsPageClient
+ router.replace(getLegacySettingsDestination(scope, query, window.location.hash), { scroll: false });
+ }, [scope, query, router]);
+ return
-
-
- {settingsLoadError && (
- Settings
-Account preferences, keys, and billing.
- {settingsLoadError}
- )}
-
-
-
- Opening Settings…
; +} \ No newline at end of file diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx index 40d59a0c..dcd0ade4 100644 --- a/components/app-sidebar.tsx +++ b/components/app-sidebar.tsx @@ -19,6 +19,7 @@ import { DeliveryTruck, Flash, PlugTypeA, + NavArrowRight, Repository, Rocket, Search, @@ -33,6 +34,7 @@ import { import { formatUsd } from "@/lib/billing/catalog"; import type { CapacityBillingSummaryV2 } from "@/lib/billing/capacity-summary-types"; import { scopedHref } from "@/lib/scoped-href"; +import { SettingsNavigation } from "@/components/settings/settings-navigation"; const SIDEBAR_WIDTH_KEY = "mogplex.appSidebar.width"; const SIDEBAR_COLLAPSED_KEY = "mogplex.appSidebar.collapsed"; @@ -72,16 +74,19 @@ function SidebarNavLink({ item, compact, pathname, + onClick, }: { item: AppNavItem; compact: boolean; pathname: string; + onClick?: () => void; }) { const Icon = NAV_ICONS[item.id]; const active = isAppNavItemActive(pathname, item.match); return ( {item.label} )} + {item.id === "settings" && !compact && } ); } @@ -147,9 +153,13 @@ export function AppSidebar() { Boolean(scope) && (membershipsLoading || scopeResolved); const billingPending = membershipsLoading || billingLoading; const [width, setWidth] = useState(DEFAULT_WIDTH); + const [mainNavigationPath, setMainNavigationPath] = useState
diff --git a/components/panes/flows-pane/use-flow-derived-selection.ts b/components/panes/flows-pane/use-flow-derived-selection.ts
index 9e8b898a..c71fc7fd 100644
--- a/components/panes/flows-pane/use-flow-derived-selection.ts
+++ b/components/panes/flows-pane/use-flow-derived-selection.ts
@@ -168,8 +168,8 @@ export function useFlowDerivedSelection(
selectedAgentNode?.data.harness ?? "mogplex";
const apiKeysSettingsHref = scope
- ? scopedHref(scope, "/settings?tab=keys")
- : "/settings?tab=keys";
+ ? scopedHref(scope, "/settings/keys")
+ : "/settings/keys";
const selectedConditionNode =
selectedNode?.type === "condition"
diff --git a/components/settings/billing-section.tsx b/components/settings/billing-section.tsx
index 907c628c..255dab10 100644
--- a/components/settings/billing-section.tsx
+++ b/components/settings/billing-section.tsx
@@ -1,7 +1,7 @@
"use client";
import { useCallback, useEffect, useRef, useState } from "react";
-import { usePathname, useSearchParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
import useSWR from "swr";
import {
fetchWithActiveTeam,
@@ -10,10 +10,7 @@ import {
} from "@/components/active-scope-provider";
import { CapacityAddOnDialog } from "@/components/settings/capacity-add-on-dialog";
import { BillingSubscriptionDetails } from "@/components/settings/billing-subscription-details";
-import {
- formatDate,
- formatUsd,
-} from "@/components/settings/capacity-billing-format";
+import { formatUsd } from "@/components/settings/capacity-billing-format";
import { useCapacityBillingEvents } from "@/components/settings/use-capacity-billing-events";
import { Button } from "@/components/ui/button";
import {
@@ -31,6 +28,8 @@ import {
} from "@/lib/billing/capacity-catalog";
import type { CapacityBillingSummaryV2 } from "@/lib/billing/capacity-summary-types";
import { findTopupPresetByAmount } from "@/lib/billing/catalog";
+import { BillingUsage } from "./billing-usage";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
type BillingLoadResult =
| { enabled: false }
@@ -111,10 +110,19 @@ async function loadBillingSummary([url, activeTeamId]: [
};
}
-export function BillingSection({ embedded = false }: { embedded?: boolean }) {
+export function BillingSection() {
+ const router = useRouter();
const pathname = usePathname();
const searchParams = useSearchParams();
const activeTeamId = useActiveTeamId();
+ const activeTab = searchParams.get("tab") === "usage" ? "usage" : "settings";
+ function changeTab(value: string) {
+ const params = new URLSearchParams(searchParams.toString());
+ if (value === "usage") params.set("tab", "usage");
+ else params.delete("tab");
+ const query = params.toString();
+ router.push(query ? `${pathname}?${query}` : pathname, { scroll: false });
+ }
const { data, error, isLoading, mutate } = useSWR(
["/api/billing/capacity", activeTeamId],
loadBillingSummary
@@ -126,7 +134,7 @@ export function BillingSection({ embedded = false }: { embedded?: boolean }) {
const [actionError, setActionError] = useState(null);
const hostedUsageAttempts = useRef(new Map());
const checkoutResult = searchParams.get("billing");
- const returnPath = embedded ? `${pathname}?tab=billing` : pathname;
+ const returnPath = pathname;
const summary = data?.enabled ? data.summary : undefined;
const refresh = useCallback(() => mutate(), [mutate]);
@@ -247,7 +255,11 @@ export function BillingSection({ embedded = false }: { embedded?: boolean }) {
const showCapacityAddOns = summary.plan.offerKind === "individual";
return (
-
+
+
+ Billing Settings
+ Usage
+
{submitted ? (
);
}
diff --git a/components/settings/billing-usage.tsx b/components/settings/billing-usage.tsx
new file mode 100644
index 00000000..99bbdf9e
--- /dev/null
+++ b/components/settings/billing-usage.tsx
@@ -0,0 +1,37 @@
+import { formatDate, formatUsd } from "./capacity-billing-format";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import type { CapacityBillingSummaryV2 } from "@/lib/billing/capacity-summary-types";
+
+export function BillingUsage({ summary }: { summary: CapacityBillingSummaryV2 }) {
+ return (
+ = new Set(TEAM_TABS);
-
export const PROVIDERS: Array<{
id: Provider;
label: string;
diff --git a/components/top-bar.tsx b/components/top-bar.tsx
index 0846a2a6..baaf8cc4 100644
--- a/components/top-bar.tsx
+++ b/components/top-bar.tsx
@@ -8,7 +8,7 @@ import { useUser } from "@/hooks/use-user";
import { ScopeMenuItems } from "@/components/scope-switcher";
import { SlackFill } from "@/components/settings/icons";
import { ThemeSwitcher } from "@/components/theme-switcher";
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetTrigger, SheetTitle } from "@/components/ui/sheet";
import {
DropdownMenu,
DropdownMenuContent,
@@ -23,6 +23,7 @@ import {
isAppNavItemActive,
type AppNavItem,
} from "@/lib/app-navigation";
+import { SettingsNavigation } from "@/components/settings/settings-navigation";
const DOCS_URL = "https://docs.mogplex.com/";
@@ -40,14 +41,17 @@ const fetchSlackInstallations = async (url: string) => {
function MobileNavLink({
item,
pathname,
+ onClick,
}: {
item: AppNavItem;
pathname: string;
+ onClick?: () => void;
}) {
const isActive = isAppNavItemActive(pathname, item.match);
return (
void;
+ scope: string;
}) {
+ const [mainNavigationPath, setMainNavigationPath] = useState(null);
+ const settingsPath = scopedHref(scope, "/settings");
+ const inSettings = pathname === settingsPath || pathname.startsWith(`${settingsPath}/`);
+ if (inSettings && mainNavigationPath !== pathname) {
+ return setMainNavigationPath(pathname)} onNavigate={onNavigate} />;
+ }
return (
-
) : null}
+
redirectTo(action, "/api/stripe/portal", {})}
pendingAction={pendingAction}
@@ -433,42 +446,11 @@ export function BillingSection({ embedded = false }: { embedded?: boolean }) {
) : null}
+
-
-
-
-
-
- See what used your inference balance.
-
-
-
- {summary.recentCosts.length === 0 ? (
-
-
+
+
{actionError ? (
+ Recent usage costs
-No usage costs yet.
- ) : ( - summary.recentCosts.map((cost) => ( -
-
- ))
- )}
-
-
- {cost.description}
-- {formatDate(cost.occurredAt)} ·{" "} - {cost.status.replaceAll("_", " ")} -
-- {cost.totalCents === null - ? "In progress" - : formatUsd(cost.totalCents)} -
-@@ -489,6 +471,6 @@ export function BillingSection({ embedded = false }: { embedded?: boolean }) { }} open={selectedAddOn !== null} /> -
+
+
+
+
+ See what used your inference balance.
+
+
+ {summary.recentCosts.length === 0 ? (
+
+
+
+ );
+}
diff --git a/components/settings/settings-navigation.tsx b/components/settings/settings-navigation.tsx
new file mode 100644
index 00000000..a5eb975d
--- /dev/null
+++ b/components/settings/settings-navigation.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import Link from "next/link";
+import { NavArrowLeft } from "iconoir-react";
+import { useParams, usePathname } from "next/navigation";
+import { useMemberships } from "@/hooks/use-memberships";
+import { buildSettingsNavItems } from "@/lib/settings-navigation";
+
+export function SettingsNavigation({ onBack, onNavigate }: {
+ onBack: () => void;
+ onNavigate?: () => void;
+}) {
+ const { scope } = useParams<{ scope: string }>();
+ const pathname = usePathname();
+ const { memberships, isLoading } = useMemberships();
+ const team = memberships.teams.find((item) => item.slug === scope);
+ const personal = memberships.personal.slug === scope;
+ const items = team || personal
+ ? buildSettingsNavItems(scope, team ? "team" : "personal", team?.role === "owner" || team?.role === "admin")
+ : [];
+
+ return (
+
+ );
+}
diff --git a/components/settings/team-settings-client.tsx b/components/settings/team-settings-client.tsx
index e97f90e5..4b906240 100644
--- a/components/settings/team-settings-client.tsx
+++ b/components/settings/team-settings-client.tsx
@@ -1,33 +1,21 @@
"use client";
-import { useCallback } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { BillingSection } from "@/components/settings/billing-section";
import { DecisionChecksSection } from "@/components/settings/decision-checks-section";
import { useTeamSettingsActions } from "./use-team-settings-actions";
import { MembersTabContent } from "./members-tab-content";
import { KeysTabContent } from "./keys-tab-content";
import { ModelsTabContent } from "./models-tab-content";
import { AuditTabContent } from "./audit-tab-content";
-import { TEAM_TAB_SET, type TeamSettingsTab } from "./team-settings-types";
export function TeamSettingsClient({
teamId,
teamSlug,
+ section,
}: {
teamId: string;
teamSlug: string;
+ section: "members" | "keys" | "models" | "audit";
}) {
- const router = useRouter();
- const pathname = usePathname();
- const searchParams = useSearchParams();
- const tabParam = searchParams?.get("tab") ?? "";
- const activeTab: TeamSettingsTab = TEAM_TAB_SET.has(tabParam)
- ? (tabParam as TeamSettingsTab)
- : "members";
-
const actions = useTeamSettingsActions(teamId);
const {
status,
@@ -70,25 +58,13 @@ export function TeamSettingsClient({
saveModelAllowlist,
} = actions;
- const resolvedActiveTab =
- activeTab === "audit" && membersData && !canManageMembers
- ? "members"
- : activeTab;
-
- const handleTabChange = useCallback(
- (value: string) => {
- const params = new URLSearchParams(searchParams?.toString() ?? "");
- params.set("tab", value);
- router.replace(`${pathname}?${params.toString()}`, { scroll: false });
- },
- [pathname, router, searchParams]
- );
+ const title = { members: "Members", keys: "Provider Keys", models: "Models", audit: "Audit" }[section];
return (
- Inference balance
+-
+
- Available now
- {formatUsd(summary.hostedUsage.spendableCents)}
- Included credit
- {formatUsd(summary.hostedUsage.includedRemainingCents)}
- Purchased credit
- {formatUsd(summary.hostedUsage.purchasedRemainingCents)}
Recent usage costs
No usage costs yet.
+ ) : summary.recentCosts.map((cost) => ( +
+
+ ))}
+
+
+ {cost.description}
+{formatDate(cost.occurredAt)} · {cost.status.replaceAll("_", " ")}
+{cost.totalCents === null ? "In progress" : formatUsd(cost.totalCents)}
+
+
)}
-
-
-
-
-
+ {section === "audit" && (
+ canManageMembers ?
);
}
diff --git a/components/settings/team-settings-types.ts b/components/settings/team-settings-types.ts
index 833576cb..8a652b0f 100644
--- a/components/settings/team-settings-types.ts
+++ b/components/settings/team-settings-types.ts
@@ -1,28 +1,11 @@
import type { TeamRole } from "@/lib/team-capabilities";
import type { Provider } from "@/lib/vault";
-export type TeamSettingsTab =
- | "members"
- | "keys"
- | "models"
- | "audit"
- | "billing";
-
export type TeamKeysResponse = {
keys: Array<{ provider: Provider; created_at: string; updated_at: string }>;
viewer: { role: TeamRole; canManage: boolean };
};
-export const TEAM_TABS = [
- "members",
- "keys",
- "models",
- "audit",
- "billing",
-] as const;
-
-export const TEAM_TAB_SET: ReadonlySet
-
{status && (
@@ -97,125 +73,116 @@ export function TeamSettingsClient({
Team Settings
-Manage {membersData?.team.name ?? teamSlug}.
+ {title}
+{membersData?.team.name ?? teamSlug}
-
-
+ {section === "members" && (
+
-
+ {section === "keys" && (
+
+ {section === "models" && (
+
-
- {canManageMembers && (
-
-
- )}
+
+ )}
- Team icon
-
- PNG, JPG, WEBP, or GIF · up to 2 MB · square works best.
+ {section === "members" && (
+
+
-
- {canManageIcon && (
-
- {
- const file = event.target.files?.[0];
- if (file) void uploadTeamIcon(file);
- }}
- />
-
- {membersData?.team.iconUrl && (
+
-
-
- Members
- Keys
- Models
- {canManageMembers && Audit }
- Billing
-
-
+ {membersData?.team.iconUrl && (
+
+ )}
+
+ )}
+
+ )}
-
+
+ {canManageIcon && (
+ Team icon
+
+ PNG, JPG, WEBP, or GIF · up to 2 MB · square works best.
+
+
+ {
+ const file = event.target.files?.[0];
+ if (file) void uploadTeamIcon(file);
+ }}
+ />
- )}
-
- )}
-
-
- + {membersError ? "Unable to load team permissions." : membersData ? "Only a team owner or admin can view the audit log." : "Loading team permissions…"} +
+ )}