failproofai 0.0.11-beta.2 → 0.0.11-beta.4

package/.next/standalone/components/navbar.tsx

@@ -1,87 +1,176 @@
-/** Top navigation bar — wordmark, primary nav, refresh + reach-developers controls. */
+/** Top navigation bar — wordmark, primary nav, refresh + reach-developers controls.
+ *
+ * Restyled to the audit / brutalist-pixel-craft system: the wordmark uses the
+ * same pixel pink mark + Bitcount Prop Single lowercase name as the audit
+ * report, and each nav link is a `.tab` with a sharp pink underline on the
+ * active route. No lucide icons in the bar itself — the chrome stays text-
+ * forward to match the rest of the design system.
+ */
 "use client";
 
 import React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { FolderOpen, Shield } from "lucide-react";
 import { ReachDevelopers } from "@/components/reach-developers";
 import { RefreshButton } from "@/app/components/refresh-button";
+import { usePostHog } from "@/contexts/PostHogContext";
 
 const NAV_LINKS = [
-  { href: "/policies", label: "Policies", icon: Shield },
-  { href: "/projects", label: "Projects", icon: FolderOpen },
+  { href: "/policies", label: "policies" },
+  { href: "/audit", label: "audit" },
+  { href: "/projects", label: "projects" },
 ];
 
-const WORDMARK_SRC = "https://d2wq11aau0arks.cloudfront.net/failproof/logo-wordmark.png";
+const REMOTE_LOGO_URL =
+  "https://exospherehost.slack.com/archives/C0B6RL08SLF/p1780910285021619?thread_ts=1780910239.057609&cid=C0B6RL08SLF";
+const LOCAL_LOGO_URL = "/logo.svg";
 
-export const Navbar: React.FC<{ disabledPages?: string[] }> = ({ disabledPages = [] }) => {
+/** Resolves the brand logo: first tries the remote URL, falls back to the
+ *  bundled asset (served from /public, mirrored at assets/logos/company/logo.svg)
+ *  if the fetch fails for any reason. */
+const useBrandLogo = (): string => {
+  const [src, setSrc] = React.useState<string>(LOCAL_LOGO_URL);
+  React.useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const res = await fetch(REMOTE_LOGO_URL, { method: "GET", mode: "cors" });
+        if (!res.ok) throw new Error(`status ${res.status}`);
+        const blob = await res.blob();
+        const url = URL.createObjectURL(blob);
+        if (cancelled) URL.revokeObjectURL(url);
+        else setSrc(url);
+      } catch {
+        if (!cancelled) setSrc(LOCAL_LOGO_URL);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, []);
+  return src;
+};
+
+export const Navbar: React.FC<{
+  disabledPages?: string[];
+  /** Total slipping-through actions from the latest cached audit. When > 0
+   *  a small chip is rendered next to the Audit nav link. Undefined → no
+   *  chip (no cache yet, or audit disabled). */
+  auditSlippingCount?: number;
+}> = ({ disabledPages = [], auditSlippingCount }) => {
   const pathname = usePathname();
+  const { capture } = usePostHog();
+  const logoSrc = useBrandLogo();
+
+  const sectionLabel = (() => {
+    if (pathname.startsWith("/policies")) return "policies";
+    if (pathname.startsWith("/audit")) return "audit";
+    if (pathname.startsWith("/projects") || pathname.startsWith("/project/")) return "projects";
+    return "";
+  })();
 
   return (
-    <header className="relative z-50 border-b border-border bg-card/60 backdrop-blur supports-[backdrop-filter]:bg-card/60">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          <div className="flex items-center gap-3">
-            <a
-              href="https://github.com/failproofai/failproofai"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center hover:opacity-80 transition-opacity"
-              aria-label="failproof ai · GitHub"
+    <header className="app-header">
+      {/* Brand — logo mark + name only (no version/section here) */}
+      <a
+        href="https://github.com/failproofai/failproofai"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="h-brand"
+        style={{ flex: "none" }}
+        aria-label="failproof ai · GitHub"
+      >
+        <img src={logoSrc} alt="failproof_ai" style={{ height: 18, display: "block", flexShrink: 0 }} />
+      </a>
+
+      {/* Nav links — swapped to sit right after the brand */}
+      <nav className="tabs" style={{ border: "none", padding: 0, gap: 0 }}>
+        {NAV_LINKS.filter(({ href }) => {
+          const key = href.slice(1);
+          return !disabledPages.includes(key);
+        }).map(({ href, label }) => {
+          const active = href === "/projects"
+            ? pathname === "/projects" || pathname.startsWith("/project/")
+            : pathname.startsWith(href);
+          const showAuditBadge =
+            href === "/audit"
+            && typeof auditSlippingCount === "number"
+            && auditSlippingCount > 0;
+          return (
+            <Link
+              key={href}
+              href={href}
+              className={`tab${active ? " is-active" : ""}`}
+              aria-current={active ? "page" : undefined}
+              onClick={() => {
+                if (href !== "/audit") return;
+                capture("audit_nav_clicked", {
+                  from_path: pathname,
+                  is_active_tab: active,
+                  has_badge: showAuditBadge,
+                  slipping_count: typeof auditSlippingCount === "number" ? auditSlippingCount : null,
+                });
+              }}
             >
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                src={WORDMARK_SRC}
-                alt="failproof ai"
-                style={{ height: 24, width: "auto" }}
-                className="select-none"
-              />
-            </a>
-            {process.env.NEXT_PUBLIC_APP_VERSION && (
-              <span className="font-mono text-[0.6rem] leading-none text-muted-foreground/70 border border-border/60 rounded px-1.5 py-0.5 select-none tracking-wider uppercase">
-                v{process.env.NEXT_PUBLIC_APP_VERSION}
-              </span>
-            )}
+              <span style={{ color: "var(--dim)", letterSpacing: "-2px", marginRight: 2 }}>━━</span>
+              {label}
+              {showAuditBadge && (
+                <span
+                  role="status"
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    minWidth: "1.4rem",
+                    height: "1rem",
+                    padding: "0 6px",
+                    fontFamily: "var(--font-mono)",
+                    fontSize: 10,
+                    letterSpacing: "0.05em",
+                    background: "var(--amber-bg)",
+                    color: "var(--amber)",
+                    border: "1px solid var(--amber)",
+                    marginLeft: 2,
+                  }}
+                  aria-label={`${auditSlippingCount} action${auditSlippingCount === 1 ? "" : "s"} slipping through your policies`}
+                  title={`${auditSlippingCount} slipping through`}
+                >
+                  {auditSlippingCount}
+                </span>
+              )}
+            </Link>
+          );
+        })}
+      </nav>
 
-            <div className="w-px h-8 bg-border ml-2" />
+      {/* Spacer pushes version/section + actions to the right */}
+      <div style={{ flex: 1 }} />
 
-            <nav className="flex items-center h-16">
-              {NAV_LINKS.filter(({ href }) => {
-                const key = href.slice(1);
-                return !disabledPages.includes(key);
-              }).map(({ href, label, icon: Icon }) => {
-                const active = href === "/projects"
-                  ? pathname === "/projects" || pathname.startsWith("/project/")
-                  : pathname.startsWith(href);
-                return (
-                  <Link
-                    key={href}
-                    href={href}
-                    className={`relative flex items-center gap-1.5 px-3 h-full text-sm transition-colors ${
-                      active
-                        ? "text-foreground font-medium"
-                        : "text-muted-foreground hover:text-foreground"
-                    }`}
-                  >
-                    <Icon className={`w-4 h-4 ${active ? "text-primary" : ""}`} />
-                    {label}
-                    <span
-                      className={`absolute inset-x-1 bottom-0 h-[2px] transition-all ${
-                        active ? "bg-primary" : "bg-transparent"
-                      }`}
-                    />
-                  </Link>
-                );
-              })}
-            </nav>
-          </div>
-          <div className="flex items-center gap-1">
-            <RefreshButton />
-            <div className="w-px h-6 bg-border mx-1" />
-            <ReachDevelopers />
-          </div>
+      {/* Version + section label — swapped to right of nav */}
+      {(process.env.NEXT_PUBLIC_APP_VERSION || sectionLabel) && (
+        <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+          {process.env.NEXT_PUBLIC_APP_VERSION && (
+            <span
+              style={{
+                fontFamily: "var(--font-mono)",
+                fontSize: 10,
+                letterSpacing: "0.18em",
+                textTransform: "uppercase",
+                color: "var(--dim)",
+              }}
+            >
+              v{process.env.NEXT_PUBLIC_APP_VERSION}
+            </span>
+          )}
+          {sectionLabel && process.env.NEXT_PUBLIC_APP_VERSION && (
+            <span className="h-brand-sep" aria-hidden="true">·</span>
+          )}
+          {sectionLabel && <span className="h-brand-section">{sectionLabel}</span>}
         </div>
+      )}
+
+      <div className="h-actions">
+        <RefreshButton />
+        <span style={{ width: 1, height: 18, background: "var(--line)", margin: "0 6px" }} />
+        <ReachDevelopers />
       </div>
     </header>
   );

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

@@ -13,31 +13,43 @@ const options = [
     label: "Star us on GitHub",
     icon: Star,
     href: "https://github.com/failproofai/failproofai",
+    color: "#f5c842",
+    bg: "rgba(245,200,66,0.08)",
   },
   {
     label: "Documentation",
     icon: BookOpen,
-    href: "https://befailproof.ai",
+    href: "https://docs.befailproof.ai/",
+    color: "#60a5fa",
+    bg: "rgba(96,165,250,0.08)",
   },
   {
     label: "Join our Slack",
     icon: Hash,
     href: "https://join.slack.com/t/failproofai/shared_invite/zt-3v63b7k5e-O3NBHmj8X6n9gZSGDx6ggQ",
+    color: "#a78bfa",
+    bg: "rgba(167,139,250,0.08)",
   },
   {
     label: "Request a Feature",
     icon: Lightbulb,
     href: `${GITHUB_REPO}/issues/new?labels=enhancement&title=Feature+Request%3A+`,
+    color: "#34d399",
+    bg: "rgba(52,211,153,0.08)",
   },
   {
     label: "Report an Issue",
     icon: Bug,
     href: `${GITHUB_REPO}/issues/new?labels=bug&title=Bug+Report%3A+`,
+    color: "#f87171",
+    bg: "rgba(248,113,113,0.08)",
   },
   {
     label: "Ask a Question",
     icon: MessageSquare,
     href: `${GITHUB_REPO}/discussions/new?category=q-a`,
+    color: "#fb923c",
+    bg: "rgba(251,146,60,0.08)",
   },
 ] as const;
 
@@ -76,35 +88,51 @@ export const ReachDevelopers: React.FC = () => {
       </Button>
 
       {open && (
-        <div className="absolute right-0 mt-2 w-56 rounded-lg border border-border bg-card shadow-lg z-50" role="menu">
-          <div className="px-3 py-2 border-b border-border">
-            <p className="text-xs font-medium text-foreground">Reach Developers</p>
+        <div className="absolute right-0 mt-2 w-60 rounded-lg border border-border bg-card shadow-xl z-50" role="menu"
+          style={{ boxShadow: "0 8px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04)" }}
+        >
+          <div className="px-3 py-2.5 border-b border-border"
+            style={{ background: "linear-gradient(135deg, rgba(236,72,153,0.12) 0%, rgba(139,92,246,0.08) 100%)" }}
+          >
+            <p className="text-xs font-semibold" style={{ color: "#e879f9", letterSpacing: "0.06em" }}>Reach Developers</p>
             <p className="text-[0.65rem] text-muted-foreground mt-0.5">
               We&apos;d love to hear from you
             </p>
           </div>
           <div className="py-1">
-            {options.map(({ label, icon: Icon, href }) => (
+            {options.map(({ label, icon: Icon, href, color, bg }) => (
               <a
                 key={label}
                 href={href}
                 target="_blank"
                 rel="noopener noreferrer"
                 role="menuitem"
-                className="flex items-center gap-2.5 px-3 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/50 transition-colors"
+                className="flex items-center gap-2.5 px-3 py-2 text-xs transition-colors"
+                style={{ color: "var(--muted-foreground)" }}
+                onMouseEnter={(e) => {
+                  (e.currentTarget as HTMLAnchorElement).style.background = bg;
+                  (e.currentTarget as HTMLAnchorElement).style.color = color;
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLAnchorElement).style.background = "";
+                  (e.currentTarget as HTMLAnchorElement).style.color = "";
+                }}
                 onClick={close}
               >
-                <Icon className="h-3.5 w-3.5 flex-shrink-0" />
+                <Icon className="h-3.5 w-3.5 flex-shrink-0" style={{ color }} />
                 {label}
               </a>
             ))}
           </div>
-          <div className="px-3 py-2 border-t border-border">
+          <div className="px-3 py-2 border-t border-border" style={{ background: "rgba(0,0,0,0.2)" }}>
             <p className="text-[0.65rem] text-muted-foreground">
               or email{" "}
               <a
                 href={`mailto:${CONTACT_EMAIL}`}
-                className="text-primary hover:text-primary/80 transition-colors"
+                className="transition-colors"
+                style={{ color: "#e879f9" }}
+                onMouseEnter={(e) => ((e.currentTarget as HTMLAnchorElement).style.opacity = "0.75")}
+                onMouseLeave={(e) => ((e.currentTarget as HTMLAnchorElement).style.opacity = "1")}
               >
                 {CONTACT_EMAIL}
               </a>

package/.next/standalone/lib/atomic-write.ts

@@ -0,0 +1,67 @@
+/**
+ * Shared atomic-write helper for JSON files we want crash-safe.
+ *
+ * Replaces two near-identical implementations in `lib/auth/auth-store.ts`
+ * and `src/audit/dashboard-cache.ts`. Promoted to a shared module so the
+ * "temp file → chmod → rename → reassert perms" dance is in one place;
+ * the alternative is more drift like the prior PR where dashboard-cache
+ * shipped the non-atomic plain `writeFileSync` path.
+ *
+ * Contract:
+ *  - Concurrent writers can race on the rename, but neither observer
+ *    sees a half-written file.
+ *  - `mode` (default 0o600) is enforced on both the temp and final paths.
+ *  - Parent directory is created with the same `mode` masked to 0o700
+ *    if it doesn't exist.
+ *  - Throws on hard failure; caller decides whether to swallow or surface.
+ */
+import {
+  chmodSync,
+  existsSync,
+  mkdirSync,
+  renameSync,
+  rmSync,
+  statSync,
+  writeFileSync,
+} from "node:fs";
+import { dirname } from "node:path";
+import { randomBytes } from "node:crypto";
+
+export interface WriteJsonOptions {
+  /** Permission mode for the final file (default 0o600). */
+  mode?: number;
+  /** Permission mode used when creating the parent dir (default 0o700). */
+  dirMode?: number;
+}
+
+export function writeJsonAtomically(
+  filePath: string,
+  value: unknown,
+  opts: WriteJsonOptions = {},
+): void {
+  const mode = opts.mode ?? 0o600;
+  const dirMode = opts.dirMode ?? 0o700;
+  const dir = dirname(filePath);
+  if (!existsSync(dir)) mkdirSync(dir, { recursive: true, mode: dirMode });
+  const tmp = `${filePath}.${process.pid}.${randomBytes(6).toString("hex")}.tmp`;
+  try {
+    writeFileSync(tmp, JSON.stringify(value, null, 2), { mode });
+    try {
+      if ((statSync(tmp).mode & 0o077) !== 0) chmodSync(tmp, mode);
+    } catch {
+      // best-effort
+    }
+    renameSync(tmp, filePath);
+    // Re-assert perms on the final path — rename preserves the temp's
+    // mode, but a pre-existing file's inode could have been observed in
+    // the gap.
+    try {
+      if ((statSync(filePath).mode & 0o077) !== 0) chmodSync(filePath, mode);
+    } catch {
+      // best-effort
+    }
+  } catch (err) {
+    try { rmSync(tmp, { force: true }); } catch { /* ignore */ }
+    throw err;
+  }
+}