karti-ai
533 lines
22 KiB
TypeScript
533 lines
22 KiB
TypeScript
/**
|
|
* Application root: routing, data fetching, and the auth gate.
|
|
*/
|
|
import { lazy, Suspense, useEffect, useState } from 'react';
|
|
import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
|
|
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
|
|
import { Link } from 'react-router-dom';
|
|
import { ApiError, get, getSupabase, loadPublicConfig, patch, type PublicConfig } from '@/lib/api';
|
|
import { ThemeProvider } from '@/lib/theme';
|
|
import { IdentityProvider, useIdentityQuery } from '@/lib/identity';
|
|
import { LayoutProvider } from '@/lib/layout';
|
|
import { PiggyContextProvider } from '@/lib/piggy-context';
|
|
import { PlatformAudioProvider } from '@/lib/audio';
|
|
import { Shell } from '@/components/Shell';
|
|
import { SignIn } from '@/pages/SignIn';
|
|
import { CreateProfile } from '@/pages/CreateProfile';
|
|
import { Register } from '@/pages/Register';
|
|
import { PiggyMark } from '@/components/PiggyMark';
|
|
import { Badge, Button, Card, EmptyState, Section, Skeleton, Stat } from '@/components/ui';
|
|
import { PageHeader } from '@/components/ui/page-header';
|
|
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
|
import { Toaster } from '@/components/ui/sonner';
|
|
import { usePageTitle } from '@/lib/title';
|
|
|
|
const Overview = lazy(() => import('@/pages/Overview').then(({ Overview }) => ({ default: Overview })));
|
|
const Capacity = lazy(() => import('@/pages/Capacity').then(({ Capacity }) => ({ default: Capacity })));
|
|
const DemandPipeline = lazy(() => import('@/pages/Pipeline').then(({ DemandPipeline }) => ({ default: DemandPipeline })));
|
|
const SupplyPipeline = lazy(() => import('@/pages/Pipeline').then(({ SupplyPipeline }) => ({ default: SupplyPipeline })));
|
|
const Settings = lazy(() => import('@/pages/Settings').then(({ Settings }) => ({ default: Settings })));
|
|
const Accounts = lazy(() => import('@/pages/Accounts').then(({ Accounts }) => ({ default: Accounts })));
|
|
const Account = lazy(() => import('@/pages/Account').then(({ Account }) => ({ default: Account })));
|
|
const Margin = lazy(() => import('@/pages/Margin').then(({ Margin }) => ({ default: Margin })));
|
|
const FactReview = lazy(() => import('@/pages/FactReview').then(({ FactReview }) => ({ default: FactReview })));
|
|
const Contracts = lazy(() => import('@/pages/Contracts').then(({ Contracts }) => ({ default: Contracts })));
|
|
const Imports = lazy(() => import('@/pages/Imports').then(({ Imports }) => ({ default: Imports })));
|
|
const Piggy = lazy(() => import('@/pages/Piggy').then(({ Piggy }) => ({ default: Piggy })));
|
|
const Growth = lazy(() => import('@/pages/Growth').then(({ Growth }) => ({ default: Growth })));
|
|
const Calendar = lazy(() => import('@/pages/Calendar').then(({ Calendar }) => ({ default: Calendar })));
|
|
const Learn = lazy(() => import('@/pages/Learn').then(({ Learn }) => ({ default: Learn })));
|
|
// Lazy is load-bearing for these five and not merely conventional: they are the
|
|
// only pages that pull react-markdown and remark-gfm, and an eager import would
|
|
// put a markdown parser into the entry chunk every route pays for.
|
|
const Motion = lazy(() => import('@/pages/Motion').then(({ Motion }) => ({ default: Motion })));
|
|
const MotionLibrary = lazy(() => import('@/pages/MotionLibrary').then(({ MotionLibrary }) => ({ default: MotionLibrary })));
|
|
const MotionTemplate = lazy(() => import('@/pages/MotionTemplate').then(({ MotionTemplate }) => ({ default: MotionTemplate })));
|
|
const MotionEngagements = lazy(() => import('@/pages/MotionEngagements').then(({ MotionEngagements }) => ({ default: MotionEngagements })));
|
|
const Engagement = lazy(() => import('@/pages/Engagement').then(({ Engagement }) => ({ default: Engagement })));
|
|
|
|
const queryClient = new QueryClient({
|
|
defaultOptions: {
|
|
queries: {
|
|
staleTime: 30_000,
|
|
// Refetching every time a phone user switches apps and comes back is
|
|
// wasteful on cellular; the interval on the dashboard covers freshness.
|
|
refetchOnWindowFocus: false,
|
|
retry: (failureCount, error) => {
|
|
// Retrying an auth failure just produces the same failure slower.
|
|
if (error instanceof ApiError && (error.needsSignIn || error.needsProfile)) return false;
|
|
return failureCount < 2;
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
export function App() {
|
|
const [config, setConfig] = useState<PublicConfig | null>(null);
|
|
const [configError, setConfigError] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
loadPublicConfig()
|
|
.then(setConfig)
|
|
.catch((error: unknown) =>
|
|
setConfigError(error instanceof Error ? error.message : 'Could not reach the server.'),
|
|
);
|
|
}, []);
|
|
|
|
if (configError) {
|
|
return (
|
|
<Centered>
|
|
<EmptyState
|
|
title="Cannot reach PIG"
|
|
description={configError}
|
|
/>
|
|
</Centered>
|
|
);
|
|
}
|
|
|
|
if (!config) return <Splash />;
|
|
|
|
return (
|
|
<QueryClientProvider client={queryClient}>
|
|
<ThemeProvider
|
|
onPersist={(prefs) => {
|
|
// Fire and forget: a failed preference save must never block the UI,
|
|
// and the local copy already applied the change.
|
|
void patch('/api/me/preferences', prefs).catch(() => {});
|
|
}}
|
|
>
|
|
{/*
|
|
Above the router, so the music survives navigation AND covers the
|
|
anonymous Learn page — a share-code visitor gets the same platform
|
|
character as a member. It never plays unbidden: the browser refuses
|
|
audio until the page has had a real gesture, so it begins when
|
|
someone actually starts using the page, and the header control mutes
|
|
it for good on that device.
|
|
*/}
|
|
<PlatformAudioProvider>
|
|
<BrowserRouter>
|
|
<AuthGate config={config} />
|
|
</BrowserRouter>
|
|
</PlatformAudioProvider>
|
|
{/* Inside ThemeProvider: the host reads the resolved light/dark value. */}
|
|
<Toaster />
|
|
</ThemeProvider>
|
|
</QueryClientProvider>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* The signed-out screens render outside Shell. Their shared AuthShell supplies
|
|
* the public header and its music control; keeping this boundary component
|
|
* means the auth gate does not need to know anything about that presentation.
|
|
*
|
|
* Learn is not wrapped: it brings its own chrome and already hosts one.
|
|
*/
|
|
function SignedOut({ children }: { children: React.ReactNode }) {
|
|
return children;
|
|
}
|
|
|
|
/**
|
|
* Decides what to show based on *why* a request failed.
|
|
*
|
|
* The distinction between "not signed in" and "signed in but not a member" is
|
|
* the one that matters: sending an invited-but-unprovisioned user back to a
|
|
* login screen they have already completed is an infuriating loop, and it is
|
|
* the default behaviour if both are treated as "auth error".
|
|
*/
|
|
function AuthGate({ config }: { config: PublicConfig }) {
|
|
// Which unauthenticated screen to show. Kept in state rather than a route so
|
|
// that a half-filled registration form is not lost to an accidental Back.
|
|
const [showRegister, setShowRegister] = useState(false);
|
|
|
|
const { data, isLoading, error, refetch } = useIdentityQuery();
|
|
|
|
// Adopt the server's stored appearance once we know who this is. Appearance
|
|
// only: sidebar-collapsed and dock-open are per-device and live in
|
|
// localStorage, deliberately (see lib/layout.tsx).
|
|
useEffect(() => {
|
|
if (!data) return;
|
|
void get<{ themeMode?: string; accentColor?: string }>('/api/me/profile')
|
|
.then((profile) => {
|
|
if (!profile) return;
|
|
const host = window as unknown as { __pigAdoptTheme?: (p: unknown) => void };
|
|
host.__pigAdoptTheme?.(profile);
|
|
})
|
|
.catch(() => {});
|
|
}, [data]);
|
|
|
|
// React to sign-in and sign-out without a page reload.
|
|
useEffect(() => {
|
|
const supabase = getSupabase();
|
|
if (!supabase) return;
|
|
const { data: subscription } = supabase.auth.onAuthStateChange(() => {
|
|
void refetch();
|
|
});
|
|
return () => subscription.subscription.unsubscribe();
|
|
}, [refetch]);
|
|
|
|
if (isLoading) return <Splash />;
|
|
|
|
if (error instanceof ApiError) {
|
|
if (error.needsSignIn) {
|
|
/*
|
|
* Learn is the one route reachable without an account. It gates itself on
|
|
* a share code, and the API only ever serves it platform-track rows — so
|
|
* sending a code-holder to the sign-in screen would make the code
|
|
* unusable, which is the whole point of having one.
|
|
*
|
|
* Rendered outside Shell deliberately: the page uses no identity, layout
|
|
* or dock hook, and there is no member to build a workspace chrome for.
|
|
*/
|
|
if (window.location.pathname === '/learn') {
|
|
return (
|
|
<RoutePage>
|
|
<Learn />
|
|
</RoutePage>
|
|
);
|
|
}
|
|
return (
|
|
<SignedOut>
|
|
{showRegister ? (
|
|
<Register
|
|
config={config}
|
|
onBack={() => setShowRegister(false)}
|
|
onRegistered={() => {
|
|
setShowRegister(false);
|
|
void refetch();
|
|
}}
|
|
/>
|
|
) : (
|
|
<SignIn config={config} onCreateAccount={() => setShowRegister(true)} />
|
|
)}
|
|
</SignedOut>
|
|
);
|
|
}
|
|
// Authenticated but not a member. This is a step in the flow, not an
|
|
// error — sending them back to a login screen they have already completed
|
|
// would be a loop with no exit.
|
|
if (error.needsProfile) {
|
|
return (
|
|
<SignedOut>
|
|
<CreateProfile config={config} onCreated={() => void refetch()} />
|
|
</SignedOut>
|
|
);
|
|
}
|
|
}
|
|
|
|
if (error || !data) {
|
|
return (
|
|
<Centered>
|
|
<EmptyState
|
|
title="Something went wrong"
|
|
description={error instanceof Error ? error.message : 'Unknown error.'}
|
|
/>
|
|
</Centered>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<IdentityProvider identity={data}>
|
|
<LayoutProvider>
|
|
<PiggyContextProvider>
|
|
<AppRoutes />
|
|
</PiggyContextProvider>
|
|
</LayoutProvider>
|
|
</IdentityProvider>
|
|
);
|
|
}
|
|
|
|
function AppRoutes() {
|
|
return (
|
|
<Routes>
|
|
<Route element={<Shell />}>
|
|
{/*
|
|
`/` is the front door, and the front door is Piggy.
|
|
--------------------------------------------------
|
|
Signing in does not navigate from the form: the auth gate starts
|
|
rendering these routes at the browser's current address. `/` goes to
|
|
Piggy directly, while `/login` has its own authenticated-only redirect
|
|
below so a person who used the explicit sign-in URL does not land on
|
|
the catch-all Not found page.
|
|
|
|
It is a redirect rather than Piggy mounted at the index, because the
|
|
workspace needs ONE address. Two paths rendering it would leave the
|
|
sidebar row unlit on `/`, the breadcrumb blank, and a shared link
|
|
ambiguous. `replace` keeps `/` out of history, so Back leaves the app
|
|
instead of bouncing between the two, and the logo — which points at
|
|
`/` and means "home" — lands on the same screen it always did, only
|
|
home is Piggy now.
|
|
|
|
Overview moves to `/overview` rather than being displaced: it is the
|
|
exec's page, it keeps its place at the top of Intelligence, it keeps
|
|
its tab on the phone, and it is one click from anywhere. What it
|
|
loses is being the thing you are shown before you have asked for
|
|
anything, which is the whole point of the change — a report is what
|
|
you open when you have a question about the business, and Piggy is
|
|
where you ask it.
|
|
|
|
Nothing else moves. Every other path is registered exactly as before,
|
|
so `/accounts/:id`, `/margin` and every bookmark and Piggy record link
|
|
into them still resolve directly, with no pass through here.
|
|
*/}
|
|
<Route index element={<Navigate to="/piggy" replace />} />
|
|
<Route path="login" element={<Navigate to="/" replace />} />
|
|
<Route path="overview" element={<RoutePage><Overview /></RoutePage>} />
|
|
<Route path="margin" element={<RoutePage><Margin /></RoutePage>} />
|
|
<Route path="growth" element={<RoutePage><Growth /></RoutePage>} />
|
|
<Route path="calendar" element={<RoutePage><Calendar /></RoutePage>} />
|
|
<Route path="learn" element={<RoutePage><Learn /></RoutePage>} />
|
|
<Route path="capacity" element={<RoutePage><Capacity /></RoutePage>} />
|
|
<Route path="demand" element={<RoutePage><DemandPipeline /></RoutePage>} />
|
|
<Route path="supply" element={<RoutePage><SupplyPipeline /></RoutePage>} />
|
|
<Route path="accounts" element={<RoutePage><Accounts /></RoutePage>} />
|
|
{/*
|
|
The first record route in the product. Registered after the list so
|
|
the list keeps `/accounts` exactly; react-router matches the more
|
|
specific path regardless of order, but keeping them adjacent is how
|
|
the next four record routes will read.
|
|
*/}
|
|
<Route path="accounts/:id" element={<RoutePage><Account /></RoutePage>} />
|
|
{/*
|
|
Flat, in the register of the routes above — nesting these under a
|
|
layout route would give Motion a chrome no other group has, and the
|
|
five pages share no shell of their own.
|
|
*/}
|
|
<Route path="motion" element={<RoutePage><Motion /></RoutePage>} />
|
|
<Route path="motion/library" element={<RoutePage><MotionLibrary /></RoutePage>} />
|
|
<Route path="motion/library/:id" element={<RoutePage><MotionTemplate /></RoutePage>} />
|
|
<Route path="motion/engagements" element={<RoutePage><MotionEngagements /></RoutePage>} />
|
|
<Route path="motion/engagements/:id" element={<RoutePage><Engagement /></RoutePage>} />
|
|
<Route path="contracts" element={<RoutePage><Contracts /></RoutePage>} />
|
|
<Route path="imports" element={<RoutePage><Imports /></RoutePage>} />
|
|
<Route path="piggy" element={<WorkspaceRoute><Piggy /></WorkspaceRoute>} />
|
|
<Route path="team" element={<Team />} />
|
|
<Route path="facts" element={<RoutePage><FactReview /></RoutePage>} />
|
|
<Route path="settings" element={<RoutePage><Settings /></RoutePage>} />
|
|
<Route path="*" element={<Placeholder title="Not found" />} />
|
|
</Route>
|
|
</Routes>
|
|
);
|
|
}
|
|
|
|
function RoutePage({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<Suspense fallback={<RouteLoading />}>
|
|
{children}
|
|
</Suspense>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* A route that FILLS the content pane instead of flowing down it.
|
|
*
|
|
* Shell puts every page inside `mx-auto max-w-7xl px-4 py-5 …`, which is right
|
|
* for a document and wrong for a workspace: an agent surface with a
|
|
* conversation list, a transcript and an activity panel wants the whole pane,
|
|
* a floor it can pin a composer to, and no page scrollbar behind the two
|
|
* panels that already scroll.
|
|
*
|
|
* `absolute inset-0` is how it gets that without a second shell. SidebarInset
|
|
* is `relative` (see ui/sidebar), so this box is laid out against the content
|
|
* pane itself — full width whatever the container capped, full height whatever
|
|
* the container did not stretch to — while the capped container stays exactly
|
|
* as it is for the twelve pages that want it. Taking it out of flow is also
|
|
* what makes `overflow-hidden` safe here: the page cannot grow, so the panels
|
|
* inside must own their own scrolling, which is the contract a workspace wants
|
|
* anyway.
|
|
*
|
|
* The bottom padding is the one thing that has to be restated. An absolutely
|
|
* positioned child is laid out against its ancestor's PADDING box, so the
|
|
* inset's own tab-bar clearance does not apply to it, and without this the
|
|
* composer would sit underneath the phone tab bar — the exact control a phone
|
|
* user came here to reach. `lg` matches where the tab bar gives way.
|
|
*
|
|
* Under 500px tall the reserve is given back. A phone in landscape, or a phone
|
|
* with the keyboard up, is spending 72px of a 390px viewport on a bar it can
|
|
* reach again by turning the handset back — while the transcript, which is why
|
|
* the page exists, is measured at 40px. The tab bar itself stands down at the
|
|
* same height (Shell.tsx), so nothing lands underneath it.
|
|
*/
|
|
function WorkspaceRoute({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="absolute inset-0 flex min-h-0 flex-col overflow-hidden pb-[calc(4.5rem+var(--safe-bottom))] [@media(max-height:500px)]:pb-[var(--safe-bottom)] lg:pb-0">
|
|
{/* `flex-1` on the fallback, or the spinner for a pane this tall sits up
|
|
against the header while the rest of it stays empty. */}
|
|
<Suspense fallback={<div className="flex flex-1 items-center justify-center"><RouteLoading /></div>}>
|
|
{children}
|
|
</Suspense>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function RouteLoading() {
|
|
return (
|
|
<div
|
|
className="flex min-h-[50dvh] items-center justify-center"
|
|
role="status"
|
|
aria-live="polite"
|
|
>
|
|
<div className="flex flex-col items-center gap-3 text-sm text-muted">
|
|
<PiggyMark className="h-9 w-9 animate-pulse text-fg" aria-hidden />
|
|
<span>Loading view…</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Splash() {
|
|
return (
|
|
<Centered>
|
|
<PiggyMark className="h-12 w-12 animate-pulse text-fg" title="Loading pig" />
|
|
</Centered>
|
|
);
|
|
}
|
|
|
|
function Centered({ children }: { children: React.ReactNode }) {
|
|
return (
|
|
<div className="flex min-h-dvh items-center justify-center bg-bg px-6">
|
|
<div className="w-full max-w-md">{children}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Placeholder({ title }: { title: string }) {
|
|
usePageTitle(title);
|
|
return (
|
|
<EmptyState
|
|
title={title}
|
|
description="That page does not exist or may have moved. Use Search to return to a workspace."
|
|
/>
|
|
);
|
|
}
|
|
|
|
function Team() {
|
|
usePageTitle('Team');
|
|
const { data, isLoading, error, refetch } = useQuery({
|
|
queryKey: ['team'],
|
|
queryFn: () =>
|
|
get<
|
|
{
|
|
id: string;
|
|
name: string;
|
|
email: string;
|
|
title: string | null;
|
|
teams: { team: string; role: string }[];
|
|
}[]
|
|
>('/api/team'),
|
|
});
|
|
|
|
const assignments = (data ?? []).reduce((total, person) => total + person.teams.length, 0);
|
|
const representedTeams = new Set((data ?? []).flatMap((person) => person.teams.map((team) => team.team))).size;
|
|
|
|
return (
|
|
/*
|
|
* The one page that never got a design pass, because it never had an owner:
|
|
* it lives inline in App.tsx rather than in `pages/`, so the wave that swept
|
|
* all thirteen routes swept past it. Measured against the rest of the
|
|
* product it carried a 30px `<h1>` where every other route is 24px, an
|
|
* accent-coloured "ACCESS MAP" eyebrow of exactly the kind the direction
|
|
* deleted from Growth (identity colour used as decoration, on a page with
|
|
* no agent in it), hand-rolled 10px/24px stat tiles instead of `Stat`, and
|
|
* a 14px section heading floating on the canvas. It is now the same three
|
|
* primitives every other page is built from and nothing else changed.
|
|
*/
|
|
<div className="flex flex-col gap-6">
|
|
<PageHeader
|
|
title="Team"
|
|
description="See who can operate each side of the compute business and where ownership is thin."
|
|
actions={
|
|
<Link
|
|
to="/settings"
|
|
className="tap inline-flex items-center rounded-lg px-1 text-sm font-medium text-accent-fg underline-offset-4 hover:underline"
|
|
>
|
|
Manage access in Settings
|
|
</Link>
|
|
}
|
|
/>
|
|
|
|
{/* `grid-cols-2 gap-3 xl:grid-cols-*`, the same KPI row Overview and
|
|
Margin use. This carried `grid-cols-3 sm:max-w-xl`, which made Team
|
|
the one page whose headline figures were a different size and whose
|
|
row stopped halfway across the page. */}
|
|
<div className="grid grid-cols-2 gap-3 xl:grid-cols-3">
|
|
<Stat label="People" value={data?.length ?? 0} />
|
|
<Stat label="Teams" value={representedTeams} />
|
|
<Stat label="Assignments" value={assignments} />
|
|
</div>
|
|
|
|
{error ? (
|
|
<Card>
|
|
{/* Three routes rendered an honest error and then offered nothing to
|
|
do about it. A transient 500 on a page with no Try again is a page
|
|
a person has to know to reload. */}
|
|
<EmptyState
|
|
title="Team unavailable"
|
|
description={error instanceof Error ? error.message : 'Could not load team access.'}
|
|
action={
|
|
<Button type="button" variant="outline" onClick={() => void refetch()}>
|
|
Try again
|
|
</Button>
|
|
}
|
|
/>
|
|
</Card>
|
|
) : null}
|
|
|
|
{isLoading ? (
|
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
|
{[0, 1, 2].map((key) => <Skeleton key={key} className="h-40 rounded-2xl" />)}
|
|
</div>
|
|
) : null}
|
|
|
|
{!isLoading && !error && data?.length === 0 ? (
|
|
<Card>
|
|
<EmptyState title="No team members yet" description="Invite and assign the first operator from Settings." />
|
|
</Card>
|
|
) : null}
|
|
|
|
{!isLoading && !error && data?.length ? (
|
|
<Section
|
|
title="People and permissions"
|
|
description="Roles are enforced server-side."
|
|
>
|
|
<div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
|
|
{data.map((person) => {
|
|
const initials = person.name
|
|
.split(/\s+/)
|
|
.filter(Boolean)
|
|
.slice(0, 2)
|
|
.map((part) => part[0]?.toUpperCase())
|
|
.join('');
|
|
return (
|
|
<Card key={person.id} className="p-4 sm:p-5">
|
|
<div className="flex min-w-0 items-center gap-3">
|
|
<Avatar className="size-11 border border-border">
|
|
<AvatarFallback className="bg-accent-subtle text-sm font-semibold text-accent-fg">
|
|
{initials || 'P'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
<div className="min-w-0">
|
|
<p className="truncate font-semibold">{person.name}</p>
|
|
<p className="truncate text-sm text-muted">{person.title || 'Team member'}</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 flex flex-wrap gap-1.5">
|
|
{person.teams.map((membership) => (
|
|
<Badge key={`${membership.team}:${membership.role}`} tone="accent">
|
|
{membership.team} · {membership.role}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
{person.teams.length === 0 ? (
|
|
<p className="mt-4 text-sm text-warning">No operational team assigned</p>
|
|
) : null}
|
|
</Card>
|
|
);
|
|
})}
|
|
</div>
|
|
</Section>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|