feat(my-deepagent): v0.4 — workflow generator UI + hot-reload + UX polish
브라우저에서 YAML 안 쓰고도 새 워크플로우 템플릿 만들기 + 즉시 등록. + /new.html / index.html / new-workflow.html / runs.html / conversation.html 의 nav·copy·empty-state 정비. A. /new.html UX: - 제목 "새 Run" → "워크플로우 실행 (고급)" - 상단 info-box: "자유 대화는 여기가 아닙니다 → 메인 페이지" - 모든 필드에 한 줄 hint - Persona 오버라이드 <details> 접힘 B. Nav 재정렬 (5 페이지): - "대화" nav-primary, 나머지 nav-secondary (작고 dim) C. 메인 안내 + CSS: - 메인 / 에 "👋 my-deepagent" info-box 추가 - .info-box / .nav-primary / .nav-secondary / .wf-* 신규 스타일 D. Workflow hot-reload: - api/deps.py get_workflows 가 매 요청 mtime 튜플 검사 후 변경 시 reload - lifespan 도 user dir 포함하도록 _load_workflows_combined E. Workflow generator: - POST /api/workflows: CreateWorkflowRequest → WorkflowTemplate validate → <data_dir>/workflows/<name>@<version>.yaml 저장. 중복 409, validation 422. - static/new-workflow.html: 기본 정보 / Roles / Phases / YAML preview - app.js bootstrapWorkflowGenerator: capability chip 토글, role select 동적, 실시간 YAML preview, XSS 정책 유지 테스트 (test_workflow_generator.py, 7 신규): - 페이지 200 + 마크업 - POST happy / 422 (empty roles) / 422 (unknown role) / 409 (dup) - GET hot-reload after POST - GET hot-reload after external file drop 게이트: - ruff / format / mypy: PASS (142 source files) - pytest -q --ignore=tests/integration/test_e2e_workflow.py --ignore=tests/integration/test_openrouter_smoke.py: 709 passed (+7 신규) - 라이브 smoke: / / new.html / new-workflow.html 모두 200, screenshot OK Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
chungyeong
@@ -3,56 +3,85 @@
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<title>my-deepagent · 새 Run</title>
|
||||
<title>my-deepagent · 워크플로우 실행</title>
|
||||
<link rel="stylesheet" href="/static/style.css" />
|
||||
</head>
|
||||
<body data-page="new">
|
||||
<header>
|
||||
<h1><a href="/">my-deepagent</a></h1>
|
||||
<nav>
|
||||
<a href="/">대화</a>
|
||||
<a href="/runs.html">Runs (archive)</a>
|
||||
<a href="/new.html" class="active">새 Workflow Run</a>
|
||||
<a href="/" class="nav-primary">대화</a>
|
||||
<a href="/runs.html" class="nav-secondary">Runs</a>
|
||||
<a href="/new.html" class="active nav-secondary">워크플로우 실행</a>
|
||||
<a href="/new-workflow.html" class="nav-secondary">+ 템플릿 만들기</a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<div id="error" class="error-banner" style="display:none"></div>
|
||||
|
||||
<div class="page-title">
|
||||
<h2>새 Run 시작</h2>
|
||||
<span class="page-subtitle">워크플로우 + repo + 요구사항</span>
|
||||
<h2>워크플로우 실행 <span class="hint" style="font-size: 12px; vertical-align: middle;">(고급 기능)</span></h2>
|
||||
<span class="page-subtitle">사전 정의된 phase 시퀀스로 자동화된 작업 실행</span>
|
||||
</div>
|
||||
|
||||
<div class="info-box">
|
||||
<strong>💡 자유 대화는 여기가 아닙니다.</strong>
|
||||
그냥 챗봇처럼 쓰고 싶다면 <a href="/">메인 페이지의 "새 대화 시작"</a>을 눌러주세요.
|
||||
이 페이지는 <strong>여러 단계 (예: 명세 → 리뷰 → 검증)</strong> 가 정해진 순서로 자동 실행되는 워크플로우를 시작할 때 씁니다.
|
||||
<br /><br />
|
||||
<strong>새 템플릿을 직접 만들고 싶다면</strong> 우상단 <a href="/new-workflow.html">+ 템플릿 만들기</a>로 가세요.
|
||||
</div>
|
||||
|
||||
<form id="start-form" autocomplete="off">
|
||||
<div class="card" style="padding: 20px;">
|
||||
<div class="form-row">
|
||||
<label for="template">워크플로우 템플릿</label>
|
||||
<label for="template">
|
||||
워크플로우 템플릿
|
||||
<span class="hint">— 무슨 단계를 어떤 순서로 돌릴지 정의한 YAML. 모르면 첫 번째 선택.</span>
|
||||
</label>
|
||||
<select id="template" required></select>
|
||||
</div>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="form-row">
|
||||
<label for="repo-path">repo 절대경로</label>
|
||||
<label for="repo-path">
|
||||
repo 절대경로
|
||||
<span class="hint">— 작업할 git 저장소 위치 (예: /Users/me/projects/my-thing)</span>
|
||||
</label>
|
||||
<input id="repo-path" type="text" placeholder="/Users/me/projects/my-thing" required />
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="base-branch">base branch</label>
|
||||
<label for="base-branch">
|
||||
base branch
|
||||
<span class="hint">— 작업의 시작점 (보통 main)</span>
|
||||
</label>
|
||||
<input id="base-branch" type="text" value="main" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<label for="requirements">requirements <span class="hint">— 자유 텍스트, 마크다운 OK</span></label>
|
||||
<textarea id="requirements" rows="6" placeholder="이 workflow가 다룰 요구사항을 적어주세요."></textarea>
|
||||
<label for="requirements">
|
||||
requirements
|
||||
<span class="hint">— 이 워크플로우가 다룰 요구사항. 자유 텍스트, 마크다운 OK</span>
|
||||
</label>
|
||||
<textarea id="requirements" rows="6" placeholder="예: wordcount CLI를 만들어줘. python으로, pytest 테스트 포함."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="section-title">Persona 오버라이드 <span class="hint" style="text-transform: none; letter-spacing: 0; font-weight: 400;">(선택, 비우면 자동 선택)</span></h2>
|
||||
<div id="override-fields" class="card"></div>
|
||||
<details class="card" style="margin-top: 16px; padding: 16px;">
|
||||
<summary style="cursor: pointer; font-weight: 600;">
|
||||
Persona 오버라이드 <span class="hint" style="font-weight: 400;">— 비우면 자동 선택 (고급)</span>
|
||||
</summary>
|
||||
<p class="hint" style="margin-top: 12px; font-weight: 400;">
|
||||
각 단계(role)에 어떤 persona(AI 모델 + 시스템 프롬프트)를 쓸지 직접 고르고 싶을 때만 채우세요.
|
||||
비워두면 capability 매칭으로 자동 선택됩니다.
|
||||
</p>
|
||||
<div id="override-fields"></div>
|
||||
</details>
|
||||
|
||||
<div class="action-bar">
|
||||
<button type="submit" class="primary">▶︎ 시작</button>
|
||||
<button type="submit" class="primary">▶︎ 워크플로우 실행</button>
|
||||
<a class="button" href="/">취소</a>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user