@geminilight/mindos 0.1.0

package/app/components/settings/KnowledgeTab.tsx

@@ -0,0 +1,157 @@
+'use client';
+
+import { useState } from 'react';
+import { Copy, Check, RefreshCw, Trash2 } from 'lucide-react';
+import type { SettingsData } from './types';
+import { Field, Input, EnvBadge, SectionLabel } from './Primitives';
+import { apiFetch } from '@/lib/api';
+
+interface KnowledgeTabProps {
+  data: SettingsData;
+  setData: React.Dispatch<React.SetStateAction<SettingsData | null>>;
+  t: any;
+}
+
+export function KnowledgeTab({ data, setData, t }: KnowledgeTabProps) {
+  const env = data.envOverrides ?? {};
+  const k = t.settings.knowledge;
+
+  const [showPassword, setShowPassword] = useState(false);
+  const isPasswordMasked = data.webPassword === '***set***';
+
+  const [copied, setCopied] = useState(false);
+  const [resetting, setResetting] = useState(false);
+  // revealed holds the plaintext token after regenerate, until user navigates away
+  const [revealedToken, setRevealedToken] = useState<string | null>(null);
+
+  const hasToken = !!(data.authToken);
+  const displayToken = revealedToken ?? data.authToken ?? '';
+
+  async function handleResetToken() {
+    if (!confirm(k.authTokenResetConfirm)) return;
+    setResetting(true);
+    try {
+      const res = await apiFetch<{ ok: boolean; token: string }>('/api/settings/reset-token', { method: 'POST' });
+      setRevealedToken(res.token);
+      setData(d => d ? { ...d, authToken: res.token } : d);
+    } finally {
+      setResetting(false);
+    }
+  }
+
+  async function handleClearToken() {
+    setData(d => d ? { ...d, authToken: '' } : d);
+    setRevealedToken(null);
+  }
+
+  function handleCopy() {
+    const text = revealedToken ?? data.authToken ?? '';
+    if (!text) return;
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+
+  return (
+    <div className="space-y-5">
+      <SectionLabel>Knowledge Base</SectionLabel>
+
+      <Field
+        label={<>{k.sopRoot} <EnvBadge overridden={env.MIND_ROOT} /></>}
+        hint={env.MIND_ROOT ? k.envNote : k.sopRootHint}
+      >
+        <Input
+          value={data.mindRoot}
+          onChange={e => setData(d => d ? { ...d, mindRoot: e.target.value } : d)}
+          placeholder="/path/to/your/notes"
+        />
+      </Field>
+
+      <div className="border-t border-border pt-5">
+        <SectionLabel>Security</SectionLabel>
+      </div>
+
+      <Field label={k.webPassword} hint={k.webPasswordHint}>
+        <div className="flex gap-2">
+          <Input
+            type={showPassword ? 'text' : 'password'}
+            value={isPasswordMasked ? '••••••••' : (data.webPassword ?? '')}
+            onChange={e => setData(d => d ? { ...d, webPassword: e.target.value } : d)}
+            onFocus={() => { if (isPasswordMasked) setData(d => d ? { ...d, webPassword: '' } : d); }}
+            placeholder="Leave empty to disable"
+          />
+          <button
+            type="button"
+            onClick={() => setShowPassword(v => !v)}
+            className="px-3 py-2 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted transition-colors shrink-0"
+          >
+            {showPassword ? 'Hide' : 'Show'}
+          </button>
+        </div>
+      </Field>
+
+      <Field
+        label={k.authToken}
+        hint={hasToken ? k.authTokenHint : k.authTokenNone}
+      >
+        <div className="space-y-2">
+          {/* Token display */}
+          <div className="flex items-center gap-2 px-3 py-2 bg-background border border-border rounded-lg min-h-[38px]">
+            <code className="flex-1 text-xs font-mono text-foreground break-all select-all">
+              {displayToken || <span className="text-muted-foreground italic">— not set —</span>}
+            </code>
+            {displayToken && (
+              <button
+                type="button"
+                onClick={handleCopy}
+                className="shrink-0 p-1 rounded text-muted-foreground hover:text-foreground transition-colors"
+                title={k.authTokenCopy}
+              >
+                {copied ? <Check size={13} className="text-green-500" /> : <Copy size={13} />}
+              </button>
+            )}
+          </div>
+          {/* MCP port info */}
+          {data.mcpPort && (
+            <p className="text-xs text-muted-foreground">
+              {k.authTokenMcpPort}: <code className="font-mono">{data.mcpPort}</code>
+              {displayToken && (
+                <> &nbsp;·&nbsp; MCP URL: <code className="font-mono select-all">
+                  {typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.hostname}:${data.mcpPort}/mcp` : `http://localhost:${data.mcpPort}/mcp`}
+                </code></>
+              )}
+            </p>
+          )}
+          {/* Action buttons */}
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={handleResetToken}
+              disabled={resetting}
+              className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-foreground hover:bg-muted disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+            >
+              <RefreshCw size={12} className={resetting ? 'animate-spin' : ''} />
+              {k.authTokenReset}
+            </button>
+            {hasToken && (
+              <button
+                type="button"
+                onClick={handleClearToken}
+                className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded-lg border border-border text-muted-foreground hover:text-destructive hover:border-destructive/50 transition-colors"
+              >
+                <Trash2 size={12} />
+                {k.authTokenClear}
+              </button>
+            )}
+          </div>
+          {revealedToken && (
+            <p className="text-xs text-amber-500">
+              New token generated. Copy it now — it won&apos;t be shown in full again.
+            </p>
+          )}
+        </div>
+      </Field>
+    </div>
+  );
+}

package/app/components/settings/PluginsTab.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { Puzzle } from 'lucide-react';
+import { getAllRenderers, setRendererEnabled } from '@/lib/renderers/registry';
+
+interface PluginsTabProps {
+  pluginStates: Record<string, boolean>;
+  setPluginStates: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+  t: any;
+}
+
+export function PluginsTab({ pluginStates, setPluginStates, t }: PluginsTabProps) {
+  return (
+    <div className="space-y-5">
+      <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">{t.settings.plugins.title}</p>
+
+      {getAllRenderers().length === 0 ? (
+        <p className="text-sm text-muted-foreground">{t.settings.plugins.noPlugins}</p>
+      ) : (
+        <div className="flex flex-col gap-3">
+          {getAllRenderers().map(renderer => {
+            const enabled = pluginStates[renderer.id] ?? true;
+            return (
+              <div
+                key={renderer.id}
+                className={`border rounded-xl p-4 transition-colors ${enabled ? 'border-border bg-card' : 'border-border/50 bg-muted/30 opacity-60'}`}
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex items-start gap-3">
+                    <span className="text-2xl leading-none mt-0.5">{renderer.icon}</span>
+                    <div className="min-w-0">
+                      <div className="flex items-center gap-2 flex-wrap">
+                        <span className="text-sm font-medium text-foreground">{renderer.name}</span>
+                        {renderer.builtin && (
+                          <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-mono">
+                            {t.settings.plugins.builtinBadge}
+                          </span>
+                        )}
+                        <div className="flex gap-1 flex-wrap">
+                          {renderer.tags.map(tag => (
+                            <span key={tag} className="text-[10px] px-1.5 py-0.5 rounded bg-muted/60 text-muted-foreground">
+                              {tag}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+                      <p className="text-xs text-muted-foreground mt-1 leading-relaxed">{renderer.description}</p>
+                      <p className="text-[11px] text-muted-foreground/60 mt-1.5 font-mono">
+                        {t.settings.plugins.matchHint}: <code className="bg-muted px-1 rounded">{renderer.match.toString().match(/\/(.+)\//)?.[1] ?? '—'}</code>
+                      </p>
+                    </div>
+                  </div>
+
+                  <button
+                    onClick={() => {
+                      const next = !enabled;
+                      setRendererEnabled(renderer.id, next);
+                      setPluginStates(s => ({ ...s, [renderer.id]: next }));
+                    }}
+                    role="switch"
+                    aria-checked={enabled}
+                    className={`shrink-0 w-9 h-5 rounded-full transition-colors relative ${enabled ? 'bg-amber-600' : 'bg-muted border border-border'}`}
+                    title={enabled ? t.settings.plugins.enabled : t.settings.plugins.disabled}
+                  >
+                    <span
+                      className={`absolute top-[3px] w-3.5 h-3.5 rounded-full shadow-sm transition-all ${enabled ? 'left-[18px] bg-white' : 'left-[3px] bg-muted-foreground/50'}`}
+                    />
+                  </button>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      <div className="flex items-center gap-2 text-xs text-muted-foreground border border-dashed border-border rounded-xl px-4 py-3">
+        <Puzzle size={13} className="shrink-0" />
+        <span>{t.settings.plugins.comingSoon}</span>
+      </div>
+    </div>
+  );
+}

package/app/components/settings/Primitives.tsx

@@ -0,0 +1,60 @@
+'use client';
+
+export function SectionLabel({ children }: { children: React.ReactNode }) {
+  return <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">{children}</p>;
+}
+
+export function Field({ label, hint, children }: { label: React.ReactNode; hint?: string; children: React.ReactNode }) {
+  return (
+    <div className="space-y-1.5">
+      <label className="text-sm text-foreground font-medium">{label}</label>
+      {children}
+      {hint && <p className="text-xs text-muted-foreground">{hint}</p>}
+    </div>
+  );
+}
+
+export function Input({ className = '', ...props }: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      {...props}
+      className={`w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring disabled:opacity-50 ${className}`}
+    />
+  );
+}
+
+export function Select({ className = '', ...props }: React.SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <select
+      {...props}
+      className={`w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground outline-none focus:ring-1 focus:ring-ring disabled:opacity-50 ${className}`}
+    />
+  );
+}
+
+export function EnvBadge({ overridden }: { overridden: boolean }) {
+  if (!overridden) return null;
+  return (
+    <span className="text-[10px] px-1.5 py-0.5 rounded bg-amber-500/15 text-amber-500 font-mono ml-1.5">env</span>
+  );
+}
+
+export function ApiKeyInput({ value, onChange, placeholder, disabled }: {
+  value: string;
+  onChange: (v: string) => void;
+  placeholder?: string;
+  disabled?: boolean;
+}) {
+  const isMasked = value === '***set***';
+  return (
+    <input
+      type="password"
+      value={isMasked ? '••••••••••••••••' : value}
+      onChange={e => onChange(e.target.value)}
+      placeholder={placeholder ?? 'sk-...'}
+      disabled={disabled}
+      className="w-full px-3 py-2 text-sm bg-background border border-border rounded-lg text-foreground placeholder:text-muted-foreground outline-none focus:ring-1 focus:ring-ring disabled:opacity-50"
+      onFocus={() => { if (isMasked) onChange(''); }}
+    />
+  );
+}

package/app/components/settings/ShortcutsTab.tsx

@@ -0,0 +1,22 @@
+'use client';
+
+interface ShortcutsTabProps {
+  t: any;
+}
+
+export function ShortcutsTab({ t }: ShortcutsTabProps) {
+  return (
+    <div className="space-y-1">
+      {t.shortcuts.map((s: { description: string; keys: string[] }, i: number) => (
+        <div key={i} className="flex items-center justify-between py-2.5 border-b border-border last:border-0">
+          <span className="text-sm text-foreground">{s.description}</span>
+          <div className="flex items-center gap-1">
+            {s.keys.map((k: string, j: number) => (
+              <kbd key={j} className="px-2 py-0.5 text-xs font-mono bg-muted border border-border rounded text-foreground">{k}</kbd>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/app/components/settings/types.ts

@@ -0,0 +1,41 @@
+import type { Locale } from '@/lib/i18n';
+
+export interface ProviderConfig {
+  apiKey: string;
+  model: string;
+  baseUrl?: string;
+}
+
+export interface AiSettings {
+  provider: 'anthropic' | 'openai';
+  providers: {
+    anthropic?: ProviderConfig;
+    openai?: ProviderConfig;
+  };
+}
+
+export interface SettingsData {
+  ai: AiSettings;
+  mindRoot: string;
+  webPassword?: string;
+  authToken?: string;   // masked: first-xxxx-••••-last pattern
+  mcpPort?: number;
+  envOverrides?: Record<string, boolean>;
+  envValues?: Record<string, string>;
+}
+
+export type Tab = 'ai' | 'appearance' | 'knowledge' | 'plugins' | 'shortcuts';
+
+export const CONTENT_WIDTHS = [
+  { value: '680px', label: 'Narrow (680px)' },
+  { value: '780px', label: 'Default (780px)' },
+  { value: '960px', label: 'Wide (960px)' },
+  { value: '100%', label: 'Full width' },
+];
+
+export const FONTS = [
+  { value: 'lora', label: 'Lora (serif)', style: { fontFamily: 'Lora, Georgia, serif' } },
+  { value: 'ibm-plex-sans', label: 'IBM Plex Sans', style: { fontFamily: "'IBM Plex Sans', sans-serif" } },
+  { value: 'geist', label: 'Geist', style: { fontFamily: 'var(--font-geist-sans), sans-serif' } },
+  { value: 'ibm-plex-mono', label: 'IBM Plex Mono (mono)', style: { fontFamily: "'IBM Plex Mono', monospace" } },
+];

package/app/components/ui/button.tsx

@@ -0,0 +1,60 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

package/app/components/ui/dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import * as React from "react"
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { XIcon } from "lucide-react"
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-background p-4 text-sm ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-2 right-2"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon
+            />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>
+          Close
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  )
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-base leading-none font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

package/app/components/ui/input.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import { Input as InputPrimitive } from "@base-ui/react/input"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <InputPrimitive
+      type={type}
+      data-slot="input"
+      className={cn(
+        "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

package/app/components/ui/scroll-area.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: ScrollAreaPrimitive.Root.Props) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: ScrollAreaPrimitive.Scrollbar.Props) {
+  return (
+    <ScrollAreaPrimitive.Scrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Thumb
+        data-slot="scroll-area-thumb"
+        className="relative flex-1 rounded-full bg-border"
+      />
+    </ScrollAreaPrimitive.Scrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }