From 1654173540cd592deb4493f6a168c58ae9961fd3 Mon Sep 17 00:00:00 2001 From: OpenClaw Bot Date: Tue, 12 May 2026 22:22:07 +0200 Subject: [PATCH] fix: sharpen buildpulse mobile presentation --- package.json | 2 +- src/App.tsx | 20 +- src/index.css | 662 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 673 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 4d1fa40..e1b2b49 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 195e6b3..299af40 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1531,8 +1531,8 @@ function App() {
-

BuildPulse v0.4.1

-

{appState.project.name}

+

BuildPulse v0.4.2

+

BuildPulse

Current goal: {appState.project.current_goal || 'Classify new ideas before they become work.'}

@@ -2426,15 +2426,15 @@ function App() {

Today

-

{appState.project.current_goal || 'Classify new ideas before they become work.'}

-

BuildPulse now starts with the next sane action — not the whole database spilled onto the floor.

+

Capture → Brief → Build

+

One decision at a time. Capture the idea, pick the next move, hand it to an agent.

@@ -2471,22 +2471,22 @@ function App() {

Current release

{selectedRelease?.name || 'No release selected'}

-

{selectedRelease?.goal || 'Pick a release when this project needs structure.'}

+

{selectedRelease?.goal || 'Pick the release that matters now.'}

{activeReleaseSummary} {selectedReleaseBlockers.length ? `${selectedReleaseBlockers.length} required item(s) still open` : 'No required blockers detected'} {selectedRelease?.forbidden_feature_titles.length ? `Forbidden right now: ${selectedRelease.forbidden_feature_titles.slice(0, 3).join(', ')}` : 'No forbidden-work list yet'}
- +

Needs decision

{duplicateParkingGroups.length ? `${duplicateParkingGroups.length} duplicate idea group${duplicateParkingGroups.length === 1 ? '' : 's'}` : 'No obvious duplicate pile-ups'}

-

{appState.parking_lot.length} parked idea{appState.parking_lot.length === 1 ? '' : 's'} · {appState.pulses.length} history event{appState.pulses.length === 1 ? '' : 's'}

+

{appState.parking_lot.length} parked · {appState.pulses.length} pulses

- - + +
diff --git a/src/index.css b/src/index.css index 7ee1132..50fdc68 100644 --- a/src/index.css +++ b/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; + } +}