fix: UI clarity — real estate section has clear header, input placeholder is descriptive, login page shows demo credentials hint

Made-with: Cursor

apps/client/src/app/components/ai-chat/ai-chat.component.html

@@ -308,6 +308,17 @@
         </div>
         <!-- Row 2: Property Tracking chips — only when feature flag is on -->
         @if (enableRealEstate) {
+          <div class="feature-section-header">
+            <span class="feature-section-icon">🏠</span>
+            <div>
+              <span class="feature-section-title">
+                Real Estate & Life Planning
+              </span>
+              <span class="feature-section-desc">
+                Track your properties and run retirement scenarios
+              </span>
+            </div>
+          </div>
           <div class="ai-suggestions__row ai-suggestions__row--realestate">
             <button
               class="ai-suggestion-chip ai-suggestion-chip--re"
@@ -427,7 +438,7 @@
         <textarea
           #inputField
           class="ai-input"
-          placeholder="Ask about your portfolio..."
+          placeholder="Ask about your portfolio, properties, retirement, or life decisions..."
           rows="1"
           [disabled]="isThinking"
           [(ngModel)]="inputValue"

apps/client/src/app/components/ai-chat/ai-chat.component.scss

@@ -597,6 +597,46 @@
 // Suggestion chips
 // ---------------------------------------------------------------------------
 
+.feature-section-header {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px 0 6px;
+  margin-top: 8px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+
+  :host-context(.theme-dark) & {
+    border-top-color: rgba(255, 255, 255, 0.08);
+  }
+}
+
+.feature-section-icon {
+  font-size: 18px;
+  line-height: 1.4;
+}
+
+.feature-section-title {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--primary-color, #7c3aed);
+
+  :host-context(.theme-dark) & {
+    color: #a78bfa;
+  }
+}
+
+.feature-section-desc {
+  display: block;
+  font-size: 11px;
+  color: var(--text-secondary, #9ca3af);
+  margin-top: 2px;
+
+  :host-context(.theme-dark) & {
+    color: #9ca3af;
+  }
+}
+
 .ai-suggestions {
   padding: 0.5rem 0.75rem 0.25rem;
   display: flex;

login.html

@@ -225,6 +225,14 @@
         <div class="spinner"></div>
       </button>
 
+      <p class="demo-hint" style="
+        text-align: center;
+        font-size: 12px;
+        color: #9ca3af;
+        margin-top: 16px;">
+        Demo: test@example.com / password
+      </p>
+
     </div>
 
     <script>