minor UI fixes

src/components/ConnectionPill.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from "react";
+import { invoke } from "@tauri-apps/api/core";
+
+type State = "unknown" | "connected" | "offline";
+
+// ponytail: a title-bar pill that probes the LLM endpoint on mount and on
+// click. Shows ● connected / ○ offline so the DM knows their backend is up
+// before generating. Replaces the inert "My Campaign" placeholder.
+export function ConnectionPill() {
+  const [state, setState] = useState<State>("unknown");
+  const [models, setModels] = useState(0);
+
+  async function test() {
+    setState("unknown");
+    try {
+      const result = await invoke<{ ok: boolean; models: string[]; error: string }>("test_connection");
+      if (result.ok) {
+        setState("connected");
+        setModels(result.models.length);
+      } else {
+        setState("offline");
+      }
+    } catch {
+      setState("offline");
+    }
+  }
+
+  useEffect(() => {
+    void test();
+  }, []);
+
+  const color =
+    state === "connected"
+      ? "var(--color-success)"
+      : state === "offline"
+        ? "var(--color-danger)"
+        : "var(--color-text-dim)";
+  const label =
+    state === "connected"
+      ? `LLM · ${models} models`
+      : state === "offline"
+        ? "LLM offline"
+        : "LLM…";
+
+  return (
+    <button
+      onClick={test}
+      data-tauri-no-drag
+      className="ml-2 flex items-center gap-1.5 text-[var(--color-text-dim)] text-xs hover:text-[var(--color-text-secondary)] transition-colors cursor-pointer"
+      title="Click to re-test LLM connection"
+      aria-label={`LLM connection: ${state}`}
+    >
+      <span
+        className="w-1.5 h-1.5 rounded-full"
+        style={{ backgroundColor: color }}
+      />
+      <span className="hidden sm:inline">{label}</span>
+    </button>
+  );
+}