agentic-dev 0.1.0 → 0.2.0

package/client/landing/src/pages/LandingWorkspacePage.tsx

@@ -0,0 +1,126 @@
+import { useEffect, useState } from "react";
+
+import {
+  fetchCatalogProducts,
+  type CatalogProductSummary,
+} from "@/api/catalog";
+import { useAuth } from "@/auth/AuthProvider";
+
+function productStateClassName(state: string) {
+  if (state === "active") {
+    return "bg-[var(--landing-accent-soft)] text-[var(--landing-accent)]";
+  }
+  if (state === "draft") {
+    return "bg-[#fff2e4] text-[#b46c35]";
+  }
+
+  return "bg-[#efe4d7] text-[#7f5b39]";
+}
+
+export function LandingWorkspacePage() {
+  const { token, user } = useAuth();
+  const [products, setProducts] = useState<CatalogProductSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    setLoading(true);
+    setError(null);
+
+    fetchCatalogProducts(token?.access_token)
+      .then((response) => {
+        if (!cancelled) {
+          setProducts(response);
+        }
+      })
+      .catch((nextError: Error) => {
+        if (!cancelled) {
+          setError(nextError.message);
+          setProducts([]);
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [token?.access_token]);
+
+  const highlightedProduct = products[0];
+
+  return (
+    <section className="mx-auto max-w-6xl px-6 py-10">
+      <div className="grid gap-4 lg:grid-cols-[1.2fr_0.8fr]">
+        <div className="rounded-[32px] border border-[#eadbcb] bg-white p-8 shadow-[0_20px_50px_rgba(123,78,42,0.08)]">
+          <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--landing-accent)]">Protected workspace</p>
+          <h1 className="mt-4 text-3xl font-black tracking-[-0.04em] text-[#2c261f]">인증된 사용자 전용 셸</h1>
+          <p className="mt-4 max-w-2xl text-base leading-8 text-[var(--landing-muted)]">
+            이 화면은 저장된 토큰으로 `auth/me` 검증이 끝난 뒤에만 열립니다. 랜딩 템플릿에서도 보호 라우트와 간단한 멤버 셸을 바로 사용할 수 있습니다.
+          </p>
+          <div className="mt-8 rounded-[24px] bg-[#fff7f0] p-6">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <p className="text-sm text-[var(--landing-muted)]">Catalog sync</p>
+                <p className="mt-2 text-2xl font-black text-[#2c261f]">{loading ? "..." : `${products.length} products`}</p>
+              </div>
+              {highlightedProduct ? (
+                <span className={`rounded-full px-3 py-1 text-xs font-semibold uppercase ${productStateClassName(highlightedProduct.status)}`}>
+                  {highlightedProduct.status}
+                </span>
+              ) : null}
+            </div>
+            {error ? <p className="mt-4 text-sm font-semibold text-[#b85b2a]">{error}</p> : null}
+            {!error ? <p className="mt-4 text-sm leading-7 text-[var(--landing-muted)]">{loading ? "Loading product catalog..." : highlightedProduct?.name ?? "No catalog products available."}</p> : null}
+          </div>
+        </div>
+        <div className="rounded-[32px] bg-[#2c261f] p-8 text-white">
+          <p className="text-sm text-white/65">Current member</p>
+          <p className="mt-4 text-2xl font-black">{user?.name}</p>
+          <dl className="mt-6 space-y-4 text-sm">
+            <div>
+              <dt className="text-white/55">Email</dt>
+              <dd className="mt-1 font-semibold">{user?.email}</dd>
+            </div>
+            <div>
+              <dt className="text-white/55">Role</dt>
+              <dd className="mt-1 font-semibold">{user?.role}</dd>
+            </div>
+            <div>
+              <dt className="text-white/55">Status</dt>
+              <dd className="mt-1 font-semibold">{user?.status}</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-4 md:grid-cols-3">
+        {loading ? (
+          <div className="rounded-[28px] border border-[#eadbcb] bg-white p-6 md:col-span-3">
+            <p className="text-sm text-[var(--landing-muted)]">Loading live workspace products...</p>
+          </div>
+        ) : null}
+        {!loading && !error && !products.length ? (
+          <div className="rounded-[28px] border border-[#eadbcb] bg-white p-6 md:col-span-3">
+            <p className="text-sm text-[var(--landing-muted)]">There are no products to display in the workspace.</p>
+          </div>
+        ) : null}
+        {products.map((product) => (
+          <div key={product.id} className="rounded-[28px] border border-[#eadbcb] bg-white p-6 shadow-[0_16px_42px_rgba(123,78,42,0.06)]">
+            <div className="flex items-center justify-between gap-3">
+              <p className="text-sm text-[var(--landing-muted)]">{product.id}</p>
+              <span className={`rounded-full px-3 py-1 text-xs font-semibold uppercase ${productStateClassName(product.status)}`}>{product.status}</span>
+            </div>
+            <p className="mt-4 text-xl font-bold text-[#2c261f]">{product.name}</p>
+            <p className="mt-2 text-sm text-[var(--landing-muted)]">{product.brand}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}

package/client/landing/src/styles/globals.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  color-scheme: light;
+  font-family: "SUIT", "Pretendard", "Noto Sans KR", sans-serif;
+}
+
+body {
+  margin: 0;
+  background: var(--landing-bg, #f6f1e9);
+}
+
+* {
+  box-sizing: border-box;
+}

package/client/landing/src/theme-vars.ts

@@ -0,0 +1,16 @@
+import type { CSSProperties } from "react";
+
+import type { LandingTheme } from "./theme";
+
+export function landingThemeVars(theme: LandingTheme): CSSProperties {
+  return {
+    "--landing-bg": theme.bg,
+    "--landing-text": theme.text,
+    "--landing-muted": theme.muted,
+    "--landing-accent": theme.accent,
+    "--landing-accent-soft": theme.accentSoft,
+    "--landing-card-radius": theme.cardRadius,
+    "--landing-section-gap": theme.sectionGap,
+    "--landing-hero-pad-y": theme.heroPadY,
+  } as CSSProperties;
+}

package/client/landing/src/theme.ts

@@ -0,0 +1,21 @@
+export type LandingTheme = {
+  bg: string;
+  text: string;
+  muted: string;
+  accent: string;
+  accentSoft: string;
+  cardRadius: string;
+  sectionGap: string;
+  heroPadY: string;
+};
+
+export const landingTheme: LandingTheme = {
+  bg: "#f6f1e9",
+  text: "#2e261e",
+  muted: "#726454",
+  accent: "#d36e3f",
+  accentSoft: "#f3d7c8",
+  cardRadius: "24px",
+  sectionGap: "24px",
+  heroPadY: "88px",
+};

package/client/landing/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/client/landing/tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ["./index.html", "./src/**/*.{ts,tsx}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

package/client/landing/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "references": []
+}

package/client/landing/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import { fileURLToPath, URL } from "node:url";
+
+export default defineConfig({
+  plugins: [react()],
+  resolve: {
+    alias: {
+      "@": fileURLToPath(new URL("./src", import.meta.url)),
+    },
+  },
+});

package/client/mobile/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+dist

package/client/mobile/.env.example

@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://127.0.0.1:8000/api/v1

package/client/mobile/Dockerfile

@@ -0,0 +1,16 @@
+FROM node:20-slim
+
+WORKDIR /app
+
+COPY pnpm-lock.yaml pnpm-workspace.yaml ./
+COPY client/mobile/package.json ./client/mobile/package.json
+
+RUN npm install -g pnpm@10.32.0 && pnpm install --filter @do4ai/client-mobile-template...
+
+COPY . .
+
+WORKDIR /app/client/mobile
+
+EXPOSE 3002
+
+CMD ["pnpm", "dev", "--host", "0.0.0.0", "--port", "3002"]

package/client/mobile/Dockerfile.dev

@@ -0,0 +1,18 @@
+FROM node:20-slim
+
+WORKDIR /app
+
+RUN npm install -g pnpm@10.32.0
+
+COPY pnpm-lock.yaml pnpm-workspace.yaml ./
+COPY client/mobile/package.json ./client/mobile/package.json
+
+RUN pnpm install --frozen-lockfile --filter @do4ai/client-mobile-template...
+
+COPY client/mobile ./client/mobile
+
+WORKDIR /app/client/mobile
+
+EXPOSE 3002
+
+CMD ["sh", "-lc", "pnpm exec vite --host 0.0.0.0 --port ${PORT:-3002}"]

package/client/mobile/README.md

@@ -0,0 +1,19 @@
+# mobile
+
+다국어 안내, 현장 운영, 파트너 협업 같은 `IN` 표면을 위한 프론트엔드 보일러플레이트다.
+
+포함 패턴:
+
+- 현장 운영형 header + workspace shell
+- KPI summary + action board
+- 서비스 현황 list/detail surface
+- CSS variable 기반 theme surface
+
+시작:
+
+```bash
+npm install
+npm run dev
+```
+
+기본 DEV 포트는 `3002`다.

package/client/mobile/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>client-mobile template</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/client/mobile/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@do4ai/client-mobile-template",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "packageManager": "pnpm@10.32.0",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 3002",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 4302",
+    "ui:parity:init": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/init_frontend_parity.sh ../.. mobile",
+    "ui:parity:bootstrap": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/bootstrap_frontend_parity.sh ../.. mobile",
+    "ui:parity:scaffold": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/run_frontend_target.sh scaffold ../.. mobile",
+    "ui:parity:materialize-references": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/run_frontend_target.sh materialize_references ../.. mobile",
+    "ui:parity:route-gap": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/run_frontend_target.sh route_gap ../.. mobile",
+    "ui:parity:proof": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/run_frontend_target.sh proof ../.. mobile",
+    "ui:parity": "npm run ui:parity:proof"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.576.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.30.1",
+    "tailwind-merge": "^3.5.0"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.58.2",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.7.0",
+    "autoprefixer": "^10.4.21",
+    "pixelmatch": "^7.1.0",
+    "pngjs": "^7.0.0",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.19",
+    "yaml": "^2.8.1"
+  }
+}

package/client/mobile/postcss.config.js

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

package/client/mobile/scripts/ui-parity-mobile-adapter.mjs

@@ -0,0 +1,67 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+const screens = JSON.parse(
+  fs.readFileSync(path.resolve(scriptDir, "../src/lib/specScreens.json"), "utf8"),
+);
+const routes = JSON.parse(
+  fs.readFileSync(path.resolve(scriptDir, "../src/lib/specRouteCatalog.json"), "utf8"),
+);
+
+const routeMap = new Map(routes.map((entry) => [entry.id, entry.route]));
+
+export default {
+  service: "templates-mobile",
+  targetBaseUrl: "http://127.0.0.1:4302",
+  viewport: {
+    width: 1440,
+    height: 1024,
+  },
+  screens: screens.map((screen) => ({
+    id: screen.id,
+    title: screen.title,
+    route: routeMap.get(screen.id) ?? "/",
+    referenceImage: `sdd/04_verify/10_test/ui_parity/reference/${screen.id}.png`,
+    readySelector: "body",
+    readyTimeoutMs: 10000,
+    tags: ["template", "mobile"],
+  })),
+  async preparePage(page, { route }) {
+    await page.route("**/auth/me", async (routeRequest) => {
+      await routeRequest.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          id: "tmpl-mobile",
+          name: "Template Mobile Operator",
+          email: "operator@example.com",
+          role: "operator",
+          status: "active",
+        }),
+      });
+    });
+    await page.addInitScript(() => {
+      window.localStorage.setItem(
+        "mobile.auth.token",
+        JSON.stringify({
+          access_token: "template-access-token",
+          token_type: "bearer",
+          user_id: "tmpl-mobile",
+        }),
+      );
+    });
+    if (route === "/login") {
+      await page.addInitScript(() => {
+        window.localStorage.removeItem("mobile.auth.token");
+      });
+    }
+  },
+  async waitForReady(page) {
+    await page.waitForLoadState("networkidle");
+  },
+  async resolveMaskRects() {
+    return [];
+  },
+};

package/client/mobile/src/App.tsx

@@ -0,0 +1 @@
+export { App } from "./app/App";

package/client/mobile/src/api/client.ts

@@ -0,0 +1,62 @@
+const API_BASE_URL =
+  (import.meta.env.VITE_API_BASE_URL as string | undefined)?.replace(/\/$/, "") ??
+  "";
+
+interface RequestOptions {
+  accessToken?: string;
+}
+
+interface WriteOptions extends RequestOptions {
+  body?: unknown;
+}
+
+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);
+}
+
+export async function apiPatch<T>(
+  path: string,
+  options?: WriteOptions,
+): Promise<T> {
+  const headers: Record<string, string> = {
+    "Content-Type": "application/json",
+  };
+
+  if (options?.accessToken) {
+    headers.Authorization = `Bearer ${options.accessToken}`;
+  }
+
+  const response = await fetch(`${API_BASE_URL}${path}`, {
+    method: "PATCH",
+    headers,
+    body: JSON.stringify(options?.body ?? {}),
+  });
+
+  return readJson<T>(response);
+}

package/client/mobile/src/api/fulfillment.ts

@@ -0,0 +1,55 @@
+import { apiGet } from "@/api/client";
+
+export interface FulfillmentStat {
+  label: string;
+  value: string;
+  tone?: string | null;
+}
+
+export interface FulfillmentTimelineItem {
+  time: string;
+  title: string;
+  tone: string;
+}
+
+export interface FulfillmentStageLoad {
+  label: string;
+  value: string;
+}
+
+export interface FulfillmentOverviewResponse {
+  throughput_total: string;
+  stats: FulfillmentStat[];
+  timeline: FulfillmentTimelineItem[];
+  stage_load: FulfillmentStageLoad[];
+}
+
+export interface FulfillmentTask {
+  id: string;
+  order_id: string;
+  title: string;
+  assignee: string;
+  stage: string;
+  status: string;
+  priority: string;
+  sla: string;
+}
+
+export interface FulfillmentNote {
+  id: string;
+  note: string;
+  emphasis: string;
+}
+
+export interface FulfillmentBoardResponse {
+  tasks: FulfillmentTask[];
+  notes: FulfillmentNote[];
+}
+
+export function fetchFulfillmentOverview(accessToken: string) {
+  return apiGet<FulfillmentOverviewResponse>("/fulfillment/overview", { accessToken });
+}
+
+export function fetchFulfillmentBoard(accessToken: string) {
+  return apiGet<FulfillmentBoardResponse>("/fulfillment/board", { accessToken });
+}

package/client/mobile/src/api/shipping.ts

@@ -0,0 +1,56 @@
+import { apiGet, apiPatch } from "@/api/client";
+
+export interface ShippingStat {
+  label: string;
+  value: string;
+  tone?: string | null;
+}
+
+export interface ShippingCarrierLoad {
+  label: string;
+  value: string;
+}
+
+export interface ShippingOverviewResponse {
+  stats: ShippingStat[];
+  carriers: ShippingCarrierLoad[];
+  highlighted_route: string;
+}
+
+export interface ShipmentSummary {
+  shipment_id: string;
+  order_id: string;
+  carrier: string;
+  destination: string;
+  tracking_number: string;
+  status: string;
+  eta: string;
+  last_event: string;
+}
+
+export interface ShipmentStatusTransition {
+  shipment_id: string;
+  previous_status: string;
+  status: string;
+  previous_last_event: string;
+  last_event: string;
+}
+
+export function fetchShippingOverview(accessToken: string) {
+  return apiGet<ShippingOverviewResponse>("/shipping/overview", { accessToken });
+}
+
+export function fetchShipments(accessToken: string) {
+  return apiGet<ShipmentSummary[]>("/shipping/shipments", { accessToken });
+}
+
+export function updateShipmentStatus(
+  shipmentId: string,
+  accessToken: string,
+  body: { status: string; last_event: string; eta?: string },
+) {
+  return apiPatch<ShipmentStatusTransition>(
+    `/shipping/shipments/${shipmentId}/status`,
+    { accessToken, body },
+  );
+}

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

@@ -0,0 +1,23 @@
+import { Route, Routes } from "react-router-dom";
+
+import { ProtectedRoute } from "@/auth/ProtectedRoute";
+import { InShell } from "@/components/InShell";
+import { DashboardPage } from "@/pages/DashboardPage";
+import { FulfillmentPage } from "@/pages/FulfillmentPage";
+import { LoginPage } from "@/pages/LoginPage";
+import { ShippingPage } from "@/pages/ShippingPage";
+
+export function App() {
+  return (
+    <Routes>
+      <Route path="/login" element={<LoginPage />} />
+      <Route element={<ProtectedRoute />}>
+        <Route element={<InShell />}>
+          <Route path="/" element={<DashboardPage />} />
+          <Route path="/fulfillment" element={<FulfillmentPage />} />
+          <Route path="/shipping" element={<ShippingPage />} />
+        </Route>
+      </Route>
+    </Routes>
+  );
+}