git-push-time 1.1.1 → 1.1.2

package/lib/ui.js

@@ -1,16 +1,24 @@
 import chalk from "chalk";
+import boxen from "boxen";
 import stringWidth from "string-width";
 
 /**
- * Tự động tính chiều rộng card theo Terminal, có giới hạn cho cửa sổ rộng.
+ * Chiều rộng khung thống nhất cho toàn bộ UI.
+ * - Luôn bằng nhau giữa dashboard / banner / prompt / box chi tiết
+ *   nên các khung xếp chồng không bị lệch (vỡ giao diện).
+ * - Terminal hẹp thì co theo `cols - 2`, terminal rộng thì cap 76.
  */
 export function getW() {
-  const cols = process.stdout.columns || 72;
-  return Math.min(76, Math.max(24, cols - 4));
+  const cols = process.stdout.columns;
+  if (!cols || cols < 10) return 72;
+  const avail = cols - 2;
+  // Terminal quá hẹp (<34): dùng đúng phần hiển thị được, tránh tràn dòng.
+  if (avail < 34) return Math.max(24, avail);
+  return Math.min(76, avail);
 }
 
 function fitStyled(text, maxWidth) {
-  const value = String(text ?? '');
+  const value = String(text ?? '').replace(/[\r\n\t]+/g, ' ');
   if (maxWidth <= 0) return '';
   if (stringWidth(value) <= maxWidth) return value;
 
@@ -73,58 +81,93 @@ export function truncateVisual(str, maxLen) {
   return fitStyled(str, maxLen);
 }
 
+/** Khung tiêu đề nhất quán cho từng bước tương tác trong terminal. */
+export function framePrompt(message) {
+  // Dùng cùng getW() với mọi box khác để các khung luôn thẳng hàng,
+  // không còn tình trạng prompt hẹp (56) còn dashboard rộng (76) gây vỡ.
+  return boxen(String(message ?? ""), {
+    borderStyle: "round",
+    borderColor: "#818CF8",
+    padding: { left: 1, right: 1, top: 0, bottom: 0 },
+    width: getW(),
+    textAlignment: "center",
+  });
+}
+
 /* ==========================================================================
    BOX ENGINE CHUẨN (Bo góc mềm & Căn lề pixel-perfect)
    ========================================================================== */
 
 export function boxTop(title = "", borderColor = chalk.hex("#334155")) {
   const W = getW();
-  if (!title) return borderColor("╭" + "─".repeat(W - 2) + "╮");
+  if (!title) return borderColor("╭" + "─".repeat(Math.max(2, W - 2)) + "╮");
 
-  const fittedTitle = fitStyled(title, W - 8);
+  // Căn giữa tiêu đề để 2 bên đều nhau: ╭──── Title ────╮
+  // Chừa 1 space mỗi bên title + tối thiểu 2 gạch mỗi bên.
+  const maxTitle = Math.max(4, W - 8);
+  const fittedTitle = fitStyled(title, maxTitle);
   const titleWidth = stringWidth(fittedTitle);
-  const leftDash = "─".repeat(3);
-  const rightDashLen = Math.max(0, W - 2 - 3 - titleWidth);
+  const remaining = Math.max(4, W - 2 - titleWidth - 2);
+  const leftLen = Math.ceil(remaining / 2);
+  const rightLen = Math.floor(remaining / 2);
   return (
-    borderColor("╭" + leftDash) +
+    borderColor("╭" + "─".repeat(leftLen) + " ") +
     fittedTitle +
-    borderColor("─".repeat(rightDashLen) + "╮")
+    borderColor(" " + "─".repeat(rightLen) + "╮")
   );
 }
 
+/** Khung tiêu đề căn trái theo lề nội dung của boxRow. */
+export function boxTopLeft(title = "", borderColor = chalk.hex("#334155")) {
+  const W = getW();
+  if (!title) return borderColor("╭" + "─".repeat(Math.max(2, W - 2)) + "╮");
+  const fittedTitle = truncateVisual(title, W - 6);
+  const titleWidth = stringWidth(fittedTitle);
+  const rightDash = Math.max(0, W - titleWidth - 4);
+  return borderColor("╭ ") + fittedTitle + borderColor(" " + "─".repeat(rightDash) + "╮");
+}
+
 export function boxBottom(borderColor = chalk.hex("#334155")) {
   const W = getW();
-  return borderColor("╰" + "─".repeat(W - 2) + "╯");
+  return borderColor("╰" + "─".repeat(Math.max(2, W - 2)) + "╯");
 }
 
 export function boxRow(content = "", borderColor = chalk.hex("#334155")) {
   const W = getW();
-  return borderColor("│ ") + pad(fitStyled(content, W - 4), W - 4) + borderColor(" │");
+  const inner = Math.max(4, W - 4);
+  return borderColor("│ ") + pad(fitStyled(content, inner), inner) + borderColor(" │");
 }
 
 export function boxDivider(borderColor = chalk.hex("#334155")) {
   const W = getW();
-  return borderColor("├" + "─".repeat(W - 2) + "┤");
+  return borderColor("├" + "─".repeat(Math.max(2, W - 2)) + "┤");
 }
 
 /**
- * Hàng Key-Value có đường nối bằng dấu chấm ․ ․ ․
+ * Hàng Key-Value có đường nối bằng dấu chấm · · ·
+ * Dùng "·" (U+00B7) thay vì "․" (U+2024) để không bị vỡ font trên
+ * Windows PowerShell / Consolas. Label không còn bị cắt oan khi
+ * terminal hẹp nhờ công thức fitted mới.
+ */
+/**
+ * Hàng Key-Value có đường nối bằng dấu chấm · · ·
+ * Căn lề chuẩn xác, khoảng cách đều và không bị vỡ font trên mọi terminal.
  */
 export function boxKvDot(
   label,
   value,
-  labelWidth = 16,
+  labelWidth = 14,
   borderColor = chalk.hex("#334155"),
 ) {
   const W = getW();
-  const innerWidth = W - 4;
-  const fittedLabelWidth = Math.min(labelWidth, Math.max(8, Math.floor(innerWidth * 0.4)));
-  const maxValWidth = Math.max(4, innerWidth - fittedLabelWidth - 1);
+  const innerWidth = Math.max(8, W - 4);
+  const fittedLabelWidth = Math.min(labelWidth, Math.max(4, innerWidth - 10));
+  const maxValWidth = Math.max(4, innerWidth - fittedLabelWidth - 4);
   const truncatedVal = truncateVisual(value, maxValWidth);
   const valWidth = stringWidth(truncatedVal);
 
-  const dotsLen = Math.max(1, innerWidth - fittedLabelWidth - valWidth);
-  const dots = chalk.hex("#1E293B")("․".repeat(dotsLen));
+  const dotsLen = Math.max(2, innerWidth - fittedLabelWidth - valWidth - 2);
+  const dots = " " + chalk.hex("#334155")("·".repeat(dotsLen)) + " ";
   const formattedLabel = chalk.hex("#94A3B8")(
     pad(fitStyled(label, fittedLabelWidth), fittedLabelWidth),
   );
@@ -136,66 +179,204 @@ export function boxKvDot(
    PUBLIC INTERFACE & BANNER
    ========================================================================== */
 
+/* ==========================================================================
+   CYBER CAT MASCOT — 20x12 pixel art grid, two pixel rows per terminal cell
+   ========================================================================== */
+
+const MASCOT_COLORS = {
+  P: "#818CF8", // Indigo ears
+  W: "#F8FAFC", // White face
+  C: "#38BDF8", // Cyan visor
+  E: "#06B6D4", // Visor eye glow
+  K: "#0F172A", // Dark visor frame
+  M: "#F43F5E", // Rose nose/mouth
+  G: "#10B981", // Emerald badge
+  B: "#334155", // Slate base
+  ".": "transparent",
+};
+
+const MASCOT_GRID = [
+  "..PP............PP......",
+  ".PPPP..........PPPP.....",
+  ".PPWW..........WWPP.....",
+  "WWWWWWWWWWWWWWWWWWWW....",
+  "WWKKKKKKKKKKKKKKWWWW....",
+  "WWKCCCCCCCCCCCCKWWWW....",
+  "WWKCEKEEEEEEKECKWWWW....",
+  "WWKKKKKKKKKKKKKKWWWW....",
+  "WWWWWWWWMMWWWWWWWWWW....",
+  ".WWWWWWWWWWWWWWWWWW..P..",
+  "..WWWW..GGGG..WWWWWWWW..",
+  "..BBBB..BBBB..BBBBWWWW..",
+];
+
+export function mascotLines() {
+  const lines = [];
+  for (let y = 0; y < MASCOT_GRID.length; y += 2) {
+    let line = "";
+    for (let x = 0; x < MASCOT_GRID[y].length; x++) {
+      const top = MASCOT_GRID[y][x];
+      const bot = MASCOT_GRID[y + 1][x];
+      if (top === "." && bot === ".") line += " ";
+      else if (top === "." || bot === ".") {
+        const pixel = top === "." ? bot : top;
+        line += chalk.hex(MASCOT_COLORS[pixel])(top === "." ? "▄" : "▀");
+      } else if (top === bot) {
+        line += chalk.hex(MASCOT_COLORS[top])("█");
+      } else {
+        line += chalk.hex(MASCOT_COLORS[top]).bgHex(MASCOT_COLORS[bot])("▀");
+      }
+    }
+    lines.push(line);
+  }
+  return lines;
+}
+
 /**
- * Banner DevTools sắc nét, hiện đại
+ * Banner: Cyber Cat Mascot + Wordmark + Badges
  */
-export function printBanner(version = "1.1.0") {
-  const ascii = [
-    "   ____ _ _    ____            _       _____ _                 ",
-    "  / ___(_) |_  |  _ \\ _   _ ___| |__   |_   _(_)_ __ ___   ___  ",
-    " | |  _| | __| | |_) | | | / __| '_ \\    | | | | '_ ` _ \\ / _ \\ ",
-    " | |_| | | |_  |  __/| |_| \\__ \\ | | | |   | | | | | | | | |  __/ ",
-    "  \\____|_|\\__| |_|    \\__,_|___/_| |_|   |_| |_|_| |_| |_|\\___| ",
-  ];
-  const terminalWidth = process.stdout.columns || 72;
-  const colors = ["#818CF8", "#38BDF8", "#34D399", "#A7F3D0"];
-  console.log("");
-  if (terminalWidth >= 72) ascii.forEach((line) => console.log(multiGradient(line, colors)));
-  else console.log(multiGradient("  GIT PUSH TIME", colors));
+export function printBanner(version = "1.1.1") {
+  const W = getW();
+  const inner = Math.max(20, W - 2 - 4);
   const badges = [
     chalk.bgHex("#1E1B4B").hex("#818CF8").bold(` v${version} `),
     chalk.bgHex("#064E3B").hex("#34D399").bold(" SMART GIT "),
-    chalk.bgHex("#4338CA").hex("#C7D2FE").bold(" GITHUB SYNC "),
-    chalk.bgHex("#0F172A").hex("#38BDF8").bold(" SECRET SHIELD "),
-    chalk.bgHex("#78350F").hex("#FDE047").bold(" BACKDATE "),
+    chalk.bgHex("#0C4A6E").hex("#38BDF8").bold(" GITHUB SYNC "),
+    chalk.bgHex("#4C0519").hex("#FB7185").bold(" SECRET SHIELD "),
+    chalk.bgHex("#451A03").hex("#FBBF24").bold(" BACKDATE "),
   ];
-  let row = "  ";
+  const rows = [];
+  let row = "";
   for (const badge of badges) {
-    const gap = row.trim() ? " " : "";
-    if (stringWidth(row + gap + badge) > terminalWidth - 2) {
-      console.log(row);
-      row = "  " + badge;
-    } else row += gap + badge;
+    const next = row ? `${row} ${badge}` : badge;
+    if (row && stringWidth(next) > inner) {
+      rows.push(row);
+      row = badge;
+    } else row = next;
   }
-  if (row.trim()) console.log(row);
-  console.log("");
+  if (row) rows.push(row);
+
+  const title = multiGradient("G I T   P U S H   T I M E", [
+    "#818CF8",
+    "#38BDF8",
+    "#2DD4BF",
+    "#F472B6",
+  ]);
+  const subtitle = chalk.hex("#94A3B8")(
+    "Git & GitHub CLI · Đẩy code siêu tốc · An toàn · Đổi giờ commit",
+  );
+  const mascot = mascotLines();
+  const body = [...mascot, "", title, subtitle, "", ...rows].join("\n");
+  const frame = boxen(body, {
+    borderStyle: "round",
+    borderColor: "#6366F1",
+    padding: { top: 1, bottom: 1, left: 2, right: 2 },
+    width: W,
+    textAlignment: "center",
+  });
+  console.log(`\n${frame}\n`);
 }
 
 /**
- * Hiển thị Dashboard trạng thái ngắn gọn ở đầu menu
+ * Hiển thị Dashboard trạng thái ngắn gọn & trực quan ở đầu menu
  */
-export function printDashboardStatus({ targetDir = process.cwd(), currentBranch = "main", githubUser = null }) {
-  const border = chalk.hex("#1E293B");
+export function printDashboardStatus({
+  targetDir = process.cwd(),
+  currentBranch = "main",
+  githubUser = null,
+  remoteUrl = null,
+  changes = 0,
+  lastCommit = null,
+  version = "1.1.1",
+}) {
+  const border = chalk.hex("#6366F1");
+  const W = getW();
+  const remote = remoteUrl ? formatRemoteLabel(remoteUrl) : chalk.hex("#94A3B8")("Chưa liên kết");
+
   const ghStatus = githubUser
-    ? chalk.hex("#34D399").bold(`@${githubUser.login}`) + chalk.hex("#64748B")(" (Đã kết nối)")
-    : chalk.hex("#94A3B8")("Chưa kết nối") + chalk.hex("#64748B")(" [chọn mục GITHUB để login]");
-  console.log(boxTop(chalk.hex("#475569")(" [ TRẠNG THÁI ] "), border));
-  console.log(boxKvDot("Thư mục", chalk.hex("#F8FAFC")(truncateVisual(targetDir, 32)), 14, border));
-  console.log(boxKvDot("Nhánh (Branch)", chalk.hex("#38BDF8").bold(currentBranch), 14, border));
-  console.log(boxKvDot("GitHub Account", ghStatus, 14, border));
+    ? `${chalk.hex("#38BDF8").bold(`@${githubUser.login}`)}  ${chalk.bgHex("#064E3B").hex("#34D399").bold(" [✓ ĐÃ KẾT NỐI] ")}`
+    : chalk.bgHex("#1E1B4B").hex("#A5B4FC").bold(" [○ CHƯA ĐĂNG NHẬP] ");
+
+  const branchPill = changes === 0
+    ? chalk.bgHex("#064E3B").hex("#34D399").bold(" [✓ SẠCH] ")
+    : chalk.bgHex("#78350F").hex("#FDE047").bold(` [● ${changes} THAY ĐỔI] `);
+
+  const branchDisplay = `${chalk.hex("#38BDF8").bold(currentBranch)}  ${branchPill}`;
+
+  console.log("");
+  console.log(
+    boxTop(
+      `${chalk.bold.hex("#F8FAFC")(" BẢNG ĐIỀU KHIỂN GIT ")} ${chalk.hex("#94A3B8")(`v${version}`)}`,
+      border,
+    ),
+  );
+  console.log(boxRow("", border));
+  console.log(boxKvDot("Thư mục", chalk.hex("#F1F5F9").bold(targetDir), 14, border));
+  console.log(boxKvDot("Nhánh Git", branchDisplay, 14, border));
+  console.log(boxKvDot("GitHub", ghStatus, 14, border));
+  console.log(boxKvDot("Remote", remote, 14, border));
+
+  if (lastCommit && lastCommit.hash) {
+    const commitText = `${chalk.hex("#A78BFA").bold(lastCommit.hash)} ${chalk.hex("#CBD5E1")(truncateVisual(lastCommit.message || "", 26))} ${chalk.hex("#64748B")(`(${lastCommit.relativeTime || ""})`)}`;
+    console.log(boxKvDot("Commit gần", commitText, 14, border));
+  }
+
+  console.log(boxRow("", border));
   console.log(boxBottom(border));
 }
 
+function formatRemoteLabel(url) {
+  const value = String(url || "").trim().replace(/\.git$/i, "");
+  const match = value.match(/(?:github\.com[:/])([^/]+\/[^/]+)$/i);
+  return match ? chalk.hex("#38BDF8")(match[1]) : chalk.hex("#CBD5E1")(value);
+}
+
+export function printPushProgress({ current, total = 6, title, completed = [] }) {
+  if (process.stdout.isTTY) process.stdout.write("\u001b[2J\u001b[H");
+  const nodes = Array.from({ length: total }, (_, index) => {
+    const n = index + 1;
+    if (n < current) return chalk.hex("#34D399")("●");
+    if (n === current) return chalk.hex("#38BDF8").bold("●");
+    return chalk.hex("#475569")("○");
+  });
+  const rail = nodes.join(chalk.hex("#334155")("──"));
+  const lead = `${chalk.hex("#38BDF8").bold("PUSH PROGRESS")}  ${rail}`;
+  const detail = chalk.hex("#94A3B8")(`[Bước ${current}/${total} · ${title}]`);
+  console.log("");
+  if (stringWidth(`${lead}  ${detail}`) <= getW() - 2) console.log(`${lead}  ${detail}`);
+  else {
+    console.log(lead);
+    console.log(`  ${detail}`);
+  }
+  if (completed.length) {
+    console.log("");
+    for (const item of completed) {
+      console.log(
+        `  ${chalk.hex("#34D399")("✓")}  ${chalk.hex("#94A3B8")(item.label.padEnd(16))} ${chalk.hex("#334155")("·····")} ${chalk.hex("#F1F5F9")(truncateVisual(item.value, getW() - 28))}`,
+      );
+    }
+  }
+}
+
 /**
  * Tiêu đề phân đoạn với điểm nhấn màu sắc
  */
 export function printSection(title) {
   const W = getW();
-  const marker = chalk.hex("#38BDF8").bold("»");
-  const prefix = chalk.hex("#334155")("── ") + marker + chalk.bold.hex("#F8FAFC")(` ${String(title || "").trim()} `);
-  const remaining = Math.max(0, W - stringWidth(prefix));
+  const marker = chalk.hex("#A78BFA").bold("■");
+  const maxTitle = Math.max(4, W - 12);
+  const fittedTitle = fitStyled(String(title || "").trim(), maxTitle);
+  const coreWidth = stringWidth(fittedTitle) + 4;
+  const remaining = Math.max(4, W - coreWidth);
+  const leftLen = Math.ceil(remaining / 2);
+  const rightLen = Math.floor(remaining / 2);
   console.log("");
-  console.log(prefix + chalk.hex("#334155")("─".repeat(remaining)));
+  console.log(
+    chalk.hex("#334155")("─".repeat(leftLen) + " ") +
+    marker +
+    chalk.bold.hex("#E2E8F0")(` ${fittedTitle} `) +
+    chalk.hex("#334155")("─".repeat(rightLen)),
+  );
 }
 
 /**
@@ -210,17 +391,22 @@ export function stepLabel(current, total, text) {
  * Bảng tóm tắt thông tin trước khi Push
  */
 export function printSummary({ repoUrl, commitMsg, dateDisplay, branch, force, sourceDir }) {
-  const border = chalk.hex("#475569");
-  const title = chalk.bold.bgHex("#4338CA").hex("#FFFFFF")(" XÁC NHẬN THÔNG TIN ĐẨY DỰ ÁN ");
+  const border = chalk.hex("#38BDF8");
+  const title = chalk.bold.hex("#F8FAFC")(" XÁC NHẬN THÔNG TIN PUSH ");
   console.log("");
   console.log(boxTop(title, border));
-  if (sourceDir) console.log(boxKvDot("Thư mục nguồn", chalk.hex("#34D399")(sourceDir), 16, border));
-  console.log(boxKvDot("Git Repository", chalk.hex("#38BDF8").underline(repoUrl), 16, border));
-  console.log(boxKvDot("Commit Message", chalk.hex("#FBBF24").bold(commitMsg), 16, border));
-  console.log(boxKvDot("Thời gian", chalk.hex("#C084FC")(dateDisplay), 16, border));
-  console.log(boxKvDot("Nhánh đẩy lên", chalk.bgHex("#065F46").hex("#6EE7B7").bold(` ${branch} `), 16, border));
-  const forceText = force ? chalk.bgHex("#991B1B").hex("#FCA5A5").bold(" BẬT (--force) [!] ") : chalk.hex("#64748B")("Tắt (chế độ an toàn)");
-  console.log(boxKvDot("Ghi đè (Force)", forceText, 16, border));
+  console.log(boxRow("", border));
+  if (sourceDir) console.log(boxKvDot("Thư mục nguồn", chalk.hex("#F1F5F9")(sourceDir), 16, border));
+  console.log(boxKvDot("Kho lưu trữ", formatRemoteLabel(repoUrl), 16, border));
+  console.log(boxKvDot("Nhánh đích", chalk.hex("#38BDF8").bold(branch), 16, border));
+  console.log(boxKvDot("Thông điệp", chalk.hex("#FDE047")(`"${commitMsg}"`), 16, border));
+  console.log(boxKvDot("Thời điểm", chalk.hex("#A78BFA")(dateDisplay), 16, border));
+  console.log(boxKvDot("Quét Secret", chalk.hex("#34D399")("✓ Tự động kiểm tra trước khi đẩy"), 16, border));
+  if (force) {
+    console.log(boxRow("", border));
+    console.log(boxRow(chalk.hex("#F43F5E").bold("  [!] CẢNH BÁO: Chế độ ghi đè (--force) đang kích hoạt!"), border));
+  }
+  console.log(boxRow("", border));
   console.log(boxBottom(border));
 }
 
@@ -394,6 +580,11 @@ export function printPrePushSecretWarning({ riskyFiles = [], findings = [] }) {
   );
   console.log(boxRow("", border));
 
+  const W2 = getW();
+  const maxFileW = Math.max(10, W2 - 14);
+  const maxLocW = Math.max(10, W2 - 24);
+  const maxPrevW = Math.max(10, W2 - 18);
+
   if (riskyFiles.length > 0) {
     console.log(
       boxRow(chalk.bold.hex("#F8FAFC")("File cấu hình nguy cơ:"), border),
@@ -402,7 +593,7 @@ export function printPrePushSecretWarning({ riskyFiles = [], findings = [] }) {
     showFiles.forEach((f) => {
       const tree = chalk.hex("#64748B")("  +- ");
       console.log(
-        boxRow(tree + chalk.hex("#FCD34D")(truncateVisual(f, 46)), border),
+        boxRow(tree + chalk.hex("#FCD34D")(truncateVisual(f, maxFileW)), border),
       );
     });
     if (riskyFiles.length > 4) {
@@ -427,7 +618,7 @@ export function printPrePushSecretWarning({ riskyFiles = [], findings = [] }) {
     showFindings.forEach((f, idx) => {
       const isLast = idx === showFindings.length - 1;
       const tree = chalk.hex("#64748B")("  +- ");
-      const loc = truncateVisual(`${f.file}:${f.line}`, 26);
+      const loc = truncateVisual(`${f.file}:${f.line}`, maxLocW);
       console.log(
         boxRow(
           tree +
@@ -440,7 +631,7 @@ export function printPrePushSecretWarning({ riskyFiles = [], findings = [] }) {
         const indent = chalk.hex("#64748B")(isLast ? "      " : "  |   ");
         console.log(
           boxRow(
-            indent + chalk.hex("#64748B")(`"${truncateVisual(f.preview, 40)}"`),
+            indent + chalk.hex("#64748B")(`"${truncateVisual(f.preview, maxPrevW)}"`),
             border,
           ),
         );
@@ -555,37 +746,72 @@ export function printSecretBlockedBox(rawMessage, details = {}) {
 /**
  * Card Thông báo Thành công sau khi Push
  */
-export function printSuccessBox({ branch, repoUrl }) {
-  const border = chalk.hex("#059669");
-  const title = chalk.bold.bgHex("#10B981").hex("#064E3B")(" ĐẨY DỰ ÁN LÊN GIT THÀNH CÔNG! ");
+/**
+ * Card Thông báo Thành công sau khi Push
+ */
+export function printSuccessBox({
+  branch,
+  repoUrl,
+  durationSeconds = null,
+  secretStatus = "Đã quét (0 rủi ro)",
+}) {
+  const border = chalk.hex("#10B981");
+  const title = chalk.bold.hex("#F8FAFC")(" PUSH THÀNH CÔNG ");
   console.log("");
   console.log(boxTop(title, border));
   console.log(boxRow("", border));
-  const branchPill = chalk.bgHex("#065F46").hex("#6EE7B7").bold(` ${branch} `);
-  console.log(boxKvDot("Branch", branchPill, 12, border));
-  console.log(boxKvDot("Remote", chalk.hex("#38BDF8").underline(repoUrl), 12, border));
-  console.log(boxKvDot("Trạng thái", chalk.hex("#A7F3D0")("Đồng bộ hoàn tất 100%"), 12, border));
+  console.log(boxKvDot("Nhánh đích", chalk.hex("#34D399").bold(branch), 18, border));
+  console.log(boxKvDot("Trạng thái Secret", chalk.hex("#38BDF8")(secretStatus), 18, border));
+  if (durationSeconds !== null) {
+    console.log(
+      boxKvDot(
+        "Thời gian xử lý",
+        chalk.hex("#FBBF24").bold(`${durationSeconds.toFixed(1)}s`),
+        18,
+        border,
+      ),
+    );
+  }
+  const webUrl = toGitHubWebUrl(repoUrl);
+  if (webUrl) {
+    console.log(boxRow("", border));
+    console.log(boxDivider(border));
+    console.log(
+      boxRow(
+        `${chalk.hex("#34D399")("» Xem trên GitHub:")} ${chalk.hex("#38BDF8").underline(webUrl)}`,
+        border,
+      ),
+    );
+  } else {
+    console.log(boxKvDot("Remote", chalk.hex("#CBD5E1")(truncateVisual(repoUrl, getW() - 14)), 18, border));
+  }
   console.log(boxRow("", border));
-  console.log(boxRow(chalk.hex("#64748B")("» Xem lịch sử commit: git log -1 --stat"), border));
   console.log(boxBottom(border));
   console.log("");
 }
 
+function toGitHubWebUrl(url) {
+  const match = String(url || "").trim().match(/(?:https?:\/\/github\.com\/|git@github\.com:|ssh:\/\/git@github\.com\/)([^/]+\/[^/]+?)(?:\.git)?$/i);
+  return match ? `https://github.com/${match[1]}` : null;
+}
+
 export function printCancelled() {
-  const border = chalk.hex("#D97706");
-  const title = chalk.bold.bgHex("#D97706").hex("#FFFFFF")(
+  const border = chalk.hex("#64748B");
+  const title = chalk.bold.hex("#F8FAFC")(
     " ĐÃ HỦY THAO TÁC ",
   );
   console.log("");
   console.log(boxTop(title, border));
+  console.log(boxRow("", border));
   console.log(
     boxRow(
-      chalk.hex("#FDE68A")(
-        "Không có bất kỳ thay đổi nào được thực hiện trên repo.",
+      chalk.hex("#94A3B8")(
+        "Thao tác đã dừng lại an toàn. Không có thay đổi nào được thực hiện.",
       ),
       border,
     ),
   );
+  console.log(boxRow("", border));
   console.log(boxBottom(border));
   console.log("");
 }
@@ -735,51 +961,84 @@ export function printFixResult({
   failed = [],
 } = {}) {
   const W = getW();
+  const border = chalk.hex("#10B981");
+  const title = chalk.bold.hex("#F8FAFC")(" KẾT QUẢ BẢO VỆ SECRET ");
+
   console.log("");
+  console.log(boxTop(title, border));
+  console.log(boxRow("", border));
+
   if (fixed.length > 0) {
     console.log(
-      chalk.hex("#34D399")(
-        `  [OK] Đã gỡ ${fixed.length} file khỏi commit: ${truncateVisual(fixed.join(", "), W - 32)}`,
+      boxRow(
+        `${chalk.hex("#34D399").bold("[OK] Đã gỡ khỏi commit:")} ${chalk.hex("#F1F5F9")(truncateVisual(fixed.join(", "), W - 28))}`,
+        border,
       ),
     );
   }
   if (gitignoreAdded.length > 0) {
     console.log(
-      chalk.cyan(
-        `  [+] Thêm vào .gitignore: ${truncateVisual(gitignoreAdded.join(", "), W - 28)}`,
+      boxRow(
+        `${chalk.hex("#38BDF8").bold("[+]  Thêm vào .gitignore:")} ${chalk.hex("#CBD5E1")(truncateVisual(gitignoreAdded.join(", "), W - 30))}`,
+        border,
       ),
     );
   }
   if (codeFilesWithSecrets && codeFilesWithSecrets.length > 0) {
+    console.log(boxRow("", border));
     console.log(
-      chalk.yellowBright(
-        "  [!] File code chứa secret (đã gỡ khỏi commit, KHÔNG cho vào .gitignore):",
+      boxRow(
+        chalk.hex("#FBBF24").bold("[!]  File code chứa secret (đã gỡ stage, KHÔNG ignore):"),
+        border,
       ),
     );
     codeFilesWithSecrets.forEach((f) =>
-      console.log(chalk.yellow(`     - ${f}`)),
+      console.log(boxRow(`     - ${chalk.hex("#CBD5E1")(truncateVisual(f, W - 10))}`, border)),
     );
     console.log(
-      chalk.gray("     » Hãy xóa key trong file và thay bằng process.env."),
+      boxRow(chalk.hex("#94A3B8")("     » Hãy xóa key trong file và thay bằng process.env."), border),
     );
   }
   if (failed.length > 0) {
-    failed.forEach((f) => console.log(chalk.red(`  [x] ${f.file}: ${f.reason}`)));
+    console.log(boxRow("", border));
+    failed.forEach((f) =>
+      console.log(boxRow(chalk.hex("#F43F5E")(`  [x] ${f.file}: ${f.reason}`), border)),
+    );
   }
+
+  console.log(boxRow("", border));
+  console.log(boxBottom(border));
+  console.log("");
 }
 
 export function printFooter() {
-  console.log(chalk.hex("#334155")("  ─── » ───"));
-  console.log(
-    chalk.hex("#64748B")("  » Mẹo: Chạy ") +
-      chalk.hex("#38BDF8").bold("git-push-time --help") +
-      chalk.hex("#64748B")(" để xem toàn bộ danh sách lệnh và phím tắt."),
-  );
+  const W = getW();
+  // Dải phân cách căn đều 2 bên, full width như mọi khung.
+  const core = "»";
+  const remaining = Math.max(4, W - 3); // 1 core + 2 space
+  const leftLen = Math.ceil(remaining / 2);
+  const rightLen = Math.floor(remaining / 2);
   console.log(
-    chalk.hex("#475569")(
-      "  » GitHub CLI & Push Time — Chúc bạn làm việc hiệu quả!\n",
-    ),
+    chalk.hex("#334155")("─".repeat(leftLen) + " ") +
+    chalk.hex("#64748B")(core) +
+    chalk.hex("#334155")(" " + "─".repeat(rightLen))
   );
+  const tip1 =
+    chalk.hex("#64748B")("» Mẹo: Chạy ") +
+    chalk.hex("#38BDF8").bold("git-push-time --help") +
+    chalk.hex("#64748B")(" để xem toàn bộ lệnh.");
+  const tip2 = chalk.hex("#475569")("» GitHub CLI & Push Time — Chúc hiệu quả!");
+  for (const tip of [tip1, tip2]) {
+    const w = stringWidth(tip);
+    if (w >= W) {
+      console.log(`  ${tip}`);
+    } else {
+      const padTotal = W - w;
+      const left = Math.floor(padTotal / 2);
+      console.log(" ".repeat(left) + tip);
+    }
+  }
+  console.log("");
 }
 
 export function styleCliHelp(program) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "git-push-time",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "CLI tool to push project to Git with custom repo URL and custom commit timestamp",
   "main": "bin/index.js",
   "type": "module",
@@ -26,6 +26,7 @@
   "license": "MIT",
   "dependencies": {
     "@inquirer/prompts": "^7.3.2",
+    "boxen": "^9.0.0",
     "chalk": "^5.4.1",
     "commander": "^13.1.0",
     "dayjs": "^1.11.13",