create-astram-app 0.1.3 → 0.3.0

package/template/frontend/src/index.css

@@ -0,0 +1,265 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+/* Inter (UI) + JetBrains Mono (code/data) — the professional SaaS standard. */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/*
+  astram3 design tokens — shadcn/ui + Tailwind v4 (CSS-var driven).
+
+  Foundation adopted from the ffs-assessment reference (shadcn "new-york" +
+  Tailwind v4 @theme inline), re-BRANDED to astram3 (the #3366ff blue) with a
+  polished neutral ramp + a deep-navy collapsible sidebar. Light + dark are
+  first-class (OCA-quality dual theme) — the viewer's next-themes choice stamps
+  `.dark` on <html>.
+*/
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-ok: var(--ok);
+  --color-warn: var(--warn);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.5rem;
+
+  /* Brand — the astram3 blue (#3366ff family) in oklch. */
+  --primary: oklch(0.55 0.216 265);
+  --primary-foreground: oklch(1 0 0);
+
+  /* Canvas + neutrals — a slight blue-bias ramp (chosen, not default grey). */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.16 0.02 260);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.16 0.02 260);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.16 0.02 260);
+  --secondary: oklch(0.965 0.01 260);
+  --secondary-foreground: oklch(0.28 0.04 260);
+  --muted: oklch(0.965 0.008 260);
+  --muted-foreground: oklch(0.52 0.02 260);
+  --accent: oklch(0.955 0.02 265);
+  --accent-foreground: oklch(0.3 0.08 265);
+  --destructive: oklch(0.58 0.22 25);
+  --destructive-foreground: oklch(1 0 0);
+  --ok: oklch(0.62 0.15 155);
+  --warn: oklch(0.68 0.16 65);
+  --border: oklch(0.9 0.012 260);
+  --input: oklch(0.92 0.01 260);
+  --ring: oklch(0.55 0.216 265);
+
+  /* Sidebar — LIGHT-GRAY panel in light mode (OCA-style): a soft off-white that sits
+     just below the white content so the rail reads as its own region, separated by a
+     hairline. `-foreground` is dark ink; `-accent` is the hover/nav-hover tint; the
+     border is a light hairline. Dark mode (below) keeps the deep-navy rail. */
+  --sidebar: oklch(0.975 0.004 260);
+  --sidebar-foreground: oklch(0.28 0.02 262);
+  --sidebar-primary: oklch(0.55 0.216 265);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.94 0.006 260);
+  --sidebar-accent-foreground: oklch(0.28 0.02 262);
+  --sidebar-border: oklch(0.9 0.012 260);
+  --sidebar-ring: oklch(0.55 0.216 265);
+}
+
+.dark {
+  /* A crisper, more saturated brand blue in dark — the old value read washed-out on
+     the dark card surface. Foreground is a near-white so the primary button + solid
+     avatar fills have strong contrast (not the muted dark-on-pale-blue of before). */
+  --primary: oklch(0.62 0.208 264);
+  --primary-foreground: oklch(0.99 0 0);
+
+  /* Canvas — a deep near-black navy so LIFTED cards separate clearly from it. */
+  --background: oklch(0.145 0.018 265);
+  --foreground: oklch(0.955 0.006 250);
+
+  /* Cards — a distinctly lighter panel than the canvas (≈+0.06 L) with a visible
+     top-light border, so surfaces read as raised, not flat-on-flat. */
+  --card: oklch(0.205 0.02 264);
+  --card-foreground: oklch(0.955 0.006 250);
+  --popover: oklch(0.215 0.022 264);
+  --popover-foreground: oklch(0.955 0.006 250);
+
+  --secondary: oklch(0.26 0.022 263);
+  --secondary-foreground: oklch(0.9 0.008 250);
+  --muted: oklch(0.24 0.02 263);
+  /* Brighter muted text — the old value was too dim for secondary labels. */
+  --muted-foreground: oklch(0.72 0.018 258);
+  --accent: oklch(0.3 0.035 263);
+  --accent-foreground: oklch(0.96 0.006 250);
+  --destructive: oklch(0.7 0.19 22);
+  --destructive-foreground: oklch(0.98 0 0);
+  --ok: oklch(0.72 0.15 155);
+  --warn: oklch(0.78 0.15 70);
+  /* Crisper hairlines — a touch more visible than 10% so panels have a clean edge. */
+  --border: oklch(1 0 0 / 12%);
+  --input: oklch(1 0 0 / 16%);
+  --ring: oklch(0.62 0.18 262);
+
+  /* Sidebar — deep navy in dark mode (light mode uses the light-gray panel from
+     :root above). Sits a touch DARKER than the dark-mode canvas so the rail still
+     reads as its own region; the interactive tokens are tuned for the dark surface. */
+  --sidebar: oklch(0.135 0.03 265);
+  --sidebar-foreground: oklch(0.9 0.012 250);
+  --sidebar-primary: oklch(0.66 0.18 262);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.27 0.05 263);
+  --sidebar-accent-foreground: oklch(0.98 0 0);
+  --sidebar-border: oklch(1 0 0 / 8%);
+  --sidebar-ring: oklch(0.62 0.18 262);
+}
+
+@theme {
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+}
+
+@layer base {
+  /* Base type scale: 13.5px root so the whole UI reads denser + more professional. */
+  html {
+    font-size: 13.5px;
+  }
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-sans antialiased;
+    letter-spacing: -0.006em;
+  }
+  code,
+  pre,
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+  /* Tailwind v4 dropped the default button cursor — restore pointer on interactive
+     elements (matches the ffs reference). Disabled controls keep not-allowed. */
+  button:not(:disabled),
+  a,
+  [role='button']:not([aria-disabled='true']),
+  label[for],
+  summary {
+    cursor: pointer;
+  }
+  button:disabled,
+  [aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}
+
+@layer components {
+  /* Subtle dot-grid for auth/content backgrounds (astram-tinted). */
+  .grid-bg {
+    background-image:
+      radial-gradient(circle at 1px 1px, color-mix(in oklch, var(--primary) 12%, transparent) 1px, transparent 0);
+    background-size: 22px 22px;
+  }
+
+  /* Content dot-grid (lighter, for the app content area) — the ffs "engineering" feel. */
+  .engineering-grid {
+    background-image: radial-gradient(
+      circle,
+      color-mix(in oklch, var(--foreground) 8%, transparent) 1px,
+      transparent 1px
+    );
+    background-size: 28px 28px;
+  }
+  /* In dark mode the light foreground makes the grid too loud — dial it right down
+     so it's a whisper of texture behind the cards, not a visible pattern. */
+  .dark .engineering-grid {
+    background-image: radial-gradient(
+      circle,
+      color-mix(in oklch, var(--foreground) 4%, transparent) 1px,
+      transparent 1px
+    );
+  }
+
+  /* Deep-navy sidebar surface. A right-edge hairline separates it from the content
+     (crucial in dark mode, where the rail and canvas are close in value). */
+  .sidebar-panel {
+    background: var(--sidebar);
+    color: var(--sidebar-foreground);
+    border-right: 1px solid var(--sidebar-border);
+  }
+
+  /* In dark mode, `shadow-sm` all but vanishes on a dark card — give shadcn cards a
+     deeper ambient shadow + a subtle top-light inset so they read as raised panels
+     (professional dark-SaaS depth). Scoped to elements using the `bg-card` token. */
+  .dark [data-slot='card'] {
+    box-shadow:
+      0 1px 0 0 oklch(1 0 0 / 6%) inset,
+      0 1px 2px oklch(0 0 0 / 40%),
+      0 8px 24px -12px oklch(0 0 0 / 55%);
+  }
+
+  /* Primary buttons on a dark card can look flat + washed. Give them a crisp finish:
+     a subtle top-light inset + a soft brand-tinted drop shadow so they read as a
+     raised, saturated control (professional dark-SaaS button depth). Scoped to the
+     shadcn primary variant (bg-primary) inside dark mode. */
+  .dark button[data-slot='button'].bg-primary,
+  .dark [data-slot='button'].bg-primary {
+    box-shadow:
+      0 1px 0 0 oklch(1 0 0 / 18%) inset,
+      0 1px 2px oklch(0 0 0 / 45%),
+      0 4px 14px -6px color-mix(in oklch, var(--primary) 55%, transparent);
+  }
+
+  /* Glow ring around the brand tile / accents. */
+  .accent-glow {
+    box-shadow:
+      0 0 0 1px color-mix(in oklch, var(--primary) 35%, transparent),
+      0 0 16px color-mix(in oklch, var(--primary) 20%, transparent);
+  }
+
+  /* Blurred scrim for the mobile drawer. A fixed dark tint (NOT the --sidebar token,
+     which is now light in light mode — a light scrim wouldn't dim the content). */
+  .modal-overlay {
+    backdrop-filter: blur(6px);
+    background: oklch(0.15 0.02 265 / 55%);
+  }
+
+  /* SearchableSelect-in-a-modal pointer-events fix (load-bearing).
+     The SearchableSelect panel is portalled to <body>. When it opens inside a Radix
+     Dialog (the routed Add/Edit modal), react-popper's OUTER positioning wrapper
+     `[data-radix-popper-content-wrapper]` becomes a <body> sibling of the Dialog content,
+     so Radix Dialog's RemoveScroll sets `pointer-events: none` on it. That wrapper is
+     injected by react-popper and can't take a className, so re-enabling pointer events on
+     the inner Content alone doesn't help — hit-testing is swallowed by the dead wrapper
+     above it (search box, options, and wheel-scroll all go inert).
+     This re-enables pointer events on ONLY that wrapper, scoped via `:has()` to the one
+     wrapping our panel (tagged `data-searchable-select`), so no other Radix popper is
+     touched. Result: the in-panel search is clickable/typeable and the option list scrolls. */
+  [data-radix-popper-content-wrapper]:has(> [data-searchable-select]) {
+    pointer-events: auto;
+  }
+}

package/template/frontend/src/lib/utils.js

@@ -0,0 +1,7 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+/** shadcn's class combiner — merges conditional + tailwind classes, de-duping conflicts. */
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

package/template/frontend/src/main.jsx

@@ -0,0 +1,27 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import { ThemeProvider } from '@/theme/ThemeProvider';
+import { AuthProvider } from '@/auth/AuthContext';
+import { Toaster } from '@/components/ui/sonner';
+import App from '@/App';
+import { applyBrandColors } from '@/config/branding';
+import '@/index.css';
+
+// Apply the branding color overrides (logo/name/tagline are read in components).
+// Making this a runtime call keeps the door open for per-tenant branding loaded
+// from the server later — swap the config, re-apply, no component changes.
+applyBrandColors();
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <ThemeProvider>
+      <BrowserRouter>
+        <AuthProvider>
+          <App />
+          <Toaster richColors position="top-right" />
+        </AuthProvider>
+      </BrowserRouter>
+    </ThemeProvider>
+  </StrictMode>,
+);

package/template/frontend/src/pages/Dashboard.jsx

@@ -0,0 +1,127 @@
+/**
+ * Dashboard — the post-login shell + the ACT-AS-USER proof. Inside AppShell (the
+ * collapsible sidebar + header). Calls the protected GET /identity/companies WITH
+ * the bearer token (the framework resolves it → Principal → decide() → the handler
+ * acts as you), and lets you retry WITHOUT a token to see the 401 wall.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { Building2, RefreshCw, ShieldAlert, ShieldCheck } from 'lucide-react';
+import { useAuth } from '@/auth/AuthContext';
+import AppShell from '@/shell/AppShell';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+
+export default function Dashboard() {
+  const { tokens, identity } = useAuth();
+  const [rows, setRows] = useState([]);
+  const [status, setStatus] = useState('idle'); // idle | loading | ok | error
+  const [message, setMessage] = useState('');
+
+  const load = useCallback(
+    async (withToken = true) => {
+      setStatus('loading');
+      setMessage('');
+      const r = await identity.listCompanies(withToken ? tokens?.accessToken : undefined);
+      if (r.ok) {
+        setRows(r.rows);
+        setStatus('ok');
+        setMessage(`200 OK — acted as you; ${r.total} companies visible in your tenant.`);
+      } else {
+        setRows([]);
+        setStatus('error');
+        setMessage(
+          r.status === 401
+            ? '401 Unauthorized — the framework denied the request (no/invalid token). The wall working.'
+            : r.status === 403
+              ? '403 Forbidden — authenticated, but your policy denied this action.'
+              : `Request failed (${r.status || 'no response'}).`,
+        );
+      }
+    },
+    [identity, tokens],
+  );
+
+  useEffect(() => {
+    load(true);
+  }, [load]);
+
+  return (
+    <AppShell>
+      <div className="p-4">
+        <div className="mb-4">
+          <h1 className="text-xl font-bold tracking-tight">Dashboard</h1>
+          <p className="mt-0.5 text-sm text-muted-foreground">
+            You are signed in. Below, the app calls a protected API route as you — the framework enforces it.
+          </p>
+        </div>
+
+        <Card className="mb-4">
+          <CardHeader className="flex-row items-center justify-between space-y-0">
+            <CardTitle className="flex items-center gap-2 text-base">
+              <ShieldCheck className="size-4 text-[var(--ok)]" />
+              Act as me
+            </CardTitle>
+            <Badge variant="secondary">authenticated</Badge>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <p className="text-sm text-muted-foreground">
+              <code className="rounded bg-muted px-1 py-0.5 text-xs">GET /identity/companies</code> is a{' '}
+              <code className="rounded bg-muted px-1 py-0.5 text-xs">@Classified</code> route — the framework
+              resolves your bearer token to a principal and runs <code className="rounded bg-muted px-1 py-0.5 text-xs">decide()</code>{' '}
+              before the handler.
+            </p>
+            <div className="flex flex-wrap gap-2">
+              <Button variant="outline" size="sm" onClick={() => load(true)}>
+                <RefreshCw className="size-4" />
+                Call with my token
+              </Button>
+              <Button variant="outline" size="sm" onClick={() => load(false)}>
+                <ShieldAlert className="size-4" />
+                Call WITHOUT a token (expect 401)
+              </Button>
+            </div>
+            {message && (
+              <div
+                className={
+                  status === 'error'
+                    ? 'rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive'
+                    : 'rounded-lg border border-primary/30 bg-primary/10 px-3 py-2 text-sm text-primary'
+                }
+              >
+                {message}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center gap-2 text-base">
+              <Building2 className="size-4" />
+              Companies in your tenant
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            {status === 'loading' && <p className="py-6 text-center text-sm text-muted-foreground">Loading…</p>}
+            {status !== 'loading' && rows.length === 0 && (
+              <p className="py-6 text-center text-sm text-muted-foreground">
+                No companies visible (or the call was denied).
+              </p>
+            )}
+            {rows.map((r, i) => (
+              <div key={typeof r.id === 'string' ? r.id : i}>
+                {i > 0 && <Separator />}
+                <div className="flex items-center justify-between py-2.5 text-sm">
+                  <span className="font-medium">{r.fields?.name ?? '(unnamed)'}</span>
+                  <span className="font-mono text-xs text-muted-foreground">{r.fields?.status ?? ''}</span>
+                </div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </AppShell>
+  );
+}

package/template/frontend/src/pages/ForgotPassword.jsx

@@ -0,0 +1,104 @@
+/**
+ * ForgotPassword — reset-request screen (shadcn/ui). Submits the hint to the
+ * framework's `POST /auth/forgot-password` via the shared `authService.requestReset`
+ * (through AuthContext). ANTI-ENUMERATION: the server always returns the same 204 and
+ * this page ALWAYS shows the SAME neutral confirmation — it never reveals whether an
+ * account matched.
+ */
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import { ArrowLeft, Loader2, MailCheck } from 'lucide-react';
+import { useAuth } from '@/auth/AuthContext';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent } from '@/components/ui/card';
+import ThemeToggle from '@/theme/ThemeToggle';
+import { branding } from '@/config/branding';
+
+const NEUTRAL_CONFIRMATION =
+  'If an account matches, a reset link has been sent. Check your inbox and follow the ' +
+  'link to choose a new password.';
+
+export default function ForgotPassword() {
+  const { auth } = useAuth();
+  const [identityHint, setIdentityHint] = useState('');
+  const [sent, setSent] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const onSubmit = async (e) => {
+    e.preventDefault();
+    if (busy || !identityHint.trim()) return;
+    setBusy(true);
+    // requestReset ALWAYS resolves ok (mirrors the server's anti-enumeration); we
+    // show the SAME neutral confirmation whether or not an account matched.
+    await auth.requestReset(identityHint.trim());
+    setBusy(false);
+    setSent(true);
+  };
+
+  return (
+    <div className="grid-bg relative flex min-h-screen items-center justify-center bg-background p-6">
+      <div className="absolute right-4 top-4">
+        <ThemeToggle compact />
+      </div>
+
+      <Card className="w-full max-w-md shadow-xl">
+        <CardContent className="p-8">
+          <div className="mb-7 flex flex-col items-center gap-4">
+            {/* Brand logo — color in light, white in dark (from branding config). */}
+            <img src={branding.logo.light} alt={branding.appName} className="h-9 w-auto dark:hidden" />
+            <img
+              src={branding.logo.dark}
+              alt={branding.appName}
+              className="hidden h-9 w-auto dark:block"
+            />
+            <div className="text-center">
+              <h1 className="text-xl font-bold tracking-tight">Reset your password</h1>
+              <p className="mt-1 text-sm text-muted-foreground">
+                Enter your username or email and we&apos;ll send reset instructions.
+              </p>
+            </div>
+          </div>
+
+          {sent ? (
+            <div className="flex items-start gap-2 rounded-lg border border-primary/30 bg-primary/10 px-3 py-3 text-sm text-primary">
+              <MailCheck className="mt-0.5 size-4 shrink-0" />
+              <span>{NEUTRAL_CONFIRMATION}</span>
+            </div>
+          ) : (
+            <form onSubmit={onSubmit} className="space-y-4" noValidate>
+              <div className="space-y-1.5">
+                <Label htmlFor="fp-hint">Username or email</Label>
+                <Input
+                  id="fp-hint"
+                  autoFocus
+                  value={identityHint}
+                  onChange={(e) => setIdentityHint(e.target.value)}
+                  placeholder="you@example.com"
+                />
+              </div>
+              <Button type="submit" disabled={busy} className="w-full">
+                {busy ? (
+                  <Loader2 className="size-4 animate-spin" />
+                ) : (
+                  <>
+                    <MailCheck className="size-4" />
+                    Send reset link
+                  </>
+                )}
+              </Button>
+            </form>
+          )}
+
+          <div className="mt-6 text-center">
+            <Link to="/login" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary hover:underline">
+              <ArrowLeft className="size-4" />
+              Back to sign in
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}