palmier 0.9.6 → 0.9.8

package/palmier-server/pwa/src/pages/Dashboard.tsx

@@ -1,542 +0,0 @@
-import { useState, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { useNavigate, useLocation, useParams } from "react-router-dom";
-
-import { useHostStore } from "../contexts/HostStoreContext";
-import { useHostConnection } from "../contexts/HostConnectionContext";
-import TasksView from "../components/TasksView";
-import TabBar from "../components/TabBar";
-import HostMenu from "../components/HostMenu";
-import ConnectionStatusIcon from "../components/ConnectionStatusIcon";
-import SessionsView from "../components/SessionsView";
-import RunDetailView from "../components/RunDetailView";
-import { loadEnabledCapabilities } from "../components/CapabilityToggles";
-import { usePushSubscription } from "../hooks/usePushSubscription";
-import { useMediaQuery } from "../hooks/useMediaQuery";
-import { setAgentLabels } from "../agentLabels";
-import { confirmLeaveDraft } from "../draftGuard";
-import { MIN_HOST_VERSION } from "../constants";
-import type { AgentInfo, RequiredPermission } from "../types";
-
-function isOlderThan(current: string, minimum: string): boolean {
-  if (current.includes("-")) return false;
-  const a = current.split(".").map(Number);
-  const b = minimum.split(".").map(Number);
-  for (let i = 0; i < 3; i++) {
-    if ((a[i] ?? 0) < (b[i] ?? 0)) return true;
-    if ((a[i] ?? 0) > (b[i] ?? 0)) return false;
-  }
-  return false;
-}
-
-interface PendingPrompt {
-  key: string;
-  type: "confirmation" | "permission" | "input";
-  params?: RequiredPermission[] | string[];
-  meta?: {
-    session_id?: string;
-    session_name?: string;
-    description?: string;
-    input_questions?: string[];
-  };
-}
-
-interface ConfirmPrompt { description: string; sessionName?: string }
-interface PermissionPrompt { permissions: RequiredPermission[]; sessionName?: string }
-interface InputPrompt { questions: string[]; description?: string; sessionName?: string }
-
-export default function Dashboard() {
-  const { removePairedHost, setHostLanUrl, setHostTimezone } = useHostStore();
-  const { connected, request, subscribeEvents, unauthorized, activeHost } = useHostConnection();
-  const hostId = activeHost.hostId;
-  const activeClientToken = activeHost.clientToken || null;
-  const navigate = useNavigate();
-  const location = useLocation();
-  const params = useParams<{ taskId?: string; runId?: string }>();
-  const isDesktop = useMediaQuery("(min-width: 768px)");
-
-  const isTasksTab = location.pathname.endsWith("/tasks");
-  const runsFilterTaskId = params.runId ? undefined : params.taskId;
-
-  // "latest" is passed through to RunDetailView, which does its own resolution
-  // and renders an empty state if the task has no runs.
-  const isRunDetail = !!(params.taskId && params.runId);
-
-  const [updateRequired, setUpdateRequired] = useState(false);
-  const [updating, setUpdating] = useState(false);
-  const [updateError, setUpdateError] = useState<string | null>(null);
-  const [daemonVersion, setDaemonVersion] = useState<string | null>(null);
-  const [linkedClientToken, setLinkedClientToken] = useState<string | null>(null);
-  const [enabledCapabilities, setEnabledCapabilities] = useState<Set<string>>(new Set());
-  const [agents, setAgents] = useState<AgentInfo[]>([]);
-  const [hostPlatform, setHostPlatform] = useState<string | undefined>();
-
-  const isLinkedDevice = !!activeClientToken && linkedClientToken === activeClientToken;
-
-  // Pending prompt state — owned by Dashboard because these modals must show
-  // regardless of which tab (Sessions/Tasks/RunDetail) is currently rendered.
-  const [pendingConfirms, setPendingConfirms] = useState<Map<string, ConfirmPrompt>>(new Map());
-  const [pendingPermissions, setPendingPermissions] = useState<Map<string, PermissionPrompt>>(new Map());
-  const [pendingInputs, setPendingInputs] = useState<Map<string, InputPrompt>>(new Map());
-  const [inputValues, setInputValues] = useState<Map<string, string[]>>(new Map());
-
-  usePushSubscription();
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [hostId]);
-
-  useEffect(() => {
-    let cancelled = false;
-    loadEnabledCapabilities().then((caps) => { if (!cancelled) setEnabledCapabilities(caps); });
-    return () => { cancelled = true; };
-  }, []);
-
-  // host.info bootstrap: agents/version/platform + any prompts that were already
-  // pending when this PWA connected. Runs once per (host, connection).
-  useEffect(() => {
-    if (!connected) return;
-    request<{
-      agents?: AgentInfo[];
-      version?: string | null;
-      host_platform?: string;
-      host_timezone?: string;
-      linked_client_token?: string | null;
-      pending_prompts?: PendingPrompt[];
-      lan_url?: string | null;
-    }>("host.info")
-      .then((result) => {
-        setAgents(result.agents ?? []);
-        setHostPlatform(result.host_platform);
-        setLinkedClientToken(result.linked_client_token ?? null);
-        setAgentLabels(result.agents ?? []);
-        const version = result.version ?? null;
-        setDaemonVersion(version);
-        setUpdateRequired(!!version && isOlderThan(version, MIN_HOST_VERSION));
-        setHostLanUrl(hostId, result.lan_url ?? undefined);
-        setHostTimezone(hostId, result.host_timezone);
-
-        // Seed modal state from already-pending prompts.
-        const confirms = new Map<string, ConfirmPrompt>();
-        const perms = new Map<string, PermissionPrompt>();
-        const inputs = new Map<string, InputPrompt>();
-        const inputVals = new Map<string, string[]>();
-        for (const p of result.pending_prompts ?? []) {
-          if (p.type === "confirmation") {
-            confirms.set(p.key, {
-              description: p.meta?.description ?? "",
-              sessionName: p.meta?.session_name,
-            });
-          } else if (p.type === "permission") {
-            perms.set(p.key, {
-              permissions: (p.params as RequiredPermission[]) ?? [],
-              sessionName: p.meta?.session_name,
-            });
-          } else if (p.type === "input") {
-            const questions = (p.params as string[]) ?? p.meta?.input_questions ?? [];
-            inputs.set(p.key, {
-              questions,
-              description: p.meta?.description,
-              sessionName: p.meta?.session_name,
-            });
-            inputVals.set(p.key, new Array(questions.length).fill(""));
-          }
-        }
-        setPendingConfirms(confirms);
-        setPendingPermissions(perms);
-        setPendingInputs(inputs);
-        setInputValues(inputVals);
-      })
-      .catch(() => { /* silent — update-required prompt guards the broken case */ });
-  }, [connected, hostId, request, setHostLanUrl, setHostTimezone]);
-
-  // Always-on event subscription for modal lifecycle. Independent of which tab
-  // is active. Task-card status updates happen inside TasksView while mounted.
-  useEffect(() => {
-    if (!connected) return;
-    const unsubscribe = subscribeEvents(hostId, (msg) => {
-      const tokens = msg.subject.split(".");
-      if (tokens.length < 3) return;
-      const taskId = tokens.slice(2).join(".");
-
-      let parsed: Record<string, unknown> = {};
-      try {
-        parsed = JSON.parse(new TextDecoder().decode(msg.data)) as Record<string, unknown>;
-      } catch { return; }
-      const eventType = parsed.event_type as string | undefined;
-      const sessionId = parsed.session_id as string | undefined;
-
-      if (eventType === "input-request" && sessionId) {
-        const questions = parsed.input_questions as string[] | undefined;
-        const sessionName = parsed.session_name as string | undefined;
-        const description = parsed.description as string | undefined;
-        if (questions?.length) {
-          setPendingInputs((prev) => {
-            if (prev.has(sessionId)) return prev;
-            const next = new Map(prev);
-            next.set(sessionId, { questions, description, sessionName });
-            return next;
-          });
-          setInputValues((prev) => {
-            if (prev.has(sessionId)) return prev;
-            const next = new Map(prev);
-            next.set(sessionId, new Array(questions.length).fill(""));
-            return next;
-          });
-        }
-        return;
-      }
-
-      if (eventType === "input-resolved" && sessionId) {
-        setPendingInputs((prev) => {
-          if (!prev.has(sessionId)) return prev;
-          const next = new Map(prev);
-          next.delete(sessionId);
-          return next;
-        });
-        setInputValues((prev) => {
-          const next = new Map(prev);
-          next.delete(sessionId);
-          return next;
-        });
-        return;
-      }
-
-      if (eventType === "confirm-request" && sessionId) {
-        const description = parsed.description as string | undefined;
-        const sessionName = parsed.session_name as string | undefined;
-        if (description) {
-          setPendingConfirms((prev) => {
-            if (prev.has(sessionId)) return prev;
-            const next = new Map(prev);
-            next.set(sessionId, { description, sessionName });
-            return next;
-          });
-        }
-        return;
-      }
-
-      if (eventType === "confirm-resolved" && sessionId) {
-        setPendingConfirms((prev) => {
-          if (!prev.has(sessionId)) return prev;
-          const next = new Map(prev);
-          next.delete(sessionId);
-          return next;
-        });
-        return;
-      }
-
-      if (eventType === "permission-request") {
-        const permissions = parsed.required_permissions as RequiredPermission[] | undefined;
-        const sessionName = parsed.session_name as string | undefined;
-        if (permissions?.length) {
-          setPendingPermissions((prev) => {
-            if (prev.has(taskId)) return prev;
-            const next = new Map(prev);
-            next.set(taskId, { permissions, sessionName });
-            return next;
-          });
-        }
-        return;
-      }
-
-      if (eventType === "permission-resolved") {
-        setPendingPermissions((prev) => {
-          if (!prev.has(taskId)) return prev;
-          const next = new Map(prev);
-          next.delete(taskId);
-          return next;
-        });
-        return;
-      }
-    });
-    return unsubscribe;
-  }, [connected, hostId, subscribeEvents]);
-
-  async function respondToConfirm(sessionId: string, response: "confirmed" | "aborted") {
-    try {
-      await request("task.user_input", { id: sessionId, value: [response] });
-    } catch (err) {
-      console.error("[Dashboard] Failed to respond to confirmation:", err);
-    }
-  }
-
-  async function respondToPermission(taskId: string, response: "granted" | "granted_all" | "aborted") {
-    try {
-      await request("task.user_input", { id: taskId, value: [response] });
-    } catch (err) {
-      console.error("[Dashboard] Failed to respond to permission request:", err);
-    }
-  }
-
-  async function respondToInput(sessionId: string, values: string[]) {
-    try {
-      await request("task.user_input", { id: sessionId, value: values });
-    } catch (err) {
-      console.error("[Dashboard] Failed to respond to input request:", err);
-    }
-  }
-
-  function handleViewRun(taskId: string, runId?: string) {
-    if (!confirmLeaveDraft()) return;
-    const base = `/hosts/${encodeURIComponent(hostId)}/runs/${encodeURIComponent(taskId)}`;
-    navigate(runId ? `${base}/${encodeURIComponent(runId)}` : base);
-  }
-
-  async function handleUpdate() {
-    setUpdating(true);
-    setUpdateError(null);
-    try {
-      const result = await request<{ ok?: boolean; error?: string }>("host.update");
-      if (result.error) {
-        setUpdateError(result.error);
-        setUpdating(false);
-        return;
-      }
-    } catch {
-      // Expected: connection drops during daemon restart
-    }
-    setTimeout(() => window.location.reload(), 15000);
-  }
-
-  const showTaskContent = connected && !unauthorized;
-
-  return (
-    <div className="dashboard">
-      {isDesktop && <HostMenu daemonVersion={daemonVersion} linkedClientToken={linkedClientToken} request={request} onEnabledCapabilitiesChange={setEnabledCapabilities} onLinkedClientTokenChange={setLinkedClientToken} />}
-
-      <div className="dashboard-content">
-        <header className="app-header">
-          <div className="app-title-bar">
-            {!isDesktop && <HostMenu daemonVersion={daemonVersion} linkedClientToken={linkedClientToken} request={request} onEnabledCapabilitiesChange={setEnabledCapabilities} onLinkedClientTokenChange={setLinkedClientToken} />}
-            <h1 className="app-title">Palmier</h1>
-            <ConnectionStatusIcon />
-          </div>
-          <div className="tab-bar">
-            <TabBar />
-          </div>
-        </header>
-
-        <main className="dashboard-main">
-        {unauthorized ? (
-          <div className="revoked-state">
-            <div className="revoked-icon">
-              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
-                <line x1="12" y1="15" x2="12" y2="18" />
-              </svg>
-            </div>
-            <h2 className="revoked-title">Client Revoked</h2>
-            <p className="revoked-description">
-              This client was revoked by the host. To reconnect, generate a new pairing code on the host machine.
-            </p>
-            <div className="revoked-command">
-              <code>palmier pair</code>
-            </div>
-            <div className="revoked-actions">
-              <button
-                className="btn btn-primary"
-                onClick={() => { if (confirmLeaveDraft()) navigate("/pair"); }}
-              >
-                Re-pair Device
-              </button>
-              <button
-                className="btn btn-secondary"
-                onClick={() => { removePairedHost(hostId); navigate("/", { replace: true }); }}
-              >
-                Remove Host
-              </button>
-            </div>
-          </div>
-        ) : showTaskContent ? (
-          <>
-            {isTasksTab && !isRunDetail && (
-              <TasksView
-                connected={connected}
-                hostId={hostId}
-                request={request}
-                subscribeEvents={subscribeEvents}
-                agents={agents}
-                hostPlatform={hostPlatform}
-                isNotificationListener={isLinkedDevice && enabledCapabilities.has("notifications")}
-                onViewRun={handleViewRun}
-              />
-            )}
-            {isRunDetail ? (
-              <RunDetailView
-                connected={connected}
-                hostId={hostId}
-                request={request}
-                subscribeEvents={subscribeEvents}
-                taskId={params.taskId!}
-                runId={decodeURIComponent(params.runId!)}
-              />
-            ) : !isTasksTab ? (
-              <SessionsView
-                connected={connected}
-                hostId={hostId}
-                request={request}
-                subscribeEvents={subscribeEvents}
-                agents={agents}
-                hostPlatform={hostPlatform}
-                filterTaskId={runsFilterTaskId}
-                onClearFilter={() => { if (confirmLeaveDraft()) navigate(`/hosts/${encodeURIComponent(hostId)}`); }}
-              />
-            ) : null}
-          </>
-        ) : (
-          <div className="empty-state">
-            <p>Connecting to host...</p>
-          </div>
-        )}
-        </main>
-
-        {updateRequired && !updating && !updateError && (
-        <div className="confirm-modal-overlay">
-          <div className="confirm-modal">
-            <h2 className="confirm-modal-title">Update Required</h2>
-            <p className="confirm-modal-message">
-              Your Palmier host{daemonVersion ? ` (v${daemonVersion})` : ""} is too old for this version of the app. Please update to continue.
-            </p>
-            <div className="confirm-modal-actions">
-              <button className="btn btn-primary" onClick={handleUpdate}>
-                Update Now
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-      {updating && (
-        <div className="confirm-modal-overlay">
-          <div className="confirm-modal">
-            <h2 className="confirm-modal-title">Updating...</h2>
-            <p className="confirm-modal-message">
-              Installing update and restarting daemon. Please wait...
-            </p>
-          </div>
-        </div>
-      )}
-      {updateError && (
-        <div className="confirm-modal-overlay">
-          <div className="confirm-modal">
-            <h2 className="confirm-modal-title">Update Failed</h2>
-            <p className="confirm-modal-message" style={{ whiteSpace: "pre-line" }}>
-              {updateError}
-            </p>
-            <div className="confirm-modal-actions">
-              <button className="btn btn-secondary" onClick={() => { setUpdateError(null); }}>
-                Retry
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      </div>
-
-      {createPortal(<>
-        {[...pendingConfirms.entries()].map(([sessionId, { description, sessionName }]) => (
-          <div key={sessionId} className="confirm-modal-overlay">
-            <div className="confirm-modal">
-              <h2 className="confirm-modal-title">Confirmation Required</h2>
-              {sessionName && <p className="confirm-modal-subtitle">{sessionName}</p>}
-              <p className="confirm-modal-message">{description}</p>
-              <div className="confirm-modal-actions">
-                <button className="btn btn-primary" onClick={() => respondToConfirm(sessionId, "confirmed")}>
-                  Confirm
-                </button>
-                <button className="btn btn-secondary" onClick={() => respondToConfirm(sessionId, "aborted")}>
-                  Abort
-                </button>
-              </div>
-            </div>
-          </div>
-        ))}
-
-        {[...pendingPermissions.entries()].map(([taskId, { permissions, sessionName }]) => (
-          <div key={taskId} className="confirm-modal-overlay">
-            <div className="confirm-modal permission-modal">
-              <h2 className="confirm-modal-title">Permission Required</h2>
-              <p className="confirm-modal-message">
-                <strong>{sessionName || taskId}</strong>
-              </p>
-              <div className="permission-list">
-                {permissions.map((p, i) => (
-                  <div key={i} className="permission-item">
-                    <span className="permission-name">{p.name}</span>
-                    {p.description && <span className="permission-desc">{p.description}</span>}
-                  </div>
-                ))}
-              </div>
-              <div className="permission-actions">
-                <button className="btn btn-primary" onClick={() => respondToPermission(taskId, "granted")}>
-                  Allow Once
-                </button>
-                <button className="btn btn-secondary" onClick={() => respondToPermission(taskId, "granted_all")}>
-                  Allow Always
-                </button>
-              </div>
-              <button
-                className="permission-abort-link"
-                onClick={() => respondToPermission(taskId, "aborted")}
-              >
-                Deny & Abort Task
-              </button>
-            </div>
-          </div>
-        ))}
-
-        {[...pendingInputs.entries()].map(([sessionId, { questions, description, sessionName }]) => {
-          const values = inputValues.get(sessionId) ?? new Array(questions.length).fill("");
-          return (
-            <div key={sessionId} className="confirm-modal-overlay">
-              <div className="confirm-modal input-modal">
-                <h2 className="confirm-modal-title">Input Required</h2>
-                {sessionName && <p className="confirm-modal-subtitle">{sessionName}</p>}
-                {description && <p className="confirm-modal-message">{description}</p>}
-                <div className="input-list">
-                  {questions.map((desc: string, i: number) => (
-                    <div key={i} className="input-item">
-                      <label className="input-label">{desc}</label>
-                      <input
-                        type="text"
-                        className="input-field"
-                        value={values[i] ?? ""}
-                        onChange={(e) => {
-                          setInputValues((prev) => {
-                            const next = new Map(prev);
-                            const arr = [...(next.get(sessionId) ?? [])];
-                            arr[i] = e.target.value;
-                            next.set(sessionId, arr);
-                            return next;
-                          });
-                        }}
-                        autoFocus={i === 0}
-                      />
-                    </div>
-                  ))}
-                </div>
-                <div className="input-actions">
-                  <button
-                    className="btn btn-primary"
-                    disabled={values.some((v) => !v.trim())}
-                    onClick={() => respondToInput(sessionId, values)}
-                  >
-                    Submit
-                  </button>
-                </div>
-                <button
-                  className="permission-abort-link"
-                  onClick={() => respondToInput(sessionId, ["aborted"])}
-                >
-                  Cancel
-                </button>
-              </div>
-            </div>
-          );
-        })}
-      </>, document.body)}
-    </div>
-  );
-}