failproofai 0.0.11-beta.8 → 0.0.11

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

@@ -1,6 +1,9 @@
 /**
  * Sessions List — displays session log files for a project with date
  * preset / custom-range filtering, session ID search, and pagination.
+ *
+ * Chrome matches the calm aesthetic on /audit: sharp 1px borders, dim
+ * small-caps labels, mono throughout, pink-outlined active filter chip.
  */
 "use client";
 
@@ -95,69 +98,67 @@ export default function SessionsList({ files, projectName }: SessionsListProps)
     filterPreset !== "all" || dateRange.from !== null || dateRange.to !== null || sessionIdFilter !== "";
 
   return (
-    <div className="space-y-4">
+    <div className="sessions-list">
       {/* Filters */}
-      <div className="bg-card border border-border rounded-lg p-4 flex flex-col gap-4">
-        {/* Preset Filters + Refresh */}
-        <div className="flex flex-wrap items-center gap-2">
-          <span className="text-sm font-medium text-foreground">Filter by:</span>
+      <div className="sessions-filter-bar">
+        {/* Preset Filters */}
+        <div className="sessions-filter-row">
+          <span className="sessions-filter-label">filter by</span>
           {FILTER_PRESETS.map((preset) => (
             <button
               key={preset.value}
+              type="button"
               onClick={() => handlePresetChange(preset.value)}
-              className={`px-3 py-1.5 text-sm rounded-md transition-colors ${
-                filterPreset === preset.value
-                  ? "bg-primary text-primary-foreground"
-                  : "bg-muted text-muted-foreground hover:bg-muted/80"
-              }`}
+              className={`sessions-chip${filterPreset === preset.value ? " on" : ""}`}
             >
               {preset.label}
             </button>
           ))}
-
         </div>
 
         {/* Custom Date Range */}
-        <div className="flex flex-wrap items-center gap-4">
-          <span className="text-sm font-medium text-foreground">Custom Range:</span>
-          <div className="flex items-center gap-2">
-            <DatePickerInput id="date-from" value={dateRange.from} onChange={(v) => handleDateRangeChange("from", v)} aria-label="Filter from date" />
-            <span className="text-muted-foreground">to</span>
-            <DatePickerInput id="date-to" value={dateRange.to} onChange={(v) => handleDateRangeChange("to", v)} aria-label="Filter to date" />
-          </div>
+        <div className="sessions-filter-row">
+          <span className="sessions-filter-label">range</span>
+          <DatePickerInput id="date-from" value={dateRange.from} onChange={(v) => handleDateRangeChange("from", v)} aria-label="Filter from date" />
+          <span className="sessions-range-sep">to</span>
+          <DatePickerInput id="date-to" value={dateRange.to} onChange={(v) => handleDateRangeChange("to", v)} aria-label="Filter to date" />
         </div>
 
         {/* Session ID Search */}
-        <div className="flex items-center gap-2">
-          <Search className="w-4 h-4 text-muted-foreground" />
-          <span className="text-sm font-medium text-foreground">Filter by Session ID:</span>
+        <div className="sessions-filter-row">
+          <span className="sessions-filter-label">
+            <Search className="sessions-filter-icon" aria-hidden="true" />
+            session id
+          </span>
           <input
             type="text"
             value={sessionIdFilter}
             onChange={(e) => setSessionIdFilter(e.target.value)}
-            placeholder="Enter session ID (UUID)"
-            className="px-3 py-2 text-sm bg-input border border-border rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-all hover:border-primary/50 flex-1 max-w-md"
+            placeholder="paste a session uuid"
+            className="sessions-input"
             aria-label="Filter by session ID"
           />
           {hasActiveFilters && (
             <button
+              type="button"
               onClick={clearFilters}
-              className="px-3 py-2 text-sm bg-muted text-muted-foreground hover:bg-muted/80 rounded-md transition-colors"
+              className="sessions-chip"
+              style={{ marginLeft: "auto" }}
             >
-              Clear
+              clear
             </button>
           )}
         </div>
 
         {/* Results Count */}
-        <div className="text-sm text-muted-foreground">
+        <div className="sessions-results-count">
           {filteredFiles.length === 0 ? (
-            "No sessions found"
+            <>{"// no sessions found"}</>
           ) : (
             <>
-              Showing {startIndex + 1}-{endIndex} of {filteredFiles.length} sessions
+              {"// showing"} {startIndex + 1}–{endIndex} of {filteredFiles.length} sessions
               {filteredFiles.length !== normalizedFiles.length && (
-                <span className="ml-1">(filtered from {normalizedFiles.length} total)</span>
+                <span> · filtered from {normalizedFiles.length}</span>
               )}
             </>
           )}
@@ -165,60 +166,56 @@ export default function SessionsList({ files, projectName }: SessionsListProps)
       </div>
 
       {/* Sessions Table */}
-      <div className="bg-card border border-border rounded-lg overflow-hidden">
-        <div className="overflow-x-auto">
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-border bg-muted/50">
-                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground w-12">
-                  <span className="sr-only">Icon</span>
-                </th>
-                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground">SessionId</th>
-                <th scope="col" className="px-4 py-3 text-left text-sm font-semibold text-foreground">Modified</th>
+      <div className="sessions-table-wrap">
+        <table className="sessions-table">
+          <thead>
+            <tr>
+              <th scope="col" className="sessions-th sessions-th-icon">
+                <span className="sr-only">Icon</span>
+              </th>
+              <th scope="col" className="sessions-th">session id</th>
+              <th scope="col" className="sessions-th">modified</th>
+            </tr>
+          </thead>
+          <tbody>
+            {paginatedFiles.length === 0 ? (
+              <tr>
+                <td colSpan={3} className="sessions-td sessions-empty">
+                  {"// no sessions match the filter."}
+                </td>
               </tr>
-            </thead>
-            <tbody>
-              {paginatedFiles.length === 0 ? (
-                <tr>
-                  <td colSpan={3} className="px-4 py-8 text-center text-muted-foreground">
-                    No sessions found matching the filter.
+            ) : (
+              paginatedFiles.map((file) => (
+                <tr key={file.path} className="sessions-row">
+                  <td className="sessions-td sessions-td-icon">
+                    <File className="sessions-file-icon" aria-hidden="true" />
+                  </td>
+                  <td className="sessions-td sessions-td-name">
+                    {file.sessionId ? (
+                      <>
+                        <Link
+                          href={`/project/${encodeURIComponent(projectName)}/session/${encodeURIComponent(file.sessionId)}`}
+                          className="sessions-link"
+                        >
+                          {file.name.replace(/\.jsonl$/, "")}
+                        </Link>
+                        <CopyButton text={file.sessionId} />
+                      </>
+                    ) : (
+                      <span className="sessions-link" aria-disabled="true">
+                        {file.name.replace(/\.jsonl$/, "")}
+                      </span>
+                    )}
+                    {file.cli && <CliBadge cli={file.cli} />}
+                  </td>
+                  <td className="sessions-td sessions-td-date">
+                    {file.lastModifiedFormatted || formatDate(file.lastModified)}
                   </td>
                 </tr>
-              ) : (
-                paginatedFiles.map((file) => (
-                  <tr key={file.path} className="border-b border-border hover:bg-muted/50 transition-colors">
-                    <td className="px-4 py-3">
-                      <File className="w-5 h-5 text-primary" />
-                    </td>
-                    <td className="px-4 py-3 max-w-md">
-                      <div className="flex flex-wrap items-center gap-2">
-                        {file.sessionId ? (
-                          <>
-                            <Link
-                              href={`/project/${encodeURIComponent(projectName)}/session/${encodeURIComponent(file.sessionId)}`}
-                              className="font-semibold text-foreground hover:text-primary transition-colors break-words break-all inline-block max-w-full"
-                            >
-                              {file.name.replace(/\.jsonl$/, "")}
-                            </Link>
-                            <CopyButton text={file.sessionId} />
-                          </>
-                        ) : (
-                          <span className="font-semibold text-foreground break-words break-all inline-block max-w-full">
-                            {file.name.replace(/\.jsonl$/, "")}
-                          </span>
-                        )}
-                        {file.cli && <CliBadge cli={file.cli} />}
-                      </div>
-                    </td>
-                    <td className="px-4 py-3 text-sm text-muted-foreground">
-                      {file.lastModifiedFormatted || formatDate(file.lastModified)}
-                    </td>
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
+              ))
+            )}
+          </tbody>
+        </table>
 
         {filteredFiles.length > 0 && (
           <PaginationControls currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />

package/.next/standalone/app/globals.css

@@ -38,10 +38,10 @@
   --dim: #5e5c58;
   --line: #25252b;
   --line-2: #32323a;
-  --accent-pink: #e4587d;
-  --accent-pink-soft: rgba(228, 88, 125, 0.7);
+  --accent-pink: #e4587c;
+  --accent-pink-soft: rgba(228, 88, 124, 0.7);
   --accent-pink-shadow: #a83a5a;
-  --accent-pink-bg: rgba(228, 88, 125, 0.12);
+  --accent-pink-bg: rgba(228, 88, 124, 0.12);
   --accent-green: #66d1b5;
   --accent-green-shadow: #3e9a82;
   --accent-green-bg: rgba(102, 209, 181, 0.10);
@@ -108,41 +108,12 @@ html, body, #root {
 
 body {
   background-color: var(--bg);
-  background-image:
-    radial-gradient(ellipse 1200px 800px at 70% -10%, rgba(228, 88, 125, 0.055) 0%, transparent 60%),
-    radial-gradient(ellipse 1000px 700px at 0% 100%, rgba(102, 209, 181, 0.04) 0%, transparent 55%),
-    radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,0.45) 100%),
-    linear-gradient(180deg, #16161a 0%, #0f0f12 100%);
-  background-attachment: fixed;
   position: relative;
 }
 
 button { font-family: inherit; cursor: pointer; }
 a { color: inherit; }
 
-/* engineering-plate cross-hatch + grain — site-wide atmosphere */
-body::before {
-  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
-  background-image:
-    linear-gradient(0deg, rgba(255,255,255,0.018) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px),
-    linear-gradient(0deg, rgba(255,255,255,0.012) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
-  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
-  opacity: 0.7;
-}
-body::after {
-  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.85  0 0 0 0 0.82  0 0 0 0 0.78  0 0 0 0.16 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
-  opacity: 0.4;
-  mix-blend-mode: overlay;
-}
-
-body > * {
-  position: relative;
-  z-index: 3;
-}
-
 /* shrink scrollbars without breaking the dark theme */
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track { background: var(--bg-2); }
@@ -416,8 +387,24 @@ input[type="date"] { color-scheme: dark; }
   border: 1px solid var(--line-2);
   border-top: 0;
   background: var(--bg-2);
-}
-.activity-table { width: 100%; }
+  /* Scroll horizontally on narrow / portrait viewports instead of letting the
+     fixed-layout columns collapse into each other. Themed thin scrollbar so it
+     reads as part of the same instrument family. */
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line-2) transparent;
+}
+.activity-table-wrap::-webkit-scrollbar { height: 10px; }
+.activity-table-wrap::-webkit-scrollbar-track { background: var(--bg-3); }
+.activity-table-wrap::-webkit-scrollbar-thumb {
+  background: var(--line-2);
+  border: 2px solid var(--bg-3);
+}
+.activity-table-wrap::-webkit-scrollbar-thumb:hover { background: var(--accent-green); }
+/* min-width keeps every column wide enough for its header/badge; below it,
+   the wrap scrolls instead of squeezing columns into each other. */
+.activity-table { width: 100%; min-width: 1280px; }
 .activity-thead { background: var(--bg-3); }
 .activity-thead tr { border-bottom: 1px solid var(--line-2); }
 .activity-th {
@@ -428,8 +415,17 @@ input[type="date"] { color-scheme: dark; }
   font-weight: 500;
   color: var(--accent-green);
   text-align: left;
+  white-space: nowrap;
 }
 .activity-th.text-right { text-align: right; }
+/* Data cells stay on one line and clip (with ellipsis) at their own column
+   edge, so a wide badge/value/header can never overlap the next column.
+   Scoped to data rows so the expanded detail row (colSpan) is untouched. */
+.activity-data-row > td {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
 /* zebra rhythm — adds ambient banding without breaking the dark feel.
    Hover overrides the stripe so rows feel responsive. */
@@ -664,3 +660,214 @@ input[type="date"] { color-scheme: dark; }
     transition: none;
   }
 }
+
+/* ============================================================
+   /project/[name] sessions list — calm filter bar + table.
+   Sharp 1px borders, no rounded corners, mono throughout,
+   dim small-caps labels. Mirrors the audit page's voice.
+   ============================================================ */
+
+.sessions-list { display: flex; flex-direction: column; gap: 16px; font-family: var(--font-mono); }
+
+.sessions-filter-bar {
+  display: flex; flex-direction: column;
+  gap: 12px;
+  padding: 16px 18px;
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+}
+
+.sessions-filter-row {
+  display: flex; flex-wrap: wrap; align-items: center;
+  gap: 8px;
+}
+
+.sessions-filter-label {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--dim);
+  margin-right: 4px;
+}
+.sessions-filter-icon { width: 12px; height: 12px; }
+
+.sessions-chip {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--ink-2);
+  background: transparent;
+  border: 1px solid var(--line-2);
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
+}
+.sessions-chip:hover {
+  border-color: var(--accent-pink);
+  color: var(--accent-pink);
+}
+.sessions-chip.on {
+  border-color: var(--accent-pink);
+  color: var(--accent-pink);
+  background: var(--accent-pink-bg);
+}
+.sessions-chip:focus-visible {
+  outline: 2px solid var(--accent-pink);
+  outline-offset: 2px;
+}
+
+.sessions-input {
+  flex: 1 1 280px;
+  min-width: 220px;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  letter-spacing: 0.01em;
+  color: var(--ink);
+  background: var(--bg);
+  border: 1px solid var(--line-2);
+  padding: 7px 10px;
+  outline: none;
+  transition: border-color 140ms ease;
+}
+.sessions-input:focus { border-color: var(--accent-pink); }
+.sessions-input::placeholder { color: var(--dim); }
+
+.sessions-range-sep {
+  font-size: 11px; color: var(--dim);
+  letter-spacing: 0.04em;
+}
+
+.sessions-results-count {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--dim);
+  letter-spacing: 0.02em;
+  margin-top: 4px;
+}
+
+.sessions-table-wrap {
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  overflow-x: auto;
+}
+.sessions-table { width: 100%; border-collapse: collapse; }
+.sessions-th {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--dim);
+  font-weight: 500;
+  text-align: left;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg);
+}
+.sessions-th-icon { width: 36px; }
+
+.sessions-row { border-bottom: 1px solid var(--line); transition: background-color 140ms ease; }
+.sessions-row:last-child { border-bottom: none; }
+.sessions-row:hover { background: rgba(228, 88, 124, 0.03); }
+
+.sessions-td {
+  font-family: var(--font-mono);
+  font-size: 12px;
+  color: var(--ink-2);
+  padding: 12px 16px;
+  vertical-align: middle;
+}
+.sessions-td-icon { width: 36px; }
+.sessions-file-icon { width: 14px; height: 14px; color: var(--dim); }
+
+.sessions-td-name {
+  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
+  max-width: 520px;
+}
+.sessions-link {
+  color: var(--ink);
+  font-size: 13px;
+  letter-spacing: 0.01em;
+  text-decoration: none;
+  word-break: break-all;
+}
+.sessions-link:hover { color: var(--accent-pink); }
+.sessions-link[aria-disabled="true"] { color: var(--ink-2); cursor: default; }
+
+.sessions-td-date { font-size: 11px; color: var(--dim); white-space: nowrap; }
+
+.sessions-empty {
+  text-align: center;
+  font-size: 12px;
+  color: var(--dim);
+  padding: 32px 16px;
+}
+
+/* ============================================================
+   /project/[name] page header — back link, project title, meta.
+   ============================================================ */
+
+.project-page-back {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: var(--ink-2);
+  text-decoration: none;
+  padding: 6px 12px;
+  border: 1px solid var(--line-2);
+  background: transparent;
+  transition: border-color 140ms ease, color 140ms ease;
+}
+.project-page-back:hover {
+  border-color: var(--accent-pink);
+  color: var(--accent-pink);
+}
+.project-page-back .arrow { color: var(--dim); font-size: 12px; }
+
+.project-page-title {
+  font-family: var(--font-mono);
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+  margin: 16px 0 8px;
+  word-break: break-word;
+  line-height: 1.3;
+}
+
+.project-page-meta {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--dim);
+  letter-spacing: 0.02em;
+  margin: 0 0 32px;
+}
+.project-page-meta .label { color: var(--ink-2); margin-right: 6px; }
+.project-page-meta .sep { margin: 0 12px; color: var(--line-2); }
+.project-page-meta .path { color: var(--ink-2); word-break: break-all; }
+
+.project-page-sessions-head {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--accent-green);
+  margin-bottom: 16px;
+}
+
+.project-page-empty {
+  padding: 48px 32px;
+  border: 1px solid var(--line-2);
+  background: var(--bg-2);
+  text-align: center;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--ink-2);
+}
+.project-page-empty .hint {
+  font-size: 11px;
+  color: var(--dim);
+  margin-top: 8px;
+  letter-spacing: 0.02em;
+}

package/.next/standalone/app/layout.tsx

@@ -10,7 +10,6 @@ import { GlobalErrorListeners } from "@/app/components/global-error-listeners";
 import { AutoRefreshProvider } from "@/contexts/AutoRefreshContext";
 import { Navbar } from "@/components/navbar";
 import { Toaster } from "@/app/components/toast";
-import { readDashboardCache } from "@/src/audit/dashboard-cache";
 import "./globals.css";
 
 // Site-wide mono font is JetBrains Mono, loaded via the Google Fonts @import
@@ -33,21 +32,13 @@ export default function RootLayout({
 }>) {
   const disabledPages = (process.env.FAILPROOFAI_DISABLE_PAGES ?? "")
     .split(",").map((s) => s.trim()).filter(Boolean);
-  // Read the audit cache once per page request to drive the nav badge.
-  // Cheap (single JSON file) and the cache itself returns null on miss.
-  const auditCache = readDashboardCache();
-  const auditSlippingCount = auditCache?.result?.results
-    ? auditCache.result.results
-        .filter((r) => r.source === "audit-detector" || (r.source === "builtin" && !r.enabledInConfig))
-        .reduce((sum, r) => sum + r.hits, 0)
-    : undefined;
   return (
     <html lang="en" className="dark">
       <body className="antialiased">
         <PostHogProvider>
           <GlobalErrorListeners />
           <AutoRefreshProvider>
-            <Navbar disabledPages={disabledPages} auditSlippingCount={auditSlippingCount} />
+            <Navbar disabledPages={disabledPages} />
             {children}
           </AutoRefreshProvider>
           <Toaster />