agentic-dev 0.1.0 → 0.2.0

package/client/platform/src/api/client.ts

@@ -0,0 +1,30 @@
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL as string | undefined)?.replace(/\/$/, "") ?? "";
+
+interface RequestOptions {
+  accessToken?: string;
+}
+
+async function readJson<T>(response: Response): Promise<T> {
+  if (!response.ok) {
+    let message = "Request failed";
+    try {
+      const data = (await response.json()) as { detail?: string };
+      if (typeof data.detail === "string" && data.detail.length > 0) {
+        message = data.detail;
+      }
+    } catch {
+      message = response.statusText || message;
+    }
+    throw new Error(message);
+  }
+
+  return (await response.json()) as T;
+}
+
+export async function apiGet<T>(path: string, options?: RequestOptions): Promise<T> {
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    headers: options?.accessToken ? { Authorization: `Bearer ${options.accessToken}` } : undefined,
+  });
+
+  return readJson<T>(response);
+}

package/client/platform/src/api/orders.ts

@@ -0,0 +1,42 @@
+import { apiGet } from "@/api/client";
+
+export interface DashboardStat {
+  label: string;
+  value: string;
+  tone?: string | null;
+}
+
+export interface OrderActivity {
+  order_id: string;
+  date: string;
+  customer: string;
+  status: string;
+}
+
+export interface SelectedOrder {
+  product_name: string;
+  customer_name: string;
+  status: string;
+  amount: string;
+}
+
+export interface OrderOverviewResponse {
+  stats: DashboardStat[];
+  recent_activity: OrderActivity[];
+  selected_order: SelectedOrder;
+}
+
+export interface OrderSummary {
+  id: string;
+  product_name: string;
+  customer_name: string;
+  status: string;
+}
+
+export function fetchOrderOverview(accessToken: string) {
+  return apiGet<OrderOverviewResponse>("/orders/overview", { accessToken });
+}
+
+export function fetchOrders(accessToken: string) {
+  return apiGet<OrderSummary[]>("/orders", { accessToken });
+}

package/client/platform/src/app/App.tsx

@@ -0,0 +1,21 @@
+import { Route, Routes } from "react-router-dom";
+
+import { ProtectedRoute } from "@/auth/ProtectedRoute";
+import { AppShell } from "@/components/AppShell";
+import { DashboardPage } from "@/pages/DashboardPage";
+import { LoginPage } from "@/pages/LoginPage";
+import { OrdersPage } from "@/pages/OrdersPage";
+
+export function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route element={<ProtectedRoute />}>
+        <Route element={<AppShell />}>
+          <Route path="/" element={<DashboardPage />} />
+          <Route path="/orders" element={<OrdersPage />} />
+        </Route>
+      </Route>
+    </Routes>
+  );
+}

package/client/platform/src/auth/AuthProvider.tsx

@@ -0,0 +1,122 @@
+import { createContext, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+
+import { getMe, login as loginRequest } from "@/auth/auth-client";
+import type { AuthToken, AuthUser, LoginCommand } from "@/auth/types";
+
+const STORAGE_KEY = "platform.auth.token";
+
+interface AuthContextValue {
+  user: AuthUser | null;
+  token: AuthToken | null;
+  initializing: boolean;
+  authenticating: boolean;
+  login: (command: LoginCommand) => Promise<void>;
+  logout: () => void;
+}
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+function readStoredToken(): AuthToken | null {
+  const raw = window.localStorage.getItem(STORAGE_KEY);
+  if (!raw) {
+    return null;
+  }
+
+  try {
+    return JSON.parse(raw) as AuthToken;
+  } catch {
+    window.localStorage.removeItem(STORAGE_KEY);
+    return null;
+  }
+}
+
+function storeToken(token: AuthToken | null) {
+  if (token) {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(token));
+    return;
+  }
+
+  window.localStorage.removeItem(STORAGE_KEY);
+}
+
+export function AuthProvider({ children }: { children: ReactNode }) {
+  const [token, setToken] = useState<AuthToken | null>(() => readStoredToken());
+  const [user, setUser] = useState<AuthUser | null>(null);
+  const [initializing, setInitializing] = useState(true);
+  const [authenticating, setAuthenticating] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function bootstrap() {
+      if (!token) {
+        setUser(null);
+        setInitializing(false);
+        return;
+      }
+
+      try {
+        const currentUser = await getMe(token.access_token);
+        if (!cancelled) {
+          setUser(currentUser);
+        }
+      } catch {
+        if (!cancelled) {
+          setToken(null);
+          setUser(null);
+          storeToken(null);
+        }
+      } finally {
+        if (!cancelled) {
+          setInitializing(false);
+        }
+      }
+    }
+
+    void bootstrap();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [token]);
+
+  const value = useMemo<AuthContextValue>(
+    () => ({
+      user,
+      token,
+      initializing,
+      authenticating,
+      async login(command) {
+        setAuthenticating(true);
+        try {
+          const nextToken = await loginRequest(command);
+          storeToken(nextToken);
+          setToken(nextToken);
+          const currentUser = await getMe(nextToken.access_token);
+          setUser(currentUser);
+        } finally {
+          setAuthenticating(false);
+          setInitializing(false);
+        }
+      },
+      logout() {
+        storeToken(null);
+        setToken(null);
+        setUser(null);
+        setInitializing(false);
+      },
+    }),
+    [authenticating, initializing, token, user],
+  );
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+
+  return context;
+}

package/client/platform/src/auth/ProtectedRoute.tsx

@@ -0,0 +1,22 @@
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+
+import { useAuth } from "@/auth/AuthProvider";
+
+export function ProtectedRoute() {
+  const { initializing, user } = useAuth();
+  const location = useLocation();
+
+  if (initializing) {
+    return (
+      <div className="flex min-h-screen items-center justify-center bg-[var(--app-shell-bg)] text-sm font-medium text-[#5f6e86]">
+        세션을 확인하는 중입니다.
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/login" replace state={{ from: location }} />;
+  }
+
+  return <Outlet />;
+}

package/client/platform/src/auth/auth-client.ts

@@ -0,0 +1,38 @@
+import type { AuthToken, AuthUser, LoginCommand } from "@/auth/types";
+
+const API_BASE_URL = (import.meta.env.VITE_API_BASE_URL as string | undefined)?.replace(/\/$/, "") ?? "";
+
+async function readJson<T>(response: Response): Promise<T> {
+  if (!response.ok) {
+    let message = "Request failed";
+    try {
+      const data = (await response.json()) as { detail?: string };
+      if (typeof data.detail === "string" && data.detail.length > 0) {
+        message = data.detail;
+      }
+    } catch {
+      message = response.statusText || message;
+    }
+    throw new Error(message);
+  }
+
+  return (await response.json()) as T;
+}
+
+export async function login(command: LoginCommand): Promise<AuthToken> {
+  const response = await fetch(`${API_BASE_URL}/auth/login`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(command),
+  });
+
+  return readJson<AuthToken>(response);
+}
+
+export async function getMe(accessToken: string): Promise<AuthUser> {
+  const response = await fetch(`${API_BASE_URL}/auth/me`, {
+    headers: { Authorization: `Bearer ${accessToken}` },
+  });
+
+  return readJson<AuthUser>(response);
+}

package/client/platform/src/auth/types.ts

@@ -0,0 +1,18 @@
+export interface AuthToken {
+  access_token: string;
+  token_type: string;
+  user_id: string;
+}
+
+export interface AuthUser {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: string;
+}
+
+export interface LoginCommand {
+  email: string;
+  password: string;
+}

package/client/platform/src/components/AppShell.tsx

@@ -0,0 +1,59 @@
+import { Bell, Search } from "lucide-react";
+import { NavLink, Outlet } from "react-router-dom";
+
+import { useAuth } from "@/auth/AuthProvider";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { appTheme } from "@/theme";
+import { appThemeVars } from "@/theme-vars";
+
+const navItems = [
+  { to: "/", label: "Overview" },
+  { to: "/orders", label: "Orders" },
+];
+
+export function AppShell() {
+  const { logout, user } = useAuth();
+
+  return (
+    <div className="min-h-screen bg-[var(--app-shell-bg)] text-[#22314d]" style={appThemeVars(appTheme)}>
+      <header className="border-b border-[var(--app-border)] bg-white">
+        <div className="mx-auto flex max-w-7xl items-center gap-6 px-6 py-4">
+          <div className="font-black tracking-[0.18em] text-[#16253f]">PRODUCT</div>
+          <nav className="flex items-center gap-2">
+            {navItems.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                end={item.to === "/"}
+                className={({ isActive }) =>
+                  `rounded-full px-4 py-2 text-sm font-semibold ${isActive ? "bg-[#eef2ff] text-[#223a82]" : "text-[#6b7890]"}`
+                }
+              >
+                {item.label}
+              </NavLink>
+            ))}
+          </nav>
+          <div className="ml-auto flex items-center gap-3">
+            <div className="relative w-[280px]">
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[#8d97a8]" />
+              <Input className="pl-9" placeholder="Search workspace" />
+            </div>
+            <button className="inline-flex h-10 w-10 items-center justify-center rounded-full border border-[var(--app-border)] bg-white">
+              <Bell className="h-4 w-4 text-[#5f6e86]" />
+            </button>
+            <div className="hidden rounded-full bg-[#f7f9fc] px-4 py-2 text-sm font-semibold text-[#314157] md:block">
+              {user?.name ?? user?.email}
+            </div>
+            <Button variant="outline" onClick={logout}>
+              Log out
+            </Button>
+          </div>
+        </div>
+      </header>
+      <main className="mx-auto max-w-7xl px-6 py-6">
+        <Outlet />
+      </main>
+    </div>
+  );
+}

package/client/platform/src/components/ui/button.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-[#1f3a8a] text-white hover:bg-[#15306f]",
+        secondary: "bg-[#eef2ff] text-[#22314d] hover:bg-[#dfe6fb]",
+        outline: "border border-[var(--app-border)] bg-white text-[#314157] hover:bg-[#f7f9fc]",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 px-3",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, ...props }, ref) => {
+  return <button ref={ref} className={cn(buttonVariants({ variant, size }), className)} {...props} />;
+});
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/client/platform/src/components/ui/card.tsx

@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "react";
+
+import { cn } from "@/lib/cn";
+
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("rounded-[var(--app-card-radius)] border border-[var(--app-border)] bg-white", className)} {...props} />;
+}

package/client/platform/src/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/cn";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
+  return (
+    <input
+      ref={ref}
+      className={cn(
+        "flex h-10 w-full rounded-md border border-[var(--app-border)] bg-white px-3 py-2 text-sm text-[#22314d] outline-none placeholder:text-[#8d97a8] focus:ring-2 focus:ring-[#bfd0ff]",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+Input.displayName = "Input";
+
+export { Input };

package/client/platform/src/lib/cn.ts

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

package/client/platform/src/lib/specRouteCatalog.json

@@ -0,0 +1,23 @@
+[
+  {
+    "id": "TMP_001",
+    "route": "/",
+    "binding": "direct",
+    "notes": ["Primary signed-in workspace route."],
+    "tags": ["shell"]
+  },
+  {
+    "id": "TMP_002",
+    "route": "/orders",
+    "binding": "direct",
+    "notes": ["Collection route for the order table."],
+    "tags": ["table"]
+  },
+  {
+    "id": "TMP_003",
+    "route": "/login",
+    "binding": "direct",
+    "notes": ["Unauthenticated entry route."],
+    "tags": ["public"]
+  }
+]

package/client/platform/src/lib/specScreens.json

@@ -0,0 +1,17 @@
+[
+  {
+    "id": "TMP_001",
+    "title": "Dashboard",
+    "tags": ["core", "workspace"]
+  },
+  {
+    "id": "TMP_002",
+    "title": "Orders",
+    "tags": ["operations", "list"]
+  },
+  {
+    "id": "TMP_003",
+    "title": "Login",
+    "tags": ["auth"]
+  }
+]

package/client/platform/src/main.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+
+import { AuthProvider } from "@/auth/AuthProvider";
+import { App } from "./app/App";
+import "./styles/globals.css";
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <AuthProvider>
+      <BrowserRouter>
+        <App />
+      </BrowserRouter>
+    </AuthProvider>
+  </React.StrictMode>,
+);

package/client/platform/src/pages/DashboardPage.tsx

@@ -0,0 +1,158 @@
+import { useEffect, useState } from "react";
+
+import { useAuth } from "@/auth/AuthProvider";
+import { fetchOrderOverview, type OrderOverviewResponse } from "@/api/orders";
+import { Card } from "@/components/ui/card";
+
+export function DashboardPage() {
+  const { token } = useAuth();
+  const [overview, setOverview] = useState<OrderOverviewResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!token?.access_token) {
+      return;
+    }
+
+    let cancelled = false;
+
+    setLoading(true);
+    setError(null);
+
+    fetchOrderOverview(token.access_token)
+      .then((response) => {
+        if (!cancelled) {
+          setOverview(response);
+        }
+      })
+      .catch((nextError: Error) => {
+        if (!cancelled) {
+          setError(nextError.message);
+          setOverview(null);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [token?.access_token]);
+
+  const recentActivity = overview?.recent_activity ?? [];
+  const selectedOrder = overview?.selected_order;
+
+  return (
+    <div className="grid gap-6 xl:grid-cols-[1fr_var(--app-panel-width)]">
+      <div className="space-y-6">
+        <section className="grid gap-4 md:grid-cols-3">
+          {(overview?.stats ?? []).map((stat) => (
+            <Card key={stat.label} className="p-[var(--app-card-padding)]">
+              <p className="text-sm text-[var(--app-muted)]">{stat.label}</p>
+              <p className={`mt-3 text-3xl font-bold ${stat.tone ?? "text-[#22314d]"}`}>{stat.value}</p>
+            </Card>
+          ))}
+          {loading && !overview ? (
+            <Card className="p-[var(--app-card-padding)] md:col-span-3">
+              <p className="text-sm text-[var(--app-muted)]">Overview</p>
+              <p className="mt-3 text-lg font-semibold text-[#22314d]">Loading dashboard data...</p>
+            </Card>
+          ) : null}
+          {error ? (
+            <Card className="p-[var(--app-card-padding)] md:col-span-3">
+              <p className="text-sm text-[var(--app-muted)]">Overview</p>
+              <p className="mt-3 text-lg font-semibold text-[var(--app-danger)]">{error}</p>
+            </Card>
+          ) : null}
+        </section>
+
+        <Card className="overflow-hidden">
+          <div className="p-[var(--app-card-padding)]">
+            <h2 className="text-lg font-bold">Recent activity</h2>
+          </div>
+          <table className="w-full border-collapse text-sm">
+            <thead className="bg-[#f8fafe] text-left text-[#516174]">
+              <tr>
+                {["Order", "Date", "Customer", "Status"].map((cell) => (
+                  <th key={cell} className="border-y border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)] font-semibold">
+                    {cell}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {loading && !recentActivity.length ? (
+                <tr>
+                  <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)] text-[var(--app-muted)]" colSpan={4}>
+                    Recent activity is loading.
+                  </td>
+                </tr>
+              ) : null}
+              {error ? (
+                <tr>
+                  <td
+                    className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)] text-[var(--app-danger)]"
+                    colSpan={4}
+                  >
+                    {error}
+                  </td>
+                </tr>
+              ) : null}
+              {!loading && !error && !recentActivity.length ? (
+                <tr>
+                  <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)] text-[var(--app-muted)]" colSpan={4}>
+                    No recent activity found.
+                  </td>
+                </tr>
+              ) : null}
+              {recentActivity.map((row) => (
+                <tr key={row.order_id}>
+                  <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)] text-[var(--app-accent)]">
+                    {row.order_id}
+                  </td>
+                  <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)]">{row.date}</td>
+                  <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)]">{row.customer}</td>
+                  <td className="border-b border-[var(--app-border)] px-[var(--app-table-cell-px)] py-[var(--app-table-cell-py)]">
+                    <span className={row.status === "At risk" ? "text-[var(--app-danger)]" : ""}>{row.status}</span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Card>
+      </div>
+
+      <Card className="p-[var(--app-card-padding)]">
+        <h2 className="text-lg font-bold">Selected detail</h2>
+        {loading && !selectedOrder ? <p className="mt-5 text-sm text-[var(--app-muted)]">Loading selected order...</p> : null}
+        {error ? <p className="mt-5 text-sm font-semibold text-[var(--app-danger)]">{error}</p> : null}
+        {selectedOrder ? (
+          <div className="mt-5 space-y-4 text-sm">
+            <div>
+              <p className="text-[var(--app-muted)]">Product</p>
+              <p className="mt-1 font-semibold">{selectedOrder.product_name}</p>
+            </div>
+            <div>
+              <p className="text-[var(--app-muted)]">Customer</p>
+              <p className="mt-1 font-semibold">{selectedOrder.customer_name}</p>
+            </div>
+            <div>
+              <p className="text-[var(--app-muted)]">Status</p>
+              <p className={`mt-1 font-semibold ${selectedOrder.status === "At risk" ? "text-[var(--app-danger)]" : "text-[#314157]"}`}>
+                {selectedOrder.status}
+              </p>
+            </div>
+            <div>
+              <p className="text-[var(--app-muted)]">Amount</p>
+              <p className="mt-1 font-semibold">{selectedOrder.amount}</p>
+            </div>
+          </div>
+        ) : null}
+      </Card>
+    </div>
+  );
+}