deel-local-cli 0.9.0 → 1.0.1

package/src/ui/screen.js

@@ -0,0 +1,214 @@
+/**
+ * 화면 한 장.
+ *
+ * 왜 이 파일이 생겼나:
+ *   repl.js 안에 say()·process.stdout.write 가 79군데 흩어져 있었다. 그 상태로는
+ *   화면을 하나 더 얹을 수가 없다 — 어디로 무엇이 나가는지 한 군데서 못 잡으니
+ *   두 화면이 같은 코드를 나눠 쓰려다 결국 둘 다 어중간해진다.
+ *
+ *   그래서 '무엇을 그린다' 와 '어떻게 그린다' 를 가른다. repl.js 는 이제
+ *   `화면.줄(...)`·`화면.답조각(...)` 처럼 **뜻**만 말하고, 그것을 줄로 흘릴지
+ *   칸에 담아 다시 그릴지는 여기서 정한다.
+ *
+ * 두 가지 구현이 있다:
+ *   줄화면(LineScreen)   지금까지의 그 화면. 위에서 아래로 흘러간다.
+ *                        파이프·기록·CI·`deel run`·검사가 전부 이것을 읽는다.
+ *   상자화면(BoxScreen)  ui/inputbox.js. 사람이 터미널 앞에 앉아 있을 때만.
+ *                        **대화는 똑같이 흘려보내고** 맨 아래 입력 상자만
+ *                        우리가 지우고 다시 그린다.
+ *
+ * ── 한 번 틀렸던 길 ─────────────────────────────────────────────────────
+ *
+ * 처음에는 터미널을 통째로 빌려(대체 화면) 대화 칸·파일 칸·할 일 칸을 나눠
+ * 그렸다. 보기에는 그럴듯했는데 **슬래시 명령이 전부 먹통**이 됐다.
+ * commands.js 를 비롯한 여섯 모듈이 화면 객체를 안 거치고 stdout 에 바로 쓰는데,
+ * 전체화면은 매번 자기 버퍼에서 화면을 다시 그리므로 그 글이 찍히자마자
+ * 덮여 사라졌다. 명령이 안 도는 게 아니라 결과가 안 보이는 것이라 더 나빴다.
+ *
+ * 고치려면 stdout 에 쓰는 자리를 전부 화면 객체로 꿰야 하는데, 지금 여섯 곳이고
+ * 앞으로 늘 것이며, 하나라도 빠뜨리면 같은 증상이 조용히 돌아온다. 그래서
+ * 대화는 그냥 흘려보내기로 했다. 그러면 stdout 에 쓰는 모든 코드가 손 안 대고
+ * 그대로 맞다. 스크롤·복사·`| tee` 도 그대로다.
+ */
+import { c, say, cursor, box, cols } from './ansi.js';
+import { statusLine, contextWarning } from './status.js';
+import { spin } from './spinner.js';
+
+/**
+ * 지금 이 자리에서 입력 상자를 써도 되는가.
+ *
+ * 하나라도 아니면 줄화면이다 — 애매하면 줄화면이 맞다. 잘못 켜면 사용자
+ * 화면이 깨지지만, 잘못 안 켜면 그냥 지금까지의 화면일 뿐이다.
+ *
+ * 상자는 커서를 위로 올려 가며 자기가 그린 줄을 지운다. 그 앞자리가
+ * 터미널이 아니면(파이프·기록) 제어문자가 그대로 글에 섞인다.
+ */
+export function 상자쓸까({ tui = null } = {}) {
+  if (tui === false) return false;              // deel --no-tui
+  if (!process.stdout.isTTY) return false;      // 파이프·기록·CI
+  if (!process.stdin.isTTY) return false;       // 입력이 파이프로 들어옴 (검사·데모)
+  if (process.env.TERM === 'dumb') return false;
+  if (process.env.CI) return false;
+  // 너무 좁으면 상자 안에 남는 자리가 없다. 테두리만 남고 글이 안 보인다.
+  if ((process.stdout.columns ?? 0) < 40) return false;
+  if (tui === true) return true;
+  return true;
+}
+
+/**
+ * 줄로 흘려보내는 화면 — 지금까지의 그 화면.
+ *
+ * 여기 있는 메서드 하나하나가 전에 repl.js 에 흩어져 있던 출력 한 줄과
+ * **글자 하나까지 같아야 한다.** 검사가 전부 이 화면을 글로 읽고 있어서,
+ * 다르면 그 자리에서 잡힌다. 그게 이 갈라내기가 맞는지 재는 자다.
+ */
+export class LineScreen {
+  constructor() {
+    this.kind = 'line';
+    // 곧 지워질 줄이 화면에 있나. \r 로 커서만 앞으로 보내 놓고 안 지우면
+    // 다음에 오는 짧은 글이 그 줄 위에 겹쳐 찍힌다.
+    this.임시중 = false;
+    this.돌림 = null;
+  }
+
+  // ── 흘러가는 글 ────────────────────────────────────────────────────────
+
+  /** 한 줄. 이미 색이 입혀진 글을 받는다. */
+  줄(s = '') { this.임시지움(); say(s); }
+
+  /** 줄바꿈 없이 이어 붙인다 — 스트리밍으로 오는 답. */
+  붙임(s) { this.임시지움(); process.stdout.write(s); }
+
+  // ── 곧 지워질 표시 ─────────────────────────────────────────────────────
+
+  /**
+   * 기다리는 중. \r 로 커서만 앞으로 보낸다.
+   *
+   * 파이프일 때도 찍는다 — 데모·기록에서 '무엇을 기다리는 중이었나' 가
+   * 남아야 한다. 다만 지워야 할 줄로 세는 것은 터미널일 때만이다.
+   */
+  기다림(s) {
+    process.stdout.write(`  ${s}\r`);
+    if (process.stdout.isTTY) this.임시중 = true;
+  }
+
+  /** 생각하는 중. 글자 수가 계속 바뀌므로 터미널일 때만 그린다. */
+  생각(s) {
+    if (!process.stdout.isTTY) return;
+    cursor.clearLine();
+    process.stdout.write(`  ${s}`);
+    this.임시중 = true;
+  }
+
+  임시지움() {
+    if (this.임시중) { cursor.clearLine(); this.임시중 = false; }
+  }
+
+  /**
+   * 사람이 치고 있던 입력 줄을 지운다.
+   *
+   * Shift+Tab 으로 작업 모드를 돌릴 때처럼, 입력을 기다리는 도중에 화면에
+   * 한 줄을 끼워 넣어야 하는 자리가 있다. 안 지우면 `❯ ` 뒤에 새 글이 붙는다.
+   * 상자화면에서는 상자를 통째로 걷어낸다(BoxScreen 이 갈아 끼운다).
+   */
+  입력지움() { cursor.clearLine(); }
+
+  /** 오래 걸리는 일에 돌아가는 표시를 세운다. */
+  돌리기(label) { this.돌림 = spin(label); return this.돌림; }
+
+  // spinner 가 멈추면서 이미 줄을 지우고 커서를 되살린다. 여기서 또 지우지 않는다 —
+  // 화면에 나가는 제어문자가 한 벌이라도 달라지면 그게 갈라내기의 흔적이 된다.
+  돌림멈춤(finalLine) {
+    if (!this.돌림) return;
+    this.돌림.stop(finalLine);
+    this.돌림 = null;
+  }
+
+  // ── 자리를 차지하는 것 ─────────────────────────────────────────────────
+
+  /** 켤 때 한 번 그리는 머리말 상자. */
+  머리말(lines) {
+    say('');
+    for (const l of box(lines, { tone: c.gray })) say('  ' + l);
+  }
+
+  /**
+   * 입력 자리. 위에 상태줄을 한 줄 깔고 그 아래에 커서를 둔다.
+   *
+   * 줄화면에서는 이게 매번 새로 찍힌다 — 대화가 길어지면 상태줄이 화면에
+   * 여러 번 남는다. 그게 흘러가는 화면의 성질이고, 기록으로 읽을 때는
+   * 오히려 그때그때 상태를 알 수 있어 낫다.
+   */
+  입력자리(session) {
+    say('');
+    say(statusLine(session));
+    const w = contextWarning(session);
+    if (w) say(` ${w}`);
+    process.stdout.write(` ${c.hcyan('❯')} `);
+  }
+
+  /** 사람이 치는 중인 글이 바뀌었다. 줄화면은 readline 이 알아서 되비춘다. */
+  입력갱신() { }
+
+  close() {
+    this.돌림멈춤();
+    this.임시지움();
+  }
+}
+
+/**
+ * 대화는 그대로 흘려보내고, 맨 아래 입력 상자만 우리가 관리하는 화면.
+ *
+ * LineScreen 을 그대로 물려받는다 — 대화가 나가는 길이 **한 글자도 다르면
+ * 안 되기** 때문이다. 다르면 검사가 읽는 화면과 사람이 보는 화면이 갈라진다.
+ * 여기서 갈아 끼우는 것은 입력 자리 세 가지뿐이다.
+ */
+export class BoxScreen extends LineScreen {
+  constructor(상자) {
+    super();
+    this.kind = 'box';
+    this.상자 = 상자;
+  }
+
+  // 대화 한 줄이 나가기 전에 상자를 걷어낸다. 안 걷으면 새 글이 상자 위에
+  // 겹쳐 찍히고, 지울 때 대화까지 같이 지워진다.
+  줄(s = '') { this.상자.지우기(); super.줄(s); }
+  붙임(s) { this.상자.지우기(); super.붙임(s); }
+
+  /** 입력 자리 = 상태줄 + 상자. 커서는 상자 안에 놓인다. */
+  입력자리(session) {
+    this.임시지움();
+    say('');
+    this.상자.그리기(session, '', 0);
+  }
+
+  /** 사람이 치는 중인 글이 바뀌었다 (repl.js 의 keypress 가 부른다). */
+  입력갱신(session, 글, 커서) { this.상자.그리기(session, 글, 커서); }
+
+  입력지움() { this.상자.지우기(); }
+
+  close() {
+    this.상자.지우기();
+    super.close();
+  }
+}
+
+/**
+ * 상황에 맞는 화면을 하나 고른다.
+ *
+ * 상자 쪽은 필요할 때만 읽어 들인다. 줄화면으로 돌 때 inputbox.js 를
+ * 파싱조차 안 하게 하려는 것이다 — `deel run` 이 조금이라도 빨리 시작해야 한다.
+ */
+export async function 화면고르기(opts = {}) {
+  if (!상자쓸까(opts)) return new LineScreen();
+  try {
+    const { InputBox } = await import('./inputbox.js');
+    return new BoxScreen(new InputBox());
+  } catch (e) {
+    // 상자를 못 세우면 조용히 줄화면으로 간다. 화면 하나 때문에
+    // 프로그램이 안 뜨는 일은 없어야 한다.
+    const s = new LineScreen();
+    s.줄(`  ${c.gray(`입력 상자를 못 켰습니다 — 줄 화면으로 갑니다. (${e.message})`)}`);
+    return s;
+  }
+}

package/src/ui/status.js

@@ -10,20 +10,23 @@ import { isLocalHost, isOffline } from '../safety/network.js';
 // 한 조각씩 따로 만든다. 좁은 화면에서는 뒤에서부터 떨군다.
 // 순서 = 중요도 순. 앞쪽이 끝까지 살아남는다.
 export const SEGMENTS = {
-  dir: { desc: '작업 폴더', make: (s) => c.gray(base(s.root)) },
+  // 폴더 이름은 사람이 짓는다 — 한글로 길게 짓기도 한다. 안 자르면
+  // 이 조각 하나가 상태줄을 통째로 넘겨 줄이 접힌다(모델 이름은 이미 자르고 있었다).
+  dir: { desc: '작업 폴더', make: (s) => c.gray(clip(base(s.root), 20)) },
 
   model: { desc: '모델 이름', make: (s) => c.hcyan(clip(s.conn.model, 24)) },
 
   ctx: {
     desc: '컨텍스트 사용량',
     make: (s) => {
-      const b = s.breakdown();
-      // 넘칠 수는 있지만 화면에 219% 라고 적으면 고장난 것처럼 보인다. 100 에서 멈춘다.
-      const r = Math.min(1, b.total > 0 ? b.used / b.total : 0);
-      const pct = Math.round(r * 100);
-      const tone = r > 0.85 ? c.hred : r > 0.6 ? c.hyellow : c.gray;
+      const { r, pct, tone, b } = 참값(s);
       return `${gauge(r, 10)} ${tone(pct + '%')} ${c.gray(short(b.used) + '/' + short(b.total))}`;
     },
+    // 자리가 모자라면 정확한 숫자를 접는다. 게이지와 %가 이미 같은 말을 하고 있다.
+    short: (s) => {
+      const { r, pct, tone } = 참값(s);
+      return `${gauge(r, 10)} ${tone(pct + '%')}`;
+    },
   },
 
   // 지금 무슨 일을 하는 중인가. 파일을 못 바꾸는 모드면 자물쇠를 같이 그린다 —
@@ -47,6 +50,8 @@ export const SEGMENTS = {
       const p = PROFILES[s.effort] ?? PROFILES.save;
       return `${c.gray('◇')} ${c.white(s.think)}${c.gray('·')}${c.magenta(p.name)}`;
     },
+    // 배분은 강도보다 덜 급하다. 좁으면 강도만 남긴다.
+    short: (s) => `${c.gray('◇')} ${c.white(s.think)}`,
   },
 
   mode: {
@@ -80,7 +85,36 @@ export const SEGMENTS = {
   },
 };
 
-export const DEFAULT_SEGMENTS = ['dir', 'model', 'ctx', 'work', 'think', 'mode', 'tok'];
+/**
+ * 상태줄에 무엇을, 어떤 순서로.
+ *
+ * 전에는 칸 여섯 개가 같은 굵기의 막대로 나란히 서 있었다.
+ *   ▏폴더 ▏모델 ▏게이지 ▏◎ 종합 ▏◇ medium·절약 ▏auto
+ * 뒤의 셋은 셋 다 '모드' 처럼 생겨서, 무엇이 무엇인지 읽으려면 멈춰서 세어야 했다.
+ *
+ * 세 덩이로 묶는다 — **어디서(폴더·모델) · 얼마나 찼나(게이지) · 어떻게 도나(모드)**.
+ * 덩이 사이만 굵은 칸막이(▏)로 가르고, 덩이 안은 가운뎃점으로 잇는다.
+ * 그러면 눈이 세 번만 멈춘다.
+ */
+export const SEGMENT_GROUPS = [
+  ['dir', 'model'],
+  ['ctx'],
+  ['work', 'think', 'mode'],
+  ['tok'],
+];
+
+// 옛 이름. 조각 이름을 직접 넘기던 자리(검사·설정)가 그대로 돌게 남긴다.
+export const DEFAULT_SEGMENTS = SEGMENT_GROUPS.flat();
+
+// 컨텍스트 게이지가 쓰는 숫자. 자세한 꼴과 짧은 꼴이 같은 값을 봐야 한다.
+function 참값(s) {
+  const b = s.breakdown();
+  // 넘칠 수는 있지만 화면에 219% 라고 적으면 고장난 것처럼 보인다. 100 에서 멈춘다.
+  const r = Math.min(1, b.total > 0 ? b.used / b.total : 0);
+  const pct = Math.round(r * 100);
+  const tone = r > 0.85 ? c.hred : r > 0.6 ? c.hyellow : c.gray;
+  return { b, r, pct, tone };
+}
 
 function base(p) {
   const parts = String(p ?? '').split(/[\\/]/).filter(Boolean);
@@ -105,16 +139,46 @@ function short(n) {
  * 상태줄 한 줄을 만든다. 폭이 모자라면 덜 중요한 조각부터 뺀다.
  * @param {import('../agent/session.js').Session} session
  */
-export function statusLine(session, { segments = DEFAULT_SEGMENTS, max = cols() - 2 } = {}) {
-  const sep = ` ${c.gray('▏')} `;
-  let parts = segments
-    .map((k) => SEGMENTS[k]?.make(session))
-    .filter((x) => x != null && x !== '');
-
-  // 뒤에서부터 떨궈 폭을 맞춘다. 앞쪽(폴더·모델·컨텍스트)이 마지막까지 남는다.
-  while (parts.length > 1 && width(parts.join(sep)) + 2 > max) parts.pop();
-
-  return ` ${c.gray('▏')}${parts.join(sep)}`;
+export function statusLine(session, { segments = null, max = cols() - 2 } = {}) {
+  const 칸막이 = ` ${c.gray('▏')} `;
+  const 안쪽 = c.gray(' · ');
+
+  // 설정으로 조각 이름을 직접 준 경우에는 그대로 한 줄로 잇는다(옛 방식).
+  const 덩이들 = segments
+    ? segments.map((k) => [k])
+    : SEGMENT_GROUPS;
+
+  const 그리기 = (짧게) => 덩이들
+    .map((그룹) => 그룹
+      .map((k) => {
+        const seg = SEGMENTS[k];
+        if (!seg) return null;
+        return 짧게 && seg.short ? seg.short(session) : seg.make(session);
+      })
+      .filter((x) => x != null && x !== '')
+      .join(안쪽))
+    .filter((x) => x !== '');
+
+  const 맞나 = (ps) => width(ps.join(칸막이)) + 2 <= max;
+
+  /*
+   * 떨구기 전에 **먼저 줄여 본다.**
+   *
+   * 처음엔 곧바로 뒤에서부터 떨궜다. 그러면 80칸 터미널에서 모델 이름이 조금만
+   * 길어도 '어떻게 도나'(모드·강도·승인) 덩이가 통째로 사라졌다 — 세 덩이로
+   * 묶어 놓고 정작 세 번째를 못 보는 화면이 된 것이다.
+   *
+   * 컨텍스트의 '20k/32k' 는 게이지·%와 같은 말을 하고, 배분 이름은 강도보다
+   * 덜 급하다. 그 둘을 접으면 대개 다시 들어간다. 정보를 통째로 잃는 것보다
+   * 덜 급한 자리를 접는 편이 낫다.
+   */
+  let parts = 그리기(false);
+  if (!맞나(parts)) parts = 그리기(true);
+
+  // 그래도 모자라면 뒤에서부터 떨군다. 앞쪽(폴더·모델·컨텍스트)이 마지막까지 남는다.
+  while (parts.length > 1 && !맞나(parts)) parts.pop();
+
+  return ` ${c.gray('▏')}${parts.join(칸막이)}`;
 }
 
 // 컨텍스트가 위험하면 한마디 붙인다. 상태줄만 보고 넘기지 않도록.

package/src/ui/wrap.js

@@ -0,0 +1,68 @@
+// 색을 유지하면서 폭에 맞춰 접기.
+//
+// 전에는 전체화면(tui.js)에만 쓰던 것이라 거기 있었다. 전체화면을 걷어내면서
+// 여기로 옮긴다 — 입력 상자가 긴 입력을 접을 때 같은 것이 필요하다.
+import { width, clip } from './ansi.js';
+
+/**
+ * 색을 유지하면서 폭에 맞춰 접는다.
+ *
+ * clip 은 잘라 버리지만 사람이 친 글은 잘리면 안 된다 — 뒷부분이 통째로
+ * 사라진다. 그래서 접는다. 색 코드는 폭이 0 이므로 세지 않고, 줄을 넘길 때
+ * 마지막으로 켜져 있던 색을 다음 줄 앞에 다시 켜 준다. 안 그러면 접힌 줄부터
+ * 색이 풀려 화면이 얼룩덜룩해진다.
+ */
+export function 접어쓰기(글, 폭) {
+  const s = String(글 ?? '');
+  if (폭 < 2) return [s];
+  if (width(s) <= 폭) return [s];
+
+  /*
+   * 접힌 줄에 앞 들여쓰기를 물려 준다.
+   *
+   * 안 물려 주면 `  ▌ 모델의 답…` 이 접히는 순간 다음 줄이 왼쪽 끝에서
+   * 시작한다. 화면에서 세로줄이 끊겨 보이고, 도구 결과의 `    └ …` 도
+   * 두 번째 줄부터 갑자기 튀어나온다 — 무엇에 딸린 글인지 알 수 없게 된다.
+   * 들여쓴 만큼은 글자 자리에서 빼야 하므로 접는 폭도 같이 줄인다.
+   */
+  const 들여 = (/^ */.exec(s)[0] ?? '').slice(0, Math.max(0, 폭 - 8));
+  const 이어폭 = Math.max(2, 폭 - 들여.length);
+
+  const 줄들 = [];
+  let 지금 = '';
+  let w = 0;
+  let 색 = '';                       // 지금 켜져 있는 SGR
+  for (let i = 0; i < s.length;) {
+    // 색 코드는 통째로 옮긴다. 폭에는 안 센다.
+    if (s[i] === '\x1b') {
+      const m = /^\x1b\[[0-9;]*m/.exec(s.slice(i));
+      if (m) {
+        지금 += m[0];
+        색 = /\x1b\[0?m/.test(m[0]) ? '' : 색 + m[0];
+        i += m[0].length;
+        continue;
+      }
+    }
+    const ch = s[i];
+    const cw = width(ch);
+    // 첫 줄은 원래 폭, 접힌 줄부터는 들여쓴 만큼 좁아진다.
+    const 한도 = 줄들.length === 0 ? 폭 : 이어폭 + 들여.length;
+    if (w + cw > 한도) {
+      줄들.push(지금 + (색 ? '\x1b[0m' : ''));
+      지금 = 들여 + 색;
+      w = 들여.length;
+    }
+    지금 += ch;
+    w += cw;
+    i += 1;
+  }
+  if (지금.trim() !== '' || 줄들.length === 0) 줄들.push(지금 + (색 ? '\x1b[0m' : ''));
+  return 줄들;
+}
+
+/** 폭에 맞춰 오른쪽을 공백으로 채운다. 안 채우면 앞 그림이 남는다. */
+export function 채움(글, 폭) {
+  const w = width(글);
+  if (w > 폭) return clip(글, 폭);
+  return 글 + ' '.repeat(폭 - w);
+}

package/src/version.js

@@ -0,0 +1,28 @@
+// 판 번호를 한 곳에서만 읽는다.
+//
+// 왜 파일 하나를 따로 두나: 전에는 backend/mcp.js 가 '0.9.0' 을 직접 적어
+// 들고 있었다. package.json 을 올릴 때 그건 안 올라간다 — 아무 데서도 안
+// 터지고, 검사도 안 걸리고, MCP 서버 쪽 기록에만 옛 번호가 남는다.
+// 이런 것은 반드시 어긋나므로 애초에 두 벌을 안 만든다.
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/*
+ * 못 읽어도 죽지 않는다.
+ *
+ * package.json 은 npm 이 언제나 같이 깔아 주지만, 소스만 풀어 쓰는 길도
+ * 열어 둔 도구다(README 의 `git clone` 뒤 바로 실행). 판 번호 하나 때문에
+ * 프로그램이 안 뜨는 것은 말이 안 된다.
+ */
+function 읽기() {
+  try {
+    const 여기 = dirname(fileURLToPath(import.meta.url));
+    const pkg = JSON.parse(readFileSync(join(여기, '..', 'package.json'), 'utf8'));
+    return String(pkg.version ?? '0.0.0');
+  } catch {
+    return '0.0.0';
+  }
+}
+
+export const VERSION = 읽기();