From 74b3e47c19801b7774c752ffe7d570b3e6079088 Mon Sep 17 00:00:00 2001
From: austinchima <austinchima515@gmail.com>
Date: Wed, 1 Jul 2026 23:05:40 -0300
Subject: [PATCH 1/2] feat: update dependencies and enhance accessibility in UI
 components

- Added Microsoft.OpenApi package to Precept.Api project.
- Updated font links in index.html to include Fira Code.
- Added @types/react to package.json and package-lock.json for improved TypeScript support.
- Enhanced accessibility by adding aria-labels and titles to various input elements across AppTracker, Settings, and StoryBank pages.
- Updated button elements to include type attributes for better semantics and accessibility.

These changes improve the overall functionality and user experience of the application.
---
 .hintrc                                       |  5 +++++
 Precept.Api/Precept.Api.csproj                |  1 +
 Precept.Web/index.html                        |  2 +-
 Precept.Web/package-lock.json                 | 18 +++++++++++++++
 Precept.Web/package.json                      |  1 +
 .../src/components/ui/8bit-not-found1.tsx     |  2 +-
 Precept.Web/src/index.css                     |  4 ++--
 Precept.Web/src/pages/AppTracker.tsx          | 17 ++++++++------
 Precept.Web/src/pages/Dashboard.tsx           |  1 +
 Precept.Web/src/pages/HomePage.tsx            |  6 +++--
 Precept.Web/src/pages/Landing.tsx             | 22 +++++++++++++------
 Precept.Web/src/pages/Settings.tsx            | 10 ++++-----
 Precept.Web/src/pages/StoryBank.tsx           | 16 +++++++-------
 13 files changed, 72 insertions(+), 33 deletions(-)
 create mode 100644 .hintrc

diff --git a/.hintrc b/.hintrc
new file mode 100644
index 0000000..aa8de6b
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "development"
+  ]
+}
\ No newline at end of file
diff --git a/Precept.Api/Precept.Api.csproj b/Precept.Api/Precept.Api.csproj
index e700cdf..e4d2419 100644
--- a/Precept.Api/Precept.Api.csproj
+++ b/Precept.Api/Precept.Api.csproj
@@ -12,6 +12,7 @@
     <PackageReference Include="Microsoft.AspNetCore.Identity.UI" Version="10.0.8" />
     <PackageReference Include="DotNetEnv" Version="3.1.1" />
     <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="10.0.8" />
+    <PackageReference Include="Microsoft.OpenApi" Version="2.9.0" />
     <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="10.0.8">
       <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
       <PrivateAssets>all</PrivateAssets>
diff --git a/Precept.Web/index.html b/Precept.Web/index.html
index 88fca2c..240e9b6 100644
--- a/Precept.Web/index.html
+++ b/Precept.Web/index.html
@@ -6,7 +6,7 @@
     <meta name="description" content="Precept — Job Hunt OS. Master your stories, track your pipeline, and close skill gaps with precision." />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Geist:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Fira+Code:wght@400;500;600&display=swap" rel="stylesheet" />
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
     <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet" />
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
diff --git a/Precept.Web/package-lock.json b/Precept.Web/package-lock.json
index 059bed2..c17dcf0 100644
--- a/Precept.Web/package-lock.json
+++ b/Precept.Web/package-lock.json
@@ -35,6 +35,7 @@
         "@types/canvas-confetti": "^1.9.0",
         "@types/express": "^4.17.21",
         "@types/node": "^22.14.0",
+        "@types/react": "^19.2.17",
         "autoprefixer": "^10.4.21",
         "esbuild": "^0.25.0",
         "tailwindcss": "^4.1.14",
@@ -1672,6 +1673,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/react": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
+      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
     "node_modules/@types/send": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
@@ -2002,6 +2013,13 @@
       "integrity": "sha512-NXdYc3dLr47pBkpUCHtKSwIOQXLVn8dZEuywboCOJY/osA0wFSLlSawr3KN8qXJEyX66FcONTH8EIlVuK0yyFA==",
       "license": "MIT"
     },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "devOptional": true,
+      "license": "MIT"
+    },
     "node_modules/d3-array": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
diff --git a/Precept.Web/package.json b/Precept.Web/package.json
index 8cd2694..2aa9ea6 100644
--- a/Precept.Web/package.json
+++ b/Precept.Web/package.json
@@ -38,6 +38,7 @@
     "@types/canvas-confetti": "^1.9.0",
     "@types/express": "^4.17.21",
     "@types/node": "^22.14.0",
+    "@types/react": "^19.2.17",
     "autoprefixer": "^10.4.21",
     "esbuild": "^0.25.0",
     "tailwindcss": "^4.1.14",
diff --git a/Precept.Web/src/components/ui/8bit-not-found1.tsx b/Precept.Web/src/components/ui/8bit-not-found1.tsx
index 5673bc8..47cca35 100644
--- a/Precept.Web/src/components/ui/8bit-not-found1.tsx
+++ b/Precept.Web/src/components/ui/8bit-not-found1.tsx
@@ -139,7 +139,7 @@ export default function NotFound1({
           <a
             href="https://github.com/austinchima/Precept"
             target="_blank"
-            rel="noreferrer"
+            rel="noopener noreferrer"
             data-testid="not-found-secondary-cta"
             className="inline-flex items-center gap-2 rounded-full border px-6 py-3.5 font-mono text-[12px] font-semibold uppercase tracking-[0.16em]"
             style={{
diff --git a/Precept.Web/src/index.css b/Precept.Web/src/index.css
index b60efb3..72ee7d4 100644
--- a/Precept.Web/src/index.css
+++ b/Precept.Web/src/index.css
@@ -464,8 +464,8 @@
     font-family: "Geist", "Inter", ui-sans-serif, system-ui, sans-serif;
   }
   .font-editorial {
-    font-family: "Instrument Serif", "Times New Roman", serif;
-    font-style: italic;
+    font-family: "Fira Code", "JetBrains Mono", ui-monospace, monospace;
+    font-style: normal;
     letter-spacing: -0.01em;
   }
   /* IDE-style dot grid for landing backgrounds */
diff --git a/Precept.Web/src/pages/AppTracker.tsx b/Precept.Web/src/pages/AppTracker.tsx
index 063b551..0149012 100644
--- a/Precept.Web/src/pages/AppTracker.tsx
+++ b/Precept.Web/src/pages/AppTracker.tsx
@@ -279,6 +279,8 @@ export default function AppTracker() {
             ].map((opt) => (
               <button
                 key={opt.v}
+                type="button"
+                aria-label={`Switch to ${opt.v} view`}
                 onClick={() => setView(opt.v)}
                 data-testid={`view-${opt.v}`}
                 className="min-h-[36px] min-w-[40px] rounded-lg flex items-center justify-center transition-all cursor-pointer"
@@ -292,6 +294,7 @@ export default function AppTracker() {
             ))}
           </div>
           <button
+            type="button"
             onClick={handleOpenCreateModal}
             data-testid="apptracker-new-btn"
             className="group inline-flex items-center gap-2 rounded-full px-5 py-2.5 font-mono text-[11.5px] font-semibold uppercase tracking-[0.16em] cursor-pointer"
@@ -489,7 +492,7 @@ export default function AppTracker() {
               <div className="flex items-center gap-3">
                 <Eyebrow color={selectedApp ? C.amber : C.teal}>{selectedApp ? 'Edit pipeline' : 'New pipeline'}</Eyebrow>
               </div>
-              <button onClick={() => setIsModalOpen(false)} className="min-h-[40px] min-w-[40px] rounded-lg grid place-items-center transition-colors cursor-pointer"
+              <button type="button" aria-label="Close modal" onClick={() => setIsModalOpen(false)} className="min-h-[40px] min-w-[40px] rounded-lg grid place-items-center transition-colors cursor-pointer"
                 style={{ color: C.inkDim }}
                 onMouseEnter={(e) => { e.currentTarget.style.color = C.ink; e.currentTarget.style.background = 'rgba(255,255,255,0.04)'; }}
                 onMouseLeave={(e) => { e.currentTarget.style.color = C.inkDim; e.currentTarget.style.background = 'transparent'; }}
@@ -505,17 +508,17 @@ export default function AppTracker() {
                     <input type="text" value={companyName} onChange={(e) => setCompanyName(e.target.value)} placeholder="e.g. Stripe" required style={inputStyle} />
                   </Field>
                   <Field label="Role">
-                    <input type="text" value={roleTitle} onChange={(e) => setRoleTitle(e.target.value)} placeholder="e.g. Senior Backend Engineer" required style={inputStyle} />
+                    <input title="Role Title" type="text" value={roleTitle} onChange={(e) => setRoleTitle(e.target.value)} placeholder="e.g. Senior Backend Engineer" required style={inputStyle} />
                   </Field>
                 </div>
                 <div className="grid grid-cols-2 gap-4">
                   <Field label="Status">
-                    <select value={status} onChange={(e) => setStatus(e.target.value as ApplicationStatus)} style={inputStyle}>
+                    <select title="Application Status" value={status} onChange={(e) => setStatus(e.target.value as ApplicationStatus)} style={inputStyle}>
                       {COLUMNS.map((c) => <option key={c} value={c} style={{ background: C.bg1, color: C.ink }}>{COLUMN_LABELS[c]}</option>)}
                     </select>
                   </Field>
                   <Field label="Salary (optional)">
-                    <input type="text" value={salaryRange} onChange={(e) => setSalaryRange(e.target.value)} placeholder="$120k – $140k" style={inputStyle} />
+                    <input title="Salary Range" type="text" value={salaryRange} onChange={(e) => setSalaryRange(e.target.value)} placeholder="$120k – $140k" style={inputStyle} />
                   </Field>
                 </div>
                 <div className="grid grid-cols-3 gap-4">
@@ -530,11 +533,11 @@ export default function AppTracker() {
                   </Field>
                 </div>
                 <div className="grid grid-cols-2 gap-4">
-                  <Field label="Date applied"><input type="date" value={dateApplied} onChange={(e) => setDateApplied(e.target.value)} style={inputStyle} /></Field>
-                  <Field label="Last contact"><input type="date" value={dateLastContact} onChange={(e) => setDateLastContact(e.target.value)} style={inputStyle} /></Field>
+                  <Field label="Date applied"><input title="Date Applied" type="date" value={dateApplied} onChange={(e) => setDateApplied(e.target.value)} style={inputStyle} /></Field>
+                  <Field label="Last contact"><input title="Last Contact Date" type="date" value={dateLastContact} onChange={(e) => setDateLastContact(e.target.value)} style={inputStyle} /></Field>
                 </div>
                 <Field label="Linked JD">
-                  <select value={jobDescriptionId} onChange={(e) => setJobDescriptionId(e.target.value)} style={inputStyle}>
+                  <select title="Linked Job Description" value={jobDescriptionId} onChange={(e) => setJobDescriptionId(e.target.value)} style={inputStyle}>
                     <option value="" style={{ background: C.bg1 }}>— No linked spec —</option>
                     {jds.map((jd) => (
                       <option key={jd.id} value={jd.id} style={{ background: C.bg1 }}>{jd.companyName} — {jd.roleTitle}</option>
diff --git a/Precept.Web/src/pages/Dashboard.tsx b/Precept.Web/src/pages/Dashboard.tsx
index 3056145..aa02387 100644
--- a/Precept.Web/src/pages/Dashboard.tsx
+++ b/Precept.Web/src/pages/Dashboard.tsx
@@ -450,6 +450,7 @@ export default function Dashboard() {
                       {/* Interactive Quick Status Changer */}
                       <div className="relative shrink-0" onClick={(e) => e.stopPropagation()}>
                         <select
+                          title="Select Application Status"
                           value={a.status}
                           onChange={(e) => handleUpdateAppStatus(a.id, e.target.value)}
                           className="appearance-none rounded-full px-3 py-1 font-mono text-[10px] uppercase tracking-wider font-semibold cursor-pointer pr-6 focus:outline-none transition-all"
diff --git a/Precept.Web/src/pages/HomePage.tsx b/Precept.Web/src/pages/HomePage.tsx
index 0275145..f8ca28c 100644
--- a/Precept.Web/src/pages/HomePage.tsx
+++ b/Precept.Web/src/pages/HomePage.tsx
@@ -138,8 +138,10 @@ export default function HomePage() {
 
           <div className="flex items-center gap-3">
             <button onClick={() => navigate('/login')} data-testid="home-signin-btn"
-              className="hidden sm:inline-flex font-mono text-[11.5px] uppercase tracking-[0.16em] px-3 min-h-[44px] items-center cursor-pointer transition-colors"
-              style={{ color: C.inkDim }}>
+              className="hidden sm:inline-flex cursor-pointer items-center rounded-full border border-transparent px-3.5 min-h-[36px] font-mono text-[11.5px] uppercase tracking-[0.16em] transition-all hover:border-teal-400/30 hover:bg-white/10 hover:shadow-[0_0_15px_rgba(45,212,191,0.2)]"
+              style={{ color: C.inkDim }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = C.ink)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = C.inkDim)}>
               Sign in
             </button>
             <button onClick={handleGetStarted} data-testid="home-cta-initialize"
diff --git a/Precept.Web/src/pages/Landing.tsx b/Precept.Web/src/pages/Landing.tsx
index f0b8443..0d32c28 100644
--- a/Precept.Web/src/pages/Landing.tsx
+++ b/Precept.Web/src/pages/Landing.tsx
@@ -140,7 +140,7 @@ function Navbar() {
             <a
               href="https://github.com/austinchima/Precept"
               target="_blank"
-              rel="noreferrer"
+              rel="noopener noreferrer"
               data-testid="nav-github-link"
               className="flex items-center gap-1.5 font-mono text-[12px] uppercase tracking-[0.14em] transition-colors"
               style={{ color: c.inkDim }}
@@ -150,14 +150,18 @@ function Navbar() {
               <i className="fa-brands fa-github" /> GitHub
             </a>
             <button
+              type="button"
               data-testid="nav-signin-btn"
               onClick={() => goLogin()}
-              className="font-mono text-[12px] uppercase tracking-[0.14em] transition-colors"
+              className="cursor-pointer rounded-full border border-transparent px-3.5 py-1.5 font-mono text-[12px] uppercase tracking-[0.14em] transition-all hover:border-teal-400/30 hover:bg-white/10 hover:shadow-[0_0_15px_rgba(45,212,191,0.2)]"
               style={{ color: c.inkDim }}
+              onMouseEnter={(e) => (e.currentTarget.style.color = c.ink)}
+              onMouseLeave={(e) => (e.currentTarget.style.color = c.inkDim)}
             >
               Sign in
             </button>
             <button
+              type="button"
               data-testid="nav-cta-btn"
               onClick={() => goLogin("signup")}
               className="flex items-center gap-1.5 rounded-full px-4 py-2 font-mono text-[12px] uppercase tracking-[0.14em] transition-colors cursor-pointer"
@@ -173,6 +177,7 @@ function Navbar() {
 
           {/* Mobile toggle */}
           <button
+            type="button"
             data-testid="mobile-menu-toggle"
             className="flex h-9 w-9 items-center justify-center rounded-md md:hidden"
             style={{ color: c.ink, background: c.hair }}
@@ -203,6 +208,7 @@ function Navbar() {
             </a>
           ))}
           <button
+            type="button"
             onClick={() => goLogin("signup")}
             className="mt-auto mb-12 w-full rounded-full px-6 py-3 font-mono text-sm uppercase tracking-widest"
             style={{ background: c.ink, color: c.bg0 }}
@@ -245,7 +251,7 @@ function Hero() {
         tl.from(".hero-eyebrow",   { opacity: 0, y: 16, duration: 0.6 })
           .from(".hero-headline",  { opacity: 0, y: 28, duration: 0.85 }, "-=0.3")
           .from(".hero-sub",       { opacity: 0, y: 22, duration: 0.7 },  "-=0.55")
-          .from(".hero-ctas > *",  { opacity: 0, y: 16, duration: 0.55, stagger: 0.08 }, "-=0.45")
+          .from(".hero-ctas > *",  { opacity: 0, y: 16, duration: 0.55, stagger: 0.08, clearProps: "transform" }, "-=0.45")
           .from(".hero-mock",      { opacity: 0, y: 40, scale: 0.97, duration: 1.0 }, "-=0.4")
           .from(".hero-techbar > *", { opacity: 0, y: 10, duration: 0.5, stagger: 0.05 }, "-=0.5");
 
@@ -317,9 +323,10 @@ function Hero() {
         {/* CTAs */}
         <div className="hero-ctas mt-9 flex flex-wrap items-center justify-center gap-3">
           <button
+            type="button"
             data-testid="hero-primary-cta"
             onClick={() => navigate("/login", { state: { mode: "signup" } })}
-            className="gsap-magnetic group inline-flex items-center gap-2 rounded-full border border-transparent px-6 py-3.5 font-mono text-[12.5px] font-semibold uppercase leading-none tracking-[0.16em] transition-transform"
+            className="gsap-magnetic group inline-flex items-center gap-2 rounded-full border border-transparent px-6 py-3.5 font-mono text-[12.5px] font-semibold uppercase leading-none tracking-[0.16em] transition-colors"
             style={{
               background: c.ink,
               color: c.bg0,
@@ -333,7 +340,7 @@ function Hero() {
             data-testid="hero-github-cta"
             href="https://github.com/austinchima/Precept"
             target="_blank"
-            rel="noreferrer"
+            rel="noopener noreferrer"
             className="gsap-magnetic inline-flex items-center gap-2 rounded-full border px-6 py-3.5 font-mono text-[12.5px] font-semibold uppercase leading-none tracking-[0.16em] transition-colors"
             style={{
               background: "rgba(255,255,255,0.025)",
@@ -1322,6 +1329,7 @@ function FinalCTA() {
 
             <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
               <button
+                type="button"
                 data-testid="final-cta-primary"
                 onClick={() => navigate("/login", { state: { mode: "signup" } })}
                 className="gsap-magnetic group inline-flex items-center gap-2 rounded-full px-7 py-4 font-mono text-[12.5px] font-semibold uppercase tracking-[0.16em]"
@@ -1337,7 +1345,7 @@ function FinalCTA() {
               <a
                 href="https://github.com/austinchima/Precept"
                 target="_blank"
-                rel="noreferrer"
+                rel="noopener noreferrer"
                 data-testid="final-cta-github"
                 className="inline-flex items-center gap-2 font-mono text-[12px] uppercase tracking-[0.16em] transition-colors"
                 style={{ color: c.inkDim }}
@@ -1411,7 +1419,7 @@ function Footer() {
                 ["https://github.com/austinchima/Precept/blob/master/CHANGELOG.md", "Changelog"],
               ].map(([h, l]) => (
                 <li key={l}>
-                  <a href={h} target="_blank" rel="noreferrer" className="transition-colors" style={{ color: c.inkDim }} onMouseEnter={e => e.currentTarget.style.color = c.ink} onMouseLeave={e => e.currentTarget.style.color = c.inkDim}>{l}</a>
+                  <a href={h} target="_blank" rel="noopener noreferrer" className="transition-colors" style={{ color: c.inkDim }} onMouseEnter={e => e.currentTarget.style.color = c.ink} onMouseLeave={e => e.currentTarget.style.color = c.inkDim}>{l}</a>
                 </li>
               ))}
             </ul>
diff --git a/Precept.Web/src/pages/Settings.tsx b/Precept.Web/src/pages/Settings.tsx
index 762a86f..d241495 100644
--- a/Precept.Web/src/pages/Settings.tsx
+++ b/Precept.Web/src/pages/Settings.tsx
@@ -264,10 +264,10 @@ export default function Settings() {
             <form onSubmit={handleUpdateProfile} className="space-y-4">
               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 <Field label="First name">
-                  <input type="text" value={profileFirstName} onChange={(e) => setProfileFirstName(e.target.value)} style={inputStyle} required data-testid="settings-firstname" />
+                  <input title="First Name" type="text" value={profileFirstName} onChange={(e) => setProfileFirstName(e.target.value)} style={inputStyle} required data-testid="settings-firstname" />
                 </Field>
                 <Field label="Last name">
-                  <input type="text" value={profileLastName} onChange={(e) => setProfileLastName(e.target.value)} style={inputStyle} required data-testid="settings-lastname" />
+                  <input title="Last Name" type="text" value={profileLastName} onChange={(e) => setProfileLastName(e.target.value)} style={inputStyle} required data-testid="settings-lastname" />
                 </Field>
               </div>
               <button type="submit" disabled={isUpdatingProfile} data-testid="settings-save-profile"
@@ -286,16 +286,16 @@ export default function Settings() {
               <form onSubmit={handleSubmitSkill} className="space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                   <Field label="Name">
-                    <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. React, Docker" style={inputStyle} required data-testid="skill-name" />
+                    <input title="Skill Name" type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. React, Docker" style={inputStyle} required data-testid="skill-name" />
                   </Field>
                   <Field label="Category">
-                    <select value={category} onChange={(e) => setCategory(e.target.value)} style={inputStyle} data-testid="skill-category">
+                    <select title="Skill Category" value={category} onChange={(e) => setCategory(e.target.value)} style={inputStyle} data-testid="skill-category">
                       <option value="" style={{ background: C.bg1 }}>— Select category —</option>
                       {SKILL_CATEGORIES.map((c) => <option key={c} value={c} style={{ background: C.bg1 }}>{c}</option>)}
                     </select>
                   </Field>
                   <Field label="Proficiency">
-                    <select value={proficiency} onChange={(e) => setProficiency(e.target.value as SkillProficiency)} style={inputStyle} data-testid="skill-proficiency">
+                    <select title="Skill Proficiency" value={proficiency} onChange={(e) => setProficiency(e.target.value as SkillProficiency)} style={inputStyle} data-testid="skill-proficiency">
                       {(['Beginner', 'Intermediate', 'Advanced', 'Expert'] as SkillProficiency[]).map((p) => (
                         <option key={p} value={p} style={{ background: C.bg1 }}>{p}</option>
                       ))}
diff --git a/Precept.Web/src/pages/StoryBank.tsx b/Precept.Web/src/pages/StoryBank.tsx
index 4530bfe..4bb2d45 100644
--- a/Precept.Web/src/pages/StoryBank.tsx
+++ b/Precept.Web/src/pages/StoryBank.tsx
@@ -210,7 +210,7 @@ export default function StoryBank() {
           <div className="flex flex-wrap justify-between items-center gap-3 opacity-0 animate-fade-in-up delay-100">
             <div className="relative">
               <FilterIcon size={12} style={{ color: C.inkMute }} className="absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
-              <select value={filter} onChange={(e) => setFilter(e.target.value as 'All' | StoryCategory)} data-testid="storybank-filter"
+              <select title="Story Category Filter" value={filter} onChange={(e) => setFilter(e.target.value as 'All' | StoryCategory)} data-testid="storybank-filter"
                 className="appearance-none pl-8 pr-8 py-2 rounded-full font-mono text-[11px] uppercase tracking-[0.14em] cursor-pointer transition-colors"
                 style={{ background: 'rgba(255,255,255,0.025)', border: `1px solid ${C.hair}`, color: C.inkDim, outline: 'none' }}
               >
@@ -311,7 +311,7 @@ export default function StoryBank() {
               <div className="w-full max-w-[680px] max-h-[92vh] flex flex-col relative opacity-0 animate-fade-in-up" style={{ ...cardStyle(), borderRadius: 22 }}>
                 <div className="flex items-center justify-between p-5" style={{ borderBottom: `1px solid ${C.hair}` }}>
                   <Eyebrow color={editingStory ? C.amber : C.teal}>{editingStory ? 'Edit snippet' : 'New snippet'}</Eyebrow>
-                  <button onClick={() => setIsModalOpen(false)} className="min-h-[40px] min-w-[40px] rounded-lg grid place-items-center" style={{ color: C.inkDim }}>
+                  <button title="Close Modal" onClick={() => setIsModalOpen(false)} className="min-h-[40px] min-w-[40px] rounded-lg grid place-items-center" style={{ color: C.inkDim }}>
                     <X size={16} />
                   </button>
                 </div>
@@ -329,13 +329,13 @@ export default function StoryBank() {
                       </div>
                       <div className="space-y-1.5">
                         <label className="font-mono text-[10px] uppercase tracking-[0.18em]" style={{ color: C.inkMute }}>Category</label>
-                        <select value={category} onChange={(e) => setCategory(e.target.value as StoryCategory)} style={inputStyle}>
+                        <select title="Story Category" value={category} onChange={(e) => setCategory(e.target.value as StoryCategory)} style={inputStyle}>
                           {CATEGORIES.slice(1).map((c) => <option key={c} value={c} style={{ background: C.bg1, color: C.ink }}>{formatWord(c)}</option>)}
                         </select>
                       </div>
                       <div className="space-y-1.5">
                         <label className="font-mono text-[10px] uppercase tracking-[0.18em]" style={{ color: C.inkMute }}>Source project</label>
-                        <input type="text" value={sourceProject} onChange={(e) => setSourceProject(e.target.value)} placeholder="e.g. Apollo" style={inputStyle} />
+                        <input title="Source Project" type="text" value={sourceProject} onChange={(e) => setSourceProject(e.target.value)} placeholder="e.g. Apollo" style={inputStyle} />
                       </div>
                     </div>
 
@@ -361,7 +361,7 @@ export default function StoryBank() {
 
                     <div className="space-y-1.5">
                       <label className="font-mono text-[10px] uppercase tracking-[0.18em]" style={{ color: C.inkMute }}>Code snippet</label>
-                      <textarea value={codeSnippet} onChange={(e) => setCodeSnippet(e.target.value)} rows={6} placeholder="// paste primary code block here"
+                      <textarea title="Code Snippet" value={codeSnippet} onChange={(e) => setCodeSnippet(e.target.value)} rows={6} placeholder="// paste primary code block here"
                         style={{ ...inputStyle, background: C.bg0, resize: 'vertical' }} required />
                     </div>
 
@@ -370,19 +370,19 @@ export default function StoryBank() {
                         <label className="font-mono text-[10px] uppercase tracking-[0.18em]" style={{ color: C.inkMute }}>Explanation</label>
                         <span className="font-mono text-[10px]" style={{ color: explanation.length < 50 ? C.rose : C.teal }}>{explanation.length}/50 min</span>
                       </div>
-                      <textarea value={explanation} onChange={(e) => setExplanation(e.target.value)} rows={5}
+                      <textarea title="Explanation" value={explanation} onChange={(e) => setExplanation(e.target.value)} rows={5}
                         placeholder="Why does this exist? Trade-offs?"
                         style={{ ...inputStyle, fontFamily: 'Geist, Inter, sans-serif', resize: 'vertical' }} required />
                     </div>
                   </div>
 
                   <div className="p-4 flex justify-end gap-3 shrink-0" style={{ borderTop: `1px solid ${C.hair}` }}>
-                    <button type="button" onClick={() => setIsModalOpen(false)}
+                    <button type="button" title="Close Modal" onClick={() => setIsModalOpen(false)}
                       className="rounded-full px-4 py-2 font-mono text-[11px] uppercase tracking-[0.16em] cursor-pointer"
                       style={{ background: 'transparent', color: C.inkDim, border: `1px solid ${C.hair2}` }}>
                       Cancel
                     </button>
-                    <button type="submit" disabled={isSubmitting || explanation.length < 50 || !title.trim() || !codeSnippet.trim()}
+                    <button type="submit" title="Submit Form" disabled={isSubmitting || explanation.length < 50 || !title.trim() || !codeSnippet.trim()}
                       className="inline-flex items-center gap-2 rounded-full px-5 py-2 font-mono text-[11px] font-semibold uppercase tracking-[0.16em] cursor-pointer disabled:opacity-60"
                       style={{ background: C.ink, color: C.bg0, boxShadow: `0 0 0 1px ${C.ink}` }}>
                       {isSubmitting && <Loader2 size={12} className="animate-spin" />}

From 58f3f98af82a04716ab87782593e0840559a7bb4 Mon Sep 17 00:00:00 2001
From: austinchima <austinchima515@gmail.com>
Date: Mon, 6 Jul 2026 22:51:56 -0300
Subject: [PATCH 2/2] feat: enhance email validation and normalize input in
 authentication flows

- Added strict email validation using regular expressions to ensure valid email formats across registration, login, and password recovery requests.
- Implemented email normalization to remove whitespace before processing in the AuthController.
- Updated integration tests to cover various invalid email scenarios, ensuring robust error handling.
- Added new dependencies for improved TypeScript support and updated package configurations.

These changes improve the security and user experience of the authentication process.
---
 .gitignore                                    |   1 +
 OWASP-SECURITY-AUDIT.md                       |  96 ----------
 PRECEPT_OVERVIEW.md                           | 168 ++++++++++++++++++
 Precept.Api/Controllers/AuthController.cs     |  13 ++
 Precept.Api/DTOs/AuthDtos.cs                  |  16 ++
 .../Integration/AuthEndpointTests.cs          |  25 +++
 Precept.Web/package-lock.json                 |  11 ++
 Precept.Web/package.json                      |   1 +
 Precept.Web/src/api.ts                        |  34 +++-
 Precept.Web/src/components/Layout.tsx         |  22 ++-
 .../stories/BehavioralStoryForm.tsx           |   4 +-
 Precept.Web/src/components/ui/Toast.tsx       |   3 +-
 .../components/ui/radial-orbital-timeline.tsx |   2 +-
 Precept.Web/src/components/ui/sign-in.tsx     |  37 ++--
 Precept.Web/src/pages/Dashboard.tsx           |   3 +-
 Precept.Web/src/pages/HomePage.tsx            |  10 +-
 Precept.Web/src/pages/Landing.tsx             |  60 ++-----
 Precept.Web/src/pages/LoginPage.tsx           |  16 +-
 Precept.Web/src/pages/StoryBank.tsx           |   6 +-
 Precept.Web/tsconfig.json                     |   4 +-
 memory/PRD.md                                 |  66 -------
 21 files changed, 336 insertions(+), 262 deletions(-)
 delete mode 100644 OWASP-SECURITY-AUDIT.md
 create mode 100644 PRECEPT_OVERVIEW.md
 delete mode 100644 memory/PRD.md

diff --git a/.gitignore b/.gitignore
index 5db41f9..679f847 100644
--- a/.gitignore
+++ b/.gitignore
@@ -101,3 +101,4 @@ credentials.json
 *.pem
 *.key
 .credentials
+*.hintrc
diff --git a/OWASP-SECURITY-AUDIT.md b/OWASP-SECURITY-AUDIT.md
deleted file mode 100644
index 65bf030..0000000
--- a/OWASP-SECURITY-AUDIT.md
+++ /dev/null
@@ -1,96 +0,0 @@
-# OWASP Top 10 Security Review Report — Precept
-
-## Review Summary
-- **Scope:** Precept.Api (ASP.NET Core 10 Web API) + Precept.Web (React/Vite frontend) + Docker Compose + CI/CD
-- **Date:** 2026-06-26
-- **Risk summary:** RED High 0 | YELLOW Medium 0 (all fixed) | GREEN Low 0 (all fixed) | PASS 3
-
----
-
-## ✅ What Was Fixed
-
-### A01: Broken Access Control — PASS (No findings)
-- Every API endpoint (except `SystemController.Ping` and `TestimonialController.GetPublicTestimonials`) enforces `[Authorize]`.
-- All controllers extract the `userId` from the JWT claims (`NameIdentifier` / `sub`) and pass it to the service layer.
-- Services scope every database query to the authenticated user (`WHERE a.UserId == userId`).
-- **Defense-in-depth:** `PreceptDbContext` applies global query filters (`HasQueryFilter`) so that even if a service forgets to filter by user, the database layer will still enforce isolation.
-
-### A02: Cryptographic Failures — PASS
-- Passwords hashed with ASP.NET Identity (PBKDF2).
-- JWT uses HMAC-SHA256 with secret from environment variable.
-- Refresh tokens are SHA-256 hashed before storage.
-
-### A03: Injection — PASS (No findings)
-- All database queries use Entity Framework Core with LINQ expressions — no string concatenation or raw SQL.
-- `SearchService` uses parameterized `Contains` queries (translated to `LIKE` by EF Core).
-- No `Process.Start`, `os.system`, or shell command execution with user input.
-- No server-side template rendering; the API returns JSON and the React frontend auto-escapes output.
-
-### A04: Insecure Design — FIXED
-- **Rate limiting added** (`Program.cs`): `auth` policy (10 req/min) and `general` policy (100 req/min) with `[EnableRateLimiting]` on all controllers.
-- **Password reset flow added**: `POST /api/auth/forgot-password` and `POST /api/auth/reset-password` endpoints.
-- **Input validation added**: `TestimonialDto` now has `[StringLength]` limits (Name 100, Handle 50, Text 2000, AvatarSrc 500).
-
-### A05: Security Misconfiguration — FIXED
-- **Error leakage fixed**: `exception.Message` only returned in **Development**; production gets generic error message.
-- **CORS split**: `AllowViteDev` for Development only; `Production` policy with restricted origins/headers/methods for non-dev.
-- **Security headers added**: Middleware injects `X-Frame-Options`, `X-Content-Type-Options`, `Referrer-Policy`, `CSP`, `X-XSS-Protection`, `Permissions-Policy`.
-- **`AllowedHosts` fixed**: Development uses `localhost;127.0.0.1`; Production uses `your-production-domain.com`.
-- **Migrations gated**: `Database.Migrate()` only runs when `IsDevelopment()` OR `RunMigrationsOnStartup: true`.
-- **Docker Compose secured**: Credentials now use `${VAR:-default}` syntax with dev defaults; exposed port 5432 marked as **DEV ONLY**.
-
-### A06: Vulnerable and Outdated Components — FIXED
-- **CI dependency scanning added**: `dotnet list package --vulnerable --include-transitive` for NuGet.
-- **npm audit added**: New `npm-audit` job in CI with `npm audit --audit-level=moderate` + `npm run build`.
-
-### A07: Identification and Authentication Failures — FIXED
-- **Email verification added**: `POST /api/auth/verify-email` endpoint. Registration generates confirmation token (logged in dev for testing).
-- **Password reset added**: `POST /api/auth/forgot-password` generates reset token (logged in dev for testing).
-- **Rate limiting on auth**: All auth endpoints (`register`, `login`, `refresh`, `revoke`, `forgot-password`, `reset-password`, `verify-email`, `me`, `profile`) now have `[EnableRateLimiting("auth")]`.
-- **localStorage warning**: `api.ts` has OWASP comment documenting the XSS risk and migration path to http-only cookies.
-
-### A08: Software and Data Integrity Failures — PASS
-- No unsafe deserialization (`pickle` etc.).
-- No CDN scripts requiring SRI (all bundled via Vite).
-- No CI artifact signing (defense-in-depth gap, low priority).
-
-### A09: Security Logging and Monitoring Failures — PASS
-- Serilog structured logging with file rotation.
-- Auth events logged (login, register, token rotation, reuse detection).
-- No centralized audit logging for data changes (defense-in-depth gap, low priority).
-- No alerting for anomalous behavior (defense-in-depth gap, low priority).
-
-### A10: Server-Side Request Forgery (SSRF) — PASS (No findings)
-- No controller accepts user-supplied URLs and makes server-side HTTP requests.
-- No webhook registration, image fetching, URL preview, or server-side proxy functionality exists.
-
----
-
-## 🧪 Dev-Friendly Defaults Preserved
-
-All fixes maintain zero breaking changes for local development:
-- `dotnet run` still auto-migrates (via `appsettings.json` `RunMigrationsOnStartup: true`)
-- Vite dev server still connects via CORS (`AllowViteDev` policy in Development)
-- Tokens still stored in `localStorage` (with documented OWASP warning and migration path)
-- All new endpoints (forgot-password, reset-password, verify-email) log tokens to console for easy testing without an email provider
-
----
-
-## 🚀 Production Checklist (Before Deploying)
-
-Update these **3 values** before deploying to production:
-
-1. **`appsettings.Production.json`** → `AllowedHosts`: Replace `your-production-domain.com` with your actual domain
-2. **`Program.cs`** → `Production` CORS policy: Replace `https://your-production-domain.com` with your actual domain
-3. **`docker-compose.yml`** → Remove the `ports: - "5432:5432"` block from the `db` service
-
-**Optional but recommended:**
-- Configure an email service (SendGrid/SES) and replace the `// TODO` email comments in `AuthController`
-- Migrate access tokens from `localStorage` to http-only cookies (steps documented in `api.ts`)
-- Add `Audit.NET` or `EntityFrameworkCore.Triggers` for centralized audit logging
-- Integrate with a SIEM for anomalous behavior alerting
-- Enable GitHub commit signing and `cosign` for Docker image signing
-
----
-
-> **Disclaimer:** This audit is based on static code analysis and the OWASP Top 10 2021 checklist. It does not replace dynamic application security testing (DAST), penetration testing, or a full threat model review. For high-security deployments, combine this review with automated scanning (OWASP ZAP, Burp Suite) and a manual penetration test.
diff --git a/PRECEPT_OVERVIEW.md b/PRECEPT_OVERVIEW.md
new file mode 100644
index 0000000..f6c0ee4
--- /dev/null
+++ b/PRECEPT_OVERVIEW.md
@@ -0,0 +1,168 @@
+# Precept
+
+**A career command center for software engineers — story bank, drill engine, and job pipeline tracker.**
+
+Precept is a self-hostable web application that helps software engineers prepare for interviews and run their job hunt as a structured project rather than a graveyard of browser tabs. It is developer-first: dark-mode, monospace-leaning, keyboard-shoppable, with a real security posture and no telemetry.
+
+> **Current status:** R1 is shipped — full-stack, secure, containerized, and CI-green. R2 (AI-powered interview intelligence) is in design.
+
+---
+
+## What Precept Does
+
+Interview prep for engineers is usually fragmented across a Google Doc of STAR stories, a spreadsheet of applications, twenty open JD tabs, and a vague mental model of "things I have built." Precept collapses that into one application with three explicit jobs:
+
+### 1. Bank Your Stories
+Capture both technical and behavioral interview material so you walk into every round with a written corpus to draw from.
+
+- **Technical Story Bank** — Code snippets + written explanations, tagged across 12 engineering domains: `Auth`, `Database`, `AI`, `ML`, `DevOps`, `Frontend`, `Backend`, `SystemDesign`, `Security`, `Testing`, `Cloud`, `Architecture`. Each story carries a `ConfidenceLevel`.
+- **Behavioral Story Bank** — STAR-method (Situation / Task / Action / Result) narratives with free-text tags.
+
+### 2. Drill Until Recall Is Automatic
+A Quiz Mode resurfaces the right story next using a spaced-repetition-style priority:
+
+- Never-reviewed stories first
+- Then lowest-confidence stories (`Panic` → `Shaky`)
+- Then oldest-reviewed stories
+
+Each story is rated on a 5-rung **Confidence Ladder**:
+
+```
+Panic → Shaky → Okay → Solid → Can Teach
+```
+
+Rating a story updates its `ConfidenceLevel` and `LastReviewedAt` atomically.
+
+### 3. Run the Pipeline Like a Project
+Track every application through a five-stage status machine with automatic event history, so nothing goes stale and you always know what to chase.
+
+```
+Applied → Phone Screen → Interviewing → Offer / Rejected / Ghosted
+```
+
+Every status change writes an `ApplicationEvent`, creating an auditable trajectory for each opportunity.
+
+---
+
+## R1 Feature Set (Live)
+
+| Feature | Description |
+|---------|-------------|
+| **Technical Story Bank** | Catalog snippets and explanations across 12 engineering domains with confidence tracking. |
+| **Behavioral Story Bank** | STAR-structured narratives with tags. |
+| **Quiz Mode** | Spaced-repetition resurfacing with confidence-ladder rating. |
+| **JD Skill Mapper** | Persist a job description with a user-supplied keyword list; Precept computes a match score against your Skills inventory and surfaces missing keywords. |
+| **Pipeline Tracker** | Five-stage application status machine with automatic event history. |
+| **Skills Matrix** | Inventory skills with name, category, proficiency level, and notes; feeds the JD match. |
+| **Technical Readiness** | Radar visualization of proficiency per skill category, plotted against an interview-ready threshold, plus gap analysis from saved job descriptions. |
+| **Analytics Dashboard** | Story confidence breakdowns, applications by status, response/rejection rates, and average JD match score. |
+| **Search** | Cross-entity search over stories, applications, job descriptions, and skills. |
+| **Data Export** | `GET /api/dashboard/export` returns your entire dataset as JSON — no lock-in. |
+| **Testimonials** | Authenticated users can submit public testimonials for the landing page. |
+
+All endpoints are user-scoped (`[Authorize]` + `WHERE UserId = current_user`) and rate-limited.
+
+---
+
+## Architecture at a Glance
+
+```
+Precept.Web  →  Vite + React 19 + TypeScript + Tailwind v4
+      ↓
+   nginx (production) / Vite dev server (development)
+      ↓
+Precept.Api  →  ASP.NET Core 10 + EF Core 10 + PostgreSQL 18
+```
+
+### Tech Stack
+
+| Layer | Technology |
+|-------|------------|
+| **Backend** | ASP.NET Core 10, C# 13, EF Core 10, Npgsql, ASP.NET Core Identity, JWT bearer, `System.Threading.RateLimiting`, Serilog, Scalar |
+| **Frontend** | React 19, TypeScript, Vite 6, Tailwind v4, GSAP, Framer Motion, Recharts, lenis, lucide-react, React Router 7 |
+| **Database** | PostgreSQL 18 with EF Core migrations committed to source control |
+| **Tests** | xUnit + Testcontainers for .NET (52+ DB-backed integration and unit tests) |
+| **CI** | GitHub Actions: build, test, vulnerable-package scan, `npm audit` |
+| **Deployment** | Multi-stage Dockerfiles + `docker-compose.yml` for db → api → web |
+
+---
+
+## Security Posture
+
+Precept handles personal career data, so the security model is intentionally overbuilt:
+
+- **Passwords** — PBKDF2 via ASP.NET Core Identity (≥8 chars, upper/lower/digit/symbol)
+- **Lockout** — 5 failed attempts → 15-minute lockout
+- **Access tokens** — JWT bearer, HMAC-SHA256, 15-minute expiry, zero clock skew
+- **Refresh tokens** — 64-byte CSPRNG, only SHA-256 hashes persisted, stored in `HttpOnly` + `Secure` + `SameSite=Strict` cookies
+- **Refresh-token rotation (RTR)** — every refresh invalidates the spent token and issues a new one atomically
+- **Replay detection** — benign concurrent retries get a soft 401; confirmed replays cascade-revoke every active session for the identity
+- **Rate limiting** — `auth` policy 10 req/min, `general` policy 100 req/min
+- **Tenant isolation** — global EF Core query filters ensure users can only see their own data
+- **CORS & security headers** — environment-gated strict policies in production
+
+A full OWASP Top 10 audit is documented in `OWASP-SECURITY-AUDIT.md`, and the auth architecture is detailed in `auth_reuse_detection_cascade_revocation.md`.
+
+---
+
+## Roadmap
+
+### R2 — AI-Assisted Interview Intelligence
+
+The goal is not to ship an LLM wrapper, but to ship LLM features that are **cheap, observable, and abuse-resistant** under a freemium model. The hard constraint is unit economics:
+
+| Constraint | Target |
+|------------|--------|
+| Marginal LLM cost per mock-interview session | ≤ **$0.005** end-to-end |
+| Free-tier sessions per user | Rate-limited to **2 / month** |
+| Paid extension | Non-expiring credit packs, ledger-backed (atomic decrement, audit trail) |
+| Free-tier STT | Browser-native Web Speech API (zero server cost) |
+| Free-tier TTS | `SpeechSynthesisUtterance` (zero server cost) |
+| Kill switch | `AI_FEATURES_ENABLED` env flag for one-config disable |
+
+**Planned R2 features:**
+
+- **AI Mock Interviewer** — Small-model question generation (Gemini Flash / Claude Haiku tier) tailored to the user's resume + a job description, with prompt caching for static context and a per-session server-side token budget.
+- **Voice mock rounds** — Browser-native STT/TTS for free tier; optional `whisper-1` for paid users.
+- **Scored feedback** — Structured rubric (Structure / Specificity / Conciseness) returned per response and persisted against the relevant Story for the spaced-repetition loop.
+- **Resume parser** — Server-side PDF/DOCX → Skills inventory + JD match auto-fill.
+- **Operational tooling** — Per-user spend ledger (`{user_id, session_id, input_tokens, output_tokens, model, cost_usd}`), admin `/spend` page, and a CI budget-regression check.
+
+### R3 — Platform Expansion
+
+Aspirational; not in active development.
+
+- Native desktop client (Tauri)
+- Companion mobile client
+- **Team Mode** — shared story banks and peer mocks for engineering teams
+
+---
+
+## Why Precept Exists
+
+The wedge against generic job trackers (Teal, Huntr, Simplify) is the second job: those tools track applications, but Precept also makes you interview-ready. It was built by a developer who needed it — a new grad with no internship experience trying to land a first SWE role — and realized a spreadsheet was not enough.
+
+Precept is a personal project. It is not a funded startup or a hosted commercial service (yet), and it is not affiliated with any employer. It is MIT-licensed and self-hostable by anyone who finds it useful.
+
+---
+
+## Get Started
+
+```bash
+git clone https://github.com/austinchima/Precept.git
+cd Precept
+# Create a .env file with POSTGRES_*, JWT_SECRET_KEY, and optional CORS_ORIGINS
+docker compose up -d --build
+```
+
+- Web: http://localhost
+- API: http://localhost:8080
+- API health: http://localhost:8080/api/health
+
+For local development with hot reload, see `README.md`.
+
+---
+
+## License
+
+MIT — fork it, run it, adapt it for your own job hunt.
diff --git a/Precept.Api/Controllers/AuthController.cs b/Precept.Api/Controllers/AuthController.cs
index 0ec02a6..d5250b8 100644
--- a/Precept.Api/Controllers/AuthController.cs
+++ b/Precept.Api/Controllers/AuthController.cs
@@ -27,6 +27,9 @@ public class AuthController(
 {
     private readonly JwtSettings _jwtSettings = jwtSettings.Value;
 
+    private static string NormalizeEmail(string email) =>
+        new(email.Where(c => !char.IsWhiteSpace(c)).ToArray());
+
     // ─────────────────────────────────────────────────────────────
     //  POST /api/auth/register
     // ─────────────────────────────────────────────────────────────
@@ -42,6 +45,8 @@ public async Task<IActionResult> Register([FromBody] RegisterRequest request)
         if (!ModelState.IsValid)
             return BadRequest(ModelState);
 
+        request.Email = NormalizeEmail(request.Email);
+
         // Check if a user with this email already exists
         var existingUser = await userManager.FindByEmailAsync(request.Email);
         if (existingUser != null)
@@ -101,6 +106,8 @@ public async Task<IActionResult> Login([FromBody] LoginRequest request)
         if (!ModelState.IsValid)
             return BadRequest(ModelState);
 
+        request.Email = NormalizeEmail(request.Email);
+
         // 1. Find user by email (ASP.NET Identity)
         var user = await userManager.FindByEmailAsync(request.Email);
         if (user == null)
@@ -348,6 +355,8 @@ public async Task<IActionResult> ForgotPassword([FromBody] ForgotPasswordRequest
         if (!ModelState.IsValid)
             return BadRequest(ModelState);
 
+        request.Email = NormalizeEmail(request.Email);
+
         var user = await userManager.FindByEmailAsync(request.Email);
         if (user == null)
         {
@@ -383,6 +392,8 @@ public async Task<IActionResult> ResetPassword([FromBody] ResetPasswordRequest r
         if (!ModelState.IsValid)
             return BadRequest(ModelState);
 
+        request.Email = NormalizeEmail(request.Email);
+
         var user = await userManager.FindByEmailAsync(request.Email);
         if (user == null)
             return BadRequest(new { message = "Invalid request." });
@@ -414,6 +425,8 @@ public async Task<IActionResult> VerifyEmail([FromBody] VerifyEmailRequest reque
         if (!ModelState.IsValid)
             return BadRequest(ModelState);
 
+        request.Email = NormalizeEmail(request.Email);
+
         var user = await userManager.FindByEmailAsync(request.Email);
         if (user == null)
             return BadRequest(new { message = "Invalid request." });
diff --git a/Precept.Api/DTOs/AuthDtos.cs b/Precept.Api/DTOs/AuthDtos.cs
index 2148532..a37d8fc 100644
--- a/Precept.Api/DTOs/AuthDtos.cs
+++ b/Precept.Api/DTOs/AuthDtos.cs
@@ -2,6 +2,17 @@
 
 namespace Precept.Api.DTOs;
 
+public static class AuthValidationConstants
+{
+    /// <summary>
+    /// Requires a local part, an @, a domain with at least one dot, and a TLD
+    /// of at least two characters. Whitespace is not matched, so it is rejected.
+    /// </summary>
+    public const string StrictEmailPattern = @"^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$";
+
+    public const string StrictEmailErrorMessage = "Email must be a valid address with a domain and TLD (e.g. user@example.com).";
+}
+
 /// <summary>
 /// Request body for POST /api/auth/register.
 /// </summary>
@@ -17,6 +28,7 @@ public class RegisterRequest
 
     [Required]
     [EmailAddress]
+    [RegularExpression(AuthValidationConstants.StrictEmailPattern, ErrorMessage = AuthValidationConstants.StrictEmailErrorMessage)]
     public string Email { get; set; } = string.Empty;
 
     [Required]
@@ -46,6 +58,7 @@ public class LoginRequest
 {
     [Required]
     [EmailAddress]
+    [RegularExpression(AuthValidationConstants.StrictEmailPattern, ErrorMessage = AuthValidationConstants.StrictEmailErrorMessage)]
     public string Email { get; set; } = string.Empty;
 
     [Required]
@@ -73,6 +86,7 @@ public class ForgotPasswordRequest
 {
     [Required]
     [EmailAddress]
+    [RegularExpression(AuthValidationConstants.StrictEmailPattern, ErrorMessage = AuthValidationConstants.StrictEmailErrorMessage)]
     public string Email { get; set; } = string.Empty;
 }
 
@@ -83,6 +97,7 @@ public class ResetPasswordRequest
 {
     [Required]
     [EmailAddress]
+    [RegularExpression(AuthValidationConstants.StrictEmailPattern, ErrorMessage = AuthValidationConstants.StrictEmailErrorMessage)]
     public string Email { get; set; } = string.Empty;
 
     [Required]
@@ -100,6 +115,7 @@ public class VerifyEmailRequest
 {
     [Required]
     [EmailAddress]
+    [RegularExpression(AuthValidationConstants.StrictEmailPattern, ErrorMessage = AuthValidationConstants.StrictEmailErrorMessage)]
     public string Email { get; set; } = string.Empty;
 
     [Required]
diff --git a/Precept.Tests/Integration/AuthEndpointTests.cs b/Precept.Tests/Integration/AuthEndpointTests.cs
index a4fc3f0..5c0ebe5 100644
--- a/Precept.Tests/Integration/AuthEndpointTests.cs
+++ b/Precept.Tests/Integration/AuthEndpointTests.cs
@@ -103,6 +103,18 @@ public async Task Register_Returns400_WithWeakPassword(string weakPassword, stri
         response.StatusCode.Should().Be(HttpStatusCode.BadRequest, reason);
     }
 
+    [Theory]
+    [InlineData("userexample@email", "missing TLD dot")]
+    [InlineData("user@example", "missing TLD dot")]
+    [InlineData("user@example.c", "TLD too short")]
+    [InlineData("user example@example.com", "contains whitespace")]
+    [InlineData("user@ example.com", "contains whitespace")]
+    public async Task Register_Returns400_WithInvalidEmail(string invalidEmail, string reason)
+    {
+        var (response, _) = await RegisterAsync(email: invalidEmail);
+        response.StatusCode.Should().Be(HttpStatusCode.BadRequest, reason);
+    }
+
     [Fact]
     public async Task Register_PersistsHashedToken_NotRawCookieValue()
     {
@@ -154,6 +166,19 @@ public async Task Login_Returns401_WithWrongPassword()
         response.StatusCode.Should().Be(HttpStatusCode.Unauthorized);
     }
 
+    [Theory]
+    [InlineData("userexample@email")]
+    [InlineData("user@example")]
+    [InlineData("user @example.com")]
+    public async Task Login_Returns400_WithInvalidEmail(string invalidEmail)
+    {
+        var client = _factory.CreateAnonymousClient();
+        var response = await client.PostAsJsonAsync("/api/auth/login",
+            new { Email = invalidEmail, Password = "ValidPass123!" });
+
+        response.StatusCode.Should().Be(HttpStatusCode.BadRequest);
+    }
+
     // ─────────────────────────────────────────────────────────────
     //  Token Refresh — Happy Path (must pass before cascade tests)
     // ─────────────────────────────────────────────────────────────
diff --git a/Precept.Web/package-lock.json b/Precept.Web/package-lock.json
index c17dcf0..24e4c12 100644
--- a/Precept.Web/package-lock.json
+++ b/Precept.Web/package-lock.json
@@ -36,6 +36,7 @@
         "@types/express": "^4.17.21",
         "@types/node": "^22.14.0",
         "@types/react": "^19.2.17",
+        "@types/react-dom": "^19.2.3",
         "autoprefixer": "^10.4.21",
         "esbuild": "^0.25.0",
         "tailwindcss": "^4.1.14",
@@ -1683,6 +1684,16 @@
         "csstype": "^3.2.2"
       }
     },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
     "node_modules/@types/send": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@types/send/-/send-1.2.1.tgz",
diff --git a/Precept.Web/package.json b/Precept.Web/package.json
index 2aa9ea6..bc90b5d 100644
--- a/Precept.Web/package.json
+++ b/Precept.Web/package.json
@@ -39,6 +39,7 @@
     "@types/express": "^4.17.21",
     "@types/node": "^22.14.0",
     "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.4.21",
     "esbuild": "^0.25.0",
     "tailwindcss": "^4.1.14",
diff --git a/Precept.Web/src/api.ts b/Precept.Web/src/api.ts
index 6a15e42..40663d7 100644
--- a/Precept.Web/src/api.ts
+++ b/Precept.Web/src/api.ts
@@ -44,13 +44,25 @@ function onRefreshed(token: string) {
   refreshSubscribers = [];
 }
 
+function isNetworkError(err: unknown): boolean {
+  return err instanceof TypeError || (err instanceof Error && /fetch|network|failed/i.test(err.message));
+}
+
 async function refreshAccessToken(): Promise<string> {
-  const response = await fetch('/api/auth/refresh', {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
+  let response: Response;
+  try {
+    response = await fetch('/api/auth/refresh', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+  } catch (err) {
+    if (isNetworkError(err)) {
+      throw new Error('Unable to reach the server. Please check your connection and try again.');
+    }
+    throw err;
+  }
 
   if (!response.ok) {
     try {
@@ -102,7 +114,15 @@ export async function apiFetch(url: string, options: RequestOptions = {}): Promi
     headers,
   };
 
-  const response = await fetch(url, config);
+  let response: Response;
+  try {
+    response = await fetch(url, config);
+  } catch (err) {
+    if (isNetworkError(err)) {
+      throw new Error('Unable to reach the server. Please check your connection and try again.');
+    }
+    throw err;
+  }
 
   if (response.status === 401 && !options.skipAuth) {
     // If already refreshing, wait for it to finish
diff --git a/Precept.Web/src/components/Layout.tsx b/Precept.Web/src/components/Layout.tsx
index 31536ff..9d4fb53 100644
--- a/Precept.Web/src/components/Layout.tsx
+++ b/Precept.Web/src/components/Layout.tsx
@@ -3,6 +3,7 @@ import { NavLink, Outlet, useNavigate } from 'react-router-dom';
 import { useAuth } from '../AuthContext';
 import { gsap, useGSAP, prefersReducedMotion } from '../lib/animations';
 import CommandPalette from './ui/CommandPalette';
+import { Terminal } from 'lucide-react';
 
 /* ─────── DESIGN TOKENS (from Landing.tsx) ─────── */
 const C = {
@@ -122,15 +123,12 @@ export default function Layout() {
             onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,0.04)')}
             onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
           >
-            <span
-              className={`grid h-8 w-8 place-items-center rounded-lg shrink-0 ${isSidebarCollapsed ? '' : 'mr-3'}`}
-              style={{
-                background: `linear-gradient(135deg, ${C.teal} 0%, ${C.violet} 100%)`,
-                boxShadow: `0 0 18px ${C.tealDim}`,
-              }}
-            >
-              <span className="font-display text-[15px] font-bold leading-none" style={{ color: C.bg0 }}>P</span>
-            </span>
+            <Terminal
+              size={24}
+              strokeWidth={2.2}
+              className={`shrink-0 ${isSidebarCollapsed ? '' : 'mr-3'}`}
+              style={{ color: C.teal }}
+            />
             {!isSidebarCollapsed && (
               <div className="flex flex-col items-start min-w-0">
                 <span className="font-display text-[18px] font-bold tracking-tight whitespace-nowrap" style={{ color: C.ink }}>
@@ -257,6 +255,7 @@ export default function Layout() {
             <div className="flex items-center gap-3">
               {/* mobile burger */}
               <button
+                title="Open Mobile Menu"
                 className="md:hidden flex items-center justify-center min-h-[44px] min-w-[44px] rounded-lg transition-colors cursor-pointer"
                 style={{ color: C.inkDim, background: C.hair }}
                 onClick={() => setIsMobileMenuOpen(true)}
@@ -298,14 +297,13 @@ export default function Layout() {
 
             <div className="flex items-center gap-3 md:gap-5">
               <button
+                aria-label="Notifications"
+                onClick={() => alert('Notifications not implemented yet')}
                 data-testid="topbar-notifications"
                 className="w-9 h-9 rounded-full grid place-items-center transition-all duration-300 cursor-pointer relative"
                 style={{ background: 'rgba(255,255,255,0.025)', border: `1px solid ${C.hair}`, color: C.inkDim }}
-                onMouseEnter={(e) => { e.currentTarget.style.color = C.ink; e.currentTarget.style.borderColor = C.hair2; }}
-                onMouseLeave={(e) => { e.currentTarget.style.color = C.inkDim; e.currentTarget.style.borderColor = C.hair; }}
               >
                 <i className="fa-regular fa-bell text-sm" />
-                <span className="absolute top-1.5 right-1.5 block h-1.5 w-1.5 rounded-full" style={{ background: C.rose, boxShadow: `0 0 6px ${C.rose}` }} />
               </button>
 
               <div className="text-right hidden md:flex flex-col items-end justify-center min-w-[88px] px-2">
diff --git a/Precept.Web/src/components/stories/BehavioralStoryForm.tsx b/Precept.Web/src/components/stories/BehavioralStoryForm.tsx
index 718f24e..10967fd 100644
--- a/Precept.Web/src/components/stories/BehavioralStoryForm.tsx
+++ b/Precept.Web/src/components/stories/BehavioralStoryForm.tsx
@@ -55,14 +55,14 @@ export const BehavioralStoryForm: React.FC<BehavioralStoryFormProps> = ({ story,
   return (
     <div className="glass-panel rounded-2xl p-6 relative overflow-hidden">
       {/* Top accent */}
-      <div className="absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-accent-teal/20 via-accent-teal to-accent-teal/20"></div>
+      <div className="absolute top-0 left-0 w-full h-0.5 bg-linear-to-r from-accent-teal/20 via-accent-teal to-accent-teal/20"></div>
 
       <div className="flex justify-between items-center mb-6 pb-3 border-b border-panel-border/20">
         <h2 className="text-lg font-semibold text-white flex items-center gap-2.5">
           <i className="fa-solid fa-brain text-accent-teal text-sm"></i>
           {story ? 'Edit Behavioral Story' : 'New Behavioral Story'}
         </h2>
-        <button onClick={onCancel} className="text-text-secondary hover:text-white p-1.5 rounded-lg hover:bg-white/5 transition-all cursor-pointer min-h-[44px] min-w-[44px] flex items-center justify-center">
+        <button onClick={onCancel} className="text-text-secondary hover:text-white p-1.5 rounded-lg hover:bg-white/5 transition-all cursor-pointer min-h-[44px] min-w-[44px] flex items-center justify-center" title="Close Form">
           <i className="fa-solid fa-xmark"></i>
         </button>
       </div>
diff --git a/Precept.Web/src/components/ui/Toast.tsx b/Precept.Web/src/components/ui/Toast.tsx
index f8b612f..71eb098 100644
--- a/Precept.Web/src/components/ui/Toast.tsx
+++ b/Precept.Web/src/components/ui/Toast.tsx
@@ -86,6 +86,8 @@ function ToastItem({ toast, onDismiss }: ToastItemProps) {
 
   return (
     <div
+      aria-live="polite"
+      aria-label="Notification"
       className={`
         flex items-start gap-3 w-full max-w-[384px] p-4 rounded-lg border shadow-2xl
         ${bg} ${border}
@@ -95,7 +97,6 @@ function ToastItem({ toast, onDismiss }: ToastItemProps) {
         pointer-events-auto
       `}
       role="alert"
-      aria-live={toast.variant === 'error' ? 'assertive' : 'polite'}
     >
       <i
         className={`${iconClass} ${iconColor} text-sm mt-0.5 shrink-0`}
diff --git a/Precept.Web/src/components/ui/radial-orbital-timeline.tsx b/Precept.Web/src/components/ui/radial-orbital-timeline.tsx
index 99042d7..ae65ff3 100644
--- a/Precept.Web/src/components/ui/radial-orbital-timeline.tsx
+++ b/Precept.Web/src/components/ui/radial-orbital-timeline.tsx
@@ -218,7 +218,7 @@ export default function RadialOrbitalTimeline({
             return (
               <div
                 key={item.id}
-                ref={(el) => (nodeRefs.current[item.id] = el)}
+                ref={(el) => { nodeRefs.current[item.id] = el; }}
                 className="absolute transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] cursor-pointer"
                 style={nodeStyle}
                 onClick={(e) => {
diff --git a/Precept.Web/src/components/ui/sign-in.tsx b/Precept.Web/src/components/ui/sign-in.tsx
index b48d255..cc23ddb 100644
--- a/Precept.Web/src/components/ui/sign-in.tsx
+++ b/Precept.Web/src/components/ui/sign-in.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ArrowUpRight, Mail, Lock, Eye, EyeOff, ArrowLeft, ArrowRight, AlertTriangle, Loader2 } from 'lucide-react';
+import { ArrowUpRight, Mail, Lock, Eye, EyeOff, ArrowLeft, ArrowRight, AlertTriangle, Loader2, Terminal } from 'lucide-react';
 
 /* ─────── DESIGN TOKENS (from Landing.tsx) ─────── */
 const C = {
@@ -141,15 +141,7 @@ export const SignInPage: React.FC<SignInPageProps> = ({
           {/* brand row */}
           <div className="animate-element animate-delay-100 flex items-center justify-between mb-8">
             <a href="/" className="flex items-center gap-2 no-underline" data-testid="signin-logo">
-              <span
-                className="grid h-8 w-8 place-items-center rounded-md"
-                style={{
-                  background: `linear-gradient(135deg, ${C.teal} 0%, ${C.violet} 100%)`,
-                  boxShadow: `0 0 18px ${C.tealDim}`,
-                }}
-              >
-                <span className="font-display text-[15px] font-bold leading-none" style={{ color: C.bg0 }}>P</span>
-              </span>
+              <Terminal size={24} strokeWidth={2.2} className="shrink-0" style={{ color: C.teal }} />
               <span className="font-display text-[18px] font-bold tracking-tight" style={{ color: C.ink }}>Precept</span>
               <span className="font-mono text-[10px] uppercase tracking-widest hidden sm:inline" style={{ color: C.inkMute }}>
                 ─ Career&nbsp;OS
@@ -238,9 +230,30 @@ export const SignInPage: React.FC<SignInPageProps> = ({
               <label className="font-mono text-[10.5px] uppercase tracking-[0.18em] mb-2 block" style={{ color: C.inkMute }}>Email</label>
               <InputShell isError={!!error}>
                 <Mail size={16} className="ml-4 shrink-0" style={{ color: C.inkMute }} />
-                <input name="email" type="email" placeholder="engineer@domain.com" data-testid="signin-email"
+                <input
+                  name="email"
+                  type="email"
+                  placeholder="engineer@domain.com"
+                  data-testid="signin-email"
                   className="w-full bg-transparent text-sm p-3.5 font-mono focus:outline-none"
-                  style={{ color: C.ink }} required />
+                  style={{ color: C.ink }}
+                  required
+                  onKeyDown={(e) => {
+                    if (e.key === ' ' || e.key === 'Spacebar') {
+                      e.preventDefault();
+                    }
+                  }}
+                  onPaste={(e) => {
+                    e.preventDefault();
+                    const pasted = e.clipboardData.getData('text').replace(/\s/g, '');
+                    const input = e.currentTarget;
+                    input.value = pasted;
+                    input.dispatchEvent(new Event('input', { bubbles: true }));
+                  }}
+                  onBlur={(e) => {
+                    e.currentTarget.value = e.currentTarget.value.replace(/\s/g, '');
+                  }}
+                />
               </InputShell>
             </div>
 
diff --git a/Precept.Web/src/pages/Dashboard.tsx b/Precept.Web/src/pages/Dashboard.tsx
index aa02387..6880b3b 100644
--- a/Precept.Web/src/pages/Dashboard.tsx
+++ b/Precept.Web/src/pages/Dashboard.tsx
@@ -352,13 +352,14 @@ export default function Dashboard() {
                         <span className="rounded-full px-2.5 py-0.5 font-mono text-[9.5px] uppercase tracking-wider" style={{ background: `${C.violet}22`, color: C.violet, border: `1px solid ${C.violet}33` }}>
                           STAR Method
                         </span>
-                        <span className="font-mono text-[10px]" style={{ color: C.inkMute }}>{activeSTARStory.company || 'General'}</span>
+                        <span className="font-mono text-[10px]" style={{ color: C.inkMute }}>{activeSTARStory.tags || 'General'}</span>
                       </div>
                       <h3 className="font-display text-[18px] font-semibold leading-snug" style={{ color: C.ink }}>
                         {activeSTARStory.title}
                       </h3>
                       <div className="mt-3 space-y-2 font-body text-[12.5px] leading-relaxed" style={{ color: C.inkDim }}>
                         <p><strong className="text-purple-400 font-mono text-[11px] uppercase">Situation:</strong> {activeSTARStory.situation}</p>
+                        <p className="line-clamp-2"><strong className="text-sky-400 font-mono text-[11px] uppercase">Task:</strong> {activeSTARStory.task}</p>
                         <p className="line-clamp-2"><strong className="text-teal-400 font-mono text-[11px] uppercase">Action:</strong> {activeSTARStory.action}</p>
                         <p className="line-clamp-2"><strong className="text-emerald-400 font-mono text-[11px] uppercase">Result:</strong> {activeSTARStory.result}</p>
                       </div>
diff --git a/Precept.Web/src/pages/HomePage.tsx b/Precept.Web/src/pages/HomePage.tsx
index f8ca28c..b560c58 100644
--- a/Precept.Web/src/pages/HomePage.tsx
+++ b/Precept.Web/src/pages/HomePage.tsx
@@ -120,10 +120,7 @@ export default function HomePage() {
         style={{ background: 'rgba(2,5,10,0.7)', borderBottom: `1px solid ${C.hair}` }}>
         <div className="flex items-center justify-between px-6 py-4 max-w-7xl mx-auto">
           <a href="/" className="flex items-center gap-3 no-underline" data-testid="home-logo">
-            <span className="grid h-9 w-9 place-items-center rounded-md"
-              style={{ background: `linear-gradient(135deg, ${C.teal} 0%, ${C.violet} 100%)`, boxShadow: `0 0 18px ${C.tealDim}` }}>
-              <span className="font-display text-[16px] font-bold leading-none" style={{ color: C.bg0 }}>P</span>
-            </span>
+            <Terminal size={26} strokeWidth={2.2} className="shrink-0" style={{ color: C.teal }} />
             <div>
               <span className="font-display font-bold text-[19px] tracking-tight" style={{ color: C.ink }}>Precept</span>
               <span className="ml-2 font-mono text-[9.5px] uppercase tracking-[0.22em]" style={{ color: C.inkMute }}>Career&nbsp;OS</span>
@@ -458,10 +455,7 @@ export default function HomePage() {
             <div className="grid grid-cols-1 md:grid-cols-4 gap-10 px-6 py-16 max-w-7xl mx-auto">
               <div className="flex flex-col gap-5 col-span-1 md:col-span-2">
                 <a href="/" className="flex items-center gap-3 no-underline">
-                  <span className="grid h-9 w-9 place-items-center rounded-md"
-                    style={{ background: `linear-gradient(135deg, ${C.teal} 0%, ${C.violet} 100%)`, boxShadow: `0 0 18px ${C.tealDim}` }}>
-                    <span className="font-display text-[16px] font-bold leading-none" style={{ color: C.bg0 }}>P</span>
-                  </span>
+                  <Terminal size={26} strokeWidth={2.2} className="shrink-0" style={{ color: C.teal }} />
                   <span className="font-display font-bold text-[19px]" style={{ color: C.ink }}>Precept</span>
                 </a>
                 <p className="font-body text-[13.5px] max-w-md leading-relaxed" style={{ color: C.inkDim }}>
diff --git a/Precept.Web/src/pages/Landing.tsx b/Precept.Web/src/pages/Landing.tsx
index 0d32c28..3873a12 100644
--- a/Precept.Web/src/pages/Landing.tsx
+++ b/Precept.Web/src/pages/Landing.tsx
@@ -94,15 +94,7 @@ function Navbar() {
         <div className="mx-auto flex h-16 max-w-[1280px] items-center justify-between px-6">
           {/* Wordmark */}
           <a href="/" className="flex items-center gap-2 no-underline" data-testid="landing-logo">
-            <span
-              className="grid h-7 w-7 place-items-center rounded-md"
-              style={{
-                background: `linear-gradient(135deg, ${c.teal} 0%, ${c.violet} 100%)`,
-                boxShadow: `0 0 18px ${c.tealDim}`,
-              }}
-            >
-              <span className="font-display text-[15px] font-bold leading-none" style={{ color: c.bg0 }}>P</span>
-            </span>
+            <Terminal size={22} strokeWidth={2.2} className="shrink-0" style={{ color: c.teal }} />
             <span className="font-display text-[18px] font-bold tracking-tight" style={{ color: c.ink }}>
               Precept
             </span>
@@ -149,17 +141,6 @@ function Navbar() {
             >
               <i className="fa-brands fa-github" /> GitHub
             </a>
-            <button
-              type="button"
-              data-testid="nav-signin-btn"
-              onClick={() => goLogin()}
-              className="cursor-pointer rounded-full border border-transparent px-3.5 py-1.5 font-mono text-[12px] uppercase tracking-[0.14em] transition-all hover:border-teal-400/30 hover:bg-white/10 hover:shadow-[0_0_15px_rgba(45,212,191,0.2)]"
-              style={{ color: c.inkDim }}
-              onMouseEnter={(e) => (e.currentTarget.style.color = c.ink)}
-              onMouseLeave={(e) => (e.currentTarget.style.color = c.inkDim)}
-            >
-              Sign in
-            </button>
             <button
               type="button"
               data-testid="nav-cta-btn"
@@ -643,11 +624,11 @@ function Wedge() {
               Teal · Huntr · Simplify
             </div>
             <ul className="mt-6 space-y-3 font-body text-[13.5px]" style={{ color: c.inkDim }}>
-              <li className="flex items-start gap-2"><Check size={14} className="mt-0.5 flex-shrink-0" style={{ color: c.emerald }} /> Pipeline tracking</li>
-              <li className="flex items-start gap-2"><Check size={14} className="mt-0.5 flex-shrink-0" style={{ color: c.emerald }} /> Application reminders</li>
-              <li className="flex items-start gap-2"><X size={14} className="mt-0.5 flex-shrink-0" style={{ color: c.rose }} /> No technical story bank</li>
-              <li className="flex items-start gap-2"><X size={14} className="mt-0.5 flex-shrink-0" style={{ color: c.rose }} /> No drilling / recall practice</li>
-              <li className="flex items-start gap-2"><X size={14} className="mt-0.5 flex-shrink-0" style={{ color: c.rose }} /> Not built for engineers</li>
+              <li className="flex items-start gap-2"><Check size={14} className="mt-0.5 shrink-0" style={{ color: c.emerald }} /> Pipeline tracking</li>
+              <li className="flex items-start gap-2"><Check size={14} className="mt-0.5 shrink-0" style={{ color: c.emerald }} /> Application reminders</li>
+              <li className="flex items-start gap-2"><X size={14} className="mt-0.5 shrink-0" style={{ color: c.rose }} /> No technical story bank</li>
+              <li className="flex items-start gap-2"><X size={14} className="mt-0.5 shrink-0" style={{ color: c.rose }} /> No drilling / recall practice</li>
+              <li className="flex items-start gap-2"><X size={14} className="mt-0.5 shrink-0" style={{ color: c.rose }} /> Not built for engineers</li>
             </ul>
           </div>
 
@@ -685,7 +666,7 @@ function Wedge() {
                   "Voice practice + analytics + skills matrix",
                 ].map((t) => (
                   <li key={t} className="flex items-start gap-2">
-                    <Check size={14} className="mt-0.5 flex-shrink-0" style={{ color: c.teal }} /> {t}
+                    <Check size={14} className="mt-0.5 shrink-0" style={{ color: c.teal }} /> {t}
                   </li>
                 ))}
               </ul>
@@ -1327,12 +1308,12 @@ function FinalCTA() {
               Free to start. No card. Your data exports as raw JSON, anytime. Built by developers, for developers.
             </p>
 
-            <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
+            <div className="mt-9 flex items-center justify-center">
               <button
                 type="button"
                 data-testid="final-cta-primary"
                 onClick={() => navigate("/login", { state: { mode: "signup" } })}
-                className="gsap-magnetic group inline-flex items-center gap-2 rounded-full px-7 py-4 font-mono text-[12.5px] font-semibold uppercase tracking-[0.16em]"
+                className="inline-flex items-center gap-2 rounded-full px-7 py-4 font-mono text-[12.5px] font-semibold uppercase tracking-[0.16em] transition-shadow duration-300 hover:shadow-[0_0_24px_rgba(45,212,191,0.45)]"
                 style={{
                   background: c.ink,
                   color: c.bg0,
@@ -1340,20 +1321,8 @@ function FinalCTA() {
                 }}
               >
                 Start banking your stories
-                <ArrowRight size={14} className="transition-transform group-hover:translate-x-1" />
+                <ArrowRight size={14} />
               </button>
-              <a
-                href="https://github.com/austinchima/Precept"
-                target="_blank"
-                rel="noopener noreferrer"
-                data-testid="final-cta-github"
-                className="inline-flex items-center gap-2 font-mono text-[12px] uppercase tracking-[0.16em] transition-colors"
-                style={{ color: c.inkDim }}
-                onMouseEnter={(e) => (e.currentTarget.style.color = c.ink)}
-                onMouseLeave={(e) => (e.currentTarget.style.color = c.inkDim)}
-              >
-                Star on GitHub <ArrowUpRight size={12} />
-              </a>
             </div>
 
             {/* tiny trust strip */}
@@ -1384,12 +1353,7 @@ function Footer() {
         <div className="grid grid-cols-12 gap-8">
           <div className="col-span-12 md:col-span-5">
             <div className="flex items-center gap-2">
-              <span
-                className="grid h-7 w-7 place-items-center rounded-md"
-                style={{ background: `linear-gradient(135deg, ${c.teal}, ${c.violet})` }}
-              >
-                <span className="font-display text-[15px] font-bold" style={{ color: c.bg0 }}>P</span>
-              </span>
+              <Terminal size={22} strokeWidth={2.2} className="shrink-0" style={{ color: c.teal }} />
               <span className="font-display text-[18px] font-bold" style={{ color: c.ink }}>Precept</span>
             </div>
             <p className="mt-4 max-w-[360px] font-body text-[13.5px] leading-relaxed" style={{ color: c.inkDim }}>
@@ -1414,8 +1378,6 @@ function Footer() {
             <ul className="mt-4 space-y-2 font-body text-[13px]">
               {[
                 ["https://github.com/austinchima/Precept", "GitHub"],
-                ["https://github.com/austinchima/Precept/tree/master/design-system/pages", "Design system"],
-                ["https://github.com/austinchima/Precept/blob/master/OWASP-SECURITY-AUDIT.md", "Security audit"],
                 ["https://github.com/austinchima/Precept/blob/master/CHANGELOG.md", "Changelog"],
               ].map(([h, l]) => (
                 <li key={l}>
diff --git a/Precept.Web/src/pages/LoginPage.tsx b/Precept.Web/src/pages/LoginPage.tsx
index be65771..1e9f6f8 100644
--- a/Precept.Web/src/pages/LoginPage.tsx
+++ b/Precept.Web/src/pages/LoginPage.tsx
@@ -33,19 +33,29 @@ export default function LoginPage() {
     }
   }, [isAuthenticated, navigate]);
 
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
     const data = Object.fromEntries(formData.entries());
-    
+
+    const rawEmail = (data.email as string) ?? '';
+    const email = rawEmail.replace(/\s/g, '');
+
+    if (!emailRegex.test(email)) {
+      setError('Enter a valid email address with a domain and TLD (e.g. user@example.com).');
+      return;
+    }
+
     setIsLoading(true);
     setError(null);
 
     try {
       if (isLogin) {
-        await login(data.email as string, data.password as string, data.rememberMe === 'on');
+        await login(email, data.password as string, data.rememberMe === 'on');
       } else {
-        await register(data.firstName as string, data.lastName as string, data.email as string, data.password as string);
+        await register(data.firstName as string, data.lastName as string, email, data.password as string);
       }
       navigate('/dashboard');
     } catch (err: any) {
diff --git a/Precept.Web/src/pages/StoryBank.tsx b/Precept.Web/src/pages/StoryBank.tsx
index 4bb2d45..5b67ce3 100644
--- a/Precept.Web/src/pages/StoryBank.tsx
+++ b/Precept.Web/src/pages/StoryBank.tsx
@@ -272,14 +272,14 @@ export default function StoryBank() {
                     <div className="px-5 py-3 flex justify-between items-center font-mono text-[10.5px]" style={{ borderTop: `1px solid ${C.hair}`, color: C.inkMute }}>
                       <span>Last: {story.lastReviewedAt ? new Date(story.lastReviewedAt).toLocaleDateString() : 'never'}</span>
                       <div className="flex items-center gap-2">
-                        <button onClick={() => handleOpenEditModal(story)} className="min-w-[32px] min-h-[32px] flex items-center justify-center transition-colors cursor-pointer"
+                        <button title="Edit story" aria-label="Edit story" onClick={() => handleOpenEditModal(story)} className="min-w-[32px] min-h-[32px] flex items-center justify-center transition-colors cursor-pointer"
                           style={{ color: C.inkDim }}
                           onMouseEnter={(e) => (e.currentTarget.style.color = C.teal)}
                           onMouseLeave={(e) => (e.currentTarget.style.color = C.inkDim)}
                         >
                           <Pencil size={12} />
                         </button>
-                        <button onClick={() => confirmDelete(story.id)} className="min-w-[32px] min-h-[32px] flex items-center justify-center transition-colors cursor-pointer"
+                        <button title="Delete story" aria-label="Delete story" onClick={() => confirmDelete(story.id)} className="min-w-[32px] min-h-[32px] flex items-center justify-center transition-colors cursor-pointer"
                           style={{ color: C.inkDim }}
                           onMouseEnter={(e) => (e.currentTarget.style.color = C.rose)}
                           onMouseLeave={(e) => (e.currentTarget.style.color = C.inkDim)}
@@ -311,7 +311,7 @@ export default function StoryBank() {
               <div className="w-full max-w-[680px] max-h-[92vh] flex flex-col relative opacity-0 animate-fade-in-up" style={{ ...cardStyle(), borderRadius: 22 }}>
                 <div className="flex items-center justify-between p-5" style={{ borderBottom: `1px solid ${C.hair}` }}>
                   <Eyebrow color={editingStory ? C.amber : C.teal}>{editingStory ? 'Edit snippet' : 'New snippet'}</Eyebrow>
-                  <button title="Close Modal" onClick={() => setIsModalOpen(false)} className="min-h-[40px] min-w-[40px] rounded-lg grid place-items-center" style={{ color: C.inkDim }}>
+                  <button title="Close Modal" aria-label="Close Modal" onClick={() => setIsModalOpen(false)} className="min-h-[40px] min-w-[40px] rounded-lg grid place-items-center" style={{ color: C.inkDim }}>
                     <X size={16} />
                   </button>
                 </div>
diff --git a/Precept.Web/tsconfig.json b/Precept.Web/tsconfig.json
index 0aed6a3..d7283a3 100644
--- a/Precept.Web/tsconfig.json
+++ b/Precept.Web/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "compilerOptions": {
+  "compilerOptions":{
     "target": "ES2022",
     "experimentalDecorators": true,
     "useDefineForClassFields": false,
@@ -10,6 +10,8 @@
       "DOM.Iterable"
     ],
     "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
     "moduleResolution": "bundler",
     "isolatedModules": true,
     "moduleDetection": "force",
diff --git a/memory/PRD.md b/memory/PRD.md
deleted file mode 100644
index 3208552..0000000
--- a/memory/PRD.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# Precept — Landing Page Redesign PRD
-
-## Original problem statement
-Redesign the landing page for github.com/austinchima/Precept as if it were a $20k client engagement marketing a SaaS. The redesign must be grounded in what the product actually does — "Precept is the Career OS for software engineers."
-
-## Repo & stack (existing)
-- Repo: github.com/austinchima/Precept
-- Frontend: `Precept.Web/` — React 19 + TypeScript + Vite + TailwindCSS v4 + GSAP + Framer Motion + Recharts
-- Backend: `Precept.Api/` — ASP.NET Core 10 / EF Core / PostgreSQL (untouched)
-- Landing entrypoint: `Precept.Web/src/pages/Landing.tsx`
-
-## Brand & voice (from client brief)
-- Tagline: "Your Job Hunt, Reimagined"
-- Voice: precise, calm-under-pressure, confident, not hypey. "Built by developers, for developers."
-- Visual: dark-mode IDE/command-center, teal primary `#2dd4bf`, violet secondary `#8b5cf6`
-- Audience: software engineers (new grads + working) job-hunting
-- The wedge: not just a tracker — also makes you interview-ready via story banks + Quiz Mode drilling
-- Signature concept: **Confidence Ladder** — Panic → Shaky → Okay → Solid → Can Teach
-
-## Personas
-1. **New grad SWE** with no internship experience — needs structure
-2. **Working engineer** juggling 20+ applications — drowning in tabs/spreadsheets
-
-## What's been implemented (Jun 28, 2026)
-- **Total rewrite** of `Precept.Web/src/pages/Landing.tsx` (~1100 lines) grounded in client brief
-- **New editorial typography**: added Bricolage Grotesque (display, tight-tracked) + Instrument Serif italic (emphasis) — fonts loaded in `index.html`, utilities (`.font-display`, `.font-editorial`) wired in `index.css`
-- **Custom CSS utilities**: dot grid background, film grain overlay, marquee animation, IDE blinking caret, ladder shadow cycle (`/src/index.css`)
-- **Sections shipped** (in order):
-  1. Sticky **Navbar** with scroll-aware glass, mobile sheet
-  2. **Hero** — editorial headline ("Turn interview *panic* into *confidence*") + live component-built command-center mockup (story card with confidence ladder + pipeline + due-for-review)
-  3. **Marquee** ticker (proof + value props)
-  4. **Wedge** — 3-column comparison: Spreadsheets vs Trackers (Teal/Huntr) vs Precept
-  5. **Modules** — asymmetric bento with real UI fragments: Story Bank, STAR Bank, JD Analyzer (gap list), Pipeline (5-stage stats), Analytics (bar chart), Skills Matrix, Trajectory Scanner
-  6. **Confidence Ladder** signature section — interactive 5-rung visualization with hover-driven copy swap
-  7. **How It Works** — Capture → Analyze → Convert with connector arrows
-  8. **Testimonials** — pulls from `/api/testimonial/public` with graceful fallback
-  9. **R2 AI Teaser** — chat mockup + score panel
-  10. **Final CTA** — pill button + GitHub secondary + trust strip
-  11. **Footer** — 4-col layout with status indicators
-
-## What was preserved
-- Routing in `App.tsx` (untouched)
-- AuthContext / `api` helper (untouched)
-- All other pages (Dashboard, StoryBank, QuizMode, etc.) untouched
-- Testimonial API endpoint (`/api/testimonial/public`) — backwards compatible
-
-## Dependencies
-- Added `react-is@^19` — required peer dep for `recharts` to enable Vite dev server boot (was failing on resolve)
-
-## Verification
-- ✅ `npx tsc --noEmit` exit 0 (clean TS compilation)
-- ✅ Visual screenshots across 9 sections (hero, wedge, modules, ladder, how, R2, testimonials, marquee, footer)
-- ✅ Hot reload working on Vite dev server
-- ⚠️ ESLint advisory warnings on `react/no-unescaped-entities` (apostrophes/quotes) — render fine, project has no enforcing ESLint config
-
-## Backlog / next iterations
-- **P1**: Test all CTAs link correctly to `/login?mode=signup` end-to-end via auth flow
-- **P1**: Optimize loading — preload critical fonts, consider extracting hero mockup
-- **P2**: Add light theme toggle for the landing (brief mentions varying themes is good design hygiene)
-- **P2**: Replace static testimonials with carousel if more than 3 approved
-- **P2**: Wire the magnetic-button effect on more CTAs (already on primary)
-- **P3**: A/B test the "Turn panic into confidence" hero vs the previous "Your Job Hunt, Reimagined"
-- **P3**: Add OG/social meta tags + structured data for SEO
-
-## Smart enhancement (conversion lever)
-The hero's tech-credibility bar surfaces .NET/React/Postgres/Docker stack. **Consider adding a one-click "Run in Docker" snippet directly under the GitHub CTA in the hero** — for a developer audience, the friction-free "git clone && docker compose up" path is a stronger conversion signal than any marketing copy. The `docker-compose.yml` is already in the repo; a single-line `curl | bash` quickstart would do real work for new-grad self-hosters who want to see Precept before signing up.