clitrigger 0.1.19 → 0.2.0

package/.env.example

@@ -1,7 +1,8 @@
 # production으로 설정 시 CORS_ORIGIN에 명시된 도메인만 허용 (미설정 시 모든 origin 허용)
 NODE_ENV=
 PORT=3000
-AUTH_PASSWORD=changeme          # 필수 — 웹 UI 로그인 비밀번호
+AUTH_PASSWORD=                  # 선택 — 비우면 첫 접속 시 웹 UI 셋업 화면이 뜬다.
+                                #        값이 있으면 1회만 사용 후 hash로 변환·저장됨.
 SESSION_SECRET=
 CORS_ORIGIN=http://localhost:5173,http://localhost:3000
 TUNNEL_ENABLED=false

package/README.md

@@ -110,6 +110,11 @@ The **Harness** panel edits Claude / Gemini / Codex user config (settings, memor
 ### Wiki (Karpathy LLM-Wiki Pattern)
 A per-project knowledge graph (nodes + typed edges) that you curate once and selectively inject into TODO and discussion prompts. Stop pasting the same domain context every run. Toggle between List and Graph views (`@xyflow/react` + dagre auto-layout, drag-to-connect edges, cycle guards on `precedes`/`refines`), pick `None` / `All` / `Selected` / **`Auto`** per task — `Auto` runs a one-shot LLM retrieval right before each call to pick only the relevant entries, saving tokens. Preview the exact `<long_term_memory>` block (with char/token estimates) before sending; **export DB → `.clitrigger/wiki/<entity>/<slug>.md` Markdown** + Disk diff to keep the wiki alive in git or Obsidian. Lint surfaces duplicates / orphans / stale entries with inline fix actions (merge / delete / link); the Activity sub-tab logs ingest / lint / retrieve / merge events with severity. CLI-agnostic — Claude, Gemini, and Codex all see identical context with no adapter changes.
 
+<div align="center">
+  <img src="https://raw.githubusercontent.com/HyperAITeam/CLITrigger/main/docs/images/screenshot-wiki.png" alt="Wiki — Per-project knowledge graph" width="800">
+  <p><em>Graph view of the per-project wiki — entries clustered by tag (Concept · Decision · Feature · Pattern), typed edges visualize how ideas relate, and selective injection feeds only what's relevant into each prompt</em></p>
+</div>
+
 ### Planner
 A lightweight task planner separate from TODOs — capture ideas, attach images, tag with colors, sort by any column. Convert any planner item into a TODO or a schedule in one click. Markdown export/import (status sections + GFM checkboxes + HTML-comment metadata) lets you move plans across machines or share via GitHub / Obsidian / any plain Markdown viewer. Drop a `.md` file onto the planner card to import.
 
@@ -124,6 +129,11 @@ Each TODO automatically gets its own git worktree. Claude / Gemini / Codex CLIs
 ### Interactive Sessions
 Long-lived interactive CLI sessions as first-class entities — bring up a Claude / Gemini / Codex session in a floating draggable window. **VS Code-style window grouping and docking**: drag a tab onto another window for a 5-zone diamond (top/bottom/left/right/center) to either split into resizable panes or merge as tabs, plus **Aero-style edge snapping, sticky window-to-window snapping, and a minimize-to-dock-tray** flow — keeps multi-session screens tidy. **xterm.js rendering** shows ANSI colors, cursor control, and TUI box-drawing identically to a native terminal. PTY spawns at the exact viewport dimensions, with **per-session font size** (A−/A+ buttons or Ctrl/Cmd ±) for readability. Per-session wiki injection plus a **Send/Skip pre-flight banner** lets you review the auto-generated initial prompt before it hits the model. Inline edit button updates non-running sessions in place. iOS Safari mobile Hangul IME is composed via a client-side dubeolsik composer. Window geometry, group tree, and tab arrangement persist and survive tab navigation; works on desktop and mobile (fullscreen on small screens).
 
+<div align="center">
+  <img src="https://raw.githubusercontent.com/HyperAITeam/CLITrigger/main/docs/images/screenshot-sessions.png" alt="Sessions — Multi-CLI floating windows with VS Code-style docking" width="800">
+  <p><em>Claude, Gemini, and Codex sessions docked side-by-side via VS Code-style window grouping — each running in its own worktree branch</em></p>
+</div>
+
 ### Multi-Agent Discussion
 AI agents with different roles — architect, developer, reviewer — debate in rounds before implementation. The resulting design is far more robust than a single AI working in isolation. Agents flagged as **Implementers** (`can_implement`) can commit code during their regular turns, while a final implementation round stitches everything together. Auto-implement triggers the code-writing round automatically on consensus. Or hit **Send to Planner** on a finished discussion to have the transcript distilled into curated planner items via a one-shot LLM extraction — review and edit before persisting.
 
@@ -197,7 +207,7 @@ Download the installer for your platform from the [latest GitHub release](https:
 - **macOS** — `CLITrigger-<version>.dmg` (Apple Silicon & Intel)
 - **Linux** — `CLITrigger-<version>.AppImage`
 
-The desktop app bundles Node.js and the native modules (`better-sqlite3`, `node-pty`, `cloudflared`), so no separate runtime install is needed. On first launch you'll be prompted to set a password, just like the CLI.
+The desktop app bundles Node.js and the native modules (`better-sqlite3`, `node-pty`, `cloudflared`), so no separate runtime install is needed. On first launch a setup screen appears in the embedded browser — pick a password there and you're in. External sharing (Cloudflare tunnel) stays paused until setup completes, so the first user is guaranteed to be you.
 
 ### Option B — npm (recommended for developers)
 
@@ -206,13 +216,12 @@ npm i -g clitrigger
 clitrigger
 ```
 
-On first run, you'll be prompted to set a password. Then the server starts immediately.
-Open `http://localhost:3000` → Register a project → Write TODOs → Click Start.
+On first run the server starts immediately. Open `http://localhost:3000` → set a password on the welcome screen → register a project → write TODOs → click Start. Change the password later via Settings → Account in the web UI.
 
 ```bash
 # Change settings
 clitrigger config port 8080    # Change port
-clitrigger config password     # Change password
+clitrigger config tunnel on    # Enable Cloudflare tunnel for external sharing
 ```
 
 > **Prerequisites**: Node.js 20+, Git, at least one AI CLI (Claude / Gemini / Codex)
@@ -234,7 +243,8 @@ cd src/client && npm install && cd ../..
 
 # 2. Configure environment
 cp .env.example .env
-# Edit .env and set AUTH_PASSWORD
+# AUTH_PASSWORD is optional — leave it blank and the dev server will show the
+# setup screen on first browser load. Set it only if you want to skip setup.
 
 # 3. Run
 npm run dev

package/README_KR.md

@@ -110,6 +110,11 @@ CLITrigger의 모든 기능 — Planner, Scheduler, 워크트리 격리, 한도
 ### 위키 (Karpathy LLM-Wiki 패턴)
 프로젝트별로 한 번 정리해 두면 TODO와 토론 프롬프트에 골라 주입할 수 있는 노드+엣지 지식 그래프. 매번 같은 도메인 컨텍스트를 붙여넣을 필요가 없다. List / Graph 뷰 토글(`@xyflow/react` + dagre 자동 레이아웃, drag-to-connect 엣지, `precedes`/`refines` 관계는 cycle 차단), todo마다 `None` / `All` / `Selected` / **`Auto`** 모드 선택 — `Auto`는 매 실행 직전 한 번의 LLM 호출로 관련 항목만 자동으로 골라 토큰을 절약한다. 전송 전 `<long_term_memory>` 블록을 char/token 추정치와 함께 미리볼 수 있고, **DB → `.clitrigger/wiki/<entity>/<slug>.md` Markdown 익스포트** + Disk diff로 git/Obsidian과 함께 살릴 수 있다. Lint는 중복/orphan/stale 항목에 인라인 fix 액션(merge / delete / link)을 제공하고, Activity 서브탭이 ingest / lint / retrieve / merge 이벤트를 시간순/severity로 보여준다. CLI-agnostic — Claude / Gemini / Codex 모두 동일한 컨텍스트를 받으며 어댑터 변경이 필요 없다.
 
+<div align="center">
+  <img src="https://raw.githubusercontent.com/HyperAITeam/CLITrigger/main/docs/images/screenshot-wiki.png" alt="Wiki — 프로젝트별 지식 그래프" width="800">
+  <p><em>위키 그래프 뷰 — 항목이 태그(Concept · Decision · Feature · Pattern)별로 그룹화되고, 타입드 엣지로 아이디어 간 관계를 시각화. 매 프롬프트에 관련 항목만 선택적으로 주입</em></p>
+</div>
+
 ### Planner (플래너)
 TODO와는 별개인 경량 작업 플래너 — 아이디어를 빠르게 적고, 이미지를 첨부하고, 색상 태그로 분류하고, 열 단위로 정렬할 수 있다. 플래너 항목을 한 번의 클릭으로 TODO나 예약 스케줄로 변환할 수 있다. Markdown Export / Import (status 섹션 + GFM 체크박스 + HTML 주석 메타데이터)로 다른 머신에 옮기거나 GitHub / Obsidian / 어떤 Markdown 뷰어에서도 그대로 열어볼 수 있고, `.md` 파일을 카드에 드래그하면 바로 Import된다.
 
@@ -124,6 +129,11 @@ TODO를 작성하면 각 작업마다 격리된 git worktree가 자동 생성된
 ### 인터랙티브 세션 (Sessions)
 긴 생애주기의 인터랙티브 CLI 세션을 1급 엔티티로 관리 — Claude / Gemini / Codex 세션을 드래그 가능한 floating window에 띄운다. **VS Code 스타일 그룹화/도킹** 지원: 탭을 다른 윈도우로 드래그하면 5-zone 다이아몬드(top/bottom/left/right/center)로 분할 pane이나 탭 합치기가 가능하고, **Aero 스타일 엣지 스냅 + 윈도우 간 sticky 스냅 + dock tray 최소화**까지 — 멀티 세션 화면을 깔끔하게 정리할 수 있다. **xterm.js 렌더링**으로 ANSI 컬러, 커서 제어, TUI 박스 그리기까지 네이티브 터미널과 동일하게 표시된다. PTY가 정확한 viewport 크기로 spawn되고, **per-session 폰트 크기**(A−/A+ 또는 Ctrl/Cmd ±)로 가독성도 조절 가능. 세션별 위키 주입 모드와 **Send/Skip pre-flight** 배너로 자동 생성된 초기 프롬프트를 검토 후 명시적으로 보낼 수 있고, 인라인 편집 버튼으로 running이 아닌 세션은 그 자리에서 제목/CLI/모델/위키 주입 변경. iOS Safari 모바일은 한글 IME가 두벌식 composer로 정상 조립된다. Window 위치/크기/그룹 트리는 영속되고 탭 전환 후에도 살아남는다.
 
+<div align="center">
+  <img src="https://raw.githubusercontent.com/HyperAITeam/CLITrigger/main/docs/images/screenshot-sessions.png" alt="Sessions — VS Code 스타일로 도킹된 멀티 CLI floating windows" width="800">
+  <p><em>VS Code 스타일 그룹화로 도킹된 Claude · Gemini · Codex 세션 — 각각 독립된 worktree 브랜치에서 동시 실행</em></p>
+</div>
+
 ### 다중 AI 토론 (Discussion)
 아키텍트, 개발자, 리뷰어 등 역할이 다른 AI 에이전트들이 라운드 방식으로 토론한 뒤, 합의된 내용을 바탕으로 자동 구현까지 이어진다. 단일 AI의 판단보다 훨씬 검증된 설계 결과물이 나온다. **구현자(Implementer, `can_implement`)** 로 표시된 에이전트는 일반 턴에서도 코드를 커밋할 수 있고, 마지막 구현 라운드가 남은 작업을 정리해 마무리한다. 자동 구현(Auto-implement) 옵션을 켜면 토론 완료 즉시 코드 작성 라운드가 자동 실행된다. 완료된 토론에서 **Send to Planner** 버튼을 누르면 트랜스크립트를 한방 LLM 호출로 추출해 액션 아이템을 Planner로 영속한다 — 저장 전 항목별 편집 가능.
 
@@ -197,7 +207,7 @@ Cloudflare Tunnel로 어디서든 폰·노트북으로 제어한다. 작업이
 - **macOS** — `CLITrigger-<version>.dmg` (Apple Silicon · Intel)
 - **Linux** — `CLITrigger-<version>.AppImage`
 
-데스크톱 앱은 Node.js와 네이티브 모듈(`better-sqlite3`, `node-pty`, `cloudflared`)을 모두 번들하므로 별도 런타임 설치가 필요 없다. 첫 실행 시 비밀번호를 설정하라는 프롬프트가 뜨는 건 CLI와 동일.
+데스크톱 앱은 Node.js와 네이티브 모듈(`better-sqlite3`, `node-pty`, `cloudflared`)을 모두 번들하므로 별도 런타임 설치가 필요 없다. 첫 실행 시 내장 브라우저에 셋업 화면이 떠서 거기서 비밀번호를 정하면 끝. 외부 공유(Cloudflare 터널)는 셋업이 완료될 때까지 자동 시작이 잠겨 있어서 첫 사용자는 항상 본인.
 
 ### 옵션 B — npm (개발자 권장)
 
@@ -206,13 +216,12 @@ npm i -g clitrigger
 clitrigger
 ```
 
-첫 실행 시 비밀번호 설정 여부를 물어보고, 바로 서버가 시작된다.
-브라우저에서 `http://localhost:3000` 접속 → 프로젝트 등록 → TODO 작성 → Start.
+첫 실행 시 서버가 바로 시작된다. 브라우저에서 `http://localhost:3000` 접속 → 셋업 화면에서 비밀번호 설정 → 프로젝트 등록 → TODO 작성 → Start. 비밀번호는 이후 웹 UI의 설정 → 계정 탭에서 변경 가능.
 
 ```bash
 # 설정 변경
 clitrigger config port 8080    # 포트 변경
-clitrigger config password     # 비밀번호 변경
+clitrigger config tunnel on    # 외부 공유용 Cloudflare 터널 활성화
 ```
 
 > **사전 요구사항**: Node.js 20+, Git, 사용할 AI CLI (Claude / Gemini / Codex 중 하나 이상)
@@ -234,7 +243,8 @@ cd src/client && npm install && cd ../..
 
 # 2. 환경 설정
 cp .env.example .env
-# .env 열어서 AUTH_PASSWORD 설정
+# AUTH_PASSWORD는 이제 선택사항 — 비워두면 첫 브라우저 접속 시 셋업 화면이 뜬다.
+# 셋업을 건너뛰고 싶을 때만 미리 값을 박아두면 된다.
 
 # 3. 실행
 npm run dev

package/bin/clitrigger.js

@@ -7,6 +7,7 @@ import { createInterface } from 'readline/promises';
 
 const CONFIG_DIR = path.join(os.homedir(), '.clitrigger');
 const CONFIG_FILE = path.join(CONFIG_DIR, 'config.json');
+const MIGRATED_FLAG = path.join(CONFIG_DIR, '.password-migrated');
 
 const args = process.argv.slice(2);
 
@@ -22,44 +23,32 @@ if (args[0] === 'config') {
 async function startServer() {
   fs.mkdirSync(CONFIG_DIR, { recursive: true });
 
-  // 첫 실행: 초기 설정
+  // 첫 실행: 기본 config 생성 (비밀번호는 웹 첫 화면에서 설정)
   if (!fs.existsSync(CONFIG_FILE)) {
-    console.log('Welcome to CLITrigger!\n');
-    const rl = createInterface({ input: process.stdin, output: process.stdout });
-
-    let password = '';
-    while (!password) {
-      password = await rl.question('Set a password: ');
-      if (!password) console.log('Password is required.');
-    }
-    rl.close();
-
-    const config = { port: 3000, password, tunnel: true };
+    const config = { port: 3000, tunnel: true };
     fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
-    console.log(`\nSetup complete! (${CONFIG_FILE})`);
+    console.log('Welcome to CLITrigger!');
+    console.log(`Config created at ${CONFIG_FILE}`);
+    console.log('Open the web UI to set your password on first launch.\n');
   }
 
-  // config 읽고 env 설정
   const config = JSON.parse(fs.readFileSync(CONFIG_FILE, 'utf-8'));
 
-  // 기존 config에 비밀번호가 없으면 설정 강제
-  if (!config.password) {
-    console.log('Password is not set.\n');
-    const rl = createInterface({ input: process.stdin, output: process.stdout });
-    let password = '';
-    while (!password) {
-      password = await rl.question('Set a password: ');
-      if (!password) console.log('Password is required.');
-    }
-    rl.close();
-    config.password = password;
+  // Legacy plaintext cleanup: server has migrated to hashed credential, drop the
+  // plaintext field from disk.
+  if (fs.existsSync(MIGRATED_FLAG) && config.password) {
+    delete config.password;
     fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
-    console.log('Password saved.\n');
+    try { fs.unlinkSync(MIGRATED_FLAG); } catch { /* ignore */ }
   }
 
   process.env.PORT = String(config.port || 3000);
-  process.env.AUTH_PASSWORD = config.password;
   process.env.DB_PATH = path.join(CONFIG_DIR, 'clitrigger.db');
+  // Pass legacy plaintext password through to the server one last time so it
+  // can migrate to a scrypt hash. Removed from disk on the next launch.
+  if (config.password) {
+    process.env.AUTH_PASSWORD = config.password;
+  }
   // tunnel defaults to true (auto-enable for new and existing users)
   if (config.tunnel !== false) {
     process.env.TUNNEL_ENABLED = 'true';
@@ -116,16 +105,9 @@ async function handleConfig(args) {
     fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
     console.log(`Port changed to ${port}.`);
   } else if (args[0] === 'password') {
-    const rl = createInterface({ input: process.stdin, output: process.stdout });
-    let password = '';
-    while (!password) {
-      password = await rl.question('New password: ');
-      if (!password) console.log('Password is required.');
-    }
-    rl.close();
-    config.password = password;
-    fs.writeFileSync(CONFIG_FILE, JSON.stringify(config, null, 2));
-    console.log('Password changed.');
+    console.log('Password is now managed in the web UI.');
+    console.log('  • First launch: open the browser and set a password on the setup screen.');
+    console.log('  • Change later: open Settings → Account in the web UI.');
   } else if (args[0] === 'path') {
     console.log(CONFIG_DIR);
   } else if (args[0] === 'tunnel') {
@@ -177,7 +159,7 @@ async function handleConfig(args) {
   } else {
     console.log(`Config (${CONFIG_FILE}):`);
     console.log(`  Port:     ${config.port || 3000}`);
-    console.log(`  Password: ${config.password ? 'set' : 'not set'}`);
+    console.log(`  Password: managed in web UI (Settings → Account)`);
     console.log(`  Tunnel:   ${config.tunnel ? 'enabled' : 'disabled'}`);
     if (config.tunnelName)     console.log(`  Tunnel name:     ${config.tunnelName}`);
     if (config.tunnelHostname) console.log(`  Tunnel hostname: ${config.tunnelHostname}`);
@@ -226,10 +208,9 @@ function printHelp() {
 CLITrigger - AI-powered task execution tool
 
 Usage:
-  clitrigger                          Start the server
+  clitrigger                          Start the server (set password on first launch in browser)
   clitrigger config                   Show current config
   clitrigger config port <n>          Change port
-  clitrigger config password          Change password
   clitrigger config tunnel on         Enable Cloudflare tunnel
   clitrigger config tunnel on <name>  Enable named tunnel
   clitrigger config tunnel off        Disable tunnel
@@ -240,5 +221,7 @@ Usage:
   clitrigger config path              Print config directory path
   clitrigger config clear             Delete all config and data
   clitrigger --help                   Show this help
+
+Password is managed in the web UI (Settings → Account).
 `.trim());
 }