plc-cli 0.1.3 → 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.1.3" : "0.0.0-dev";
+var VERSION = true ? "0.3.0" : "0.0.0-dev";
 var AUTHOR_HANDLE = "@brunoomariano";
 
 // src/commands/auth/index.ts
@@ -233,6 +233,12 @@ var profileSchema = z.strictObject({
     // Profile-wide default sort, inherited by any view that does not declare
     // its own `sort`. Same shape as a view's sort.
     sort: sortSpecSchema.optional(),
+    // Global state ordering for `sort: state` and the quick-transition
+    // navigation. An ordered list of state slugs (matched case-insensitively,
+    // whitespace-collapsed): listed states sort first in this order, unlisted
+    // ones after by workflow group. Project states are customizable, so this
+    // lets one list rank them across every project.
+    state_order: z.array(z.string().min(1)).optional(),
     // Profile-wide default column layout, inherited by views without a layout.
     layout: layoutSchema.optional()
   }).optional(),
@@ -252,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
@@ -980,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
@@ -1059,6 +1070,31 @@ function filtersFingerprint(filters) {
   return createHash("sha256").update(json).digest("hex").slice(0, 16);
 }
 
+// src/plane/state-rank.ts
+var STATE_GROUP_RANK = {
+  backlog: 0,
+  unstarted: 1,
+  started: 2,
+  completed: 3,
+  cancelled: 4
+};
+var UNLISTED_OFFSET = 1e6;
+function normalizeStateSlug(name) {
+  return name.trim().toLowerCase().replace(/\s+/g, " ");
+}
+function buildStateRank(stateOrder) {
+  const position = /* @__PURE__ */ new Map();
+  (stateOrder ?? []).forEach((slug, index) => {
+    const normalized = normalizeStateSlug(slug);
+    if (!position.has(normalized)) position.set(normalized, index);
+  });
+  return (state) => {
+    const listed = position.get(normalizeStateSlug(state.name));
+    if (listed !== void 0) return listed;
+    return UNLISTED_OFFSET + STATE_GROUP_RANK[state.group];
+  };
+}
+
 // src/plane/sort-issues.ts
 var PRIORITY_RANK = {
   urgent: 0,
@@ -1067,45 +1103,41 @@ var PRIORITY_RANK = {
   low: 3,
   none: 4
 };
-var STATE_GROUP_RANK = {
-  backlog: 0,
-  unstarted: 1,
-  started: 2,
-  completed: 3,
-  cancelled: 4
-};
 var DEFAULT_SORT = [
   { field: "project", direction: "asc" },
   { field: "priority", direction: "desc" },
   { field: "state", direction: "asc" },
   { field: "updated_at", direction: "desc" }
 ];
-var ASC_COMPARATORS = {
-  project: (a, b) => a.project_identifier.localeCompare(b.project_identifier),
-  priority: (a, b) => PRIORITY_RANK[b.priority] - PRIORITY_RANK[a.priority],
-  state: (a, b) => STATE_GROUP_RANK[a.state.group] - STATE_GROUP_RANK[b.state.group],
-  created_at: (a, b) => a.created_at.localeCompare(b.created_at),
-  updated_at: (a, b) => a.updated_at.localeCompare(b.updated_at),
-  assign: (a, b) => firstAssignee(a).localeCompare(firstAssignee(b))
-};
+function ascComparators(stateRank) {
+  return {
+    project: (a, b) => a.project_identifier.localeCompare(b.project_identifier),
+    priority: (a, b) => PRIORITY_RANK[b.priority] - PRIORITY_RANK[a.priority],
+    state: (a, b) => stateRank(a.state) - stateRank(b.state),
+    created_at: (a, b) => a.created_at.localeCompare(b.created_at),
+    updated_at: (a, b) => a.updated_at.localeCompare(b.updated_at),
+    assign: (a, b) => firstAssignee(a).localeCompare(firstAssignee(b))
+  };
+}
 function firstAssignee(issue) {
   return issue.assignees[0]?.display_name ?? "";
 }
-function compareKey(a, b, field, direction) {
+function compareKey(a, b, { field, direction }, comparators) {
   if (field === "assign") {
     const aUnassigned = a.assignees.length === 0;
     const bUnassigned = b.assignees.length === 0;
     if (aUnassigned !== bUnassigned) return aUnassigned ? 1 : -1;
     if (aUnassigned && bUnassigned) return 0;
   }
-  const base = ASC_COMPARATORS[field](a, b);
+  const base = comparators[field](a, b);
   return direction === "desc" ? -base : base;
 }
-function sortIssues(issues, sort) {
+function sortIssues(issues, sort, stateOrder) {
   if (!sort || sort.length === 0) return issues;
+  const comparators = ascComparators(buildStateRank(stateOrder));
   return [...issues].sort((a, b) => {
-    for (const { field, direction } of sort) {
-      const cmp = compareKey(a, b, field, direction);
+    for (const key of sort) {
+      const cmp = compareKey(a, b, key, comparators);
       if (cmp !== 0) return cmp;
     }
     return 0;
@@ -1412,18 +1444,21 @@ var IssuesService = class {
    * `defaultsSort` is the profile-level `defaults.sort`; the effective sort is
    * resolved once as `view.sort ?? defaultsSort ?? DEFAULT_SORT` and applied
    * both as the per-project server hint and the authoritative client-side sort.
+   * `stateOrder` is the profile-level `defaults.state_order`, used by the
+   * client-side `state` sort to rank states by the configured slug order.
    */
   // `signal` is threaded down to each per-project fetch so the dashboard can
   // abort an in-flight refresh (e.g. when a new one starts before the previous
   // resolves), preventing requests from piling up and timing out. The positional
   // list mirrors the call sites; the cap is waived rather than reshaping both.
   // eslint-disable-next-line max-params
-  async list(projectIdentifiers, view, queryLimit, defaultsSort, signal) {
+  async list(projectIdentifiers, view, queryLimit, defaultsSort, stateOrder, signal) {
     const { issues, failedProjects } = await this.listResilient(
       projectIdentifiers,
       view,
       queryLimit,
       defaultsSort,
+      stateOrder,
       signal
     );
     if (failedProjects.length > 0) {
@@ -1442,7 +1477,7 @@ var IssuesService = class {
    */
   // Same positional shape as `list`; the cap is waived for the same reason.
   // eslint-disable-next-line max-params
-  async listResilient(projectIdentifiers, view, queryLimit, defaultsSort, signal) {
+  async listResilient(projectIdentifiers, view, queryLimit, defaultsSort, stateOrder, signal) {
     const assigneeIds = await this.resolveAssigneeIds(view);
     const sort = resolveSort(view?.sort, defaultsSort);
     const effectiveView = view ? { ...view, sort } : { name: "", sort };
@@ -1461,7 +1496,7 @@ var IssuesService = class {
     const byGroup = refineByStateGroup(fetched, view?.filters?.state_group);
     const byState = refineByStateSearch(byGroup, view?.filters);
     const byAssignee = refineByAssignee(byState, assigneeIds);
-    const sorted = sortIssues(byAssignee, sort);
+    const sorted = sortIssues(byAssignee, sort, stateOrder);
     const issues = queryLimit !== void 0 ? sorted.slice(0, queryLimit) : sorted;
     return { issues, failedProjects };
   }
@@ -1598,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";
@@ -1719,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",
@@ -2013,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 = {
@@ -2032,6 +2185,8 @@ async function buildContext(flags) {
     users,
     states,
     labels,
+    activities,
+    relations,
     keybindings,
     keybindingsSourcePath,
     theme: resolveTheme(profile.theme),
@@ -2413,7 +2568,8 @@ function registerIssue(program2) {
         projects,
         view,
         limit ?? view?.query_limit,
-        ctx.runtime.profile.defaults?.sort
+        ctx.runtime.profile.defaults?.sort,
+        ctx.runtime.profile.defaults?.state_order
       );
       process.stdout.write(renderIssues(issues, format, ctx.theme));
       process.stdout.write("\n");
@@ -2633,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
@@ -2930,6 +3086,16 @@ var PRIORITY_LETTER = {
   low: "L",
   none: "\xB7"
 };
+var SORT_FIELD_COLUMN = {
+  priority: "priority",
+  state: "state",
+  assign: "assign"
+};
+function sortIndicator(column, sort) {
+  const primary = sort?.[0];
+  if (!primary || SORT_FIELD_COLUMN[primary.field] !== column) return "";
+  return primary.direction === "asc" ? " \u2191" : " \u2193";
+}
 function computeViewport(total, selected, rows, previousStart = 0) {
   if (rows <= 0 || total === 0) return { start: 0, end: 0 };
   if (rows >= total) return { start: 0, end: total };
@@ -2964,10 +3130,16 @@ function IssueList(props) {
   return /* @__PURE__ */ jsxs4(Box4, { flexDirection: "column", borderStyle: "round", paddingX: 1, flexGrow: 1, children: [
     /* @__PURE__ */ jsxs4(Box4, { columnGap: 1, children: [
       /* @__PURE__ */ jsx5(Box4, { ...cell("key", cols.keyWidth), children: /* @__PURE__ */ jsx5(Text4, { bold: true, children: alignText("KEY", cols.keyWidth, cols.align.key) }) }),
-      /* @__PURE__ */ jsx5(Box4, { ...cell("priority", cols.priorityWidth), children: /* @__PURE__ */ jsx5(Text4, { bold: true, children: cols.compactPriority ? "PR" : "PRIORITY" }) }),
-      cols.showState ? /* @__PURE__ */ jsx5(Box4, { ...cell("state", cols.stateWidth), children: /* @__PURE__ */ jsx5(Text4, { bold: true, children: "STATE" }) }) : null,
+      /* @__PURE__ */ jsx5(Box4, { ...cell("priority", cols.priorityWidth), children: /* @__PURE__ */ jsx5(Text4, { bold: true, children: cols.compactPriority ? "PR" : `PRIORITY${sortIndicator("priority", props.sort)}` }) }),
+      cols.showState ? /* @__PURE__ */ jsx5(Box4, { ...cell("state", cols.stateWidth), children: /* @__PURE__ */ jsxs4(Text4, { bold: true, children: [
+        "STATE",
+        sortIndicator("state", props.sort)
+      ] }) }) : null,
       /* @__PURE__ */ jsx5(Box4, { ...cell("title", cols.title), children: /* @__PURE__ */ jsx5(Text4, { bold: true, children: "TITLE" }) }),
-      cols.showAssign ? /* @__PURE__ */ jsx5(Box4, { ...cell("assign", cols.assignWidth), children: /* @__PURE__ */ jsx5(Text4, { bold: true, children: "ASSIGN" }) }) : null
+      cols.showAssign ? /* @__PURE__ */ jsx5(Box4, { ...cell("assign", cols.assignWidth), children: /* @__PURE__ */ jsxs4(Text4, { bold: true, children: [
+        "ASSIGN",
+        sortIndicator("assign", props.sort)
+      ] }) }) : null
     ] }),
     hiddenAbove > 0 ? /* @__PURE__ */ jsxs4(Text4, { dimColor: true, children: [
       "\u2191 ",
@@ -3011,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
@@ -3168,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: ",
@@ -3199,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: [
@@ -3222,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
           }
         )
       ]
@@ -4372,7 +4706,10 @@ var EMPTY_VIEW_DATA = {
   failedProjects: []
 };
 function useViewsData(opts) {
-  const { views, issuesService, defaultProjects, defaultsSort, logger } = opts;
+  const { views, issuesService, defaults, logger } = opts;
+  const defaultProjects = defaults?.projects;
+  const defaultsSort = defaults?.sort;
+  const stateOrder = defaults?.state_order;
   const [byView, setByView] = useState6(() => views.map(() => EMPTY_VIEW_DATA));
   const viewsRef = useRef4(views);
   viewsRef.current = views;
@@ -4414,6 +4751,7 @@ function useViewsData(opts) {
           view,
           view.query_limit ?? 100,
           defaultsSort,
+          stateOrder,
           controller.signal
         );
         patch(viewIdx, {
@@ -4446,7 +4784,7 @@ function useViewsData(opts) {
         }
       }
     },
-    [issuesService, defaultProjects, defaultsSort, logger, patch]
+    [issuesService, defaultProjects, defaultsSort, stateOrder, logger, patch]
   );
   const refreshAll = useCallback4(() => {
     const indices = viewsRef.current.map((_, idx) => idx);
@@ -4534,23 +4872,17 @@ function useIssueFilter(opts) {
 import { useCallback as useCallback5, useState as useState9 } from "react";
 
 // src/plane/state-order.ts
-var GROUP_ORDER = [
-  "backlog",
-  "unstarted",
-  "started",
-  "completed",
-  "cancelled"
-];
-function orderStates(states) {
+function orderStates(states, stateOrder) {
+  const rank = buildStateRank(stateOrder);
   return states.map((state, index) => ({ state, index })).sort((a, b) => {
-    const ga = GROUP_ORDER.indexOf(a.state.group);
-    const gb = GROUP_ORDER.indexOf(b.state.group);
-    if (ga !== gb) return ga - gb;
+    const ra = rank(a.state);
+    const rb = rank(b.state);
+    if (ra !== rb) return ra - rb;
     return a.index - b.index;
   }).map((entry) => entry.state);
 }
-function neighbourState(states, currentId, direction) {
-  const ordered = orderStates(states);
+function neighbourState(states, currentId, direction, stateOrder) {
+  const ordered = orderStates(states, stateOrder);
   const idx = ordered.findIndex((s) => s.id === currentId);
   if (idx < 0) return void 0;
   const target = idx + direction;
@@ -4581,7 +4913,8 @@ function useQuickTransition(opts) {
       if (!issue) return;
       try {
         const states = await ctx.states.list(projectOf(issue));
-        const next = neighbourState(states, issue.state.id, direction);
+        const stateOrder = ctx.runtime.profile.defaults?.state_order;
+        const next = neighbourState(states, issue.state.id, direction, stateOrder);
         if (!next) {
           setMessage(`${issue.key}: already at the ${direction === 1 ? "last" : "first"} state`);
           return;
@@ -4668,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;
@@ -4817,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
@@ -4847,32 +5364,40 @@ function overlayStatusPosition(opts) {
   if (opts.isDetail && !opts.current) return void 0;
   return opts.listPosition;
 }
+function resolveViewPresentation(view, defaults) {
+  return {
+    layout: resolveLayout(view?.layout, defaults?.layout),
+    sort: resolveSort(view?.sort, defaults?.sort)
+  };
+}
 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 activeLayout = useMemo6(
-    () => resolveLayout(activeView?.layout, ctx.runtime.profile.defaults?.layout),
+  const { layout: activeLayout, sort: activeSort } = useMemo8(
+    () => resolveViewPresentation(activeView, ctx.runtime.profile.defaults),
     [activeView, ctx]
   );
   const selectedKeyRef = React7.useRef(void 0);
   const viewsData = useViewsData({
     views,
     issuesService: ctx.issues,
-    defaultProjects: ctx.runtime.profile.defaults?.projects,
-    defaultsSort: ctx.runtime.profile.defaults?.sort,
+    defaults: ctx.runtime.profile.defaults,
     logger
   });
   const active = viewsData.byView[viewIdx] ?? {
@@ -4886,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 {
@@ -4898,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);
@@ -4908,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,
@@ -4935,7 +5460,7 @@ function Dashboard({ ctx, logger }) {
     logger
   });
   const currentSummary = filtered[selected];
-  useEffect5(() => {
+  useEffect7(() => {
     selectedKeyRef.current = currentSummary?.key;
   }, [currentSummary]);
   const comments = useCommentEditor({
@@ -4957,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);
@@ -4985,7 +5510,7 @@ function Dashboard({ ctx, logger }) {
       setStatusMessage(message);
     }
   });
-  const activeProjects = useMemo6(
+  const activeProjects = useMemo8(
     () => resolveViewProjectsLenient(activeView ?? { name: "" }, defaultProjects).projects,
     [activeView, defaultProjects]
   );
@@ -5031,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);
@@ -5043,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,
@@ -5058,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 {
@@ -5091,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,
@@ -5114,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,
@@ -5128,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);
   };
@@ -5141,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) => {
@@ -5149,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,
@@ -5162,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,
@@ -5198,6 +5777,7 @@ function Dashboard({ ctx, logger }) {
       filtering,
       viewportRows,
       layout: activeLayout,
+      sort: activeSort,
       loading,
       statusBar: /* @__PURE__ */ jsx13(StatusBar, { ...statusBarBase, loading, position: listPosition })
     }
@@ -5225,6 +5805,7 @@ function ListLayout(props) {
             viewportRows: props.viewportRows,
             width: props.narrow ? props.width : props.width - SIDE_PANEL_WIDTH,
             layout: props.layout,
+            sort: props.sort,
             loading: props.loading
           }
         ),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "plc-cli",
-  "version": "0.1.3",
+  "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",