failproofai 0.0.9-beta.1 → 0.0.9-beta.2

package/.next/standalone/app/components/sessions-list.tsx

@@ -6,7 +6,7 @@
 
 import { useState, useMemo, useEffect, useRef } from "react";
 import { SessionFile } from "@/lib/projects";
-import { formatDate } from "@/lib/utils";
+import { formatDate } from "@/lib/format-date";
 import {
   FILTER_PRESETS,
   ITEMS_PER_PAGE,
@@ -25,6 +25,7 @@ import Link from "next/link";
 import PaginationControls from "./pagination-controls";
 import DatePickerInput from "./date-picker-input";
 import { CopyButton } from "./copy-button";
+import { CliBadge } from "./cli-badge";
 
 
 interface SessionsListProps {
@@ -190,7 +191,7 @@ export default function SessionsList({ files, projectName }: SessionsListProps)
                       <File className="w-5 h-5 text-primary" />
                     </td>
                     <td className="px-4 py-3 max-w-md">
-                      <div className="flex items-center gap-1">
+                      <div className="flex flex-wrap items-center gap-2">
                         {file.sessionId ? (
                           <>
                             <Link
@@ -206,6 +207,7 @@ export default function SessionsList({ files, projectName }: SessionsListProps)
                             {file.name.replace(/\.jsonl$/, "")}
                           </span>
                         )}
+                        {file.cli && <CliBadge cli={file.cli} />}
                       </div>
                     </td>
                     <td className="px-4 py-3 text-sm text-muted-foreground">

package/.next/standalone/app/policies/hooks-client.tsx

@@ -63,10 +63,45 @@ function projectFromTranscriptPath(transcriptPath: string): string | null {
   return folder;
 }
 
-function SessionCell({ sessionId, transcriptPath }: { sessionId?: string; transcriptPath?: string }) {
+function encodeCwdForUrl(cwd: string): string {
+  // Inverse of decodeFolderName, inlined here so this component file stays
+  // client-side and doesn't pull lib/paths server imports.
+  const driveMatch = /^([A-Za-z]):[\\/](.*)$/.exec(cwd);
+  if (driveMatch) return driveMatch[1] + "--" + driveMatch[2].replace(/[\\/]/g, "-");
+  return cwd.replace(/[\\/]/g, "-");
+}
+
+function SessionCell({
+  sessionId,
+  transcriptPath,
+  integration,
+  cwd,
+}: {
+  sessionId?: string;
+  transcriptPath?: string;
+  integration?: string;
+  cwd?: string;
+}) {
   if (!sessionId) return <span className="text-muted-foreground">\u2014</span>;
-  const project = transcriptPath ? projectFromTranscriptPath(transcriptPath) : null;
   const short = shortenSession(sessionId);
+
+  const isCodex = integration === "codex" || (transcriptPath?.includes("/.codex/") ?? false);
+  if (isCodex) {
+    // The session route auto-detects CLI by file location, so [name] only
+    // affects the breadcrumb. Encode the cwd Claude-style when we have it.
+    const projectSeg = cwd ? encodeCwdForUrl(cwd) : "codex";
+    return (
+      <Link
+        href={`/project/${encodeURIComponent(projectSeg)}/session/${encodeURIComponent(sessionId)}`}
+        className="text-primary hover:underline font-mono"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {short}
+      </Link>
+    );
+  }
+
+  const project = transcriptPath ? projectFromTranscriptPath(transcriptPath) : null;
   if (project) {
     return (
       <Link
@@ -331,9 +366,13 @@ function ActivityTab({
   const [filterEventType, setFilterEventType] = useState(() => url.get("event") ?? "");
   const [filterPolicy, setFilterPolicy] = useState(() => url.get("policy") ?? "");
   const [filterSessionId, setFilterSessionId] = useState(() => url.get("session") ?? "");
+  const [filterCli, setFilterCli] = useState<"" | "claude" | "codex">(() => {
+    const v = url.get("cli");
+    return v === "claude" || v === "codex" ? v : "";
+  });
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const filtersRef = useRef({ filterDecision, filterEventType, filterPolicy, filterSessionId });
-  filtersRef.current = { filterDecision, filterEventType, filterPolicy, filterSessionId };
+  const filtersRef = useRef({ filterDecision, filterEventType, filterPolicy, filterSessionId, filterCli });
+  filtersRef.current = { filterDecision, filterEventType, filterPolicy, filterSessionId, filterCli };
 
   useEffect(() => {
     if (!mountedRef.current) {
@@ -345,17 +384,18 @@ function ActivityTab({
       event: filterEventType || undefined,
       policy: filterPolicy || undefined,
       session: filterSessionId || undefined,
+      cli: filterCli || undefined,
       page: pageToParam(page),
     });
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterDecision, filterEventType, filterPolicy, filterSessionId, page]);
+  }, [filterDecision, filterEventType, filterPolicy, filterSessionId, filterCli, page]);
 
-  const hasActiveFilters = filterDecision !== "" || filterEventType !== "" || filterPolicy !== "" || filterSessionId !== "";
+  const hasActiveFilters = filterDecision !== "" || filterEventType !== "" || filterPolicy !== "" || filterSessionId !== "" || filterCli !== "";
 
   const fetchData = useCallback(async (p: number) => {
     try {
-      const { filterDecision: fd, filterEventType: fe, filterPolicy: fp, filterSessionId: fs } = filtersRef.current;
-      const active = fd !== "" || fe !== "" || fp !== "" || fs !== "";
+      const { filterDecision: fd, filterEventType: fe, filterPolicy: fp, filterSessionId: fs, filterCli: fc } = filtersRef.current;
+      const active = fd !== "" || fe !== "" || fp !== "" || fs !== "" || fc !== "";
       let result: HookActivityPayload;
       if (active) {
         result = await searchHookActivityAction(
@@ -364,6 +404,7 @@ function ActivityTab({
             eventType: fe || undefined,
             policyName: fp || undefined,
             sessionId: fs || undefined,
+            integration: fc || undefined,
           },
           p,
         );
@@ -394,7 +435,7 @@ function ActivityTab({
       if (debounceRef.current) clearTimeout(debounceRef.current);
     };
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [filterDecision, filterEventType, filterPolicy, filterSessionId]);
+  }, [filterDecision, filterEventType, filterPolicy, filterSessionId, filterCli]);
 
   const items = data?.entries ?? [];
   const totalPages = data?.totalPages ?? 1;
@@ -427,6 +468,16 @@ function ActivityTab({
             <option value="UserPromptSubmit">UserPromptSubmit</option>
             <option value="PermissionRequest">PermissionRequest</option>
           </select>
+          <select
+            value={filterCli}
+            onChange={(e) => setFilterCli(e.target.value as "" | "claude" | "codex")}
+            className="h-7 rounded-md border border-border bg-background px-2 text-xs text-foreground focus:outline-none focus:ring-2 focus:ring-primary/40 focus:border-primary/40 transition-shadow"
+            aria-label="Filter by CLI"
+          >
+            <option value="">All CLIs</option>
+            <option value="claude">Claude Code</option>
+            <option value="codex">OpenAI Codex</option>
+          </select>
           <div className="relative">
             <input
               type="text"
@@ -548,7 +599,12 @@ function ActivityTab({
                           <DurationDisplay ms={item.durationMs} />
                         </td>
                         <td className="px-3 py-2" title={item.sessionId ?? ""}>
-                          <SessionCell sessionId={item.sessionId} transcriptPath={item.transcriptPath} />
+                          <SessionCell
+                            sessionId={item.sessionId}
+                            transcriptPath={item.transcriptPath}
+                            integration={item.integration}
+                            cwd={item.cwd}
+                          />
                         </td>
                         <td className="px-3 py-2">
                           {item.permissionMode ? (

package/.next/standalone/app/project/[name]/page.tsx

@@ -1,6 +1,7 @@
 /** Project page — shows metadata and a filterable sessions list for a single project. */
 import { Suspense } from "react";
-import { resolveProjectPath, getCachedSessionFiles } from "@/lib/projects";
+import { resolveProjectPath, getCachedSessionFiles, type SessionFile } from "@/lib/projects";
+import { getCachedCodexSessionsByEncodedName } from "@/lib/codex-projects";
 import { logWarn } from "@/lib/logger";
 import { decodeFolderName } from "@/lib/paths";
 import { notFound } from "next/navigation";
@@ -8,7 +9,7 @@ import { existsSync } from "fs";
 import { stat } from "fs/promises";
 import Link from "next/link";
 import { ArrowLeft } from "lucide-react";
-import { formatDate } from "@/lib/utils";
+import { formatDate } from "@/lib/format-date";
 import SessionsList from "@/app/components/sessions-list";
 
 export const dynamic = "force-dynamic";
@@ -21,34 +22,61 @@ interface ProjectPageProps {
 
 export default async function ProjectPage({ params }: ProjectPageProps) {
   const { name } = await params;
-  // Next.js already decodes route params once; resolveProjectPath validates and
-  // canonicalizes, throwing RangeError if the path escapes the projects root.
-  let projectPath: string;
+  // Resolve under ~/.claude/projects/. Validation may throw RangeError; on bad input
+  // we still want to try Codex, since a Codex-only cwd never escapes this check.
+  let claudeProjectPath: string | null = null;
   try {
-    projectPath = resolveProjectPath(name);
+    claudeProjectPath = resolveProjectPath(name);
   } catch {
-    notFound();
+    claudeProjectPath = null;
   }
   const decodedName = decodeFolderName(name);
 
-  // Check if project exists
-  if (!existsSync(projectPath)) {
+  const claudeExists = claudeProjectPath ? existsSync(claudeProjectPath) : false;
+
+  let claudeSessions: SessionFile[] = [];
+  if (claudeExists && claudeProjectPath) {
+    claudeSessions = await getCachedSessionFiles(claudeProjectPath);
+  }
+  // Note: decodeFolderName is lossy when cwds contain `-` (every `-` becomes `/`),
+  // so we look up Codex sessions by re-encoding each session's cwd and matching the slug.
+  const codex = await getCachedCodexSessionsByEncodedName(name);
+  const codexSessions = codex.sessions;
+
+  if (!claudeExists && codexSessions.length === 0) {
     notFound();
   }
 
-  // Get project stats for last modified date
+  // Prefer the canonical Codex cwd when available — `decodeFolderName(name)` is
+  // ambiguous for cwds containing `-` (every `-` becomes `/`). Codex transcripts
+  // record the literal cwd, so they round-trip correctly.
+  const canonicalRoot = codex.cwd ?? decodedName;
+
+  // Project header metadata
   let lastModified: Date | null = null;
   let lastModifiedFormatted: string | null = null;
-  try {
-    const stats = await stat(projectPath);
-    lastModified = stats.mtime;
-    lastModifiedFormatted = formatDate(stats.mtime);
-  } catch (error) {
-    logWarn(`Failed to get stats for project ${decodedName}:`, error);
+  if (claudeExists && claudeProjectPath) {
+    try {
+      const stats = await stat(claudeProjectPath);
+      lastModified = stats.mtime;
+      lastModifiedFormatted = formatDate(stats.mtime);
+    } catch (error) {
+      logWarn(`Failed to get stats for project ${decodedName}:`, error);
+    }
   }
+  const newestCodex = codexSessions[0]?.lastModified ?? null;
+  if (newestCodex && (!lastModified || newestCodex.getTime() > lastModified.getTime())) {
+    lastModified = newestCodex;
+    lastModifiedFormatted = formatDate(newestCodex);
+  }
+
+  const sessionFiles: SessionFile[] = [...claudeSessions, ...codexSessions].sort(
+    (a, b) => b.lastModified.getTime() - a.lastModified.getTime(),
+  );
 
-  // Get session files
-  const sessionFiles = await getCachedSessionFiles(projectPath);
+  // Path line: prefer the Claude storage dir if present (matches existing UX);
+  // otherwise show the canonical Codex cwd.
+  const displayPath = claudeExists && claudeProjectPath ? claudeProjectPath : canonicalRoot;
 
   return (
     <main className="min-h-screen bg-background">
@@ -63,11 +91,11 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
 
         <div className="mb-8">
           <h1 className="text-4xl font-bold text-foreground mb-2 break-words break-all">
-            {decodedName}
+            {canonicalRoot}
           </h1>
           <div className="space-y-1">
             <p className="text-muted-foreground">
-              <span className="font-medium">Path:</span> {projectPath}
+              <span className="font-medium">Path:</span> {displayPath}
             </p>
             {lastModifiedFormatted && (
               <p className="text-muted-foreground">
@@ -80,7 +108,7 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
         {/* Sessions Section */}
         <div className="bg-card text-card-foreground rounded-lg border border-border p-6 shadow-sm">
           <h2 className="text-2xl font-semibold mb-4">Sessions</h2>
-          
+
           {sessionFiles.length === 0 ? (
             <div className="text-center py-8">
               <p className="text-muted-foreground mb-2">
@@ -98,4 +126,3 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
     </main>
   );
 }
-

package/.next/standalone/app/project/[name]/session/[sessionId]/page.tsx

@@ -2,12 +2,14 @@
 import Link from "next/link";
 import { ArrowLeft, Download } from "lucide-react";
 import { notFound } from "next/navigation";
-import { getCachedSessionLog } from "@/lib/log-entries";
+import { getCachedSessionLog, type LogEntry } from "@/lib/log-entries";
+import { getCachedCodexSessionLog } from "@/lib/codex-sessions";
 import { decodeFolderName } from "@/lib/paths";
 import { baseSessionId } from "@/lib/utils/session-id";
 import { resolveProjectPath, UUID_RE } from "@/lib/projects";
 import LazyLogViewer from "@/app/components/lazy-log-viewer";
 import { CopyButton } from "@/app/components/copy-button";
+import { CliBadge } from "@/app/components/cli-badge";
 
 export const dynamic = "force-dynamic";
 
@@ -30,9 +32,11 @@ export default async function SessionPage({ params }: SessionPageProps) {
   const decodedSessionId = baseSessionId(sessionId);
   if (!UUID_RE.test(decodedSessionId)) notFound();
 
-  let entries = null;
+  let entries: LogEntry[] | null = null;
   let rawLines: Record<string, unknown>[] | null = null;
   let error: string | null = null;
+  let cli: "claude" | "codex" = "claude";
+  let codexCwd: string | undefined;
 
   try {
     // Use raw folder name for file operations — decodedName is for display only
@@ -41,28 +45,50 @@ export default async function SessionPage({ params }: SessionPageProps) {
     rawLines = result.rawLines;
   } catch (e) {
     const isNotFound = (e as NodeJS.ErrnoException).code === "ENOENT";
-    error = isNotFound ? "Session log file not found." : "Failed to read session log.";
+    if (isNotFound) {
+      // Fall back to Codex transcripts. Codex stores files at
+      // ~/.codex/sessions/<YYYY>/<MM>/<DD>/<file containing sessionId>.jsonl,
+      // so the [name] segment is irrelevant — we look up by sessionId.
+      const codex = await getCachedCodexSessionLog(decodedSessionId);
+      if (codex) {
+        entries = codex.entries;
+        rawLines = codex.rawLines;
+        codexCwd = codex.cwd;
+        cli = "codex";
+      } else {
+        error = "Session log file not found.";
+      }
+    } else {
+      error = "Failed to read session log.";
+    }
   }
 
+  const isCodex = cli === "codex";
+  const headerLabel = isCodex ? "CLI" : "Project";
+  const headerValue = isCodex ? `OpenAI Codex${codexCwd ? ` · ${codexCwd}` : ""}` : decodedName;
+
   return (
     <main className="min-h-screen bg-background">
       <div className="container mx-auto p-8">
         <Link
-          href={`/project/${encodeURIComponent(name)}`}
+          href={isCodex ? "/policies?tab=activity" : `/project/${encodeURIComponent(name)}`}
           className="inline-flex items-center gap-2 text-muted-foreground hover:text-foreground mb-6 transition-colors"
         >
           <ArrowLeft className="w-4 h-4" />
-          <span>Back to Sessions</span>
+          <span>{isCodex ? "Back to Activity" : "Back to Sessions"}</span>
         </Link>
 
         <div className="mb-8">
-          <h1 className="text-4xl font-bold text-foreground mb-2">
-            Session Log
-          </h1>
+          <div className="flex flex-wrap items-center gap-3 mb-2">
+            <h1 className="text-4xl font-bold text-foreground">
+              Session Log
+            </h1>
+            <CliBadge cli={cli} />
+          </div>
           <div className="space-y-1">
             <p className="text-muted-foreground">
-              <span className="font-medium">Project:</span>{" "}
-              {decodedName}
+              <span className="font-medium">{headerLabel}:</span>{" "}
+              {headerValue}
             </p>
             <p className="text-muted-foreground break-words break-all inline-flex items-center gap-1">
               <span className="font-medium">Session:</span> {decodedSessionId}
@@ -73,14 +99,16 @@ export default async function SessionPage({ params }: SessionPageProps) {
                 <p className="text-muted-foreground">
                   <span className="font-medium">{rawLines.length}</span> log lines
                 </p>
-                <a
-                  href={`/api/download/${encodeURIComponent(name)}/${encodeURIComponent(decodedSessionId)}`}
-                  download
-                  className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground transition-colors"
-                >
-                  <Download className="w-4 h-4" />
-                  Download Logs
-                </a>
+                {!isCodex && (
+                  <a
+                    href={`/api/download/${encodeURIComponent(name)}/${encodeURIComponent(decodedSessionId)}`}
+                    download
+                    className="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm rounded-md bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground transition-colors"
+                  >
+                    <Download className="w-4 h-4" />
+                    Download Logs
+                  </a>
+                )}
               </div>
             )}
           </div>
@@ -92,7 +120,11 @@ export default async function SessionPage({ params }: SessionPageProps) {
           </div>
         )}
         {!error && entries && (
-          <LazyLogViewer entries={entries} projectName={decodedName} sessionId={decodedSessionId} />
+          <LazyLogViewer
+            entries={entries}
+            projectName={isCodex ? (codexCwd ?? "OpenAI Codex") : decodedName}
+            sessionId={decodedSessionId}
+          />
         )}
       </div>
     </main>

package/.next/standalone/components/reach-developers.tsx

@@ -2,7 +2,7 @@
 "use client";
 
 import React, { useState, useCallback } from "react";
-import { GitBranch, Lightbulb, Bug, MessageSquare, ChevronDown, Star, BookOpen } from "lucide-react";
+import { GitBranch, Lightbulb, Bug, MessageSquare, ChevronDown, Star, BookOpen, Hash } from "lucide-react";
 import { Button } from "@/components/ui/button";
 
 const GITHUB_REPO = "https://github.com/exospherehost/failproofai";
@@ -19,6 +19,11 @@ const options = [
     icon: BookOpen,
     href: "https://befailproof.ai",
   },
+  {
+    label: "Join our Slack",
+    icon: Hash,
+    href: "https://join.slack.com/t/failproofai/shared_invite/zt-3v63b7k5e-O3NBHmj8X6n9gZSGDx6ggQ",
+  },
   {
     label: "Request a Feature",
     icon: Lightbulb,