INIT

src/components/ConfigScreen.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import { useStore } from "../state/store";
+import { ConnectionForm } from "./ConnectionForm";
+import { DerezLogoLink } from "./DerezLogo";
+import { EditIcon, TrashIcon } from "./Icons";
+
+export function ConfigScreen() {
+  const config = useStore((s) => s.config);
+  const saveConnection = useStore((s) => s.saveConnection);
+  const removeConnection = useStore((s) => s.removeConnection);
+  const setActiveConnection = useStore((s) => s.setActiveConnection);
+
+  const [editingId, setEditingId] = useState<string | null>(null);
+
+  return (
+    <div className="screen">
+      <div className="card">
+        <div style={{ marginBottom: 18 }}>
+          <DerezLogoLink height={30} />
+        </div>
+        <h1>Connect to your Hermes</h1>
+        <p className="lead">
+          Point this app at your Hermes <strong>API Server</strong> (the OpenAI-compatible endpoint),
+          not the dashboard. It authenticates with your <code>API_SERVER_KEY</code>.
+        </p>
+
+        <ConnectionForm onSave={saveConnection} />
+
+        {config.connections.length > 0 && (
+          <div className="section" style={{ marginTop: 24, marginBottom: 0 }}>
+            <h3>Saved connections</h3>
+            {config.connections.map((c) => (
+              <div key={c.id}>
+                <div className="kv">
+                  <span
+                    className="link-btn"
+                    style={{ cursor: "pointer" }}
+                    onClick={() => setActiveConnection(c.id)}
+                  >
+                    {c.name}
+                    {c.profile ? ` · ${c.profile}` : ""}
+                  </span>
+                  <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    {c.sameOrigin ? "same origin" : c.baseUrl}
+                    <button
+                      className={`icon-btn ${editingId === c.id ? "active" : ""}`}
+                      title="Edit"
+                      onClick={() => setEditingId(editingId === c.id ? null : c.id)}
+                    >
+                      <EditIcon width={15} height={15} />
+                    </button>
+                    <button className="icon-btn" title="Remove" onClick={() => removeConnection(c.id)}>
+                      <TrashIcon width={15} height={15} />
+                    </button>
+                  </span>
+                </div>
+                {editingId === c.id && (
+                  <div style={{ margin: "10px 0 18px" }}>
+                    <ConnectionForm
+                      initial={c}
+                      onSave={async (conn) => {
+                        await saveConnection(conn);
+                        setEditingId(null);
+                      }}
+                      onCancel={() => setEditingId(null)}
+                      saveLabel="Save changes"
+                    />
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}