agentic-dev 0.1.0 → 0.2.0

package/client/mobile/src/pages/ShippingPage.tsx

@@ -0,0 +1,338 @@
+import { AlertTriangle, ArrowUpRight, CircleCheckBig, Truck } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+import {
+  fetchShipments,
+  fetchShippingOverview,
+  updateShipmentStatus,
+  type ShipmentSummary,
+  type ShippingOverviewResponse,
+} from "@/api/shipping";
+import { useAuth } from "@/auth/AuthProvider";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+
+function shippingStatusClassName(status: string) {
+  if (status === "Delivered") {
+    return "bg-[#dff3ec] text-[var(--in-accent)]";
+  }
+  if (status === "Delayed") {
+    return "bg-[#ffe2d7] text-[#c4663a]";
+  }
+  if (status === "Out for delivery") {
+    return "bg-[#e9f4ff] text-[#245f92]";
+  }
+
+  return "bg-[#fff0d8] text-[#b56a1f]";
+}
+
+function shippingActionPayload(status: string) {
+  if (status === "Delayed") {
+    return {
+      label: "재개",
+      body: {
+        status: "In transit",
+        last_event: "재배차 완료",
+        eta: "2026.03.14 20:30",
+      },
+      variant: "secondary" as const,
+    };
+  }
+
+  if (status === "Delivered") {
+    return null;
+  }
+
+  return {
+    label: "완료",
+    body: {
+      status: "Delivered",
+      last_event: "고객 인수 완료",
+      eta: "2026.03.14 19:10",
+    },
+    variant: "default" as const,
+  };
+}
+
+export function ShippingPage() {
+  const { token } = useAuth();
+  const [overview, setOverview] = useState<ShippingOverviewResponse | null>(null);
+  const [shipments, setShipments] = useState<ShipmentSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [pendingShipmentId, setPendingShipmentId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const accessToken = token?.access_token;
+    if (!accessToken) {
+      return;
+    }
+    const currentAccessToken = accessToken;
+
+    let cancelled = false;
+
+    async function loadShippingData() {
+      setLoading(true);
+      setError(null);
+
+      try {
+        const [overviewResponse, shipmentResponse] = await Promise.all([
+          fetchShippingOverview(currentAccessToken),
+          fetchShipments(currentAccessToken),
+        ]);
+        if (!cancelled) {
+          setOverview(overviewResponse);
+          setShipments(shipmentResponse);
+        }
+      } catch (nextError) {
+        if (!cancelled) {
+          const message =
+            nextError instanceof Error ? nextError.message : "Request failed";
+          setError(message);
+          setOverview(null);
+          setShipments([]);
+        }
+      } finally {
+        if (!cancelled) {
+          setLoading(false);
+        }
+      }
+    }
+
+    void loadShippingData();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [token?.access_token]);
+
+  async function handleShipmentAction(shipment: ShipmentSummary) {
+    const accessToken = token?.access_token;
+    if (!accessToken) {
+      return;
+    }
+
+    const action = shippingActionPayload(shipment.status);
+    if (!action) {
+      return;
+    }
+
+    setPendingShipmentId(shipment.shipment_id);
+    setError(null);
+
+    try {
+      await updateShipmentStatus(
+        shipment.shipment_id,
+        accessToken,
+        action.body,
+      );
+      const [overviewResponse, shipmentResponse] = await Promise.all([
+        fetchShippingOverview(accessToken),
+        fetchShipments(accessToken),
+      ]);
+      setOverview(overviewResponse);
+      setShipments(shipmentResponse);
+    } catch (nextError) {
+      const message =
+        nextError instanceof Error ? nextError.message : "Request failed";
+      setError(message);
+    } finally {
+      setPendingShipmentId(null);
+    }
+  }
+
+  return (
+    <div className="grid gap-6 xl:grid-cols-[1fr_320px]">
+      <Card className="overflow-hidden shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
+        <div className="border-b border-[var(--in-border)] px-6 py-5">
+          <div className="flex flex-wrap items-start justify-between gap-4">
+            <div>
+              <h2 className="text-xl font-black text-[var(--in-text)]">
+                Shipping operations
+              </h2>
+              <p className="mt-2 text-sm text-[var(--in-muted)]">
+                출고 이후 배송 상태, ETA, 마지막 이벤트를 운영자가 바로 갱신하는
+                downstream 배송 surface다.
+              </p>
+            </div>
+            <Link
+              className="inline-flex items-center gap-2 rounded-full bg-[var(--in-accent-soft)] px-3 py-2 text-sm font-semibold text-[var(--in-accent)]"
+              to="/fulfillment"
+            >
+              Fulfillment board
+              <ArrowUpRight className="h-4 w-4" />
+            </Link>
+          </div>
+        </div>
+
+        <table className="w-full border-collapse text-sm">
+          <thead className="bg-[#faf6ef] text-left text-[var(--in-muted)]">
+            <tr>
+              {["Shipment", "Carrier", "Status", "ETA", "Action"].map((cell) => (
+                <th
+                  key={cell}
+                  className="border-b border-[var(--in-border)] px-6 py-4 font-semibold"
+                >
+                  {cell}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr>
+                <td
+                  className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-muted)]"
+                  colSpan={5}
+                >
+                  배송 shipment를 불러오는 중입니다.
+                </td>
+              </tr>
+            ) : null}
+            {error ? (
+              <tr>
+                <td
+                  className="border-b border-[var(--in-border)] px-6 py-4 text-[#9d4d26]"
+                  colSpan={5}
+                >
+                  {error}
+                </td>
+              </tr>
+            ) : null}
+            {!loading && !error && !shipments.length ? (
+              <tr>
+                <td
+                  className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-muted)]"
+                  colSpan={5}
+                >
+                  현재 표시할 shipment가 없습니다.
+                </td>
+              </tr>
+            ) : null}
+            {shipments.map((shipment) => {
+              const action = shippingActionPayload(shipment.status);
+              return (
+                <tr key={shipment.shipment_id}>
+                  <td className="border-b border-[var(--in-border)] px-6 py-4">
+                    <div className="font-semibold text-[var(--in-accent)]">
+                      {shipment.shipment_id}
+                    </div>
+                    <div className="mt-1 text-xs text-[var(--in-muted)]">
+                      {shipment.order_id} · {shipment.destination}
+                    </div>
+                    <div className="mt-1 text-xs text-[var(--in-muted)]">
+                      {shipment.tracking_number}
+                    </div>
+                  </td>
+                  <td className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-muted)]">
+                    <div className="font-semibold text-[var(--in-text)]">
+                      {shipment.carrier}
+                    </div>
+                    <div className="mt-1 text-xs">{shipment.last_event}</div>
+                  </td>
+                  <td className="border-b border-[var(--in-border)] px-6 py-4">
+                    <span
+                      className={`rounded-full px-3 py-1 text-xs font-semibold ${shippingStatusClassName(
+                        shipment.status,
+                      )}`}
+                    >
+                      {shipment.status}
+                    </span>
+                  </td>
+                  <td className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-text)]">
+                    {shipment.eta}
+                  </td>
+                  <td className="border-b border-[var(--in-border)] px-6 py-4">
+                    {action ? (
+                      <Button
+                        size="sm"
+                        variant={action.variant}
+                        disabled={pendingShipmentId === shipment.shipment_id}
+                        onClick={() => void handleShipmentAction(shipment)}
+                      >
+                        {pendingShipmentId === shipment.shipment_id
+                          ? "처리 중"
+                          : action.label}
+                      </Button>
+                    ) : (
+                      <span className="text-xs font-semibold text-[var(--in-muted)]">
+                        종료됨
+                      </span>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </Card>
+
+      <div className="space-y-6">
+        <Card className="p-6 shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
+          <p className="text-sm font-semibold uppercase tracking-[0.16em] text-[var(--in-accent)]">
+            Shipping pulse
+          </p>
+          <p className="mt-3 text-2xl font-black text-[var(--in-text)]">
+            {overview?.highlighted_route ?? "Route unavailable"}
+          </p>
+          <div className="mt-6 grid gap-3">
+            {(overview?.stats ?? []).map((stat) => (
+              <div
+                key={stat.label}
+                className="rounded-[22px] border border-[var(--in-border)] bg-white px-4 py-4"
+              >
+                <div className="flex items-center justify-between gap-3">
+                  <span className="text-sm text-[var(--in-muted)]">
+                    {stat.label}
+                  </span>
+                  {stat.label === "지연" ? (
+                    <AlertTriangle className="h-4 w-4 text-[#c4663a]" />
+                  ) : stat.label === "오늘 완료" ? (
+                    <CircleCheckBig className="h-4 w-4 text-[#245f92]" />
+                  ) : (
+                    <Truck className="h-4 w-4 text-[var(--in-accent)]" />
+                  )}
+                </div>
+                <div className="mt-3 text-2xl font-black text-[var(--in-text)]">
+                  {stat.value}
+                </div>
+              </div>
+            ))}
+            {loading && !overview ? (
+              <div className="text-sm text-[var(--in-muted)]">
+                배송 overview를 불러오는 중입니다.
+              </div>
+            ) : null}
+          </div>
+        </Card>
+
+        <Card className="p-6 shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
+          <h2 className="text-xl font-black text-[var(--in-text)]">
+            Carrier load
+          </h2>
+          <div className="mt-5 space-y-3">
+            {!loading && !error && !(overview?.carriers.length ?? 0) ? (
+              <div className="text-sm text-[var(--in-muted)]">
+                표시할 carrier 데이터가 없습니다.
+              </div>
+            ) : null}
+            {(overview?.carriers ?? []).map((carrier) => (
+              <div
+                key={carrier.label}
+                className="rounded-[22px] border border-[var(--in-border)] bg-white px-4 py-4"
+              >
+                <div className="font-semibold text-[var(--in-text)]">
+                  {carrier.label}
+                </div>
+                <div className="mt-1 text-sm text-[var(--in-muted)]">
+                  {carrier.value}
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,23 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: "SUIT", "Pretendard", "Apple SD Gothic Neo", sans-serif;
+  color: #1f2c45;
+  background: #f4f7fb;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}

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

@@ -0,0 +1,16 @@
+import type { CSSProperties } from "react";
+
+import type { InTheme } from "./theme";
+
+export function inThemeVars(theme: InTheme): CSSProperties {
+  return {
+    "--in-shell-bg": theme.shellBg,
+    "--in-panel-bg": theme.panelBg,
+    "--in-border": theme.border,
+    "--in-accent": theme.accent,
+    "--in-accent-soft": theme.accentSoft,
+    "--in-muted": theme.muted,
+    "--in-text": theme.text,
+    "--in-card-radius": theme.cardRadius,
+  } as CSSProperties;
+}

package/client/mobile/src/theme.ts

@@ -0,0 +1,21 @@
+export type InTheme = {
+  shellBg: string;
+  panelBg: string;
+  border: string;
+  accent: string;
+  accentSoft: string;
+  muted: string;
+  text: string;
+  cardRadius: string;
+};
+
+export const inTheme: InTheme = {
+  shellBg: "#f4efe6",
+  panelBg: "#fffdf8",
+  border: "#e7dccb",
+  accent: "#18705c",
+  accentSoft: "#dff3ec",
+  muted: "#6f665b",
+  text: "#203029",
+  cardRadius: "24px",
+};

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

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

package/client/mobile/tailwind.config.js

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

package/client/mobile/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/mobile/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/platform/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.env

package/client/platform/.env.example

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

package/client/platform/Dockerfile

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

package/client/platform/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/platform/package.json ./client/platform/package.json
+
+RUN pnpm install --frozen-lockfile --filter @do4ai/client-platform-template...
+
+COPY client/platform ./client/platform
+
+WORKDIR /app/client/platform
+
+EXPOSE 3001
+
+CMD ["sh", "-lc", "pnpm exec vite --host 0.0.0.0 --port ${PORT:-3001}"]

package/client/platform/README.md

@@ -0,0 +1,47 @@
+# platform
+
+일반 사용자용 제품 앱 보일러플레이트다.
+
+포함 패턴:
+
+- 상단 shell + workspace content
+- KPI cards
+- searchable list/table
+- detail side panel
+- CSS variable 기반 theme surface
+
+시작:
+
+```bash
+npm install
+npm run dev
+```
+
+기본 DEV 포트는 `3001`이다.
+
+복제 직후 초기화:
+
+```bash
+npm run ui:parity:init
+```
+
+이 단계는 repo-level contract, `ui_parity_platform_contract.yaml`, route-gap manifest를 생성한다.
+
+첫 proof 부트스트랩:
+
+```bash
+npm run ui:parity:bootstrap
+```
+
+이 단계는 build, preview, reference materialization, route-gap gate, proof gate까지 한 번에 수행한다.
+
+패리티/하네스:
+
+```bash
+npm run ui:parity:scaffold
+npm run ui:parity:materialize-references
+npm run ui:parity:route-gap
+npm run ui:parity:proof
+```
+
+이 템플릿은 repo root의 `sdd/99_toolchain/01_automation` 도구를 사용하고, `client/platform/scripts/ui-parity-platform-adapter.mjs`는 앱별 adapter 예시다.

package/client/platform/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-platform template</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/client/platform/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@do4ai/client-platform-template",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "packageManager": "pnpm@10.32.0",
+  "scripts": {
+    "dev": "vite --host 0.0.0.0 --port 3001",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview --host 0.0.0.0 --port 4301",
+    "ui:parity:init": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/init_frontend_parity.sh ../.. platform",
+    "ui:parity:bootstrap": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/bootstrap_frontend_parity.sh ../.. platform",
+    "ui:parity:scaffold": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/run_frontend_target.sh scaffold ../.. platform",
+    "ui:parity:materialize-references": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/run_frontend_target.sh materialize_references ../.. platform",
+    "ui:parity:route-gap": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/run_frontend_target.sh route_gap ../.. platform",
+    "ui:parity:proof": "bash ../../sdd/99_toolchain/01_automation/agentic-dev/run_frontend_target.sh proof ../.. platform",
+    "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/platform/postcss.config.js

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

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

@@ -0,0 +1,66 @@
+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-platform",
+  targetBaseUrl: "http://127.0.0.1:4301",
+  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", "platform"],
+  })),
+  async preparePage(page, { route }) {
+    await page.route("**/auth/me", async (routeRequest) => {
+      await routeRequest.fulfill({
+        status: 200,
+        contentType: "application/json",
+        body: JSON.stringify({
+          id: "tmpl-platform",
+          name: "Template Platform User",
+          email: "operator@example.com",
+          role: "member",
+        }),
+      });
+    });
+    await page.addInitScript(() => {
+      window.localStorage.setItem(
+        "platform.auth.token",
+        JSON.stringify({
+          access_token: "template-access-token",
+          token_type: "bearer",
+          user_id: "tmpl-platform",
+        }),
+      );
+    });
+    if (route === "/login") {
+      await page.addInitScript(() => {
+        window.localStorage.removeItem("platform.auth.token");
+      });
+    }
+  },
+  async waitForReady(page) {
+    await page.waitForLoadState("networkidle");
+  },
+  async resolveMaskRects() {
+    return [];
+  },
+};