Feat: Verbinden-Tab Rework — zwei Leitungen (Modell + Gedaechtnis) sichtbar getrennt

- Hero-Diagramm: lokaler Agent -> Leitung 1 (Gateway/Modell) + Leitung 2 (MCP/Gedaechtnis) - Live-Status pro Leitung: neuer Endpoint GET /api/connect/health (llama-swap + mem0-Sidecar) - Zwei nummerierte Setup-Spalten statt flacher Tab-Leiste; Memory-MCP aus tools{} geloest - Claude-Code-Snippet: echte env-Anleitung (ANTHROPIC_BASE_URL/AUTH_TOKEN/MODEL + Shim-Hinweis), da Gateway kein /v1/messages bietet (live verifiziert: :9001 405, :8080 404) - MCP-Scriptpfad jetzt klar nur Leitung 2 zugeordnet Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-27 22:30:32 +02:00
parent d3157d2535
commit f82729f88e
10 changed files with 428 additions and 207 deletions
@@ -1,4 +1,4 @@
-import{r as K,a as Hv,g as Hr,R as Um,c as q2,j as Ne,l as Z2,S as K2,b as Vx,T as $2}from"./index-CazXw6yq.js";/**
+import{r as K,a as Hv,g as Hr,R as Um,c as q2,j as Ne,l as Z2,S as K2,b as Vx,T as $2}from"./index-COVfHYKu.js";/**
 * @license
 * Copyright 2010-2023 Three.js Authors
 * SPDX-License-Identifier: MIT
@@ -7,8 +7,8 @@
    <link rel="manifest" href="/manifest.webmanifest" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Mission Control 2.0</title>
-    <script type="module" crossorigin src="/assets/index-CazXw6yq.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-SdhW3gX3.css">
+    <script type="module" crossorigin src="/assets/index-COVfHYKu.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BSw7DIjB.css">
  </head>
  <body>
    <div id="root"></div>
@@ -257,7 +257,18 @@ export interface ConnectTool {
 export interface ConnectResp {
  host: string
  gateway_url: string
-  tools: Record<string, ConnectTool>
+  mc_url: string
+  tools: Record<string, ConnectTool>   // Leitung 1 — Modell (IDEs/Agenten → Gateway)
+  memory: ConnectTool                   // Leitung 2 — Gedächtnis (separater MCP-Server)
+}
+
+export interface ConnectLine {
+  ok: boolean
+  detail: string
+}
+export interface ConnectHealth {
+  gateway: ConnectLine
+  memory: ConnectLine
 }

 export interface Memory {
@@ -7,6 +7,7 @@ import {
  api,
  type AgentStatus,
  type ConnectResp,
+  type ConnectHealth,
  type DiscoverResp,
  type DraftsResp,
  type HermesBrainResp,
@@ -37,6 +38,7 @@ export const qk = {
  discover: ["discover"] as const,
  drafts: (target?: string) => ["drafts", target ?? ""] as const,
  connect: (params?: string) => ["connect", params ?? ""] as const,
+  connectHealth: ["connect-health"] as const,
  memory: (q?: string, category?: string) => ["memory", q ?? "", category ?? ""] as const,
  memoryGraph: ["memory-graph"] as const,
 }
@@ -101,6 +103,14 @@ export const useConnect = (params?: string) =>
    queryFn: () => api<ConnectResp>(params ? `/api/connect?${params}` : "/api/connect"),
  })

+// Live-Status der zwei Leitungen (Gateway + Gedächtnis) — alle 15s aktualisiert.
+export const useConnectHealth = () =>
+  useQuery({
+    queryKey: qk.connectHealth,
+    queryFn: () => api<ConnectHealth>("/api/connect/health"),
+    refetchInterval: 15000,
+  })
+
 export const useMemory = (opts?: { q?: string; category?: string; limit?: number }) =>
  useQuery({
    queryKey: qk.memory(opts?.q, opts?.category),
@@ -1,17 +1,90 @@
 import { useState } from "react"
-import { Check, Copy, Terminal, Info, Globe, FolderOpen } from "lucide-react"
-import { useConnect } from "@/lib/queries"
+import {
+  Check, Copy, Cpu, Brain, Globe, FolderOpen, Laptop, ArrowRight,
+  Info, CircleCheck, CircleX, Loader2,
+} from "lucide-react"
+import { useConnect, useConnectHealth } from "@/lib/queries"
+import type { ConnectTool, ConnectLine } from "@/lib/api"
 import { cn } from "@/lib/utils"

+// Dateiziel je Tool — nur Hinweis im Editor-Kopf, keine Logik.
+const FILE_NAMES: Record<string, string> = {
+  cline: "cline_settings.json",
+  cursor: "Settings → Models",
+  opencode: "opencode.jsonc",
+  zed: "settings.json",
+  continue: "~/.continue/config.json",
+  claude_code: "~/.zshrc / env",
+}
+
+function StatusBadge({ line, loading }: { line?: ConnectLine; loading: boolean }) {
+  if (loading || !line) {
+    return (
+      <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-muted-foreground">
+        <Loader2 className="h-3 w-3 animate-spin" /> prüfe…
+      </span>
+    )
+  }
+  return line.ok ? (
+    <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-emerald-400">
+      <CircleCheck className="h-3 w-3" /> {line.detail}
+    </span>
+  ) : (
+    <span className="inline-flex items-center gap-1 text-[10px] font-semibold text-red-400">
+      <CircleX className="h-3 w-3" /> {line.detail}
+    </span>
+  )
+}
+
+// Schwarzes „Editor-Fenster" mit Ampel-Dots + Kopieren-Knopf.
+function CodeWindow({
+  tool, fileName, accent, copied, onCopy,
+}: {
+  tool: ConnectTool
+  fileName: string
+  accent: "teal" | "violet"
+  copied: boolean
+  onCopy: () => void
+}) {
+  return (
+    <div className="flex flex-col border border-border/60 bg-black/60 rounded-2xl overflow-hidden shadow-2xl">
+      <div className="flex h-11 items-center justify-between px-4 border-b border-border/40 bg-black/40 shrink-0">
+        <div className="flex items-center gap-1.5">
+          <span className="h-3 w-3 rounded-full bg-red-500/80" />
+          <span className="h-3 w-3 rounded-full bg-amber-500/80" />
+          <span className="h-3 w-3 rounded-full bg-emerald-500/80" />
+        </div>
+        <div className="flex items-center gap-1.5 text-[10px] font-mono text-muted-foreground/75 bg-background/30 px-3 py-1 rounded-md border border-border/20">
+          <span>{fileName}</span>
+        </div>
+        <button
+          onClick={onCopy}
+          className="flex h-7 px-2.5 items-center gap-1.5 rounded-lg border border-border/40 bg-background/30 text-[10px] font-semibold text-muted-foreground hover:text-foreground hover:bg-background/60 transition-all cursor-pointer"
+        >
+          {copied ? <Check className="h-3.5 w-3.5 text-emerald-400" /> : <Copy className="h-3.5 w-3.5" />}
+          <span>{copied ? "Kopiert" : "Kopieren"}</span>
+        </button>
+      </div>
+      <pre className={cn(
+        "p-5 overflow-x-auto text-xs font-mono whitespace-pre leading-relaxed scrollbar-thin select-text bg-black/10",
+        accent === "teal" ? "text-cyan-200/90" : "text-violet-200/90",
+      )}>
+        <code>{tool.snippet}</code>
+      </pre>
+    </div>
+  )
+}
+
 export function ConnectView() {
  const [host, setHost] = useState(localStorage.getItem("mc_host") || "192.168.178.151")
  const [mcpPath, setMcpPath] = useState(localStorage.getItem("mc_mcp_path") || "")
  const [active, setActive] = useState("cline")
-  const [copied, setCopied] = useState(false)
+  const [copied, setCopied] = useState<"model" | "memory" | null>(null)

  const params = new URLSearchParams({ host })
  if (mcpPath) params.set("mcp_path", mcpPath)
  const { data, error: dataErr } = useConnect(params.toString())
+  const { data: health, isLoading: healthLoading } = useConnectHealth()
  const error = dataErr ? String(dataErr) : ""

  function saveHost(v: string) {
@@ -26,11 +99,11 @@ export function ConnectView() {

  const tool = data?.tools[active]

-  async function copy() {
-    if (!tool) return
-    await navigator.clipboard.writeText(tool.snippet)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 1500)
+  async function copy(which: "model" | "memory", snippet?: string) {
+    if (!snippet) return
+    await navigator.clipboard.writeText(snippet)
+    setCopied(which)
+    setTimeout(() => setCopied(null), 1500)
  }

  return (
@@ -41,11 +114,62 @@ export function ConnectView() {
          Verbindung &amp; Integration
        </h1>
        <p className="text-sm text-muted-foreground">
-          Kopiere vorgefertigte Konfigurationsdateien für deinen lokalen PC (IDEs, Cline, Roo Code, Cursor), um direkt auf das geteilte Gedächtnis und den Auto-Swap-Gateway der Box zuzugreifen.
+          Binde deinen lokalen Agenten an die Box an — über <span className="text-foreground">zwei getrennte Leitungen</span>:
+          das Modell (Gateway) und das geteilte Gedächtnis (MCP).
        </p>
      </div>

-      {/* Connection Variables Panel */}
+      {/* Hero: die zwei Leitungen */}
+      <div className="p-5 rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md shadow-lg shadow-black/10">
+        <div className="grid gap-4 md:grid-cols-[170px_1fr] items-center">
+          {/* Lokaler Agent */}
+          <div className="rounded-2xl border border-border/60 bg-background/40 p-4 text-center">
+            <Laptop className="h-7 w-7 mx-auto text-muted-foreground" />
+            <div className="mt-2 text-sm font-semibold text-foreground">Dein lokaler Agent</div>
+            <div className="text-[11px] text-muted-foreground">Cline · Cursor · Zed …</div>
+          </div>
+
+          {/* Zwei Leitungen */}
+          <div className="flex flex-col gap-2.5">
+            {/* Leitung 1 — Modell */}
+            <div className="flex items-center gap-3">
+              <ArrowRight className="h-4 w-4 text-muted-foreground shrink-0" />
+              <div className="flex-1 rounded-xl border border-primary/25 bg-primary/5 px-3.5 py-2.5">
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-2 text-xs font-semibold text-primary">
+                    <Cpu className="h-3.5 w-3.5" /> Leitung 1 — Modell
+                  </div>
+                  <StatusBadge line={health?.gateway} loading={healthLoading} />
+                </div>
+                <div className="mt-1 text-[11px] font-mono text-primary/80">
+                  Gateway · :9001/v1 · model auto
+                </div>
+              </div>
+            </div>
+            {/* Leitung 2 — Gedächtnis */}
+            <div className="flex items-center gap-3">
+              <ArrowRight className="h-4 w-4 text-muted-foreground shrink-0" />
+              <div className="flex-1 rounded-xl border border-violet-500/25 bg-violet-500/5 px-3.5 py-2.5">
+                <div className="flex items-center justify-between gap-2">
+                  <div className="flex items-center gap-2 text-xs font-semibold text-violet-300">
+                    <Brain className="h-3.5 w-3.5" /> Leitung 2 — Gedächtnis
+                  </div>
+                  <StatusBadge line={health?.memory} loading={healthLoading} />
+                </div>
+                <div className="mt-1 text-[11px] font-mono text-violet-300/80">
+                  MCP · mcp_memory.py · separat
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <p className="mt-3.5 text-[11px] text-muted-foreground leading-relaxed">
+          Der Gateway liefert <span className="text-foreground">nur das LLM</span>. Das geteilte Gedächtnis läuft über einen
+          <span className="text-foreground"> eigenen MCP-Server</span> — beide werden unabhängig eingerichtet.
+        </p>
+      </div>
+
+      {/* Gemeinsame Variablen */}
      <div className="grid gap-4 md:grid-cols-2 p-5 rounded-2xl border border-border/60 bg-card/45 backdrop-blur-md shadow-lg shadow-black/10">
        <div className="space-y-1.5">
          <label className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
@@ -61,13 +185,14 @@ export function ConnectView() {

        <div className="space-y-1.5">
          <label className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground flex items-center gap-1.5">
-            <FolderOpen className="h-3.5 w-3.5 text-primary" /> Lokaler MCP-Scriptpfad
+            <FolderOpen className="h-3.5 w-3.5 text-violet-400" /> Lokaler MCP-Scriptpfad
+            <span className="text-violet-400/70 normal-case font-semibold tracking-normal">(nur Leitung 2)</span>
          </label>
          <input
            value={mcpPath}
            onChange={(e) => saveMcpPath(e.target.value)}
            placeholder="z.B. F:\Coding Stuff\mission-control-2\mcp\mcp_memory.py"
-            className="w-full h-9 rounded-lg border border-border/60 bg-background/40 px-3 font-mono text-xs outline-none focus:ring-1 focus:ring-primary/50 text-foreground"
+            className="w-full h-9 rounded-lg border border-border/60 bg-background/40 px-3 font-mono text-xs outline-none focus:ring-1 focus:ring-violet-500/50 text-foreground"
          />
        </div>
      </div>
@@ -79,69 +204,78 @@ export function ConnectView() {
      )}

      {data && (
-        <div className="space-y-4">
-          {/* Tool Tab Bar */}
-          <div className="flex flex-wrap gap-1 bg-card/20 p-1 border border-border/40 rounded-xl max-w-fit">
-            {Object.entries(data.tools).map(([key, t]) => (
-              <button
-                key={key}
-                onClick={() => setActive(key)}
-                className={cn(
-                  "rounded-lg px-4 py-1.5 text-xs font-semibold tracking-wide uppercase transition-all cursor-pointer",
-                  active === key 
-                    ? "bg-primary text-primary-foreground shadow-md shadow-primary/10" 
-                    : "text-muted-foreground hover:text-foreground",
+        <div className="grid gap-5 lg:grid-cols-2">
+          {/* Leitung 1 — Modell anbinden */}
+          <div className="space-y-3 rounded-2xl border border-border/60 border-t-2 border-t-primary/70 bg-card/30 p-4">
+            <div>
+              <div className="flex items-center gap-2 text-sm font-space font-bold text-foreground">
+                <span className="flex h-5 w-5 items-center justify-center rounded-md bg-primary/15 text-primary text-[11px]">1</span>
+                Modell anbinden
+              </div>
+              <p className="text-[11px] text-muted-foreground mt-0.5">Wähle dein Tool — das Snippet zeigt auf den Gateway.</p>
+            </div>
+
+            {/* Tool-Picker */}
+            <div className="flex flex-wrap gap-1.5">
+              {Object.entries(data.tools).map(([key, t]) => (
+                <button
+                  key={key}
+                  onClick={() => setActive(key)}
+                  className={cn(
+                    "rounded-lg px-3 py-1.5 text-[11px] font-semibold tracking-wide transition-all cursor-pointer",
+                    active === key
+                      ? "bg-primary text-primary-foreground shadow-md shadow-primary/10"
+                      : "border border-border/50 text-muted-foreground hover:text-foreground",
+                  )}
+                >
+                  {t.label}
+                </button>
+              ))}
+            </div>
+
+            {tool && (
+              <>
+                {tool.note && (
+                  <div className="flex items-start gap-2.5 p-3 rounded-xl bg-primary/5 border border-primary/20 text-[11px] text-muted-foreground leading-relaxed">
+                    <Info className="h-4 w-4 text-primary shrink-0 mt-0.5" />
+                    <span>{tool.note}</span>
+                  </div>
                )}
-              >
-                {t.label}
-              </button>
-            ))}
+                <CodeWindow
+                  tool={tool}
+                  fileName={FILE_NAMES[active] || "config.json"}
+                  accent="teal"
+                  copied={copied === "model"}
+                  onCopy={() => copy("model", tool.snippet)}
+                />
+              </>
+            )}
          </div>

-          {tool && (
-            <div className="space-y-3">
-              {/* Note / Info */}
-              {tool.note && (
-                <div className="flex items-start gap-2.5 p-3 rounded-xl bg-primary/5 border border-primary/20 text-xs text-muted-foreground leading-relaxed">
-                  <Info className="h-4.5 w-4.5 text-primary shrink-0 mt-0.5" />
-                  <span>{tool.note}</span>
-                </div>
-              )}
-
-              {/* Editor Mockup Window */}
-              <div className="flex flex-col border border-border/60 bg-black/60 rounded-2xl overflow-hidden shadow-2xl">
-                {/* Editor Header Bar */}
-                <div className="flex h-11 items-center justify-between px-4 border-b border-border/40 bg-black/40 shrink-0">
-                  {/* Left: Window Control Dots */}
-                  <div className="flex items-center gap-1.5">
-                    <span className="h-3 w-3 rounded-full bg-red-500/80 shadow-md shadow-red-500/10" />
-                    <span className="h-3 w-3 rounded-full bg-amber-500/80 shadow-md shadow-amber-500/10" />
-                    <span className="h-3 w-3 rounded-full bg-emerald-500/80 shadow-md shadow-emerald-500/10" />
-                  </div>
-                  
-                  {/* Center: File Title */}
-                  <div className="flex items-center gap-1.5 text-[10px] font-mono text-muted-foreground/75 bg-background/30 px-3 py-1 rounded-md border border-border/20">
-                    <Terminal className="h-3.5 w-3.5 text-primary" />
-                    <span>{active === "cline" || active === "cursor" ? "config.json" : "settings.json"}</span>
-                  </div>
-
-                  {/* Right: Copy Action */}
-                  <button
-                    onClick={copy}
-                    className="flex h-7 px-2.5 items-center gap-1.5 rounded-lg border border-border/40 bg-background/30 text-[10px] font-semibold text-muted-foreground hover:text-foreground hover:bg-background/60 transition-all cursor-pointer"
-                  >
-                    {copied ? <Check className="h-3.5 w-3.5 text-emerald-400" /> : <Copy className="h-3.5 w-3.5" />}
-                    <span>{copied ? "Kopiert" : "Kopieren"}</span>
-                  </button>
-                </div>
-
-                {/* Editor Code Area */}
-                <pre className="p-5 overflow-x-auto text-xs font-mono text-cyan-200/90 whitespace-pre leading-relaxed scrollbar-thin select-text bg-black/10">
-                  <code>{tool.snippet}</code>
-                </pre>
+          {/* Leitung 2 — Gedächtnis anbinden */}
+          <div className="space-y-3 rounded-2xl border border-border/60 border-t-2 border-t-violet-500/70 bg-card/30 p-4">
+            <div>
+              <div className="flex items-center gap-2 text-sm font-space font-bold text-foreground">
+                <span className="flex h-5 w-5 items-center justify-center rounded-md bg-violet-500/15 text-violet-300 text-[11px]">2</span>
+                Gedächtnis anbinden
+                <span className="text-[10px] font-medium text-muted-foreground normal-case">optional</span>
              </div>
+              <p className="text-[11px] text-muted-foreground mt-0.5">Ein MCP-Block — gilt zusätzlich für <em>jedes</em> Tool aus Schritt 1.</p>
            </div>
-          )}
+
+            <div className="flex items-start gap-2.5 p-3 rounded-xl bg-violet-500/5 border border-violet-500/20 text-[11px] text-muted-foreground leading-relaxed">
+              <Info className="h-4 w-4 text-violet-400 shrink-0 mt-0.5" />
+              <span>{data.memory.note}</span>
+            </div>
+
+            <CodeWindow
+              tool={data.memory}
+              fileName="mcp.json"
+              accent="violet"
+              copied={copied === "memory"}
+              onCopy={() => copy("memory", data.memory.snippet)}
+            />
+          </div>
        </div>
      )}
    </div>