@ondrej-svec/hog 1.12.0 → 1.14.0

package/dist/cli.js

@@ -2014,7 +2014,8 @@ function useKeyboard({
   activityNav,
   onRepoEnter,
   onStatusEnter,
-  onActivityEnter
+  onActivityEnter,
+  showDetailPanel
 }) {
   const {
     exit,
@@ -2115,7 +2116,11 @@ function useKeyboard({
       if (ui.canAct) {
         const digit = parseInt(input2, 10);
         if (!Number.isNaN(digit) && digit >= 0 && digit <= 4) {
-          panelFocus.focusPanel(digit);
+          if (digit === 0 && !showDetailPanel) {
+            ui.enterDetail();
+          } else {
+            panelFocus.focusPanel(digit);
+          }
           return;
         }
         if (input2 === "/") {
@@ -2721,6 +2726,9 @@ function uiReducer(state, action) {
     case "ENTER_EDIT_ISSUE":
       if (state.mode !== "normal") return state;
       return { ...state, mode: "overlay:editIssue", previousMode: "normal" };
+    case "ENTER_DETAIL":
+      if (state.mode !== "normal") return state;
+      return { ...state, mode: "overlay:detail", previousMode: "normal" };
     case "TOGGLE_HELP":
       return { ...state, helpVisible: !state.helpVisible };
     case "EXIT_OVERLAY":
@@ -2765,6 +2773,7 @@ function useUIState() {
     enterFocus: useCallback9(() => dispatch({ type: "ENTER_FOCUS" }), []),
     enterFuzzyPicker: useCallback9(() => dispatch({ type: "ENTER_FUZZY_PICKER" }), []),
     enterEditIssue: useCallback9(() => dispatch({ type: "ENTER_EDIT_ISSUE" }), []),
+    enterDetail: useCallback9(() => dispatch({ type: "ENTER_DETAIL" }), []),
     toggleHelp: useCallback9(() => dispatch({ type: "TOGGLE_HELP" }), []),
     exitOverlay: useCallback9(() => dispatch({ type: "EXIT_OVERLAY" }), []),
     exitToNormal: useCallback9(() => dispatch({ type: "EXIT_TO_NORMAL" }), []),
@@ -3095,6 +3104,12 @@ function HintBar({
   if (uiMode === "overlay:fuzzyPicker") {
     return /* @__PURE__ */ jsx5(Box5, { children: /* @__PURE__ */ jsx5(Text5, { color: "gray", children: "\u2191\u2193/Ctrl-J/K:nav Enter:jump Esc:close" }) });
   }
+  if (uiMode === "overlay:detail") {
+    return /* @__PURE__ */ jsxs5(Box5, { children: [
+      /* @__PURE__ */ jsx5(Text5, { color: "cyan", bold: true, children: "[DETAIL]" }),
+      /* @__PURE__ */ jsx5(Text5, { color: "gray", children: " Esc:close e:edit c:comment y:copy-link ? help" })
+    ] });
+  }
   if (uiMode.startsWith("overlay:")) {
     return /* @__PURE__ */ jsx5(Box5, { children: /* @__PURE__ */ jsx5(Text5, { color: "gray", children: "j/k:nav Enter:select Esc:cancel" }) });
   }
@@ -4162,6 +4177,7 @@ var init_help_overlay = __esm({
         category: "View",
         items: [
           { key: "Enter", desc: "Open issue in browser" },
+          { key: "0", desc: "Detail panel (full-screen on narrow terminals)" },
           { key: "Space", desc: "Multi-select item" },
           { key: "/", desc: "Search (inline filter)" },
           { key: "F", desc: "Fuzzy find issue (telescope-style)" },
@@ -4845,47 +4861,69 @@ var init_repos_panel = __esm({
 
 // src/board/components/issue-row.tsx
 import { Box as Box20, Text as Text19 } from "ink";
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs21 } from "react/jsx-runtime";
 function truncate(s, max) {
   return s.length > max ? `${s.slice(0, max - 1)}\u2026` : s;
 }
-function formatTargetDate(dateStr) {
-  if (!dateStr) return { text: "", color: "gray" };
-  const d = new Date(dateStr);
-  const days = Math.ceil((d.getTime() - Date.now()) / 864e5);
-  if (days < 0) return { text: `${Math.abs(days)}d overdue`, color: "red" };
-  if (days === 0) return { text: "today", color: "yellow" };
-  if (days === 1) return { text: "tomorrow", color: "white" };
-  if (days <= 7) return { text: `in ${days}d`, color: "white" };
-  return {
-    text: d.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
-    color: "gray"
-  };
-}
-function timeAgo2(dateStr) {
-  const seconds = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1e3);
-  if (seconds < 60) return "now";
+function formatDate2(issue) {
+  if (issue.targetDate) {
+    const d = new Date(issue.targetDate);
+    const days2 = Math.ceil((d.getTime() - Date.now()) / 864e5);
+    if (days2 < 0) return { text: `${Math.abs(days2)}d overdue`, color: "red" };
+    if (days2 === 0) return { text: "today", color: "yellow" };
+    if (days2 === 1) return { text: "tomorrow", color: "white" };
+    if (days2 <= 7) return { text: `in ${days2}d`, color: "white" };
+    return {
+      text: d.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+      color: "gray"
+    };
+  }
+  const seconds = Math.floor((Date.now() - new Date(issue.updatedAt).getTime()) / 1e3);
+  if (seconds < 60) return { text: "now", color: "gray" };
   const minutes = Math.floor(seconds / 60);
-  if (minutes < 60) return `${minutes}m`;
+  if (minutes < 60) return { text: `${minutes}m`, color: "gray" };
   const hours = Math.floor(minutes / 60);
-  if (hours < 24) return `${hours}h`;
+  if (hours < 24) return { text: `${hours}h`, color: "gray" };
   const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d`;
+  if (days < 30) return { text: `${days}d`, color: "gray" };
   const months = Math.floor(days / 30);
-  return `${months}mo`;
+  return { text: `${months}mo`, color: "gray" };
+}
+function compactLabel(name) {
+  const lc = name.toLowerCase();
+  const colon = lc.indexOf(":");
+  if (colon < 0) return PLAIN_ABBREVS[lc] ?? name.slice(0, 5);
+  const key = lc.slice(0, colon);
+  const val = name.slice(colon + 1);
+  if (key === "size") return val.slice(0, 3).toUpperCase();
+  if (key === "priority") return `p:${val.slice(0, 1).toUpperCase()}`;
+  if (key === "work") return "WIP";
+  return `${key.slice(0, 2)}:${val.slice(0, 2)}`;
 }
 function labelColor(name) {
-  return LABEL_COLORS[name.toLowerCase()] ?? "cyan";
-}
-function IssueRow({ issue, selfLogin, isSelected }) {
+  const lc = name.toLowerCase();
+  if (lc === "bug" || lc === "urgent" || lc.startsWith("priority:h") || lc.startsWith("priority:c"))
+    return "red";
+  if (lc.startsWith("priority:m") || lc.startsWith("work:")) return "yellow";
+  if (lc.startsWith("priority:l") || lc === "wontfix") return "gray";
+  if (lc.startsWith("size:")) return "white";
+  if (lc === "feature" || lc === "enhancement") return "green";
+  if (lc === "documentation") return "blue";
+  if (lc === "good first issue") return "magenta";
+  return "cyan";
+}
+function IssueRow({ issue, selfLogin, isSelected, panelWidth }) {
   const assignees = issue.assignees ?? [];
   const isSelf = assignees.some((a) => a.login === selfLogin);
   const isUnassigned = assignees.length === 0;
   const assigneeColor = isSelf ? "green" : isUnassigned ? "gray" : "white";
-  const assigneeText = isUnassigned ? "unassigned" : truncate(assignees.map((a) => a.login).join(", "), 14);
+  const assigneeText = isUnassigned ? "unassigned" : truncate(assignees.map((a) => a.login).join(", "), ASSIGN_W);
   const labels = (issue.labels ?? []).slice(0, 2);
-  const target = formatTargetDate(issue.targetDate);
-  const titleStr = truncate(issue.title, 42).padEnd(42);
+  const date = formatDate2(issue);
+  const innerW = panelWidth - 2;
+  const titleW = Math.max(8, innerW - FIXED_OVERHEAD);
+  const titleStr = truncate(issue.title, titleW).padEnd(titleW);
+  const dateStr = date.text.padStart(DATE_W);
   return /* @__PURE__ */ jsxs21(Box20, { children: [
     isSelected ? /* @__PURE__ */ jsx21(Text19, { color: "cyan", bold: true, children: "\u25B6 " }) : /* @__PURE__ */ jsx21(Text19, { children: "  " }),
     /* @__PURE__ */ jsxs21(Text19, { color: "cyan", children: [
@@ -4893,49 +4931,57 @@ function IssueRow({ issue, selfLogin, isSelected }) {
       String(issue.number).padEnd(5)
     ] }),
     /* @__PURE__ */ jsx21(Text19, { children: " " }),
-    isSelected ? /* @__PURE__ */ jsx21(Text19, { color: "white", bold: true, children: titleStr }) : /* @__PURE__ */ jsx21(Text19, { children: titleStr }),
+    isSelected ? /* @__PURE__ */ jsx21(Text19, { bold: true, color: "white", children: titleStr }) : /* @__PURE__ */ jsx21(Text19, { children: titleStr }),
     /* @__PURE__ */ jsx21(Text19, { children: " " }),
-    /* @__PURE__ */ jsx21(Box20, { width: LABEL_COL_WIDTH, children: labels.map((l, i) => /* @__PURE__ */ jsxs21(Text19, { children: [
+    /* @__PURE__ */ jsx21(Box20, { width: LABEL_W, overflow: "hidden", children: labels.length === 0 ? /* @__PURE__ */ jsx21(Text19, { color: "gray", children: " ".repeat(LABEL_W) }) : labels.map((l, i) => /* @__PURE__ */ jsxs21(Text19, { children: [
       i > 0 ? " " : "",
       /* @__PURE__ */ jsxs21(Text19, { color: labelColor(l.name), children: [
         "[",
-        truncate(l.name, 12),
+        compactLabel(l.name),
         "]"
       ] })
     ] }, l.name)) }),
     /* @__PURE__ */ jsx21(Text19, { children: " " }),
-    /* @__PURE__ */ jsx21(Text19, { color: assigneeColor, children: assigneeText.padEnd(14) }),
+    /* @__PURE__ */ jsx21(Text19, { color: assigneeColor, children: assigneeText.padEnd(ASSIGN_W) }),
     /* @__PURE__ */ jsx21(Text19, { children: " " }),
-    /* @__PURE__ */ jsx21(Text19, { color: "gray", children: timeAgo2(issue.updatedAt).padStart(4) }),
-    target.text ? /* @__PURE__ */ jsxs21(Fragment3, { children: [
-      /* @__PURE__ */ jsx21(Text19, { children: " " }),
-      /* @__PURE__ */ jsx21(Text19, { color: target.color, children: target.text })
-    ] }) : null
+    /* @__PURE__ */ jsx21(Text19, { color: date.color, children: dateStr })
   ] });
 }
-var LABEL_COLORS, LABEL_COL_WIDTH;
+var PLAIN_ABBREVS, CURSOR_W, NUM_W, LABEL_W, ASSIGN_W, DATE_W, FIXED_OVERHEAD;
 var init_issue_row = __esm({
   "src/board/components/issue-row.tsx"() {
     "use strict";
-    LABEL_COLORS = {
-      bug: "red",
-      enhancement: "green",
-      feature: "green",
-      documentation: "blue",
-      "good first issue": "magenta",
-      help: "yellow",
-      question: "yellow",
-      urgent: "red",
-      wontfix: "gray"
+    PLAIN_ABBREVS = {
+      bug: "bug",
+      feature: "feat",
+      enhancement: "enh",
+      documentation: "docs",
+      "good first issue": "gfi",
+      help: "help",
+      question: "?",
+      urgent: "urg!",
+      wontfix: "wont",
+      task: "task"
     };
-    LABEL_COL_WIDTH = 30;
+    CURSOR_W = 2;
+    NUM_W = 7;
+    LABEL_W = 13;
+    ASSIGN_W = 10;
+    DATE_W = 10;
+    FIXED_OVERHEAD = CURSOR_W + NUM_W + 1 + LABEL_W + 1 + ASSIGN_W + 1 + DATE_W;
   }
 });
 
 // src/board/components/row-renderer.tsx
 import { Box as Box21, Text as Text20 } from "ink";
 import { jsx as jsx22, jsxs as jsxs22 } from "react/jsx-runtime";
-function RowRenderer({ row, selectedId, selfLogin, isMultiSelected }) {
+function RowRenderer({
+  row,
+  selectedId,
+  selfLogin,
+  isMultiSelected,
+  panelWidth = 120
+}) {
   switch (row.type) {
     case "sectionHeader": {
       const arrow = row.isCollapsed ? "\u25B6" : "\u25BC";
@@ -4990,7 +5036,15 @@ function RowRenderer({ row, selectedId, selfLogin, isMultiSelected }) {
       const checkbox2 = isMultiSelected != null ? isMultiSelected ? "\u2611 " : "\u2610 " : "";
       return /* @__PURE__ */ jsxs22(Box21, { children: [
         checkbox2 ? /* @__PURE__ */ jsx22(Text20, { color: isMultiSelected ? "cyan" : "gray", children: checkbox2 }) : null,
-        /* @__PURE__ */ jsx22(IssueRow, { issue: row.issue, selfLogin, isSelected: selectedId === row.navId })
+        /* @__PURE__ */ jsx22(
+          IssueRow,
+          {
+            issue: row.issue,
+            selfLogin,
+            isSelected: selectedId === row.navId,
+            panelWidth
+          }
+        )
       ] });
     }
     case "activity": {
@@ -5065,10 +5119,10 @@ var init_statuses_panel = __esm({
 // src/board/components/toast-container.tsx
 import { Spinner as Spinner3 } from "@inkjs/ui";
 import { Box as Box23, Text as Text22 } from "ink";
-import { Fragment as Fragment4, jsx as jsx24, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx24, jsxs as jsxs24 } from "react/jsx-runtime";
 function ToastContainer({ toasts }) {
   if (toasts.length === 0) return null;
-  return /* @__PURE__ */ jsx24(Box23, { flexDirection: "column", children: toasts.map((t) => /* @__PURE__ */ jsx24(Box23, { children: t.type === "loading" ? /* @__PURE__ */ jsxs24(Fragment4, { children: [
+  return /* @__PURE__ */ jsx24(Box23, { flexDirection: "column", children: toasts.map((t) => /* @__PURE__ */ jsx24(Box23, { children: t.type === "loading" ? /* @__PURE__ */ jsxs24(Fragment3, { children: [
     /* @__PURE__ */ jsx24(Spinner3, { label: "" }),
     /* @__PURE__ */ jsxs24(Text22, { color: "cyan", children: [
       " ",
@@ -5104,7 +5158,7 @@ import { execFileSync as execFileSync3, spawnSync as spawnSync4 } from "child_pr
 import { Spinner as Spinner4 } from "@inkjs/ui";
 import { Box as Box24, Text as Text23, useApp, useStdout } from "ink";
 import { useCallback as useCallback12, useEffect as useEffect9, useMemo as useMemo3, useRef as useRef13, useState as useState16 } from "react";
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx25, jsxs as jsxs25 } from "react/jsx-runtime";
 function resolveStatusGroups(statusOptions, configuredGroups) {
   if (configuredGroups && configuredGroups.length > 0) {
     return configuredGroups.map((entry) => {
@@ -5740,7 +5794,8 @@ function Dashboard({ config: config2, options, activeProfile }) {
     activityNav,
     onRepoEnter,
     onStatusEnter,
-    onActivityEnter
+    onActivityEnter,
+    showDetailPanel
   });
   if (status === "loading" && !data) {
     return /* @__PURE__ */ jsx25(Box24, { flexDirection: "column", padding: 1, children: /* @__PURE__ */ jsx25(Spinner4, { label: "Loading dashboard..." }) });
@@ -5801,6 +5856,7 @@ function Dashboard({ config: config2, options, activeProfile }) {
             row,
             selectedId: nav.selectedId,
             selfLogin: config2.board.assignee,
+            panelWidth: issuesPanelWidth,
             isMultiSelected: ui.state.mode === "multiSelect" && row.navId ? multiSelect.isSelected(row.navId) : void 0
           },
           row.key
@@ -5851,10 +5907,10 @@ function Dashboard({ config: config2, options, activeProfile }) {
         dateStr
       ] }),
       /* @__PURE__ */ jsx25(Text23, { children: " " }),
-      isRefreshing ? /* @__PURE__ */ jsxs25(Fragment5, { children: [
+      isRefreshing ? /* @__PURE__ */ jsxs25(Fragment4, { children: [
         /* @__PURE__ */ jsx25(Spinner4, { label: "" }),
         /* @__PURE__ */ jsx25(Text23, { color: "cyan", children: " Refreshing..." })
-      ] }) : /* @__PURE__ */ jsxs25(Fragment5, { children: [
+      ] }) : /* @__PURE__ */ jsxs25(Fragment4, { children: [
         /* @__PURE__ */ jsx25(RefreshAge, { lastRefresh }),
         consecutiveFailures > 0 ? /* @__PURE__ */ jsx25(Text23, { color: "red", children: " (!)" }) : null
       ] }),
@@ -5906,7 +5962,18 @@ function Dashboard({ config: config2, options, activeProfile }) {
         onPushEntry: pushEntry
       }
     ),
-    !ui.state.helpVisible && ui.state.mode !== "overlay:status" && ui.state.mode !== "overlay:create" && ui.state.mode !== "overlay:createNl" && ui.state.mode !== "overlay:bulkAction" && ui.state.mode !== "overlay:confirmPick" && ui.state.mode !== "focus" ? /* @__PURE__ */ jsx25(
+    ui.state.mode === "overlay:detail" ? /* @__PURE__ */ jsx25(
+      DetailPanel,
+      {
+        issue: selectedItem.issue,
+        width: termSize.cols,
+        isActive: true,
+        issueRepo: selectedItem.repoName,
+        fetchComments: handleFetchComments,
+        commentsState: currentCommentsState
+      }
+    ) : null,
+    !ui.state.helpVisible && ui.state.mode !== "overlay:status" && ui.state.mode !== "overlay:create" && ui.state.mode !== "overlay:createNl" && ui.state.mode !== "overlay:bulkAction" && ui.state.mode !== "overlay:confirmPick" && ui.state.mode !== "overlay:detail" && ui.state.mode !== "focus" ? /* @__PURE__ */ jsx25(
       PanelLayout,
       {
         cols: termSize.cols,
@@ -7142,7 +7209,7 @@ function resolveProjectId(projectId) {
   process.exit(1);
 }
 var program = new Command();
-program.name("hog").description("Personal command deck \u2014 unified task dashboard for GitHub Projects + TickTick").version("1.12.0").option("--json", "Force JSON output").option("--human", "Force human-readable output").hook("preAction", (thisCommand) => {
+program.name("hog").description("Personal command deck \u2014 unified task dashboard for GitHub Projects + TickTick").version("1.14.0").option("--json", "Force JSON output").option("--human", "Force human-readable output").hook("preAction", (thisCommand) => {
   const opts = thisCommand.opts();
   if (opts.json) setFormat("json");
   if (opts.human) setFormat("human");