ralph-review 0.2.2 → 0.2.3

package/src/lib/tui/dashboard/StatusBar.tsx

@@ -1,4 +1,5 @@
 import { TUI_COLORS } from "@/lib/tui/shared/colors";
+import { ShortcutHint } from "@/lib/tui/shared/ShortcutHint";
 import type { FocusedPane } from "@/lib/tui/workspace/workspace-types";
 
 interface StatusBarProps {
@@ -41,18 +42,9 @@ export function StatusBar({
         paddingTop={1}
       >
         <box flexDirection="row" gap={2}>
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[↑/↓]</span>
-            <span fg={TUI_COLORS.text.muted}> Choose</span>
-          </text>
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[Enter]</span>
-            <span fg={TUI_COLORS.text.muted}> Stop</span>
-          </text>
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[Esc]</span>
-            <span fg={TUI_COLORS.text.muted}> Cancel</span>
-          </text>
+          <ShortcutHint keys="[↑/↓]" label="Choose" />
+          <ShortcutHint keys="[Enter]" label="Stop" />
+          <ShortcutHint keys="[Esc]" label="Cancel" />
         </box>
         <text fg={TUI_COLORS.text.dim}>Focus: Session Picker</text>
       </box>
@@ -69,44 +61,14 @@ export function StatusBar({
       paddingBottom={1}
     >
       <box flexDirection="row" gap={2}>
-        <text>
-          <span fg={TUI_COLORS.accent.key}>[Esc/q]</span>
-          <span fg={TUI_COLORS.text.muted}> Quit</span>
-        </text>
-        {!hasSession && (
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[r]</span>
-            <span fg={TUI_COLORS.text.muted}> Run Review</span>
-          </text>
-        )}
-        {hasSession && (
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[s]</span>
-            <span fg={TUI_COLORS.text.muted}> Stop Review</span>
-          </text>
-        )}
-        <text>
-          <span fg={TUI_COLORS.accent.key}>[o]</span>
-          <span fg={TUI_COLORS.text.muted}> {outputVisible ? "Hide Output" : "Output"}</span>
-        </text>
-        <text>
-          <span fg={TUI_COLORS.accent.key}>[Tab ←/→]</span>
-          <span fg={TUI_COLORS.text.muted}> Switch</span>
-        </text>
-        <text>
-          <span fg={TUI_COLORS.accent.key}>[l]</span>
-          <span fg={TUI_COLORS.text.muted}> Logs</span>
-        </text>
-        {canFixPendingSession && (
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[f]</span>
-            <span fg={TUI_COLORS.text.muted}> Fix</span>
-          </text>
-        )}
-        <text>
-          <span fg={TUI_COLORS.accent.key}>[h]</span>
-          <span fg={TUI_COLORS.text.muted}> Help</span>
-        </text>
+        <ShortcutHint keys="[Esc/q]" label="Quit" />
+        {!hasSession && <ShortcutHint keys="[r]" label="Run Review" />}
+        {hasSession && <ShortcutHint keys="[s]" label="Stop Review" />}
+        <ShortcutHint keys="[o]" label={outputVisible ? "Hide Output" : "Output"} />
+        <ShortcutHint keys="[Tab ←/→]" label="Switch" />
+        <ShortcutHint keys="[l]" label="Logs" />
+        {canFixPendingSession && <ShortcutHint keys="[f]" label="Fix" />}
+        <ShortcutHint keys="[h]" label="Help" />
       </box>
       <box flexDirection="column" alignItems="flex-end">
         {liveRefreshError && (

package/src/lib/tui/dashboard/StopSessionPickerOverlay.tsx

@@ -1,4 +1,5 @@
 import type { ActiveSession } from "@/lib/session-state";
+import { CenteredModal } from "@/lib/tui/shared/CenteredModal";
 import { TUI_COLORS } from "@/lib/tui/shared/colors";
 
 interface StopSessionPickerOverlayProps {
@@ -38,27 +39,8 @@ export function StopSessionPickerOverlay({
   onClose,
 }: StopSessionPickerOverlayProps) {
   return (
-    <box
-      position="absolute"
-      left={0}
-      top={0}
-      width="100%"
-      height="100%"
-      justifyContent="center"
-      alignItems="center"
-    >
-      <box
-        border
-        borderStyle="double"
-        title="Stop Review Session"
-        titleAlignment="left"
-        padding={1}
-        width={80}
-        height={16}
-        backgroundColor="#1a1a2e"
-        flexDirection="column"
-        gap={1}
-      >
+    <CenteredModal title="Stop Review Session" width={80} height={16} padding={1}>
+      <box flexDirection="column" gap={1}>
         <text fg={TUI_COLORS.text.muted}>Choose which active worktree session to stop.</text>
         <select
           focused
@@ -84,6 +66,6 @@ export function StopSessionPickerOverlay({
           }}
         />
       </box>
-    </box>
+    </CenteredModal>
   );
 }

package/src/lib/tui/sessions/detail/DetailPane.tsx

@@ -1,75 +1,31 @@
-import type {
-  FindingFixResult,
-  FindingId,
-  StoredFinding,
-} from "@/lib/review-workflow/findings/types";
-import type { SessionState } from "@/lib/session-state";
 import type { DashboardStartupMode } from "@/lib/tui/dashboard/use-dashboard-run-control";
 import { TUI_COLORS } from "@/lib/tui/shared/colors";
-import type {
-  AgentRole,
-  Finding,
-  FixEntry,
-  ProjectStats,
-  ReviewOptions,
-  SessionStats,
-  SkippedEntry,
-} from "@/lib/types";
+import type { ProjectStats, SessionStats } from "@/lib/types";
 import { IdleStateView } from "./IdleStateView";
+import type { SessionDetailViewProps } from "./SessionDetailView";
 import { SessionDetailView } from "./SessionDetailView";
 
-interface DetailPaneProps {
-  session: SessionState | null;
-  fixes: FixEntry[];
-  skipped: SkippedEntry[];
-  findings: Finding[];
-  storedFindings: StoredFinding[];
-  selectedFindingIds: FindingId[];
-  fixResults: FindingFixResult[];
-  unresolvedSelectedFindings: StoredFinding[];
-  auditRegressionFindings: StoredFinding[];
-  latestReviewIteration: number | null;
-  codexReviewText: string | null;
-  tmuxOutput: string;
-  maxIterations: number;
+export interface DetailPaneProps extends Omit<SessionDetailViewProps, "session"> {
+  session: SessionDetailViewProps["session"] | null;
   isLoading: boolean;
   lastSessionStats?: SessionStats | null;
   projectStats: ProjectStats | null;
   isGitRepo: boolean;
-  currentAgent: AgentRole | null;
-  reviewOptions: ReviewOptions | undefined;
   startupMode: DashboardStartupMode;
-  isStopping: boolean;
-  activeSessionCount: number;
   canFixPendingSession?: boolean;
-  focused?: boolean;
 }
 
 export function DetailPane({
   session,
-  fixes,
-  skipped,
-  findings,
-  storedFindings,
-  selectedFindingIds,
-  fixResults,
-  unresolvedSelectedFindings,
-  auditRegressionFindings,
-  latestReviewIteration,
-  codexReviewText,
-  tmuxOutput,
-  maxIterations,
   isLoading,
   lastSessionStats = null,
   projectStats,
   isGitRepo,
-  currentAgent,
-  reviewOptions,
   startupMode,
   isStopping,
-  activeSessionCount,
   canFixPendingSession = false,
   focused = false,
+  ...sessionDetailProps
 }: DetailPaneProps) {
   const borderColor = focused ? TUI_COLORS.ui.borderFocused : TUI_COLORS.ui.border;
 
@@ -104,23 +60,9 @@ export function DetailPane({
       <scrollbox flexGrow={1} focused={focused}>
         {session ? (
           <SessionDetailView
+            {...sessionDetailProps}
             session={session}
-            fixes={fixes}
-            skipped={skipped}
-            findings={findings}
-            storedFindings={storedFindings}
-            selectedFindingIds={selectedFindingIds}
-            fixResults={fixResults}
-            unresolvedSelectedFindings={unresolvedSelectedFindings}
-            auditRegressionFindings={auditRegressionFindings}
-            latestReviewIteration={latestReviewIteration}
-            codexReviewText={codexReviewText}
-            tmuxOutput={tmuxOutput}
-            maxIterations={maxIterations}
-            currentAgent={currentAgent}
-            reviewOptions={reviewOptions}
             isStopping={isStopping}
-            activeSessionCount={activeSessionCount}
             focused={focused}
           />
         ) : (

package/src/lib/tui/sessions/detail/IdleStateView.tsx

@@ -19,19 +19,17 @@ import { Spinner } from "@/lib/tui/shared/Spinner";
 import type { ProjectStats, SessionStats } from "@/lib/types";
 import { toSingleLine } from "./session-detail-parts";
 
+const LAST_RUN_STATUS_DISPLAY: Partial<
+  Record<SessionStats["status"], { text: string; color: string }>
+> = {
+  completed: { text: "completed", color: TUI_COLORS.status.success },
+  failed: { text: "failed", color: TUI_COLORS.status.error },
+  interrupted: { text: "interrupted", color: TUI_COLORS.status.warning },
+  running: { text: "running", color: TUI_COLORS.status.pending },
+};
+
 function getLastRunStatusDisplay(status: SessionStats["status"]): { text: string; color: string } {
-  switch (status) {
-    case "completed":
-      return { text: "completed", color: TUI_COLORS.status.success };
-    case "failed":
-      return { text: "failed", color: TUI_COLORS.status.error };
-    case "interrupted":
-      return { text: "interrupted", color: TUI_COLORS.status.warning };
-    case "running":
-      return { text: "running", color: TUI_COLORS.status.pending };
-    default:
-      return { text: "unknown", color: TUI_COLORS.status.inactive };
-  }
+  return LAST_RUN_STATUS_DISPLAY[status] ?? { text: "unknown", color: TUI_COLORS.status.inactive };
 }
 
 function getLastRunHandoffDisplay(stats: SessionStats): {

package/src/lib/tui/sessions/detail/SessionDetailView.tsx

@@ -36,7 +36,7 @@ import {
   toSingleLine,
 } from "./session-detail-parts";
 
-interface SessionDetailViewProps {
+export interface SessionDetailViewProps {
   session: SessionState;
   fixes: FixEntry[];
   skipped: SkippedEntry[];

package/src/lib/tui/sessions/detail/session-detail-parts.tsx

@@ -19,6 +19,56 @@ function formatConfidenceScore(value: number): string {
   return `${Math.round(value * 100)}%`;
 }
 
+function EmptyListMessage() {
+  return (
+    <text fg={TUI_COLORS.text.dim} paddingLeft={2}>
+      None yet
+    </text>
+  );
+}
+
+function ScrollableList({
+  content,
+  focused,
+  height,
+  scrollable,
+}: {
+  content: React.ReactNode;
+  focused: boolean;
+  height: BoxHeight;
+  scrollable: boolean;
+}) {
+  if (!scrollable) {
+    return <box paddingLeft={2}>{content}</box>;
+  }
+
+  return (
+    <scrollbox paddingLeft={2} height={height} focused={focused}>
+      {content}
+    </scrollbox>
+  );
+}
+
+function PriorityTitleRow({
+  priority,
+  title,
+}: {
+  priority: Finding["priority"] | FixEntry["priority"];
+  title: string;
+}) {
+  return (
+    <box flexDirection="row">
+      <text>
+        <PriorityText priority={priority} />
+      </text>
+      <text fg={TUI_COLORS.text.dim}> ▸ </text>
+      <text fg={TUI_COLORS.text.secondary} wrapMode="none">
+        {toSingleLine(title)}
+      </text>
+    </box>
+  );
+}
+
 export function SectionHeader({
   title,
   count,
@@ -55,11 +105,7 @@ export function FindingsList({
   showConfidence?: boolean;
 }) {
   if (findings.length === 0) {
-    return (
-      <text fg={TUI_COLORS.text.dim} paddingLeft={2}>
-        None yet
-      </text>
-    );
+    return <EmptyListMessage />;
   }
 
   const content = findings.map((finding, index) => {
@@ -70,15 +116,10 @@ export function FindingsList({
     return (
       <box key={key} flexDirection="column">
         {showBody && index > 0 && <text> </text>}
-        <box flexDirection="row">
-          <text>
-            <PriorityText priority={finding.priority} />
-          </text>
-          <text fg={TUI_COLORS.text.dim}> ▸ </text>
-          <text fg={TUI_COLORS.text.secondary} wrapMode="none">
-            {toSingleLine(formatFindingTitleForDisplay(finding.title))}
-          </text>
-        </box>
+        <PriorityTitleRow
+          priority={finding.priority}
+          title={formatFindingTitleForDisplay(finding.title)}
+        />
         {showBody && (
           <>
             <text> </text>
@@ -99,14 +140,8 @@ export function FindingsList({
     );
   });
 
-  if (!scrollable) {
-    return <box paddingLeft={2}>{content}</box>;
-  }
-
   return (
-    <scrollbox paddingLeft={2} height={height} focused={focused}>
-      {content}
-    </scrollbox>
+    <ScrollableList content={content} focused={focused} height={height} scrollable={scrollable} />
   );
 }
 
@@ -153,11 +188,7 @@ export function SelectableStoredFindingsList({
   selectedFirst?: boolean;
 }) {
   if (findings.length === 0) {
-    return (
-      <text fg={TUI_COLORS.text.dim} paddingLeft={2}>
-        None yet
-      </text>
-    );
+    return <EmptyListMessage />;
   }
 
   const selectedIdSet = new Set(selectedFindingIds);
@@ -193,14 +224,8 @@ export function SelectableStoredFindingsList({
     );
   });
 
-  if (!scrollable) {
-    return <box paddingLeft={2}>{content}</box>;
-  }
-
   return (
-    <scrollbox paddingLeft={2} height={height} focused={focused}>
-      {content}
-    </scrollbox>
+    <ScrollableList content={content} focused={focused} height={height} scrollable={scrollable} />
   );
 }
 
@@ -218,24 +243,12 @@ export function FixList({
   scrollable?: boolean;
 }) {
   if (fixes.length === 0) {
-    return (
-      <text fg={TUI_COLORS.text.dim} paddingLeft={2}>
-        None yet
-      </text>
-    );
+    return <EmptyListMessage />;
   }
 
   const content = fixes.map((fix, index) => (
     <box key={`${index}-${fix.id}`} flexDirection="column">
-      <box flexDirection="row">
-        <text>
-          <PriorityText priority={fix.priority} />
-        </text>
-        <text fg={TUI_COLORS.text.dim}> ▸ </text>
-        <text fg={TUI_COLORS.text.secondary} wrapMode="none">
-          {toSingleLine(fix.title)}
-        </text>
-      </box>
+      <PriorityTitleRow priority={fix.priority} title={fix.title} />
       {showFiles && fix.file && (
         <text fg={TUI_COLORS.text.dim} paddingLeft={5} wrapMode="none">
           {toSingleLine(fix.file)}
@@ -244,14 +257,8 @@ export function FixList({
     </box>
   ));
 
-  if (!scrollable) {
-    return <box paddingLeft={2}>{content}</box>;
-  }
-
   return (
-    <scrollbox paddingLeft={2} height={height} focused={focused}>
-      {content}
-    </scrollbox>
+    <ScrollableList content={content} focused={focused} height={height} scrollable={scrollable} />
   );
 }
 
@@ -267,38 +274,20 @@ export function SkippedList({
   scrollable?: boolean;
 }) {
   if (skipped.length === 0) {
-    return (
-      <text fg={TUI_COLORS.text.dim} paddingLeft={2}>
-        None yet
-      </text>
-    );
+    return <EmptyListMessage />;
   }
 
   const content = skipped.map((entry, index) => (
     <box key={`${index}-${entry.id}`} flexDirection="column">
-      <box flexDirection="row">
-        <text>
-          <PriorityText priority={entry.priority} />
-        </text>
-        <text fg={TUI_COLORS.text.dim}> ▸ </text>
-        <text fg={TUI_COLORS.text.secondary} wrapMode="none">
-          {toSingleLine(entry.title)}
-        </text>
-      </box>
+      <PriorityTitleRow priority={entry.priority} title={entry.title} />
       <text fg={TUI_COLORS.text.dim} paddingLeft={5} wrapMode="none">
         {toSingleLine(entry.reason)}
       </text>
     </box>
   ));
 
-  if (!scrollable) {
-    return <box paddingLeft={2}>{content}</box>;
-  }
-
   return (
-    <scrollbox paddingLeft={2} height={height} focused={focused}>
-      {content}
-    </scrollbox>
+    <ScrollableList content={content} focused={focused} height={height} scrollable={scrollable} />
   );
 }
 
@@ -327,11 +316,7 @@ export function FindingFixResultList({
   scrollable?: boolean;
 }) {
   if (results.length === 0) {
-    return (
-      <text fg={TUI_COLORS.text.dim} paddingLeft={2}>
-        None yet
-      </text>
-    );
+    return <EmptyListMessage />;
   }
 
   const content = results.map((result) => {
@@ -359,13 +344,7 @@ export function FindingFixResultList({
     );
   });
 
-  if (!scrollable) {
-    return <box paddingLeft={2}>{content}</box>;
-  }
-
   return (
-    <scrollbox paddingLeft={2} height={height} focused={focused}>
-      {content}
-    </scrollbox>
+    <ScrollableList content={content} focused={focused} height={height} scrollable={scrollable} />
   );
 }

package/src/lib/tui/sessions/history/SessionListOverlay.tsx

@@ -2,7 +2,10 @@ import { useKeyboard, useTerminalDimensions } from "@opentui/react";
 import { useCallback, useMemo, useState } from "react";
 import type { LogSession } from "@/lib/logger";
 import { formatProjectNameForDisplay } from "@/lib/tui/sessions/session-display";
+import { CenteredModal } from "@/lib/tui/shared/CenteredModal";
 import { TUI_COLORS } from "@/lib/tui/shared/colors";
+import { KeyboardShortcutsModal } from "@/lib/tui/shared/KeyboardShortcutsModal";
+import { ShortcutHint } from "@/lib/tui/shared/ShortcutHint";
 import { SessionDetailPane } from "./SessionListDetailPane";
 import {
   buildSessionOverlayOptions,
@@ -27,48 +30,16 @@ function SessionHelpModal({ onClose }: { onClose: () => void }) {
     }
   });
 
-  return (
-    <box
-      position="absolute"
-      left={0}
-      top={0}
-      width="100%"
-      height="100%"
-      justifyContent="center"
-      alignItems="center"
-    >
-      <box
-        border
-        borderStyle="double"
-        title="Keyboard Shortcuts"
-        titleAlignment="left"
-        padding={2}
-        width={44}
-        backgroundColor="#1a1a2e"
-      >
-        <box flexDirection="column" gap={1}>
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[Tab ←/→]</span>
-            <span fg={TUI_COLORS.text.muted}> Switch pane focus</span>
-          </text>
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[↑/↓ j/k]</span>
-            <span fg={TUI_COLORS.text.muted}> Navigate / Scroll</span>
-          </text>
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[d]</span>
-            <span fg={TUI_COLORS.text.muted}> Delete selected log</span>
-          </text>
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[h/?]</span>
-            <span fg={TUI_COLORS.text.muted}> Toggle help</span>
-          </text>
-        </box>
-      </box>
-    </box>
-  );
+  return <KeyboardShortcutsModal shortcuts={SESSION_OVERLAY_SHORTCUTS} />;
 }
 
+const SESSION_OVERLAY_SHORTCUTS = [
+  { keys: "[Tab ←/→]", label: "Switch pane focus" },
+  { keys: "[↑/↓ j/k]", label: "Navigate / Scroll" },
+  { keys: "[d]", label: "Delete selected log" },
+  { keys: "[h/?]", label: "Toggle help" },
+] as const;
+
 interface SessionDeleteModalProps {
   sessionName: string;
   error: string | null;
@@ -77,26 +48,8 @@ interface SessionDeleteModalProps {
 
 function SessionDeleteModal({ sessionName, error, isDeleting }: SessionDeleteModalProps) {
   return (
-    <box
-      position="absolute"
-      left={0}
-      top={0}
-      width="100%"
-      height="100%"
-      justifyContent="center"
-      alignItems="center"
-    >
-      <box
-        border
-        borderStyle="double"
-        title="Delete Session Log"
-        titleAlignment="left"
-        padding={2}
-        width={58}
-        backgroundColor="#1a1a2e"
-        flexDirection="column"
-        gap={1}
-      >
+    <CenteredModal title="Delete Session Log" width={58}>
+      <box flexDirection="column" gap={1}>
         <text fg={TUI_COLORS.text.primary}>{sessionName}</text>
         <text fg={TUI_COLORS.status.error}>This cannot be undone.</text>
         <text>
@@ -109,7 +62,7 @@ function SessionDeleteModal({ sessionName, error, isDeleting }: SessionDeleteMod
         {isDeleting && <text fg={TUI_COLORS.text.muted}>Deleting...</text>}
         {error && <text fg={TUI_COLORS.status.error}>{error}</text>}
       </box>
-    </box>
+    </CenteredModal>
   );
 }
 
@@ -339,20 +292,9 @@ export function SessionOverlay({ onClose }: SessionOverlayProps) {
         paddingBottom={1}
       >
         <box flexDirection="row" gap={2}>
-          {isNarrow && (
-            <text>
-              <span fg={TUI_COLORS.accent.key}>[Tab]</span>
-              <span fg={TUI_COLORS.text.muted}> Switch</span>
-            </text>
-          )}
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[d]</span>
-            <span fg={TUI_COLORS.text.muted}> Delete</span>
-          </text>
-          <text>
-            <span fg={TUI_COLORS.accent.key}>[h]</span>
-            <span fg={TUI_COLORS.text.muted}> Help</span>
-          </text>
+          {isNarrow && <ShortcutHint keys="[Tab]" label="Switch" />}
+          <ShortcutHint keys="[d]" label="Delete" />
+          <ShortcutHint keys="[h]" label="Help" />
         </box>
         <text fg={TUI_COLORS.text.dim}>Focus: {focusedPane === "list" ? "List" : "Detail"}</text>
       </box>