@mndrk/agx 2.0.25 → 2.0.32

package/cloud-runtime/standalone/app/welcome/page.tsx

@@ -3,53 +3,200 @@
 import { useEffect, useState, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import { ChatPreview } from "@/components/chat-ui/ChatPreview";
+import { updateUserPreferences } from "@/services/userPreferences";
+import { PROVIDER_CLIS, type ProviderId } from "@/lib/provider-clis";
+import {
+  Check,
+  Circle,
+  Copy,
+  ChevronDown,
+  ExternalLink,
+  Terminal,
+  AlertCircle,
+} from "lucide-react";
+
+interface CliInfo {
+  id: ProviderId;
+  name: string;
+  description: string;
+  installCmd: string;
+  docsUrl: string;
+  installNote?: string;
+  recommended?: boolean;
+  installed: boolean | null; // null = still checking
+}
+
+const CLI_DEFS: Omit<CliInfo, "installed">[] = PROVIDER_CLIS.map((provider) => ({
+  id: provider.id,
+  name: provider.label,
+  description: provider.description,
+  installCmd: provider.installCmd,
+  docsUrl: provider.docsUrl,
+  installNote: provider.installNote,
+  recommended: provider.recommended,
+}));
 
 type ReadyState = "checking" | "ready" | "needs-setup" | "error";
 
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [text]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className="p-1.5 rounded-md hover:bg-[var(--muted)] transition-colors text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+      title="Copy command"
+    >
+      {copied ? (
+        <Check className="w-3.5 h-3.5 text-emerald-500" />
+      ) : (
+        <Copy className="w-3.5 h-3.5" />
+      )}
+    </button>
+  );
+}
+
+function CliRow({ cli }: { cli: CliInfo }) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div className="border border-[var(--card-border)] rounded-lg overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setExpanded(!expanded)}
+        className="w-full flex items-center gap-3 px-4 py-3 hover:bg-[var(--item-hover-bg)] transition-colors text-left"
+      >
+        {/* Status indicator */}
+        <div className="shrink-0">
+          {cli.installed === null ? (
+            <Circle className="w-4 h-4 text-[var(--muted-foreground)] animate-pulse" />
+          ) : cli.installed ? (
+            <div className="w-5 h-5 rounded-full bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center">
+              <Check className="w-3 h-3 text-emerald-600 dark:text-emerald-400" />
+            </div>
+          ) : (
+            <Circle className="w-4 h-4 text-[var(--muted-foreground)]" />
+          )}
+        </div>
+
+        {/* Name + description */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-[14px] font-semibold text-[var(--foreground)]">
+              {cli.name}
+            </span>
+            {cli.recommended && !cli.installed && (
+              <span className="text-[11px] font-medium text-[var(--foreground)] bg-[var(--secondary)] px-1.5 py-0.5 rounded">
+                Recommended
+              </span>
+            )}
+            {cli.installed && (
+              <span className="text-[11px] font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-900/20 px-1.5 py-0.5 rounded">
+                Installed
+              </span>
+            )}
+          </div>
+          <p className="text-[12px] text-[var(--muted-foreground)]">
+            {cli.description}
+          </p>
+        </div>
+
+        {/* Expand arrow (only if not installed) */}
+        {!cli.installed && (
+          <ChevronDown
+            className={`w-4 h-4 text-[var(--muted-foreground)] transition-transform ${
+              expanded ? "rotate-180" : ""
+            }`}
+          />
+        )}
+      </button>
+
+      {/* Expanded install instructions */}
+      {expanded && !cli.installed && (
+        <div className="px-4 pb-3 border-t border-[var(--card-border)]">
+          <div className="mt-3 flex items-center gap-2 bg-[var(--secondary)] rounded-md px-3 py-2 font-mono text-[13px] text-[var(--foreground)]">
+            <Terminal className="w-3.5 h-3.5 text-[var(--muted-foreground)] shrink-0" />
+            <code className="flex-1 overflow-x-auto whitespace-nowrap">
+              {cli.installCmd}
+            </code>
+            <CopyButton text={cli.installCmd} />
+          </div>
+          <a
+            href={cli.docsUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 mt-2 text-[12px] text-[var(--primary)] hover:underline"
+          >
+            Documentation
+            <ExternalLink className="w-3 h-3" />
+          </a>
+          {cli.installNote ? (
+            <p className="mt-2 text-[12px] text-[var(--muted-foreground)]">
+              {cli.installNote}
+            </p>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export default function WelcomePage() {
   const router = useRouter();
   const [readyState, setReadyState] = useState<ReadyState>("checking");
+  const [clis, setClis] = useState<CliInfo[]>(
+    CLI_DEFS.map((def) => ({ ...def, installed: null }))
+  );
+  const [showSetup, setShowSetup] = useState(false);
+  const [launching, setLaunching] = useState(false);
+  const [launchError, setLaunchError] = useState<string | null>(null);
 
-  // Silent daemon auto-start
   useEffect(() => {
     let cancelled = false;
     void (async () => {
       try {
-        // Check providers
-        const statusRes = await fetch("/api/status");
+        const res = await fetch("/api/providers", { cache: "no-store" });
         if (cancelled) return;
-        if (!statusRes.ok) {
+        if (!res.ok) {
           setReadyState("error");
           return;
         }
-        const statusData = await statusRes.json();
-        const cliServices = (statusData.services || []).filter(
-          (s: { name: string; status: string }) => s.name.startsWith("cli:")
-        );
-        const hasProvider = cliServices.some(
-          (s: { status: string }) => s.status === "ok"
+        const data = await res.json();
+        const installedIds = new Set(
+          Array.isArray(data?.providers)
+            ? data.providers
+                .filter(
+                  (provider: { id?: string }) =>
+                    provider && typeof provider.id === "string"
+                )
+                .map((provider: { id: string }) => provider.id)
+            : []
         );
 
-        if (!hasProvider) {
-          setReadyState("needs-setup");
-          return;
-        }
+        const updatedClis = CLI_DEFS.map((def) => {
+          return { ...def, installed: installedIds.has(def.id) };
+        });
 
-        // Auto-start daemon
-        const daemonRes = await fetch("/api/daemon");
-        if (cancelled) return;
-        const daemonData = await daemonRes.json();
-        if (daemonData.running) {
-          setReadyState("ready");
-          return;
+        if (!cancelled) {
+          setClis(updatedClis);
+          const hasAny = updatedClis.some((c) => c.installed);
+          if (hasAny) {
+            if (!cancelled) setReadyState("ready");
+          } else {
+            if (!cancelled) {
+              setReadyState("needs-setup");
+              setShowSetup(true);
+            }
+          }
         }
-
-        await fetch("/api/daemon", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ workers: 1 }),
-        });
-        if (!cancelled) setReadyState("ready");
       } catch {
         if (!cancelled) setReadyState("error");
       }
@@ -59,16 +206,52 @@ export default function WelcomePage() {
     };
   }, []);
 
-  const handleJoin = useCallback(() => {
-    router.push("/");
+  const handleJoin = useCallback(async () => {
+    setLaunching(true);
+    setLaunchError(null);
+    try {
+      await updateUserPreferences({ hasCompletedFirstRun: true });
+      const daemonRes = await fetch("/api/daemon");
+      if (!daemonRes.ok) {
+        throw new Error(`Could not read daemon status (${daemonRes.status})`);
+      }
+      const daemonData = await daemonRes.json();
+      if (!daemonData.running) {
+        const startRes = await fetch("/api/daemon", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ workers: 1 }),
+        });
+        if (!startRes.ok) {
+          throw new Error(`Could not start AGX (${startRes.status})`);
+        }
+      }
+      router.push("/");
+    } catch (e) {
+      console.error("Failed to finalize onboarding", e);
+      setLaunchError(
+        e instanceof Error
+          ? e.message
+          : "Could not complete setup. Try again."
+      );
+    } finally {
+      setLaunching(false);
+    }
   }, [router]);
 
+  const installedCount = clis.filter((c) => c.installed).length;
+  const totalCount = clis.length;
+  const recommendedCli =
+    clis.find((cli) => cli.recommended) ?? clis[0] ?? null;
+  const alternativeClis = clis.filter((cli) => !cli.recommended);
+
   return (
     <div className="h-screen w-full flex flex-col bg-[var(--secondary)]">
       {/* Identity line */}
       <div className="text-center pt-10 pb-2 px-4">
         <h1 className="text-[15px] font-medium text-[var(--app-shell-soft-text)] tracking-wide">
-          Chat with a team of AI agents across Claude, Gemini, Codex, Ollama, and Z.AI
+          Chat with a team of AI agents across Claude, Gemini, Codex, Ollama,
+          and Z.AI
         </h1>
       </div>
 
@@ -76,84 +259,123 @@ export default function WelcomePage() {
       <ChatPreview />
 
       {/* CTA + status */}
-      <div className="pb-10 pt-4 flex flex-col items-center gap-3 px-4">
-        <button
-          type="button"
-          onClick={handleJoin}
-          disabled={readyState === "needs-setup"}
-          className="inline-flex items-center gap-2 px-8 py-3.5 bg-[var(--foreground)] text-[var(--background)] text-[15px] font-semibold rounded-xl hover:opacity-90 transition-all duration-200 shadow-lg shadow-[var(--foreground)]/10 hover:-translate-y-0.5 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:translate-y-0"
-        >
-          Join the conversation
-        </button>
-
-        {/* Status line */}
-        <div className="text-[13px] font-medium">
-          {readyState === "checking" && (
-            <span className="text-[var(--app-shell-soft-text)]">Checking system...</span>
-          )}
-          {readyState === "ready" && (
-            <span className="text-emerald-600 flex items-center gap-1.5">
-              <span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
-              Ready
-            </span>
-          )}
-          {readyState === "needs-setup" && (
-            <div className="text-center">
-              <div className="text-amber-600">⚠ Setup needed (2 min)</div>
-              <div className="mt-1 text-xs text-[var(--muted-foreground)]">
-                Install a provider CLI:{" "}
-                <a
-                  href="https://github.com/anthropics/claude-code"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline hover:text-[var(--secondary-foreground)] transition-colors"
-                >
-                  Claude
-                </a>{" "}
-                ·{" "}
-                <a
-                  href="https://ai.google.dev/gemini-api/docs/cli"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline hover:text-[var(--secondary-foreground)] transition-colors"
-                >
-                  Gemini
-                </a>{" "}
-                ·{" "}
-                <a
-                  href="https://ollama.com"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline hover:text-[var(--secondary-foreground)] transition-colors"
-                >
-                  Ollama
-                </a>{" "}
-                ·{" "}
-                <a
-                  href="https://github.com/openai/codex"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline hover:text-[var(--secondary-foreground)] transition-colors"
-                >
-                  Codex
-                </a>
-                {" · "}
-                <a
-                  href="https://z.ai/"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="underline hover:text-[var(--secondary-foreground)] transition-colors"
-                >
-                  Z.AI
-                </a>
-              </div>
+      <div className="pb-8 pt-4 flex flex-col items-center gap-3 px-4">
+        {readyState === "ready" && (
+          <>
+            <button
+              type="button"
+              onClick={handleJoin}
+              disabled={launching}
+              className="inline-flex items-center gap-2 px-8 py-3.5 bg-[var(--foreground)] text-[var(--background)] text-[15px] font-semibold rounded-xl hover:opacity-90 transition-all duration-200 shadow-lg shadow-[var(--foreground)]/10 hover:-translate-y-0.5 disabled:opacity-60 disabled:hover:translate-y-0"
+            >
+              {launching ? "Starting AGX..." : "Launch AGX"}
+            </button>
+            <button
+              type="button"
+              onClick={() => setShowSetup((v) => !v)}
+              className="text-[13px] text-[var(--muted-foreground)] hover:text-[var(--foreground)] transition-colors flex items-center gap-1"
+            >
+              <span className="text-emerald-600">
+                {installedCount}/{totalCount} providers
+              </span>
+              <ChevronDown
+                className={`w-3.5 h-3.5 transition-transform ${
+                  showSetup ? "rotate-180" : ""
+                }`}
+              />
+            </button>
+          </>
+        )}
+
+        {readyState === "checking" && (
+          <span className="text-[13px] text-[var(--app-shell-soft-text)]">
+            Detecting installed providers...
+          </span>
+        )}
+
+        {readyState === "needs-setup" && (
+          <div className="text-center">
+            <p className="text-[14px] font-medium text-amber-600 dark:text-amber-400">
+              No providers found
+            </p>
+            <p className="text-[13px] text-[var(--muted-foreground)] mt-1">
+              Start with Claude Code, then come back to launch AGX
+            </p>
+          </div>
+        )}
+
+        {readyState === "error" && (
+          <span className="text-[13px] text-[var(--app-shell-soft-text)]">
+            Could not check installed providers
+          </span>
+        )}
+
+        {launchError ? (
+          <div className="inline-flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-[12px] text-amber-800">
+            <AlertCircle className="h-3.5 w-3.5 shrink-0" />
+            {launchError}
+          </div>
+        ) : null}
+      </div>
+
+      {/* Setup panel */}
+      {showSetup && (
+        <div className="border-t border-[var(--card-border)] bg-[var(--background)] overflow-y-auto">
+          <div className="max-w-lg mx-auto px-4 py-6">
+            <div className="mb-4">
+              <h2 className="text-[14px] font-semibold text-[var(--foreground)]">
+                Provider CLIs
+              </h2>
+              <p className="mt-1 text-[12px] text-[var(--muted-foreground)]">
+                Install one provider to finish setup. Claude Code is the best first path.
+              </p>
             </div>
-          )}
-          {readyState === "error" && (
-            <span className="text-[var(--app-shell-soft-text)]">Could not check system status</span>
-          )}
+            <div className="space-y-2">
+              {recommendedCli ? (
+                <div className="rounded-xl border border-[var(--card-border)] bg-[var(--secondary)] p-4">
+                  <div className="flex items-center gap-2">
+                    <span className="text-[11px] font-semibold uppercase tracking-wide text-[var(--muted-foreground)]">
+                      Start Here
+                    </span>
+                    <span className="rounded bg-[var(--background)] px-2 py-0.5 text-[11px] font-medium text-[var(--foreground)]">
+                      {recommendedCli.name}
+                    </span>
+                  </div>
+                  <p className="mt-2 text-[13px] text-[var(--foreground)]">
+                    Install Claude Code first if you want the shortest path into AGX.
+                  </p>
+                  <p className="mt-1 text-[12px] text-[var(--muted-foreground)]">
+                    Codex, Gemini CLI, Ollama, and Z.AI are available if they fit your stack better.
+                  </p>
+                </div>
+              ) : null}
+              {recommendedCli ? <CliRow key={recommendedCli.id} cli={recommendedCli} /> : null}
+            </div>
+            {alternativeClis.length > 0 ? (
+              <div className="mt-4">
+                <h3 className="mb-2 text-[12px] font-semibold uppercase tracking-wide text-[var(--muted-foreground)]">
+                  Other Options
+                </h3>
+                <div className="space-y-2">
+                  {alternativeClis.map((cli) => (
+                    <CliRow key={cli.id} cli={cli} />
+                  ))}
+                </div>
+              </div>
+            ) : null}
+            {readyState === "ready" ? (
+              <p className="text-[12px] text-[var(--muted-foreground)] mt-4 text-center">
+                Setup is complete. Launch AGX when you&apos;re ready.
+              </p>
+            ) : null}
+            {readyState === "needs-setup" ? (
+              <p className="text-[12px] text-[var(--muted-foreground)] mt-4 text-center">
+                After installing a CLI, restart AGX so it can detect the new provider.
+              </p>
+            ) : null}
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 }

package/cloud-runtime/standalone/components/ActionToolbar.tsx

@@ -0,0 +1,25 @@
+import React, { forwardRef } from 'react';
+
+export interface ActionToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  // A wrapper for group-hover revealed actions
+}
+
+export const ActionToolbar = forwardRef<HTMLDivElement, ActionToolbarProps>(
+  ({ children, className = '', ...props }, ref) => {
+    const baseClasses = "absolute top-4 right-4 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 bg-[var(--app-shell-elevated)] border border-[var(--app-shell-border)] shadow-md rounded-lg p-1 z-10 backdrop-blur-sm";
+
+    const classes = `${baseClasses} ${className}`.trim();
+
+    return (
+      <div ref={ref} className={classes} {...props}>
+        {children}
+      </div>
+    );
+  }
+);
+
+ActionToolbar.displayName = 'ActionToolbar';
+
+export const ActionToolbarDivider = () => (
+  <div className="w-px h-4 bg-[var(--app-shell-border)] mx-1" />
+);

package/cloud-runtime/standalone/components/ConfirmDialog.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+
+export interface ConfirmDialogProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  preview?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  variant?: "danger" | "default";
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export default function ConfirmDialog({
+  isOpen,
+  title,
+  message,
+  preview,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  const confirmRef = useRef<HTMLButtonElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen) {
+      // Small delay so the animation plays before focus
+      const t = setTimeout(() => confirmRef.current?.focus(), 50);
+      return () => clearTimeout(t);
+    }
+  }, [isOpen]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onCancel();
+      }
+    },
+    [onCancel]
+  );
+
+  if (!isOpen) return null;
+
+  const isDanger = variant === "danger";
+
+  return (
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-md"
+      style={{ animation: "confirm-overlay-in 200ms ease-out" }}
+      onClick={(e) => e.target === e.currentTarget && onCancel()}
+      onKeyDown={handleKeyDown}
+    >
+      <div
+        ref={dialogRef}
+        className="w-full max-w-md mx-4 bg-[var(--card-bg)] rounded-2xl border border-[var(--card-border)] shadow-2xl overflow-hidden"
+        style={{ animation: "confirm-dialog-in 250ms cubic-bezier(0.34, 1.56, 0.64, 1)" }}
+      >
+        {/* Header with icon */}
+        <div className="px-6 pt-6 pb-3">
+          <div className="flex items-start gap-4">
+            {isDanger && (
+              <div className="flex-shrink-0 w-11 h-11 rounded-full bg-red-500/10 border border-red-500/20 flex items-center justify-center">
+                <svg className="w-5 h-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
+                </svg>
+              </div>
+            )}
+            <div className="flex-1 min-w-0">
+              <h3 className="text-[15px] font-semibold text-[var(--foreground)]">{title}</h3>
+              <p className="mt-1 text-[13px] text-[var(--muted-foreground)] leading-relaxed">{message}</p>
+            </div>
+          </div>
+        </div>
+
+        {/* Message preview */}
+        {preview && (
+          <div className="mx-6 mb-3 px-3 py-2.5 rounded-lg bg-[var(--muted)]/40 border border-[var(--card-border)]">
+            <p className="text-[12px] text-[var(--muted-foreground)] line-clamp-3 leading-relaxed italic">
+              &ldquo;{preview}&rdquo;
+            </p>
+          </div>
+        )}
+
+        {/* Divider */}
+        <div className="mx-6 border-t border-[var(--card-border)]" />
+
+        {/* Actions */}
+        <div className="px-6 py-4 flex items-center justify-end gap-2.5">
+          <button
+            onClick={onCancel}
+            className="px-4 py-2 rounded-lg text-[13px] font-medium text-[var(--muted-foreground)] hover:text-[var(--foreground)] hover:bg-[var(--muted)]/60 transition-all duration-150"
+          >
+            {cancelLabel}
+          </button>
+          <button
+            ref={confirmRef}
+            onClick={onConfirm}
+            className={`px-4 py-2 rounded-lg text-[13px] font-medium transition-all duration-150 ${
+              isDanger
+                ? "bg-red-500 text-white hover:bg-red-600 active:scale-[0.97]"
+                : "btn-primary active:scale-[0.97]"
+            }`}
+          >
+            {confirmLabel}
+          </button>
+        </div>
+      </div>
+
+      <style jsx>{`
+        @keyframes confirm-overlay-in {
+          from { opacity: 0; }
+          to { opacity: 1; }
+        }
+        @keyframes confirm-dialog-in {
+          from {
+            opacity: 0;
+            transform: scale(0.9) translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: scale(1) translateY(0);
+          }
+        }
+      `}</style>
+    </div>
+  );
+}