@hienlh/ppm 0.13.54 → 0.13.56

package/src/web/components/system/sparkline-canvas.tsx

@@ -0,0 +1,64 @@
+import { useRef, useEffect, memo } from "react";
+
+interface SparklineCanvasProps {
+  data: number[];
+  width?: number;
+  height?: number;
+  color?: string;
+}
+
+export const SparklineCanvas = memo(function SparklineCanvas({
+  data,
+  width = 120,
+  height = 24,
+  color = "#3b82f6",
+}: SparklineCanvasProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const lastDrawRef = useRef(0);
+
+  useEffect(() => {
+    const now = Date.now();
+    // Throttle redraws to 1fps
+    if (now - lastDrawRef.current < 1000) return;
+    lastDrawRef.current = now;
+
+    const canvas = canvasRef.current;
+    if (!canvas || data.length < 2) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    ctx.scale(dpr, dpr);
+
+    ctx.clearRect(0, 0, width, height);
+
+    const max = Math.max(...data, 1);
+    const stepX = width / (data.length - 1);
+    const padding = 2;
+    const drawH = height - padding * 2;
+
+    ctx.beginPath();
+    ctx.strokeStyle = color;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+
+    for (let i = 0; i < data.length; i++) {
+      const x = i * stepX;
+      const y = padding + drawH - (data[i]! / max) * drawH;
+      if (i === 0) ctx.moveTo(x, y);
+      else ctx.lineTo(x, y);
+    }
+    ctx.stroke();
+  }, [data, width, height, color]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      style={{ width, height }}
+      className="inline-block"
+    />
+  );
+});

package/src/web/components/system/system-monitor-group-row.tsx

@@ -0,0 +1,133 @@
+import { memo, useMemo } from "react";
+import { ChevronRight, ChevronDown, HelpCircle, X, ArrowUp, ArrowDown } from "lucide-react";
+import type { ResourceGroup } from "@/hooks/use-resource-monitor";
+import { SparklineCanvas } from "./sparkline-canvas";
+import { cn } from "@/lib/utils";
+
+export type SortKey = "cpu" | "ram" | null;
+export type SortDir = "asc" | "desc";
+
+function cpuColor(cpu: number) {
+  if (cpu > 80) return "text-red-500";
+  if (cpu > 50) return "text-yellow-500";
+  return "text-green-500";
+}
+
+function formatRam(mb: number) {
+  return mb < 1024 ? `${mb.toFixed(0)} MB` : `${(mb / 1024).toFixed(1)} GB`;
+}
+
+export interface GroupRowProps {
+  group: ResourceGroup;
+  Icon: React.ElementType;
+  isExpanded: boolean;
+  sparkData: number[];
+  isMobile: boolean;
+  sortKey: SortKey;
+  sortDir: SortDir;
+  onToggle: () => void;
+  onKill: (pid: number) => void;
+}
+
+export const GroupRow = memo(function GroupRow({
+  group, Icon, isExpanded, sparkData, isMobile, sortKey, sortDir, onToggle, onKill,
+}: GroupRowProps) {
+  const Chevron = isExpanded ? ChevronDown : ChevronRight;
+
+  const sortedProcesses = useMemo(() => {
+    if (!sortKey) return group.processes;
+    return [...group.processes].sort((a, b) => {
+      const av = sortKey === "cpu" ? a.cpu : a.ramMB;
+      const bv = sortKey === "cpu" ? b.cpu : b.ramMB;
+      return sortDir === "asc" ? av - bv : bv - av;
+    });
+  }, [group.processes, sortKey, sortDir]);
+
+  return (
+    <>
+      <tr
+        className="hover:bg-surface-hover cursor-pointer transition-colors"
+        onClick={onToggle}
+      >
+        <td className="py-1.5 px-3">
+          <div className="flex items-center gap-1.5">
+            <Chevron className="size-3 text-text-subtle shrink-0" />
+            <Icon className="size-3.5 text-text-secondary shrink-0" />
+            <span className="truncate">{group.label}</span>
+            <span className="text-text-subtle">({group.processes.length})</span>
+          </div>
+        </td>
+        <td className={cn("text-right py-1.5 px-2", cpuColor(group.cpu))}>
+          {group.cpu.toFixed(1)}%
+        </td>
+        <td className="text-right py-1.5 px-2 text-text-secondary">
+          {formatRam(group.ramMB)}
+        </td>
+        {!isMobile && (
+          <td className="py-1.5 px-2">
+            {sparkData.length > 1 && (
+              <SparklineCanvas data={sparkData} width={120} height={20} />
+            )}
+          </td>
+        )}
+      </tr>
+      {isExpanded && sortedProcesses.map((proc) => (
+        <tr key={proc.pid} className="text-text-subtle group/proc hover:bg-surface-hover transition-colors">
+          <td className="py-1 px-3 pl-10">
+            <div className="flex items-start gap-1.5">
+              <span className="text-text-subtle shrink-0">{proc.pid}</span>
+              <span className="break-all text-text-secondary" title={proc.command}>
+                {proc.command}
+              </span>
+            </div>
+          </td>
+          <td className="text-right py-1 px-2 align-top">{proc.cpu.toFixed(1)}%</td>
+          <td className="text-right py-1 px-2 align-top">{formatRam(proc.ramMB)}</td>
+          {!isMobile && (
+            <td className="align-top py-1 px-2">
+              <button
+                onClick={(e) => { e.stopPropagation(); onKill(proc.pid); }}
+                className="opacity-0 group-hover/proc:opacity-100 p-0.5 rounded hover:bg-red-500/20 hover:text-red-500 transition-all"
+                title={`End process ${proc.pid}`}
+              >
+                <X className="size-3" />
+              </button>
+            </td>
+          )}
+        </tr>
+      ))}
+    </>
+  );
+});
+
+// ── Sortable column header ─────────────────────────────────────────────
+
+export function SortableHeader({ label, field, activeKey, activeDir, onClick, className }: {
+  label: string;
+  field: "cpu" | "ram";
+  activeKey: SortKey;
+  activeDir: SortDir;
+  onClick: (field: "cpu" | "ram") => void;
+  className?: string;
+}) {
+  const isActive = activeKey === field;
+  const Arrow = isActive ? (activeDir === "asc" ? ArrowUp : ArrowDown) : null;
+
+  return (
+    <th
+      className={cn(
+        "text-right py-1.5 px-2 font-medium cursor-pointer select-none hover:text-text-primary transition-colors",
+        isActive && "text-text-primary",
+        className,
+      )}
+      onClick={() => onClick(field)}
+    >
+      <div className="flex items-center justify-end gap-0.5">
+        <span>{label}</span>
+        {Arrow && <Arrow className="size-3" />}
+      </div>
+    </th>
+  );
+}
+
+export { cpuColor, formatRam };

package/src/web/components/system/system-monitor-tab.tsx

@@ -0,0 +1,186 @@
+import { useState, useMemo, useCallback, memo } from "react";
+import {
+  Server, Monitor, Bot, Hammer, HelpCircle,
+  Wifi, WifiOff,
+} from "lucide-react";
+import { useResourceMonitor, type ResourceGroup } from "@/hooks/use-resource-monitor";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+import { api } from "@/lib/api-client";
+import { toast } from "sonner";
+import { cn } from "@/lib/utils";
+import {
+  GroupRow, SortableHeader, cpuColor, formatRam,
+  type SortKey, type SortDir,
+} from "./system-monitor-group-row";
+
+const GROUP_ICONS: Record<ResourceGroup["type"], React.ElementType> = {
+  server: Server,
+  terminal: Monitor,
+  "ai-tool": Bot,
+  build: Hammer,
+  unknown: HelpCircle,
+};
+
+const SPARKLINE_POINTS = 200;
+
+function toggleSort(
+  current: SortKey, dir: SortDir, clicked: "cpu" | "ram",
+): [SortKey, SortDir] {
+  if (current !== clicked) return [clicked, "desc"];
+  if (dir === "desc") return [clicked, "asc"];
+  return [null, "desc"]; // third click resets
+}
+
+function sortGroups(groups: ResourceGroup[], key: SortKey, dir: SortDir) {
+  if (!key) return groups;
+  const sorted = [...groups].sort((a, b) => {
+    const av = key === "cpu" ? a.cpu : a.ramMB;
+    const bv = key === "cpu" ? b.cpu : b.ramMB;
+    return dir === "asc" ? av - bv : bv - av;
+  });
+  return sorted;
+}
+
+export const SystemMonitorTab = memo(function SystemMonitorTab() {
+  const { latest, history, isConnected } = useResourceMonitor();
+  const [expanded, setExpanded] = useState<Set<string>>(() => new Set(["server"]));
+  const [sortKey, setSortKey] = useState<SortKey>(null);
+  const [sortDir, setSortDir] = useState<SortDir>("desc");
+  const isMobile = useIsMobile();
+
+  const groupSparklines = useMemo(() => {
+    const map = new Map<string, number[]>();
+    const recentHistory = history.slice(-SPARKLINE_POINTS);
+    for (const snap of recentHistory) {
+      for (const group of snap.groups) {
+        const key = `${group.type}:${group.label}`;
+        const arr = map.get(key) ?? [];
+        arr.push(group.cpu);
+        map.set(key, arr);
+      }
+    }
+    return map;
+  }, [history]);
+
+  const sortedGroups = useMemo(() => {
+    if (!latest) return [];
+    return sortGroups(latest.groups, sortKey, sortDir);
+  }, [latest, sortKey, sortDir]);
+
+  const killProcess = useCallback(async (pid: number) => {
+    try {
+      await api.post(`/api/system/resources/kill/${pid}`);
+      toast.success(`Sent SIGTERM to PID ${pid}`);
+    } catch (e: any) {
+      toast.error(e.message || `Failed to kill PID ${pid}`);
+    }
+  }, []);
+
+  const toggle = (key: string) => {
+    setExpanded((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
+
+  const handleSort = (clicked: "cpu" | "ram") => {
+    const [newKey, newDir] = toggleSort(sortKey, sortDir, clicked);
+    setSortKey(newKey);
+    setSortDir(newDir);
+  };
+
+  if (!latest) {
+    return (
+      <div className="flex items-center justify-center h-full text-text-subtle text-sm">
+        {isConnected ? "Waiting for data..." : "Connecting to resource monitor..."}
+      </div>
+    );
+  }
+
+  const elapsed = Math.round((Date.now() - latest.timestamp) / 1000);
+
+  return (
+    <div className="h-full flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border shrink-0">
+        <h2 className="text-sm font-medium">System Monitor</h2>
+        <div className="flex items-center gap-1.5 text-[10px] text-text-subtle">
+          {isConnected
+            ? <Wifi className="size-3 text-green-500" />
+            : <WifiOff className="size-3 text-red-500" />}
+          <span>{isConnected ? `Updated ${elapsed}s ago` : "Disconnected"}</span>
+        </div>
+      </div>
+
+      {/* Group list */}
+      <div className="flex-1 overflow-y-auto min-h-0">
+        <table className="w-full text-xs">
+          <thead>
+            <tr className="text-text-subtle border-b border-border">
+              <th className="text-left py-1.5 px-3 font-medium">Process</th>
+              <SortableHeader
+                label="CPU"
+                field="cpu"
+                activeKey={sortKey}
+                activeDir={sortDir}
+                onClick={handleSort}
+                className="w-16"
+              />
+              <SortableHeader
+                label="RAM"
+                field="ram"
+                activeKey={sortKey}
+                activeDir={sortDir}
+                onClick={handleSort}
+                className="w-20"
+              />
+              {!isMobile && (
+                <th className="py-1.5 px-2 font-medium w-[130px]">Trend</th>
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            {sortedGroups.map((group) => {
+              const key = `${group.type}:${group.label}`;
+              const Icon = GROUP_ICONS[group.type] ?? HelpCircle;
+              const isExpanded = expanded.has(key);
+              const sparkData = groupSparklines.get(key) ?? [];
+
+              return (
+                <GroupRow
+                  key={key}
+                  group={group}
+                  Icon={Icon}
+                  isExpanded={isExpanded}
+                  sparkData={sparkData}
+                  isMobile={isMobile}
+                  sortKey={sortKey}
+                  sortDir={sortDir}
+                  onToggle={() => toggle(key)}
+                  onKill={killProcess}
+                />
+              );
+            })}
+          </tbody>
+          {/* Total row */}
+          <tfoot>
+            <tr className="border-t border-border font-medium">
+              <td className="py-1.5 px-3">
+                Total ({latest.total.processCount} processes)
+              </td>
+              <td className={cn("text-right py-1.5 px-2", cpuColor(latest.total.cpu))}>
+                {latest.total.cpu.toFixed(1)}%
+              </td>
+              <td className="text-right py-1.5 px-2 text-text-secondary">
+                {formatRam(latest.total.ramMB)}
+              </td>
+              {!isMobile && <td />}
+            </tr>
+          </tfoot>
+        </table>
+      </div>
+    </div>
+  );
+});

package/src/web/hooks/use-resource-monitor.ts

@@ -0,0 +1,114 @@
+import { useEffect, useRef, useState, useCallback } from "react";
+import { getAuthToken } from "@/lib/api-client";
+
+// ── Types (mirrors backend) ────────────────────────────────────────────
+
+export interface ResourceGroup {
+  type: "server" | "terminal" | "ai-tool" | "build" | "unknown";
+  label: string;
+  cpu: number;
+  ramMB: number;
+  processes: { pid: number; cpu: number; ramMB: number; command: string }[];
+}
+
+export interface ResourceSnapshot {
+  timestamp: number;
+  server: { pid: number; cpu: number; ramMB: number };
+  total: { cpu: number; ramMB: number; processCount: number };
+  groups: ResourceGroup[];
+}
+
+const HISTORY_MAX = 600;
+
+// ── Shared singleton state (multiple components share one EventSource) ─
+
+let sharedEs: EventSource | null = null;
+let refCount = 0;
+let sharedLatest: ResourceSnapshot | null = null;
+let sharedHistory: ResourceSnapshot[] = [];
+let sharedConnected = false;
+const listeners = new Set<() => void>();
+
+function notify() {
+  for (const cb of listeners) cb();
+}
+
+function connect() {
+  if (sharedEs) return;
+  const token = getAuthToken();
+  const params = token ? `?token=${encodeURIComponent(token)}` : "";
+  const es = new EventSource(`/api/system/resources/stream${params}`);
+
+  es.addEventListener("snapshot", (e) => {
+    try {
+      const snapshot: ResourceSnapshot = JSON.parse(e.data);
+      sharedLatest = snapshot;
+      sharedHistory = [...sharedHistory, snapshot];
+      if (sharedHistory.length > HISTORY_MAX) {
+        sharedHistory = sharedHistory.slice(-HISTORY_MAX);
+      }
+      sharedConnected = true;
+      notify();
+    } catch {}
+  });
+
+  es.onerror = () => {
+    sharedConnected = false;
+    // Close stale ES and manually reconnect with backoff to avoid duplicate connections
+    if (sharedEs) {
+      sharedEs.close();
+      sharedEs = null;
+    }
+    notify();
+    if (refCount > 0) {
+      setTimeout(() => { if (!sharedEs && refCount > 0) connect(); }, 5000);
+    }
+  };
+
+  es.onopen = () => {
+    sharedConnected = true;
+    notify();
+  };
+
+  sharedEs = es;
+}
+
+function disconnect() {
+  if (sharedEs) {
+    sharedEs.close();
+    sharedEs = null;
+    sharedConnected = false;
+    notify();
+  }
+}
+
+// ── Hook ───────────────────────────────────────────────────────────────
+
+export function useResourceMonitor() {
+  const [, forceUpdate] = useState(0);
+  const mounted = useRef(true);
+
+  const rerender = useCallback(() => {
+    if (mounted.current) forceUpdate((n) => n + 1);
+  }, []);
+
+  useEffect(() => {
+    mounted.current = true;
+    listeners.add(rerender);
+    refCount++;
+    if (refCount === 1) connect();
+
+    return () => {
+      mounted.current = false;
+      listeners.delete(rerender);
+      refCount--;
+      if (refCount === 0) disconnect();
+    };
+  }, [rerender]);
+
+  return {
+    latest: sharedLatest,
+    history: sharedHistory,
+    isConnected: sharedConnected,
+  };
+}

package/src/web/stores/panel-store.ts

@@ -16,7 +16,7 @@ import {
 } from "./panel-utils";
 
 /** Tab types that can only have 1 instance per project */
-const SINGLETON_TYPES = new Set<TabType>(["settings"]);
+const SINGLETON_TYPES = new Set<TabType>(["settings", "git-log"]);
 
 /** Tab types removed in a prior version — filter them out when loading persisted state */
 const OBSOLETE_TAB_TYPES = new Set(["projects", "git-status", "git-graph"]);

package/src/web/stores/tab-store.ts

@@ -14,7 +14,9 @@ export type TabType =
   | "ports"
   | "extension"
   | "extension-webview"
-  | "conflict-editor";
+  | "conflict-editor"
+  | "system-monitor"
+  | "git-log";
 
 export interface Tab {
   id: string;

package/dist/web/assets/ai-settings-section-AuV6Lzz2.js

@@ -1 +0,0 @@
-import{o as e}from"./rolldown-runtime-FhOqtrmT.js";import{b as t,x as n}from"./vendor-markdown-0Mxgxy0L.js";import{S as r,a as i,c as a,d as o,f as s,g as c,h as l,l as u,m as d,n as f,o as p,p as m,r as h,s as g,u as _}from"./vendor-ui-UXCWAcmi.js";import{t as v}from"./createLucideIcon-BjHrJDVb.js";import{n as y}from"./globe-B4Ilypbs.js";import{t as b}from"./input-_LFQwhzd.js";import{n as x}from"./x-BPReZWnP.js";import{t as S}from"./refresh-cw-BjrAbUJe.js";import{i as C,t as w}from"./api-client-DIhJ5qVW.js";import{n as T}from"./utils-CQux7CsO.js";import{a as E,h as D}from"./api-settings-C3T95dWg.js";var O=v(`bell-off`,[[`path`,{d:`M10.268 21a2 2 0 0 0 3.464 0`,key:`vwvbt9`}],[`path`,{d:`M17 17H4a1 1 0 0 1-.74-1.673C4.59 13.956 6 12.499 6 8a6 6 0 0 1 .258-1.742`,key:`178tsu`}],[`path`,{d:`m2 2 20 20`,key:`1ooewy`}],[`path`,{d:`M8.668 3.01A6 6 0 0 1 18 8c0 2.687.77 4.653 1.707 6.05`,key:`1hqiys`}]]),k=v(`bot`,[[`path`,{d:`M12 8V4H8`,key:`hb8ula`}],[`rect`,{width:`16`,height:`12`,x:`4`,y:`8`,rx:`2`,key:`enze0r`}],[`path`,{d:`M2 14h2`,key:`vft8re`}],[`path`,{d:`M20 14h2`,key:`4cs60a`}],[`path`,{d:`M15 13v2`,key:`1xurst`}],[`path`,{d:`M9 13v2`,key:`rq6x2g`}]]),A=v(`bug`,[[`path`,{d:`M12 20v-9`,key:`1qisl0`}],[`path`,{d:`M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z`,key:`uouzyp`}],[`path`,{d:`M14.12 3.88 16 2`,key:`qol33r`}],[`path`,{d:`M21 21a4 4 0 0 0-3.81-4`,key:`1b0z45`}],[`path`,{d:`M21 5a4 4 0 0 1-3.55 3.97`,key:`5cxbf6`}],[`path`,{d:`M22 13h-4`,key:`1jl80f`}],[`path`,{d:`M3 21a4 4 0 0 1 3.81-4`,key:`1fjd4g`}],[`path`,{d:`M3 5a4 4 0 0 0 3.55 3.97`,key:`1d7oge`}],[`path`,{d:`M6 13H2`,key:`82j7cp`}],[`path`,{d:`m8 2 1.88 1.88`,key:`fmnt4t`}],[`path`,{d:`M9 7.13V6a3 3 0 1 1 6 0v1.13`,key:`1vgav8`}]]),j=v(`chevron-down`,[[`path`,{d:`m6 9 6 6 6-6`,key:`qrunsl`}]]),M=v(`chevron-up`,[[`path`,{d:`m18 15-6-6-6 6`,key:`153udz`}]]),N=v(`lock`,[[`rect`,{width:`18`,height:`11`,x:`3`,y:`11`,rx:`2`,ry:`2`,key:`1w4ew1`}],[`path`,{d:`M7 11V7a5 5 0 0 1 10 0v4`,key:`fwvmzm`}]]),P=v(`pencil`,[[`path`,{d:`M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z`,key:`1a8usu`}],[`path`,{d:`m15 5 4 4`,key:`1mk7zo`}]]),F=e(n(),1),I=t();function L({className:e,...t}){return(0,I.jsx)(r,{"data-slot":`label`,className:T(`flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50`,e),...t})}var R=F.forwardRef(({className:e,...t},n)=>(0,I.jsx)(f,{className:T(`peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input`,e),...t,ref:n,children:(0,I.jsx)(h,{className:T(`pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0`)})}));R.displayName=f.displayName;function z({...e}){return(0,I.jsx)(o,{"data-slot":`select`,...e})}function B({...e}){return(0,I.jsx)(l,{"data-slot":`select-value`,...e})}function V({className:e,size:t=`default`,children:n,...r}){return(0,I.jsxs)(d,{"data-slot":`select-trigger`,"data-size":t,className:T(`flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground`,e),...r,children:[n,(0,I.jsx)(p,{asChild:!0,children:(0,I.jsx)(j,{className:`size-4 opacity-50`})})]})}function H({className:e,children:t,position:n=`item-aligned`,align:r=`center`,...a}){return(0,I.jsx)(_,{children:(0,I.jsxs)(i,{"data-slot":`select-content`,className:T(`relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95`,n===`popper`&&`data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1`,e),position:n,align:r,...a,children:[(0,I.jsx)(W,{}),(0,I.jsx)(c,{className:T(`p-1`,n===`popper`&&`h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1`),children:t}),(0,I.jsx)(G,{})]})})}function U({className:e,children:t,...n}){return(0,I.jsxs)(g,{"data-slot":`select-item`,className:T(`relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2`,e),...n,children:[(0,I.jsx)(`span`,{"data-slot":`select-item-indicator`,className:`absolute right-2 flex size-3.5 items-center justify-center`,children:(0,I.jsx)(a,{children:(0,I.jsx)(y,{className:`size-4`})})}),(0,I.jsx)(u,{children:t})]})}function W({className:e,...t}){return(0,I.jsx)(m,{"data-slot":`select-scroll-up-button`,className:T(`flex cursor-default items-center justify-center py-1`,e),...t,children:(0,I.jsx)(M,{className:`size-4`})})}function G({className:e,...t}){return(0,I.jsx)(s,{"data-slot":`select-scroll-down-button`,className:T(`flex cursor-default items-center justify-center py-1`,e),...t,children:(0,I.jsx)(j,{className:`size-4`})})}var K={claude:`C`,cursor:`▶`,codex:`◆`,gemini:`G`};function q({value:e,onChange:t,projectName:n}){let[r,i]=(0,F.useState)([]),[a,o]=(0,F.useState)(!1),s=(0,F.useRef)(null),c=(0,F.useRef)(0);(0,F.useEffect)(()=>{n&&w.get(`${C(n)}/chat/providers`).then(i).catch(()=>{})},[n]),(0,F.useEffect)(()=>{if(!a)return;let e=e=>{s.current&&!s.current.contains(e.target)&&o(!1)};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[a]),(0,F.useEffect)(()=>{a&&(c.current=Math.max(0,r.findIndex(t=>t.id===e)))},[a,e,r]);let l=(0,F.useCallback)(e=>{if(e.key===`Escape`){o(!1);return}if(e.key===`ArrowDown`||e.key===`ArrowUp`){e.preventDefault();let t=e.key===`ArrowDown`?1:-1;c.current=(c.current+t+r.length)%r.length,(s.current?.querySelector(`[data-idx="${c.current}"]`))?.focus()}if(e.key===`Enter`){e.preventDefault();let n=r[c.current];n&&(t(n.id),o(!1))}},[t,r]);if(r.length<=1)return null;let u=r.find(t=>t.id===e),d=K[e]||`?`;return(0,I.jsxs)(`div`,{className:`relative`,children:[(0,I.jsxs)(`button`,{type:`button`,onClick:e=>{e.stopPropagation(),o(e=>!e)},className:`inline-flex items-center gap-1 px-2 py-1 rounded-md text-[11px] text-text-subtle hover:text-text-primary hover:bg-surface-elevated transition-colors border border-transparent hover:border-border`,"aria-label":`AI Provider: ${u?.name??e}`,children:[(0,I.jsx)(`span`,{className:`inline-flex h-3.5 w-3.5 items-center justify-center rounded text-[9px] font-bold bg-surface-elevated shrink-0`,children:d}),(0,I.jsx)(`span`,{className:`max-w-[80px] truncate capitalize`,children:u?.name??e})]}),a&&(0,I.jsxs)(`div`,{ref:s,role:`listbox`,"aria-label":`AI Providers`,onKeyDown:l,onMouseDown:e=>e.stopPropagation(),onClick:e=>e.stopPropagation(),className:`absolute bottom-full left-0 mb-1 z-50 w-56 rounded-lg border border-border bg-surface shadow-lg`,children:[(0,I.jsx)(`div`,{className:`px-3 py-2 border-b border-border`,children:(0,I.jsx)(`span`,{className:`text-xs font-medium text-text-secondary`,children:`Provider`})}),(0,I.jsx)(`div`,{className:`py-1`,children:r.map((n,r)=>{let i=K[n.id]||`?`,a=n.id===e;return(0,I.jsxs)(`button`,{"data-idx":r,role:`option`,"aria-selected":a,tabIndex:0,onClick:()=>{t(n.id),o(!1)},className:`w-full flex items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-surface-elevated focus:bg-surface-elevated focus:outline-none ${a?`bg-surface-elevated`:``}`,children:[(0,I.jsx)(`span`,{className:`inline-flex h-5 w-5 items-center justify-center rounded text-[11px] font-bold bg-surface-elevated text-text-subtle shrink-0`,children:i}),(0,I.jsx)(`span`,{className:`flex-1 text-sm font-medium text-text-primary capitalize`,children:n.name}),a&&(0,I.jsx)(y,{className:`size-4 shrink-0 text-primary`})]},n.id)})})]})]})}function J({providerId:e}){return(0,I.jsx)(`span`,{className:`inline-flex h-4 w-4 items-center justify-center rounded text-[10px] font-bold bg-surface-elevated text-text-subtle shrink-0`,title:e,children:K[e]||`?`})}var Y=[{value:`low`,label:`Low`},{value:`medium`,label:`Medium`},{value:`high`,label:`High`}],X=[{value:`bypassPermissions`,label:`Bypass permissions (default)`},{value:`default`,label:`Ask before edits`},{value:`acceptEdits`,label:`Edit automatically`},{value:`plan`,label:`Plan mode`}],Z={claude:`Claude`,cursor:`Cursor`,codex:`Codex`,gemini:`Gemini`};function Q({compact:e}={}){let[t,n]=(0,F.useState)(null),[r,i]=(0,F.useState)(``),[a,o]=(0,F.useState)([]),[s,c]=(0,F.useState)(!1),[l,u]=(0,F.useState)(!1),[d,f]=(0,F.useState)(null),[p,m]=(0,F.useState)(0);(0,F.useEffect)(()=>{E().then(e=>{n(e),i(e.default_provider??`claude`)}).catch(e=>f(e.message))},[]),(0,F.useEffect)(()=>{r&&(c(!0),w.get(`/api/settings/ai/providers/${r}/models`).then(o).catch(()=>o([])).finally(()=>c(!1)))},[r]);let h=t?Object.keys(t.providers).filter(e=>e!==`mock`).map(e=>({id:e,name:Z[e]??e})):[],g=t?.providers[r],_=g?.type===`agent-sdk`||!g?.type&&r===`claude`,v=async(e,i)=>{if(t){u(!0),f(null);try{n(await D({providers:{[r]:{[e]:i}}})),m(e=>e+1)}catch(e){f(e.message)}finally{u(!1)}}},y=e?`text-[11px]`:`text-sm`,x=e?`text-xs`:`text-sm`,S=e?`space-y-2`:`space-y-4`,C=e?`space-y-1.5`:`space-y-3`,T=e?`space-y-1`:`space-y-1.5`;if(!t)return(0,I.jsxs)(`div`,{className:C,children:[(0,I.jsx)(`h3`,{className:`${x} font-medium text-text-secondary`,children:`AI Settings`}),(0,I.jsx)(`p`,{className:`${y} text-text-subtle`,children:d?`Error: ${d}`:`Loading...`})]});let O=_?a:[{value:`__default__`,label:`Auto (default)`},...a];return(0,I.jsxs)(`div`,{className:S,children:[(0,I.jsx)(`h3`,{className:`${x} font-medium text-text-secondary`,children:`AI Settings`}),h.length>1&&(0,I.jsx)(`div`,{className:`flex gap-0.5 border-b border-border/50 -mx-1 px-1`,children:h.map(e=>(0,I.jsxs)(`button`,{onClick:()=>i(e.id),className:`flex items-center gap-1 px-2 py-1 text-[11px] rounded-t transition-colors ${r===e.id?`text-primary border-b-2 border-primary font-medium`:`text-text-subtle hover:text-text-secondary`}`,children:[(0,I.jsx)(J,{providerId:e.id}),(0,I.jsx)(`span`,{className:`capitalize`,children:e.name})]},e.id))}),(0,I.jsxs)(`div`,{className:C,children:[a.length>0&&(0,I.jsxs)(`div`,{className:T,children:[(0,I.jsx)(L,{htmlFor:`ai-model`,className:e?y:void 0,children:`Model`}),(0,I.jsxs)(z,{value:_?g?.model??a[0]?.value:g?.model||`__default__`,onValueChange:e=>v(`model`,e===`__default__`?void 0:e),disabled:s,children:[(0,I.jsx)(V,{id:`ai-model`,className:`w-full ${e?`h-7 text-[11px]`:``}`,children:(0,I.jsx)(B,{placeholder:s?`Loading models...`:`Select model`})}),(0,I.jsx)(H,{className:`max-h-[300px]`,children:O.map(e=>(0,I.jsx)(U,{value:e.value,children:e.label},e.value))})]})]}),_&&(0,I.jsxs)(I.Fragment,{children:[(0,I.jsxs)(`div`,{className:T,children:[(0,I.jsx)(L,{htmlFor:`ai-base-url`,className:e?y:void 0,children:`Base URL`}),(0,I.jsx)(b,{id:`ai-base-url`,type:`url`,defaultValue:g?.base_url??``,placeholder:`https://api.anthropic.com (default)`,className:e?`h-7 text-[11px]`:void 0,onBlur:e=>{v(`base_url`,e.target.value.trim()||void 0)}},`baseurl-${r}-${p}`)]}),(0,I.jsxs)(`div`,{className:T,children:[(0,I.jsx)(L,{htmlFor:`ai-api-key`,className:e?y:void 0,children:`API Key / Token`}),(0,I.jsx)(b,{id:`ai-api-key`,type:`password`,defaultValue:g?.api_key??``,placeholder:`sk-ant-... (optional, overrides accounts)`,className:e?`h-7 text-[11px] font-mono`:`font-mono`,onBlur:e=>{let t=e.target.value.trim();t.startsWith(`••••`)||v(`api_key`,t||void 0)}},`apikey-${r}-${p}`),(0,I.jsx)(`p`,{className:`${e?`text-[9px]`:`text-[11px]`} text-muted-foreground`,children:`Direct API key or OAuth token. Leave empty to use connected accounts.`})]}),(0,I.jsxs)(`div`,{className:T,children:[(0,I.jsx)(L,{htmlFor:`ai-effort`,className:e?y:void 0,children:`Effort`}),(0,I.jsxs)(z,{value:g?.effort??`high`,onValueChange:e=>v(`effort`,e),children:[(0,I.jsx)(V,{id:`ai-effort`,className:`w-full ${e?`h-7 text-[11px]`:``}`,children:(0,I.jsx)(B,{})}),(0,I.jsx)(H,{children:Y.map(e=>(0,I.jsx)(U,{value:e.value,children:e.label},e.value))})]})]}),(0,I.jsxs)(`div`,{className:T,children:[(0,I.jsx)(L,{htmlFor:`ai-max-turns`,className:e?y:void 0,children:`Max Turns (1-500)`}),(0,I.jsx)(b,{id:`ai-max-turns`,type:`number`,min:1,max:500,defaultValue:g?.max_turns??100,className:e?`h-7 text-[11px]`:void 0,onBlur:e=>{let t=parseInt(e.target.value);isNaN(t)||v(`max_turns`,t)}},`turns-${r}-${p}`)]}),(0,I.jsxs)(`div`,{className:T,children:[(0,I.jsx)(L,{htmlFor:`ai-budget`,className:e?y:void 0,children:`Max Budget (USD)`}),(0,I.jsx)(b,{id:`ai-budget`,type:`number`,step:.1,min:.01,max:50,defaultValue:g?.max_budget_usd??``,placeholder:`No limit`,className:e?`h-7 text-[11px]`:void 0,onBlur:e=>{let t=parseFloat(e.target.value);v(`max_budget_usd`,isNaN(t)?void 0:t)}},`budget-${r}-${p}`)]}),(0,I.jsxs)(`div`,{className:T,children:[(0,I.jsx)(L,{htmlFor:`ai-thinking`,className:e?y:void 0,children:`Thinking Budget (tokens)`}),(0,I.jsx)(b,{id:`ai-thinking`,type:`number`,min:0,defaultValue:g?.thinking_budget_tokens??``,placeholder:`Disabled`,className:e?`h-7 text-[11px]`:void 0,onBlur:e=>{let t=parseInt(e.target.value);v(`thinking_budget_tokens`,isNaN(t)?void 0:t)}},`thinking-${r}-${p}`)]}),(0,I.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,I.jsxs)(`div`,{children:[(0,I.jsx)(L,{htmlFor:`ai-agent-teams`,className:e?y:void 0,children:`Agent Teams`}),(0,I.jsx)(`p`,{className:`${e?`text-[9px]`:`text-[11px]`} text-muted-foreground`,children:`Experimental. Enables multi-agent collaboration with shared tasks and messaging. Uses ~7x more tokens.`})]}),(0,I.jsx)(R,{id:`ai-agent-teams`,checked:g?.agent_teams??!1,onCheckedChange:e=>v(`agent_teams`,e)})]}),g?.agent_teams&&(0,I.jsx)($,{compact:e})]}),(0,I.jsxs)(`div`,{className:T,children:[(0,I.jsx)(L,{htmlFor:`ai-permission-mode`,className:e?y:void 0,children:`Default Permission Mode`}),(0,I.jsxs)(z,{value:g?.permission_mode??`bypassPermissions`,onValueChange:e=>v(`permission_mode`,e),children:[(0,I.jsx)(V,{id:`ai-permission-mode`,className:`w-full ${e?`h-7 text-[11px]`:``}`,children:(0,I.jsx)(B,{})}),(0,I.jsx)(H,{children:X.map(e=>(0,I.jsx)(U,{value:e.value,children:e.label},e.value))})]})]}),(0,I.jsxs)(`div`,{className:T,children:[(0,I.jsx)(L,{htmlFor:`ai-system-prompt`,className:e?y:void 0,children:`Additional Instructions`}),(0,I.jsx)(`textarea`,{id:`ai-system-prompt`,rows:e?3:4,defaultValue:g?.system_prompt??``,placeholder:`Enter additional instructions for ${r}...`,className:`w-full rounded-md border border-input bg-background px-3 py-2 ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${e?`text-[11px]`:`text-sm`}`,onBlur:e=>{v(`system_prompt`,e.target.value.trim()||void 0)}},`sysprompt-${r}-${p}`)]})]}),l&&(0,I.jsx)(`p`,{className:`text-xs text-text-subtle`,children:`Saving...`}),d&&(0,I.jsx)(`p`,{className:`text-xs text-red-500`,children:d})]})}function $({compact:e}){let[t,n]=(0,F.useState)([]),[r,i]=(0,F.useState)(!1),[a,o]=(0,F.useState)(null),s=(0,F.useCallback)(async()=>{i(!0);try{n(await w.get(`/api/teams`)??[])}catch{}i(!1)},[]);(0,F.useEffect)(()=>{s()},[s]);let c=async e=>{try{await w.del(`/api/teams/${encodeURIComponent(e)}`),n(t=>t.filter(t=>t.name!==e)),o(null)}catch{}};return t.length===0&&!r?null:(0,I.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,I.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,I.jsxs)(L,{className:e?`text-[11px]`:void 0,children:[`Teams (`,t.length,`)`]}),(0,I.jsx)(`button`,{onClick:s,className:`text-text-subtle hover:text-foreground p-1`,"aria-label":`Refresh teams`,children:(0,I.jsx)(S,{className:`size-3 ${r?`animate-spin`:``}`})})]}),t.map(e=>(0,I.jsxs)(`div`,{className:`flex items-center justify-between p-2 rounded bg-surface-elevated text-xs`,children:[(0,I.jsxs)(`div`,{className:`min-w-0`,children:[(0,I.jsx)(`div`,{className:`font-medium truncate`,children:e.name}),e.description&&(0,I.jsx)(`div`,{className:`text-text-subtle truncate`,children:e.description}),(0,I.jsxs)(`div`,{className:`text-text-subtle`,children:[e.members?.length??e.memberCount??0,` members`,e.createdAt?` · ${new Date(e.createdAt).toLocaleDateString()}`:``]})]}),a===e.name?(0,I.jsxs)(`div`,{className:`flex gap-1 shrink-0 ml-2`,children:[(0,I.jsx)(`button`,{onClick:()=>c(e.name),className:`px-2 py-1 bg-red-600 text-white rounded text-[10px]`,children:`Delete`}),(0,I.jsx)(`button`,{onClick:()=>o(null),className:`px-2 py-1 bg-zinc-600 text-white rounded text-[10px]`,children:`Cancel`})]}):(0,I.jsx)(`button`,{onClick:()=>o(e.name),className:`shrink-0 text-text-subtle hover:text-red-500 p-1 ml-2`,"aria-label":`Delete team ${e.name}`,children:(0,I.jsx)(x,{className:`size-3.5`})})]},e.name))]})}export{O as _,H as a,B as c,P as d,N as f,k as g,A as h,z as i,R as l,j as m,J as n,U as o,M as p,q as r,V as s,Q as t,L as u};

package/dist/web/assets/architecture-PBZL5I3N-fAJMexNi.js

@@ -1 +0,0 @@
-import{G as e}from"./vendor-mermaid-D2KKkqNs.js";export{e as createArchitectureServices};