agenthud 0.3.1 → 0.4.0

package/dist/index.js

@@ -7,15 +7,21 @@ import { existsSync } from "fs";
 
 // src/ui/App.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { Box as Box5, Text as Text5, useApp, useInput } from "ink";
+import { Box as Box6, Text as Text6, useApp, useInput } from "ink";
 
 // src/ui/GitPanel.tsx
 import { Box, Text } from "ink";
 
 // src/ui/constants.ts
-var PANEL_WIDTH = 60;
-var CONTENT_WIDTH = PANEL_WIDTH - 4;
-var INNER_WIDTH = PANEL_WIDTH - 2;
+var DEFAULT_PANEL_WIDTH = 70;
+var CONTENT_WIDTH = DEFAULT_PANEL_WIDTH - 4;
+var INNER_WIDTH = DEFAULT_PANEL_WIDTH - 2;
+function getContentWidth(panelWidth) {
+  return panelWidth - 4;
+}
+function getInnerWidth(panelWidth) {
+  return panelWidth - 2;
+}
 var BOX = {
   tl: "\u250C",
   tr: "\u2510",
@@ -26,18 +32,19 @@ var BOX = {
   ml: "\u251C",
   mr: "\u2524"
 };
-function createTitleLine(label, suffix = "") {
+function createTitleLine(label, suffix = "", panelWidth = DEFAULT_PANEL_WIDTH) {
   const leftPart = BOX.h + " " + label + " ";
   const rightPart = suffix ? " " + suffix + " " + BOX.h : "";
-  const dashCount = PANEL_WIDTH - 1 - leftPart.length - rightPart.length - 1;
+  const dashCount = panelWidth - 1 - leftPart.length - rightPart.length - 1;
   const dashes = BOX.h.repeat(Math.max(0, dashCount));
   return BOX.tl + leftPart + dashes + rightPart + BOX.tr;
 }
-function createBottomLine() {
-  return BOX.bl + BOX.h.repeat(INNER_WIDTH) + BOX.br;
+function createBottomLine(panelWidth = DEFAULT_PANEL_WIDTH) {
+  return BOX.bl + BOX.h.repeat(getInnerWidth(panelWidth)) + BOX.br;
 }
-function padLine(content) {
-  const padding = INNER_WIDTH - content.length;
+function padLine(content, panelWidth = DEFAULT_PANEL_WIDTH) {
+  const innerWidth = getInnerWidth(panelWidth);
+  const padding = innerWidth - content.length;
   return content + " ".repeat(Math.max(0, padding));
 }
 var SEPARATOR = "\u2500".repeat(CONTENT_WIDTH);
@@ -49,22 +56,25 @@ function truncate(text, maxLength) {
 // src/ui/GitPanel.tsx
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var MAX_COMMITS = 5;
-var MAX_MESSAGE_LENGTH = CONTENT_WIDTH - 10;
 function formatCountdown(seconds) {
   if (seconds == null) return "";
-  return `\u21BB ${seconds}s`;
+  const padded = String(seconds).padStart(2, " ");
+  return `\u21BB ${padded}s`;
 }
-function GitPanel({ branch, commits, stats, uncommitted = 0, countdown }) {
-  const countdownSuffix = formatCountdown(countdown);
+function GitPanel({ branch, commits, stats, uncommitted = 0, countdown, width = DEFAULT_PANEL_WIDTH, isRunning = false, justRefreshed = false }) {
+  const countdownSuffix = isRunning ? "running..." : formatCountdown(countdown);
+  const innerWidth = getInnerWidth(width);
+  const contentWidth = getContentWidth(width);
+  const maxMessageLength = contentWidth - 10;
   if (branch === null) {
-    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: PANEL_WIDTH, children: [
-      /* @__PURE__ */ jsx(Text, { children: createTitleLine("Git", countdownSuffix) }),
+    return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width, children: [
+      /* @__PURE__ */ jsx(Text, { children: createTitleLine("Git", countdownSuffix, width) }),
       /* @__PURE__ */ jsxs(Text, { children: [
         BOX.v,
-        /* @__PURE__ */ jsx(Text, { dimColor: true, children: padLine(" Not a git repository") }),
+        /* @__PURE__ */ jsx(Text, { dimColor: true, children: padLine(" Not a git repository", width) }),
         BOX.v
       ] }),
-      /* @__PURE__ */ jsx(Text, { children: createBottomLine() })
+      /* @__PURE__ */ jsx(Text, { children: createBottomLine(width) })
     ] });
   }
   const displayCommits = commits.slice(0, MAX_COMMITS);
@@ -72,20 +82,23 @@ function GitPanel({ branch, commits, stats, uncommitted = 0, countdown }) {
   const commitWord = commits.length === 1 ? "commit" : "commits";
   const fileWord = stats.files === 1 ? "file" : "files";
   const hasUncommitted = uncommitted > 0;
-  let branchLineLength = 1 + branch.length;
+  let statsSuffix = "";
   if (hasCommits) {
-    branchLineLength += ` \xB7 +${stats.added} -${stats.deleted} \xB7 ${commits.length} ${commitWord} \xB7 ${stats.files} ${fileWord}`.length;
+    statsSuffix = ` \xB7 +${stats.added} -${stats.deleted} \xB7 ${commits.length} ${commitWord} \xB7 ${stats.files} ${fileWord}`;
   }
   if (hasUncommitted) {
-    branchLineLength += ` \xB7 ${uncommitted} dirty`.length;
+    statsSuffix += ` \xB7 ${uncommitted} dirty`;
   }
-  const branchPadding = Math.max(0, INNER_WIDTH - branchLineLength);
-  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: PANEL_WIDTH, children: [
-    /* @__PURE__ */ jsx(Text, { children: createTitleLine("Git", countdownSuffix) }),
+  const availableForBranch = innerWidth - 1 - statsSuffix.length;
+  const displayBranch = availableForBranch > 3 ? truncate(branch, availableForBranch) : truncate(branch, 10);
+  const branchLineLength = 1 + displayBranch.length + statsSuffix.length;
+  const branchPadding = Math.max(0, innerWidth - branchLineLength);
+  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width, children: [
+    /* @__PURE__ */ jsx(Text, { children: createTitleLine("Git", countdownSuffix, width) }),
     /* @__PURE__ */ jsxs(Text, { children: [
       BOX.v,
       " ",
-      /* @__PURE__ */ jsx(Text, { color: "green", children: branch }),
+      /* @__PURE__ */ jsx(Text, { color: "green", children: displayBranch }),
       hasCommits && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(Text, { dimColor: true, children: " \xB7 " }),
         /* @__PURE__ */ jsxs(Text, { color: "green", children: [
@@ -119,9 +132,9 @@ function GitPanel({ branch, commits, stats, uncommitted = 0, countdown }) {
       BOX.v
     ] }),
     hasCommits ? /* @__PURE__ */ jsx(Fragment, { children: displayCommits.map((commit) => {
-      const msg = truncate(commit.message, MAX_MESSAGE_LENGTH);
+      const msg = truncate(commit.message, maxMessageLength);
       const lineLength = 3 + 7 + 1 + msg.length;
-      const commitPadding = Math.max(0, INNER_WIDTH - lineLength);
+      const commitPadding = Math.max(0, innerWidth - lineLength);
       return /* @__PURE__ */ jsxs(Text, { children: [
         BOX.v,
         " \u2022 ",
@@ -133,10 +146,10 @@ function GitPanel({ branch, commits, stats, uncommitted = 0, countdown }) {
       ] }, commit.hash);
     }) }) : /* @__PURE__ */ jsxs(Text, { children: [
       BOX.v,
-      /* @__PURE__ */ jsx(Text, { dimColor: true, children: padLine(" No commits today") }),
+      /* @__PURE__ */ jsx(Text, { dimColor: true, children: padLine(" No commits today", width) }),
       BOX.v
     ] }),
-    /* @__PURE__ */ jsx(Text, { children: createBottomLine() })
+    /* @__PURE__ */ jsx(Text, { children: createBottomLine(width) })
   ] });
 }
 
@@ -144,8 +157,6 @@ function GitPanel({ branch, commits, stats, uncommitted = 0, countdown }) {
 import { Box as Box2, Text as Text2 } from "ink";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var PROGRESS_BAR_WIDTH = 10;
-var MAX_STEP_LENGTH = CONTENT_WIDTH - 2;
-var MAX_DECISION_LENGTH = CONTENT_WIDTH - 2;
 function createProgressBar(done, total) {
   if (total === 0) return "\u2591".repeat(PROGRESS_BAR_WIDTH);
   const filled = Math.round(done / total * PROGRESS_BAR_WIDTH);
@@ -154,75 +165,80 @@ function createProgressBar(done, total) {
 }
 function formatCountdown2(seconds) {
   if (seconds == null) return "";
-  return `\u21BB ${seconds}s`;
+  const padded = String(seconds).padStart(2, " ");
+  return `\u21BB ${padded}s`;
 }
-function createPlanTitleLine(done, total, countdown) {
+function createPlanTitleLine(done, total, countdown, panelWidth, suffixOverride) {
   const label = " Plan ";
   const count = ` ${done}/${total} `;
   const bar = createProgressBar(done, total);
-  const countdownStr = formatCountdown2(countdown);
-  const suffix = countdownStr ? ` \xB7 ${countdownStr} ` + BOX.h : "";
-  const dashCount = PANEL_WIDTH - 3 - label.length - count.length - bar.length - suffix.length;
+  const suffixStr = suffixOverride || formatCountdown2(countdown);
+  const suffix = suffixStr ? ` \xB7 ${suffixStr} ` + BOX.h : "";
+  const dashCount = panelWidth - 3 - label.length - count.length - bar.length - suffix.length;
   const dashes = BOX.h.repeat(Math.max(0, dashCount));
   return BOX.tl + BOX.h + label + dashes + count + bar + suffix + BOX.tr;
 }
-function createSimpleTitleLine(countdown) {
+function createSimpleTitleLine(countdown, panelWidth) {
   const label = " Plan ";
   const countdownStr = formatCountdown2(countdown);
   const suffix = countdownStr ? ` ${countdownStr} ` + BOX.h : "";
-  const dashCount = PANEL_WIDTH - 3 - label.length - suffix.length;
+  const dashCount = panelWidth - 3 - label.length - suffix.length;
   const dashes = BOX.h.repeat(Math.max(0, dashCount));
   return BOX.tl + BOX.h + label + dashes + suffix + BOX.tr;
 }
-function createDecisionsHeader() {
+function createDecisionsHeader(panelWidth) {
   const label = "\u2500 Decisions ";
-  const dashCount = PANEL_WIDTH - 1 - label.length - 1;
+  const dashCount = panelWidth - 1 - label.length - 1;
   return label + "\u2500".repeat(dashCount) + "\u2524";
 }
-function PlanPanel({ plan, decisions, error, countdown }) {
+function PlanPanel({ plan, decisions, error, countdown, width = DEFAULT_PANEL_WIDTH, justRefreshed = false, relativeTime }) {
+  const contentWidth = getContentWidth(width);
+  const maxStepLength = contentWidth - 2;
+  const maxDecisionLength = contentWidth - 2;
   if (error || !plan || !plan.goal || !plan.steps) {
-    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", width: PANEL_WIDTH, children: [
-      /* @__PURE__ */ jsx2(Text2, { children: createSimpleTitleLine(countdown) }),
+    return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", width, children: [
+      /* @__PURE__ */ jsx2(Text2, { children: createSimpleTitleLine(countdown, width) }),
       /* @__PURE__ */ jsxs2(Text2, { children: [
         BOX.v,
-        padLine(" " + (error || "No plan found")),
+        padLine(" " + (error || "No plan found"), width),
         BOX.v
       ] }),
-      /* @__PURE__ */ jsx2(Text2, { children: createBottomLine() })
+      /* @__PURE__ */ jsx2(Text2, { children: createBottomLine(width) })
     ] });
   }
   const doneCount = plan.steps.filter((s) => s.status === "done").length;
   const totalCount = plan.steps.length;
-  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", width: PANEL_WIDTH, children: [
-    /* @__PURE__ */ jsx2(Text2, { children: createPlanTitleLine(doneCount, totalCount, countdown) }),
+  const titleSuffix = justRefreshed ? "just now" : relativeTime || void 0;
+  return /* @__PURE__ */ jsxs2(Box2, { flexDirection: "column", width, children: [
+    /* @__PURE__ */ jsx2(Text2, { children: createPlanTitleLine(doneCount, totalCount, countdown, width, titleSuffix) }),
     /* @__PURE__ */ jsxs2(Text2, { children: [
       BOX.v,
-      padLine(" " + truncate(plan.goal, CONTENT_WIDTH)),
+      padLine(" " + truncate(plan.goal, contentWidth), width),
       BOX.v
     ] }),
     plan.steps.map((step, index) => {
-      const stepText = " " + (step.status === "done" ? "\u2713" : step.status === "in-progress" ? "\u2192" : "\u25CB") + " " + truncate(step.step, MAX_STEP_LENGTH);
+      const stepText = " " + (step.status === "done" ? "\u2713" : step.status === "in-progress" ? "\u2192" : "\u25CB") + " " + truncate(step.step, maxStepLength);
       return /* @__PURE__ */ jsxs2(Text2, { children: [
         BOX.v,
-        padLine(stepText),
+        padLine(stepText, width),
         BOX.v
-      ] }, index);
+      ] }, `step-${index}`);
     }),
     decisions.length > 0 && /* @__PURE__ */ jsxs2(Fragment2, { children: [
       /* @__PURE__ */ jsxs2(Text2, { children: [
         "\u251C",
-        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: createDecisionsHeader() })
+        /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: createDecisionsHeader(width) })
       ] }),
       decisions.map((decision, index) => {
-        const decText = " \u2022 " + truncate(decision.decision, MAX_DECISION_LENGTH);
+        const decText = " \u2022 " + truncate(decision.decision, maxDecisionLength);
         return /* @__PURE__ */ jsxs2(Text2, { children: [
           BOX.v,
-          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: padLine(decText) }),
+          /* @__PURE__ */ jsx2(Text2, { dimColor: true, children: padLine(decText, width) }),
           BOX.v
-        ] }, index);
+        ] }, `decision-${index}`);
       })
     ] }),
-    /* @__PURE__ */ jsx2(Text2, { children: createBottomLine() })
+    /* @__PURE__ */ jsx2(Text2, { children: createBottomLine(width) })
   ] });
 }
 
@@ -241,28 +257,40 @@ function formatRelativeTime(timestamp) {
   if (diffHours < 24) return `${diffHours}h ago`;
   return `${diffDays}d ago`;
 }
-function createSeparator() {
-  return BOX.ml + BOX.h.repeat(INNER_WIDTH) + BOX.mr;
+function createSeparator(panelWidth) {
+  return BOX.ml + BOX.h.repeat(getInnerWidth(panelWidth)) + BOX.mr;
 }
 function TestPanel({
   results,
   isOutdated,
   commitsBehind,
-  error
+  error,
+  width = DEFAULT_PANEL_WIDTH,
+  isRunning = false,
+  justCompleted = false
 }) {
+  const innerWidth = getInnerWidth(width);
+  const contentWidth = getContentWidth(width);
+  const getTitleSuffix = () => {
+    if (isRunning) return "running...";
+    if (justCompleted) return "just now";
+    if (results) return formatRelativeTime(results.timestamp);
+    return "";
+  };
+  const titleSuffix = getTitleSuffix();
   if (error || !results) {
-    return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", width: PANEL_WIDTH, children: [
-      /* @__PURE__ */ jsx3(Text3, { children: createTitleLine("Tests", "") }),
+    return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", width, children: [
+      /* @__PURE__ */ jsx3(Text3, { children: createTitleLine("Tests", titleSuffix, width) }),
       /* @__PURE__ */ jsxs3(Text3, { children: [
         BOX.v,
-        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: padLine(" " + (error || "No test results")) }),
+        /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: padLine(" " + (error || "No test results"), width) }),
         BOX.v
       ] }),
-      /* @__PURE__ */ jsx3(Text3, { children: createBottomLine() })
+      /* @__PURE__ */ jsx3(Text3, { children: createBottomLine(width) })
     ] });
   }
   const hasFailures = results.failures.length > 0;
-  const relativeTime = formatRelativeTime(results.timestamp);
+  const relativeTime = titleSuffix;
   let summaryLength = 1 + 2 + String(results.passed).length + " passed".length;
   if (results.failed > 0) {
     summaryLength += 2 + 2 + String(results.failed).length + " failed".length;
@@ -271,12 +299,12 @@ function TestPanel({
     summaryLength += 2 + 2 + String(results.skipped).length + " skipped".length;
   }
   summaryLength += " \xB7 ".length + results.hash.length;
-  const summaryPadding = Math.max(0, INNER_WIDTH - summaryLength);
-  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", width: PANEL_WIDTH, children: [
-    /* @__PURE__ */ jsx3(Text3, { children: createTitleLine("Tests", relativeTime) }),
+  const summaryPadding = Math.max(0, innerWidth - summaryLength);
+  return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", width, children: [
+    /* @__PURE__ */ jsx3(Text3, { children: createTitleLine("Tests", relativeTime, width) }),
     isOutdated && /* @__PURE__ */ jsxs3(Text3, { children: [
       BOX.v,
-      /* @__PURE__ */ jsx3(Text3, { color: "yellow", children: padLine(` \u26A0 Outdated (${commitsBehind} ${commitsBehind === 1 ? "commit" : "commits"} behind)`) }),
+      /* @__PURE__ */ jsx3(Text3, { color: "yellow", children: padLine(` \u26A0 Outdated (${commitsBehind} ${commitsBehind === 1 ? "commit" : "commits"} behind)`, width) }),
       BOX.v
     ] }),
     /* @__PURE__ */ jsxs3(Text3, { children: [
@@ -311,12 +339,12 @@ function TestPanel({
       BOX.v
     ] }),
     hasFailures && /* @__PURE__ */ jsxs3(Fragment3, { children: [
-      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: createSeparator() }),
+      /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: createSeparator(width) }),
       results.failures.map((failure, index) => {
-        const fileName = truncate(failure.file, CONTENT_WIDTH - 3);
-        const filePadding = Math.max(0, INNER_WIDTH - 3 - fileName.length);
-        const testName = truncate(failure.name, CONTENT_WIDTH - 5);
-        const testPadding = Math.max(0, INNER_WIDTH - 5 - testName.length);
+        const fileName = truncate(failure.file, contentWidth - 3);
+        const filePadding = Math.max(0, innerWidth - 3 - fileName.length);
+        const testName = truncate(failure.name, contentWidth - 5);
+        const testPadding = Math.max(0, innerWidth - 5 - testName.length);
         return /* @__PURE__ */ jsxs3(Box3, { flexDirection: "column", children: [
           /* @__PURE__ */ jsxs3(Text3, { children: [
             BOX.v,
@@ -336,33 +364,203 @@ function TestPanel({
             " ".repeat(testPadding),
             BOX.v
           ] })
-        ] }, index);
+        ] }, `failure-${index}`);
       })
     ] }),
-    /* @__PURE__ */ jsx3(Text3, { children: createBottomLine() })
+    /* @__PURE__ */ jsx3(Text3, { children: createBottomLine(width) })
   ] });
 }
 
-// src/ui/WelcomePanel.tsx
+// src/ui/GenericPanel.tsx
 import { Box as Box4, Text as Text4 } from "ink";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var PROGRESS_BAR_WIDTH2 = 10;
+function createProgressBar2(done, total) {
+  if (total === 0) return "\u2591".repeat(PROGRESS_BAR_WIDTH2);
+  const filled = Math.round(done / total * PROGRESS_BAR_WIDTH2);
+  const empty = PROGRESS_BAR_WIDTH2 - filled;
+  return "\u2588".repeat(filled) + "\u2591".repeat(empty);
+}
+function formatTitleSuffix(countdown, relativeTime) {
+  if (countdown != null) {
+    const padded = String(countdown).padStart(2, " ");
+    return `\u21BB ${padded}s`;
+  }
+  if (relativeTime) return relativeTime;
+  return "";
+}
+function createProgressTitleLine(title, done, total, panelWidth, countdown, relativeTime) {
+  const label = ` ${title} `;
+  const count = ` ${done}/${total} `;
+  const bar = createProgressBar2(done, total);
+  const suffix = formatTitleSuffix(countdown, relativeTime);
+  const suffixPart = suffix ? ` \xB7 ${suffix} ` + BOX.h : "";
+  const dashCount = panelWidth - 3 - label.length - count.length - bar.length - suffixPart.length;
+  const dashes = BOX.h.repeat(Math.max(0, dashCount));
+  return BOX.tl + BOX.h + label + dashes + count + bar + suffixPart + BOX.tr;
+}
+function ListRenderer({ data, width }) {
+  const items = data.items || [];
+  const contentWidth = getContentWidth(width);
+  if (items.length === 0 && !data.summary) {
+    return /* @__PURE__ */ jsxs4(Text4, { children: [
+      BOX.v,
+      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: padLine(" No data", width) }),
+      BOX.v
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    data.summary && /* @__PURE__ */ jsxs4(Text4, { children: [
+      BOX.v,
+      padLine(" " + truncate(data.summary, contentWidth), width),
+      BOX.v
+    ] }),
+    items.map((item, index) => /* @__PURE__ */ jsxs4(Text4, { children: [
+      BOX.v,
+      padLine(" \u2022 " + truncate(item.text, contentWidth - 3), width),
+      BOX.v
+    ] }, `list-item-${index}`)),
+    items.length === 0 && data.summary && null
+  ] });
+}
+function ProgressRenderer({ data, width }) {
+  const items = data.items || [];
+  const contentWidth = getContentWidth(width);
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    data.summary && /* @__PURE__ */ jsxs4(Text4, { children: [
+      BOX.v,
+      padLine(" " + truncate(data.summary, contentWidth), width),
+      BOX.v
+    ] }),
+    items.map((item, index) => {
+      const icon = item.status === "done" ? "\u2713" : item.status === "failed" ? "\u2717" : "\u25CB";
+      const line = ` ${icon} ${truncate(item.text, contentWidth - 3)}`;
+      return /* @__PURE__ */ jsxs4(Text4, { children: [
+        BOX.v,
+        padLine(line, width),
+        BOX.v
+      ] }, `progress-item-${index}`);
+    }),
+    items.length === 0 && !data.summary && /* @__PURE__ */ jsxs4(Text4, { children: [
+      BOX.v,
+      /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: padLine(" No data", width) }),
+      BOX.v
+    ] })
+  ] });
+}
+function StatusRenderer({ data, width }) {
+  const stats = data.stats || { passed: 0, failed: 0 };
+  const items = data.items?.filter((i) => i.status === "failed") || [];
+  const innerWidth = getInnerWidth(width);
+  const contentWidth = getContentWidth(width);
+  let summaryLength = 1 + 2 + String(stats.passed).length + " passed".length;
+  if (stats.failed > 0) {
+    summaryLength += 2 + 2 + String(stats.failed).length + " failed".length;
+  }
+  if (stats.skipped && stats.skipped > 0) {
+    summaryLength += 2 + 2 + String(stats.skipped).length + " skipped".length;
+  }
+  const summaryPadding = Math.max(0, innerWidth - summaryLength);
+  return /* @__PURE__ */ jsxs4(Fragment4, { children: [
+    data.summary && /* @__PURE__ */ jsxs4(Text4, { children: [
+      BOX.v,
+      padLine(" " + truncate(data.summary, contentWidth), width),
+      BOX.v
+    ] }),
+    /* @__PURE__ */ jsxs4(Text4, { children: [
+      BOX.v,
+      " ",
+      /* @__PURE__ */ jsxs4(Text4, { color: "green", children: [
+        "\u2713 ",
+        stats.passed,
+        " passed"
+      ] }),
+      stats.failed > 0 && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+        "  ",
+        /* @__PURE__ */ jsxs4(Text4, { color: "red", children: [
+          "\u2717 ",
+          stats.failed,
+          " failed"
+        ] })
+      ] }),
+      stats.skipped && stats.skipped > 0 && /* @__PURE__ */ jsxs4(Fragment4, { children: [
+        "  ",
+        /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
+          "\u25CB ",
+          stats.skipped,
+          " skipped"
+        ] })
+      ] }),
+      " ".repeat(summaryPadding),
+      BOX.v
+    ] }),
+    items.length > 0 && items.map((item, index) => /* @__PURE__ */ jsxs4(Text4, { children: [
+      BOX.v,
+      padLine(" \u2022 " + truncate(item.text, contentWidth - 3), width),
+      BOX.v
+    ] }, `status-item-${index}`))
+  ] });
+}
+function GenericPanel({
+  data,
+  renderer = "list",
+  countdown,
+  relativeTime,
+  error,
+  width = DEFAULT_PANEL_WIDTH,
+  isRunning = false,
+  justRefreshed = false
+}) {
+  const suffix = isRunning ? "running..." : formatTitleSuffix(countdown, relativeTime);
+  const suffixColor = isRunning ? "yellow" : justRefreshed ? "green" : void 0;
+  const progress = data.progress || { done: 0, total: 0 };
+  if (error) {
+    return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", width, children: [
+      /* @__PURE__ */ jsx4(Text4, { children: createTitleLine(data.title, suffix, width) }),
+      /* @__PURE__ */ jsxs4(Text4, { children: [
+        BOX.v,
+        /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: padLine(" " + error, width) }),
+        BOX.v
+      ] }),
+      /* @__PURE__ */ jsx4(Text4, { children: createBottomLine(width) })
+    ] });
+  }
+  if (renderer === "progress") {
+    return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", width, children: [
+      /* @__PURE__ */ jsx4(Text4, { children: createProgressTitleLine(data.title, progress.done, progress.total, width, countdown, relativeTime) }),
+      /* @__PURE__ */ jsx4(ProgressRenderer, { data, width }),
+      /* @__PURE__ */ jsx4(Text4, { children: createBottomLine(width) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", width, children: [
+    /* @__PURE__ */ jsx4(Text4, { children: createTitleLine(data.title, suffix, width) }),
+    renderer === "status" ? /* @__PURE__ */ jsx4(StatusRenderer, { data, width }) : /* @__PURE__ */ jsx4(ListRenderer, { data, width }),
+    /* @__PURE__ */ jsx4(Text4, { children: createBottomLine(width) })
+  ] });
+}
+
+// src/ui/WelcomePanel.tsx
+import { Box as Box5, Text as Text5 } from "ink";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function WelcomePanel() {
-  return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", borderStyle: "single", paddingX: 1, width: PANEL_WIDTH, children: [
-    /* @__PURE__ */ jsx4(Box4, { marginTop: -1, children: /* @__PURE__ */ jsx4(Text4, { children: " Welcome to agenthud " }) }),
-    /* @__PURE__ */ jsx4(Text4, { children: " " }),
-    /* @__PURE__ */ jsx4(Text4, { children: "  No .agenthud/ directory found." }),
-    /* @__PURE__ */ jsx4(Text4, { children: " " }),
-    /* @__PURE__ */ jsx4(Text4, { children: "  Quick setup:" }),
-    /* @__PURE__ */ jsx4(Text4, { color: "cyan", children: "     npx agenthud init" }),
-    /* @__PURE__ */ jsx4(Text4, { children: " " }),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "  Or visit: github.com/neochoon/agenthud" }),
-    /* @__PURE__ */ jsx4(Text4, { children: " " }),
-    /* @__PURE__ */ jsx4(Text4, { dimColor: true, children: "  Press q to quit" })
+  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", borderStyle: "single", paddingX: 1, width: DEFAULT_PANEL_WIDTH, children: [
+    /* @__PURE__ */ jsx5(Box5, { marginTop: -1, children: /* @__PURE__ */ jsx5(Text5, { children: " Welcome to agenthud " }) }),
+    /* @__PURE__ */ jsx5(Text5, { children: " " }),
+    /* @__PURE__ */ jsx5(Text5, { children: "  No .agenthud/ directory found." }),
+    /* @__PURE__ */ jsx5(Text5, { children: " " }),
+    /* @__PURE__ */ jsx5(Text5, { children: "  Quick setup:" }),
+    /* @__PURE__ */ jsx5(Text5, { color: "cyan", children: "     npx agenthud init" }),
+    /* @__PURE__ */ jsx5(Text5, { children: " " }),
+    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "  Or visit: github.com/neochoon/agenthud" }),
+    /* @__PURE__ */ jsx5(Text5, { children: " " }),
+    /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: "  Press q to quit" })
   ] });
 }
 
 // src/data/git.ts
-import { execSync as nodeExecSync } from "child_process";
+import { execSync as nodeExecSync, exec as nodeExec } from "child_process";
+import { promisify } from "util";
+var execAsync = promisify(nodeExec);
 var execFn = (command, options2) => nodeExecSync(command, options2);
 function getUncommittedCount() {
   try {
@@ -432,6 +630,58 @@ function getGitData(config) {
   const uncommitted = getUncommittedCount();
   return { branch, commits, stats, uncommitted };
 }
+async function getGitDataAsync(config) {
+  const commands = {
+    branch: config.command?.branch || DEFAULT_COMMANDS.branch,
+    commits: config.command?.commits || DEFAULT_COMMANDS.commits,
+    stats: config.command?.stats || DEFAULT_COMMANDS.stats
+  };
+  let branch = null;
+  try {
+    const { stdout } = await execAsync(commands.branch);
+    branch = stdout.trim();
+  } catch {
+    branch = null;
+  }
+  let commits = [];
+  try {
+    const { stdout } = await execAsync(commands.commits);
+    const lines = stdout.trim().split("\n").filter(Boolean);
+    commits = lines.map((line) => {
+      const [hash, timestamp, ...messageParts] = line.split("|");
+      return {
+        hash,
+        message: messageParts.join("|"),
+        timestamp: new Date(timestamp)
+      };
+    });
+  } catch {
+    commits = [];
+  }
+  let stats = { added: 0, deleted: 0, files: 0 };
+  try {
+    const { stdout } = await execAsync(commands.stats);
+    const lines = stdout.trim().split("\n").filter(Boolean);
+    let added = 0;
+    let deleted = 0;
+    const filesSet = /* @__PURE__ */ new Set();
+    for (const line of lines) {
+      const [addedStr, deletedStr, filename] = line.split("	");
+      if (addedStr === "-" || deletedStr === "-") {
+        if (filename) filesSet.add(filename);
+        continue;
+      }
+      added += parseInt(addedStr, 10) || 0;
+      deleted += parseInt(deletedStr, 10) || 0;
+      if (filename) filesSet.add(filename);
+    }
+    stats = { added, deleted, files: filesSet.size };
+  } catch {
+    stats = { added: 0, deleted: 0, files: 0 };
+  }
+  const uncommitted = getUncommittedCount();
+  return { branch, commits, stats, uncommitted };
+}
 
 // src/data/plan.ts
 import { readFileSync as nodeReadFileSync } from "fs";
@@ -512,9 +762,171 @@ function getTestData(dir = process.cwd()) {
   return { results, isOutdated, commitsBehind, error };
 }
 
+// src/data/custom.ts
+import { execSync as nodeExecSync3, exec as nodeExec2 } from "child_process";
+import { readFileSync as nodeReadFileSync3, promises as fsPromises } from "fs";
+import { promisify as promisify2 } from "util";
+var execAsync2 = promisify2(nodeExec2);
+var execFn2 = (cmd, options2) => nodeExecSync3(cmd, options2);
+var readFileFn3 = (path) => nodeReadFileSync3(path, "utf-8");
+function capitalizeFirst(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+function getCustomPanelData(name, panelConfig) {
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  const defaultData = {
+    title: capitalizeFirst(name)
+  };
+  if (panelConfig.command) {
+    try {
+      const output = execFn2(panelConfig.command, { encoding: "utf-8" }).trim();
+      try {
+        const parsed = JSON.parse(output);
+        return {
+          data: {
+            title: parsed.title || capitalizeFirst(name),
+            summary: parsed.summary,
+            items: parsed.items,
+            progress: parsed.progress,
+            stats: parsed.stats
+          },
+          timestamp
+        };
+      } catch {
+        const lines = output.split("\n").filter((l) => l.trim());
+        return {
+          data: {
+            title: capitalizeFirst(name),
+            items: lines.map((text) => ({ text }))
+          },
+          timestamp
+        };
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      return {
+        data: defaultData,
+        error: `Command failed: ${message.split("\n")[0]}`,
+        timestamp
+      };
+    }
+  }
+  if (panelConfig.source) {
+    try {
+      const content = readFileFn3(panelConfig.source);
+      const parsed = JSON.parse(content);
+      return {
+        data: {
+          title: parsed.title || capitalizeFirst(name),
+          summary: parsed.summary,
+          items: parsed.items,
+          progress: parsed.progress,
+          stats: parsed.stats
+        },
+        timestamp
+      };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      if (message.includes("ENOENT")) {
+        return {
+          data: defaultData,
+          error: "File not found",
+          timestamp
+        };
+      }
+      return {
+        data: defaultData,
+        error: "Invalid JSON",
+        timestamp
+      };
+    }
+  }
+  return {
+    data: defaultData,
+    error: "No command or source configured",
+    timestamp
+  };
+}
+async function getCustomPanelDataAsync(name, panelConfig) {
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  const defaultData = {
+    title: capitalizeFirst(name)
+  };
+  if (panelConfig.command) {
+    try {
+      const { stdout } = await execAsync2(panelConfig.command);
+      const output = stdout.trim();
+      try {
+        const parsed = JSON.parse(output);
+        return {
+          data: {
+            title: parsed.title || capitalizeFirst(name),
+            summary: parsed.summary,
+            items: parsed.items,
+            progress: parsed.progress,
+            stats: parsed.stats
+          },
+          timestamp
+        };
+      } catch {
+        const lines = output.split("\n").filter((l) => l.trim());
+        return {
+          data: {
+            title: capitalizeFirst(name),
+            items: lines.map((text) => ({ text }))
+          },
+          timestamp
+        };
+      }
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      return {
+        data: defaultData,
+        error: `Command failed: ${message.split("\n")[0]}`,
+        timestamp
+      };
+    }
+  }
+  if (panelConfig.source) {
+    try {
+      const content = await fsPromises.readFile(panelConfig.source, "utf-8");
+      const parsed = JSON.parse(content);
+      return {
+        data: {
+          title: parsed.title || capitalizeFirst(name),
+          summary: parsed.summary,
+          items: parsed.items,
+          progress: parsed.progress,
+          stats: parsed.stats
+        },
+        timestamp
+      };
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      if (message.includes("ENOENT")) {
+        return {
+          data: defaultData,
+          error: "File not found",
+          timestamp
+        };
+      }
+      return {
+        data: defaultData,
+        error: "Invalid JSON",
+        timestamp
+      };
+    }
+  }
+  return {
+    data: defaultData,
+    error: "No command or source configured",
+    timestamp
+  };
+}
+
 // src/runner/command.ts
-import { execSync as nodeExecSync3 } from "child_process";
-var execFn2 = (command, options2) => nodeExecSync3(command, options2);
+import { execSync as nodeExecSync4 } from "child_process";
+var execFn3 = (command, options2) => nodeExecSync4(command, options2);
 function parseVitestOutput(output) {
   try {
     const data = JSON.parse(output);
@@ -544,7 +956,7 @@ function parseVitestOutput(output) {
 }
 function getHeadHash() {
   try {
-    return execFn2("git rev-parse --short HEAD", {
+    return execFn3("git rev-parse --short HEAD", {
       encoding: "utf-8",
       stdio: ["pipe", "pipe", "pipe"]
     }).trim();
@@ -555,7 +967,7 @@ function getHeadHash() {
 function runTestCommand(command) {
   let output;
   try {
-    output = execFn2(command, {
+    output = execFn3(command, {
       encoding: "utf-8",
       stdio: ["pipe", "pipe", "pipe"]
     });
@@ -597,13 +1009,16 @@ function runTestCommand(command) {
 // src/config/parser.ts
 import {
   existsSync as nodeExistsSync,
-  readFileSync as nodeReadFileSync3
+  readFileSync as nodeReadFileSync4
 } from "fs";
 import { parse as parseYaml } from "yaml";
 var fs = {
   existsSync: nodeExistsSync,
-  readFileSync: (path) => nodeReadFileSync3(path, "utf-8")
+  readFileSync: (path) => nodeReadFileSync4(path, "utf-8")
 };
+var DEFAULT_WIDTH = 70;
+var MIN_WIDTH = 50;
+var MAX_WIDTH = 120;
 var CONFIG_PATH = ".agenthud/config.yaml";
 function parseInterval(interval) {
   if (!interval || interval === "manual") {
@@ -641,10 +1056,13 @@ function getDefaultConfig() {
         interval: null
         // manual
       }
-    }
+    },
+    panelOrder: ["git", "plan", "tests"],
+    width: DEFAULT_WIDTH
   };
 }
-var VALID_PANELS = ["git", "plan", "tests"];
+var BUILTIN_PANELS = ["git", "plan", "tests"];
+var VALID_RENDERERS = ["list", "progress", "status"];
 function parseConfig() {
   const warnings = [];
   const defaultConfig = getDefaultConfig();
@@ -664,16 +1082,26 @@ function parseConfig() {
     return { config: defaultConfig, warnings };
   }
   const parsed = rawConfig;
+  const config = getDefaultConfig();
+  if (typeof parsed.width === "number") {
+    if (parsed.width < MIN_WIDTH) {
+      warnings.push(`Width ${parsed.width} is too small, using minimum of ${MIN_WIDTH}`);
+      config.width = MIN_WIDTH;
+    } else if (parsed.width > MAX_WIDTH) {
+      warnings.push(`Width ${parsed.width} is too large, using maximum of ${MAX_WIDTH}`);
+      config.width = MAX_WIDTH;
+    } else {
+      config.width = parsed.width;
+    }
+  }
   const panels = parsed.panels;
   if (!panels || typeof panels !== "object") {
-    return { config: defaultConfig, warnings };
+    return { config, warnings };
   }
-  const config = getDefaultConfig();
+  const customPanels = {};
+  const panelOrder = [];
   for (const panelName of Object.keys(panels)) {
-    if (!VALID_PANELS.includes(panelName)) {
-      warnings.push(`Unknown panel '${panelName}' in config`);
-      continue;
-    }
+    panelOrder.push(panelName);
     const panelConfig = panels[panelName];
     if (!panelConfig || typeof panelConfig !== "object") {
       continue;
@@ -690,6 +1118,7 @@ function parseConfig() {
           config.panels.git.interval = interval;
         }
       }
+      continue;
     }
     if (panelName === "plan") {
       if (typeof panelConfig.enabled === "boolean") {
@@ -706,6 +1135,7 @@ function parseConfig() {
       if (typeof panelConfig.source === "string") {
         config.panels.plan.source = panelConfig.source;
       }
+      continue;
     }
     if (panelName === "tests") {
       if (typeof panelConfig.enabled === "boolean") {
@@ -722,16 +1152,57 @@ function parseConfig() {
       if (typeof panelConfig.command === "string") {
         config.panels.tests.command = panelConfig.command;
       }
+      continue;
+    }
+    const customPanel = {
+      enabled: typeof panelConfig.enabled === "boolean" ? panelConfig.enabled : true,
+      interval: 3e4,
+      // default 30s
+      renderer: "list"
+      // default
+    };
+    if (typeof panelConfig.interval === "string") {
+      const interval = parseInterval(panelConfig.interval);
+      customPanel.interval = interval;
+    }
+    if (typeof panelConfig.command === "string") {
+      customPanel.command = panelConfig.command;
+    }
+    if (typeof panelConfig.source === "string") {
+      customPanel.source = panelConfig.source;
+    }
+    if (typeof panelConfig.renderer === "string") {
+      if (VALID_RENDERERS.includes(panelConfig.renderer)) {
+        customPanel.renderer = panelConfig.renderer;
+      } else {
+        warnings.push(`Invalid renderer '${panelConfig.renderer}' for custom panel, using 'list'`);
+      }
+    }
+    customPanels[panelName] = customPanel;
+  }
+  if (Object.keys(customPanels).length > 0) {
+    config.customPanels = customPanels;
+  }
+  for (const builtIn of BUILTIN_PANELS) {
+    if (!panelOrder.includes(builtIn)) {
+      panelOrder.push(builtIn);
     }
   }
+  config.panelOrder = panelOrder;
   return { config, warnings };
 }
 
 // src/ui/App.tsx
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_VISUAL_STATE = {
+  isRunning: false,
+  justRefreshed: false,
+  justCompleted: false
+};
+var FEEDBACK_DURATION = 1500;
 function generateHotkeys(config, actions) {
   const hotkeys = [];
-  const usedKeys = /* @__PURE__ */ new Set();
+  const usedKeys = /* @__PURE__ */ new Set(["r", "q"]);
   if (config.panels.tests.enabled && config.panels.tests.interval === null && actions.tests) {
     const name = "tests";
     for (const char of name.toLowerCase()) {
@@ -746,10 +1217,39 @@ function generateHotkeys(config, actions) {
       }
     }
   }
+  if (config.customPanels && actions.customPanels) {
+    for (const [name, panelConfig] of Object.entries(config.customPanels)) {
+      if (panelConfig.enabled && panelConfig.interval === null && actions.customPanels[name]) {
+        for (const char of name.toLowerCase()) {
+          if (!usedKeys.has(char)) {
+            usedKeys.add(char);
+            hotkeys.push({
+              key: char,
+              label: `run ${name}`,
+              action: actions.customPanels[name]
+            });
+            break;
+          }
+        }
+      }
+    }
+  }
   return hotkeys;
 }
+function formatRelativeTime2(timestamp) {
+  const now = Date.now();
+  const then = new Date(timestamp).getTime();
+  const diffMs = now - then;
+  const diffMins = Math.floor(diffMs / 6e4);
+  const diffHours = Math.floor(diffMs / 36e5);
+  const diffDays = Math.floor(diffMs / 864e5);
+  if (diffMins < 1) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  return `${diffDays}d ago`;
+}
 function WelcomeApp() {
-  return /* @__PURE__ */ jsx5(WelcomePanel, {});
+  return /* @__PURE__ */ jsx6(WelcomePanel, {});
 }
 function DashboardApp({ mode }) {
   const { exit } = useApp();
@@ -774,26 +1274,160 @@ function DashboardApp({ mode }) {
   const refreshTest = useCallback(() => {
     setTestData(getTestDataFromConfig());
   }, [getTestDataFromConfig]);
-  const [countdowns, setCountdowns] = useState({
-    git: gitIntervalSeconds,
-    plan: planIntervalSeconds
+  const customPanelNames = useMemo(
+    () => Object.keys(config.customPanels || {}),
+    [config.customPanels]
+  );
+  const [customPanelData, setCustomPanelData] = useState(() => {
+    const data = {};
+    if (config.customPanels) {
+      for (const [name, panelConfig] of Object.entries(config.customPanels)) {
+        if (panelConfig.enabled) {
+          data[name] = getCustomPanelData(name, panelConfig);
+        }
+      }
+    }
+    return data;
   });
-  const refreshAll = useCallback(() => {
+  const refreshCustomPanel = useCallback(
+    (name) => {
+      if (config.customPanels && config.customPanels[name]) {
+        setCustomPanelData((prev) => ({
+          ...prev,
+          [name]: getCustomPanelData(name, config.customPanels[name])
+        }));
+      }
+    },
+    [config.customPanels]
+  );
+  const initialCountdowns = useMemo(() => {
+    const countdowns2 = {
+      git: gitIntervalSeconds,
+      plan: planIntervalSeconds
+    };
+    if (config.customPanels) {
+      for (const [name, panelConfig] of Object.entries(config.customPanels)) {
+        countdowns2[name] = panelConfig.interval ? panelConfig.interval / 1e3 : null;
+      }
+    }
+    return countdowns2;
+  }, [gitIntervalSeconds, planIntervalSeconds, config.customPanels]);
+  const [countdowns, setCountdowns] = useState(initialCountdowns);
+  const initialVisualStates = useMemo(() => {
+    const states = {
+      git: { ...DEFAULT_VISUAL_STATE },
+      plan: { ...DEFAULT_VISUAL_STATE },
+      tests: { ...DEFAULT_VISUAL_STATE }
+    };
+    for (const name of customPanelNames) {
+      states[name] = { ...DEFAULT_VISUAL_STATE };
+    }
+    return states;
+  }, [customPanelNames]);
+  const [visualStates, setVisualStates] = useState(initialVisualStates);
+  const setVisualState = useCallback((panel, update) => {
+    setVisualStates((prev) => ({
+      ...prev,
+      [panel]: { ...prev[panel], ...update }
+    }));
+  }, []);
+  const clearFeedback = useCallback((panel, key) => {
+    setTimeout(() => {
+      setVisualState(panel, { [key]: false });
+    }, FEEDBACK_DURATION);
+  }, [setVisualState]);
+  const refreshGitAsync = useCallback(async () => {
+    setVisualState("git", { isRunning: true });
+    try {
+      const data = await getGitDataAsync(config.panels.git);
+      setGitData(data);
+    } finally {
+      setVisualState("git", { isRunning: false, justRefreshed: true });
+      clearFeedback("git", "justRefreshed");
+    }
+  }, [config.panels.git, setVisualState, clearFeedback]);
+  const refreshCustomPanelAsync = useCallback(
+    async (name) => {
+      if (config.customPanels && config.customPanels[name]) {
+        setVisualState(name, { isRunning: true });
+        try {
+          const result = await getCustomPanelDataAsync(name, config.customPanels[name]);
+          setCustomPanelData((prev) => ({
+            ...prev,
+            [name]: result
+          }));
+        } finally {
+          setVisualState(name, { isRunning: false, justRefreshed: true });
+          clearFeedback(name, "justRefreshed");
+        }
+      }
+    },
+    [config.customPanels, setVisualState, clearFeedback]
+  );
+  const refreshTestAsync = useCallback(async () => {
+    setVisualState("tests", { isRunning: true });
+    try {
+      await new Promise((resolve) => {
+        setTimeout(() => {
+          setTestData(getTestDataFromConfig());
+          resolve();
+        }, 0);
+      });
+    } finally {
+      setVisualState("tests", { isRunning: false, justCompleted: true });
+      clearFeedback("tests", "justCompleted");
+    }
+  }, [getTestDataFromConfig, setVisualState, clearFeedback]);
+  const refreshPlanWithFeedback = useCallback(() => {
+    setPlanData(getPlanDataWithConfig(config.panels.plan));
+    setVisualState("plan", { justRefreshed: true });
+    clearFeedback("plan", "justRefreshed");
+  }, [config.panels.plan, setVisualState, clearFeedback]);
+  const customPanelActionsAsync = useMemo(() => {
+    const actions = {};
+    for (const name of customPanelNames) {
+      actions[name] = () => void refreshCustomPanelAsync(name);
+    }
+    return actions;
+  }, [customPanelNames, refreshCustomPanelAsync]);
+  const refreshAll = useCallback(async () => {
     if (config.panels.git.enabled) {
-      refreshGit();
+      void refreshGitAsync();
       setCountdowns((prev) => ({ ...prev, git: gitIntervalSeconds }));
     }
     if (config.panels.plan.enabled) {
-      refreshPlan();
+      refreshPlanWithFeedback();
       setCountdowns((prev) => ({ ...prev, plan: planIntervalSeconds }));
     }
     if (config.panels.tests.enabled) {
-      refreshTest();
+      void refreshTestAsync();
     }
-  }, [refreshGit, refreshPlan, refreshTest, config, gitIntervalSeconds, planIntervalSeconds]);
+    for (const name of customPanelNames) {
+      if (config.customPanels[name].enabled) {
+        void refreshCustomPanelAsync(name);
+        const interval = config.customPanels[name].interval;
+        setCountdowns((prev) => ({
+          ...prev,
+          [name]: interval ? interval / 1e3 : null
+        }));
+      }
+    }
+  }, [
+    refreshGitAsync,
+    refreshPlanWithFeedback,
+    refreshTestAsync,
+    refreshCustomPanelAsync,
+    config,
+    gitIntervalSeconds,
+    planIntervalSeconds,
+    customPanelNames
+  ]);
   const hotkeys = useMemo(
-    () => generateHotkeys(config, { tests: refreshTest }),
-    [config, refreshTest]
+    () => generateHotkeys(config, {
+      tests: () => void refreshTestAsync(),
+      customPanels: customPanelActionsAsync
+    }),
+    [config, refreshTestAsync, customPanelActionsAsync]
   );
   useEffect(() => {
     if (mode !== "watch") return;
@@ -801,7 +1435,7 @@ function DashboardApp({ mode }) {
     if (config.panels.git.enabled && config.panels.git.interval !== null) {
       timers.push(
         setInterval(() => {
-          refreshGit();
+          void refreshGitAsync();
           setCountdowns((prev) => ({ ...prev, git: gitIntervalSeconds }));
         }, config.panels.git.interval)
       );
@@ -809,26 +1443,54 @@ function DashboardApp({ mode }) {
     if (config.panels.plan.enabled && config.panels.plan.interval !== null) {
       timers.push(
         setInterval(() => {
-          refreshPlan();
+          refreshPlanWithFeedback();
           setCountdowns((prev) => ({ ...prev, plan: planIntervalSeconds }));
         }, config.panels.plan.interval)
       );
     }
     if (config.panels.tests.enabled && config.panels.tests.interval !== null) {
-      timers.push(setInterval(refreshTest, config.panels.tests.interval));
+      timers.push(setInterval(() => void refreshTestAsync(), config.panels.tests.interval));
+    }
+    if (config.customPanels) {
+      for (const [name, panelConfig] of Object.entries(config.customPanels)) {
+        if (panelConfig.enabled && panelConfig.interval !== null) {
+          const intervalSeconds = panelConfig.interval / 1e3;
+          timers.push(
+            setInterval(() => {
+              void refreshCustomPanelAsync(name);
+              setCountdowns((prev) => ({ ...prev, [name]: intervalSeconds }));
+            }, panelConfig.interval)
+          );
+        }
+      }
     }
     return () => timers.forEach((t) => clearInterval(t));
-  }, [mode, config, refreshGit, refreshPlan, refreshTest, gitIntervalSeconds, planIntervalSeconds]);
+  }, [
+    mode,
+    config,
+    refreshGitAsync,
+    refreshPlanWithFeedback,
+    refreshTestAsync,
+    refreshCustomPanelAsync,
+    gitIntervalSeconds,
+    planIntervalSeconds
+  ]);
   useEffect(() => {
     if (mode !== "watch") return;
     const tick = setInterval(() => {
-      setCountdowns((prev) => ({
-        git: prev.git !== null && prev.git > 1 ? prev.git - 1 : prev.git,
-        plan: prev.plan !== null && prev.plan > 1 ? prev.plan - 1 : prev.plan
-      }));
+      setCountdowns((prev) => {
+        const next = {
+          git: prev.git !== null && prev.git > 1 ? prev.git - 1 : prev.git,
+          plan: prev.plan !== null && prev.plan > 1 ? prev.plan - 1 : prev.plan
+        };
+        for (const name of customPanelNames) {
+          next[name] = prev[name] !== null && prev[name] > 1 ? prev[name] - 1 : prev[name];
+        }
+        return next;
+      });
     }, 1e3);
     return () => clearInterval(tick);
-  }, [mode]);
+  }, [mode, customPanelNames]);
   useInput(
     (input) => {
       if (input === "q") {
@@ -850,44 +1512,87 @@ function DashboardApp({ mode }) {
   for (const hotkey of hotkeys) {
     statusBarItems.push(`${hotkey.key}: ${hotkey.label}`);
   }
-  statusBarItems.push("r: refresh");
+  statusBarItems.push("r: refresh all");
   statusBarItems.push("q: quit");
-  return /* @__PURE__ */ jsxs5(Box5, { flexDirection: "column", children: [
-    warnings.length > 0 && /* @__PURE__ */ jsx5(Box5, { marginBottom: 1, children: /* @__PURE__ */ jsxs5(Text5, { color: "yellow", children: [
+  return /* @__PURE__ */ jsxs6(Box6, { flexDirection: "column", children: [
+    warnings.length > 0 && /* @__PURE__ */ jsx6(Box6, { marginBottom: 1, children: /* @__PURE__ */ jsxs6(Text6, { color: "yellow", children: [
       "\u26A0 ",
       warnings.join(", ")
     ] }) }),
-    config.panels.git.enabled && /* @__PURE__ */ jsx5(Box5, { children: /* @__PURE__ */ jsx5(
-      GitPanel,
-      {
-        branch: gitData.branch,
-        commits: gitData.commits,
-        stats: gitData.stats,
-        uncommitted: gitData.uncommitted,
-        countdown: mode === "watch" ? countdowns.git : null
+    config.panelOrder.map((panelName, index) => {
+      const isFirst = index === 0;
+      if (panelName === "git" && config.panels.git.enabled) {
+        const gitVisual = visualStates.git || DEFAULT_VISUAL_STATE;
+        return /* @__PURE__ */ jsx6(Box6, { marginTop: isFirst ? 0 : 1, children: /* @__PURE__ */ jsx6(
+          GitPanel,
+          {
+            branch: gitData.branch,
+            commits: gitData.commits,
+            stats: gitData.stats,
+            uncommitted: gitData.uncommitted,
+            countdown: mode === "watch" ? countdowns.git : null,
+            width: config.width,
+            isRunning: gitVisual.isRunning,
+            justRefreshed: gitVisual.justRefreshed
+          }
+        ) }, `panel-git-${index}`);
       }
-    ) }),
-    config.panels.plan.enabled && /* @__PURE__ */ jsx5(Box5, { marginTop: config.panels.git.enabled ? 1 : 0, children: /* @__PURE__ */ jsx5(
-      PlanPanel,
-      {
-        plan: planData.plan,
-        decisions: planData.decisions,
-        error: planData.error,
-        countdown: mode === "watch" ? countdowns.plan : null
+      if (panelName === "plan" && config.panels.plan.enabled) {
+        const planVisual = visualStates.plan || DEFAULT_VISUAL_STATE;
+        return /* @__PURE__ */ jsx6(Box6, { marginTop: isFirst ? 0 : 1, children: /* @__PURE__ */ jsx6(
+          PlanPanel,
+          {
+            plan: planData.plan,
+            decisions: planData.decisions,
+            error: planData.error,
+            countdown: mode === "watch" ? countdowns.plan : null,
+            width: config.width,
+            justRefreshed: planVisual.justRefreshed
+          }
+        ) }, `panel-plan-${index}`);
       }
-    ) }),
-    config.panels.tests.enabled && /* @__PURE__ */ jsx5(Box5, { marginTop: config.panels.git.enabled || config.panels.plan.enabled ? 1 : 0, children: /* @__PURE__ */ jsx5(
-      TestPanel,
-      {
-        results: testData.results,
-        isOutdated: testData.isOutdated,
-        commitsBehind: testData.commitsBehind,
-        error: testData.error
+      if (panelName === "tests" && config.panels.tests.enabled) {
+        const testsVisual = visualStates.tests || DEFAULT_VISUAL_STATE;
+        return /* @__PURE__ */ jsx6(Box6, { marginTop: isFirst ? 0 : 1, children: /* @__PURE__ */ jsx6(
+          TestPanel,
+          {
+            results: testData.results,
+            isOutdated: testData.isOutdated,
+            commitsBehind: testData.commitsBehind,
+            error: testData.error,
+            width: config.width,
+            isRunning: testsVisual.isRunning,
+            justCompleted: testsVisual.justCompleted
+          }
+        ) }, `panel-tests-${index}`);
       }
-    ) }),
-    mode === "watch" && /* @__PURE__ */ jsx5(Box5, { marginTop: 1, width: PANEL_WIDTH, children: /* @__PURE__ */ jsx5(Text5, { dimColor: true, children: statusBarItems.map((item, index) => /* @__PURE__ */ jsxs5(React.Fragment, { children: [
+      const customConfig = config.customPanels?.[panelName];
+      if (customConfig && customConfig.enabled) {
+        const result = customPanelData[panelName];
+        if (!result) return null;
+        const customVisual = visualStates[panelName] || DEFAULT_VISUAL_STATE;
+        const isManual = customConfig.interval === null;
+        const relativeTime = isManual ? formatRelativeTime2(result.timestamp) : void 0;
+        const countdown = !isManual && mode === "watch" ? countdowns[panelName] : null;
+        return /* @__PURE__ */ jsx6(Box6, { marginTop: isFirst ? 0 : 1, children: /* @__PURE__ */ jsx6(
+          GenericPanel,
+          {
+            data: result.data,
+            renderer: customConfig.renderer,
+            countdown,
+            relativeTime,
+            error: result.error,
+            width: config.width,
+            isRunning: customVisual.isRunning,
+            justRefreshed: customVisual.justRefreshed
+          }
+        ) }, `panel-${panelName}-${index}`);
+      }
+      return null;
+    }),
+    mode === "watch" && /* @__PURE__ */ jsx6(Box6, { marginTop: 1, width: config.width, children: /* @__PURE__ */ jsx6(Text6, { dimColor: true, children: statusBarItems.map((item, index) => /* @__PURE__ */ jsxs6(React.Fragment, { children: [
       index > 0 && " \xB7 ",
-      /* @__PURE__ */ jsxs5(Text5, { color: "cyan", children: [
+      /* @__PURE__ */ jsxs6(Text6, { color: "cyan", children: [
         item.split(":")[0],
         ":"
       ] }),
@@ -897,9 +1602,9 @@ function DashboardApp({ mode }) {
 }
 function App({ mode, agentDirExists: agentDirExists2 = true }) {
   if (!agentDirExists2) {
-    return /* @__PURE__ */ jsx5(WelcomeApp, {});
+    return /* @__PURE__ */ jsx6(WelcomeApp, {});
   }
-  return /* @__PURE__ */ jsx5(DashboardApp, { mode });
+  return /* @__PURE__ */ jsx6(DashboardApp, { mode });
 }
 
 // src/cli.ts
@@ -922,14 +1627,14 @@ import {
   existsSync as nodeExistsSync2,
   mkdirSync as nodeMkdirSync,
   writeFileSync as nodeWriteFileSync,
-  readFileSync as nodeReadFileSync4,
+  readFileSync as nodeReadFileSync5,
   appendFileSync as nodeAppendFileSync
 } from "fs";
 var fs2 = {
   existsSync: nodeExistsSync2,
   mkdirSync: nodeMkdirSync,
   writeFileSync: nodeWriteFileSync,
-  readFileSync: (path) => nodeReadFileSync4(path, "utf-8"),
+  readFileSync: (path) => nodeReadFileSync5(path, "utf-8"),
   appendFileSync: nodeAppendFileSync
 };
 var AGENT_STATE_SECTION = `## Agent State