@jcjeon/integration-cli 0.2.0 → 0.2.1

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

@@ -1,193 +0,0 @@
-"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

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