plc-cli 0.2.0 → 0.3.0

package/dist/cli.js

@@ -6,7 +6,7 @@ import { Command } from "commander";
 // src/meta.ts
 var PRODUCT_NAME = "Plane Cockpit";
 var BINARY_NAME = "plc";
-var VERSION = true ? "0.2.0" : "0.0.0-dev";
+var VERSION = true ? "0.3.0" : "0.0.0-dev";
 var AUTHOR_HANDLE = "@brunoomariano";
 
 // src/commands/auth/index.ts
@@ -258,6 +258,7 @@ var planeConfigSchema = z.strictObject({
 var DEFAULT_TIMEOUT_MS = 3e4;
 var DEFAULT_CACHE_TTL_SECONDS = 300;
 var STATES_LABELS_TTL_SECONDS = 300;
+var ACTIVITIES_TTL_SECONDS = 60;
 var DEFAULT_CONFIG_PATHS = ["~/.config/plane-cli/config.yaml"];
 
 // src/config/load-config.ts
@@ -986,7 +987,11 @@ var cacheKeys = {
   states: (slug, projectId) => workspaceKey(slug, "project", projectId, "states"),
   // Labels are project-scoped too, cached per project id.
   labels: (slug, projectId) => workspaceKey(slug, "project", projectId, "labels"),
-  issuesPage: (slug, projectId, hash) => workspaceKey(slug, "project", projectId, "issues", hash)
+  issuesPage: (slug, projectId, hash) => workspaceKey(slug, "project", projectId, "issues", hash),
+  // The activity log is per work item, so it is cached per project + issue id.
+  issueActivities: (slug, projectId, issueId) => workspaceKey(slug, "project", projectId, "issue", issueId, "activities"),
+  // Relations are per work item too, cached per project + issue id.
+  issueRelations: (slug, projectId, issueId) => workspaceKey(slug, "project", projectId, "issue", issueId, "relations")
 };
 
 // src/plane/projects.ts
@@ -1628,6 +1633,104 @@ var LabelsService = class {
   }
 };
 
+// src/plane/activities.ts
+function toActivity(raw) {
+  return {
+    id: raw.id,
+    verb: raw.verb,
+    field: raw.field ?? void 0,
+    oldValue: raw.old_value ?? void 0,
+    newValue: raw.new_value ?? void 0,
+    oldIdentifier: raw.old_identifier ?? void 0,
+    newIdentifier: raw.new_identifier ?? void 0,
+    createdAt: raw.created_at,
+    actor: raw.actor ?? void 0
+  };
+}
+function unwrap(res) {
+  if (Array.isArray(res)) return res;
+  if ("result" in res && Array.isArray(res.result)) return res.result;
+  if ("results" in res && Array.isArray(res.results)) return res.results;
+  return [];
+}
+var ActivitiesService = class {
+  constructor(api, cache) {
+    this.api = api;
+    this.cache = cache;
+  }
+  api;
+  cache;
+  // list returns the issue's activity log, cache-first. The cached copy lets the
+  // detail view's timing line and the activity tab share a single fetch; the
+  // short TTL means a fresh change shows up the next time the detail opens.
+  async list(project, issueId, signal) {
+    const key = cacheKeys.issueActivities(this.api.workspace, project.id, issueId);
+    const cached2 = await this.cache.get(key);
+    if (cached2) return cached2;
+    const res = await this.api.request(
+      this.api.workspacePath("projects", project.id, "issues", issueId, "activities"),
+      { signal }
+    );
+    const activities = unwrap(res).map(toActivity);
+    await this.cache.set(key, activities, ACTIVITIES_TTL_SECONDS);
+    return activities;
+  }
+};
+
+// src/types/relation.ts
+var RELATION_TYPES = [
+  "blocking",
+  "blocked_by",
+  "relates_to",
+  "duplicate",
+  "start_after",
+  "start_before",
+  "finish_after",
+  "finish_before"
+];
+var RELATION_LABELS = {
+  blocking: "blocking",
+  blocked_by: "blocked by",
+  relates_to: "relates to",
+  duplicate: "duplicate of",
+  start_after: "starts after",
+  start_before: "starts before",
+  finish_after: "finishes after",
+  finish_before: "finishes before"
+};
+
+// src/plane/relations.ts
+function normalize(raw) {
+  const relations = {};
+  for (const type of RELATION_TYPES) {
+    relations[type] = raw[type] ?? [];
+  }
+  return relations;
+}
+var RelationsService = class {
+  constructor(api, cache) {
+    this.api = api;
+    this.cache = cache;
+  }
+  api;
+  cache;
+  // list returns the current relations for an issue, cache-first. The short TTL
+  // matches the activity log's: opening the detail and toggling the relations
+  // section reuses one fetch, and a freshly added relation appears on reopen.
+  async list(project, issueId, signal) {
+    const key = cacheKeys.issueRelations(this.api.workspace, project.id, issueId);
+    const cached2 = await this.cache.get(key);
+    if (cached2) return cached2;
+    const raw = await this.api.request(
+      this.api.workspacePath("projects", project.id, "work-items", issueId, "relations"),
+      { signal }
+    );
+    const relations = normalize(raw);
+    await this.cache.set(key, relations, ACTIVITIES_TTL_SECONDS);
+    return relations;
+  }
+};
+
 // src/keybindings/load.ts
 import { readFile as readFile3 } from "fs/promises";
 import YAML3 from "yaml";
@@ -1749,6 +1852,24 @@ var ACTIONS = [
   },
   { id: "detail.comment", context: "detail", description: "comment on issue", defaultKey: "c" },
   { id: "detail.edit", context: "detail", description: "edit issue fields", defaultKey: "e" },
+  {
+    id: "detail.activity",
+    context: "detail",
+    description: "toggle the state-change activity log",
+    defaultKey: "a"
+  },
+  {
+    id: "detail.relations",
+    context: "detail",
+    description: "toggle the relations section",
+    defaultKey: "l"
+  },
+  {
+    id: "detail.relation-open",
+    context: "detail",
+    description: "open the focused relation",
+    defaultKey: "enter"
+  },
   {
     id: "detail.close",
     context: "detail",
@@ -2043,6 +2164,8 @@ async function buildContext(flags) {
   const users = new UsersService(api, cache);
   const states = new StatesService(api, cache);
   const labels = new LabelsService(api, cache);
+  const activities = new ActivitiesService(api, cache);
+  const relations = new RelationsService(api, cache);
   const issues = new IssuesService(projects, workItems, users);
   const { bindings: keybindings, sourcePath: keybindingsSourcePath } = await loadKeybindings();
   const runtime = {
@@ -2062,6 +2185,8 @@ async function buildContext(flags) {
     users,
     states,
     labels,
+    activities,
+    relations,
     keybindings,
     keybindingsSourcePath,
     theme: resolveTheme(profile.theme),
@@ -2664,7 +2789,7 @@ import React9 from "react";
 import { render } from "ink";
 
 // src/tui/dashboard.tsx
-import React7, { useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo6, useState as useState11 } from "react";
+import React7, { useCallback as useCallback7, useEffect as useEffect7, useMemo as useMemo8, useState as useState14 } from "react";
 import { Box as Box12, Text as Text12, useApp, useInput as useInput2 } from "ink";
 
 // src/tui/theme/context.tsx
@@ -3058,7 +3183,7 @@ function IssueList(props) {
 }
 
 // src/tui/issue-detail.tsx
-import { useMemo } from "react";
+import React5, { useMemo } from "react";
 import { Box as Box5, Text as Text5 } from "ink";
 
 // src/utils/markdown-to-ansi.ts
@@ -3215,18 +3340,67 @@ function splitAnsiIntoLines(text, width) {
   return rows;
 }
 
+// src/utils/format-duration.ts
+var MINUTE_MS = 6e4;
+var HOUR_MS = 60 * MINUTE_MS;
+var DAY_MS = 24 * HOUR_MS;
+function humanizeDuration(ms) {
+  if (ms < MINUTE_MS) return "just now";
+  const days = Math.floor(ms / DAY_MS);
+  const hours = Math.floor(ms % DAY_MS / HOUR_MS);
+  const minutes = Math.floor(ms % HOUR_MS / MINUTE_MS);
+  const parts = [];
+  if (days > 0) parts.push(`${days}d`);
+  if (hours > 0) parts.push(`${hours}h`);
+  if (minutes > 0 && days === 0) parts.push(`${minutes}m`);
+  return parts.slice(0, 2).join(" ");
+}
+
+// src/tui/format-relation.ts
+function formatRelationRow(relation, now) {
+  const head = relation.targetKey ?? `${relation.targetId.slice(0, 8)}\u2026`;
+  const parts = [head];
+  if (relation.target) {
+    parts.push(relation.target.state.name);
+    if (relation.target.name) parts.push(relation.target.name);
+  }
+  if (relation.relatedAt) {
+    const when = Date.parse(relation.relatedAt);
+    if (!Number.isNaN(when)) {
+      const elapsed = humanizeDuration(now - when);
+      parts.push(elapsed === "just now" ? "just now" : `${elapsed} ago`);
+    }
+  }
+  return parts.join(" \xB7 ");
+}
+
 // src/tui/issue-detail.tsx
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function formatStateChange(activity, now) {
+  const when = Date.parse(activity.createdAt);
+  const from = activity.oldValue ? `${activity.oldValue} \u2192 ` : "\u2192 ";
+  const head = `${from}${activity.newValue ?? "?"}`;
+  if (Number.isNaN(when)) return head;
+  const elapsed = humanizeDuration(now - when);
+  return elapsed === "just now" ? `${head} \xB7 just now` : `${head} \xB7 ${elapsed} ago`;
+}
 var MODAL_WIDTH = 100;
 var PANEL_WIDTH = 50;
 var HORIZONTAL_CHROME = 4;
 var DETAIL_CHROME_ROWS = 16;
-function IssueMeta({ issue }) {
+function IssueMeta({
+  issue,
+  timeInState
+}) {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs5(Box5, { marginTop: 1, flexDirection: "column", flexShrink: 0, children: [
     /* @__PURE__ */ jsxs5(Text5, { children: [
       "state: ",
-      /* @__PURE__ */ jsx6(Text5, { color: theme.accent, children: issue.state.name })
+      /* @__PURE__ */ jsx6(Text5, { color: theme.accent, children: issue.state.name }),
+      timeInState ? /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+        " \xB7 for ",
+        timeInState
+      ] }) : null
     ] }),
     /* @__PURE__ */ jsxs5(Text5, { children: [
       "priority: ",
@@ -3246,12 +3420,12 @@ function IssueMeta({ issue }) {
     ] })
   ] });
 }
-function DescriptionBody(props) {
+function ScrollableBody(props) {
   let content;
-  if (props.loading && !props.hasDescription) {
-    content = /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: "loading description\u2026" });
+  if (props.loading && props.visible.length === 0) {
+    content = /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: props.loadingLabel });
   } else if (props.visible.length === 0 && props.hiddenAbove === 0 && props.hiddenBelow === 0) {
-    content = /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: "(no description)" });
+    content = /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: props.emptyLabel });
   } else {
     content = /* @__PURE__ */ jsxs5(Fragment2, { children: [
       props.hiddenAbove > 0 ? /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
@@ -3269,60 +3443,173 @@ function DescriptionBody(props) {
   }
   return /* @__PURE__ */ jsx6(Box5, { marginTop: 1, flexDirection: "column", overflow: "hidden", children: content });
 }
-function closeHintFor(scrollTop, viewportRows, total) {
-  if (total <= viewportRows) return "esc to close";
+function RelationRow({
+  relation,
+  focused,
+  now
+}) {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsxs5(Text5, { wrap: "truncate", color: focused ? theme.accent : void 0, bold: focused, children: [
+    focused ? "\u203A " : "  ",
+    formatRelationRow(relation, now)
+  ] });
+}
+function RelationsBody(props) {
+  if (props.relations.length === 0) {
+    return /* @__PURE__ */ jsx6(Box5, { marginTop: 1, flexDirection: "column", overflow: "hidden", children: /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: props.loading ? "loading relations\u2026" : "(no relations)" }) });
+  }
+  const now = Date.now();
+  const start = Math.max(
+    0,
+    Math.min(props.selected - 1, props.relations.length - props.viewportRows)
+  );
+  const window = props.relations.slice(Math.max(0, start), Math.max(0, start) + props.viewportRows);
+  let lastType;
+  return /* @__PURE__ */ jsx6(Box5, { marginTop: 1, flexDirection: "column", overflow: "hidden", children: window.map((relation, idx) => {
+    const flatIdx = Math.max(0, start) + idx;
+    const heading = relation.type !== lastType ? RELATION_LABELS[relation.type] : void 0;
+    lastType = relation.type;
+    return /* @__PURE__ */ jsxs5(React5.Fragment, { children: [
+      heading ? /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+        heading,
+        ":"
+      ] }) : null,
+      /* @__PURE__ */ jsx6(RelationRow, { relation, focused: flatIdx === props.selected, now })
+    ] }, `${relation.type}-${relation.targetId}`);
+  }) });
+}
+var HINT_BY_MODE = {
+  detail: "esc to close \xB7 a: activity \xB7 l: relations",
+  activity: "esc to close \xB7 a: description",
+  relations: "esc back \xB7 enter: open \xB7 l: description"
+};
+function closeHintFor(scrollTop, viewportRows, total, mode) {
+  const label = HINT_BY_MODE[mode];
+  if (mode === "relations" || total <= viewportRows) return label;
   const end = Math.min(scrollTop + viewportRows, total);
-  return `esc to close \xB7 ${scrollTop + 1}-${end}/${total}`;
+  return `${label} \xB7 ${scrollTop + 1}-${end}/${total}`;
+}
+function DetailHeader(props) {
+  return /* @__PURE__ */ jsxs5(Box5, { justifyContent: "space-between", flexShrink: 0, children: [
+    /* @__PURE__ */ jsxs5(Text5, { bold: true, children: [
+      props.issueKey,
+      props.mode !== "detail" ? /* @__PURE__ */ jsxs5(Text5, { dimColor: true, children: [
+        " \xB7 ",
+        props.mode
+      ] }) : null
+    ] }),
+    props.variant === "modal" ? /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: closeHintFor(props.scrollTop, props.viewportRows, props.total, props.mode) }) : null
+  ] });
+}
+var BODY_LABELS = {
+  detail: { loadingLabel: "loading description\u2026", emptyLabel: "(no description)" },
+  activity: { loadingLabel: "loading activity\u2026", emptyLabel: "(no state changes)" }
+};
+function resolveBody(mode, lines, props) {
+  const viewportRows = props.viewportRows ?? lines.length;
+  const scrollTop = Math.max(
+    0,
+    Math.min(props.scrollTop ?? 0, Math.max(0, lines.length - viewportRows))
+  );
+  return {
+    lines,
+    visible: lines.slice(scrollTop, scrollTop + viewportRows),
+    scrollTop,
+    hiddenBelow: Math.max(0, lines.length - scrollTop - viewportRows),
+    loading: (mode === "activity" ? props.activityLoading : props.loading) ?? false,
+    ...BODY_LABELS[mode]
+  };
+}
+function frameStyle(variant, accent) {
+  return variant === "modal" ? { borderStyle: "double", borderColor: accent, paddingY: 1 } : { borderStyle: "round", borderColor: void 0, paddingY: 0 };
+}
+function DetailBody(props) {
+  if (props.mode === "relations") {
+    return /* @__PURE__ */ jsx6(
+      RelationsBody,
+      {
+        relations: props.relations,
+        selected: props.relationsSelected,
+        loading: props.relationsLoading,
+        viewportRows: props.relationsViewport
+      }
+    );
+  }
+  const b = props.textBody;
+  return /* @__PURE__ */ jsx6(
+    ScrollableBody,
+    {
+      loading: b.loading,
+      loadingLabel: b.loadingLabel,
+      emptyLabel: b.emptyLabel,
+      visible: b.visible,
+      hiddenAbove: b.scrollTop,
+      hiddenBelow: b.hiddenBelow,
+      scrollTop: b.scrollTop
+    }
+  );
 }
 function IssueDetail(props) {
   const theme = useTheme();
   const variant = props.variant ?? "panel";
+  const mode = props.mode ?? "detail";
   const width = variant === "modal" ? MODAL_WIDTH : PANEL_WIDTH;
   const contentWidth = width - HORIZONTAL_CHROME;
   const description = props.issue?.description;
-  const rendered = useMemo(() => description ? markdownToAnsi(description) : "", [description]);
-  const lines = useMemo(
-    () => rendered ? splitAnsiIntoLines(rendered, contentWidth) : [],
-    [rendered, contentWidth]
+  const stateChanges = props.stateChanges;
+  const descriptionLines = useMemo(
+    () => description ? splitAnsiIntoLines(markdownToAnsi(description), contentWidth) : [],
+    [description, contentWidth]
   );
+  const activityLines = useMemo(() => {
+    const now = Date.now();
+    return (stateChanges ?? []).map((a) => formatStateChange(a, now)).reverse();
+  }, [stateChanges]);
   if (!props.issue) {
     return /* @__PURE__ */ jsx6(Box5, { borderStyle: "round", paddingX: 1, width, children: /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: "select an issue" }) });
   }
   const i = props.issue;
-  const viewportRows = props.viewportRows ?? lines.length;
-  const scrollTop = Math.max(
-    0,
-    Math.min(props.scrollTop ?? 0, Math.max(0, lines.length - viewportRows))
+  const isActivity = mode === "activity";
+  const textBody = resolveBody(
+    isActivity ? "activity" : "detail",
+    isActivity ? activityLines : descriptionLines,
+    props
   );
-  const visible = lines.slice(scrollTop, scrollTop + viewportRows);
+  const viewportRows = props.viewportRows ?? textBody.lines.length;
+  const relationsViewport = Math.max(1, viewportRows);
   return /* @__PURE__ */ jsxs5(
     Box5,
     {
       flexDirection: "column",
-      borderStyle: variant === "modal" ? "double" : "round",
-      borderColor: variant === "modal" ? theme.accent : void 0,
+      ...frameStyle(variant, theme.accent),
       paddingX: 1,
-      paddingY: variant === "modal" ? 1 : 0,
       width,
       height: props.height,
       flexShrink: 0,
       overflow: "hidden",
       children: [
-        /* @__PURE__ */ jsxs5(Box5, { justifyContent: "space-between", flexShrink: 0, children: [
-          /* @__PURE__ */ jsx6(Text5, { bold: true, children: i.key }),
-          variant === "modal" ? /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: closeHintFor(scrollTop, viewportRows, lines.length) }) : null
-        ] }),
+        /* @__PURE__ */ jsx6(
+          DetailHeader,
+          {
+            issueKey: i.key,
+            mode,
+            variant,
+            scrollTop: textBody.scrollTop,
+            viewportRows,
+            total: textBody.lines.length
+          }
+        ),
         /* @__PURE__ */ jsx6(Text5, { wrap: "truncate", children: i.name }),
-        /* @__PURE__ */ jsx6(IssueMeta, { issue: i }),
+        /* @__PURE__ */ jsx6(IssueMeta, { issue: i, timeInState: props.timeInState }),
         /* @__PURE__ */ jsx6(
-          DescriptionBody,
+          DetailBody,
           {
-            loading: props.loading ?? false,
-            hasDescription: Boolean(i.description),
-            visible,
-            hiddenAbove: scrollTop,
-            hiddenBelow: Math.max(0, lines.length - scrollTop - viewportRows),
-            scrollTop
+            mode,
+            textBody,
+            relations: props.relations ?? [],
+            relationsSelected: props.relationsSelected ?? 0,
+            relationsLoading: props.relationsLoading ?? false,
+            relationsViewport
           }
         )
       ]
@@ -4714,6 +5001,183 @@ function useDetailPanel(opts) {
   };
 }
 
+// src/tui/use-activity-log.ts
+import { useEffect as useEffect5, useMemo as useMemo6, useState as useState11 } from "react";
+
+// src/types/activity.ts
+var STATE_FIELD = "state";
+function isStateChange(activity) {
+  return activity.field === STATE_FIELD;
+}
+
+// src/plane/state-duration.ts
+function currentStateEntry(activities, issueCreatedAt) {
+  const transitions = activities.filter(isStateChange).map((a) => a.createdAt).sort();
+  return transitions.at(-1) ?? issueCreatedAt;
+}
+function timeInCurrentState(activities, issueCreatedAt, now) {
+  const entry = Date.parse(currentStateEntry(activities, issueCreatedAt));
+  if (Number.isNaN(entry)) return 0;
+  return Math.max(0, now - entry);
+}
+
+// src/tui/use-activity-log.ts
+function useActivityLog(opts) {
+  const { open: open2, target, createdAt, ctx, logger } = opts;
+  const [activities, setActivities] = useState11();
+  const [loading, setLoading] = useState11(false);
+  useEffect5(() => {
+    if (!open2 || !target) {
+      setActivities(void 0);
+      return;
+    }
+    const controller = new AbortController();
+    setLoading(true);
+    const project = {
+      id: target.project_id,
+      identifier: target.project_identifier,
+      name: "",
+      workspace_id: ""
+    };
+    ctx.activities.list(project, target.id, controller.signal).then((log) => {
+      if (!controller.signal.aborted) setActivities(log);
+    }).catch((err) => {
+      if (controller.signal.aborted) return;
+      logger.warn("activity log fetch failed", { issue: target.key, err });
+      setActivities(void 0);
+    }).finally(() => {
+      if (!controller.signal.aborted) setLoading(false);
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [open2, target, ctx, logger]);
+  const stateChanges = useMemo6(
+    () => activities ? activities.filter(isStateChange) : [],
+    [activities]
+  );
+  const timeInState = useMemo6(() => {
+    if (!activities || !createdAt) return void 0;
+    return humanizeDuration(timeInCurrentState(activities, createdAt, Date.now()));
+  }, [activities, createdAt]);
+  return { activities, stateChanges, loading, timeInState };
+}
+
+// src/tui/use-relations.ts
+import { useEffect as useEffect6, useMemo as useMemo7, useState as useState12 } from "react";
+
+// src/plane/relation-view.ts
+function indexAddEvents(activities) {
+  const byTarget = /* @__PURE__ */ new Map();
+  for (const a of activities) {
+    if (!a.field || !RELATION_TYPES.includes(a.field)) continue;
+    const target = a.oldIdentifier;
+    if (!target) continue;
+    const existing = byTarget.get(target);
+    if (!existing || a.createdAt > existing.relatedAt) {
+      byTarget.set(target, { relatedAt: a.createdAt, key: a.newValue });
+    }
+  }
+  return byTarget;
+}
+function buildRelations(relations, activities) {
+  const addEvents = indexAddEvents(activities);
+  const result = [];
+  for (const type of RELATION_TYPES) {
+    for (const targetId of relations[type] ?? []) {
+      const add = addEvents.get(targetId);
+      result.push({ type, targetId, targetKey: add?.key, relatedAt: add?.relatedAt });
+    }
+  }
+  return result;
+}
+
+// src/tui/use-relations.ts
+function useRelations(opts) {
+  const { open: open2, target, activities, ctx, logger } = opts;
+  const [relations, setRelations] = useState12();
+  const [loading, setLoading] = useState12(false);
+  const [targets, setTargets] = useState12({});
+  useEffect6(() => {
+    if (!open2 || !target) {
+      setRelations(void 0);
+      setTargets({});
+      return;
+    }
+    const controller = new AbortController();
+    setLoading(true);
+    const project = {
+      id: target.project_id,
+      identifier: target.project_identifier,
+      name: "",
+      workspace_id: ""
+    };
+    ctx.relations.list(project, target.id, controller.signal).then((current) => {
+      if (!controller.signal.aborted) setRelations(buildRelations(current, activities ?? []));
+    }).catch((err) => {
+      if (controller.signal.aborted) return;
+      logger.warn("relations fetch failed", { issue: target.key, err });
+      setRelations(void 0);
+    }).finally(() => {
+      if (!controller.signal.aborted) setLoading(false);
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [open2, target, activities, ctx, logger]);
+  useEffect6(() => {
+    if (!relations) return;
+    let cancelled = false;
+    const pending = relations.map((r) => r.targetKey).filter((key) => Boolean(key) && !(key in targets));
+    for (const key of pending) {
+      ctx.issues.view(key).then((issue) => {
+        if (!cancelled) setTargets((prev) => ({ ...prev, [key]: issue }));
+      }).catch((err) => {
+        logger.warn("relation target resolve failed", { key, err });
+      });
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [relations, targets, ctx, logger]);
+  const enriched = useMemo7(
+    () => (relations ?? []).map(
+      (r) => r.targetKey && targets[r.targetKey] ? { ...r, target: targets[r.targetKey] } : r
+    ),
+    [relations, targets]
+  );
+  return { relations: enriched, loading };
+}
+
+// src/tui/use-detail-stack.ts
+import { useCallback as useCallback6, useState as useState13 } from "react";
+function targetFromIssue(issue) {
+  return {
+    id: issue.id,
+    key: issue.key,
+    project_id: issue.project_id,
+    project_identifier: issue.project_identifier
+  };
+}
+function useDetailStack() {
+  const [stack, setStack] = useState13([]);
+  const open2 = useCallback6((target) => setStack([target]), []);
+  const push = useCallback6(
+    (target) => setStack((s) => s.at(-1)?.id === target.id ? s : [...s, target]),
+    []
+  );
+  const pop = useCallback6(() => setStack((s) => s.slice(0, -1)), []);
+  const close = useCallback6(() => setStack([]), []);
+  return {
+    current: stack.at(-1),
+    canGoBack: stack.length > 1,
+    open: open2,
+    push,
+    pop,
+    close
+  };
+}
+
 // src/tui/dashboard.tsx
 import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var NARROW_BREAKPOINT = 100;
@@ -4863,6 +5327,13 @@ function renderActiveOverlay(opts) {
       issue: current,
       loading: detail.loading,
       variant: "modal",
+      mode: opts.detailMode,
+      timeInState: opts.activity.timeInState,
+      stateChanges: opts.activity.stateChanges,
+      activityLoading: opts.activity.loading,
+      relations: opts.relations.relations,
+      relationsSelected: opts.relationsSelected,
+      relationsLoading: opts.relations.loading,
       scrollTop: detail.scroll,
       viewportRows: opts.detailViewportRows,
       height: opts.detailModalHeight
@@ -4903,19 +5374,22 @@ function Dashboard({ ctx, logger }) {
   const { exit } = useApp();
   const { rows: terminalRows, columns: terminalCols } = useTerminalSize();
   const narrow = isNarrowLayout(terminalCols);
-  const views = useMemo6(() => ctx.runtime.profile.views ?? [], [ctx]);
-  const defaultProjects = useMemo6(() => ctx.runtime.profile.defaults?.projects ?? [], [ctx]);
-  const viewEntries = useMemo6(
+  const views = useMemo8(() => ctx.runtime.profile.views ?? [], [ctx]);
+  const defaultProjects = useMemo8(() => ctx.runtime.profile.defaults?.projects ?? [], [ctx]);
+  const viewEntries = useMemo8(
     () => buildViewEntries(views, defaultProjects),
     [views, defaultProjects]
   );
-  const [viewIdx, setViewIdx] = useState11(0);
-  const [selected, setSelected] = useState11(0);
-  const [statusMessage, setStatusMessage] = useState11();
-  const [panel, setPanel] = useState11("list");
-  const [helpOpen, setHelpOpen] = useState11(false);
+  const [viewIdx, setViewIdx] = useState14(0);
+  const [selected, setSelected] = useState14(0);
+  const [statusMessage, setStatusMessage] = useState14();
+  const stack = useDetailStack();
+  const detailOpen = stack.current !== void 0;
+  const [detailMode, setDetailMode] = useState14("detail");
+  const [relationsSelected, setRelationsSelected] = useState14(0);
+  const [helpOpen, setHelpOpen] = useState14(false);
   const activeView = views[viewIdx];
-  const { layout: activeLayout, sort: activeSort } = useMemo6(
+  const { layout: activeLayout, sort: activeSort } = useMemo8(
     () => resolveViewPresentation(activeView, ctx.runtime.profile.defaults),
     [activeView, ctx]
   );
@@ -4937,7 +5411,7 @@ function Dashboard({ ctx, logger }) {
   const loading = active.loading;
   const partialMessage = active.failedProjects.length > 0 ? `partial: ${active.failedProjects.length} project(s) unavailable (${active.failedProjects.join(", ")})` : void 0;
   const error = statusMessage ?? active.error ?? partialMessage;
-  const navbarEntries = useMemo6(
+  const navbarEntries = useMemo8(
     () => viewEntries.map((entry, idx) => {
       const data = viewsData.byView[idx];
       return {
@@ -4949,7 +5423,7 @@ function Dashboard({ ctx, logger }) {
     [viewEntries, viewsData.byView]
   );
   const loadView = viewsData.load;
-  const load = useCallback6(
+  const load = useCallback7(
     async (preserveSelection = false) => {
       const previousKey = preserveSelection ? selectedKeyRef.current : void 0;
       const keys = await loadView(viewIdx);
@@ -4959,12 +5433,12 @@ function Dashboard({ ctx, logger }) {
   );
   const loadedRef = React7.useRef(viewsData.byView);
   loadedRef.current = viewsData.byView;
-  useEffect5(() => {
+  useEffect7(() => {
     if (!activeView) return;
     if (loadedRef.current[viewIdx]?.loaded) setSelected(0);
     else void load();
   }, [viewIdx, activeView, load]);
-  useEffect5(() => {
+  useEffect7(() => {
     logger.info("dashboard started", {
       profile: ctx.runtime.profile_name,
       workspace: ctx.runtime.profile.server.workspace_slug,
@@ -4986,7 +5460,7 @@ function Dashboard({ ctx, logger }) {
     logger
   });
   const currentSummary = filtered[selected];
-  useEffect5(() => {
+  useEffect7(() => {
     selectedKeyRef.current = currentSummary?.key;
   }, [currentSummary]);
   const comments = useCommentEditor({
@@ -5008,7 +5482,7 @@ function Dashboard({ ctx, logger }) {
     name: "",
     workspace_id: ""
   });
-  const reconcile = useCallback6(
+  const reconcile = useCallback7(
     (updated, touchesFilter) => {
       if (touchesFilter) void load(true);
       else viewsData.patchIssue(viewIdx, updated);
@@ -5036,7 +5510,7 @@ function Dashboard({ ctx, logger }) {
       setStatusMessage(message);
     }
   });
-  const activeProjects = useMemo6(
+  const activeProjects = useMemo8(
     () => resolveViewProjectsLenient(activeView ?? { name: "" }, defaultProjects).projects,
     [activeView, defaultProjects]
   );
@@ -5082,11 +5556,11 @@ function Dashboard({ ctx, logger }) {
     creator.active,
     transition.active,
     helpOpen,
-    panel === "detail",
+    detailOpen,
     filtering
   ].some(Boolean);
   const intervalMs = autoRefreshIntervalMs(ctx.runtime.profile.defaults?.auto_refresh_seconds);
-  useEffect5(() => {
+  useEffect7(() => {
     if (intervalMs === void 0 || overlayActive || !activeView) return;
     const timer = setInterval(() => {
       void load(true);
@@ -5094,12 +5568,30 @@ function Dashboard({ ctx, logger }) {
     return () => clearInterval(timer);
   }, [intervalMs, overlayActive, activeView, load]);
   const detail = useDetailPanel({
-    open: panel === "detail",
-    target: currentSummary,
+    open: detailOpen,
+    target: stack.current,
     ctx,
     logger,
     setMessage: setStatusMessage
   });
+  const activity = useActivityLog({
+    open: detailOpen,
+    target: stack.current,
+    createdAt: detail.detailed?.created_at,
+    ctx,
+    logger
+  });
+  const relations = useRelations({
+    open: detailOpen,
+    target: stack.current,
+    activities: activity.activities,
+    ctx,
+    logger
+  });
+  useEffect7(() => {
+    setDetailMode("detail");
+    setRelationsSelected(0);
+  }, [stack.current]);
   const viewportRows = listViewportRows({
     terminalRows,
     filtering,
@@ -5109,7 +5601,7 @@ function Dashboard({ ctx, logger }) {
   const STATUS_BAR_ROWS = 3;
   const detailModalHeight = Math.max(DETAIL_CHROME_ROWS + 3, terminalRows - STATUS_BAR_ROWS);
   const detailViewportRows = Math.max(3, detailModalHeight - DETAIL_CHROME_ROWS);
-  const openSelectedInBrowser = useCallback6(() => {
+  const openSelectedInBrowser = useCallback7(() => {
     const issue = filtered[selected];
     if (!issue) return;
     try {
@@ -5142,7 +5634,9 @@ function Dashboard({ ctx, logger }) {
     "list.page-up": () => setSelected((s) => Math.max(0, s - viewportRows)),
     "list.top": () => setSelected(0),
     "list.bottom": () => setSelected(Math.max(0, filtered.length - 1)),
-    "list.open-detail": () => setPanel("detail"),
+    "list.open-detail": () => {
+      if (currentSummary) stack.open(targetFromIssue(currentSummary));
+    },
     "list.open-browser": openSelectedInBrowser,
     "list.comment": comments.open,
     "list.edit": editor.open,
@@ -5165,13 +5659,29 @@ function Dashboard({ ctx, logger }) {
     );
     if (!consumed && (input2 === "q" || key.escape)) setHelpOpen(false);
   };
+  const openFocusedRelation = useCallback7(() => {
+    const relation = relations.relations[relationsSelected];
+    if (!relation) return;
+    if (relation.target) {
+      stack.push(targetFromIssue(relation.target));
+      return;
+    }
+    if (!relation.targetKey) return;
+    void ctx.issues.view(relation.targetKey).then((issue) => stack.push(targetFromIssue(issue))).catch((err) => {
+      logger.error("open relation failed", { key: relation.targetKey, err });
+      setStatusMessage(`open ${relation.targetKey}: ${err.message}`);
+    });
+  }, [relations.relations, relationsSelected, stack, ctx, logger]);
   const handleDetailKey = (input2, key) => {
+    const relationsMode = detailMode === "relations";
+    const relationCount = relations.relations.length;
     const detailHandlers = {
-      "detail.close": () => setPanel("list"),
-      "detail.scroll-down": () => detail.scrollBy(1),
-      "detail.scroll-down-alt": () => detail.scrollBy(1),
-      "detail.scroll-up": () => detail.scrollBy(-1),
-      "detail.scroll-up-alt": () => detail.scrollBy(-1),
+      // esc pops the navigation stack: back to the issue we came from, or close.
+      "detail.close": () => stack.pop(),
+      "detail.scroll-down": relationsMode ? () => setRelationsSelected((s) => Math.min(relationCount - 1, s + 1)) : () => detail.scrollBy(1),
+      "detail.scroll-down-alt": relationsMode ? () => setRelationsSelected((s) => Math.min(relationCount - 1, s + 1)) : () => detail.scrollBy(1),
+      "detail.scroll-up": relationsMode ? () => setRelationsSelected((s) => Math.max(0, s - 1)) : () => detail.scrollBy(-1),
+      "detail.scroll-up-alt": relationsMode ? () => setRelationsSelected((s) => Math.max(0, s - 1)) : () => detail.scrollBy(-1),
       "detail.page-down": () => detail.scrollBy(detailViewportRows),
       "detail.page-up": () => detail.scrollBy(-detailViewportRows),
       "detail.top": detail.scrollTop,
@@ -5179,10 +5689,24 @@ function Dashboard({ ctx, logger }) {
       "detail.open-browser": openSelectedInBrowser,
       "detail.comment": comments.open,
       "detail.edit": editor.open,
+      // Toggle the activity / relations bodies; toggling back returns to the
+      // description. Reset the scroll so the new body starts at the top.
+      "detail.activity": () => {
+        setDetailMode((mode) => mode === "activity" ? "detail" : "activity");
+        detail.scrollTop();
+      },
+      "detail.relations": () => {
+        setDetailMode((mode) => mode === "relations" ? "detail" : "relations");
+        setRelationsSelected(0);
+        detail.scrollTop();
+      },
+      // enter only acts in the relations body, opening the focused relation.
+      "detail.relation-open": relationsMode ? openFocusedRelation : () => {
+      },
       "global.help": () => setHelpOpen((open2) => !open2),
       "global.refresh": () => void load(true),
       "global.refresh-all": () => viewsData.refreshAll(),
-      "global.quit": () => setPanel("list")
+      "global.quit": () => stack.close()
     };
     dispatch(ctx.keybindings, ["detail", "global"], detailHandlers, input2, key);
   };
@@ -5192,7 +5716,7 @@ function Dashboard({ ctx, logger }) {
     [editor.active, editor.handleKey],
     [comments.active, comments.handleKey],
     [helpOpen, handleHelpKey],
-    [panel === "detail", handleDetailKey],
+    [detailOpen, handleDetailKey],
     [filtering, handleFilterKey]
   ];
   useInput2((input2, key) => {
@@ -5200,7 +5724,7 @@ function Dashboard({ ctx, logger }) {
     if (route) return route[1](input2, key);
     dispatch(ctx.keybindings, ["global", "list", "view", "filter"], handlers, input2, key);
   });
-  const current = detail.detailed ?? currentSummary;
+  const current = detail.detailed ?? (stack.canGoBack ? void 0 : currentSummary);
   const statusBarBase = {
     profile: ctx.runtime.profile_name,
     workspace: ctx.runtime.profile.server.workspace_slug,
@@ -5213,13 +5737,17 @@ function Dashboard({ ctx, logger }) {
     total: issues.length,
     filtering: Boolean(filter)
   });
-  const isDetail = panel === "detail";
+  const isDetail = detailOpen;
   const overlay = renderActiveOverlay({
     transition,
     creator,
     editor,
     comments,
     detail,
+    activity,
+    relations,
+    relationsSelected,
+    detailMode,
     helpOpen,
     isDetail,
     currentSummary,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plc-cli",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "CLI and TUI for Plane (Cloud and self-hosted), inspired by gh and gh dash.",
   "license": "MIT",
   "author": "Bruno Mariano",