@porkytheblack/garage-dashboard 0.1.0

package/lib/types.ts

@@ -0,0 +1,262 @@
+/** Lean DTO mirror of the Garage wire contract (src/garage/contract.ts). */
+
+export type PermissionMode = "normal" | "auto" | "bypass";
+export type SessionLifecycle = "provisioning" | "idle" | "busy" | "error" | "destroyed";
+
+export interface NamespaceDto {
+  id: string;
+  name: string;
+  slug: string;
+  created_at: string;
+  is_default: boolean;
+  session_count?: number;
+}
+
+export interface WorkspaceDto {
+  id: string;
+  name: string;
+  path: string;
+  created_at: string;
+  session_count: number;
+}
+
+export interface SessionDto {
+  id: string;
+  state: SessionLifecycle;
+  workspace: string;
+  workspace_id: string | null;
+  title: string | null;
+  model_label: string | null;
+  permission_mode: PermissionMode;
+  created_at: string;
+  last_activity: string;
+  connected_clients: number;
+  busy: boolean;
+  loaded: boolean;
+  tokens_in: number;
+  tokens_out: number;
+  turn_count: number;
+  error: string | null;
+  custom_credentials: { provider: string; last4: string } | null;
+}
+
+export interface AgentInfo {
+  id: string;
+  label: string;
+  role: string;
+  active: boolean;
+  busy: boolean;
+  turnCount: number;
+}
+
+export interface ApiKeyPublic {
+  id: string;
+  name: string;
+  keyPrefix: string;
+  scopes: string[];
+  createdAt: string;
+  lastUsed: string | null;
+  expiresAt: string | null;
+  revoked: boolean;
+  namespace?: string | null;
+}
+
+export interface ProviderDto {
+  id: string;
+  type: "known" | "custom";
+  label?: string;
+  baseURL?: string;
+  hasKey?: boolean;
+  models?: string[];
+}
+
+export interface ProfileDto {
+  id: string;
+  label: string;
+  providerId: string;
+  model: string;
+  reasoning?: unknown;
+}
+
+/** Wire shape of a configured provider (src/garage/routes/models.ts#providerDto). */
+export interface ProviderWire {
+  id: string;
+  type: "known" | "custom";
+  based_on: string | null;
+  adapter: string | null;
+  base_url: string | null;
+  context_limit: number | null;
+  has_api_key: boolean;
+}
+
+/** Wire shape of a model profile (src/garage/routes/models.ts#profileDto). */
+export interface ProfileWire {
+  id: string;
+  label: string;
+  provider_id: string;
+  model: string;
+  reasoning?: unknown;
+  reasoning_label?: string;
+  context_limit?: number | null;
+  /** Input modalities from the catalog ("text", "image", …); null = unknown. */
+  input_modalities?: string[] | null;
+  last_used_at: string | null;
+}
+
+/** A known provider from GET /models/catalog — drives guided pickers. */
+export interface CatalogProvider {
+  id: string;
+  label: string;
+  description: string;
+  env_var: string | null;
+  default_models: string[];
+  needs_api_key: boolean;
+  reasoning_capable: boolean;
+}
+
+/** A custom-endpoint adapter from GET /models/catalog. */
+export interface CatalogAdapter {
+  id: string;
+  label: string;
+  description: string;
+}
+
+export interface Catalog {
+  providers: CatalogProvider[];
+  adapters: CatalogAdapter[];
+}
+
+/** One reasoning/thinking choice from GET /models/reasoning-options. */
+export interface ReasoningOption {
+  label: string;
+  description?: string;
+  value: unknown;
+}
+
+/** A single provisioning step (src/garage/templates/types.ts). */
+export type TemplateStep =
+  | { type: "git-clone"; repo: string; dest?: string; ref?: string }
+  | { type: "shell"; command: string }
+  | { type: "copy"; from: string; to: string };
+
+/** Full template incl. its ordered steps (GET /templates/:name). */
+export interface TemplateFull {
+  name: string;
+  description?: string;
+  steps: TemplateStep[];
+}
+
+/** One declared template parameter (GET /templates), for form rendering. */
+export interface TemplateParamDto {
+  name: string;
+  description: string | null;
+  required: boolean;
+  default: string | null;
+  secret: boolean;
+}
+
+/** Summary of a setup template from GET /templates (counts + declared params). */
+export interface TemplateSummaryDto {
+  name: string;
+  description: string | null;
+  step_count: number;
+  repo_count: number;
+  skill_count: number;
+  mcp_count: number;
+  has_system_prompt: boolean;
+  params: TemplateParamDto[];
+}
+
+export interface TemplateDto {
+  name: string;
+  description?: string;
+  step_count?: number;
+}
+
+export interface Identity {
+  authenticated: boolean;
+  user?: string;
+  scopes?: string[];
+  is_admin?: boolean;
+}
+
+export interface EventEnvelope {
+  sessionId: string;
+  seq: number;
+  event: { type: string; [k: string]: unknown };
+}
+
+/* ── Live session / chat model (mirrors src/shared/events.ts) ───────────── */
+
+export interface ToolEvent {
+  id: string;
+  name: string;
+  input: unknown;
+  status: "running" | "success" | "error" | "aborted";
+  output?: string;
+  startedAt: number;
+  endedAt?: number;
+}
+
+export interface ChatTurn {
+  id: string;
+  kind: "user" | "agent" | "tool" | "system" | "transmission";
+  text?: string;
+  reasoning?: string;
+  tool?: ToolEvent;
+  meta?: Record<string, unknown>;
+  createdAt: number;
+  /** UI-only: mark a system turn as an error. */
+  error?: boolean;
+}
+
+export interface TaskItem {
+  id: string;
+  content: string;
+  activeForm?: string;
+  status: "pending" | "in_progress" | "completed";
+}
+
+export interface SessionStats {
+  turns: number;
+  tokens_in: number;
+  tokens_out: number;
+  contextPct: number;
+}
+
+export interface DisplaySlot {
+  slotId: string;
+  renderer: string;
+  input: unknown;
+  createdAt: number;
+  isPermissionRequest: boolean;
+}
+
+/* ── Remote uploads mirror (R2/S3) — src/garage/contract.ts ─────────────── */
+
+/** Secret-free remote-storage settings (GET /storage). */
+export interface StorageConfigDto {
+  enabled: boolean;
+  endpoint: string | null;
+  bucket: string | null;
+  prefix: string | null;
+  access_key_id: string | null;
+  has_secret: boolean;
+}
+
+/** Body for PUT /storage — secret is write-only (omit to keep the stored one). */
+export interface UpdateStorageConfigInput {
+  enabled?: boolean;
+  endpoint?: string | null;
+  bucket?: string | null;
+  prefix?: string | null;
+  access_key_id?: string | null;
+  secret_access_key?: string | null;
+}
+
+/** Per-session remote-mirror sync state, present in the files list response. */
+export interface FilesRemoteStatus {
+  enabled: boolean;
+  last_sync_at: string | null;
+  error: string | null;
+}

package/lib/useSession.ts

@@ -0,0 +1,193 @@
+"use client";
+
+/**
+ * Live session model. Subscribes to the Garage session WebSocket, requests a
+ * full hydrate on open, and folds the event stream into a render-ready
+ * conversation: ordered turns, a streaming buffer, tasks, stats, the agent
+ * roster, and any open permission/display slots. Also exposes the inbound
+ * commands the chat needs (send, abort, resolve permission, switch agent…).
+ */
+
+import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { sessionWsUrl } from "./api";
+import type { ChatTurn, ToolEvent, TaskItem, SessionStats, DisplaySlot, AgentInfo } from "./types";
+
+interface State {
+  items: ChatTurn[];
+  streaming: string;
+  busy: boolean;
+  title: string | null;
+  tasks: TaskItem[];
+  stats: SessionStats | null;
+  agents: AgentInfo[];
+  activeAgentId: string | null;
+  mode: string | null;
+  slots: DisplaySlot[];
+  /** Honest status: seconds the model has been silent (null = streaming fine). */
+  waitingSec: number | null;
+  /** Messages queued behind the running turn. */
+  queueDepth: number;
+}
+
+const INIT: State = {
+  items: [],
+  streaming: "",
+  busy: false,
+  title: null,
+  tasks: [],
+  stats: null,
+  agents: [],
+  activeAgentId: null,
+  mode: null,
+  slots: [],
+  waitingSec: null,
+  queueDepth: 0,
+};
+
+type Ev = { type: string; [k: string]: any };
+
+function upsert(items: ChatTurn[], turn: ChatTurn): ChatTurn[] {
+  const i = items.findIndex((t) => t.id === turn.id);
+  if (i === -1) return [...items, turn];
+  const next = items.slice();
+  next[i] = { ...next[i], ...turn };
+  return next;
+}
+
+function reduce(state: State, ev: Ev): State {
+  switch (ev.type) {
+    case "session_hydrate":
+      // Open display slots are replayed as display_slot_pushed events right
+      // after the hydrate — reset here so stale slots from before a reconnect
+      // don't linger. Error turns arrive again right after (the session
+      // replays recent errors on every hydrate), so a plain reset stays
+      // duplicate-free.
+      return {
+        ...state,
+        items: (ev.turns ?? []) as ChatTurn[],
+        title: ev.title ?? state.title,
+        tasks: ev.tasks ?? [],
+        stats: ev.stats ?? state.stats,
+        slots: [],
+      };
+    case "session_reset":
+      return { ...state, items: [], streaming: "", tasks: [] };
+    case "turn":
+      return {
+        ...state,
+        items: upsert(state.items, ev.turn as ChatTurn),
+        streaming: ev.turn?.kind === "agent" ? "" : state.streaming,
+      };
+    case "turn_update":
+      return { ...state, items: state.items.map((t) => (t.id === ev.id ? { ...t, ...(ev.patch ?? {}) } : t)) };
+    case "text_delta":
+      return { ...state, streaming: state.streaming + (ev.text ?? "") };
+    case "text_clear":
+      return { ...state, streaming: "" };
+    case "tool_started":
+    case "tool_finished": {
+      const tool = ev.tool as ToolEvent;
+      return { ...state, items: upsert(state.items, { id: tool.id, kind: "tool", tool, createdAt: tool.startedAt ?? Date.now() }) };
+    }
+    case "tasks":
+      return { ...state, tasks: ev.tasks ?? [] };
+    case "stats":
+      return { ...state, stats: ev.stats ?? state.stats };
+    case "title":
+      return { ...state, title: ev.title ?? null };
+    case "busy":
+      return { ...state, busy: Boolean(ev.busy), ...(ev.busy ? {} : { waitingSec: null }) };
+    case "agent_roster":
+      return { ...state, agents: ev.agents ?? [], activeAgentId: ev.activeId ?? null };
+    case "permission_mode_changed":
+      return { ...state, mode: ev.mode ?? state.mode };
+    case "display_slot_pushed": {
+      // Upsert: the server replays open slots on hydrate/resync.
+      const slot = ev.slot as DisplaySlot;
+      return { ...state, slots: [...state.slots.filter((s) => s.slotId !== slot.slotId), slot] };
+    }
+    case "display_slot_resolved":
+      return { ...state, slots: state.slots.filter((s) => s.slotId !== ev.slotId) };
+    case "error":
+      return {
+        ...state,
+        waitingSec: null,
+        items: [
+          ...state.items,
+          {
+            id: `err_${Date.now()}`,
+            kind: "system",
+            text: ev.message,
+            error: true,
+            createdAt: Date.now(),
+            meta: { kind: ev.kind, hint: ev.hint, retryAfterSec: ev.retryAfterSec, detail: ev.detail },
+          },
+        ],
+      };
+    case "model_status":
+      return { ...state, waitingSec: ev.state === "waiting" ? (ev.elapsedSec ?? 0) : null };
+    case "queue_depth":
+      return { ...state, queueDepth: ev.depth ?? 0 };
+    default:
+      return state;
+  }
+}
+
+export function useSession(id: string) {
+  const [state, dispatch] = useReducer(reduce, INIT);
+  const [connected, setConnected] = useState(false);
+  const wsRef = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    if (!id) return;
+    const ws = new WebSocket(sessionWsUrl(id));
+    wsRef.current = ws;
+    ws.onopen = () => {
+      setConnected(true);
+      ws.send(JSON.stringify({ type: "resync" }));
+    };
+    ws.onclose = () => setConnected(false);
+    let wasBusy = false;
+    ws.onmessage = (e) => {
+      try {
+        const env = JSON.parse(String(e.data));
+        const ev = env.event ?? env;
+        dispatch(ev);
+        // A finished turn may include work from before this client connected
+        // (the launch flow posts the first message before navigating) — pull a
+        // fresh hydrate so the transcript is always complete. Only on the
+        // busy true→false TRANSITION: hydrate itself re-emits the current
+        // busy state, so resyncing on every busy:false would loop forever.
+        if (ev.type === "busy") {
+          if (wasBusy && ev.busy === false) ws.send(JSON.stringify({ type: "resync" }));
+          wasBusy = Boolean(ev.busy);
+        }
+      } catch {
+        /* ignore non-JSON frames */
+      }
+    };
+    return () => {
+      ws.close();
+      wsRef.current = null;
+    };
+  }, [id]);
+
+  const raw = useCallback((msg: Record<string, unknown>) => wsRef.current?.send(JSON.stringify(msg)), []);
+  const send = useCallback(
+    (text: string, images?: Array<{ data: string; media_type: string }>) =>
+      (text.trim() || images?.length) &&
+      raw({ type: "send_message", text: text.trim(), ...(images?.length ? { images } : {}) }),
+    [raw],
+  );
+  const abort = useCallback(() => raw({ type: "abort" }), [raw]);
+  const resolvePermission = useCallback((slotId: string, allow: boolean) => raw({ type: "resolve_permission", slot_id: slotId, allow }), [raw]);
+  const setMode = useCallback((mode: string) => raw({ type: "set_permission_mode", mode }), [raw]);
+  const swapProfile = useCallback((profileId: string) => raw({ type: "swap_profile", profile_id: profileId }), [raw]);
+  const switchAgent = useCallback((agentId: string) => raw({ type: "switch_agent", agent_id: agentId }), [raw]);
+  const addAgent = useCallback((role: string, label?: string) => raw({ type: "add_agent", role, label }), [raw]);
+  const removeAgent = useCallback((agentId: string) => raw({ type: "remove_agent", agent_id: agentId }), [raw]);
+
+  return { ...state, connected, send, abort, resolvePermission, setMode, swapProfile, switchAgent, addAgent, removeAgent };
+}
+
+export type SessionLive = ReturnType<typeof useSession>;

package/lib/utils.ts

@@ -0,0 +1,7 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Merge conditional class names, de-duping conflicting Tailwind utilities. */
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/lib/verify-provider.ts

@@ -0,0 +1,31 @@
+"use client";
+
+/**
+ * Verify a saved provider by asking the Garage to list its models live
+ * (GET /models/providers/:id/models — the key never reaches the browser).
+ * A model list means the key + base URL actually work; failures map to a
+ * human verdict the UI can act on. Shared by first-run onboarding and the
+ * add-provider flow.
+ */
+
+import { api, ApiError } from "./api";
+
+export type VerifyOutcome =
+  | { ok: true; models: string[] }
+  | { ok: false; reason: "auth" | "network" | "upstream"; message: string };
+
+export async function verifyProvider(providerId: string): Promise<VerifyOutcome> {
+  try {
+    const res = await api<{ models: string[] }>(`/models/providers/${providerId}/models`);
+    return { ok: true, models: res.models ?? [] };
+  } catch (e) {
+    const raw = e instanceof ApiError ? e.message : String(e);
+    if (/401|403|unauthorized|invalid api key|invalid authentication/i.test(raw)) {
+      return { ok: false, reason: "auth", message: "The provider rejected the API key. Check the key and try again." };
+    }
+    if (/unreachable|timed? ?out|econnrefused|enotfound|fetch failed/i.test(raw)) {
+      return { ok: false, reason: "network", message: "Could not reach the endpoint. Check the base URL." };
+    }
+    return { ok: false, reason: "upstream", message: raw };
+  }
+}

package/next.config.mjs

@@ -0,0 +1,16 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = path.dirname(fileURLToPath(import.meta.url));
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  // The dashboard is a pure client of the Garage REST/WS API; no server-side
+  // secrets live here. The API base is read at build time from NEXT_PUBLIC_GARAGE_URL.
+  // Pin the file-tracing root to this app so the repo's root lockfile doesn't
+  // confuse Next's workspace inference.
+  outputFileTracingRoot: here,
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@porkytheblack/garage-dashboard",
+  "version": "0.1.0",
+  "description": "Garage dashboard — a clean console for the Glorp orchestration layer (namespaces, workspaces, sessions, credentials, profiles, agents, messages, provisioning).",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev -p 3270",
+    "build": "next build",
+    "start": "next start -p 3270",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.16",
+    "@radix-ui/react-dropdown-menu": "^2.1.17",
+    "@radix-ui/react-label": "^2.1.9",
+    "@radix-ui/react-popover": "^1.1.16",
+    "@radix-ui/react-scroll-area": "^1.2.11",
+    "@radix-ui/react-select": "^2.3.0",
+    "@radix-ui/react-separator": "^1.1.9",
+    "@radix-ui/react-slot": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.14",
+    "@radix-ui/react-tooltip": "^1.2.9",
+    "@radix-ui/react-visually-hidden": "^1.2.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "geist": "^1.7.2",
+    "lucide-react": "^1.17.0",
+    "next": "^15.5.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "autoprefixer": "^10.5.0",
+    "postcss": "^8.5.15",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.6.0"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/tailwind.config.ts

@@ -0,0 +1,94 @@
+import type { Config } from "tailwindcss";
+import animate from "tailwindcss-animate";
+
+/**
+ * Garage design language — "sap & sunlight", light + dark.
+ *
+ * Warm near-neutral surfaces arranged in a deliberate elevation ladder
+ * (background → card → surface-2 → elevated), a single sap-green brand
+ * accent, and a depth model built from hairline borders + a top "sheen"
+ * highlight rather than heavy shadows. Every value is wired through the HSL
+ * CSS variables in globals.css so each mode retunes from one place.
+ */
+const config: Config = {
+  darkMode: "class",
+  content: ["./app/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./lib/**/*.{ts,tsx}"],
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["var(--font-geist-sans)", "ui-sans-serif", "system-ui", "sans-serif"],
+        mono: ["var(--font-geist-mono)", "ui-monospace", "SFMono-Regular", "Menlo", "monospace"],
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        "border-strong": "hsl(var(--border-strong))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        faint: "hsl(var(--faint))",
+        elevated: "hsl(var(--elevated))",
+        brand: {
+          DEFAULT: "hsl(var(--brand))",
+          foreground: "hsl(var(--brand-foreground))",
+          strong: "hsl(var(--brand-strong))",
+        },
+        primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))" },
+        secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" },
+        destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))" },
+        success: { DEFAULT: "hsl(var(--success))", foreground: "hsl(var(--success-foreground))" },
+        warning: { DEFAULT: "hsl(var(--warning))", foreground: "hsl(var(--warning-foreground))" },
+        muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))" },
+        accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))" },
+        popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))" },
+        card: "hsl(var(--card))",
+        surface: { DEFAULT: "hsl(var(--card))", 2: "hsl(var(--surface-2))" },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          border: "hsl(var(--sidebar-border))",
+        },
+      },
+      borderRadius: {
+        xl: "calc(var(--radius) + 4px)",
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 3px)",
+        sm: "calc(var(--radius) - 6px)",
+      },
+      boxShadow: {
+        // Depth recipe lives in globals.css so each mode tunes its own tint.
+        sheen: "inset 0 1px 0 0 hsl(var(--sheen))",
+        card: "var(--shadow-card)",
+        elevated: "var(--shadow-elevated)",
+        glow: "0 0 0 1px hsl(var(--brand) / 0.45), 0 0 28px -6px hsl(var(--brand) / 0.5)",
+      },
+      keyframes: {
+        "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" } },
+        "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" } },
+        "fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
+        "slide-up": { from: { opacity: "0", transform: "translateY(8px)" }, to: { opacity: "1", transform: "translateY(0)" } },
+        "pop-in": { from: { opacity: "0", transform: "scale(0.96)" }, to: { opacity: "1", transform: "scale(1)" } },
+        "caret-blink": { "0%,70%,100%": { opacity: "1" }, "20%,50%": { opacity: "0" } },
+        "pulse-ring": {
+          "0%": { transform: "scale(0.6)", opacity: "0.7" },
+          "80%,100%": { transform: "scale(2.2)", opacity: "0" },
+        },
+        shimmer: { "100%": { transform: "translateX(100%)" } },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "fade-in": "fade-in 0.25s ease-out",
+        "slide-up": "slide-up 0.32s cubic-bezier(0.16,1,0.3,1)",
+        "pop-in": "pop-in 0.2s cubic-bezier(0.16,1,0.3,1)",
+        "caret-blink": "caret-blink 1.2s ease-out infinite",
+        "pulse-ring": "pulse-ring 2s cubic-bezier(0.16,1,0.3,1) infinite",
+        shimmer: "shimmer 1.6s infinite",
+      },
+    },
+  },
+  plugins: [animate],
+};
+
+export default config;

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "ES2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }],
+    "paths": { "@/*": ["./*"] }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}