@elizaos/app-core 2.0.0-alpha.10

package/src/components/stream/StreamSettings.tsx

@@ -0,0 +1,506 @@
+/**
+ * StreamSettings — in-stream settings panel.
+ *
+ * Panels:
+ *   1. Channel / destination picker
+ *   2. Overlay widget manager (enable/disable + per-widget config)
+ *   3. Stream source selector (stream-tab, game, custom-url)
+ */
+
+import { useApp } from "@elizaos/app-core/state";
+import { Button, Checkbox, Input, Switch } from "@elizaos/ui";
+import { useState } from "react";
+import type { StreamSourceType } from "./helpers";
+import { isSupportedStreamUrl, STREAM_SOURCE_LABELS } from "./helpers";
+import { getAllWidgets } from "./overlays/registry";
+import type { WidgetConfigField, WidgetInstance } from "./overlays/types";
+import type { UseOverlayLayout } from "./overlays/useOverlayLayout";
+
+type Section = "channel" | "overlays" | "source";
+
+interface StreamSettingsProps {
+  destinations: Array<{ id: string; name: string }>;
+  activeDestination: { id: string; name: string } | null;
+  onDestinationChange: (id: string) => void;
+  streamLive: boolean;
+  streamSource: { type: StreamSourceType; url?: string };
+  activeGameViewerUrl: string;
+  onSourceChange: (sourceType: StreamSourceType, customUrl?: string) => void;
+  overlayLayout: UseOverlayLayout;
+  onClose: () => void;
+}
+
+// ---------------------------------------------------------------------------
+// Config field renderer
+// ---------------------------------------------------------------------------
+
+function ConfigField({
+  fieldKey,
+  field,
+  value,
+  onChange,
+}: {
+  fieldKey: string;
+  field: WidgetConfigField;
+  value: unknown;
+  onChange: (key: string, value: unknown) => void;
+}) {
+  switch (field.type) {
+    case "boolean":
+      return (
+        <label
+          key={fieldKey}
+          htmlFor={`config-${fieldKey}`}
+          className="flex items-center gap-2 text-[12px] text-txt cursor-pointer"
+        >
+          <Checkbox
+            id={`config-${fieldKey}`}
+            checked={Boolean(value)}
+            onCheckedChange={(checked) => onChange(fieldKey, !!checked)}
+          />
+          {field.label}
+        </label>
+      );
+    case "number":
+      return (
+        <label
+          key={fieldKey}
+          htmlFor={`config-${fieldKey}`}
+          className="flex flex-col gap-0.5"
+        >
+          <span className="text-[11px] text-muted">{field.label}</span>
+          <Input
+            id={`config-${fieldKey}`}
+            type="number"
+            min={field.min}
+            max={field.max}
+            value={
+              typeof value === "number" ? value : (field.default as number)
+            }
+            onChange={(e) => onChange(fieldKey, Number(e.target.value))}
+            className="h-8 bg-bg-muted border-border text-xs rounded px-2"
+          />
+        </label>
+      );
+    case "select":
+      return (
+        <label
+          key={fieldKey}
+          htmlFor={`config-${fieldKey}`}
+          className="flex flex-col gap-0.5"
+        >
+          <span className="text-[11px] text-muted">{field.label}</span>
+          <select
+            id={`config-${fieldKey}`}
+            value={typeof value === "string" ? value : String(field.default)}
+            onChange={(e) => onChange(fieldKey, e.target.value)}
+            className="bg-bg-muted border border-border text-txt text-[12px] rounded px-2 py-1 cursor-pointer"
+          >
+            {field.options?.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </label>
+      );
+    case "color":
+      return (
+        <label
+          key={fieldKey}
+          htmlFor={`config-${fieldKey}`}
+          className="flex items-center gap-2"
+        >
+          <span className="text-[11px] text-muted">{field.label}</span>
+          <input
+            id={`config-${fieldKey}`}
+            type="color"
+            value={typeof value === "string" ? value : String(field.default)}
+            onChange={(e) => onChange(fieldKey, e.target.value)}
+            className="w-8 h-6 rounded border border-border cursor-pointer bg-transparent"
+          />
+        </label>
+      );
+    default:
+      return (
+        <label
+          key={fieldKey}
+          htmlFor={`config-${fieldKey}`}
+          className="flex flex-col gap-0.5"
+        >
+          <span className="text-[11px] text-muted">{field.label}</span>
+          <Input
+            id={`config-${fieldKey}`}
+            type="text"
+            value={
+              typeof value === "string" ? value : String(field.default ?? "")
+            }
+            onChange={(e) => onChange(fieldKey, e.target.value)}
+            className="h-8 bg-bg-muted border-border text-xs rounded px-2"
+          />
+        </label>
+      );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Widget row
+// ---------------------------------------------------------------------------
+
+function WidgetRow({
+  instance,
+  onToggle,
+  onUpdate,
+}: {
+  instance: WidgetInstance;
+  onToggle: () => void;
+  onUpdate: (patch: Partial<Pick<WidgetInstance, "config">>) => void;
+}) {
+  const { t } = useApp();
+  const [expanded, setExpanded] = useState(false);
+  const def = getAllWidgets().find((d) => d.type === instance.type);
+  const hasConfig = def && Object.keys(def.configSchema).length > 0;
+
+  return (
+    <div className="border border-border rounded-lg overflow-hidden">
+      <div className="flex items-center gap-2 px-3 py-2 bg-[rgba(255,255,255,0.03)]">
+        {/* Toggle */}
+        <Switch
+          checked={instance.enabled}
+          onCheckedChange={onToggle}
+          title={
+            instance.enabled
+              ? t("streamsettings.DisableWidget")
+              : t("streamsettings.EnableWidget")
+          }
+        />
+
+        <div className="flex-1 min-w-0">
+          <div className="text-[12px] font-medium text-txt truncate">
+            {def?.name ?? instance.type}
+          </div>
+          {def?.description && (
+            <div className="text-[10px] text-muted truncate">
+              {def.description}
+            </div>
+          )}
+        </div>
+
+        {hasConfig && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setExpanded((x) => !x)}
+            className="text-muted hover:text-txt text-[10px] h-6 px-1.5 py-0 bg-bg-muted"
+          >
+            {expanded
+              ? t("streamsettings.ConfigExpanded")
+              : t("streamsettings.ConfigCollapsed")}
+          </Button>
+        )}
+      </div>
+
+      {expanded && hasConfig && def && (
+        <div className="px-3 py-2 border-t border-border flex flex-col gap-2">
+          {Object.entries(def.configSchema).map(([key, field]) => (
+            <ConfigField
+              key={key}
+              fieldKey={key}
+              field={field}
+              value={instance.config[key] ?? field.default}
+              onChange={(k, v) =>
+                onUpdate({ config: { ...instance.config, [k]: v } })
+              }
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Main panel
+// ---------------------------------------------------------------------------
+
+export function StreamSettings({
+  destinations,
+  activeDestination,
+  onDestinationChange,
+  streamLive,
+  streamSource,
+  activeGameViewerUrl,
+  onSourceChange,
+  overlayLayout,
+  onClose,
+}: StreamSettingsProps) {
+  const { t } = useApp();
+  const [section, setSection] = useState<Section>("channel");
+  const [customUrlInput, setCustomUrlInput] = useState(
+    streamSource.type === "custom-url" ? (streamSource.url ?? "") : "",
+  );
+  const trimmedCustomUrl = customUrlInput.trim();
+  const customUrlValid = isSupportedStreamUrl(trimmedCustomUrl);
+
+  const { layout, toggleWidget, updateWidget, resetLayout } = overlayLayout;
+
+  const navBtn = (id: Section, label: string) => (
+    <Button
+      variant={section === id ? "default" : "ghost"}
+      size="sm"
+      onClick={() => setSection(id)}
+      className={`px-3 py-1.5 text-[12px] font-medium rounded-lg transition-colors h-auto ${
+        section === id
+          ? "bg-accent/20 text-txt hover:bg-accent/30"
+          : "text-muted hover:text-txt hover:bg-bg-muted"
+      }`}
+    >
+      {label}
+    </Button>
+  );
+
+  return (
+    <div
+      className="absolute inset-0 z-50 flex items-end justify-center"
+      style={{ background: "rgba(0,0,0,0.6)", backdropFilter: "blur(4px)" }}
+    >
+      <div
+        className="w-full max-w-xl rounded-t-2xl border border-border overflow-hidden flex flex-col"
+        style={{ background: "rgba(14,18,28,0.97)", maxHeight: "80vh" }}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b border-border flex-shrink-0">
+          <span className="text-[13px] font-semibold text-txt">
+            {t("streamsettings.StreamSettings")}
+          </span>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={onClose}
+            className="text-muted hover:text-txt transition-colors text-lg leading-none p-1 h-auto"
+          >
+            ×
+          </Button>
+        </div>
+
+        {/* Nav */}
+        <div className="flex gap-1 px-4 py-2 border-b border-border flex-shrink-0">
+          {navBtn("channel", t("streamsettings.NavChannel"))}
+          {navBtn("overlays", t("streamsettings.NavOverlays"))}
+          {navBtn("source", t("streamsettings.NavSource"))}
+        </div>
+
+        {/* Content */}
+        <div className="overflow-y-auto flex-1 px-4 py-4">
+          {/* ── Channel / destination ─────────────────────────────── */}
+          {section === "channel" && (
+            <div className="flex flex-col gap-3">
+              <p className="text-[12px] text-muted">
+                {t("streamsettings.SelectWhereToBroa")}
+              </p>
+
+              {destinations.length === 0 ? (
+                <div className="text-[12px] text-muted border border-border rounded-lg p-4 text-center">
+                  {t("streamsettings.NoStreamingDestina")}
+                  <br />
+
+                  {t("streamsettings.InstallAStreaming")}
+                </div>
+              ) : (
+                <div className="flex flex-col gap-2">
+                  {destinations.map((d) => {
+                    const active = d.id === activeDestination?.id;
+                    return (
+                      <Button
+                        key={d.id}
+                        disabled={streamLive}
+                        variant="outline"
+                        title={
+                          streamLive
+                            ? t("streamsettings.StopStreamToChangeChannel")
+                            : undefined
+                        }
+                        onClick={() => onDestinationChange(d.id)}
+                        className={`w-full flex items-center justify-start gap-3 px-4 py-3 h-auto rounded-lg border transition-colors disabled:opacity-50 text-left ${
+                          active
+                            ? "border-accent/60 bg-accent/10"
+                            : "border-border bg-white/[0.03] hover:border-accent/30 hover:bg-white/[0.05]"
+                        }`}
+                      >
+                        <span
+                          className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${
+                            active
+                              ? "bg-accent shadow-[0_0_6px_theme(colors.accent.DEFAULT)]"
+                              : "bg-muted/30"
+                          }`}
+                        />
+                        <span
+                          className={`text-[13px] font-medium ${active ? "text-txt" : "text-txt"}`}
+                        >
+                          {d.name}
+                        </span>
+                        {active && (
+                          <span className="ml-auto text-[10px] text-txt font-semibold uppercase tracking-wide">
+                            {t("appsview.Active")}
+                          </span>
+                        )}
+                      </Button>
+                    );
+                  })}
+                </div>
+              )}
+
+              {streamLive && (
+                <p className="text-[11px] text-[#f59e0b] border border-[#f59e0b]/30 rounded px-3 py-1.5 bg-[#f59e0b]/5">
+                  {t("streamsettings.StreamIsLiveSt")}
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* ── Overlay widgets ────────────────────────────────────── */}
+          {section === "overlays" && (
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center justify-between">
+                <p className="text-[12px] text-muted">
+                  {t("streamsettings.ToggleAndConfigure")}
+                </p>
+                <Button
+                  variant="link"
+                  size="sm"
+                  onClick={resetLayout}
+                  className="text-[11px] text-muted hover:text-danger transition-colors p-0 h-auto"
+                >
+                  {t("streamsettings.ResetDefaults")}
+                </Button>
+              </div>
+
+              {layout.widgets.length === 0 ? (
+                <div className="text-[12px] text-muted border border-border rounded-lg p-4 text-center">
+                  {t("streamsettings.NoWidgetsAvailable")}
+                </div>
+              ) : (
+                <div className="flex flex-col gap-2">
+                  {layout.widgets.map((instance) => (
+                    <WidgetRow
+                      key={instance.id}
+                      instance={instance}
+                      onToggle={() => toggleWidget(instance.id)}
+                      onUpdate={(patch) => updateWidget(instance.id, patch)}
+                    />
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* ── Stream source ──────────────────────────────────────── */}
+          {section === "source" && (
+            <div className="flex flex-col gap-3">
+              <p className="text-[12px] text-muted">
+                {t("streamsettings.ChooseWhatContent")}
+              </p>
+
+              {(["stream-tab", "game", "custom-url"] as StreamSourceType[]).map(
+                (st) => {
+                  const isGame = st === "game";
+                  const disabled = isGame && !activeGameViewerUrl.trim();
+                  const active = streamSource.type === st;
+
+                  return (
+                    <div key={st}>
+                      <Button
+                        variant="outline"
+                        disabled={disabled}
+                        onClick={() => {
+                          if (st !== "custom-url") {
+                            onSourceChange(
+                              st,
+                              isGame ? activeGameViewerUrl : undefined,
+                            );
+                          }
+                        }}
+                        className={`w-full h-auto flex items-center justify-start gap-3 px-4 py-3 rounded-lg border transition-colors text-left ${
+                          active && st !== "custom-url"
+                            ? "border-accent/60 bg-accent/10"
+                            : "border-border bg-white/[0.03] hover:border-accent/30 hover:bg-white/[0.05]"
+                        }`}
+                      >
+                        <span
+                          className={`w-2.5 h-2.5 rounded-full flex-shrink-0 ${
+                            active && st !== "custom-url"
+                              ? "bg-accent"
+                              : "bg-muted/30"
+                          }`}
+                        />
+                        <div>
+                          <div
+                            className={`text-[13px] font-medium ${active && st !== "custom-url" ? "text-txt" : "text-txt"}`}
+                          >
+                            {STREAM_SOURCE_LABELS[st]}
+                          </div>
+                          <div className="text-[10px] text-muted mt-1.5">
+                            {st === "stream-tab" &&
+                              t("streamsettings.CaptureStreamBrowserTab")}
+                            {st === "game" &&
+                              (activeGameViewerUrl.trim()
+                                ? `${t("streamsettings.ActiveGame")} ${activeGameViewerUrl}`
+                                : t("streamsettings.NoGameActive"))}
+                            {st === "custom-url" &&
+                              t("streamsettings.BroadcastFromCustomUrl")}
+                          </div>
+                        </div>
+                      </Button>
+
+                      {st === "custom-url" && (
+                        <div
+                          className={`mt-1 flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-colors ${
+                            active
+                              ? "border-accent/60 bg-accent/10"
+                              : "border-border bg-white/[0.03]"
+                          }`}
+                        >
+                          <Input
+                            placeholder={t("streamsettings.httpsYourUrlCom")}
+                            value={customUrlInput}
+                            onChange={(e) => setCustomUrlInput(e.target.value)}
+                            className="flex-1 bg-transparent border-none p-0 h-auto text-xs focus-visible:ring-0 shadow-none placeholder:text-muted/40"
+                            onKeyDown={(e) => {
+                              if (e.key === "Enter" && customUrlValid) {
+                                onSourceChange("custom-url", trimmedCustomUrl);
+                              }
+                            }}
+                          />
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            disabled={!customUrlValid}
+                            onClick={() => {
+                              if (customUrlValid) {
+                                onSourceChange("custom-url", trimmedCustomUrl);
+                              }
+                            }}
+                            className="px-2 py-1 h-auto bg-accent/20 text-txt text-[11px] font-semibold hover:bg-accent/30 transition-colors"
+                          >
+                            {t("streamsettings.Use")}
+                          </Button>
+                        </div>
+                      )}
+                      {st === "custom-url" &&
+                        trimmedCustomUrl &&
+                        !customUrlValid && (
+                          <p className="mt-1 px-1 text-[10px] text-danger">
+                            {t("streamsettings.CustomURLsMustSta")}
+                          </p>
+                        )}
+                    </div>
+                  );
+                },
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/stream/StreamTerminal.tsx

@@ -0,0 +1,94 @@
+import { client } from "@elizaos/app-core/api";
+import { useApp } from "@elizaos/app-core/state";
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface TerminalLine {
+  id: string;
+  type: "command" | "stdout" | "stderr" | "exit" | "error";
+  text: string;
+  ts: number;
+}
+
+export function StreamTerminal() {
+  const { t } = useApp();
+  const [lines, setLines] = useState<TerminalLine[]>([]);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const lineIdRef = useRef(0);
+
+  const addLine = useCallback((type: TerminalLine["type"], text: string) => {
+    const id = String(++lineIdRef.current);
+    setLines((prev) => {
+      const next = [...prev, { id, type, text, ts: Date.now() }];
+      return next.length > 300 ? next.slice(-300) : next;
+    });
+  }, []);
+
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  });
+
+  useEffect(() => {
+    const unbind = client.onWsEvent(
+      "terminal-output",
+      (data: Record<string, unknown>) => {
+        const event = data.event as string;
+        switch (event) {
+          case "start":
+            addLine("command", `$ ${data.command as string}`);
+            break;
+          case "stdout":
+            addLine("stdout", data.data as string);
+            break;
+          case "stderr":
+            addLine("stderr", data.data as string);
+            break;
+          case "exit":
+            addLine("exit", `Process exited with code ${data.code as number}`);
+            break;
+          case "error":
+            addLine("error", `Error: ${data.data as string}`);
+            break;
+        }
+      },
+    );
+    return unbind;
+  }, [addLine]);
+
+  return (
+    <div className="h-full w-full bg-bg-muted flex flex-col">
+      <div className="flex items-center px-3 py-1.5 border-b border-border bg-bg shrink-0">
+        <span className="text-[11px] font-mono text-muted tracking-wide">
+          {t("streamterminal.TERMINAL")}
+        </span>
+      </div>
+      <div
+        ref={scrollRef}
+        className="flex-1 overflow-y-auto overflow-x-hidden px-3 py-2 font-mono text-[12px] leading-[1.6] whitespace-pre-wrap break-all"
+      >
+        {lines.length === 0 ? (
+          <span className="text-muted italic text-[11px]">
+            {t("streamterminal.WaitingForTerminal")}
+          </span>
+        ) : (
+          lines.map((line) => (
+            <div
+              key={line.id}
+              className={
+                line.type === "command"
+                  ? "text-txt font-bold"
+                  : line.type === "stderr" || line.type === "error"
+                    ? "text-destructive"
+                    : line.type === "exit"
+                      ? "text-muted"
+                      : "text-txt"
+              }
+            >
+              {line.text}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}