feat: initialize repository, setup Next.js, shadcn-ui, hono, ...etc

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.node-version

@@ -0,0 +1 @@
+24.4.1

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["biomejs.biome"]
+}

.vscode/settings.json

@@ -0,0 +1,17 @@
+{
+  "editor.tabSize": 2,
+  // typescript
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.preferences.importModuleSpecifier": "relative",
+  // biome
+  "biome.enabled": true,
+  // autofix
+  "editor.formatOnSave": false,
+  "[typescript][typescriptreact][javascript][javascriptreact][json][jsonc][json][yaml]": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.ts": "explicit"
+  }
+}

biome.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "includes": [
+      "**",
+      "!**/*.generated.*",
+      "!.next",
+      "!src/lib/$path.ts",
+      "!**/*.css"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "assist": { "actions": { "source": { "organizeImports": "on" } } },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  },
+  "json": {
+    "parser": {
+      "allowComments": true
+    }
+  }
+}

components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,53 @@
+{
+  "name": "claude-code-viewer",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "run-p 'dev:*'",
+    "dev:next": "next dev -p 3400 --turbopack",
+    "dev:path": "pathpida --output src/lib --ignorePath .gitignore --watch --enableStatic",
+    "build": "next build",
+    "lint": "run-s 'lint:*'",
+    "lint:biome-format": "biome format .",
+    "lint:biome-lint": "biome check .",
+    "fix": "run-s 'fix:*'",
+    "fix:biome-format": "biome format --write .",
+    "fix:biome-lint": "biome check --write .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest --run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "@auth/core": "^0.40.0",
+    "@hono/auth-js": "^1.1.0",
+    "@hono/zod-validator": "^0.7.2",
+    "@tanstack/react-query": "^5.85.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "hono": "^4.9.5",
+    "lucide-react": "^0.542.0",
+    "next": "15.5.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-error-boundary": "^6.0.0",
+    "tailwind-merge": "^3.3.1",
+    "ulid": "^3.0.1",
+    "zod": "^4.1.5"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.2.2",
+    "@tailwindcss/postcss": "^4.1.12",
+    "@tsconfig/strictest": "^2.0.5",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "npm-run-all2": "^8.0.4",
+    "pathpida": "^0.25.0",
+    "tailwindcss": "^4.1.12",
+    "tw-animate-css": "^1.3.7",
+    "typescript": "^5.9.2",
+    "vitest": "^3.2.4"
+  },
+  "packageManager": "pnpm@10.8.1"
+}

pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+onlyBuiltDependencies:
+  - '@tailwindcss/oxide'
+  - esbuild
+  - sharp
+  - workerd

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

src/app/api/[[...route]]/route.ts

@@ -0,0 +1,11 @@
+import { handle } from "hono/vercel";
+import { honoApp } from "../../../server/hono/app";
+import { routes } from "../../../server/hono/route";
+
+routes(honoApp);
+
+export const GET = handle(honoApp);
+export const POST = handle(honoApp);
+export const PUT = handle(honoApp);
+export const PATCH = handle(honoApp);
+export const DELETE = handle(honoApp);

src/app/components/RootErrorBoundary.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import type { FC, PropsWithChildren } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+export const RootErrorBoundary: FC<PropsWithChildren> = ({ children }) => {
+  return (
+    <ErrorBoundary
+      FallbackComponent={({ error }) => (
+        <div>
+          <h1>Error</h1>
+          <p>{error.message}</p>
+        </div>
+      )}
+    >
+      {children}
+    </ErrorBoundary>
+  );
+};

src/app/components/RootErrorFallback.tsx

@@ -0,0 +1,12 @@
+import type { FC } from "react";
+import type { FallbackProps } from "react-error-boundary";
+
+export const RootErrorFallback: FC<FallbackProps> = ({ error }) => {
+  return (
+    <div>
+      <h1>Error</h1>
+      <p>Something went wrong</p>
+      <p>{error.message}</p>
+    </div>
+  );
+};

src/app/globals.css

@@ -0,0 +1,122 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-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: 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);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

src/app/layout.tsx

@@ -0,0 +1,39 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { QueryClientProviderWrapper } from "../lib/api/QueryClientProviderWrapper";
+import { RootErrorBoundary } from "./components/RootErrorBoundary";
+
+import "./globals.css";
+
+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">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        <RootErrorBoundary>
+          <QueryClientProviderWrapper>{children}</QueryClientProviderWrapper>
+        </RootErrorBoundary>
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,7 @@
+export default function Home() {
+  return (
+    <div>
+      <h1>Empty App</h1>
+    </div>
+  );
+}

src/lib/$path.ts

@@ -0,0 +1,38 @@
+const buildSuffix = (url?: {
+  query?: Record<string, string | number | boolean | Array<string | number | boolean>>,
+  hash?: string
+}) => {
+  const query = url?.query;
+  const hash = url?.hash;
+  if (!query && !hash) return '';
+  const search = (() => {
+    if (!query) return '';
+
+    const params = new URLSearchParams();
+
+    Object.entries(query).forEach(([key, value]) => {
+      if (Array.isArray(value)) {
+        value.forEach((item) =>
+          params.append(key, String(item))
+        );
+      } else {
+        params.set(key, String(value));
+      }
+    });
+
+    return `?${params.toString()}`;
+  })();
+  return `${search}${hash ? `#${hash}` : ''}`;
+};
+
+export const pagesPath = {
+  $url: (url?: { hash?: string }) => ({ pathname: '/' as const, hash: url?.hash, path: `/${buildSuffix(url)}` })
+};
+
+export type PagesPath = typeof pagesPath;
+
+export const staticPath = {
+  _gitkeep: '/.gitkeep'
+} as const;
+
+export type StaticPath = typeof staticPath;

src/lib/api/QueryClientProviderWrapper.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { QueryClientProvider } from "@tanstack/react-query";
+import type { FC, PropsWithChildren } from "react";
+import { queryClient } from "./queryClient";
+
+export const QueryClientProviderWrapper: FC<PropsWithChildren> = ({
+  children,
+}) => {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  );
+};

src/lib/api/client.ts

@@ -0,0 +1,4 @@
+import { hc } from "hono/client";
+import type { RouteType } from "../../server/hono/route";
+
+export const honoClient = hc<RouteType>("/");

src/lib/api/queryClient.ts

@@ -0,0 +1,11 @@
+import { QueryClient } from "@tanstack/react-query";
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: true,
+      refetchInterval: 1000 * 60 * 5,
+      retry: false,
+    },
+  },
+});

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

src/server/hono/app.ts

@@ -0,0 +1,8 @@
+import { Hono } from "hono";
+
+// biome-ignore lint/complexity/noBannedTypes: add after
+export type HonoContext = {};
+
+export const honoApp = new Hono<HonoContext>().basePath("/api");
+
+export type HonoAppType = typeof honoApp;

src/server/hono/route.ts

@@ -0,0 +1,20 @@
+import { zValidator } from "@hono/zod-validator";
+import { z } from "zod";
+import type { HonoAppType } from "./app";
+
+const helloBodySchema = z.object({
+  name: z.string(),
+});
+
+export const routes = (app: HonoAppType) => {
+  return (
+    app
+      // routes
+      .get("/hello", zValidator("json", helloBodySchema), (c) => {
+        const { name } = c.req.valid("json");
+        return c.json({ message: `Hello ${name}` });
+      })
+  );
+};
+
+export type RouteType = ReturnType<typeof routes>;

src/utils/collection.ts

@@ -0,0 +1,4 @@
+export const typedIncludes = <const T>(
+  array: readonly T[],
+  value: unknown,
+): value is T => (array as unknown[]).includes(value);

tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "extends": "@tsconfig/strictest/tsconfig.json",
+  "compilerOptions": {
+    // transpile target
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "noEmit": true,
+    // module
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    // build optimization
+    "incremental": true,
+    // plugins
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    // paths alias
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    // typecheck
+    "types": ["node", "vitest/globals"],
+    "exactOptionalPropertyTypes": false,
+    "allowJs": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

vitest.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from "vitest/config";
+
+const config = defineConfig({
+  test: {
+    globals: true,
+    setupFiles: ["src/test-setups/vitest.setup.ts"],
+    env: {
+      ENVIRONMENT: "local",
+    },
+  },
+});
+
+export default config;