business-stack 0.1.0

package/frontend/web/src/app/globals.css

@@ -0,0 +1,563 @@
+/** biome-ignore-all lint/suspicious/noDuplicateProperties: Tailwind and UI imports layer duplicate custom properties intentionally */
+@import "tailwindcss";
+
+@import "@daveyplate/better-auth-ui/css";
+
+@import "tw-animate-css";
+
+@import "shadcn/tailwind.css";
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme inline {
+  /* :root tokens are full oklch() colors — do not wrap in hsl(); that yields invalid CSS. */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-marquee: marquee var(--duration) infinite linear;
+  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;
+  --animate-orbit: orbit calc(var(--duration) * 1s) linear infinite;
+  --animate-slide-down: slide-down 300ms cubic-bezier(0.87, 0, 0.13, 1);
+  --animate-slide-up: slide-up 300ms cubic-bezier(0.87, 0, 0.13, 1);
+  --scaleIn: scaleIn 200ms ease;
+  --scaleOut: scaleOut 200ms ease;
+  --fadeIn: fadeIn 200ms ease;
+  --fadeOut: fadeOut 200ms ease;
+  --enterFromLeft: enterFromLeft 250ms ease;
+  --enterFromRight: enterFromRight 250ms ease;
+  --exitToLeft: exitToLeft 250ms ease;
+  --exitToRight: exitToRight 250ms ease;
+  --animate-elliptical-orbit: elliptical-orbit 20s linear infinite;
+  --animate-alert-flash: alert-flash var(--flash-duration, 2s) ease-in-out;
+  --animate-reason-flash: reason-flash var(--flash-duration, 2s) ease-in-out;
+  --animate-skeleton: skeleton 1.5s ease-in-out infinite;
+  @keyframes skeleton {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+  @keyframes orbit {
+    0% {
+      transform: rotate(calc(var(--angle) * 1deg))
+        translateY(calc(var(--radius) * 1px)) rotate(calc(var(--angle) * -1deg));
+    }
+    100% {
+      transform: rotate(calc(var(--angle) * 1deg + 360deg))
+        translateY(calc(var(--radius) * 1px))
+        rotate(calc((var(--angle) * -1deg) - 360deg));
+    }
+  }
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+
+  @keyframes marquee {
+    from {
+      transform: translateX(0);
+    }
+    to {
+      transform: translateX(calc(-100% - var(--gap)));
+    }
+  }
+
+  @keyframes marquee-vertical {
+    from {
+      transform: translateY(0);
+    }
+    to {
+      transform: translateY(calc(-100% - var(--gap)));
+    }
+  }
+  @keyframes slide-down {
+    from {
+      height: 0px;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes slide-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0px;
+    }
+  }
+
+  /* Add this to your globals.css */
+  @keyframes enterFromRight {
+    from {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes enterFromLeft {
+    from {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes exitToRight {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(200px);
+    }
+  }
+
+  @keyframes exitToLeft {
+    from {
+      opacity: 1;
+      transform: translateX(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateX(-200px);
+    }
+  }
+
+  @keyframes scaleIn {
+    from {
+      opacity: 0;
+      transform: rotateX(-30deg) scale(0.9);
+    }
+    to {
+      opacity: 1;
+      transform: rotateX(0deg) scale(1);
+    }
+  }
+
+  @keyframes scaleOut {
+    from {
+      opacity: 1;
+      transform: rotateX(0deg) scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: rotateX(-10deg) scale(0.95);
+    }
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fadeOut {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes elliptical-orbit {
+    from {
+      transform: rotate(var(--angle, 0) deg)
+        translate(var(--h-radius, 160px), 0)
+        rotate(calc(var(--angle, 0) deg * -1));
+    }
+    to {
+      transform: rotate(calc(var(--angle, 0) deg + 360deg))
+        translate(var(--h-radius, 160px), 0)
+        rotate(calc((var(--angle, 0) deg + 360deg) * -1));
+    }
+  }
+
+  @keyframes alert-flash {
+    0% {
+      background-color: inherit;
+    }
+    50% {
+      background-color: hsl(var(--flash-color, 142 76% 36% / 0.3));
+    }
+    100% {
+      background-color: inherit;
+    }
+  }
+
+  @keyframes reason-flash {
+    0% {
+      background-color: inherit;
+    }
+    50% {
+      background-color: hsl(45 93% 47% / 0.4); /* Yellow flash */
+    }
+    100% {
+      background-color: inherit;
+    }
+  }
+
+  --font-heading: var(--font-mono);
+
+  --radius-2xl: calc(var(--radius) * 1.8);
+
+  --radius-3xl: calc(var(--radius) * 2.2);
+
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --primary: oklch(0.5 0.134 242.749);
+  --primary-foreground: oklch(0.977 0.013 236.62);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: 0 0% 100%;
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.905 0.182 98.111);
+  --chart-2: oklch(0.795 0.184 86.047);
+  --chart-3: oklch(0.681 0.162 75.834);
+  --chart-4: oklch(0.554 0.135 66.442);
+  --chart-5: oklch(0.476 0.114 61.907);
+  --radius: 0;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.588 0.158 241.966);
+  --sidebar-primary-foreground: oklch(0.977 0.013 236.62);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --primary: oklch(0.443 0.11 240.79);
+  --primary-foreground: oklch(0.977 0.013 236.62);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: 0 0% 93.33%;
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.905 0.182 98.111);
+  --chart-2: oklch(0.795 0.184 86.047);
+  --chart-3: oklch(0.681 0.162 75.834);
+  --chart-4: oklch(0.554 0.135 66.442);
+  --chart-5: oklch(0.476 0.114 61.907);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.685 0.169 237.323);
+  --sidebar-primary-foreground: oklch(0.293 0.066 243.157);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  html {
+    scroll-behavior: smooth;
+    scrollbar-width: thin; /* Firefox thin scrollbar */
+    scrollbar-color: color-mix(in oklch, var(--muted) 40%, transparent)
+      transparent; /* Firefox scrollbar colors */
+    @apply font-mono;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer components {
+  /* Sonner Toast Styles */
+  [data-sonner-toast] {
+    background: var(--normal-bg);
+    color: var(--normal-text);
+    border: 1px solid var(--normal-border);
+    border-radius: var(--border-radius);
+  }
+
+  [data-sonner-toast][data-styled="true"] {
+    background: var(--normal-bg);
+    color: var(--normal-text);
+  }
+
+  /* Scrollbar Hide Utility - !important overrides global scrollbar styles */
+  .scrollbar-hide {
+    -ms-overflow-style: none !important; /* IE 10+ */
+    scrollbar-width: none !important; /* Firefox */
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none !important; /* Chrome, Safari, Edge */
+    width: 0 !important;
+    height: 0 !important;
+  }
+
+  /* Subtle scrollbar - thin, minimal, visible on hover (use instead of scrollbar-hide if you prefer styled) */
+  .scrollbar-subtle::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  .scrollbar-subtle::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .scrollbar-subtle::-webkit-scrollbar-thumb {
+    background: color-mix(in oklch, var(--muted) 35%, transparent);
+    border-radius: 9999px;
+  }
+  .scrollbar-subtle::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklch, var(--muted) 60%, transparent);
+  }
+  .scrollbar-subtle {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklch, var(--muted) 35%, transparent)
+      transparent;
+  }
+
+  /* Custom Scrollbar Styles - Auto-hide on idle, show on hover */
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: color-mix(in oklch, var(--muted) 30%, transparent);
+    border-radius: var(--radius-sm);
+    transition:
+      opacity 0.2s ease,
+      background-color 0.2s ease;
+    opacity: 0;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklch, var(--muted) 60%, transparent);
+    opacity: 1;
+  }
+
+  /* Show scrollbar on hover over scrollable elements */
+  *:hover::-webkit-scrollbar-thumb {
+    opacity: 0.4;
+  }
+
+  *:hover::-webkit-scrollbar-thumb:hover {
+    opacity: 1;
+  }
+
+  /* Custom Prose Styles for MDX Content */
+  .prose {
+    @apply text-foreground max-w-none;
+  }
+
+  .prose h1 {
+    @apply text-3xl font-bold tracking-tight mt-8 mb-6 text-foreground;
+  }
+
+  .prose h2 {
+    @apply text-2xl font-bold tracking-tight mt-8 mb-4 text-foreground;
+  }
+
+  .prose h3 {
+    @apply text-xl font-bold tracking-tight mt-6 mb-3 text-foreground;
+  }
+
+  .prose h4 {
+    @apply text-lg font-semibold mt-6 mb-3 text-foreground;
+  }
+
+  .prose h5 {
+    @apply text-base font-semibold mt-4 mb-2 text-foreground;
+  }
+
+  .prose h6 {
+    @apply text-sm font-semibold mt-4 mb-2 text-foreground;
+  }
+
+  .prose p {
+    @apply leading-relaxed mb-4 text-muted-foreground;
+  }
+
+  .prose strong {
+    @apply font-semibold text-foreground;
+  }
+
+  .prose em {
+    @apply italic;
+  }
+
+  .prose a {
+    @apply text-primary no-underline hover:underline;
+  }
+
+  .prose ul {
+    @apply list-disc pl-6 mb-4 text-muted-foreground;
+  }
+
+  .prose ol {
+    @apply list-decimal pl-6 mb-4 text-muted-foreground;
+  }
+
+  .prose li {
+    @apply mb-1 text-muted-foreground;
+  }
+
+  .prose blockquote {
+    @apply border-l-4 border-primary bg-muted/50 py-2 px-4 my-4 italic;
+  }
+
+  .prose code {
+    @apply bg-muted px-1 py-0.5 rounded font-mono text-sm;
+  }
+
+  .prose pre {
+    @apply bg-muted border rounded-lg p-4 overflow-x-auto my-4;
+  }
+
+  .prose pre code {
+    @apply bg-transparent p-0;
+  }
+
+  .prose img {
+    @apply rounded-lg border my-4;
+  }
+
+  .prose hr {
+    @apply border-border my-8;
+  }
+
+  .prose table {
+    @apply border border-border rounded-lg my-4 w-full;
+  }
+
+  .prose th {
+    @apply bg-muted font-semibold p-3 text-left border-b border-border;
+  }
+
+  .prose td {
+    @apply p-3 border-b border-border;
+  }
+
+  .prose tbody tr:last-child td {
+    @apply border-b-0;
+  }
+}
+
+@layer utilities {
+  /* Dynamic viewport height for mobile browsers */
+  /* Uses 100dvh (dynamic viewport height) which accounts for mobile browser UI */
+  /* Falls back to 100vh for older browsers that don't support dvh */
+  .h-dvh {
+    height: 100vh; /* Fallback for older browsers */
+    height: 100dvh; /* Modern browsers - accounts for dynamic mobile browser UI */
+  }
+
+  /* Dynamic minimum viewport height for mobile browsers */
+  .min-h-dvh {
+    min-height: 100vh; /* Fallback for older browsers */
+    min-height: 100dvh; /* Modern browsers - accounts for dynamic mobile browser UI */
+  }
+
+  /* Reranking animation for smooth table row transitions */
+  .reranking {
+    & tr {
+      transition: all 0.3s ease-in-out;
+    }
+  }
+}
+
+iframe {
+  color-scheme: light;
+}

package/frontend/web/src/app/layout.tsx

@@ -0,0 +1,50 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono, JetBrains_Mono } from "next/font/google";
+import { Providers } from "@/components/providers";
+import "./globals.css";
+import { cn } from "@/lib/utils";
+
+const jetbrainsMono = JetBrains_Mono({
+  subsets: ["latin"],
+  variable: "--font-mono",
+});
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={cn(
+        "h-full",
+        "antialiased",
+        geistSans.variable,
+        geistMono.variable,
+        "font-mono",
+        jetbrainsMono.variable,
+      )}
+    >
+      <body className="min-h-full flex flex-col">
+        <Providers>{children}</Providers>
+        <div className="absolute inset-0 -z-10 h-full w-full bg-background bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:14px_24px]"></div>
+      </body>
+    </html>
+  );
+}

package/frontend/web/src/app/page.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { HomeAuthPanel } from "@/components/home-auth-panel";
+
+type BackendRootResponse = { message: string };
+
+function parseBackendRoot(json: unknown): BackendRootResponse | null {
+  if (
+    json !== null &&
+    typeof json === "object" &&
+    "message" in json &&
+    typeof (json as { message: unknown }).message === "string"
+  ) {
+    return { message: (json as { message: string }).message };
+  }
+  return null;
+}
+
+async function fetchBackendHelloWorld(): Promise<BackendRootResponse> {
+  let res: Response;
+  try {
+    res = await fetch("/api/backend/hello-world", {
+      credentials: "include",
+    });
+  } catch {
+    throw new Error("Network error.");
+  }
+  const json: unknown = await res.json().catch(() => null);
+
+  if (!res.ok) {
+    if (res.status === 401) {
+      throw new Error("Sign in to load data from the API.");
+    }
+    throw new Error(`Request failed (${res.status}).`);
+  }
+
+  const parsed = parseBackendRoot(json);
+  if (!parsed) {
+    throw new Error("Unexpected response shape from the API.");
+  }
+  return parsed;
+}
+
+export default function Page() {
+  const { data, error, isPending } = useQuery({
+    queryKey: ["backend", "hello-world"],
+    queryFn: fetchBackendHelloWorld,
+  });
+
+  const errorMessage =
+    error instanceof Error
+      ? error.message
+      : error != null
+        ? "Something went wrong."
+        : null;
+
+  return (
+    <main className="mx-auto flex w-full max-w-xl flex-1 flex-col gap-6 p-6">
+      <h1 className="text-2xl font-semibold tracking-tight">Homed</h1>
+      <HomeAuthPanel />
+      <p className="text-sm">
+        <Link
+          href="/chat"
+          className="text-neutral-600 underline dark:text-neutral-400"
+        >
+          Chat & ingest
+        </Link>
+        {" · "}
+        <Link
+          href="/settings/integrations"
+          className="text-neutral-600 underline dark:text-neutral-400"
+        >
+          Integration settings
+        </Link>
+      </p>
+      <section className="rounded-lg border border-neutral-200 bg-white/60 p-4 dark:border-neutral-800 dark:bg-neutral-950/40">
+        <h2 className="text-sm font-medium text-neutral-500">
+          Backend (via gateway)
+        </h2>
+        {isPending ? (
+          <p className="mt-2 text-sm text-neutral-600">Loading…</p>
+        ) : errorMessage ? (
+          <p className="mt-2 text-sm text-amber-800 dark:text-amber-200">
+            {errorMessage}
+          </p>
+        ) : data ? (
+          <p className="mt-2 text-sm text-neutral-800 dark:text-neutral-100">
+            {data.message}
+          </p>
+        ) : null}
+      </section>
+    </main>
+  );
+}