@hienlh/ppm 0.13.55 → 0.13.57

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

@@ -1,12 +1,17 @@
-import { useState, useMemo, memo } from "react";
+import { useState, useMemo, useCallback, memo } from "react";
 import {
   Server, Monitor, Bot, Hammer, HelpCircle,
-  ChevronRight, ChevronDown, Wifi, WifiOff,
+  Wifi, WifiOff,
 } from "lucide-react";
 import { useResourceMonitor, type ResourceGroup } from "@/hooks/use-resource-monitor";
-import { SparklineCanvas } from "./sparkline-canvas";
 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,
@@ -16,24 +21,33 @@ const GROUP_ICONS: Record<ResourceGroup["type"], React.ElementType> = {
   unknown: HelpCircle,
 };
 
-const SPARKLINE_POINTS = 200; // ~10 min at 3s intervals
+const SPARKLINE_POINTS = 200;
 
-function cpuColor(cpu: number) {
-  if (cpu > 80) return "text-red-500";
-  if (cpu > 50) return "text-yellow-500";
-  return "text-green-500";
+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 formatRam(mb: number) {
-  return mb < 1024 ? `${mb.toFixed(0)} MB` : `${(mb / 1024).toFixed(1)} GB`;
+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();
 
-  // Extract per-group CPU history for sparklines
   const groupSparklines = useMemo(() => {
     const map = new Map<string, number[]>();
     const recentHistory = history.slice(-SPARKLINE_POINTS);
@@ -48,6 +62,20 @@ export const SystemMonitorTab = memo(function SystemMonitorTab() {
     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);
@@ -57,6 +85,12 @@ export const SystemMonitorTab = memo(function SystemMonitorTab() {
     });
   };
 
+  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">
@@ -86,15 +120,29 @@ export const SystemMonitorTab = memo(function SystemMonitorTab() {
           <thead>
             <tr className="text-text-subtle border-b border-border">
               <th className="text-left py-1.5 px-3 font-medium">Process</th>
-              <th className="text-right py-1.5 px-2 font-medium w-16">CPU</th>
-              <th className="text-right py-1.5 px-2 font-medium w-20">RAM</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>
-            {latest.groups.map((group) => {
+            {sortedGroups.map((group) => {
               const key = `${group.type}:${group.label}`;
               const Icon = GROUP_ICONS[group.type] ?? HelpCircle;
               const isExpanded = expanded.has(key);
@@ -108,7 +156,10 @@ export const SystemMonitorTab = memo(function SystemMonitorTab() {
                   isExpanded={isExpanded}
                   sparkData={sparkData}
                   isMobile={isMobile}
+                  sortKey={sortKey}
+                  sortDir={sortDir}
                   onToggle={() => toggle(key)}
+                  onKill={killProcess}
                 />
               );
             })}
@@ -133,62 +184,3 @@ export const SystemMonitorTab = memo(function SystemMonitorTab() {
     </div>
   );
 });
-
-// ── Group row with collapsible children ────────────────────────────────
-
-interface GroupRowProps {
-  group: ResourceGroup;
-  Icon: React.ElementType;
-  isExpanded: boolean;
-  sparkData: number[];
-  isMobile: boolean;
-  onToggle: () => void;
-}
-
-const GroupRow = memo(function GroupRow({
-  group, Icon, isExpanded, sparkData, isMobile, onToggle,
-}: GroupRowProps) {
-  const Chevron = isExpanded ? ChevronDown : ChevronRight;
-
-  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 && group.processes.map((proc) => (
-        <tr key={proc.pid} className="text-text-subtle">
-          <td className="py-1 px-3 pl-10">
-            <span className="text-text-subtle mr-1.5">{proc.pid}</span>
-            <span className="truncate">{proc.command}</span>
-          </td>
-          <td className="text-right py-1 px-2">{proc.cpu.toFixed(1)}%</td>
-          <td className="text-right py-1 px-2">{formatRam(proc.ramMB)}</td>
-          {!isMobile && <td />}
-        </tr>
-      ))}
-    </>
-  );
-});

package/dist/web/assets/ai-settings-section-AxLbNnLW.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{t as y}from"./chevron-down-BMo4cBth.js";import{n as b}from"./globe-CQ8NAYvi.js";import{t as x}from"./input-By_lZeCs.js";import{n as S}from"./x-ClICkcxR.js";import{t as C}from"./refresh-cw-CRD2qr4U.js";import{i as w,t as T}from"./api-client-BK4NPNoY.js";import{n as E}from"./utils-CSCvNZxE.js";import{a as D,h as O}from"./api-settings-BJTjIG4U.js";var k=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`}]]),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-up`,[[`path`,{d:`m18 15-6-6-6 6`,key:`153udz`}]]),M=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`}]]),N=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`}]]),P=e(n(),1),F=t();function I({className:e,...t}){return(0,F.jsx)(r,{"data-slot":`label`,className:E(`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 L=P.forwardRef(({className:e,...t},n)=>(0,F.jsx)(f,{className:E(`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,F.jsx)(h,{className:E(`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`)})}));L.displayName=f.displayName;function R({...e}){return(0,F.jsx)(o,{"data-slot":`select`,...e})}function z({...e}){return(0,F.jsx)(l,{"data-slot":`select-value`,...e})}function B({className:e,size:t=`default`,children:n,...r}){return(0,F.jsxs)(d,{"data-slot":`select-trigger`,"data-size":t,className:E(`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,F.jsx)(p,{asChild:!0,children:(0,F.jsx)(y,{className:`size-4 opacity-50`})})]})}function V({className:e,children:t,position:n=`item-aligned`,align:r=`center`,...a}){return(0,F.jsx)(_,{children:(0,F.jsxs)(i,{"data-slot":`select-content`,className:E(`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,F.jsx)(U,{}),(0,F.jsx)(c,{className:E(`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,F.jsx)(W,{})]})})}function H({className:e,children:t,...n}){return(0,F.jsxs)(g,{"data-slot":`select-item`,className:E(`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,F.jsx)(`span`,{"data-slot":`select-item-indicator`,className:`absolute right-2 flex size-3.5 items-center justify-center`,children:(0,F.jsx)(a,{children:(0,F.jsx)(b,{className:`size-4`})})}),(0,F.jsx)(u,{children:t})]})}function U({className:e,...t}){return(0,F.jsx)(m,{"data-slot":`select-scroll-up-button`,className:E(`flex cursor-default items-center justify-center py-1`,e),...t,children:(0,F.jsx)(j,{className:`size-4`})})}function W({className:e,...t}){return(0,F.jsx)(s,{"data-slot":`select-scroll-down-button`,className:E(`flex cursor-default items-center justify-center py-1`,e),...t,children:(0,F.jsx)(y,{className:`size-4`})})}var G={claude:`C`,cursor:`▶`,codex:`◆`,gemini:`G`};function K({value:e,onChange:t,projectName:n}){let[r,i]=(0,P.useState)([]),[a,o]=(0,P.useState)(!1),s=(0,P.useRef)(null),c=(0,P.useRef)(0);(0,P.useEffect)(()=>{n&&T.get(`${w(n)}/chat/providers`).then(i).catch(()=>{})},[n]),(0,P.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,P.useEffect)(()=>{a&&(c.current=Math.max(0,r.findIndex(t=>t.id===e)))},[a,e,r]);let l=(0,P.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=G[e]||`?`;return(0,F.jsxs)(`div`,{className:`relative`,children:[(0,F.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,F.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,F.jsx)(`span`,{className:`max-w-[80px] truncate capitalize`,children:u?.name??e})]}),a&&(0,F.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,F.jsx)(`div`,{className:`px-3 py-2 border-b border-border`,children:(0,F.jsx)(`span`,{className:`text-xs font-medium text-text-secondary`,children:`Provider`})}),(0,F.jsx)(`div`,{className:`py-1`,children:r.map((n,r)=>{let i=G[n.id]||`?`,a=n.id===e;return(0,F.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,F.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,F.jsx)(`span`,{className:`flex-1 text-sm font-medium text-text-primary capitalize`,children:n.name}),a&&(0,F.jsx)(b,{className:`size-4 shrink-0 text-primary`})]},n.id)})})]})]})}function q({providerId:e}){return(0,F.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:G[e]||`?`})}var J=[{value:`low`,label:`Low`},{value:`medium`,label:`Medium`},{value:`high`,label:`High`}],Y=[{value:`bypassPermissions`,label:`Bypass permissions (default)`},{value:`default`,label:`Ask before edits`},{value:`acceptEdits`,label:`Edit automatically`},{value:`plan`,label:`Plan mode`}],X={claude:`Claude`,cursor:`Cursor`,codex:`Codex`,gemini:`Gemini`};function Z({compact:e}={}){let[t,n]=(0,P.useState)(null),[r,i]=(0,P.useState)(``),[a,o]=(0,P.useState)([]),[s,c]=(0,P.useState)(!1),[l,u]=(0,P.useState)(!1),[d,f]=(0,P.useState)(null),[p,m]=(0,P.useState)(0);(0,P.useEffect)(()=>{D().then(e=>{n(e),i(e.default_provider??`claude`)}).catch(e=>f(e.message))},[]),(0,P.useEffect)(()=>{r&&(c(!0),T.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:X[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 O({providers:{[r]:{[e]:i}}})),m(e=>e+1)}catch(e){f(e.message)}finally{u(!1)}}},y=e?`text-[11px]`:`text-sm`,b=e?`text-xs`:`text-sm`,S=e?`space-y-2`:`space-y-4`,C=e?`space-y-1.5`:`space-y-3`,w=e?`space-y-1`:`space-y-1.5`;if(!t)return(0,F.jsxs)(`div`,{className:C,children:[(0,F.jsx)(`h3`,{className:`${b} font-medium text-text-secondary`,children:`AI Settings`}),(0,F.jsx)(`p`,{className:`${y} text-text-subtle`,children:d?`Error: ${d}`:`Loading...`})]});let E=_?a:[{value:`__default__`,label:`Auto (default)`},...a];return(0,F.jsxs)(`div`,{className:S,children:[(0,F.jsx)(`h3`,{className:`${b} font-medium text-text-secondary`,children:`AI Settings`}),h.length>1&&(0,F.jsx)(`div`,{className:`flex gap-0.5 border-b border-border/50 -mx-1 px-1`,children:h.map(e=>(0,F.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,F.jsx)(q,{providerId:e.id}),(0,F.jsx)(`span`,{className:`capitalize`,children:e.name})]},e.id))}),(0,F.jsxs)(`div`,{className:C,children:[a.length>0&&(0,F.jsxs)(`div`,{className:w,children:[(0,F.jsx)(I,{htmlFor:`ai-model`,className:e?y:void 0,children:`Model`}),(0,F.jsxs)(R,{value:_?g?.model??a[0]?.value:g?.model||`__default__`,onValueChange:e=>v(`model`,e===`__default__`?void 0:e),disabled:s,children:[(0,F.jsx)(B,{id:`ai-model`,className:`w-full ${e?`h-7 text-[11px]`:``}`,children:(0,F.jsx)(z,{placeholder:s?`Loading models...`:`Select model`})}),(0,F.jsx)(V,{className:`max-h-[300px]`,children:E.map(e=>(0,F.jsx)(H,{value:e.value,children:e.label},e.value))})]})]}),_&&(0,F.jsxs)(F.Fragment,{children:[(0,F.jsxs)(`div`,{className:w,children:[(0,F.jsx)(I,{htmlFor:`ai-base-url`,className:e?y:void 0,children:`Base URL`}),(0,F.jsx)(x,{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,F.jsxs)(`div`,{className:w,children:[(0,F.jsx)(I,{htmlFor:`ai-api-key`,className:e?y:void 0,children:`API Key / Token`}),(0,F.jsx)(x,{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,F.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,F.jsxs)(`div`,{className:w,children:[(0,F.jsx)(I,{htmlFor:`ai-effort`,className:e?y:void 0,children:`Effort`}),(0,F.jsxs)(R,{value:g?.effort??`high`,onValueChange:e=>v(`effort`,e),children:[(0,F.jsx)(B,{id:`ai-effort`,className:`w-full ${e?`h-7 text-[11px]`:``}`,children:(0,F.jsx)(z,{})}),(0,F.jsx)(V,{children:J.map(e=>(0,F.jsx)(H,{value:e.value,children:e.label},e.value))})]})]}),(0,F.jsxs)(`div`,{className:w,children:[(0,F.jsx)(I,{htmlFor:`ai-max-turns`,className:e?y:void 0,children:`Max Turns (1-500)`}),(0,F.jsx)(x,{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,F.jsxs)(`div`,{className:w,children:[(0,F.jsx)(I,{htmlFor:`ai-budget`,className:e?y:void 0,children:`Max Budget (USD)`}),(0,F.jsx)(x,{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,F.jsxs)(`div`,{className:w,children:[(0,F.jsx)(I,{htmlFor:`ai-thinking`,className:e?y:void 0,children:`Thinking Budget (tokens)`}),(0,F.jsx)(x,{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,F.jsxs)(`div`,{className:`flex items-center justify-between gap-2`,children:[(0,F.jsxs)(`div`,{children:[(0,F.jsx)(I,{htmlFor:`ai-agent-teams`,className:e?y:void 0,children:`Agent Teams`}),(0,F.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,F.jsx)(L,{id:`ai-agent-teams`,checked:g?.agent_teams??!1,onCheckedChange:e=>v(`agent_teams`,e)})]}),g?.agent_teams&&(0,F.jsx)(Q,{compact:e})]}),(0,F.jsxs)(`div`,{className:w,children:[(0,F.jsx)(I,{htmlFor:`ai-permission-mode`,className:e?y:void 0,children:`Default Permission Mode`}),(0,F.jsxs)(R,{value:g?.permission_mode??`bypassPermissions`,onValueChange:e=>v(`permission_mode`,e),children:[(0,F.jsx)(B,{id:`ai-permission-mode`,className:`w-full ${e?`h-7 text-[11px]`:``}`,children:(0,F.jsx)(z,{})}),(0,F.jsx)(V,{children:Y.map(e=>(0,F.jsx)(H,{value:e.value,children:e.label},e.value))})]})]}),(0,F.jsxs)(`div`,{className:w,children:[(0,F.jsx)(I,{htmlFor:`ai-system-prompt`,className:e?y:void 0,children:`Additional Instructions`}),(0,F.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,F.jsx)(`p`,{className:`text-xs text-text-subtle`,children:`Saving...`}),d&&(0,F.jsx)(`p`,{className:`text-xs text-red-500`,children:d})]})}function Q({compact:e}){let[t,n]=(0,P.useState)([]),[r,i]=(0,P.useState)(!1),[a,o]=(0,P.useState)(null),s=(0,P.useCallback)(async()=>{i(!0);try{n(await T.get(`/api/teams`)??[])}catch{}i(!1)},[]);(0,P.useEffect)(()=>{s()},[s]);let c=async e=>{try{await T.del(`/api/teams/${encodeURIComponent(e)}`),n(t=>t.filter(t=>t.name!==e)),o(null)}catch{}};return t.length===0&&!r?null:(0,F.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,F.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,F.jsxs)(I,{className:e?`text-[11px]`:void 0,children:[`Teams (`,t.length,`)`]}),(0,F.jsx)(`button`,{onClick:s,className:`text-text-subtle hover:text-foreground p-1`,"aria-label":`Refresh teams`,children:(0,F.jsx)(C,{className:`size-3 ${r?`animate-spin`:``}`})})]}),t.map(e=>(0,F.jsxs)(`div`,{className:`flex items-center justify-between p-2 rounded bg-surface-elevated text-xs`,children:[(0,F.jsxs)(`div`,{className:`min-w-0`,children:[(0,F.jsx)(`div`,{className:`font-medium truncate`,children:e.name}),e.description&&(0,F.jsx)(`div`,{className:`text-text-subtle truncate`,children:e.description}),(0,F.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,F.jsxs)(`div`,{className:`flex gap-1 shrink-0 ml-2`,children:[(0,F.jsx)(`button`,{onClick:()=>c(e.name),className:`px-2 py-1 bg-red-600 text-white rounded text-[10px]`,children:`Delete`}),(0,F.jsx)(`button`,{onClick:()=>o(null),className:`px-2 py-1 bg-zinc-600 text-white rounded text-[10px]`,children:`Cancel`})]}):(0,F.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,F.jsx)(S,{className:`size-3.5`})})]},e.name))]})}export{V as a,z as c,N as d,M as f,k as h,R as i,L as l,A as m,q as n,H as o,j as p,K as r,B as s,Z as t,I as u};

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

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