github-issue-tower-defence-management 1.90.0 → 1.91.0

package/src/adapter/entry-points/console/ui/src/features/console/pages/ConsolePage.tsx

@@ -1,23 +1,149 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { ConsoleListView } from '../components/ConsoleListView';
 import { ConsoleProjectHeader } from '../components/ConsoleProjectHeader';
 import { ConsoleTabBar } from '../components/ConsoleTabBar';
-import { useConsoleList } from '../hooks/useConsoleList';
+import { buildConsoleListRows, resolveItemStory } from '../grouping';
+import { useConsoleCaches } from '../hooks/useConsoleCaches';
+import { useConsoleOperations } from '../hooks/useConsoleOperations';
+import { useConsoleOverlay } from '../hooks/useConsoleOverlay';
 import { useConsolePjcode } from '../hooks/useConsolePjcode';
-import { CONSOLE_TABS, type ConsoleTabName } from '../types';
+import { useConsoleTabData } from '../hooks/useConsoleTabData';
+import {
+  countPendingItems,
+  filterPendingItems,
+  overlayKeyForItem,
+  parseGeneratedAtMs,
+} from '../overlay';
+import type {
+  ConsoleListItem,
+  ConsoleOverlayStatus,
+  ConsoleTabName,
+} from '../types';
+import { CONSOLE_TABS } from '../types';
+import { ConsoleItemDetailContainer } from './ConsoleItemDetailContainer';
+
+const emptyCounts = (): Record<ConsoleTabName, number> => {
+  const result = {} as Record<ConsoleTabName, number>;
+  for (const tab of CONSOLE_TABS) {
+    result[tab.name] = 0;
+  }
+  return result;
+};
+
+const OVERLAY_NAMESPACE_FALLBACK = 'console';
 
 export const ConsolePage = () => {
   const pjcode = useConsolePjcode();
+  const { snapshots, isLoading, error } = useConsoleTabData(pjcode);
   const [activeTab, setActiveTab] = useState<ConsoleTabName>(
     CONSOLE_TABS[0].name,
   );
-  const { items, isLoading, error } = useConsoleList(pjcode, activeTab);
+  const [selectedItem, setSelectedItem] = useState<ConsoleListItem | null>(
+    null,
+  );
+
+  const overlayState = useConsoleOverlay(pjcode ?? OVERLAY_NAMESPACE_FALLBACK);
+  const caches = useConsoleCaches();
+  const operations = useConsoleOperations(pjcode, activeTab, overlayState);
+  const now = Date.now();
+
+  const counts = useMemo(() => {
+    const result = emptyCounts();
+    for (const tab of CONSOLE_TABS) {
+      const snapshot = snapshots[tab.name];
+      if (snapshot === null) {
+        continue;
+      }
+      result[tab.name] = countPendingItems(
+        snapshot.items,
+        overlayState.overlay,
+        parseGeneratedAtMs(snapshot.generatedAt),
+        tab.name,
+      );
+    }
+    return result;
+  }, [snapshots, overlayState.overlay]);
+
+  const activeSnapshot = snapshots[activeTab];
+  const pendingItems = useMemo(() => {
+    if (activeSnapshot === null) {
+      return [];
+    }
+    return filterPendingItems(
+      activeSnapshot.items,
+      overlayState.overlay,
+      parseGeneratedAtMs(activeSnapshot.generatedAt),
+      activeTab,
+    );
+  }, [activeSnapshot, overlayState.overlay, activeTab]);
+
+  const rows = useMemo(
+    () => buildConsoleListRows(pendingItems, overlayState.overlay),
+    [pendingItems, overlayState.overlay],
+  );
+
+  const storyColors = activeSnapshot?.storyColors ?? {};
+  const statusOptions = activeSnapshot?.statusOptions ?? [];
+  const storyOptions = activeSnapshot?.storyOptions ?? [];
+
+  const selectTab = (tab: ConsoleTabName): void => {
+    setActiveTab(tab);
+    setSelectedItem(null);
+  };
+
+  const overlayStatusForSelected = ((): ConsoleOverlayStatus | null => {
+    if (selectedItem === null) {
+      return null;
+    }
+    const entry = overlayState.overlay[overlayKeyForItem(selectedItem)];
+    return entry?.status ?? null;
+  })();
+
+  const storyNameForSelected =
+    selectedItem !== null
+      ? resolveItemStory(selectedItem, overlayState.overlay)
+      : null;
 
   return (
-    <main className="mx-auto flex max-w-3xl flex-col">
+    <main className="console-app">
       <ConsoleProjectHeader pjcode={pjcode} />
-      <ConsoleTabBar activeTab={activeTab} onSelectTab={setActiveTab} />
-      <ConsoleListView items={items} isLoading={isLoading} error={error} />
+      <ConsoleTabBar
+        activeTab={activeTab}
+        counts={counts}
+        onSelectTab={selectTab}
+      />
+      {selectedItem === null ? (
+        <ConsoleListView
+          rows={rows}
+          storyColors={storyColors}
+          activeItemId={null}
+          isLoading={isLoading}
+          error={error}
+          onSelectItem={setSelectedItem}
+        />
+      ) : (
+        <div className="console-detail-screen">
+          <button
+            type="button"
+            className="console-back-button"
+            onClick={() => setSelectedItem(null)}
+          >
+            ← Back to list
+          </button>
+          <ConsoleItemDetailContainer
+            tab={activeTab}
+            item={selectedItem}
+            caches={caches}
+            operations={operations}
+            statusOptions={statusOptions}
+            storyOptions={storyOptions}
+            storyColors={storyColors}
+            storyName={storyNameForSelected}
+            overlayStatus={overlayStatusForSelected}
+            now={now}
+          />
+        </div>
+      )}
     </main>
   );
 };

package/src/adapter/entry-points/console/ui/src/features/console/relativeTime.test.ts

@@ -0,0 +1,52 @@
+import { formatFullTimestamp, formatRelativeTime } from './relativeTime';
+
+const now = Date.parse('2026-06-19T12:00:00.000Z');
+
+describe('formatRelativeTime', () => {
+  it('returns just now for very recent times', () => {
+    expect(formatRelativeTime('2026-06-19T11:59:30.000Z', now)).toBe(
+      'just now',
+    );
+  });
+
+  it('returns minutes ago', () => {
+    expect(formatRelativeTime('2026-06-19T11:45:00.000Z', now)).toBe(
+      '15 minutes ago',
+    );
+  });
+
+  it('uses singular for one minute', () => {
+    expect(formatRelativeTime('2026-06-19T11:59:00.000Z', now)).toBe(
+      '1 minute ago',
+    );
+  });
+
+  it('returns hours ago', () => {
+    expect(formatRelativeTime('2026-06-19T09:00:00.000Z', now)).toBe(
+      '3 hours ago',
+    );
+  });
+
+  it('returns yesterday for one day', () => {
+    expect(formatRelativeTime('2026-06-18T12:00:00.000Z', now)).toBe(
+      'yesterday',
+    );
+  });
+
+  it('returns days ago for under a month', () => {
+    expect(formatRelativeTime('2026-06-09T12:00:00.000Z', now)).toBe(
+      '10 days ago',
+    );
+  });
+
+  it('returns an empty string for an invalid date', () => {
+    expect(formatRelativeTime('nonsense', now)).toBe('');
+  });
+});
+
+describe('formatFullTimestamp', () => {
+  it('formats a timestamp and returns empty for invalid input', () => {
+    expect(formatFullTimestamp('2026-06-19T12:00:00.000Z')).not.toBe('');
+    expect(formatFullTimestamp('nonsense')).toBe('');
+  });
+});

package/src/adapter/entry-points/console/ui/src/features/console/relativeTime.ts

@@ -0,0 +1,51 @@
+const MS_PER_SECOND = 1000;
+const MS_PER_MINUTE = 60 * MS_PER_SECOND;
+const MS_PER_HOUR = 60 * MS_PER_MINUTE;
+const MS_PER_DAY = 24 * MS_PER_HOUR;
+
+export const formatRelativeTime = (iso: string, now: number): string => {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) {
+    return '';
+  }
+  const diff = now - then;
+  if (diff < 45 * MS_PER_SECOND) {
+    return 'just now';
+  }
+  if (diff < MS_PER_HOUR) {
+    const minutes = Math.round(diff / MS_PER_MINUTE);
+    return `${minutes} minute${minutes === 1 ? '' : 's'} ago`;
+  }
+  if (diff < MS_PER_DAY) {
+    const hours = Math.round(diff / MS_PER_HOUR);
+    return `${hours} hour${hours === 1 ? '' : 's'} ago`;
+  }
+  const days = Math.round(diff / MS_PER_DAY);
+  if (days === 1) {
+    return 'yesterday';
+  }
+  if (days < 30) {
+    return `${days} days ago`;
+  }
+  const date = new Date(then);
+  const sameYear = date.getFullYear() === new Date(now).getFullYear();
+  return date.toLocaleDateString('en-US', {
+    year: sameYear ? undefined : 'numeric',
+    month: 'short',
+    day: 'numeric',
+  });
+};
+
+export const formatFullTimestamp = (iso: string): string => {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) {
+    return '';
+  }
+  return new Date(then).toLocaleString('ja-JP', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+};

package/src/adapter/entry-points/console/ui/src/features/console/types.ts

@@ -48,6 +48,78 @@ export type ConsoleTriageTab = {
 
 export type ConsoleTabData = ConsoleStatusTab | ConsoleTriageTab;
 
+export type ConsoleStoryColorSource = Record<
+  string,
+  ConsoleColor | { color: ConsoleColor }
+>;
+
+export type ConsoleIssueState = {
+  state: string;
+  merged: boolean;
+  isPullRequest: boolean;
+};
+
+export type ConsoleComment = {
+  author: string;
+  body: string;
+  createdAt: string;
+};
+
+export type ConsoleChangedFile = {
+  path: string;
+  additions: number;
+  deletions: number;
+  status: string;
+  patch: string | null;
+};
+
+export type ConsoleCommit = {
+  sha: string;
+  message: string;
+  author: string;
+  authoredAt: string;
+};
+
+export type ConsoleRelatedPullRequest = {
+  url: string;
+  branchName: string | null;
+  createdAt: string;
+  isDraft: boolean;
+  isConflicted: boolean;
+  isPassedAllCiJob: boolean;
+  isCiStateSuccess: boolean;
+  isResolvedAllReviewComments: boolean;
+  isBranchOutOfDate: boolean;
+  missingRequiredCheckNames: string[];
+  summary: {
+    title: string;
+    body: string;
+    additions: number;
+    deletions: number;
+    changedFiles: number;
+  } | null;
+};
+
+export type ConsoleOverlayStatus = {
+  name: string;
+  color: ConsoleColor;
+};
+
+export type ConsoleOverlayStory = {
+  name: string;
+  color: ConsoleColor;
+};
+
+export type ConsoleOverlayEntry = {
+  done?: boolean;
+  status?: ConsoleOverlayStatus;
+  story?: ConsoleOverlayStory;
+  ts: number;
+  mode: ConsoleTabName;
+};
+
+export type ConsoleOverlay = Record<string, ConsoleOverlayEntry>;
+
 export type ConsoleTabName =
   | 'prs'
   | 'triage'
@@ -65,5 +137,5 @@ export const CONSOLE_TABS: ConsoleTab[] = [
   { name: 'triage', label: 'Triage' },
   { name: 'unread', label: 'Unread' },
   { name: 'failed-preparation', label: 'Failed Preparation' },
-  { name: 'todo-by-human', label: 'Todo By Human' },
+  { name: 'todo-by-human', label: 'Todo by human' },
 ];

package/src/adapter/entry-points/console/ui/src/index.css

@@ -23,9 +23,359 @@
 
 body {
   margin: 0;
-  background-color: var(--color-background);
-  color: var(--color-foreground);
+  background-color: #0d1117;
+  color: #e6edf3;
   font-family:
     ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
     Roboto, Helvetica, Arial, sans-serif;
 }
+
+.console-app {
+  max-width: 920px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.console-tabbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 8px;
+  border-bottom: 1px solid #30363d;
+}
+
+.console-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: transparent;
+  color: #8b949e;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.console-tab[data-active="true"] {
+  background: #161b22;
+  border-color: #30363d;
+  color: #e6edf3;
+  font-weight: 600;
+}
+
+.console-tab-badge {
+  min-width: 18px;
+  text-align: center;
+  border-radius: 999px;
+  background: #21262d;
+  padding: 0 6px;
+  font-size: 12px;
+}
+
+.console-tab-badge[data-zero="true"] {
+  opacity: 0.5;
+}
+
+.console-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.console-list-group {
+  list-style: none;
+}
+
+.console-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  background: #0b0f14;
+  border-bottom: 1px solid #21262d;
+}
+
+.console-storytag {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.console-story-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  display: inline-block;
+}
+
+.console-group-count {
+  color: #8b949e;
+  font-size: 12px;
+}
+
+.console-item-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid #21262d;
+  color: #e6edf3;
+  text-align: left;
+  cursor: pointer;
+}
+
+.console-item-row:hover,
+.console-item-row[data-active="true"] {
+  background: #161b22;
+}
+
+.console-item-title {
+  flex: 1;
+  font-size: 14px;
+}
+
+.console-item-number {
+  color: #8b949e;
+  font-size: 12px;
+}
+
+.console-list-message {
+  padding: 16px;
+  color: #8b949e;
+  font-size: 14px;
+}
+
+.console-list-error,
+.console-comment-error,
+.console-files-error,
+.console-commits-error,
+.console-detail-body-error {
+  color: #f85149;
+}
+
+.console-detail {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+
+.console-detail-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 20px;
+  margin: 0;
+}
+
+.console-detail-title-text {
+  flex: 1;
+}
+
+.console-detail-number {
+  color: #8b949e;
+  font-weight: 400;
+}
+
+.console-detail-closed-label {
+  color: #a371f7;
+  font-size: 13px;
+}
+
+.console-detail-subbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 13px;
+}
+
+.console-detail-link {
+  color: #4493f8;
+}
+
+.console-detail-repo {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #8b949e;
+}
+
+.console-detail-pill,
+.console-label-chip,
+.console-detail-status-chip {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 999px;
+  border: 1px solid #30363d;
+  font-size: 12px;
+}
+
+.console-detail-labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.console-detail-createdat {
+  color: #8b949e;
+  font-size: 12px;
+}
+
+.console-panel {
+  border: 1px solid #30363d;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.console-panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #161b22;
+  padding: 6px 12px;
+}
+
+.console-panel-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  background: transparent;
+  border: none;
+  color: #e6edf3;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.console-panel-body {
+  padding: 12px;
+}
+
+.console-markdown {
+  font-size: 14px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.console-mermaid-error {
+  color: #f85149;
+  font-size: 13px;
+}
+
+.console-comment {
+  border-top: 1px solid #21262d;
+  padding-top: 8px;
+}
+
+.console-comment-header {
+  display: flex;
+  gap: 8px;
+  font-size: 12px;
+  color: #8b949e;
+}
+
+.console-comment-author {
+  font-weight: 600;
+  color: #e6edf3;
+}
+
+.console-files,
+.console-commits {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.console-file,
+.console-commit {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+  font-size: 13px;
+}
+
+.console-file-badge {
+  width: 18px;
+  text-align: center;
+  border: 1px solid;
+  border-radius: 4px;
+  font-size: 11px;
+}
+
+.console-file-path,
+.console-commit-message {
+  flex: 1;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.console-file-add,
+.console-pr-add {
+  color: #3fb950;
+}
+
+.console-file-del,
+.console-pr-del {
+  color: #f85149;
+}
+
+.console-commit-sha {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  color: #8b949e;
+}
+
+.console-operation-bar {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  border-top: 1px solid #30363d;
+  padding-top: 12px;
+}
+
+.console-op-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.console-op-button {
+  padding: 6px 12px;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  background: #161b22;
+  color: #e6edf3;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.console-pr-section {
+  border: 1px solid #30363d;
+  border-radius: 8px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.console-pr-statbar {
+  display: flex;
+  gap: 12px;
+  font-size: 12px;
+  color: #8b949e;
+}
+
+.console-back-button {
+  align-self: flex-start;
+  margin: 12px 16px 0;
+  background: transparent;
+  border: 1px solid #30363d;
+  border-radius: 6px;
+  color: #e6edf3;
+  padding: 4px 10px;
+  cursor: pointer;
+}

package/src/adapter/entry-points/console/ui/tsconfig.json

@@ -16,6 +16,7 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedSideEffectImports": true,
+    "types": ["jest", "node", "@testing-library/jest-dom"],
     "paths": {
       "@/*": ["./src/*"]
     }