feat: add night shift focus panel and unified runtime

src/App.tsx

@@ -157,6 +157,15 @@ function App() {
     [appState.pulses, selectedPulseId],
   )
 
+  const selectedFeaturePulses = useMemo(() => {
+    if (!selectedFeature) return []
+
+    return [...appState.pulses]
+      .filter((pulse) => pulse.feature_id === selectedFeature.id)
+      .sort((a, b) => b.timestamp.localeCompare(a.timestamp))
+      .slice(0, 4)
+  }, [appState.pulses, selectedFeature])
+
   const filteredPulses = useMemo(() => {
     return [...appState.pulses]
       .filter((pulse) => (pulseTypeFilter === 'all' ? true : pulse.pulse_type === pulseTypeFilter))
@@ -624,6 +633,55 @@ function App() {
             </section>
           )}
 
+          {selectedFeature && (
+            <section className="card focus-card">
+              <div className="section-heading compact">
+                <div>
+                  <p className="eyebrow">Night Shift Focus</p>
+                  <h3>{selectedFeature.title}</h3>
+                  <p>The current build thread, stripped of excuses and fog.</p>
+                </div>
+                <div className="focus-badges">
+                  <span className={`pill ${selectedFeature.priority}`}>{selectedFeature.priority}</span>
+                  <span className="pill">{selectedFeature.status}</span>
+                  <span className="pill">{columnLabels[selectedFeature.column]}</span>
+                </div>
+              </div>
+              <div className="focus-grid">
+                <article className="focus-panel">
+                  <h4>Acceptance Criteria</h4>
+                  {selectedFeature.acceptance_criteria.length ? (
+                    <ul>
+                      {selectedFeature.acceptance_criteria.map((criterion) => (
+                        <li key={criterion}>{criterion}</li>
+                      ))}
+                    </ul>
+                  ) : (
+                    <p>No criteria yet. A dangerous little vacuum.</p>
+                  )}
+                </article>
+                <article className="focus-panel">
+                  <h4>Scope Notes</h4>
+                  <p>{selectedFeature.scope_notes || 'No scope notes yet. Add the edges before the feature sprawls.'}</p>
+                  <h4>Recent Pulse</h4>
+                  {selectedFeaturePulses.length ? (
+                    <div className="list-stack compact-stack">
+                      {selectedFeaturePulses.map((pulse) => (
+                        <div key={pulse.id} className="mini-pulse">
+                          <strong>{pulse.pulse_type}</strong>
+                          <span>{formatDateTime(pulse.timestamp)}</span>
+                          <p>{pulse.message}</p>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <p>No feature-linked pulses yet. Log intent before the night gets blurry.</p>
+                  )}
+                </article>
+              </div>
+            </section>
+          )}
+
           <div className="board-grid">
             {FEATURE_COLUMNS.map((column) => (
               <article key={column} className="column card">

src/index.css

@@ -51,6 +51,18 @@ button {
   backdrop-filter: blur(16px);
 }
 
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    radial-gradient(circle at 15% 20%, rgba(96, 165, 250, 0.14), transparent 18%),
+    radial-gradient(circle at 85% 12%, rgba(168, 85, 247, 0.12), transparent 20%),
+    radial-gradient(circle at 50% 80%, rgba(45, 212, 191, 0.08), transparent 24%);
+  opacity: 0.9;
+}
+
 .hero-card {
   display: flex;
   justify-content: space-between;
@@ -122,6 +134,7 @@ small,
 
 .project-card,
 .quick-actions,
+.focus-card,
 .tab-bar,
 .status-bar,
 .view-stack,
@@ -214,6 +227,64 @@ textarea {
   padding: 0.9rem;
 }
 
+.focus-card {
+  position: relative;
+  overflow: hidden;
+}
+
+.focus-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(96, 165, 250, 0.08), rgba(45, 212, 191, 0.02) 48%, transparent 75%);
+  pointer-events: none;
+}
+
+.focus-grid,
+.focus-badges,
+.compact-stack {
+  position: relative;
+  z-index: 1;
+}
+
+.focus-grid {
+  display: grid;
+  grid-template-columns: 1.2fr 1fr;
+  gap: 1rem;
+}
+
+.focus-panel {
+  border-radius: 20px;
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  background: rgba(15, 23, 42, 0.54);
+  padding: 1rem;
+}
+
+.focus-panel h4 {
+  margin: 0 0 0.65rem;
+}
+
+.focus-panel h4 + p,
+.focus-panel ul,
+.focus-panel p {
+  margin-top: 0;
+}
+
+.focus-panel ul {
+  padding-left: 1.1rem;
+  color: #dbe7ff;
+}
+
+.focus-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.compact-stack {
+  gap: 0.6rem;
+}
+
 .button-row,
 .button-inline-row,
 .button-stack,
@@ -418,6 +489,7 @@ pre {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .focus-grid,
   .editor-grid,
   .project-grid {
     grid-template-columns: 1fr;