Give automations a visual chain with conditions and SMS, and match the pipeline board to the sales mockup.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/web/src/components/pipeline/DealCard.vue

@@ -43,7 +43,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
         <span class="badge" aria-hidden="true">{{ deal.initials }}</span>
         <div class="titles">
           <h3 @click.stop="emit('open', deal.id)">{{ deal.title }}</h3>
-          <p class="desc">{{ deal.description }}</p>
+          <p v-if="deal.description" class="desc">{{ deal.description }}</p>
         </div>
       </div>
       <button
@@ -56,23 +56,24 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
       </button>
     </div>
 
-    <div class="amount" dir="ltr">
-      <strong>{{ money.number }}</strong>
-      <span>{{ money.unit }}</span>
-    </div>
-
-    <div class="foot">
-      <img
-        class="avatar"
-        src="/brand/user-avatar.png"
-        alt=""
-        width="28"
-        height="28"
-      />
-      <span class="date">
-        <UiIcon name="calendar" :size="14" />
-        {{ deal.date }}
-      </span>
+    <div class="meta">
+      <div class="who">
+        <img
+          class="avatar"
+          src="/brand/user-avatar.png"
+          alt=""
+          width="28"
+          height="28"
+        />
+        <span class="date">
+          <UiIcon name="calendar" :size="14" />
+          {{ deal.date }}
+        </span>
+      </div>
+      <div class="amount" dir="ltr">
+        <strong>{{ money.number }}</strong>
+        <span>{{ money.unit }}</span>
+      </div>
     </div>
   </article>
 </template>
@@ -83,6 +84,8 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
   border-radius: 16px;
   padding: 1rem;
+  min-width: 0;
+  overflow: hidden;
   box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
   cursor: grab;
   transition:
@@ -146,6 +149,7 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
 
 .titles {
   min-width: 0;
+  flex: 1;
 }
 
 .titles h3 {
@@ -155,6 +159,11 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   line-height: 1.45;
   color: var(--ink);
   cursor: pointer;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow-wrap: anywhere;
 }
 
 .desc {
@@ -162,6 +171,9 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   color: var(--muted);
   font-size: 0.8rem;
   line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .menu {
@@ -180,12 +192,52 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   background: #f1f5f9;
 }
 
-.amount {
+.meta {
   margin-top: 0.85rem;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.who {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
+.avatar {
+  width: 28px;
+  height: 28px;
+  max-width: 28px;
+  border-radius: 999px;
+  object-fit: cover;
+  border: 1px solid var(--line);
+  flex: 0 0 auto;
+}
+
+.date {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  min-width: 0;
+  color: var(--muted);
+  font-size: 0.78rem;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.amount {
   text-align: left;
   display: grid;
   justify-items: start;
-  gap: 0.05rem;
+  gap: 0.02rem;
+  flex: 0 1 auto;
+  min-width: 0;
 }
 
 .amount strong {
@@ -193,6 +245,8 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   font-weight: 800;
   color: var(--ink);
   letter-spacing: -0.01em;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
 
 .amount span {
@@ -200,28 +254,4 @@ const colors = computed(() => PIPELINE_ACCENT[props.accent]);
   color: var(--muted);
   font-weight: 600;
 }
-
-.foot {
-  margin-top: 0.85rem;
-  display: flex;
-  align-items: center;
-  gap: 0.55rem;
-}
-
-.avatar {
-  width: 28px;
-  height: 28px;
-  border-radius: 999px;
-  object-fit: cover;
-  border: 1px solid var(--line);
-}
-
-.date {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.3rem;
-  color: var(--muted);
-  font-size: 0.78rem;
-  font-weight: 600;
-}
 </style>