deel-local-cli 1.4.2 → 1.5.0

package/src/ui/office.js

@@ -0,0 +1,334 @@
+/**
+ * 붙박이 사무실 — 입력 상자 위에 얹히는 방 한 칸.
+ *
+ * ── 무엇인가 ────────────────────────────────────────────────────────────
+ *
+ * 로컬 모델은 한 턴에 몇 분이 걸린다. 그 시간을 견디게 하려고 motion.js 가
+ * 작은 그림을 돌리는데, 이건 그 생각을 한 뼘 더 밀고 간 것이다 — 지금 무슨
+ * 일이 얼마나 돌아가고 있는지를 **방 하나로** 보여 준다.
+ *
+ * ── 규칙 하나 ───────────────────────────────────────────────────────────
+ *
+ * **화면에 있는 것은 전부 진짜 숫자다.** 꾸미려고 놓은 것은 하나도 없다.
+ * 자리가 셋 차 있으면 지금 도는 일이 셋이고, 서랍이 차 있으면 그만큼 파일을
+ * 읽은 것이고, 서버 불이 길면 모델을 그만큼 부른 것이다. 이걸 안 지키면
+ * 그냥 배경화면이 되고, 지키면 상태줄을 방으로 그린 것이 된다.
+ *
+ * ── 왜 반칸(▀)인가 ──────────────────────────────────────────────────────
+ *
+ * 한 칸에 픽셀 둘을 넣는다 — 위는 글자색, 아래는 배경색, 글자는 ▀. 세로
+ * 해상도가 두 배가 되고 칸이 정사각형에 가까워져 그림이 안 눌린다.
+ * motion.js 의 점자와 길이 갈리는 이유는 **색** 이다. 점자는 켜짐/꺼짐뿐이라
+ * 사무실이 갈색 죽이 된다.
+ *
+ * ── 가벼움 ──────────────────────────────────────────────────────────────
+ *
+ * 한 판을 통째로 보내면 9KB 가 넘는다. 그런데 판이 바뀔 때 실제로 달라지는
+ * 것은 **열두 줄 중 한 줄** 뿐이다(벽·창문·서류함·빈 책상은 그대로다).
+ * 그래서 상자가 바뀐 줄만 보낸다(inputbox 의 그리기). 그 덕에 사무실을 켜도
+ * 터미널로 나가는 양이 켜기 전과 비슷하다.
+ */
+import { 색256가능 } from './ansi.js';
+
+const ESC = '\x1b';
+const 투명 = -1;
+
+export const 세로 = 24;          // 픽셀. 칸으로는 12줄
+export const 줄수 = 세로 / 2;
+const 벽 = 6;                    // 벽은 눌러 뒀다 — 사람 자리를 벌기 위해
+
+// ── 색 (xterm 256) ──────────────────────────────────────────────────────
+const C = {
+  바닥: 138, 바닥줄: 95, 벽: 238, 굽도리: 145,
+  나무: 137, 나무어둠: 94, 나무진: 58,
+  쇠: 145, 쇠어둠: 102, 쇠진: 59, 검정: 235,
+  화면: 45, 화면꺼짐: 239, 화면글: 123, 살: 223,
+  머리: [52, 240, 94, 130], 옷: [67, 131, 71, 97],
+  밤: 17, 별: 226, 낮: 111, 구름: 255,
+  종이: 255, 종이어둠: 250, 쪽지: 227, 쪽지끝: 120, 초록: 46,
+};
+
+// ── 픽셀 판 ─────────────────────────────────────────────────────────────
+class 판 {
+  constructor(가로, 세로칸) {
+    this.가로 = 가로;
+    this.세로 = 세로칸;
+    this.점 = new Int16Array(가로 * 세로칸).fill(투명);
+  }
+
+  찍기(x, y, 색) {
+    if (색 === 투명 || 색 == null) return;
+    if (x < 0 || y < 0 || x >= this.가로 || y >= this.세로) return;
+    this.점[y * this.가로 + x] = 색;
+  }
+
+  칠하기(x, y, w, h, 색) {
+    for (let j = 0; j < h; j++) for (let i = 0; i < w; i++) this.찍기(x + i, y + j, 색);
+  }
+
+  올리기(x, y, 그림, 색표) {
+    for (let j = 0; j < 그림.length; j++) {
+      const 줄 = 그림[j];
+      for (let i = 0; i < 줄.length; i++) {
+        const 색 = 색표[줄[i]];
+        if (색 !== undefined) this.찍기(x + i, y + j, 색);
+      }
+    }
+  }
+
+  /** 화면에 내보낼 줄들. 색이 안 바뀌면 제어문자를 다시 안 쓴다. */
+  줄들() {
+    const 결과 = [];
+    for (let y = 0; y < this.세로; y += 2) {
+      let s = '';
+      let 앞위 = null;
+      let 앞아래 = null;
+      for (let x = 0; x < this.가로; x++) {
+        const 위 = this.점[y * this.가로 + x];
+        const 아래 = this.점[(y + 1) * this.가로 + x];
+        if (위 === 투명 && 아래 === 투명) {
+          if (앞위 !== null || 앞아래 !== null) { s += `${ESC}[0m`; 앞위 = null; 앞아래 = null; }
+          s += ' ';
+          continue;
+        }
+        if (위 !== 앞위) { s += `${ESC}[38;5;${위 === 투명 ? 0 : 위}m`; 앞위 = 위; }
+        if (아래 !== 앞아래) { s += `${ESC}[48;5;${아래 === 투명 ? 0 : 아래}m`; 앞아래 = 아래; }
+        s += '▀';
+      }
+      결과.push(s + `${ESC}[0m`);
+    }
+    return 결과;
+  }
+}
+
+/*
+ * ── 일하는 자리 18×14 ───────────────────────────────────────────────────
+ *
+ * 사람과 책상을 따로 그렸더니 반 픽셀씩 어긋나 팔이 책상을 뚫었다. 그래서
+ * 한 장으로 그린다 — 한 그림 안에 있으면 어긋날 자리가 없다.
+ *
+ * 짧은 판이라고 사람을 줄이면 자세가 안 읽힌다(조는 머리가 화면 뒤로 숨는다).
+ * 줄여야 할 것은 사람이 아니라 **여백**이다. 그래서 벽을 눌렀다.
+ */
+const 화면줄 = (내용) => `   M${내용.padEnd(10, 'S').slice(0, 10)}M   `;
+const 빈 = ' '.repeat(18);
+const 사람 = [
+  '      hhhhhh      ',
+  '     hhhhhhhh     ',
+  '     hffffffh     ',
+  '     hffffffh     ',
+  '      ffffff      ',
+  '    bbbbbbbbbb    ',
+];
+const 책상 = ['   MMMMMMMMMMMM   ', 'DDDDDDDDDDDDDDDDDD', 'dddddddddddddddddd', 'd                d'];
+const 자리짜기 = (위, 화면들) => [...위, '   MMMMMMMMMMMM   ', ...화면들.map(화면줄), ...책상];
+
+const 자세들 = {
+  치기A: 자리짜기(사람, ['GGGGGGGSSS', 'GGGGSSSSSS']),
+  치기B: 자리짜기(사람, ['GGGSSSSSSS', 'GGGGGGGSSS']),
+  읽기A: 자리짜기([빈, ...사람.slice(0, 5)], ['GGGGGGGGGG', 'SSSSSSSSSS']),
+  읽기B: 자리짜기([빈, 빈, ...사람.slice(0, 4)], ['SSSSSSSSSS', 'GGGGGGGGGG']),
+  졸기: 자리짜기([빈, 빈, 빈, '      hhhhhh      ', '    hhffffffhh    ', '     ffffff       '],
+    ['SSSSSSSSSS', 'SSSSSSSSSS']),
+  대기: 자리짜기(사람, ['SSSSSSSSSS', 'SSSSSSSSSS']),
+  빈자리: 자리짜기([빈, 빈, 빈, 빈, 빈, 빈], ['SSSSSSSSSS', 'SSSSSSSSSS']),
+};
+const 자리폭 = 18;
+const 자리높이 = 14;
+
+function 자리색(자세, 머리, 옷) {
+  const 꺼짐 = 자세 === '빈자리';
+  return {
+    h: 머리, f: C.살, b: 옷,
+    M: C.검정, S: 꺼짐 ? C.화면꺼짐 : C.화면, G: C.화면글,
+    D: 꺼짐 ? C.나무어둠 : C.나무, d: 꺼짐 ? C.나무진 : C.나무어둠,
+  };
+}
+
+/**
+ * 방 한 판을 줄들로.
+ *
+ * @param {object} 상태 아래 상태만들기() 가 만든 것
+ * @param {number} 폭   터미널 칸 수
+ */
+export function 사무실줄들(상태, 폭) {
+  const {
+    일꾼들 = [], 읽은파일 = 0, 고친파일 = 0, 할일 = 0, 끝난일 = 0,
+    부른횟수 = 0, 창 = 0, 틱 = 0,
+  } = 상태;
+
+  const 가로 = Math.max(60, 폭);
+  const p = new 판(가로, 세로);
+  p.칠하기(0, 0, 가로, 벽, C.벽);
+  p.칠하기(0, 벽, 가로, 1, C.굽도리);
+  p.칠하기(0, 벽 + 1, 가로, 세로 - 벽 - 1, C.바닥);
+
+  const 밤인가 = 창 > 0.55;
+
+  // 화이트보드 18×5 — 할 일. 끝난 것은 초록, 남은 것은 노랑.
+  {
+    const 그림 = ['FFFFFFFFFFFFFFFFFF'];
+    for (let r = 0; r < 3; r++) 그림.push(`F${'W'.repeat(16)}F`);
+    그림.push('FFFFFFFFFFFFFFFFFF');
+    const 총 = Math.min(5, 할일 + 끝난일);
+    for (let n = 0; n < 총; n++) {
+      const x = 2 + n * 3;
+      for (const r of [1, 2, 3]) {
+        const 줄 = 그림[r].split('');
+        줄[x] = n < 끝난일 ? 'D' : 'N';
+        줄[x + 1] = n < 끝난일 ? 'D' : 'N';
+        그림[r] = 줄.join('');
+      }
+    }
+    p.올리기(1, 0, 그림, { F: C.쇠어둠, W: C.종이, N: C.쪽지, D: C.쪽지끝 });
+  }
+
+  // 서버 불빛 14×5 — 모델 호출. 오른쪽 벽 끝.
+  {
+    const 그림 = ['RRRRRRRRRRRRRR'];
+    for (let r = 0; r < 3; r++) {
+      let 줄 = 'R';
+      for (let k = 0; k < 12; k++) 줄 += k < Math.min(12, 부른횟수 * 2) ? 'L' : 'l';
+      그림.push(줄 + 'R');
+    }
+    그림.push('RRRRRRRRRRRRRR');
+    p.올리기(가로 - 15, 0, 그림, { R: C.검정, L: C.초록, l: C.쇠진 });
+  }
+
+  // 창문 — 벽에 남는 자리만큼. 컨텍스트가 차면 밤이 된다.
+  {
+    const 시작 = 21;
+    const 남 = 가로 - 15 - 시작;
+    const 창수 = Math.max(0, Math.floor(남 / 18));
+    for (let i = 0; i < 창수; i++) {
+      const 그림 = ['FFFFFFFFFFFFFFFF'];
+      for (let r = 0; r < 3; r++) {
+        let 줄 = 'F';
+        for (let k = 0; k < 14; k++) {
+          const h = (i * 37 + r * 19 + k * 11) % 29;
+          줄 += k === 7 ? 'F' : (밤인가 ? (h < 5 ? '*' : '.') : (h < 3 ? 'o' : ','));
+        }
+        그림.push(줄 + 'F');
+      }
+      그림.push('FFFFFFFFFFFFFFFF');
+      p.올리기(시작 + i * 18, 0, 그림, 밤인가
+        ? { F: C.쇠어둠, '.': C.밤, '*': C.별 }
+        : { F: C.쇠어둠, ',': C.낮, o: C.구름 });
+    }
+  }
+
+  // 서류함 12×12 — 읽은 파일. 서랍 하나가 일곱쯤.
+  {
+    const 찬칸 = Math.min(3, Math.ceil(읽은파일 / 7));
+    const 그림 = ['CCCCCCCCCCCC'];
+    for (let s = 0; s < 3; s++) {
+      const 안 = s < 찬칸 ? 'P' : 'c';
+      그림.push(`C${안.repeat(4)}HH${안.repeat(4)}C`);
+      그림.push(`C${안.repeat(10)}C`);
+      그림.push('CCCCCCCCCCCC');
+    }
+    p.올리기(1, 벽 + 5, 그림.slice(0, 12), { C: C.쇠어둠, c: C.쇠, P: C.종이어둠, H: C.쇠진 });
+  }
+
+  /*
+   * 일하는 자리. **늘 같은 수를 그린다** — 일이 늘 때 자리가 차오르는 것으로
+   * 보여야 하는데, 없는 자리를 새로 그리면 방이 늘었다 줄었다 해서 어지럽다.
+   */
+  const 왼쪽 = 15;
+  const 자리수 = Math.max(1, Math.floor((가로 - 왼쪽 - 2) / (자리폭 + 1)));
+  const 짝 = Math.floor(틱 / 5) % 2 === 0;
+  for (let i = 0; i < 자리수; i++) {
+    const x = 왼쪽 + i * (자리폭 + 1);
+    const y = 세로 - 자리높이;
+    const 그사람 = 일꾼들[i];
+    const 자세 = !그사람 ? '빈자리'
+      : 그사람.갈래 === '쓰기' ? (짝 ? '치기A' : '치기B')
+        : 그사람.갈래 === '읽기' ? (짝 ? '읽기A' : '읽기B')
+          : 그사람.갈래 === '졸기' ? '졸기' : '대기';
+    p.올리기(x, y, 자세들[자세], 자리색(자세, C.머리[i % 4], C.옷[i % 4]));
+    // 조는 사람 머리 위 z
+    if (자세 === '졸기' && 짝) p.칠하기(x + 13, y + 2, 2, 1, C.종이);
+    // 고친 파일은 책상 위 종이로
+    if (i < 고친파일) p.칠하기(x + 13, y + 9, 4, 1, C.종이);
+  }
+
+  return p.줄들();
+}
+
+/*
+ * ── 켜나 마나 ───────────────────────────────────────────────────────────
+ *
+ * 기본은 꺼져 있다. 화면 절반을 먹는 것을 묻지도 않고 켜면 안 된다.
+ *
+ * 켜 달라고 해도 못 켜는 자리가 있다.
+ *   · 256색이 안 되는 터미널 — 색 번호가 글에 그대로 새어 나온다
+ *   · 그림을 끈 사람 (DEEL_NO_MOTION) — 화면 읽기 프로그램을 쓰는 자리다
+ *   · 화면이 낮은 터미널 — 사무실 12줄 + 상자 5줄이면 대화가 들어갈 자리가
+ *     없다. 사무실을 보려고 도구를 못 쓰게 되는 것은 앞뒤가 바뀐 것이다.
+ */
+export const 최소높이 = 28;
+
+/**
+ * 사람이 켜 달라고 했나 (화면이 되는지는 안 본다).
+ *
+ * 켜나() 와 갈라 두는 이유: 상자 안 그림(기사·동물)을 끌지 말지는 **뜻**으로
+ * 정해야지 화면 높이로 정하면 안 된다. 창을 줄였다 늘였다 할 때마다 상자 안
+ * 그림이 기사였다 돌림표였다 하면 무슨 규칙인지 아무도 모른다.
+ */
+export function 켜달라했나() {
+  const v = String(process.env.DEEL_OFFICE ?? '').trim().toLowerCase();
+  return v === '1' || v === 'on' || v === '켬' || v === '사무실';
+}
+
+export function 켜나(rows = process.stdout.rows) {
+  if (!켜달라했나()) return false;
+  if (process.env.DEEL_NO_MOTION) return false;
+  if (!색256가능()) return false;
+  return (rows ?? 0) >= 최소높이;
+}
+
+/**
+ * 세션에서 방 상태를 뽑는다.
+ *
+ * 여기가 '전부 진짜 숫자' 를 지키는 자리다. 없는 값은 0 으로 두지, 그럴듯한
+ * 것으로 채우지 않는다.
+ *
+ * @param {object} session
+ * @param {object} 일감   지금 도는 일 (없으면 null)
+ * @param {number} 틱
+ */
+export function 상태만들기(session, 일감, 틱 = 0, 할일들 = [], 도는하위 = 0) {
+  const s = session ?? {};
+  const 쓴것 = s.usage ?? {};
+  const 총토큰 = (쓴것.in ?? 0) + (쓴것.out ?? 0);
+  const 창크기 = s.conn?.ctx ?? 0;
+
+  /*
+   * 자리에 앉는 사람들.
+   *
+   * 지금은 도는 일이 하나(또는 하위 작업만큼)다. 갈래는 일감이 말해 주는
+   * 것을 그대로 쓴다 — motion.js 가 쓰는 그 갈래다.
+   */
+  const 일꾼들 = [];
+  if (일감) {
+    const 오래됐나 = 일감.갈래 === '느긋';
+    const 갈래 = 오래됐나 ? '졸기'
+      : ['읽기', '웹'].includes(일감.갈래) ? '읽기'
+        : ['쓰기', '명령', '답'].includes(일감.갈래) ? '쓰기' : '대기';
+    // 하위 작업이 돌면 그만큼 자리가 더 찬다. 부모 몫 하나는 늘 있다.
+    const 수 = 1 + Math.max(0, 도는하위);
+    for (let i = 0; i < 수; i++) 일꾼들.push({ 갈래 });
+  }
+
+  return {
+    일꾼들,
+    읽은파일: s.filesRead?.size ?? 0,
+    고친파일: s.changes?.size ?? 0,
+    끝난일: 할일들.filter((t) => t.state === 'done').length,
+    할일: 할일들.filter((t) => t.state !== 'done').length,
+    부른횟수: 쓴것.calls ?? 0,
+    토큰: 총토큰,
+    창: 창크기 ? Math.min(1, 총토큰 / 창크기) : 0,
+    틱,
+  };
+}