agentic-dev 0.2.9 → 0.2.11

package/client/web/src/api/client.ts

@@ -1,30 +0,0 @@
-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/web/src/api/orders.ts

@@ -1,42 +0,0 @@
-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/web/src/app/App.tsx

@@ -1,21 +0,0 @@
-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/web/src/auth/AuthProvider.tsx

@@ -1,122 +0,0 @@
-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 = "web.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/web/src/auth/ProtectedRoute.tsx

@@ -1,22 +0,0 @@
-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/web/src/auth/auth-client.ts

@@ -1,38 +0,0 @@
-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/web/src/auth/types.ts

@@ -1,18 +0,0 @@
-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/web/src/components/AppShell.tsx

@@ -1,59 +0,0 @@
-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/web/src/components/ui/button.tsx

@@ -1,35 +0,0 @@
-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/web/src/components/ui/card.tsx

@@ -1,7 +0,0 @@
-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/web/src/components/ui/input.tsx

@@ -1,21 +0,0 @@
-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/web/src/lib/cn.ts

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

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

@@ -1,23 +0,0 @@
-[
-  {
-    "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/web/src/lib/specScreens.json

@@ -1,17 +0,0 @@
-[
-  {
-    "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/web/src/main.tsx

@@ -1,17 +0,0 @@
-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/web/src/pages/DashboardPage.tsx

@@ -1,158 +0,0 @@
-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>
-  );
-}