agentic-dev 0.2.10 → 0.2.12

package/client/mobile/src/lib/useSpeechRecognitionInput.ts

@@ -1,271 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-
-interface BrowserSpeechRecognitionAlternative {
-  transcript: string;
-}
-
-interface BrowserSpeechRecognitionResult {
-  isFinal: boolean;
-  length: number;
-  [index: number]: BrowserSpeechRecognitionAlternative;
-}
-
-interface BrowserSpeechRecognitionResultList {
-  length: number;
-  [index: number]: BrowserSpeechRecognitionResult;
-}
-
-interface BrowserSpeechRecognitionEvent extends Event {
-  resultIndex: number;
-  results: BrowserSpeechRecognitionResultList;
-}
-
-interface BrowserSpeechRecognitionErrorEvent extends Event {
-  error: string;
-}
-
-interface BrowserSpeechRecognition extends EventTarget {
-  continuous: boolean;
-  interimResults: boolean;
-  lang: string;
-  maxAlternatives: number;
-  onend: ((event: Event) => void) | null;
-  onerror: ((event: BrowserSpeechRecognitionErrorEvent) => void) | null;
-  onresult: ((event: BrowserSpeechRecognitionEvent) => void) | null;
-  onstart: ((event: Event) => void) | null;
-  abort: () => void;
-  start: () => void;
-  stop: () => void;
-}
-
-interface BrowserSpeechRecognitionConstructor {
-  new (): BrowserSpeechRecognition;
-}
-
-declare global {
-  interface Window {
-    SpeechRecognition?: BrowserSpeechRecognitionConstructor;
-    webkitSpeechRecognition?: BrowserSpeechRecognitionConstructor;
-  }
-}
-
-export interface SpeechRecognitionMessages {
-  applied: string;
-  errors: Partial<Record<string, string>>;
-  listening: string;
-  startFailed: string;
-  unsupported: string;
-}
-
-export interface UseSpeechRecognitionInputOptions {
-  lang?: string;
-  mergeTranscript?: (baseValue: string, transcript: string) => string;
-  messages?: Partial<SpeechRecognitionMessages>;
-  onValueChange: (nextValue: string) => void;
-  value: string;
-}
-
-export interface UseSpeechRecognitionInputResult {
-  abortListening: () => void;
-  clearStatus: () => void;
-  error: string | null;
-  feedback: string | null;
-  isListening: boolean;
-  isSupported: boolean;
-  startListening: () => void;
-  stopListening: () => void;
-  toggleListening: () => void;
-}
-
-const defaultSpeechRecognitionErrorMessages: Record<string, string> = {
-  "audio-capture": "사용 가능한 마이크를 찾지 못했어요. 기기 연결 상태를 확인해주세요.",
-  "network": "음성 인식 연결이 불안정해요. 네트워크 상태를 확인한 뒤 다시 시도해주세요.",
-  "no-speech": "음성이 들리지 않았어요. 조금 더 가까이에서 다시 말씀해주세요.",
-  "not-allowed": "마이크 권한이 필요해요. 브라우저 설정에서 마이크 접근을 허용해주세요.",
-  "service-not-allowed": "마이크 권한이 필요해요. 브라우저 설정에서 마이크 접근을 허용해주세요.",
-};
-
-const defaultSpeechRecognitionMessages: SpeechRecognitionMessages = {
-  applied: "음성 입력이 반영됐어요. 필요하면 바로 수정할 수 있어요.",
-  errors: defaultSpeechRecognitionErrorMessages,
-  listening: "듣는 중이에요. 말씀을 마치면 자동으로 입력돼요.",
-  startFailed: "음성 입력을 시작하지 못했어요. 잠시 후 다시 시도해주세요.",
-  unsupported: "현재 브라우저에서는 음성 입력을 지원하지 않아요. 외부 브라우저에서 다시 시도해주세요.",
-};
-
-function getSpeechRecognitionConstructor(): BrowserSpeechRecognitionConstructor | null {
-  if (typeof window === "undefined") {
-    return null;
-  }
-
-  return window.SpeechRecognition ?? window.webkitSpeechRecognition ?? null;
-}
-
-function resolveSpeechRecognitionMessages(messages?: Partial<SpeechRecognitionMessages>): SpeechRecognitionMessages {
-  return {
-    ...defaultSpeechRecognitionMessages,
-    ...messages,
-    errors: {
-      ...defaultSpeechRecognitionErrorMessages,
-      ...(messages?.errors ?? {}),
-    },
-  };
-}
-
-export function mergeSpeechRecognitionText(baseValue: string, transcript: string) {
-  const trimmedBaseValue = baseValue.trim();
-  const trimmedTranscript = transcript.trim();
-
-  if (!trimmedBaseValue) {
-    return trimmedTranscript;
-  }
-
-  if (!trimmedTranscript) {
-    return trimmedBaseValue;
-  }
-
-  return `${trimmedBaseValue} ${trimmedTranscript}`;
-}
-
-export function getSpeechRecognitionErrorMessage(error: string, messages?: Partial<Record<string, string>>) {
-  if (error === "aborted") {
-    return null;
-  }
-
-  return messages?.[error] ?? defaultSpeechRecognitionErrorMessages[error] ?? defaultSpeechRecognitionMessages.startFailed;
-}
-
-export function useSpeechRecognitionInput({
-  lang,
-  mergeTranscript = mergeSpeechRecognitionText,
-  messages,
-  onValueChange,
-  value,
-}: UseSpeechRecognitionInputOptions): UseSpeechRecognitionInputResult {
-  const recognitionRef = useRef<BrowserSpeechRecognition | null>(null);
-  const baseValueRef = useRef(value);
-  const valueRef = useRef(value);
-  const onValueChangeRef = useRef(onValueChange);
-  const [isListening, setIsListening] = useState(false);
-  const [feedback, setFeedback] = useState<string | null>(null);
-  const [error, setError] = useState<string | null>(null);
-  const isSupported = Boolean(getSpeechRecognitionConstructor());
-  const resolvedMessages = resolveSpeechRecognitionMessages(messages);
-
-  useEffect(() => {
-    valueRef.current = value;
-    onValueChangeRef.current = onValueChange;
-  }, [onValueChange, value]);
-
-  const clearStatus = useCallback(() => {
-    setError(null);
-    setFeedback(null);
-  }, []);
-
-  const abortListening = useCallback(() => {
-    recognitionRef.current?.abort();
-    recognitionRef.current = null;
-    setIsListening(false);
-    setFeedback(null);
-  }, []);
-
-  const stopListening = useCallback(() => {
-    recognitionRef.current?.stop();
-    setFeedback(null);
-  }, []);
-
-  const startListening = useCallback(() => {
-    if (recognitionRef.current) {
-      recognitionRef.current.abort();
-      recognitionRef.current = null;
-    }
-
-    const SpeechRecognition = getSpeechRecognitionConstructor();
-
-    if (!SpeechRecognition) {
-      setError(resolvedMessages.unsupported);
-      setFeedback(null);
-      setIsListening(false);
-      return;
-    }
-
-    const recognition = new SpeechRecognition();
-    recognition.lang = lang ?? (typeof navigator !== "undefined" && navigator.language ? navigator.language : "ko-KR");
-    recognition.continuous = false;
-    recognition.interimResults = true;
-    recognition.maxAlternatives = 1;
-    baseValueRef.current = valueRef.current;
-
-    recognition.onstart = () => {
-      setIsListening(true);
-      setError(null);
-      setFeedback(resolvedMessages.listening);
-    };
-
-    recognition.onresult = (event) => {
-      let transcript = "";
-      let hasFinalResult = false;
-
-      for (let index = event.resultIndex; index < event.results.length; index += 1) {
-        transcript += `${event.results[index][0].transcript} `;
-        hasFinalResult = hasFinalResult || event.results[index].isFinal;
-      }
-
-      onValueChangeRef.current(mergeTranscript(baseValueRef.current, transcript));
-      setError(null);
-      setFeedback(hasFinalResult ? resolvedMessages.applied : resolvedMessages.listening);
-    };
-
-    recognition.onerror = (event) => {
-      setIsListening(false);
-      recognitionRef.current = null;
-      setFeedback(null);
-      setError(getSpeechRecognitionErrorMessage(event.error, resolvedMessages.errors));
-    };
-
-    recognition.onend = () => {
-      setIsListening(false);
-      recognitionRef.current = null;
-    };
-
-    recognitionRef.current = recognition;
-
-    try {
-      recognition.start();
-    } catch {
-      recognitionRef.current = null;
-      setIsListening(false);
-      setFeedback(null);
-      setError(resolvedMessages.startFailed);
-    }
-  }, [lang, mergeTranscript, resolvedMessages]);
-
-  const toggleListening = useCallback(() => {
-    if (isListening) {
-      stopListening();
-      return;
-    }
-
-    startListening();
-  }, [isListening, startListening, stopListening]);
-
-  useEffect(
-    () => () => {
-      recognitionRef.current?.abort();
-      recognitionRef.current = null;
-    },
-    [],
-  );
-
-  return {
-    abortListening,
-    clearStatus,
-    error,
-    feedback,
-    isListening,
-    isSupported,
-    startListening,
-    stopListening,
-    toggleListening,
-  };
-}

package/client/mobile/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";
-import "./styles/globals.css";
-
-ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
-    <AuthProvider>
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </AuthProvider>
-  </React.StrictMode>,
-);

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

@@ -1,172 +0,0 @@
-import { useEffect, useState } from "react";
-import { ArrowUpRight, AlertTriangle, PackageCheck, Truck } from "lucide-react";
-import { Link } from "react-router-dom";
-
-import { useAuth } from "@/auth/AuthProvider";
-import {
-  fetchFulfillmentOverview,
-  type FulfillmentOverviewResponse,
-} from "@/api/fulfillment";
-import { Card } from "@/components/ui/card";
-
-const statIcons = {
-  "Open tasks": PackageCheck,
-  Blocked: AlertTriangle,
-  "Outbound ready": Truck,
-} as const;
-
-function timelineToneClassName(tone: string) {
-  if (tone === "success") {
-    return "bg-[#dff3ec] text-[var(--in-accent)]";
-  }
-  if (tone === "warning") {
-    return "bg-[#fff0d8] text-[#b56a1f]";
-  }
-
-  return "bg-[#e9f4ff] text-[#245f92]";
-}
-
-export function DashboardPage() {
-  const { token } = useAuth();
-  const [overview, setOverview] = useState<FulfillmentOverviewResponse | 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);
-
-    fetchFulfillmentOverview(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]);
-
-  return (
-    <div className="grid gap-6 xl:grid-cols-[1fr_320px]">
-      <div className="space-y-6">
-        <section className="rounded-[32px] bg-[linear-gradient(135deg,#fff7e8_0%,#f4efe6_45%,#e2f3ec_100%)] px-6 py-7">
-          <p className="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--in-accent)]">Daily relay</p>
-          <div className="mt-3 flex flex-wrap items-end justify-between gap-4">
-            <div className="max-w-2xl">
-              <h1 className="text-4xl font-black tracking-[-0.04em] text-[var(--in-text)]">주문 이행 상태와 예외 대응을 한 화면에서 이어붙이는 모바일 셸</h1>
-              <p className="mt-4 text-base leading-7 text-[var(--in-muted)]">
-                픽킹, 패킹, 예외 검토, 출고 준비까지 현재 이행 상태를 한눈에 보여주는 운영 모바일 surface다.
-              </p>
-            </div>
-            <div className="rounded-[28px] border border-white/70 bg-white/80 px-5 py-4 shadow-sm">
-              <p className="text-sm text-[var(--in-muted)]">Units in motion</p>
-              <p className="mt-2 text-3xl font-black text-[var(--in-accent)]">{loading && !overview ? "..." : `${overview?.throughput_total ?? "0"} units`}</p>
-            </div>
-          </div>
-          {error ? <p className="mt-4 text-sm font-semibold text-[#9d4d26]">{error}</p> : null}
-        </section>
-
-        <section className="grid gap-4 md:grid-cols-3">
-          {(overview?.stats ?? []).map((stat) => {
-            const Icon = statIcons[stat.label as keyof typeof statIcons] ?? PackageCheck;
-            return (
-              <Card key={stat.label} className="p-5 shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
-                <div className="flex items-start justify-between gap-4">
-                  <div>
-                    <p className="text-sm text-[var(--in-muted)]">{stat.label}</p>
-                    <p className="mt-3 text-3xl font-black text-[var(--in-text)]">{stat.value}</p>
-                  </div>
-                  <div className="rounded-2xl bg-[var(--in-accent-soft)] p-3 text-[var(--in-accent)]">
-                    <Icon className="h-5 w-5" />
-                  </div>
-                </div>
-              </Card>
-            );
-          })}
-          {loading && !overview ? (
-            <Card className="p-5 shadow-[0_18px_48px_rgba(25,54,46,0.06)] md:col-span-3">
-              <p className="text-sm text-[var(--in-muted)]">Overview</p>
-              <p className="mt-3 text-lg font-semibold text-[var(--in-text)]">서비스 현황을 불러오는 중입니다.</p>
-            </Card>
-          ) : null}
-        </section>
-
-        <Card className="p-6 shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
-          <div className="flex items-center justify-between gap-3">
-            <div>
-              <h2 className="text-xl font-black text-[var(--in-text)]">Relay timeline</h2>
-              <p className="mt-2 text-sm text-[var(--in-muted)]">이행 단계별 handoff와 예외 대응 이벤트를 시간축으로 배치한다.</p>
-            </div>
-            <div className="flex items-center gap-2">
-              <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="/shipping"
-              >
-                Shipping
-                <ArrowUpRight className="h-4 w-4" />
-              </Link>
-              <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
-                <ArrowUpRight className="h-4 w-4" />
-              </Link>
-            </div>
-          </div>
-
-          <div className="mt-6 grid gap-4 md:grid-cols-3">
-            {loading && !(overview?.timeline.length ?? 0) ? <div className="text-sm text-[var(--in-muted)] md:col-span-3">타임라인을 불러오는 중입니다.</div> : null}
-            {!loading && !error && !(overview?.timeline.length ?? 0) ? (
-              <div className="text-sm text-[var(--in-muted)] md:col-span-3">표시할 타임라인 이벤트가 없습니다.</div>
-            ) : null}
-            {(overview?.timeline ?? []).map((item) => (
-              <div key={item.time} className="rounded-[24px] border border-[var(--in-border)] bg-white p-5">
-                <div className={`inline-flex rounded-full px-3 py-1 text-xs font-semibold ${timelineToneClassName(item.tone)}`}>{item.time}</div>
-                <p className="mt-4 text-lg font-bold text-[var(--in-text)]">{item.title}</p>
-              </div>
-            ))}
-          </div>
-        </Card>
-      </div>
-
-      <Card className="p-6 shadow-[0_18px_48px_rgba(25,54,46,0.06)]">
-        <h2 className="text-xl font-black text-[var(--in-text)]">Stage load</h2>
-        <p className="mt-2 text-sm text-[var(--in-muted)]">현재 진행 중인 단계별 작업량과 병목 구간을 우선순위 큐로 보여준다.</p>
-
-        <div className="mt-6 space-y-4">
-          {loading && !(overview?.stage_load.length ?? 0) ? <div className="text-sm text-[var(--in-muted)]">단계별 적재량을 불러오는 중입니다.</div> : null}
-          {!loading && !error && !(overview?.stage_load.length ?? 0) ? <div className="text-sm text-[var(--in-muted)]">표시할 단계 데이터가 없습니다.</div> : null}
-          {(overview?.stage_load ?? []).map((entry) => (
-            <div key={entry.label}>
-              <div className="flex items-center justify-between text-sm">
-                <span className="font-semibold text-[var(--in-text)]">{entry.label}</span>
-                <span className="text-[var(--in-muted)]">{entry.value}</span>
-              </div>
-            </div>
-          ))}
-          {error ? <div className="text-sm font-semibold text-[#9d4d26]">{error}</div> : null}
-        </div>
-      </Card>
-    </div>
-  );
-}

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

@@ -1,138 +0,0 @@
-import { useEffect, useState } from "react";
-
-import { useAuth } from "@/auth/AuthProvider";
-import {
-  fetchFulfillmentBoard,
-  type FulfillmentBoardResponse,
-} from "@/api/fulfillment";
-import { Card } from "@/components/ui/card";
-
-function fulfillmentStatusClassName(status: string) {
-  if (status === "Completed") {
-    return "bg-[#dff3ec] text-[var(--in-accent)]";
-  }
-  if (status === "Blocked") {
-    return "bg-[#ffe2d7] text-[#c4663a]";
-  }
-  if (status === "In progress") {
-    return "bg-[#fff0d8] text-[#b56a1f]";
-  }
-
-  return "bg-[#efe7d8] text-[var(--in-muted)]";
-}
-
-export function FulfillmentPage() {
-  const { token } = useAuth();
-  const [board, setBoard] = useState<FulfillmentBoardResponse | 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);
-
-    fetchFulfillmentBoard(token.access_token)
-      .then((response) => {
-        if (!cancelled) {
-          setBoard(response);
-        }
-      })
-      .catch((nextError: Error) => {
-        if (!cancelled) {
-          setError(nextError.message);
-          setBoard(null);
-        }
-      })
-      .finally(() => {
-        if (!cancelled) {
-          setLoading(false);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [token?.access_token]);
-
-  return (
-    <div className="grid gap-6 xl:grid-cols-[1fr_300px]">
-      <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">
-          <h2 className="text-xl font-black text-[var(--in-text)]">Fulfillment board</h2>
-          <p className="mt-2 text-sm text-[var(--in-muted)]">작업 단위, 담당자, 단계, SLA를 한 번에 보여주는 이행 보드 surface다.</p>
-        </div>
-
-        <table className="w-full border-collapse text-sm">
-          <thead className="bg-[#faf6ef] text-left text-[var(--in-muted)]">
-            <tr>
-              {["Order", "Task", "Assignee", "Status", "SLA"].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}>
-                  이행 보드를 불러오는 중입니다.
-                </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 && !(board?.tasks.length ?? 0) ? (
-              <tr>
-                <td className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-muted)]" colSpan={5}>
-                  현재 표시할 작업이 없습니다.
-                </td>
-              </tr>
-            ) : null}
-            {(board?.tasks ?? []).map((task) => (
-              <tr key={task.id}>
-                <td className="border-b border-[var(--in-border)] px-6 py-4 font-semibold text-[var(--in-accent)]">{task.order_id}</td>
-                <td className="border-b border-[var(--in-border)] px-6 py-4">
-                  <div className="font-semibold text-[var(--in-text)]">{task.title}</div>
-                  <div className="mt-1 text-xs text-[var(--in-muted)]">
-                    {task.stage} · {task.priority}
-                  </div>
-                </td>
-                <td className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-muted)]">{task.assignee}</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 ${fulfillmentStatusClassName(task.status)}`}>{task.status}</span>
-                </td>
-                <td className="border-b border-[var(--in-border)] px-6 py-4 text-[var(--in-text)]">{task.sla}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </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)]">Fulfillment notes</h2>
-        <div className="mt-5 space-y-4">
-          {loading ? <div className="text-sm text-[var(--in-muted)]">노트를 불러오는 중입니다.</div> : null}
-          {error ? <div className="text-sm font-semibold text-[#9d4d26]">{error}</div> : null}
-          {!loading && !error && !(board?.notes.length ?? 0) ? <div className="text-sm text-[var(--in-muted)]">노트가 없습니다.</div> : null}
-          {(board?.notes ?? []).map((note) => (
-            <div key={note.id} className="rounded-[22px] border border-[var(--in-border)] bg-white px-4 py-4 text-sm leading-6 text-[var(--in-muted)]">
-              {note.note}
-            </div>
-          ))}
-        </div>
-      </Card>
-    </div>
-  );
-}

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

@@ -1,74 +0,0 @@
-import { useState } from "react";
-import { Navigate, useLocation } from "react-router-dom";
-
-import { useAuth } from "@/auth/AuthProvider";
-import { Button } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { inTheme } from "@/theme";
-import { inThemeVars } from "@/theme-vars";
-
-export function LoginPage() {
-  const { authenticating, login, user } = useAuth();
-  const location = useLocation();
-  const [email, setEmail] = useState("operator@example.com");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-
-  if (user) {
-    const destination = (location.state as { from?: { pathname?: string } } | null)?.from?.pathname ?? "/";
-    return <Navigate to={destination} replace />;
-  }
-
-  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    setError(null);
-
-    try {
-      await login({ email, password });
-    } catch (submitError) {
-      setError(submitError instanceof Error ? submitError.message : "로그인에 실패했습니다.");
-    }
-  }
-
-  return (
-    <div className="min-h-screen bg-[var(--in-shell-bg)] px-6 py-12 text-[var(--in-text)]" style={inThemeVars(inTheme)}>
-      <div className="mx-auto grid max-w-6xl gap-10 lg:grid-cols-[1.05fr_430px] lg:items-center">
-        <div>
-          <p className="inline-flex rounded-full bg-[var(--in-accent-soft)] px-4 py-2 text-sm font-semibold text-[var(--in-accent)]">
-            IN operator workspace
-          </p>
-          <h1 className="mt-6 text-5xl font-black tracking-[-0.05em]">상담 흐름과 운영 상태를 동시에 여는 로그인 템플릿</h1>
-          <p className="mt-5 max-w-xl text-lg leading-8 text-[var(--in-muted)]">
-            `VITE_API_BASE_URL/auth/login`으로 인증한 뒤 `auth/me`를 재호출해 권한과 사용자 surface를 맞춘다.
-          </p>
-        </div>
-
-        <Card className="p-7 shadow-[0_24px_70px_rgba(25,54,46,0.08)]">
-          <form className="space-y-5" onSubmit={handleSubmit}>
-            <div>
-              <p className="text-2xl font-black">Sign in to IN</p>
-              <p className="mt-2 text-sm text-[var(--in-muted)]">예시 계정은 `operator@example.com`이다.</p>
-            </div>
-
-            <label className="block space-y-2">
-              <span className="text-sm font-semibold">Email</span>
-              <Input type="email" value={email} onChange={(event) => setEmail(event.target.value)} required />
-            </label>
-
-            <label className="block space-y-2">
-              <span className="text-sm font-semibold">Password</span>
-              <Input type="password" value={password} onChange={(event) => setPassword(event.target.value)} required />
-            </label>
-
-            {error ? <p className="text-sm font-semibold text-[#c4663a]">{error}</p> : null}
-
-            <Button className="w-full" size="lg" type="submit" disabled={authenticating}>
-              {authenticating ? "Signing in..." : "Continue to IN"}
-            </Button>
-          </form>
-        </Card>
-      </div>
-    </div>
-  );
-}