feat(chat): warm welcome + suggested prompts for empty threads

The smoke-test runbook step 3 promised 'AI should greet you and
offer to scaffold something' but the empty-thread state was just
a logo + tagline. Replaced with:

- Project-aware greeting ('Welcome to <project name>.')
- One paragraph that names the affordances (paste brief, drop
  link, pick a starter)
- Four click-to-prefill suggestion chips that map to the smoke
  test entry points: scaffold a todo app, walk through a scope
  doc, plan a new idea, tour Vibn's capabilities.

Chips set the input value; user still hits send to commit.

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

components/vibn-chat/chat-panel.tsx

@@ -846,20 +846,70 @@ export function ChatPanel() {
       {/* Messages */}
       <div style={{ flex: 1, overflowY: "auto", padding: "16px 14px" }}>
         {messages.length === 0 && !sending && (
-          <div style={{ textAlign: "center", paddingTop: 40 }}>
+          <div style={{ paddingTop: 40, paddingBottom: 16, maxWidth: 540, margin: "0 auto" }}>
-            <div style={{
+            <div style={{ textAlign: "center", marginBottom: 28 }}>
-              width: 40, height: 40, borderRadius: "50%", background: "#1a1a1a",
+              <div style={{
-              display: "flex", alignItems: "center", justifyContent: "center",
+                width: 48, height: 48, borderRadius: "50%", background: "#1a1a1a",
-              margin: "0 auto 12px",
+                display: "flex", alignItems: "center", justifyContent: "center",
-            }}>
+                margin: "0 auto 14px",
-              <span style={{ color: "#fff", fontSize: "1rem", fontFamily: "var(--font-lora),serif" }}>V</span>
+              }}>
+                <span style={{ color: "#fff", fontSize: "1.15rem", fontFamily: "var(--font-lora),serif" }}>V</span>
+              </div>
+              <p style={{ fontSize: "1.05rem", fontWeight: 500, color: "#1a1a1a", marginBottom: 6, fontFamily: "var(--font-lora),serif" }}>
+                {activeProjectName ? `Welcome to ${activeProjectName}.` : "Welcome to Vibn."}
+              </p>
+              <p style={{ fontSize: "0.85rem", color: "#a09a90", lineHeight: 1.55, maxWidth: 420, margin: "0 auto" }}>
+                Tell me what you want to build and I&apos;ll scaffold it, run it in a preview, and ship it when you say so. Paste a brief, drop a link, or pick one of these to start:
+              </p>
+            </div>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+              {[
+                {
+                  label: "Build a Next.js todo app",
+                  prompt: "Build me a simple Next.js todo app. Scaffold it, start the preview, and walk me through what you did.",
+                },
+                {
+                  label: "Walk through my scope doc",
+                  prompt: "I'm going to paste a scope document next. Read it, summarize the product in 3 bullet points, and tell me what you'd build first.",
+                },
+                {
+                  label: "Help me plan a new idea",
+                  prompt: "I have a rough product idea. Ask me 3-5 questions to understand it, then propose a Plan we can work from.",
+                },
+                {
+                  label: "Show me what you can do",
+                  prompt: "Give me a 30-second tour of what you can do as Vibn. Keep it concrete — what tools you have, what you'd ship in the next 5 minutes if I said go.",
+                },
+              ].map((s) => (
+                <button
+                  key={s.label}
+                  type="button"
+                  onClick={() => setInput(s.prompt)}
+                  style={{
+                    textAlign: "left",
+                    padding: "12px 14px",
+                    borderRadius: 10,
+                    border: "1px solid #ece8e2",
+                    background: "#fdfcfa",
+                    fontSize: "0.83rem",
+                    color: "#1a1a1a",
+                    cursor: "pointer",
+                    transition: "background 0.12s, border-color 0.12s",
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.background = "#f6f2ec";
+                    e.currentTarget.style.borderColor = "#d9d2c5";
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.background = "#fdfcfa";
+                    e.currentTarget.style.borderColor = "#ece8e2";
+                  }}
+                >
+                  {s.label}
+                </button>
+              ))}
             </div>
-            <p style={{ fontSize: "0.88rem", fontWeight: 500, color: "#1a1a1a", marginBottom: 4 }}>
-              Vibn AI
-            </p>
-            <p style={{ fontSize: "0.78rem", color: "#a09a90", lineHeight: 1.5 }}>
-              Ask me to deploy an app, register a domain,<br />or help plan your next product.
-            </p>
           </div>
         )}