@jcjeon/integration-cli 0.2.0

package/apps/web/src/features/tasks/ui/RunHistoryPanel.tsx

@@ -0,0 +1,193 @@
+"use client";
+
+import type { TaskAgent } from "../api/tasks.api";
+import type { TaskRun } from "../api/tasks.api";
+import { useTaskRuns } from "../hooks/useTaskRuns";
+import { AgentRoleBadge } from "./AgentRoleSelect";
+
+// ─── 실행 상태 설정 ───────────────────────────────────────────────────────────
+
+const RUN_STATUS_CONFIG: Record<string, { label: string; dot: string; text: string }> = {
+  running:   { label: "실행 중",  dot: "bg-emerald-500 animate-pulse", text: "text-emerald-600 dark:text-emerald-400" },
+  completed: { label: "완료",    dot: "bg-blue-500",                   text: "text-blue-600 dark:text-blue-400" },
+  error:     { label: "오류",    dot: "bg-red-500",                    text: "text-red-600 dark:text-red-400" },
+  stopped:   { label: "중지됨",  dot: "bg-gray-400",                   text: "text-gray-500 dark:text-gray-400" },
+  pending:   { label: "대기",    dot: "bg-gray-300",                   text: "text-gray-400" },
+};
+
+function RunStatusBadge({ status }: { status: string }) {
+  const cfg = RUN_STATUS_CONFIG[status] ?? RUN_STATUS_CONFIG.pending;
+  return (
+    <span className={`flex items-center gap-1 text-xs ${cfg.text}`}>
+      <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${cfg.dot}`} />
+      {cfg.label}
+    </span>
+  );
+}
+
+// ─── 단일 실행 행 ─────────────────────────────────────────────────────────────
+
+interface RunRowProps {
+  run: TaskRun;
+  agents: TaskAgent[];
+  isLatest: boolean;
+  canRerunAgent?: boolean;
+  rerunDisabled?: boolean;
+  onRerunAgent?: (agentId: number) => void;
+}
+
+function RunRow({ run, agents, isLatest, canRerunAgent, rerunDisabled, onRerunAgent }: RunRowProps) {
+  const duration = run.completedAt
+    ? Math.round((new Date(run.completedAt).getTime() - new Date(run.startedAt).getTime()) / 1000)
+    : null;
+
+  const totalCost = run.agentRuns.reduce((s, ar) => s + (ar.costUsd ?? 0), 0);
+
+  return (
+    <div className={[
+      "flex flex-col gap-2 rounded-xl border p-3 transition-colors",
+      isLatest
+        ? "border-blue-500/20 bg-blue-500/[0.04] dark:border-blue-500/20"
+        : "border-gray-900/[0.06] bg-gray-900/[0.01] dark:border-white/[0.06] dark:bg-white/[0.01]",
+    ].join(" ")}>
+      {/* 버전 헤더 */}
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-2">
+          <span className={[
+            "flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold",
+            isLatest
+              ? "bg-blue-500/10 text-blue-600 dark:text-blue-400"
+              : "bg-gray-900/[0.06] text-gray-900/50 dark:bg-white/[0.06] dark:text-white/50",
+          ].join(" ")}>
+            v{run.version}
+          </span>
+          {isLatest && (
+            <span className="text-[10px] text-blue-500/70 dark:text-blue-400/70">최신</span>
+          )}
+          <RunStatusBadge status={run.status} />
+        </div>
+
+        <div className="flex items-center gap-2 text-[10px] text-gray-900/25 dark:text-white/25">
+          {duration != null && <span>{duration}s</span>}
+          {totalCost > 0 && <span>${totalCost.toFixed(4)}</span>}
+          <span>
+            {new Date(run.startedAt).toLocaleString("ko-KR", {
+              month: "2-digit", day: "2-digit",
+              hour: "2-digit", minute: "2-digit",
+            })}
+          </span>
+        </div>
+      </div>
+
+      {/* 보완 사항 */}
+      {run.supplementNote && (
+        <p className="rounded-lg border border-amber-500/20 bg-amber-500/[0.05] px-2.5 py-1.5 text-[11px] text-amber-700/80 dark:text-amber-400/80">
+          <span className="mr-1 font-medium">보완 사항:</span>
+          {run.supplementNote}
+        </p>
+      )}
+
+      {/* 에이전트별 실행 결과 */}
+      {run.agentRuns.length > 0 && (
+        <div className="flex flex-wrap gap-1.5">
+          {run.agentRuns.map((ar) => {
+            const agent = agents.find((a) => a.id === ar.agentId);
+            const statusCfg = RUN_STATUS_CONFIG[ar.status] ?? RUN_STATUS_CONFIG.pending;
+            return (
+              <div
+                key={ar.id}
+                className="flex items-center gap-1.5 rounded-lg border border-gray-900/[0.06] bg-gray-900/[0.02] px-2 py-1 dark:border-white/[0.06] dark:bg-white/[0.02]"
+              >
+                <span className={`h-1.5 w-1.5 shrink-0 rounded-full ${statusCfg.dot}`} />
+                {agent ? (
+                  <AgentRoleBadge role={agent.role} customRole={agent.customRole} />
+                ) : (
+                  <span className="text-[10px] text-gray-900/40 dark:text-white/40">Agent {ar.agentId}</span>
+                )}
+                {ar.durationMs != null && ar.durationMs > 0 && (
+                  <span className="text-[10px] text-gray-900/20 dark:text-white/20">
+                    {(ar.durationMs / 1000).toFixed(1)}s
+                  </span>
+                )}
+                {canRerunAgent && (
+                  <button
+                    type="button"
+                    onClick={() => onRerunAgent?.(ar.agentId)}
+                    disabled={rerunDisabled}
+                    className="ml-1 rounded-md border border-blue-500/25 px-1.5 py-0.5 text-[10px] font-medium text-blue-600 transition-colors hover:border-blue-400/50 hover:bg-blue-500/[0.08] disabled:opacity-40 dark:text-blue-400"
+                    title="이 에이전트만 재실행"
+                  >
+                    재실행
+                  </button>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── RunHistoryPanel ──────────────────────────────────────────────────────────
+
+interface Props {
+  taskId: string;
+  agents: TaskAgent[];
+  canRerunAgent?: boolean;
+  rerunDisabled?: boolean;
+  onRerunAgent?: (agentId: number) => void;
+}
+
+export function RunHistoryPanel({ taskId, agents, canRerunAgent, rerunDisabled, onRerunAgent }: Props) {
+  const { runs, loading, error } = useTaskRuns(taskId);
+
+  if (loading) {
+    return (
+      <div className="flex flex-col gap-2 py-1">
+        {[0, 1].map((i) => (
+          <div
+            key={i}
+            className="h-14 animate-pulse rounded-xl border border-gray-900/[0.05] bg-gray-900/[0.02] dark:border-white/[0.05] dark:bg-white/[0.02]"
+            style={{ animationDelay: `${i * 60}ms` }}
+          />
+        ))}
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-600 dark:border-red-900/40 dark:bg-red-950/20 dark:text-red-400">
+        {error}
+      </p>
+    );
+  }
+
+  if (runs.length === 0) {
+    return (
+      <div className="flex flex-col items-center gap-2 py-8 text-center">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="h-8 w-8 text-gray-900/15 dark:text-white/15">
+          <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+        </svg>
+        <p className="text-xs text-gray-900/30 dark:text-white/30">실행 기록이 없습니다</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-2">
+      {runs.map((run, idx) => (
+        <RunRow
+          key={run.id}
+          run={run}
+          agents={agents}
+          isLatest={idx === 0}
+          canRerunAgent={canRerunAgent}
+          rerunDisabled={rerunDisabled}
+          onRerunAgent={onRerunAgent}
+        />
+      ))}
+    </div>
+  );
+}

package/apps/web/src/features/tasks/ui/TaskCreateModal.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import { useCallback, useState } from "react";
+
+import { Modal } from "@/components/ui/Modal";
+import { WorkingDirPicker } from "@/components/ui/WorkingDirPicker";
+import { AgentSelectModal } from "@/features/chat/ui/AgentSelectModal";
+import type { AgentId } from "@/features/chat/ui/AgentSelectModal";
+import type { Task } from "../api/tasks.api";
+import { useTaskCreate } from "../hooks/useTaskCreate";
+import { AgentRow } from "./AgentRoleSelect";
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onCreated?: (task: Task) => void;
+}
+
+export function TaskCreateModal({ open, onClose, onCreated }: Props) {
+  const {
+    form,
+    submitting,
+    error,
+    setTitle,
+    setWorkingDir,
+    addRequirement,
+    updateRequirement,
+    removeRequirement,
+    addAgent,
+    updateAgent,
+    removeAgent,
+    submit,
+    reset,
+  } = useTaskCreate(
+    useCallback(
+      (task: Task) => {
+        onCreated?.(task);
+        onClose();
+      },
+      [onCreated, onClose],
+    ),
+  );
+
+  const [agentSelectOpen, setAgentSelectOpen] = useState(false);
+
+  const handleAgentSelect = (agentId: AgentId) => {
+    addAgent(agentId);
+    setAgentSelectOpen(false);
+  };
+
+  const handleClose = () => { reset(); onClose(); };
+
+  return (
+    <>
+    <AgentSelectModal
+      open={agentSelectOpen}
+      onClose={() => setAgentSelectOpen(false)}
+      onSelect={handleAgentSelect}
+    />
+    <Modal open={open} onClose={handleClose} title="새 작업 추가" maxWidth="max-w-xl">
+      <div className="flex flex-col gap-5">
+
+        {/* ── 작업 제목 ─────────────────────────────────────────────── */}
+        <section className="flex flex-col gap-2">
+          <label className="text-[11px] font-medium uppercase tracking-wider text-gray-900/30 dark:text-white/30">
+            작업 목표 <span className="text-orange-500">*</span>
+          </label>
+          <textarea
+            rows={2}
+            value={form.title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="예: 로그인 페이지 UI 구현 및 API 연동"
+            className="w-full resize-none rounded-xl border border-gray-900/[0.08] bg-gray-900/[0.03] px-3 py-2.5 text-sm text-gray-900/80 placeholder-gray-900/20 outline-none transition-colors focus:border-orange-500/50 focus:bg-gray-900/[0.05] dark:border-white/[0.08] dark:bg-white/[0.03] dark:text-white/80 dark:placeholder-white/20 dark:focus:bg-white/[0.05]"
+          />
+        </section>
+
+        {/* ── 워크 디렉토리 ─────────────────────────────────────────── */}
+        <section className="flex flex-col gap-2">
+          <label className="text-[11px] font-medium uppercase tracking-wider text-gray-900/30 dark:text-white/30">
+            워크 디렉토리 <span className="text-gray-900/20 normal-case tracking-normal dark:text-white/20">(선택)</span>
+          </label>
+          <WorkingDirPicker value={form.workingDir} onChange={setWorkingDir} />
+        </section>
+
+        {/* ── 요구사항 ──────────────────────────────────────────────── */}
+        <section className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <label className="text-[11px] font-medium uppercase tracking-wider text-gray-900/30 dark:text-white/30">
+              요구사항
+            </label>
+            <button
+              type="button"
+              onClick={addRequirement}
+              className="flex items-center gap-1 rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.03] px-2.5 py-1 text-xs text-gray-900/40 transition-colors hover:border-gray-900/[0.14] hover:bg-gray-900/[0.06] hover:text-gray-900/70 dark:border-white/[0.07] dark:bg-white/[0.03] dark:text-white/40 dark:hover:border-white/[0.14] dark:hover:bg-white/[0.06] dark:hover:text-white/70"
+            >
+              <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
+                <path d="M8.75 3.75a.75.75 0 00-1.5 0v3.5h-3.5a.75.75 0 000 1.5h3.5v3.5a.75.75 0 001.5 0v-3.5h3.5a.75.75 0 000-1.5h-3.5v-3.5z" />
+              </svg>
+              항목 추가
+            </button>
+          </div>
+
+          {form.requirements.length === 0 ? (
+            <div className="flex items-center justify-center rounded-xl border border-dashed border-gray-900/[0.07] py-5 dark:border-white/[0.07]">
+              <p className="text-xs text-gray-900/20 dark:text-white/20">요구사항을 추가하세요</p>
+            </div>
+          ) : (
+            <ul className="flex flex-col gap-1.5">
+              {form.requirements.map((req, idx) => (
+                <li key={req.id} className="flex items-center gap-2">
+                  <span className="w-5 shrink-0 text-center text-xs text-gray-900/20 dark:text-white/20">{idx + 1}</span>
+                  <input
+                    type="text"
+                    value={req.content}
+                    onChange={(e) => updateRequirement(req.id, e.target.value)}
+                    placeholder="요구사항 입력"
+                    className="flex-1 rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.03] px-3 py-1.5 text-xs text-gray-900/70 placeholder-gray-900/20 outline-none transition-colors focus:border-gray-900/[0.15] focus:bg-gray-900/[0.05] dark:border-white/[0.07] dark:bg-white/[0.03] dark:text-white/70 dark:placeholder-white/20 dark:focus:border-white/[0.15] dark:focus:bg-white/[0.05]"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => removeRequirement(req.id)}
+                    className="shrink-0 text-gray-900/20 transition-colors hover:text-red-500 dark:text-white/20 dark:hover:text-red-400"
+                  >
+                    <svg viewBox="0 0 16 16" fill="currentColor" className="h-3.5 w-3.5">
+                      <path d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" />
+                    </svg>
+                  </button>
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        {/* ── 서브 에이전트 ─────────────────────────────────────────── */}
+        <section className="flex flex-col gap-2">
+          <div className="flex items-center justify-between">
+            <label className="text-[11px] font-medium uppercase tracking-wider text-gray-900/30 dark:text-white/30">
+              서브 에이전트
+            </label>
+            <button
+              type="button"
+              onClick={() => setAgentSelectOpen(true)}
+              className="flex items-center gap-1 rounded-lg border border-gray-900/[0.07] bg-gray-900/[0.03] px-2.5 py-1 text-xs text-gray-900/40 transition-colors hover:border-gray-900/[0.14] hover:bg-gray-900/[0.06] hover:text-gray-900/70 dark:border-white/[0.07] dark:bg-white/[0.03] dark:text-white/40 dark:hover:border-white/[0.14] dark:hover:bg-white/[0.06] dark:hover:text-white/70"
+            >
+              <svg viewBox="0 0 16 16" fill="currentColor" className="h-3 w-3">
+                <path d="M8.75 3.75a.75.75 0 00-1.5 0v3.5h-3.5a.75.75 0 000 1.5h3.5v3.5a.75.75 0 001.5 0v-3.5h3.5a.75.75 0 000-1.5h-3.5v-3.5z" />
+              </svg>
+              에이전트 추가
+            </button>
+          </div>
+
+          {form.agents.length === 0 ? (
+            <div className="flex items-center justify-center rounded-xl border border-dashed border-gray-900/[0.07] py-5 dark:border-white/[0.07]">
+              <p className="text-xs text-gray-900/20 dark:text-white/20">서브 에이전트를 추가하세요</p>
+            </div>
+          ) : (
+            <ul className="flex flex-col gap-2">
+              {form.agents.map((agent) => (
+                <li key={agent.id}>
+                  <AgentRow
+                    agent={agent}
+                    onChange={(patch) => updateAgent(agent.id, patch)}
+                    onRemove={() => removeAgent(agent.id)}
+                  />
+                </li>
+              ))}
+            </ul>
+          )}
+        </section>
+
+        {/* ── 에러 ──────────────────────────────────────────────────── */}
+        {error && (
+          <p className="rounded-xl border border-red-900/50 bg-red-950/30 px-3 py-2.5 text-xs text-red-500 dark:text-red-400">
+            {error}
+          </p>
+        )}
+
+        {/* ── 액션 ──────────────────────────────────────────────────── */}
+        <div className="flex justify-end gap-2 border-t border-gray-900/[0.06] pt-4 dark:border-white/[0.06]">
+          <button
+            type="button"
+            onClick={handleClose}
+            disabled={submitting}
+            className="rounded-xl px-4 py-2 text-sm text-gray-900/35 transition-colors hover:bg-gray-900/[0.05] hover:text-gray-900/70 disabled:opacity-40 dark:text-white/35 dark:hover:bg-white/[0.05] dark:hover:text-white/70"
+          >
+            취소
+          </button>
+          <button
+            type="button"
+            onClick={submit}
+            disabled={submitting || !form.title.trim()}
+            className="flex items-center gap-2 rounded-xl bg-orange-600 px-5 py-2 text-sm font-semibold text-white transition-colors hover:bg-orange-500 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {submitting && (
+              <span className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
+            )}
+            {submitting ? "생성 중…" : "작업 생성"}
+          </button>
+        </div>
+
+      </div>
+    </Modal>
+    </>
+  );
+}