ralph: ralph-ralph-status-dialog-for-repo-detail completed after 3 iterations

Author: chriswritescode-dev

backend/src/routes/memory.ts

@@ -525,6 +525,46 @@ export function createMemoryRoutes(db: Database): Hono {
     }
   })
 
+  app.get('/ralph/status', async (c) => {
+    const repoIdParam = c.req.query('repoId')
+
+    if (!repoIdParam) {
+      return c.json({ error: 'Missing repoId' }, 400)
+    }
+
+    const repoId = parseInt(repoIdParam, 10)
+
+    if (isNaN(repoId)) {
+      return c.json({ error: 'Invalid repoId' }, 400)
+    }
+
+    try {
+      const repo = getRepoById(db, repoId)
+
+      if (!repo) {
+        return c.json({ loops: [] })
+      }
+
+      const projectId = await resolveProjectId(repo.fullPath)
+
+      if (!projectId) {
+        return c.json({ error: 'Failed to resolve project ID' }, 500)
+      }
+
+      const entries = pluginMemory.listKv(projectId, 'ralph:')
+      const loops = entries
+        .map(e => e.data)
+        .filter((data): data is Record<string, unknown> =>
+          data !== null && typeof data === 'object' && 'active' in data
+        )
+
+      return c.json({ loops })
+    } catch (error) {
+      logger.error('Failed to get Ralph status:', error)
+      return c.json({ error: 'Failed to get Ralph status' }, 500)
+    }
+  })
+
   app.post('/ralph/cancel', async (c) => {
     try {
       const body = await c.req.json()

frontend/src/api/memory.ts

@@ -123,6 +123,30 @@ export async function updateKvEntry(projectId: string, key: string, data: Update
   })
 }
 
+export interface RalphLoopState {
+  active: boolean
+  sessionId: string
+  worktreeName: string
+  worktreeDir: string
+  worktreeBranch?: string
+  iteration: number
+  maxIterations: number
+  startedAt: string
+  prompt: string
+  phase: 'coding' | 'auditing'
+  audit: boolean
+  lastAuditResult?: string
+  errorCount: number
+  auditCount: number
+  terminationReason?: string
+  completedAt?: string
+  inPlace?: boolean
+}
+
+export async function getRalphStatus(repoId: number): Promise<{ loops: RalphLoopState[] }> {
+  return fetchWrapper(`${API_BASE_URL}/api/memory/ralph/status?repoId=${repoId}`)
+}
+
 export async function cancelRalphLoop(repoId: string, sessionId: string): Promise<{ cancelled: boolean; worktreeName?: string }> {
   return fetchWrapper(`${API_BASE_URL}/api/memory/ralph/cancel`, {
     method: 'POST',

frontend/src/components/repo/RepoRalphDialog.tsx

@@ -0,0 +1,34 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { RepoRalphList } from './RepoRalphList'
+import { useRalphStatus } from '@/hooks/useRalphStatus'
+
+interface RepoRalphDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  repoId: number
+}
+
+export function RepoRalphDialog({ open, onOpenChange, repoId }: RepoRalphDialogProps) {
+  const { data, isLoading, error, cancelMutation } = useRalphStatus(repoId, open)
+
+  if (!repoId) {
+    return null
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent mobileFullscreen className="sm:max-w-2xl sm:max-h-[85vh] gap-0 flex flex-col p-0 md:p-6 pb-safe">
+        <DialogHeader className="p-4 sm:p-6 border-b flex flex-row items-center justify-between space-y-0 shrink-0">
+          <DialogTitle>Ralph Loops</DialogTitle>
+        </DialogHeader>
+        <RepoRalphList
+          isLoading={isLoading}
+          data={data?.loops}
+          error={error}
+          onCancel={(sessionId) => cancelMutation.mutate({ sessionId })}
+          cancelPending={cancelMutation.isPending}
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}

frontend/src/components/repo/RepoRalphList.tsx

@@ -0,0 +1,100 @@
+import { Loader2, CheckCircle2, XCircle, Ban, AlertCircle } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
+import type { RalphLoopState } from '@/api/memory'
+
+interface RepoRalphListProps {
+  isLoading: boolean
+  data: RalphLoopState[] | undefined
+  error: Error | null
+  onCancel: (sessionId: string) => void
+  cancelPending: boolean
+}
+
+function StatusIcon({ loop }: { loop: RalphLoopState }) {
+  if (loop.active) return <Loader2 className="h-4 w-4 animate-spin text-blue-400" />
+  if (loop.terminationReason === 'completed') return <CheckCircle2 className="h-4 w-4 text-green-400" />
+  if (loop.terminationReason === 'cancelled' || loop.terminationReason === 'user_aborted') return <Ban className="h-4 w-4 text-yellow-400" />
+  return <XCircle className="h-4 w-4 text-red-400" />
+}
+
+function formatDuration(startedAt: string, completedAt?: string): string {
+  const start = new Date(startedAt).getTime()
+  const end = completedAt ? new Date(completedAt).getTime() : Date.now()
+  const seconds = Math.floor((end - start) / 1000)
+  if (seconds < 60) return `${seconds}s`
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ${seconds % 60}s`
+  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`
+}
+
+export function RepoRalphList({ isLoading, data, error, onCancel, cancelPending }: RepoRalphListProps) {
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center p-8">
+        <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center gap-2 p-6 text-destructive">
+        <AlertCircle className="h-4 w-4" />
+        <span className="text-sm">Failed to load Ralph status</span>
+      </div>
+    )
+  }
+
+  if (!data?.length) {
+    return (
+      <div className="flex flex-col items-center justify-center p-8 text-muted-foreground">
+        <span className="text-sm">No Ralph loops found</span>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-3 p-4 overflow-y-auto">
+      {data.map((loop) => (
+        <div key={loop.sessionId} className="rounded-lg border bg-card p-4 flex flex-col gap-2">
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex items-center gap-2 min-w-0">
+              <StatusIcon loop={loop} />
+              <span className="font-medium text-sm truncate">{loop.worktreeName}</span>
+            </div>
+            <div className="flex items-center gap-2 shrink-0">
+              <Badge variant="outline" className="text-xs capitalize">
+                {loop.phase}
+              </Badge>
+              {loop.active && (
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={() => onCancel(loop.sessionId)}
+                  disabled={cancelPending}
+                  className="h-7 text-xs"
+                >
+                  Cancel
+                </Button>
+              )}
+            </div>
+          </div>
+          <div className="flex items-center gap-4 text-xs text-muted-foreground">
+            <span>Iteration {loop.iteration}/{loop.maxIterations}</span>
+            <span>{formatDuration(loop.startedAt, loop.completedAt)}</span>
+            {loop.worktreeBranch && <span className="truncate">{loop.worktreeBranch}</span>}
+          </div>
+          {loop.terminationReason && !loop.active && (
+            <span className="text-xs text-muted-foreground capitalize">
+              {loop.terminationReason.replace(/_/g, ' ')}
+            </span>
+          )}
+          {loop.lastAuditResult && (
+            <p className="text-xs text-muted-foreground line-clamp-2 mt-1">{loop.lastAuditResult}</p>
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

frontend/src/hooks/useRalphStatus.ts

@@ -0,0 +1,35 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { getRalphStatus, cancelRalphLoop } from '@/api/memory'
+import { showToast } from '@/lib/toast'
+
+export function useRalphStatus(repoId: number, open: boolean) {
+  const queryClient = useQueryClient()
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['ralph-status', repoId],
+    queryFn: () => getRalphStatus(repoId),
+    enabled: open && !!repoId,
+    staleTime: 0,
+    refetchInterval: ({ state }) => {
+      const loops = state.data?.loops ?? []
+      return loops.some(l => l.active) ? 5000 : false
+    },
+  })
+
+  const cancelMutation = useMutation({
+    mutationFn: ({ sessionId }: { sessionId: string }) =>
+      cancelRalphLoop(String(repoId), sessionId),
+    onSuccess: (result) => {
+      if (result.cancelled) {
+        queryClient.invalidateQueries({ queryKey: ['ralph-status', repoId] })
+      } else {
+        showToast.error('Ralph loop is no longer active')
+      }
+    },
+    onError: () => {
+      showToast.error('Unable to cancel the Ralph loop. Please try again.')
+    },
+  })
+
+  return { data, isLoading, error, cancelMutation }
+}

frontend/src/pages/RepoDetail.tsx

@@ -9,6 +9,7 @@ import { Header } from "@/components/ui/header";
 import { SwitchConfigDialog } from "@/components/repo/SwitchConfigDialog";
 import { RepoMcpDialog } from "@/components/repo/RepoMcpDialog";
 import { RepoSkillsDialog } from "@/components/repo/RepoSkillsDialog";
+import { RepoRalphDialog } from "@/components/repo/RepoRalphDialog";
 import { SourceControlPanel } from "@/components/source-control";
 import { useCreateSession } from "@/hooks/useOpenCode";
 import { useSSE } from "@/hooks/useSSE";
@@ -17,7 +18,7 @@ import { useSwipeBack } from "@/hooks/useMobile";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { Plug, FolderOpen, Plus, GitBranch, GitCommitHorizontal, ShieldOff, Brain, Loader2, CalendarClock, Sparkles } from "lucide-react";
+import { Plug, FolderOpen, Plus, GitBranch, GitCommitHorizontal, ShieldOff, Brain, Loader2, CalendarClock, Sparkles, Bot } from "lucide-react";
 import { ResetPermissionsDialog } from "@/components/repo/ResetPermissionsDialog";
 import { PendingActionsGroup } from "@/components/notifications/PendingActionsGroup";
 import { invalidateConfigCaches } from "@/lib/queryInvalidation";
@@ -33,6 +34,7 @@ export function RepoDetail() {
   const [skillsDialogOpen, setSkillsDialogOpen] = useState(false);
   const [sourceControlOpen, setSourceControlOpen] = useState(false);
   const [resetPermissionsOpen, setResetPermissionsOpen] = useState(false);
+  const [ralphDialogOpen, setRalphDialogOpen] = useState(false);
   const pageRef = useRef<HTMLDivElement>(null);
 
   const handleSwipeBack = useCallback(() => {
@@ -157,6 +159,17 @@ export function RepoDetail() {
           <Sparkles className="w-4 h-4 sm:mr-2" />
           <span className="hidden sm:inline">Skills</span>
         </Button>
+        {memoryPluginStatus?.memoryPluginEnabled && (
+          <Button
+            variant="outline"
+            onClick={() => setRalphDialogOpen(true)}
+            size="sm"
+            className="hidden md:flex text-foreground border-border hover:bg-accent transition-all duration-200 hover:scale-105"
+          >
+            <Bot className="w-4 h-4 sm:mr-2" />
+            <span className="hidden sm:inline">Ralph</span>
+          </Button>
+        )}
         <Button
           variant="outline"
           onClick={() => setSourceControlOpen(true)}
@@ -219,6 +232,11 @@ export function RepoDetail() {
           <DropdownMenuItem onClick={() => setSkillsDialogOpen(true)}>
             <Sparkles className="w-4 h-4 mr-2" /> Skills
           </DropdownMenuItem>
+          {memoryPluginStatus?.memoryPluginEnabled && (
+            <DropdownMenuItem onClick={() => setRalphDialogOpen(true)}>
+              <Bot className="w-4 h-4 mr-2" /> Ralph
+            </DropdownMenuItem>
+          )}
           <DropdownMenuItem onClick={() => setResetPermissionsOpen(true)}>
             <ShieldOff className="w-4 h-4 mr-2" /> Reset Permissions
           </DropdownMenuItem>
@@ -271,6 +289,12 @@ export function RepoDetail() {
         repoId={repoId}
       />
 
+      <RepoRalphDialog
+        open={ralphDialogOpen}
+        onOpenChange={setRalphDialogOpen}
+        repoId={repoId}
+      />
+
       <SourceControlPanel
         repoId={repoId}
         isOpen={sourceControlOpen}