Experimental gui.

experimental/app/src/components/Advanced.tsx

@@ -0,0 +1,114 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "./ui/card";
+import { ConfigEditor } from "./ConfigEditor";
+import { Button, Input, Label } from "./ui";
+import { Check, Edit2, HelpCircle, X } from "lucide-react";
+
+export function Advanced() {
+  const [upstreamValue, setUpstreamValue] = useState("https://mywildcloud.org");
+  const [editingUpstream, setEditingUpstream] = useState(false);
+  const [tempUpstream, setTempUpstream] = useState(upstreamValue);
+  const handleUpstreamEdit = () => {
+    setTempUpstream(upstreamValue);
+    setEditingUpstream(true);
+  };
+
+  const handleUpstreamSave = () => {
+    setUpstreamValue(tempUpstream);
+    setEditingUpstream(false);
+  };
+
+  const handleUpstreamCancel = () => {
+    setTempUpstream(upstreamValue);
+    setEditingUpstream(false);
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Advanced Configuration</CardTitle>
+          <CardDescription>
+            Advanced settings and system configuration options
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div>
+            <h3 className="text-sm font-medium mb-2">
+              Configuration Management
+            </h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              Edit the raw YAML configuration file directly. This provides full
+              access to all configuration options.
+            </p>
+            <ConfigEditor />
+          </div>
+        </CardContent>
+      </Card>
+      {/* Upstream Section */}
+      <Card className="p-4 border-l-4 border-l-blue-500">
+        <div className="flex items-center justify-between mb-3">
+          <div>
+            <h3 className="font-medium">Upstream Configuration</h3>
+            <p className="text-sm text-muted-foreground">
+              External service endpoint
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button variant="ghost" size="sm">
+              <HelpCircle className="h-4 w-4" />
+            </Button>
+            {!editingUpstream && (
+              <Button variant="outline" size="sm" onClick={handleUpstreamEdit}>
+                <Edit2 className="h-4 w-4 mr-1" />
+                Edit
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {editingUpstream ? (
+          <div className="space-y-3">
+            <div>
+              <Label htmlFor="upstream-edit">Upstream URL</Label>
+              <Input
+                id="upstream-edit"
+                value={tempUpstream}
+                onChange={(e) => setTempUpstream(e.target.value)}
+                placeholder="https://example.com"
+                className="mt-1"
+              />
+            </div>
+            <div className="flex gap-2">
+              <Button size="sm" onClick={handleUpstreamSave}>
+                <Check className="h-4 w-4 mr-1" />
+                Save
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleUpstreamCancel}
+              >
+                <X className="h-4 w-4 mr-1" />
+                Cancel
+              </Button>
+            </div>
+          </div>
+        ) : (
+          <div>
+            <Label>Upstream URL</Label>
+            <div className="mt-1 p-2 bg-muted rounded-md font-mono text-sm">
+              {upstreamValue}
+            </div>
+          </div>
+        )}
+      </Card>
+    </div>
+  );
+}