fix(ui): improve watchlist entry feedback

web/src/index.css

@@ -1257,6 +1257,101 @@ body {
   box-shadow: 0 18px 50px rgba(15, 23, 42, 0.07);
 }
 
+.entry-card {
+  display: flex;
+  height: 100%;
+  min-width: 0;
+  flex-direction: column;
+  border: 1px solid var(--border);
+  border-radius: var(--bl-radius-card);
+  background: var(--card);
+  padding: 20px;
+  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.05);
+  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
+}
+
+.entry-card:hover {
+  border-color: var(--border-strong);
+  box-shadow: var(--card-shadow);
+  transform: translateY(-1px);
+}
+
+.entry-mode-pill,
+.entry-state-pill {
+  display: inline-flex;
+  min-height: 24px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: 0 10px;
+  font-size: 11px;
+  font-weight: 760;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.entry-mode-pill.is-real {
+  border-color: color-mix(in oklab, var(--bl-info) 28%, var(--border));
+  background: var(--bl-info-muted);
+  color: var(--bl-info);
+}
+
+.entry-mode-pill.is-paper {
+  border-color: color-mix(in oklab, var(--bl-emphasis) 24%, var(--border));
+  background: color-mix(in oklab, var(--bl-emphasis) 10%, var(--card));
+  color: color-mix(in oklab, var(--bl-emphasis) 72%, var(--foreground));
+}
+
+.entry-state-pill {
+  background: color-mix(in oklab, var(--muted) 64%, var(--card));
+  color: var(--muted-foreground);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.entry-state-pill.state-locked,
+.entry-state-pill.state-confirmed {
+  border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
+  background: var(--bl-success-muted);
+  color: var(--bl-success);
+}
+
+.entry-state-pill.state-blocked,
+.entry-state-pill.state-orphan {
+  border-color: color-mix(in oklab, var(--bl-danger) 28%, var(--border));
+  background: var(--bl-danger-muted);
+  color: var(--bl-danger);
+}
+
+.entry-state-pill.state-submitted {
+  border-color: color-mix(in oklab, var(--bl-warning) 28%, var(--border));
+  background: var(--bl-warning-muted);
+  color: color-mix(in oklab, var(--bl-warning) 76%, var(--foreground));
+}
+
+.watchlist-feedback {
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 12px 14px;
+  font-size: 13px;
+  font-weight: 680;
+  line-height: 1.5;
+}
+
+.watchlist-feedback.is-success {
+  border-color: color-mix(in oklab, var(--bl-success) 28%, var(--border));
+  background: var(--bl-success-muted);
+  color: var(--bl-success);
+}
+
+.watchlist-feedback.is-error {
+  border-color: color-mix(in oklab, var(--bl-danger) 28%, var(--border));
+  background: var(--bl-danger-muted);
+  color: var(--bl-danger);
+}
+
 .product-tabs {
   gap: 8px;
   width: fit-content;

web/src/tabs/EntriesTab.tsx

@@ -101,24 +101,34 @@ const NAV_TABS = [
 const tabClass = (isActive: boolean) =>
     `min-h-9 rounded-lg px-3 text-xs font-semibold transition flex items-center gap-2 whitespace-nowrap ${isActive ? "border border-[var(--border-strong)] bg-[var(--accent-soft)] text-[var(--foreground)] shadow-sm" : "text-[var(--muted-foreground)] hover:bg-[var(--muted)] hover:text-[var(--foreground)]"}`;
 
+const entryModeClass = (isRealTrade: boolean) =>
+    `entry-mode-pill ${isRealTrade ? 'is-real' : 'is-paper'}`;
+
 export const EntriesTab = ({ botState = DEFAULT_BOT_STATE }: EntriesTabProps) => {
     const { user } = useAuth();
     const [entries, setEntries] = useState<Entry[]>([]);
     const [editingEntry, setEditingEntry] = useState<Entry | null>(null);
     const [activeTab, setActiveTab] = useState("paperActive");
     const [isAdding, setIsAdding] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [feedback, setFeedback] = useState<{ tone: 'success' | 'error'; message: string } | null>(null);
 
     // Filter Logic
     const filteredEntries = filterEntriesByTab(entries, activeTab);
 
     const fetchEntries = async () => {
         if (!user) return;
+        setLoading(true);
         try {
             const data = await fetchManualEntries();
             setEntries(data as Entry[]);
+            setFeedback((current) => current?.tone === 'error' ? null : current);
         } catch (err: unknown) {
             const message = err instanceof Error ? err.message : String(err);
             console.error("Error fetching entries:", message);
+            setFeedback({ tone: 'error', message: `Failed to load watchlist entries: ${message}` });
+        } finally {
+            setLoading(false);
         }
     };
 
@@ -128,24 +138,36 @@ export const EntriesTab = ({ botState = DEFAULT_BOT_STATE }: EntriesTabProps) =>
 
     const handleDelete = async (id: string) => {
         if (!confirm('Permanently delete this watchlist entry?')) return;
-        await deleteManualEntry(id);
+        try {
-        fetchEntries();
+            await deleteManualEntry(id);
+            setFeedback({ tone: 'success', message: 'Watchlist entry deleted.' });
+            await fetchEntries();
+        } catch (err: unknown) {
+            const message = err instanceof Error ? err.message : String(err);
+            setFeedback({ tone: 'error', message: `Failed to delete entry: ${message}` });
+        }
     };
 
     const handleClone = async (entry: Entry) => {
-        await createManualEntry(buildClonedEntryPayload(entry, crypto.randomUUID()) as unknown as ManualEntryPayload);
+        try {
-        fetchEntries();
+            await createManualEntry(buildClonedEntryPayload(entry, crypto.randomUUID()) as unknown as ManualEntryPayload);
+            setFeedback({ tone: 'success', message: `${entry.symbol} cloned as a suspended entry.` });
+            await fetchEntries();
+        } catch (err: unknown) {
+            const message = err instanceof Error ? err.message : String(err);
+            setFeedback({ tone: 'error', message: `Failed to clone entry: ${message}` });
+        }
     };
 
     const entryCards = filteredEntries.map((entry) => {
         const entryState = deriveEntryState(entry, botState);
         return (
-            <article key={entry.stock_instance_id} className="group flex h-full flex-col rounded-[var(--bl-radius-card)] border border-[var(--border)] bg-[var(--card)] p-5 shadow-sm transition hover:border-[var(--border-strong)] hover:shadow-[var(--card-shadow)]">
+            <article key={entry.stock_instance_id} className="entry-card group">
                     <div className="mb-5 flex items-start justify-between gap-4">
                         <div className="min-w-0 space-y-2">
                             <h4 className="m-0 truncate text-xl font-semibold tracking-tight text-[var(--foreground)]">{entry.symbol}</h4>
                             <div className="flex items-center gap-2">
-                                <span className={`rounded-full px-2.5 py-1 text-[11px] font-semibold ${entry.is_real_trade ? 'bg-blue-500/15 text-blue-300' : 'bg-violet-500/15 text-violet-300'}`}>
+                                <span className={entryModeClass(entry.is_real_trade)}>
                                     {entry.is_real_trade ? 'Real' : 'Paper'}
                                 </span>
                                 {entry.label && (
@@ -259,9 +281,23 @@ export const EntriesTab = ({ botState = DEFAULT_BOT_STATE }: EntriesTabProps) =>
                     </Button>
                 ))}
             </div>
+            {feedback && (
+                <div className={`watchlist-feedback is-${feedback.tone}`} role="status">
+                    {feedback.message}
+                </div>
+            )}
             <div className="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
+                {loading && filteredEntries.length === 0 && (
+                    <div className="ux-empty-state col-span-full">
+                        <div>
+                            <LayoutGrid size={34} className="mx-auto mb-4 text-[var(--muted-foreground)]" />
+                            <strong>Loading entries</strong>
+                            <span>Fetching your saved watchlist and manual entries.</span>
+                        </div>
+                    </div>
+                )}
                 {entryCards}
-                {filteredEntries.length === 0 && (
+                {!loading && filteredEntries.length === 0 && (
                     <div className="ux-empty-state col-span-full">
                         <div>
                             <LayoutGrid size={34} className="mx-auto mb-4 text-[var(--muted-foreground)]" />