fix: sharpen buildpulse mobile presentation

package.json

@@ -1,7 +1,7 @@
 {
   "name": "buildpulse",
   "private": true,
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "scripts": {
     "api": "node --env-file=../.env server/index.mjs",

src/App.tsx

@@ -1531,8 +1531,8 @@ function App() {
     <div className="app-shell">
       <header className="mobile-shell-header card">
         <div>
-          <p className="eyebrow">BuildPulse v0.4.1</p>
+          <p className="eyebrow">BuildPulse v0.4.2</p>
-          <h1>{appState.project.name}</h1>
+          <h1>BuildPulse</h1>
           <p className="hero-goal compact-goal">
             <strong>Current goal:</strong> {appState.project.current_goal || 'Classify new ideas before they become work.'}
           </p>
@@ -2426,15 +2426,15 @@ function App() {
             <div className="section-heading compact">
               <div>
                 <p className="eyebrow">Today</p>
-                <h2>{appState.project.current_goal || 'Classify new ideas before they become work.'}</h2>
+                <h2>Capture → Brief → Build</h2>
-                <p>BuildPulse now starts with the next sane action — not the whole database spilled onto the floor.</p>
+                <p>One decision at a time. Capture the idea, pick the next move, hand it to an agent.</p>
               </div>
               <div className="button-inline-row">
                 <button type="button" className="primary-triage-button" onClick={() => openTriage()}>
                   + Add Idea
                 </button>
                 <button type="button" className="ghost" onClick={() => setShowManualFeatureEditor((current) => !current)}>
-                  Manual Feature
+                  Manual
                 </button>
               </div>
             </div>
@@ -2471,22 +2471,22 @@ function App() {
               <article className="focus-panel today-release-card">
                 <p className="eyebrow">Current release</p>
                 <h3>{selectedRelease?.name || 'No release selected'}</h3>
-                <p>{selectedRelease?.goal || 'Pick a release when this project needs structure.'}</p>
+                <p>{selectedRelease?.goal || 'Pick the release that matters now.'}</p>
                 <div className="compact-stack">
                   <small>{activeReleaseSummary}</small>
                   <small>{selectedReleaseBlockers.length ? `${selectedReleaseBlockers.length} required item(s) still open` : 'No required blockers detected'}</small>
                   <small>{selectedRelease?.forbidden_feature_titles.length ? `Forbidden right now: ${selectedRelease.forbidden_feature_titles.slice(0, 3).join(', ')}` : 'No forbidden-work list yet'}</small>
                 </div>
-                <button type="button" className="ghost small" onClick={() => setActiveTab('roadmap')}>Review Release</button>
+                <button type="button" className="ghost small" onClick={() => setActiveTab('roadmap')}>Release</button>
               </article>
 
               <article className="focus-panel today-decision-card">
                 <p className="eyebrow">Needs decision</p>
                 <h3>{duplicateParkingGroups.length ? `${duplicateParkingGroups.length} duplicate idea group${duplicateParkingGroups.length === 1 ? '' : 's'}` : 'No obvious duplicate pile-ups'}</h3>
-                <p>{appState.parking_lot.length} parked idea{appState.parking_lot.length === 1 ? '' : 's'} · {appState.pulses.length} history event{appState.pulses.length === 1 ? '' : 's'}</p>
+                <p>{appState.parking_lot.length} parked · {appState.pulses.length} pulses</p>
                 <div className="button-inline-row">
-                  <button type="button" className="ghost small" onClick={() => setActiveTab('parking-lot')}>Review Ideas</button>
+                  <button type="button" className="ghost small" onClick={() => setActiveTab('parking-lot')}>Ideas</button>
-                  <button type="button" className="ghost small" onClick={() => setActiveTab('pulse-log')}>Open History</button>
+                  <button type="button" className="ghost small" onClick={() => setActiveTab('pulse-log')}>History</button>
                 </div>
               </article>
             </div>

src/index.css

@@ -2060,3 +2060,665 @@ select {
     backdrop-filter: blur(14px);
   }
 }
+
+/* v0.4.2 — hard visual reset: mobile-first, sharper, flatter, less dashboard soup. */
+:root {
+  color: #eef4ff;
+  background: #070a12;
+}
+
+body {
+  background:
+    linear-gradient(180deg, rgba(18, 24, 38, 0.84) 0%, rgba(7, 10, 18, 1) 34%),
+    #070a12;
+}
+
+body::before {
+  background:
+    linear-gradient(90deg, rgba(89, 116, 255, 0.08) 0 1px, transparent 1px 100%),
+    linear-gradient(180deg, rgba(89, 116, 255, 0.06) 0 1px, transparent 1px 100%);
+  background-size: 44px 44px;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 72%);
+  opacity: 0.55;
+}
+
+.app-shell {
+  width: min(1160px, calc(100% - 1.5rem));
+  padding-top: 1rem;
+}
+
+.card,
+.hero-card,
+.focus-panel,
+.item-card,
+.markdown-card,
+.editor-sheet,
+.triage-modal {
+  border-radius: 12px;
+  border-color: rgba(148, 163, 184, 0.14);
+  background: rgba(10, 14, 24, 0.86);
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.mobile-shell-header {
+  align-items: center;
+  padding: 0.9rem 1rem;
+  border-color: rgba(129, 140, 248, 0.22);
+  background:
+    linear-gradient(135deg, rgba(14, 20, 34, 0.98), rgba(8, 12, 22, 0.96)),
+    linear-gradient(90deg, rgba(96, 165, 250, 0.16), transparent 48%);
+}
+
+.mobile-shell-header h1 {
+  font-size: clamp(1.55rem, 4.8vw, 2.45rem);
+  line-height: 0.95;
+  letter-spacing: -0.06em;
+}
+
+.hero-goal,
+.compact-goal {
+  max-width: 62ch;
+  color: #b9c4d8;
+  font-size: 0.94rem;
+}
+
+.top-status-row {
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  border-radius: 10px;
+  background: rgba(3, 7, 18, 0.64);
+}
+
+.tab-bar {
+  position: sticky;
+  top: 0.55rem;
+  z-index: 45;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 0.25rem;
+  padding: 0.3rem;
+  border: 1px solid rgba(148, 163, 184, 0.12);
+  border-radius: 12px;
+  background: rgba(7, 10, 18, 0.92);
+  backdrop-filter: blur(14px);
+}
+
+.tab {
+  border-radius: 8px;
+  border: 0;
+  padding: 0.68rem 0.5rem;
+  background: transparent;
+  color: #8f9db4;
+  font-weight: 800;
+}
+
+.tab.active {
+  background: #dbeafe;
+  color: #08111f;
+  box-shadow: none;
+}
+
+.view-stack {
+  gap: 0.8rem;
+}
+
+.section-heading {
+  margin-bottom: 0.75rem;
+  align-items: center;
+}
+
+.section-heading h2,
+.section-heading h3 {
+  letter-spacing: -0.035em;
+  line-height: 1.02;
+}
+
+.section-heading p,
+.item-card p,
+.focus-panel p,
+.tap-hint,
+small {
+  color: #9aa8bd;
+}
+
+.eyebrow {
+  color: #7dd3fc;
+  font-size: 0.68rem;
+  letter-spacing: 0.18em;
+}
+
+.today-card {
+  padding: 1rem;
+  border-color: rgba(125, 211, 252, 0.18);
+  background:
+    linear-gradient(180deg, rgba(11, 16, 29, 0.96), rgba(8, 12, 22, 0.92));
+}
+
+.today-card > .section-heading {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  padding-bottom: 0.9rem;
+  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
+}
+
+.primary-triage-button,
+button.primary,
+button:not(.ghost):not(.tab) {
+  border-radius: 10px;
+  border: 0;
+  background: #e0f2fe;
+  color: #07111f;
+  font-weight: 900;
+  box-shadow: none;
+}
+
+button.ghost,
+.import-label {
+  border-radius: 10px;
+  border-color: rgba(148, 163, 184, 0.16);
+  background: rgba(15, 23, 42, 0.62);
+  color: #dbeafe;
+}
+
+.today-grid {
+  grid-template-columns: minmax(0, 1.05fr) minmax(190px, 0.72fr) minmax(190px, 0.72fr);
+  gap: 0.7rem;
+}
+
+.today-focus-card,
+.today-release-card,
+.today-decision-card,
+.session-command-panel {
+  border-radius: 10px;
+  background: rgba(3, 7, 18, 0.42);
+}
+
+.today-focus-card {
+  border-color: rgba(125, 211, 252, 0.26);
+}
+
+.today-focus-card h3,
+.today-release-card h3,
+.today-decision-card h3 {
+  font-size: clamp(1.02rem, 2vw, 1.32rem);
+}
+
+.focus-badges,
+.button-inline-row,
+.filter-row {
+  gap: 0.4rem;
+}
+
+.pill,
+.tap-chip {
+  border-radius: 7px;
+  background: rgba(148, 163, 184, 0.12);
+  color: #cbd5e1;
+  font-weight: 800;
+}
+
+.accordion-board {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0.65rem;
+}
+
+.feature-column-details {
+  padding: 0.75rem;
+}
+
+.column-header {
+  align-items: center;
+  min-height: 0;
+}
+
+.column-header h3 {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.column-header p {
+  margin: 0.15rem 0 0;
+  font-size: 0.78rem;
+}
+
+.column-body,
+.list-stack,
+.compact-stack {
+  gap: 0.5rem;
+}
+
+.item-card {
+  padding: 0.72rem;
+  border-radius: 9px;
+  background: rgba(15, 23, 42, 0.52);
+}
+
+.item-card-header {
+  gap: 0.45rem;
+}
+
+.feature-signal-row {
+  margin-top: 0.55rem;
+  font-size: 0.78rem;
+}
+
+.triage-modal-backdrop,
+.editor-sheet-backdrop {
+  background: rgba(0, 0, 0, 0.72);
+  backdrop-filter: blur(5px);
+}
+
+input,
+textarea,
+select {
+  border-radius: 9px;
+  background: rgba(3, 7, 18, 0.74);
+}
+
+@media (max-width: 760px) {
+  .app-shell {
+    width: min(100% - 0.75rem, 100%);
+    padding-top: 0.45rem;
+    padding-bottom: 1.25rem;
+  }
+
+  .mobile-shell-header {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 0.65rem;
+    padding: 0.8rem;
+  }
+
+  .mobile-shell-header h1 {
+    font-size: 1.7rem;
+  }
+
+  .compact-goal {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    font-size: 0.86rem;
+  }
+
+  .top-status-row {
+    width: 100%;
+    justify-content: space-between;
+    padding: 0.45rem 0.55rem;
+  }
+
+  .tab-bar {
+    top: 0.25rem;
+    margin-top: 0.45rem;
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+    border-radius: 10px;
+  }
+
+  .tab {
+    min-height: 2.45rem;
+    padding: 0.52rem 0.1rem;
+    font-size: 0.72rem;
+  }
+
+  .card,
+  .focus-panel,
+  .item-card,
+  .markdown-card {
+    border-radius: 9px;
+  }
+
+  .today-card,
+  .primary-intake,
+  .mobile-cockpit,
+  .section-heading,
+  .secondary-nav {
+    padding: 0.75rem;
+  }
+
+  .today-card > .section-heading,
+  .section-heading {
+    grid-template-columns: 1fr;
+    gap: 0.65rem;
+    margin-bottom: 0.55rem;
+  }
+
+  .section-heading p {
+    display: none;
+  }
+
+  .today-grid,
+  .triage-recommendation-grid,
+  .roadmap-readiness-grid,
+  .roadmap-release-feature-links,
+  .editor-grid,
+  .focus-grid,
+  .sheet-summary-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .today-grid {
+    gap: 0.5rem;
+  }
+
+  .today-focus-card,
+  .today-release-card,
+  .today-decision-card {
+    padding: 0.75rem;
+  }
+
+  .today-release-card p,
+  .today-decision-card p,
+  .compact-stack small:nth-child(n + 2),
+  .tap-hint {
+    display: none;
+  }
+
+  .sticky-action-row,
+  .button-inline-row,
+  .button-row {
+    position: static;
+    display: grid;
+    grid-template-columns: 1fr;
+    padding: 0;
+    border: 0;
+    background: transparent;
+  }
+
+  .accordion-board {
+    grid-template-columns: 1fr;
+    gap: 0.45rem;
+  }
+
+  .feature-column-details:not([open]) {
+    padding-bottom: 0.55rem;
+  }
+
+  .feature-column-details summary::after {
+    font-size: 0.68rem;
+  }
+
+  .compact-feature-card p,
+  .parking-card small:nth-of-type(n + 2),
+  .pulse-card small {
+    display: none;
+  }
+
+  .item-card-header strong {
+    font-size: 0.95rem;
+    line-height: 1.15;
+  }
+
+  .filter-row {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  .triage-modal,
+  .editor-sheet {
+    border-radius: 14px 14px 0 0;
+  }
+}
+
+/* v0.4.2b — remove one more layer: command surface, not card museum. */
+@media (max-width: 760px) {
+  .mobile-shell-header.card,
+  .today-card.card {
+    border: 0;
+    background: transparent;
+    padding-inline: 0.25rem;
+    box-shadow: none;
+  }
+
+  .mobile-shell-header.card {
+    padding-top: 0.3rem;
+    padding-bottom: 0.15rem;
+  }
+
+  .mobile-shell-header h1 {
+    font-size: 1.55rem;
+  }
+
+  .compact-goal {
+    margin-top: 0.18rem;
+    font-size: 0.8rem;
+    color: #91a0b8;
+  }
+
+  .top-status-row {
+    width: auto;
+    justify-self: start;
+    padding: 0.26rem 0.42rem;
+    font-size: 0.74rem;
+    background: rgba(148, 163, 184, 0.07);
+  }
+
+  .top-status-row .ghost.small {
+    padding: 0.22rem 0.36rem;
+    font-size: 0.68rem;
+  }
+
+  .tab-bar {
+    margin-top: 0.25rem;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    background: rgba(7, 10, 18, 0.78);
+    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  }
+
+  .tab {
+    min-height: 2.15rem;
+    border-radius: 0;
+    font-size: 0.68rem;
+  }
+
+  .tab.active {
+    background: transparent;
+    color: #f8fbff;
+    box-shadow: inset 0 -2px 0 #7dd3fc;
+  }
+
+  .today-card > .section-heading {
+    padding: 0.65rem 0.15rem 0.7rem;
+    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
+  }
+
+  .today-card .section-heading h2 {
+    font-size: 1.14rem;
+    line-height: 1.05;
+  }
+
+  .today-card .section-heading .button-inline-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: 0.45rem;
+  }
+
+  .today-card .section-heading .ghost {
+    padding-inline: 0.62rem;
+    font-size: 0.78rem;
+    background: transparent;
+  }
+
+  .primary-triage-button {
+    min-height: 2.35rem;
+  }
+
+  .today-grid {
+    gap: 0;
+  }
+
+  .today-focus-card,
+  .today-release-card,
+  .today-decision-card {
+    border-radius: 0;
+    border-inline: 0;
+    border-top: 0;
+    border-bottom: 1px solid rgba(148, 163, 184, 0.13);
+    background: transparent;
+    padding: 0.7rem 0.15rem;
+  }
+
+  .today-focus-card {
+    border-color: rgba(125, 211, 252, 0.24);
+  }
+
+  .today-focus-card h3,
+  .today-release-card h3,
+  .today-decision-card h3 {
+    margin-bottom: 0.18rem;
+    font-size: 1rem;
+  }
+
+  .today-focus-card p {
+    margin: 0.25rem 0 0;
+    font-size: 0.84rem;
+    line-height: 1.35;
+  }
+
+  .focus-badges {
+    margin-top: 0.45rem;
+  }
+
+  .sticky-action-row {
+    grid-template-columns: 1fr 1fr;
+    gap: 0.4rem;
+    margin-top: 0.6rem;
+  }
+
+  .sticky-action-row .primary {
+    grid-column: 1 / -1;
+    min-height: 2.35rem;
+  }
+
+  .today-release-card,
+  .today-decision-card {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 0.55rem;
+  }
+
+  .today-release-card .eyebrow,
+  .today-decision-card .eyebrow {
+    grid-column: 1 / -1;
+    margin-bottom: -0.3rem;
+  }
+
+  .today-release-card .compact-stack,
+  .today-decision-card .button-inline-row {
+    display: none;
+  }
+
+  .today-release-card .ghost.small,
+  .today-decision-card .ghost.small {
+    display: inline-flex;
+    white-space: nowrap;
+  }
+
+  .accordion-board {
+    margin-top: 0.55rem;
+  }
+
+  .feature-column-details.card {
+    padding: 0.58rem 0.15rem;
+    border-width: 0 0 1px;
+    border-radius: 0;
+    background: transparent;
+  }
+
+  .column-header h3 {
+    font-size: 0.92rem;
+  }
+
+  .column-body {
+    padding-top: 0.45rem;
+  }
+
+  .item-card {
+    border-radius: 7px;
+    padding: 0.58rem;
+    background: rgba(148, 163, 184, 0.055);
+  }
+}
+
+/* v0.4.2c — mobile-native overflow fix: no clipped labels, no two-column action squeeze. */
+@media (max-width: 760px) {
+  html,
+  body,
+  #root,
+  .app-shell {
+    overflow-x: hidden;
+  }
+
+  .today-card .section-heading .button-inline-row,
+  .sticky-action-row,
+  .today-decision-card .button-inline-row {
+    grid-template-columns: 1fr;
+    width: 100%;
+  }
+
+  .today-card .section-heading .button-inline-row button,
+  .sticky-action-row button,
+  .today-release-card button,
+  .today-decision-card button {
+    width: 100%;
+    min-width: 0;
+    white-space: normal;
+  }
+
+  .today-release-card,
+  .today-decision-card {
+    grid-template-columns: 1fr;
+  }
+
+  .today-release-card .ghost.small,
+  .today-decision-card .ghost.small {
+    justify-content: center;
+  }
+
+  .tab {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .mobile-shell-header,
+  .today-card,
+  .today-card * {
+    max-width: 100%;
+  }
+}
+
+/* v0.4.2d — headline wrap guard for narrow phones. */
+@media (max-width: 760px) {
+  .section-heading h2,
+  .section-heading h3,
+  .today-focus-card h3,
+  .mobile-shell-header h1 {
+    max-width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    word-break: normal;
+  }
+
+  .today-card .section-heading h2 {
+    font-size: clamp(1rem, 5.2vw, 1.12rem);
+  }
+}
+
+/* v0.4.2e — grid child min-width fix for long goal headings. */
+@media (max-width: 760px) {
+  .section-heading > div,
+  .today-card > .section-heading > div {
+    min-width: 0;
+    max-width: 100%;
+  }
+
+  .today-card .section-heading h2 {
+    display: block;
+    width: 100%;
+    max-width: calc(100vw - 1.25rem);
+    line-height: 1.12;
+  }
+}