+
+
+
+ );
+}
diff --git a/studio/src/app/globals.css b/studio/src/app/globals.css
new file mode 100644
index 0000000000..3ddfc4a91d
--- /dev/null
+++ b/studio/src/app/globals.css
@@ -0,0 +1,409 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Tokens hold complete CSS color values — not bare HSL triplets.
+ This keeps operator branding overrides format-agnostic (hex, hsl, oklch all work). */
+:root {
+ --background: hsl(0 0% 100%);
+ --foreground: hsl(240 10% 3.9%);
+ --card: hsl(0 0% 100%);
+ --card-foreground: hsl(240 10% 3.9%);
+ --popover: hsl(0 0% 100%);
+ --popover-foreground: hsl(240 10% 3.9%);
+ --primary: hsl(240 5.9% 10%);
+ --primary-foreground: hsl(0 0% 98%);
+ --secondary: hsl(240 4.8% 95.9%);
+ --secondary-foreground: hsl(240 5.9% 10%);
+ --muted: hsl(240 4.8% 95.9%);
+ --muted-foreground: hsl(240 3.8% 46.1%);
+ --accent: hsl(240 4.8% 95.9%);
+ --accent-foreground: hsl(240 5.9% 10%);
+ --destructive: hsl(
+ 0 72% 51%
+ ); /* darker than shadcn's default, per the design system */
+ --destructive-foreground: hsl(0 0% 98%);
+ --destructive-strong: hsl(
+ 0 74% 40%
+ ); /* a darker red for icons over a destructive/10 tile */
+ --border: hsl(240 5.9% 90%);
+ --input: hsl(240 5.9% 90%);
+ --ring: hsl(240 5% 65%); /* soft neutral focus ring — gray, not near-black */
+ --radius: 0.5rem;
+ --sidebar: hsl(240 4.8% 98.5%);
+ --brand: hsl(161 94% 21%); /* #036a49 — Stacklok brand green */
+ --brand-foreground: hsl(0 0% 100%);
+ --avatar-background: oklch(0.696 0 0 / 89.8%);
+ --nav-background: #18442e;
+ --nav-border: #265b41;
+ --nav-button-active-bg: #398560;
+ --nav-button-active-text: #ffffff;
+
+ /* Status, display, and link tokens (ADR-0018 convergence palette).
+ Complete colour values, never bare HSL triplets. */
+ --success: hsl(142 71% 29%); /* green — succeeded / healthy state */
+ --warning: hsl(35 92% 42%); /* amber — needs attention */
+ --info: hsl(211 92% 43%); /* blue — informational */
+ --title: hsl(240 5% 18%); /* serif page-title ink — softer than body text */
+ --logo: hsl(0 0% 28%); /* wordmark / logo fill — neutral ink */
+ --brand-label: hsl(161 94% 21%); /* brand-coloured label text */
+ --link: hsl(211 92% 43%); /* inline hyperlink */
+ --brand-ink: hsl(
+ 161 94% 21%
+ ); /* brand accent ink: nav/tab active, avatar initials */
+ --input-icon: hsl(240 3.8% 46.1%); /* leading input icon ink (muted) */
+ --badge-outline-border: hsl(
+ 240 5.9% 90%
+ ); /* outline badge border (= border) */
+ --badge-outline-text: hsl(
+ 240 10% 3.9%
+ ); /* outline badge ink (= foreground) */
+ --btn-primary: hsl(161 94% 21%); /* primary CTA fill (= brand) */
+ --btn-primary-hover: #02543a; /* primary CTA hover */
+
+ /* Legacy shadcn sidebar family — consumed by src/components/ui/sidebar.tsx
+ (assistant panel). Keep until that primitive is retired. */
+ --sidebar-foreground: hsl(240 5.3% 26.1%);
+ --sidebar-primary: hsl(240 5.9% 10%);
+ --sidebar-primary-foreground: hsl(0 0% 98%);
+ --sidebar-accent: hsl(240 4.8% 95.9%);
+ --sidebar-accent-foreground: hsl(240 5.9% 10%);
+ --sidebar-border: hsl(220 13% 91%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+ --background: hsl(240 6% 10%);
+ --foreground: hsl(0 0% 98%);
+ --card: hsl(240 6.1% 12.9%); /* cards are elevated in dark */
+ --card-foreground: hsl(0 0% 98%);
+ --popover: hsl(240 6.3% 12.5%);
+ --popover-foreground: hsl(0 0% 98%);
+ --primary: hsl(210 34.5% 98%);
+ --primary-foreground: hsl(0 0% 9.1%);
+ --secondary: hsl(240 4% 15.9%);
+ --secondary-foreground: hsl(0 0% 98%);
+ --muted: hsl(240 6.3% 12.5%);
+ --muted-foreground: hsl(0 0% 63%);
+ --accent: hsl(240 4% 15.9%);
+ --accent-foreground: hsl(0 0% 98%);
+ --destructive: hsl(358.7 100% 69.6%);
+ --destructive-foreground: hsl(0 0% 98%);
+ --destructive-strong: hsl(358.7 78% 55%);
+ --border: hsl(0 0% 15.5%);
+ --input: hsl(0 0% 20.4%);
+ --ring: hsl(0 0% 45.2%);
+ --sidebar: hsl(240 6.3% 12.5%);
+ --brand-foreground: hsl(0 0% 100%);
+ --avatar-background: oklch(0.696 0 0 / 89.8%);
+ --nav-background: #0f2e1e;
+ --nav-border: #1a4430;
+ --nav-button-active-bg: #2d6b4a;
+ --nav-button-active-text: #f0f0f0;
+
+ /* Status, display, and link tokens — dark-mode variants. */
+ --success: hsl(142 61% 55%); /* lighter green for dark surfaces */
+ --warning: hsl(35 92% 62%); /* lighter amber */
+ --info: hsl(211 92% 66%); /* lighter blue */
+ --title: hsl(0 0% 74%); /* serif page-title ink, softer than body */
+ --logo: hsl(0 0% 58%); /* wordmark / logo fill — neutral ink */
+ --brand-label: hsl(158 64% 52%); /* brand label text on dark */
+ --link: hsl(211 92% 66%); /* inline hyperlink on dark */
+ --brand-ink: hsl(142 50% 60%); /* softer brand ink on dark */
+ --input-icon: hsl(0 0% 100%); /* near-white icon ink on dark */
+ --badge-outline-border: hsl(0 0% 32%); /* lighter outline on dark surfaces */
+ --badge-outline-text: hsl(0 0% 80%); /* dimmed outline ink on dark */
+ --btn-primary: #024c34; /* darker primary CTA on dark */
+ --btn-primary-hover: #013826; /* dark hover */
+
+ /* Legacy shadcn sidebar family — dark variants. */
+ --sidebar-foreground: hsl(240 4.8% 95.9%);
+ --sidebar-primary: hsl(224.3 76.3% 48%);
+ --sidebar-primary-foreground: hsl(0 0% 100%);
+ --sidebar-accent: hsl(240 3.7% 15.9%);
+ --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+ --sidebar-border: hsl(240 3.7% 15.9%);
+ --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+/* Maps CSS tokens → Tailwind utility classes.
+ bg-background, text-foreground, border-border, bg-nav-background, etc. */
+@theme inline {
+ --font-sans: var(--font-inter);
+ --font-serif: var(--font-merriweather);
+
+ --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-destructive-strong: var(--destructive-strong);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --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);
+ --color-avatar-background: var(--avatar-background);
+ --color-nav-background: var(--nav-background);
+ --color-nav-border: var(--nav-border);
+ --color-nav-button-active-bg: var(--nav-button-active-bg);
+ --color-nav-button-active-text: var(--nav-button-active-text);
+ --color-brand: var(--brand);
+ --color-brand-foreground: var(--brand-foreground);
+
+ /* Convergence palette → utilities: bg-success, text-warning, text-info,
+ text-title, text-logo, text-brand-label, text-link, etc. */
+ --color-success: var(--success);
+ --color-warning: var(--warning);
+ --color-info: var(--info);
+ --color-title: var(--title);
+ --color-logo: var(--logo);
+ --color-brand-label: var(--brand-label);
+ --color-link: var(--link);
+ --color-brand-ink: var(--brand-ink);
+ --color-input-icon: var(--input-icon);
+ --color-badge-outline-border: var(--badge-outline-border);
+ --color-badge-outline-text: var(--badge-outline-text);
+ --color-btn-primary: var(--btn-primary);
+ --color-btn-primary-hover: var(--btn-primary-hover);
+}
+
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply text-foreground;
+ font-family: var(--font-inter), sans-serif;
+ }
+ /* Paint the canvas AND body with the shell gradient's terminal colour:
+ iOS standalone computes dvh stale at launch (self-corrects on first
+ scroll), leaving a strip beside/below the app, and overscroll exposes
+ the canvas too. Every visible surface (the card, panels, dialogs)
+ declares its own bg-background, so nothing reads body's background —
+ matching the gradient's end keeps the stale strip invisible. */
+ html,
+ body {
+ background-color: #06202a;
+ }
+ html.dark,
+ html.dark body {
+ background-color: #02141b;
+ }
+ /* Mobile is read at arm's length — bump the default root size past
+ native body text (~17pt). The Interface scale slider multiplies
+ through --ui-scale rather than replacing the base. */
+ html {
+ font-size: calc(100% * var(--ui-scale, 1));
+ }
+ @media (max-width: 499px) {
+ html {
+ font-size: calc(18px * var(--ui-scale, 1));
+ }
+ }
+}
+
+@layer utilities {
+ .text-page-title {
+ font-family: var(--font-merriweather), serif;
+ font-size: 34px;
+ line-height: 42px;
+ font-weight: 300;
+ letter-spacing: -0.85px;
+ }
+}
+
+[data-sonner-toaster] {
+ --normal-bg: var(--popover);
+ --normal-text: var(--popover-foreground);
+ --normal-border: var(--border);
+}
+
+/* Tiptap / ProseMirror editor styles */
+.tiptap-editor .ProseMirror {
+ outline: none;
+ min-height: 100%;
+ padding: 1.5rem;
+ color: var(--foreground);
+ font-size: 0.9375rem;
+ line-height: 1.75;
+}
+
+.tiptap-editor .ProseMirror h1 {
+ font-size: 1.75rem;
+ font-weight: 700;
+ line-height: 1.25;
+ margin: 1.5rem 0 0.75rem;
+}
+
+.tiptap-editor .ProseMirror h2 {
+ font-size: 1.35rem;
+ font-weight: 600;
+ line-height: 1.3;
+ margin: 1.25rem 0 0.5rem;
+}
+
+.tiptap-editor .ProseMirror h3 {
+ font-size: 1.1rem;
+ font-weight: 600;
+ line-height: 1.4;
+ margin: 1rem 0 0.4rem;
+}
+
+.tiptap-editor .ProseMirror p {
+ margin: 0.5rem 0;
+}
+
+.tiptap-editor .ProseMirror ul,
+.tiptap-editor .ProseMirror ol {
+ margin: 0.5rem 0;
+ padding-left: 1.5rem;
+}
+
+.tiptap-editor .ProseMirror ul {
+ list-style-type: disc;
+}
+
+.tiptap-editor .ProseMirror ol {
+ list-style-type: decimal;
+}
+
+.tiptap-editor .ProseMirror li {
+ margin: 0.2rem 0;
+}
+
+.tiptap-editor .ProseMirror blockquote {
+ border-left: 3px solid
+ color-mix(in oklab, var(--muted-foreground) 30%, transparent);
+ padding-left: 1rem;
+ margin: 0.75rem 0;
+ color: var(--muted-foreground);
+ font-style: italic;
+}
+
+.tiptap-editor .ProseMirror code {
+ background: var(--muted);
+ border-radius: 0.25rem;
+ padding: 0.15rem 0.4rem;
+ font-size: 0.85em;
+ font-family: ui-monospace, monospace;
+}
+
+.tiptap-editor .ProseMirror pre {
+ background: hsl(240 10% 10%);
+ color: hsl(0 0% 90%);
+ border-radius: 0.5rem;
+ padding: 1rem;
+ margin: 0.75rem 0;
+ overflow-x: auto;
+ font-size: 0.85em;
+ font-family: ui-monospace, monospace;
+ line-height: 1.6;
+}
+
+.tiptap-editor .ProseMirror pre code {
+ background: transparent;
+ padding: 0;
+ color: inherit;
+}
+
+.tiptap-editor .ProseMirror strong {
+ font-weight: 600;
+}
+
+.tiptap-editor .ProseMirror em {
+ font-style: italic;
+}
+
+.tiptap-editor .ProseMirror hr {
+ border: none;
+ border-top: 1px solid var(--border);
+ margin: 1rem 0;
+}
+
+.tiptap-editor .ProseMirror a {
+ color: var(--link);
+ text-decoration: underline;
+ text-underline-offset: 2px;
+}
+
+/* Placeholder */
+.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
+ content: attr(data-placeholder);
+ color: var(--muted-foreground);
+ pointer-events: none;
+ float: left;
+ height: 0;
+}
+
+/* Chat composer: a plain-text-style single field (no rich formatting).
+ Mirrors the old transparent-textarea look — 14px, tight leading, muted
+ placeholder — so swapping in ProseMirror keeps the composer identical. */
+.composer-editor .ProseMirror {
+ outline: none;
+ font-size: 0.875rem;
+ line-height: 1.5rem;
+ color: var(--foreground);
+ white-space: pre-wrap;
+ word-break: break-word;
+ overflow-wrap: break-word;
+}
+
+.composer-editor .ProseMirror p {
+ margin: 0;
+}
+
+.composer-editor .ProseMirror p.is-editor-empty:first-child::before {
+ content: attr(data-placeholder);
+ color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
+ pointer-events: none;
+ float: left;
+ height: 0;
+}
+
+/* Mobile: small UI glyphs step up one notch for touch legibility. Unlayered
+ on purpose — it must override the size-* utilities, which live in a
+ cascade layer; larger deliberate icon sizes are untouched. */
+@media (max-width: 499px) {
+ svg.lucide.size-4,
+ svg.lucide.size-\[17px\] {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+ svg.lucide.size-3\.5 {
+ width: 1.125rem;
+ height: 1.125rem;
+ }
+}
+
+/* Thinking-indicator dots: Tailwind's animate-bounce moves 25% of the
+ element's own height — invisible on a 6px dot. A fixed 5px hop with a
+ squash-and-stretch easing reads as an actual bounce. */
+@keyframes thinking-bounce {
+ 0%,
+ 100% {
+ transform: translateY(0);
+ animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+ }
+ 50% {
+ transform: translateY(-5px);
+ animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+ }
+}
diff --git a/studio/src/app/icon.test.ts b/studio/src/app/icon.test.ts
new file mode 100644
index 0000000000..7f746b8b2f
--- /dev/null
+++ b/studio/src/app/icon.test.ts
@@ -0,0 +1,19 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright (c) Stacklok, Inc. All rights reserved.
+
+import { expect, it, vi } from "vitest";
+import { GET } from "./icon";
+
+it("returns a Response when FAVICON_URL is not set", async () => {
+ vi.stubEnv("FAVICON_URL", "");
+ await expect(GET()).resolves.toBeInstanceOf(Response);
+});
+
+it("returns a Response when FAVICON_URL is set", async () => {
+ vi.stubEnv("FAVICON_URL", "https://www.google.com/favicon.ico");
+ vi.stubGlobal(
+ "fetch",
+ vi.fn().mockResolvedValue(new Response(new Uint8Array([0]))),
+ );
+ await expect(GET()).resolves.toBeInstanceOf(Response);
+});
diff --git a/studio/src/app/icon.ts b/studio/src/app/icon.ts
new file mode 100644
index 0000000000..8b92b99787
--- /dev/null
+++ b/studio/src/app/icon.ts
@@ -0,0 +1,35 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright (c) Stacklok, Inc. All rights reserved.
+
+import * as fs from "node:fs";
+
+// force-dynamic prevents Next.js from caching this route at build time.
+// FAVICON_URL is a runtime environment variable — it is set via Helm values
+// and must be read on each request, not baked into the build output.
+export const dynamic = "force-dynamic";
+
+async function customFavicon(url: string): Promise+ Something went wrong +
+ + +
+
+
+ {/* The stock wordmark asset is white, so it is rendered as a mask
+ tinted with the theme's --logo token (same as the shell sidebar). */}
+
+ Stacklok
+
+
+
+
+ Go home
+
+ }
+ >
+ The page you're looking for doesn't exist or has been moved.
+
+
+
+ );
+}
diff --git a/studio/src/app/page.tsx b/studio/src/app/page.tsx
new file mode 100644
index 0000000000..39aab2bc67
--- /dev/null
+++ b/studio/src/app/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function Home() {
+ redirect("/workspace/chat");
+}
diff --git a/studio/src/app/workspace/page.tsx b/studio/src/app/workspace/page.tsx
new file mode 100644
index 0000000000..ba34281879
--- /dev/null
+++ b/studio/src/app/workspace/page.tsx
@@ -0,0 +1,6 @@
+import { redirect } from "next/navigation";
+
+/** Token usage is the console's default landing page. */
+export default function HarnessPage() {
+ redirect("/workspace/chat");
+}
diff --git a/studio/src/components/brand-logo.test.tsx b/studio/src/components/brand-logo.test.tsx
new file mode 100644
index 0000000000..352d59f0e9
--- /dev/null
+++ b/studio/src/components/brand-logo.test.tsx
@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { BrandLogo } from "./brand-logo";
+
+describe("BrandLogo", () => {
+ describe("when BRAND_NAME is set", () => {
+ beforeEach(() => {
+ vi.stubEnv("BRAND_NAME", "Acme Corp");
+ });
+
+ it("uses BRAND_NAME as the alt attribute on the rendered
+
+ );
+}
diff --git a/studio/src/components/illustrations/illustration-error.tsx b/studio/src/components/illustrations/illustration-error.tsx
new file mode 100644
index 0000000000..3af4316eb0
--- /dev/null
+++ b/studio/src/components/illustrations/illustration-error.tsx
@@ -0,0 +1,68 @@
+import type { SVGProps } from "react";
+
+export const IllustrationError = (props: SVGProps
+
+
+
+
+ {actions && {title}
+{children}
+{actions}
}
+ e.stopPropagation()}
+ >
+ {children}
+
+ );
+}
diff --git a/studio/src/components/ui/command.tsx b/studio/src/components/ui/command.tsx
new file mode 100644
index 0000000000..4f19bb3e4e
--- /dev/null
+++ b/studio/src/components/ui/command.tsx
@@ -0,0 +1,189 @@
+"use client";
+
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import type * as React from "react";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+function Command({
+ className,
+ ...props
+}: React.ComponentProps
+
+ );
+}
+
+function CommandList({
+ className,
+ ...props
+}: React.ComponentProps
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/studio/src/components/ui/form.tsx b/studio/src/components/ui/form.tsx
new file mode 100644
index 0000000000..b9aa7e94a2
--- /dev/null
+++ b/studio/src/components/ui/form.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import {
+ Controller,
+ type ControllerProps,
+ type FieldPath,
+ type FieldValues,
+ FormProvider,
+ useFormContext,
+ useFormState,
+} from "react-hook-form";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+ TFieldValues extends FieldValues = FieldValues,
+ TName extends FieldPath
+
+
+ Something went wrong
++ {this.state.error?.message || "An unexpected error occurred"} +
++ {body} +
+ ); +} + +export { + Form, + FormControl, + FormDescription, + FormField, + FormItem, + FormLabel, + FormMessage, + useFormField, +}; diff --git a/studio/src/components/ui/input-search.tsx b/studio/src/components/ui/input-search.tsx new file mode 100644 index 0000000000..b605de3b4f --- /dev/null +++ b/studio/src/components/ui/input-search.tsx @@ -0,0 +1,46 @@ +"use client"; + +import { Search, X } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { cn } from "@/lib/utils"; + +interface InputSearchProps { + value: string; + onChange: (value: string) => void; + placeholder?: string; + className?: string; +} + +export function InputSearch({ + value, + onChange, + placeholder = "Search", + className, +}: InputSearchProps) { + // `relative` must always apply so the absolute Search icon anchors to this + // wrapper — a passed `className` sets width but must not drop positioning. + return ( +
+
+ );
+}
diff --git a/studio/src/components/ui/input.tsx b/studio/src/components/ui/input.tsx
new file mode 100644
index 0000000000..d5b6fc0928
--- /dev/null
+++ b/studio/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+ return (
+
+ );
+}
+
+export { Input };
diff --git a/studio/src/components/ui/label.tsx b/studio/src/components/ui/label.tsx
new file mode 100644
index 0000000000..0f8bef2340
--- /dev/null
+++ b/studio/src/components/ui/label.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import * as LabelPrimitive from "@radix-ui/react-label";
+import type * as React from "react";
+import { cn } from "@/lib/utils";
+
+function Label({
+ className,
+ ...props
+}: React.ComponentProps
+ {children}
+
+
+ {children}
+
+ );
+ }
+
+ if (isMobile) {
+ return (
+ {children}
+
+ {/* Overlay to close sidebar when clicking outside */}
+ {state === "expanded" && (
+ ) {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+
+ );
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+ const { toggleSidebar } = useSidebar();
+
+ return (
+
+ );
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+ return (
+
+ );
+}
+
+function SidebarInput({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+ );
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarSeparator({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarGroupAction({
+ className,
+ asChild = false,
+ ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ // Increases the hit area of the button on mobile.
+ "after:absolute after:-inset-2 after:md:hidden",
+ "group-data-[collapsible=icon]:hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarGroupContent({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+ ;
+} & VariantProps) {
+ const Comp = asChild ? Slot : "button";
+ const { isMobile, state } = useSidebar();
+
+ const button = (
+
+ {button}
+
+ );
+}
+
+function SidebarMenuAction({
+ className,
+ asChild = false,
+ showOnHover = false,
+ ...props
+}: React.ComponentProps<"button"> & {
+ asChild?: boolean;
+ showOnHover?: boolean;
+}) {
+ const Comp = asChild ? Slot : "button";
+
+ return (
+ svg]:size-4 [&>svg]:shrink-0",
+ // Increases the hit area of the button on mobile.
+ "after:absolute after:-inset-2 after:md:hidden",
+ "peer-data-[size=sm]/menu-button:top-1",
+ "peer-data-[size=default]/menu-button:top-1.5",
+ "peer-data-[size=lg]/menu-button:top-2.5",
+ "group-data-[collapsible=icon]:hidden",
+ showOnHover &&
+ "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function SidebarMenuBadge({
+ className,
+ ...props
+}: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+function SidebarMenuSkeleton({
+ className,
+ showIcon = false,
+ ...props
+}: React.ComponentProps<"div"> & {
+ showIcon?: boolean;
+}) {
+ // Random width between 50 to 90%.
+ const width = React.useMemo(() => {
+ return `${Math.floor(Math.random() * 40) + 50}%`;
+ }, []);
+
+ return (
+ span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+ "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+ size === "sm" && "text-xs",
+ size === "md" && "text-sm",
+ "group-data-[collapsible=icon]:hidden",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+export {
+ Sidebar,
+ SidebarContent,
+ SidebarFooter,
+ SidebarGroup,
+ SidebarGroupAction,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarInput,
+ SidebarInset,
+ SidebarMenu,
+ SidebarMenuAction,
+ SidebarMenuBadge,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarMenuSkeleton,
+ SidebarMenuSub,
+ SidebarMenuSubButton,
+ SidebarMenuSubItem,
+ SidebarProvider,
+ SidebarRail,
+ SidebarSeparator,
+ SidebarTrigger,
+ useSidebar,
+ useSidebarOptional,
+};
diff --git a/studio/src/components/ui/skeleton.tsx b/studio/src/components/ui/skeleton.tsx
new file mode 100644
index 0000000000..26bc059db0
--- /dev/null
+++ b/studio/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+ return (
+
+ );
+}
+
+export { Skeleton };
diff --git a/studio/src/components/ui/switch.tsx b/studio/src/components/ui/switch.tsx
new file mode 100644
index 0000000000..17dfa1b1a5
--- /dev/null
+++ b/studio/src/components/ui/switch.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Switch({
+ className,
+ ...props
+}: React.ComponentProps) {
+ return (
+
+
+ );
+}
+
+export { Switch };
diff --git a/studio/src/components/ui/table.tsx b/studio/src/components/ui/table.tsx
new file mode 100644
index 0000000000..d5cea5d6ff
--- /dev/null
+++ b/studio/src/components/ui/table.tsx
@@ -0,0 +1,261 @@
+// SPDX-License-Identifier: Apache-2.0
+
+"use client";
+
+import type * as React from "react";
+import { createContext, type ReactNode, useContext, useMemo } from "react";
+import { Button } from "@/components/ui/button";
+import { ChevronIndicator } from "@/components/ui/chevron-indicator";
+import { cn } from "@/lib/utils";
+
+function Table({
+ className,
+ containerClassName,
+ ...props
+}: React.ComponentProps<"table"> & { containerClassName?: string }) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+ return (
+ [role=checkbox]]:translate-y-[2px]",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableCaption({
+ className,
+ ...props
+}: React.ComponentProps<"caption">) {
+ return (
+ (
+ null,
+);
+
+function useNestedTableRow(componentName: string): NestedTableRowContextValue {
+ const ctx = useContext(NestedTableRowContext);
+ if (!ctx) {
+ throw new Error(`${componentName} must be used inside `);
+ }
+ return ctx;
+}
+
+function NestedTableRow({
+ isExpanded,
+ onExpandedChange,
+ isCollapsible = true,
+ colSpan,
+ children,
+}: {
+ isExpanded: boolean;
+ onExpandedChange: (open: boolean) => void;
+ isCollapsible?: boolean;
+ colSpan: number;
+ children: ReactNode;
+}) {
+ const value = useMemo(
+ () => ({ isExpanded, onExpandedChange, isCollapsible, colSpan }),
+ [isExpanded, onExpandedChange, isCollapsible, colSpan],
+ );
+ return (
+
+ {children}
+
+ );
+}
+
+function NestedTableRowTrigger({
+ expandLabel = "Expand",
+ collapseLabel = "Collapse",
+ className,
+ ...props
+}: {
+ expandLabel?: string;
+ collapseLabel?: string;
+} & Omit<
+ React.ComponentProps,
+ "aria-label" | "aria-expanded" | "onClick"
+>) {
+ const { isExpanded, onExpandedChange, isCollapsible } = useNestedTableRow(
+ "NestedTableRowTrigger",
+ );
+ if (!isCollapsible) return null;
+ return (
+
+ );
+}
+
+// Intentionally narrow: animated sub-rows that appear under an expandable
+// parent row. If arbitrary (non-tabular) detail content is needed later, the
+// animated scaffolding can be extracted as a generic
+// primitive and this component rebuilt to compose it around the nested
+// /. Existing call sites stay unchanged.
+function CollapsibleTableRows({
+ colWidths,
+ children,
+ className,
+ ...props
+}: React.ComponentProps<"tr"> & {
+ colWidths?: ReadonlyArray
setOpen(false)}
+ aria-hidden="true"
+ />
+ )}
+ {/* This is what handles the sidebar gap on desktop */}
+
+
+ );
+}
+
+function SidebarTrigger({
+ className,
+ onClick,
+ ...props
+}: React.ComponentProps
+
+
+ {children}
+
+
+ {showIcon && (
+
+ );
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+ return (
+
+
+
+ );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+ return (
+
+ );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+ return (
+
+ );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+ return (
+ tr]:last:border-b-0",
+ className,
+ )}
+ {...props}
+ />
+ );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+ return (
+ |
+
+
+
+
+ |
+