empty state: primary CTA button instead of hunt-for-plus text

The '+ new topic' button (commit 47a4242 unlocked it when the
workspace roster was empty) is a tiny 34x34 corner icon that
disappears against the header on a truly empty page. Users kept
asking why they can't start a research topic when in fact they
could — the target was just invisible.

Replace the 'Hit the + button to launch the wizard' hint with a
proper primary CTA: coral pill 'Start a research topic' with the
Plus icon, centered in the empty sidebar. Same treatment for
LoopsList → 'Start a loop'.

The wizard flow's auto-provisioning behavior means the empty-
workspace path is now the happy path — one click and you get
everything (topic, team, agents, container). The empty state
should invite that click, not require a hunt.

frontend/src/components/dashboard/LoopsList.tsx

@@ -181,18 +181,51 @@ export function LoopsList({
             Loading…
           </p>
         ) : loops.length === 0 ? (
-          <p
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 14,
+              padding: "32px 20px",
+              textAlign: "center",
+            }}
+          >
+            <div
               style={{
                 fontFamily: mono,
                 fontSize: 11,
-              color: "#5a5a62",
+                color: "#8a8a92",
-              textAlign: "center",
-              padding: 24,
                 lineHeight: 1.6,
               }}
             >
-            No loops yet. Hit the + button to launch the wizard.
+              No loops yet.
-          </p>
+              <br />
+              The wizard sets up the agents for you.
+            </div>
+            <button
+              type="button"
+              onClick={() => setWizardOpen(true)}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "10px 18px",
+                borderRadius: 10,
+                border: "1px solid rgba(255,111,97,.5)",
+                background: "rgba(255,111,97,.12)",
+                color: "#ff8a7a",
+                cursor: "pointer",
+                fontFamily: mono,
+                fontSize: 12,
+                fontWeight: 600,
+                letterSpacing: ".02em",
+              }}
+            >
+              <Plus aria-hidden size={14} />
+              Start a loop
+            </button>
+          </div>
         ) : (
           loops.map((l) => {
             const on = l.id === selectedId;

frontend/src/components/dashboard/ResearchList.tsx

@@ -289,18 +289,51 @@ export function ResearchList({
             Loading…
           </p>
         ) : topics.length === 0 ? (
-          <p
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 14,
+              padding: "32px 20px",
+              textAlign: "center",
+            }}
+          >
+            <div
               style={{
                 fontFamily: mono,
                 fontSize: 11,
-              color: "#5a5a62",
+                color: "#8a8a92",
-              textAlign: "center",
-              padding: 24,
                 lineHeight: 1.6,
               }}
             >
-            No topics yet. Hit the + button to launch the wizard.
+              No research topics yet.
-          </p>
+              <br />
+              The wizard sets up the agents for you.
+            </div>
+            <button
+              type="button"
+              onClick={() => setWizardOpen(true)}
+              style={{
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 8,
+                padding: "10px 18px",
+                borderRadius: 10,
+                border: "1px solid rgba(255,111,97,.5)",
+                background: "rgba(255,111,97,.12)",
+                color: "#ff8a7a",
+                cursor: "pointer",
+                fontFamily: mono,
+                fontSize: 12,
+                fontWeight: 600,
+                letterSpacing: ".02em",
+              }}
+            >
+              <Plus aria-hidden size={14} />
+              Start a research topic
+            </button>
+          </div>
         ) : (
           topics.map((t) => {
             const on = t.id === selectedId;