failproofai 0.0.11-beta.7 → 0.0.11-beta.9

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); }
@@ -664,3 +635,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 />

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

@@ -1663,9 +1663,17 @@ export default function HooksClient({ initialTab = "activity" }: { initialTab?:
   return (
     <main className="report">
       <section className="section" data-screen-label="policies">
-        <h2 className="section-h" style={{ textTransform: "none" }}>
-          {activeTab === "activity" ? "Policies" : "what to stop them doing."}
-          {activeTab === "activity" && <span className="section-h-dot" aria-hidden />}
+        <h2
+          style={{
+            fontFamily: "var(--font-mono)",
+            fontSize: 24,
+            fontWeight: 600,
+            letterSpacing: "-0.01em",
+            color: "var(--ink)",
+            margin: "0 0 16px",
+          }}
+        >
+          {activeTab === "activity" ? "Policies" : "Configure Policies"}
         </h2>
         {activeTab === "activity" ? (
           <div
@@ -1688,7 +1696,7 @@ export default function HooksClient({ initialTab = "activity" }: { initialTab?:
                 minWidth: 0,
               }}
             >
-              {evaluationsHeading.toLowerCase()}
+              {evaluationsHeading}
               {policyCounts && (
                 <span style={{ color: "var(--dim)" }}>
                   {" · "}enabled policies{" "}

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

@@ -116,97 +116,41 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
   return (
     <main className="report">
       <section className="section" data-screen-label="project">
-        <div className="section-mast">
-          <Link
-            href="/projects"
-            className="btn"
-            style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase" }}
-            aria-label="Back to projects"
-          >
-            <span style={{ color: "var(--accent-pink)", letterSpacing: "-2px" }}>━━</span>
-            back to projects
-          </Link>
-          <div className="section-meta">
-            <span className="g">●</span> {sessionFiles.length} session{sessionFiles.length === 1 ? "" : "s"}
-          </div>
-        </div>
-
-        <h1
-          className="section-h"
-          style={{ textTransform: "none", marginBottom: 18, wordBreak: "break-word" }}
+        <Link
+          href="/projects"
+          className="project-page-back"
+          aria-label="Back to projects"
         >
-          {canonicalRoot}
-        </h1>
+          <span className="arrow">←</span>
+          back to projects
+        </Link>
 
-        <dl
-          style={{
-            display: "grid",
-            gridTemplateColumns: "auto 1fr",
-            gap: "8px 18px",
-            margin: "0 0 36px",
-            fontFamily: "var(--font-mono)",
-            fontSize: 12,
-            color: "var(--ink-2)",
-          }}
-        >
-          <dt
-            style={{
-              color: "var(--accent-green)",
-              letterSpacing: "0.2em",
-              textTransform: "uppercase",
-              fontSize: 10,
-              alignSelf: "center",
-            }}
-          >
-            path
-          </dt>
-          <dd style={{ margin: 0, wordBreak: "break-all" }}>{displayPath}</dd>
+        <h1 className="project-page-title">{canonicalRoot}</h1>
+
+        <div className="project-page-meta">
+          <span className="label">path</span>
+          <span className="path">{displayPath}</span>
           {lastModifiedFormatted && (
             <>
-              <dt
-                style={{
-                  color: "var(--accent-green)",
-                  letterSpacing: "0.2em",
-                  textTransform: "uppercase",
-                  fontSize: 10,
-                  alignSelf: "center",
-                }}
-              >
-                modified
-              </dt>
-              <dd style={{ margin: 0 }}>{lastModifiedFormatted}</dd>
+              <span className="sep">·</span>
+              <span className="label">modified</span>
+              {lastModifiedFormatted}
             </>
           )}
-        </dl>
-
-        <div className="section-mast" style={{ marginBottom: 18 }}>
-          <div className="section-label">
-            <span className="glyph">━━</span> sessions
-          </div>
+          <span className="sep">·</span>
+          <span className="label">sessions</span>
+          {sessionFiles.length}
         </div>
 
         {sessionFiles.length === 0 ? (
-          <div
-            className="panel"
-            style={{ textAlign: "center", padding: "48px 32px" }}
-          >
-            <p style={{ color: "var(--ink-2)", marginBottom: 8 }}>
-              no .jsonl files found in this project.
-            </p>
-            <p
-              style={{
-                color: "var(--dim)",
-                fontSize: 12,
-                letterSpacing: "0.05em",
-              }}
-            >
+          <div className="project-page-empty">
+            no .jsonl files found in this project.
+            <div className="hint">
               session files will appear here once they are created.
-            </p>
+            </div>
           </div>
         ) : (
-          <div className="panel" style={{ padding: 0 }}>
-            <Suspense><SessionsList files={sessionFiles} projectName={name} /></Suspense>
-          </div>
+          <Suspense><SessionsList files={sessionFiles} projectName={name} /></Suspense>
         )}
       </section>
     </main>