viveworker 0.7.0-beta.2 → 0.7.0

package/viveworker.env.example

@@ -101,3 +101,7 @@ APP_SERVER_NOTIFY_COMPLETIONS=0
 # hazBase wallet / x402 backend
 HAZBASE_API_URL=https://api.hazbase.com
 HAZBASE_DEVICE_LABEL=viveworker
+# Require paired-device approval before `viveworker share pay` signs x402
+# payments. Set to 0 only for trusted smoke tests / CI.
+VIVEWORKER_PAYMENT_APPROVALS=1
+VIVEWORKER_PAYMENT_APPROVAL_TIMEOUT_SEC=600

package/web/app.css

@@ -33,10 +33,16 @@
 }
 
 html {
+  width: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
   background: var(--bg);
 }
 
 body {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
   margin: 0;
   min-height: 100vh;
   overflow-x: hidden;
@@ -63,8 +69,17 @@ code {
   background: rgba(156, 181, 197, 0.12);
 }
 
+#app {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+}
+
 .app-shell {
+  width: 100%;
+  max-width: 100%;
   min-height: 100vh;
+  overflow-x: clip;
   padding:
     max(1rem, env(safe-area-inset-top))
     1rem
@@ -389,6 +404,8 @@ code {
 }
 
 .app-main {
+  width: 100%;
+  max-width: 100%;
   display: grid;
   gap: 1rem;
   min-width: 0;
@@ -403,6 +420,16 @@ code {
 .choice-stack {
   display: grid;
   gap: 1rem;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.timeline-shell,
+.timeline-list,
+.timeline-thread-filter,
+.timeline-thread-filter__row {
+  min-width: 0;
+  max-width: 100%;
 }
 
 .detail-shell,
@@ -892,12 +919,37 @@ code {
   gap: 0.18rem;
 }
 
+.settings-row__title-line {
+  min-width: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.42rem;
+}
+
 .settings-row__title,
 .settings-info-row__label {
+  min-width: 0;
   font-size: 1rem;
   line-height: 1.3;
 }
 
+.settings-row__badge {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.18rem;
+  padding: 0.08rem 0.42rem 0.1rem;
+  border-radius: 999px;
+  border: 1px solid rgba(240, 180, 40, 0.26);
+  background: rgba(240, 180, 40, 0.11);
+  color: rgba(255, 220, 140, 0.96);
+  font-size: 0.66rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  text-transform: uppercase;
+}
+
 .settings-row__subtitle {
   color: var(--muted);
   font-size: 0.84rem;
@@ -1117,6 +1169,11 @@ code {
   background: linear-gradient(180deg, rgba(28, 40, 49, 0.98), rgba(20, 27, 34, 0.96));
 }
 
+.wallet-flow-banner--session-expired {
+  border-color: rgba(255, 190, 92, 0.28);
+  background: linear-gradient(180deg, rgba(49, 39, 28, 0.98), rgba(24, 28, 30, 0.96));
+}
+
 .wallet-flow-banner__eyebrow {
   margin: 0;
   font-size: 0.72rem;
@@ -1232,6 +1289,42 @@ code {
   background: rgba(53, 26, 29, 0.96);
 }
 
+.wallet-beta-notice {
+  border-color: rgba(240, 180, 40, 0.18);
+  background: rgba(42, 34, 22, 0.78);
+}
+
+.wallet-beta-notice p {
+  margin: 0;
+  color: rgba(255, 220, 140, 0.9);
+  font-size: 0.84rem;
+  line-height: 1.5;
+}
+
+.settings-update-notice {
+  margin-top: 0.85rem;
+  border-color: rgba(121, 196, 255, 0.22);
+  background: linear-gradient(180deg, rgba(28, 40, 49, 0.98), rgba(20, 27, 34, 0.96));
+}
+
+.settings-update-notice__title {
+  margin: 0;
+  font-weight: 700;
+  color: var(--text);
+}
+
+.settings-update-notice__command {
+  display: block;
+  width: fit-content;
+  max-width: 100%;
+  margin-top: 0.35rem;
+  padding: 0.32rem 0.5rem;
+  border-radius: 10px;
+  background: rgba(3, 10, 16, 0.38);
+  color: rgba(233, 247, 255, 0.92);
+  overflow-wrap: anywhere;
+}
+
 /* Brand attribution at the very bottom of the wallet settings page.
    Sits below the advanced-actions panel as plain small text so it reads
    as a credit, not another card. The link inherits the muted color and
@@ -1292,7 +1385,8 @@ code {
   border-color: rgba(112, 202, 157, 0.16);
 }
 
-.wallet-step-card--locked {
+.wallet-step-card--locked,
+.wallet-step-card--comingSoon {
   opacity: 0.78;
 }
 
@@ -1379,7 +1473,8 @@ code {
   color: rgba(205, 220, 231, 0.6);
 }
 
-.wallet-step-card__status--optional {
+.wallet-step-card__status--optional,
+.wallet-step-card__status--comingSoon {
   border-color: rgba(240, 180, 40, 0.22);
   background: rgba(240, 180, 40, 0.12);
   color: rgba(255, 220, 140, 0.96);
@@ -1706,12 +1801,17 @@ code {
 }
 
 .card-list {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
   display: grid;
   gap: 0.85rem;
 }
 
 .item-card {
   width: 100%;
+  min-width: 0;
+  overflow: hidden;
   display: grid;
   gap: 0.8rem;
   padding: 0.95rem;
@@ -1725,6 +1825,7 @@ code {
 }
 
 .item-card__header {
+  min-width: 0;
   display: flex;
   justify-content: space-between;
   gap: 0.8rem;
@@ -1732,11 +1833,12 @@ code {
 }
 
 .item-card__header-right {
+  flex: 0 0 auto;
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.55rem;
-  min-width: fit-content;
+  min-width: 0;
 }
 
 .item-card__header--completion-readonly {
@@ -1746,18 +1848,21 @@ code {
 
 .item-card__meta,
 .detail-pills {
+  min-width: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 0.55rem;
 }
 
 .item-card__content {
+  min-width: 0;
   display: grid;
   gap: 0.38rem;
 }
 
 .item-card__intent,
 .detail-intent {
+  min-width: 0;
   margin: 0;
   display: inline-flex;
   align-items: center;
@@ -1765,6 +1870,7 @@ code {
   color: rgba(236, 248, 255, 0.86);
   font-size: 0.84rem;
   line-height: 1.35;
+  overflow-wrap: anywhere;
 }
 
 .item-card__intent {
@@ -1781,6 +1887,7 @@ code {
 }
 
 .item-card__title {
+  min-width: 0;
   margin: 0;
   font-size: 1.08rem;
   line-height: 1.35;
@@ -1788,6 +1895,7 @@ code {
 }
 
 .item-card__summary {
+  min-width: 0;
   margin: 0;
   color: var(--muted);
   line-height: 1.45;
@@ -1799,6 +1907,7 @@ code {
 }
 
 .item-card__thread {
+  min-width: 0;
   margin: 0;
   color: var(--muted);
   font-size: 0.82rem;
@@ -2072,6 +2181,8 @@ code {
 
 .timeline-entry {
   width: 100%;
+  min-width: 0;
+  overflow: hidden;
   display: grid;
   gap: 0.55rem;
   padding: 0.92rem;
@@ -2259,6 +2370,7 @@ code {
 }
 
 .timeline-entry__meta {
+  min-width: 0;
   display: grid;
   grid-template-columns: minmax(0, 1fr) auto;
   gap: 0.75rem;
@@ -2276,6 +2388,7 @@ code {
   min-width: 0;
   display: inline-flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 0.42rem;
   color: #edf8ff;
   font-size: 0.8rem;
@@ -2309,6 +2422,7 @@ code {
 }
 
 .timeline-entry__body {
+  min-width: 0;
   display: grid;
   gap: 0.34rem;
 }
@@ -2379,6 +2493,7 @@ code {
 
 .timeline-entry__title,
 .timeline-entry__summary {
+  min-width: 0;
   margin: 0;
   overflow-wrap: anywhere;
 }
@@ -4692,7 +4807,9 @@ button[aria-busy="true"]:not(.is-loading) {
 }
 
 .provider-filter {
-  display: inline-flex;
+  width: 100%;
+  min-width: 0;
+  display: flex;
   align-items: center;
   gap: 0.25rem;
   padding: 0.2rem;
@@ -4703,8 +4820,13 @@ button[aria-busy="true"]:not(.is-loading) {
   max-width: 100%;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+.provider-filter::-webkit-scrollbar {
+  display: none;
 }
 .provider-filter__button {
+  min-width: 0;
   appearance: none;
   background: transparent;
   color: var(--text-muted, #9aa6b2);