@noobdemon/noob-cli 1.7.5 → 1.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noobdemon/noob-cli",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "publishConfig": {
     "access": "public"
   },
@@ -12,6 +12,7 @@
   "files": [
     "bin/",
     "src/",
+    "skills/",
     "README.md",
     "LICENSE"
   ],

package/skills/frontend-design/SKILL.md

@@ -0,0 +1,42 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.
+license: Complete terms in LICENSE.txt
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

package/src/agent.js

@@ -123,14 +123,18 @@ function runtimeContext() {
 // Lược ngữ cảnh để không vượt context khi phiên dài. KHÔNG đụng vào history thật
 // (vẫn lưu/đầy đủ để resume) — chỉ thu gọn BẢN SAO dùng cho prompt.
 // Nếu history đã có summary (do summarizeHistory ghi vào _summary), dùng làm head.
-function compact(history, budget) {
+// Exported cho test (scripts/test-compact.js) — không dùng ngoài file này.
+export function compact(history, budget) {
   const len = (m) => (m.content || "").length + 24;
   let total = history.reduce((s, m) => s + len(m), 0);
   if (total <= budget) return history;
   const out = history.map((m) => ({ ...m }));
   // (1) Rút gọn các TOOL RESULT cũ trước (giữ 5 cái gần nhất) — đây là phần phình
   // nhất (đọc file lớn) và model đã xử lý xong rồi.
-  const toolIdx = out.map((m, i) => (m.role === "tool" ? i : -1)).filter((i) => i >= 0);
+  // SKIP session_summary — đó là bộ nhớ dài hạn, không phải tool result cồng kềnh.
+  const toolIdx = out
+    .map((m, i) => (m.role === "tool" && m.name !== "session_summary" ? i : -1))
+    .filter((i) => i >= 0);
   for (const i of toolIdx.slice(0, Math.max(0, toolIdx.length - 5))) {
     if (total <= budget) break;
     const before = len(out[i]);
@@ -138,11 +142,17 @@ function compact(history, budget) {
     total -= before - len(out[i]);
   }
   if (total <= budget) return out;
-  // (2) Vẫn dài → bỏ các lượt cũ nhất, giữ USER đầu tiên (mô tả nhiệm vụ gốc) +
-  // 12 message gần nhất.
+  // (2) Vẫn dài → bỏ các lượt cũ nhất, giữ MỌI session_summary (bộ nhớ dài hạn
+  // do maybeSummarize() chèn) + USER đầu tiên (nhiệm vụ gốc) + 12 message gần
+  // nhất. KHÔNG BỎ session_summary — đó là bộ nhớ phiên, mất nó là mất hết.
+  const summaryIdx = out
+    .map((m, i) => (m.role === "tool" && m.name === "session_summary" ? i : -1))
+    .filter((i) => i >= 0);
   const firstUser = out.findIndex((m) => m.role === "user");
-  const head = firstUser >= 0 ? [out[firstUser]] : [];
-  const tailStart = Math.max(firstUser + 1, out.length - 12);
+  const headIndices = new Set([...summaryIdx, ...(firstUser >= 0 ? [firstUser] : [])]);
+  const head = [...headIndices].sort((a, b) => a - b).map((i) => out[i]);
+  const maxHeadIdx = head.length ? Math.max(...headIndices) : -1;
+  const tailStart = Math.max(maxHeadIdx + 1, out.length - 12);
   const elided = { role: "tool", name: "context", content: "[… các lượt trước đã được lược bớt …]" };
   return [...head, elided, ...out.slice(tailStart)];
 }
@@ -214,7 +224,8 @@ ${transcript}`;
 // tool có thật (không phải từ lời model tự kể). Chống lỗi model "tưởng đã tạo
 // file" (chỉ kể trong văn xuôi, quên gọi write_file) rồi khăng khăng "file bị
 // revert". Dựng từ history ĐẦY ĐỦ (kể cả khi đã nén) để luôn đúng thực tế.
-function filesLedger(history) {
+// Exported cho test (scripts/test-files-ledger.js).
+export function filesLedger(history) {
   const touched = new Map(); // path -> "đã ghi" | "đã sửa"
   for (const m of history) {
     if (m.role !== "tool" || typeof m.content !== "string" || m.content.startsWith("ERROR")) continue;
@@ -265,7 +276,10 @@ function buildPrompt(history, extraToolsDoc) {
     parts.push("");
   }
   parts.push("=".repeat(60));
-  parts.push("Continue. Emit a tool block to act, or reply in Markdown if done.");
+  // Recency bias: câu chốt cuối prompt nằm ở vị trí attention mạnh nhất. Nhắc
+  // model đối chiếu FILES CHANGED trước khi claim đã sửa file — chống ảo giác
+  // "đã tạo file" khi chưa gọi write_file/edit_file.
+  parts.push("Continue. Emit a tool block to act, or reply in Markdown if done. Before claiming any file was created/edited, verify it appears in the FILES CHANGED list above — if not, emit the tool call now.");
   return parts.join("\n");
 }
 

package/src/skills.js

@@ -1,43 +1,68 @@
-// Quản lý skills của project: mỗi skill là một thư mục `skills/<name>/` chứa
-// `SKILL.md` (theo quy ước Anthropic). Khi user gõ `/<skill-name>`, repl sẽ nạp
-// nội dung SKILL.md đó như context bổ sung rồi giao việc cho agent.
+// Quản lý skills: mỗi skill là một thư mục `skills/<name>/` chứa `SKILL.md`
+// (theo quy ước Anthropic). Khi user gõ `/<skill-name>`, repl nạp nội dung
+// SKILL.md đó như context bổ sung rồi giao việc cho agent.
+//
+// Resolve theo 2 tầng:
+//   1) `<cwd>/skills/<name>/SKILL.md`  — skill user tự viết trong project của họ
+//      (override được skill mặc định, để tinh chỉnh phong cách riêng).
+//   2) `<noob-cli-package>/skills/<name>/SKILL.md`  — skill đóng gói theo CLI,
+//      đảm bảo `npm i -g @noobdemon/noob-cli` xong là `/frontend-design` chạy
+//      được trên MỌI máy mà không cần clone repo.
 //
 // API tối giản — không over-engineer:
 //   loadSkill(name)  -> string | null  (nội dung SKILL.md, null nếu không có)
-//   listSkills()     -> string[]       (tên skill có sẵn ở cwd)
-//   skillPath(name)  -> string         (đường dẫn tuyệt đối SKILL.md)
+//   listSkills()     -> string[]       (tên skill có sẵn, gộp 2 nguồn)
+//   skillPath(name)  -> string | null  (đường dẫn tuyệt đối SKILL.md đã resolve)
 
 import fs from "node:fs";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+// Thư mục `skills/` đi kèm package (cùng cấp với `src/`, `bin/`).
+// `import.meta.url` -> .../noob-cli/src/skills.js  =>  ../skills
+const PACKAGE_SKILLS_DIR = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..", "skills");
 
-function skillsDir() {
+function userSkillsDir() {
   return path.join(process.cwd(), "skills");
 }
 
+function candidatePaths(name) {
+  return [
+    path.join(userSkillsDir(), name, "SKILL.md"), // user override trước
+    path.join(PACKAGE_SKILLS_DIR, name, "SKILL.md"), // built-in của CLI
+  ];
+}
+
 export function skillPath(name) {
-  return path.join(skillsDir(), name, "SKILL.md");
+  for (const p of candidatePaths(name)) {
+    if (fs.existsSync(p)) return p;
+  }
+  return null;
 }
 
 export function loadSkill(name) {
   try {
     const p = skillPath(name);
-    if (!fs.existsSync(p)) return null;
+    if (!p) return null;
     return fs.readFileSync(p, "utf8");
   } catch {
     return null;
   }
 }
 
-export function listSkills() {
+function listIn(dir) {
   try {
-    const dir = skillsDir();
     if (!fs.existsSync(dir)) return [];
     return fs
       .readdirSync(dir, { withFileTypes: true })
       .filter((e) => e.isDirectory() && fs.existsSync(path.join(dir, e.name, "SKILL.md")))
-      .map((e) => e.name)
-      .sort();
+      .map((e) => e.name);
   } catch {
     return [];
   }
 }
+
+export function listSkills() {
+  const merged = new Set([...listIn(userSkillsDir()), ...listIn(PACKAGE_SKILLS_DIR)]);
+  return [...merged].sort();
+}

package/src/tui.js

@@ -163,14 +163,20 @@ export function createTui({ onLine, onInterrupt, onEOF, onShiftTab, completer }
   function topRow() {
     if (liveOut) {
       // Khi đang stream prose mà busy, ghép meta (elapsed+token) vào cuối liveOut
-      // để user vẫn thấy phiên đang sống — không bị che status bar.
+      // CHỈ KHI liveOut đủ ngắn để cả dòng (liveOut + meta) chắc chắn fit trong
+      // 1 dòng terminal. Nếu liveOut quá dài → ưu tiên prose, bỏ meta lượt này
+      // (tránh terminal wrap làm dòng tạm kẹt lại trong prose vĩnh viễn — xem
+      // Note "token meter chèn vào prose" trong noob.md).
       if (busy && busyMeta) {
         const meta = c.dim(" · " + busyMeta);
-        const budget = Math.max(0, cols() - visLen(meta));
-        const head = liveOut.length > budget ? liveOut.slice(0, budget) : liveOut;
-        return head + meta;
+        const metaLen = visLen(meta);
+        const liveLen = visLen(liveOut);
+        if (liveLen + metaLen <= cols()) {
+          return liveOut + meta;
+        }
+        // liveOut đã dài: hiện prose nguyên trạng, bỏ meta để tránh wrap.
       }
-      return liveOut.slice(0, cols());
+      return liveOut.length > cols() ? liveOut.slice(0, cols()) : liveOut;
     }
     const spin = FRAMES[frame % FRAMES.length];
     // Khi busy, LUÔN hiện elapsed+tokens (busyMeta) cạnh statusText/busyLabel để