@tangle-network/sandbox-ui 0.116.2 → 0.116.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,7 +7,7 @@ import { Avatar, AvatarFallback, AvatarImage, Badge, Button, DropdownMenu, Dropd
7
7
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
8
8
  import * as React$1 from "react";
9
9
  import { useEffect, useRef, useState } from "react";
10
- import { focusField, focusFieldWithin, focusRing, timeAgo } from "@tangle-network/ui/utils";
10
+ import { focusField, focusFieldWithin, focusRing, focusRingInset, timeAgo } from "@tangle-network/ui/utils";
11
11
  import { Activity, BarChart2, Bell, Bot, Box, Camera, Check, CheckCircle2, ChevronDown, ChevronLeft, ChevronRight, Clock, Code2, Copy, Cpu, DollarSign, Download, ExternalLink, File, FileEdit, FilePlus, FileText, GitBranch, GitCommit, Globe, HardDrive, Key, Layers, Loader2, MemoryStick, MessageSquare, Monitor, MoreHorizontal, MoreVertical, Network, PanelLeft, Play, Plug, Plus, Power, PowerOff, RefreshCw, RotateCcw, Server, Settings, ShieldAlert, Skull, Terminal, Timer, Trash2, User, Users, Wrench, X, XCircle } from "lucide-react";
12
12
  import { createPortal } from "react-dom";
13
13
  import * as Select from "@radix-ui/react-select";
@@ -1803,6 +1803,27 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
1803
1803
  const totalCount = total ?? sandboxes.length;
1804
1804
  const totalPages = Math.ceil(totalCount / pageSize);
1805
1805
  const hasTeamSandboxes = sandboxes.some((sb) => sb.team !== void 0);
1806
+ const tableScrollRef = React$1.useRef(null);
1807
+ const [hasHiddenColumns, setHasHiddenColumns] = React$1.useState(false);
1808
+ React$1.useEffect(() => {
1809
+ const scroller = tableScrollRef.current;
1810
+ const table = scroller?.querySelector("table");
1811
+ if (!scroller || !table) return;
1812
+ const measure = () => setHasHiddenColumns(scroller.scrollWidth > scroller.clientWidth + 1);
1813
+ measure();
1814
+ if (typeof ResizeObserver === "undefined") {
1815
+ window.addEventListener("resize", measure);
1816
+ return () => window.removeEventListener("resize", measure);
1817
+ }
1818
+ const observer = new ResizeObserver(measure);
1819
+ observer.observe(scroller);
1820
+ observer.observe(table);
1821
+ return () => observer.disconnect();
1822
+ }, [sandboxes, hasTeamSandboxes]);
1823
+ const scrollColumns = (direction) => {
1824
+ const scroller = tableScrollRef.current;
1825
+ scroller?.scrollBy({ left: direction * scroller.clientWidth * .75 });
1826
+ };
1806
1827
  const resolveResumeHandler = (status) => {
1807
1828
  if (onResume) return onResume;
1808
1829
  if (status === "hibernating") return onWake;
@@ -1815,306 +1836,348 @@ function SandboxTable({ sandboxes, page = 1, pageSize = 10, total, onPageChange,
1815
1836
  };
1816
1837
  return /* @__PURE__ */ jsxs("div", {
1817
1838
  className: cn$1("w-full", className),
1818
- children: [/* @__PURE__ */ jsx("div", {
1819
- className: "w-full bg-surface-container rounded-2xl overflow-hidden border border-[var(--md3-outline-variant)]",
1820
- children: /* @__PURE__ */ jsx("div", {
1821
- className: "overflow-x-auto",
1822
- children: /* @__PURE__ */ jsxs("table", {
1823
- className: "w-full text-left border-collapse",
1824
- children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", {
1825
- className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]",
1826
- children: [
1827
- /* @__PURE__ */ jsx("th", {
1828
- className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
1829
- children: "Status"
1830
- }),
1831
- /* @__PURE__ */ jsx("th", {
1832
- className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
1833
- children: "Sandbox Name"
1834
- }),
1835
- hasTeamSandboxes && /* @__PURE__ */ jsx("th", {
1836
- className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
1837
- children: "Scope"
1838
- }),
1839
- /* @__PURE__ */ jsx("th", {
1840
- className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
1841
- children: "Environment"
1842
- }),
1843
- /* @__PURE__ */ jsx("th", {
1844
- className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
1845
- children: "Resources"
1846
- }),
1847
- /* @__PURE__ */ jsx("th", {
1848
- className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider text-right",
1849
- children: "Actions"
1850
- })
1851
- ]
1852
- }) }), /* @__PURE__ */ jsx("tbody", {
1853
- className: "divide-y divide-border",
1854
- children: sandboxes.map((sb) => {
1855
- const sc = statusColors[sb.status] ?? statusColors.stopped;
1856
- const isActive = sb.status === "running";
1857
- const isHibernating = sb.status === "hibernating";
1858
- const isProvisioning = sb.status === "provisioning";
1859
- const resumeHandler = isResumable(sb.status) ? resolveResumeHandler(sb.status) : void 0;
1860
- const onRowClick = resolveRowClick(sb);
1861
- const resumeLabel = isHibernating ? "Wake Up" : "Resume";
1862
- const stopRowClick = (e) => e.stopPropagation();
1863
- return /* @__PURE__ */ jsxs("tr", {
1864
- className: cn$1("group relative transition-colors", onRowClick ? "cursor-pointer hover:bg-surface-container-high" : "hover:bg-surface-container-high"),
1865
- onClick: onRowClick,
1839
+ children: [
1840
+ sandboxes.length > 0 && hasHiddenColumns && /* @__PURE__ */ jsxs("div", {
1841
+ className: "mb-2 flex items-center justify-end gap-2 text-xs text-muted-foreground",
1842
+ children: [
1843
+ /* @__PURE__ */ jsx("span", { children: "Columns" }),
1844
+ /* @__PURE__ */ jsx("button", {
1845
+ type: "button",
1846
+ onClick: () => scrollColumns(-1),
1847
+ className: `rounded-md border border-[var(--md3-outline-variant)] p-1.5 ${focusRing}`,
1848
+ "aria-label": "Scroll sandbox table left",
1849
+ title: "Scroll table left",
1850
+ children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
1851
+ }),
1852
+ /* @__PURE__ */ jsx("button", {
1853
+ type: "button",
1854
+ onClick: () => scrollColumns(1),
1855
+ className: `rounded-md border border-[var(--md3-outline-variant)] p-1.5 ${focusRing}`,
1856
+ "aria-label": "Scroll sandbox table right",
1857
+ title: "Scroll table right",
1858
+ children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
1859
+ })
1860
+ ]
1861
+ }),
1862
+ /* @__PURE__ */ jsx("div", {
1863
+ className: "w-full bg-surface-container rounded-2xl overflow-hidden border border-[var(--md3-outline-variant)]",
1864
+ children: /* @__PURE__ */ jsx("div", {
1865
+ ref: tableScrollRef,
1866
+ className: `max-h-[min(60vh,35rem)] overflow-auto ${focusRingInset}`,
1867
+ role: "region",
1868
+ "aria-label": "Sandbox table; scroll horizontally for more columns",
1869
+ tabIndex: 0,
1870
+ children: /* @__PURE__ */ jsxs("table", {
1871
+ className: cn$1("w-full text-left border-collapse", hasTeamSandboxes && "[&_th]:px-4 [&_td]:px-4"),
1872
+ children: [/* @__PURE__ */ jsx("thead", {
1873
+ className: "sticky top-0 z-10",
1874
+ children: /* @__PURE__ */ jsxs("tr", {
1875
+ className: "bg-surface-container-high border-b border-[var(--md3-outline-variant)]",
1866
1876
  children: [
1867
- /* @__PURE__ */ jsx("td", {
1868
- className: "px-6 py-5 whitespace-nowrap",
1869
- children: /* @__PURE__ */ jsxs("div", {
1870
- className: "flex items-center gap-2",
1871
- children: [/* @__PURE__ */ jsx("span", {
1872
- className: cn$1("flex h-2.5 w-2.5 rounded-full", sc.dot),
1873
- ...sc.dot.includes("animate-") ? { "data-motion": "essential" } : {}
1874
- }), /* @__PURE__ */ jsx("span", {
1875
- className: cn$1("text-xs font-bold uppercase tracking-wide", sc.text),
1876
- children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1)
1877
- })]
1878
- })
1877
+ /* @__PURE__ */ jsx("th", {
1878
+ className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
1879
+ children: "Status"
1879
1880
  }),
1880
- /* @__PURE__ */ jsx("td", {
1881
- className: "px-6 py-5",
1882
- children: /* @__PURE__ */ jsxs("div", {
1883
- className: "flex flex-col",
1884
- children: [/* @__PURE__ */ jsx("span", {
1885
- className: "text-sm font-bold text-foreground group-hover:text-primary transition-colors",
1886
- children: sb.name
1887
- }), sb.nodeId && /* @__PURE__ */ jsx("span", {
1888
- className: "text-[10px] font-mono text-muted-foreground",
1889
- children: sb.nodeId
1890
- })]
1891
- })
1881
+ /* @__PURE__ */ jsx("th", {
1882
+ className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
1883
+ children: "Sandbox Name"
1892
1884
  }),
1893
- hasTeamSandboxes && /* @__PURE__ */ jsx("td", {
1894
- className: "px-6 py-5",
1895
- children: sb.team ? /* @__PURE__ */ jsxs("div", {
1896
- className: "inline-flex items-center gap-1.5 rounded-full bg-[var(--accent-surface-soft)] px-2.5 py-1 text-[11px] font-semibold text-[var(--accent-text)]",
1897
- title: `Shared with ${sb.team.name ?? "Team"} · ${sb.team.role}`,
1898
- children: [
1899
- /* @__PURE__ */ jsx(Users, {
1900
- className: "h-3 w-3",
1901
- "aria-hidden": "true"
1902
- }),
1903
- /* @__PURE__ */ jsx("span", { children: sb.team.name ?? "Team" }),
1904
- /* @__PURE__ */ jsxs("span", {
1905
- className: "font-normal text-muted-foreground",
1906
- children: ["· ", sb.team.role]
1907
- })
1908
- ]
1909
- }) : /* @__PURE__ */ jsxs("div", {
1910
- className: "inline-flex items-center gap-1.5 rounded-full bg-surface-container-high px-2.5 py-1 text-[11px] font-medium text-muted-foreground",
1911
- title: "Personal sandbox",
1912
- children: [/* @__PURE__ */ jsx(User, {
1913
- className: "h-3 w-3",
1914
- "aria-hidden": "true"
1915
- }), "Personal"]
1916
- })
1885
+ hasTeamSandboxes && /* @__PURE__ */ jsx("th", {
1886
+ className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
1887
+ children: "Scope"
1917
1888
  }),
1918
- /* @__PURE__ */ jsx("td", {
1919
- className: "px-6 py-5",
1920
- children: /* @__PURE__ */ jsxs("div", {
1921
- className: "flex items-center gap-3",
1922
- children: [sb.imageIcon && /* @__PURE__ */ jsx("div", {
1923
- className: "w-8 h-8 rounded-lg bg-surface-container-high flex items-center justify-center",
1924
- children: sb.imageIcon
1925
- }), sb.image && /* @__PURE__ */ jsx("span", {
1926
- className: "text-xs font-bold text-foreground",
1927
- children: sb.image
1928
- })]
1929
- })
1889
+ /* @__PURE__ */ jsx("th", {
1890
+ className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
1891
+ children: "Environment"
1930
1892
  }),
1931
- /* @__PURE__ */ jsx("td", {
1932
- className: "px-6 py-5",
1933
- children: isActive ? /* @__PURE__ */ jsxs("div", {
1934
- className: "space-y-3 w-48",
1935
- children: [/* @__PURE__ */ jsx(MiniMeter, {
1936
- label: "CPU",
1937
- percent: sb.cpuPercent ?? 0
1938
- }), /* @__PURE__ */ jsx(MiniMeter, {
1939
- label: "RAM",
1940
- percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0
1941
- })]
1942
- }) : isProvisioning ? /* @__PURE__ */ jsxs("div", {
1943
- className: "flex items-center gap-2 text-primary italic text-[10px] font-bold",
1944
- children: [/* @__PURE__ */ jsx(RefreshCw, {
1945
- className: "h-3.5 w-3.5 animate-spin",
1946
- "data-motion": "essential"
1947
- }), sb.provisioningMessage ?? "Allocating nodes..."]
1948
- }) : isHibernating ? /* @__PURE__ */ jsxs("div", {
1949
- className: "space-y-3 w-48 opacity-30",
1950
- children: [/* @__PURE__ */ jsx(MiniMeter, {
1951
- label: "CPU",
1952
- percent: 0
1953
- }), /* @__PURE__ */ jsx(MiniMeter, {
1954
- label: "RAM",
1955
- percent: 0
1956
- })]
1957
- }) : null
1893
+ /* @__PURE__ */ jsx("th", {
1894
+ className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider",
1895
+ children: "Resources"
1958
1896
  }),
1959
- /* @__PURE__ */ jsx("td", {
1960
- className: "px-6 py-5 text-right",
1961
- children: /* @__PURE__ */ jsxs("div", {
1962
- className: "flex items-center justify-end gap-1",
1963
- children: [
1964
- isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
1965
- /* @__PURE__ */ jsx("button", {
1966
- type: "button",
1967
- onClick: (e) => {
1968
- stopRowClick(e);
1969
- onOpenIDE?.(sb.id);
1970
- },
1971
- className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
1972
- title: "Open IDE",
1973
- children: /* @__PURE__ */ jsx(Code2, { className: "h-4 w-4" })
1897
+ /* @__PURE__ */ jsx("th", {
1898
+ className: "px-6 py-4 text-xs font-semibold text-muted-foreground uppercase tracking-wider text-right",
1899
+ children: "Actions"
1900
+ })
1901
+ ]
1902
+ })
1903
+ }), /* @__PURE__ */ jsx("tbody", {
1904
+ className: "divide-y divide-border",
1905
+ children: sandboxes.map((sb) => {
1906
+ const sc = statusColors[sb.status] ?? statusColors.stopped;
1907
+ const isActive = sb.status === "running";
1908
+ const isHibernating = sb.status === "hibernating";
1909
+ const isProvisioning = sb.status === "provisioning";
1910
+ const resumeHandler = isResumable(sb.status) ? resolveResumeHandler(sb.status) : void 0;
1911
+ const onRowClick = resolveRowClick(sb);
1912
+ const resumeLabel = isHibernating ? "Wake Up" : "Resume";
1913
+ const stopRowClick = (e) => e.stopPropagation();
1914
+ return /* @__PURE__ */ jsxs("tr", {
1915
+ className: cn$1("group relative transition-colors", onRowClick ? "cursor-pointer hover:bg-surface-container-high" : "hover:bg-surface-container-high"),
1916
+ onClick: onRowClick,
1917
+ children: [
1918
+ /* @__PURE__ */ jsx("td", {
1919
+ className: "px-6 py-5 whitespace-nowrap",
1920
+ children: /* @__PURE__ */ jsxs("div", {
1921
+ className: "flex items-center gap-2",
1922
+ children: [/* @__PURE__ */ jsx("span", {
1923
+ className: cn$1("flex h-2.5 w-2.5 rounded-full", sc.dot),
1924
+ ...sc.dot.includes("animate-") ? { "data-motion": "essential" } : {}
1925
+ }), /* @__PURE__ */ jsx("span", {
1926
+ className: cn$1("text-xs font-bold uppercase tracking-wide", sc.text),
1927
+ children: sb.status.charAt(0).toUpperCase() + sb.status.slice(1)
1928
+ })]
1929
+ })
1930
+ }),
1931
+ /* @__PURE__ */ jsx("td", {
1932
+ className: "px-6 py-5",
1933
+ children: /* @__PURE__ */ jsxs("div", {
1934
+ className: cn$1("flex min-w-0 flex-col", hasTeamSandboxes ? "max-w-36" : "max-w-64"),
1935
+ children: [/* @__PURE__ */ jsx("span", {
1936
+ className: "truncate text-sm font-bold text-foreground group-hover:text-primary transition-colors",
1937
+ title: sb.name,
1938
+ children: sb.name
1939
+ }), sb.nodeId && /* @__PURE__ */ jsx("span", {
1940
+ className: "truncate text-[10px] font-mono text-muted-foreground",
1941
+ title: sb.nodeId,
1942
+ children: sb.nodeId
1943
+ })]
1944
+ })
1945
+ }),
1946
+ hasTeamSandboxes && /* @__PURE__ */ jsx("td", {
1947
+ className: "px-6 py-5",
1948
+ children: sb.team ? /* @__PURE__ */ jsxs("div", {
1949
+ className: "inline-flex max-w-40 items-center gap-1.5 rounded-full bg-[var(--accent-surface-soft)] px-2.5 py-1 text-[11px] font-semibold text-[var(--accent-text)]",
1950
+ title: `Shared with ${sb.team.name ?? "Team"} · ${sb.team.role}`,
1951
+ children: [
1952
+ /* @__PURE__ */ jsx(Users, {
1953
+ className: "h-3 w-3 shrink-0",
1954
+ "aria-hidden": "true"
1955
+ }),
1956
+ /* @__PURE__ */ jsx("span", {
1957
+ className: "min-w-0 truncate",
1958
+ children: sb.team.name ?? "Team"
1974
1959
  }),
1975
- /* @__PURE__ */ jsx("button", {
1960
+ /* @__PURE__ */ jsxs("span", {
1961
+ className: "shrink-0 font-normal text-muted-foreground",
1962
+ children: ["· ", sb.team.role]
1963
+ })
1964
+ ]
1965
+ }) : /* @__PURE__ */ jsxs("div", {
1966
+ className: "inline-flex items-center gap-1.5 rounded-full bg-surface-container-high px-2.5 py-1 text-[11px] font-medium text-muted-foreground",
1967
+ title: "Personal sandbox",
1968
+ children: [/* @__PURE__ */ jsx(User, {
1969
+ className: "h-3 w-3",
1970
+ "aria-hidden": "true"
1971
+ }), "Personal"]
1972
+ })
1973
+ }),
1974
+ /* @__PURE__ */ jsx("td", {
1975
+ className: "px-6 py-5",
1976
+ children: /* @__PURE__ */ jsxs("div", {
1977
+ className: cn$1("flex min-w-0 items-center gap-3", hasTeamSandboxes ? "max-w-26" : "max-w-28"),
1978
+ children: [sb.imageIcon && /* @__PURE__ */ jsx("div", {
1979
+ className: "w-8 h-8 shrink-0 rounded-lg bg-surface-container-high flex items-center justify-center",
1980
+ children: sb.imageIcon
1981
+ }), sb.image && /* @__PURE__ */ jsx("span", {
1982
+ className: "min-w-0 truncate text-xs font-bold text-foreground",
1983
+ title: sb.image,
1984
+ children: sb.image
1985
+ })]
1986
+ })
1987
+ }),
1988
+ /* @__PURE__ */ jsx("td", {
1989
+ className: "px-6 py-5",
1990
+ children: isActive ? /* @__PURE__ */ jsxs("div", {
1991
+ className: cn$1("space-y-3", hasTeamSandboxes ? "w-44" : "w-48"),
1992
+ children: [/* @__PURE__ */ jsx(MiniMeter, {
1993
+ label: "CPU",
1994
+ percent: sb.cpuPercent ?? 0
1995
+ }), /* @__PURE__ */ jsx(MiniMeter, {
1996
+ label: "RAM",
1997
+ percent: sb.ramTotal ? Math.round((sb.ramUsed ?? 0) / sb.ramTotal * 100) : 0
1998
+ })]
1999
+ }) : isProvisioning ? /* @__PURE__ */ jsxs("div", {
2000
+ className: cn$1("flex items-center gap-2 text-primary italic text-[10px] font-bold", hasTeamSandboxes ? "max-w-44" : "max-w-48"),
2001
+ children: [/* @__PURE__ */ jsx(RefreshCw, {
2002
+ className: "h-3.5 w-3.5 shrink-0 animate-spin",
2003
+ "data-motion": "essential"
2004
+ }), /* @__PURE__ */ jsx("span", {
2005
+ className: "min-w-0 truncate",
2006
+ title: sb.provisioningMessage ?? "Allocating nodes...",
2007
+ children: sb.provisioningMessage ?? "Allocating nodes..."
2008
+ })]
2009
+ }) : isHibernating ? /* @__PURE__ */ jsxs("div", {
2010
+ className: cn$1("space-y-3 opacity-30", hasTeamSandboxes ? "w-44" : "w-48"),
2011
+ children: [/* @__PURE__ */ jsx(MiniMeter, {
2012
+ label: "CPU",
2013
+ percent: 0
2014
+ }), /* @__PURE__ */ jsx(MiniMeter, {
2015
+ label: "RAM",
2016
+ percent: 0
2017
+ })]
2018
+ }) : null
2019
+ }),
2020
+ /* @__PURE__ */ jsx("td", {
2021
+ className: "px-6 py-5 text-right",
2022
+ children: /* @__PURE__ */ jsxs("div", {
2023
+ className: "flex items-center justify-end gap-1",
2024
+ children: [
2025
+ isActive && /* @__PURE__ */ jsxs(Fragment, { children: [
2026
+ /* @__PURE__ */ jsx("button", {
2027
+ type: "button",
2028
+ onClick: (e) => {
2029
+ stopRowClick(e);
2030
+ onOpenIDE?.(sb.id);
2031
+ },
2032
+ className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
2033
+ title: "Open IDE",
2034
+ children: /* @__PURE__ */ jsx(Code2, { className: "h-4 w-4" })
2035
+ }),
2036
+ /* @__PURE__ */ jsx("button", {
2037
+ type: "button",
2038
+ onClick: (e) => {
2039
+ stopRowClick(e);
2040
+ onOpenTerminal?.(sb.id);
2041
+ },
2042
+ className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
2043
+ title: "Terminal",
2044
+ children: /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" })
2045
+ }),
2046
+ /* @__PURE__ */ jsx("button", {
2047
+ type: "button",
2048
+ onClick: (e) => {
2049
+ stopRowClick(e);
2050
+ onSSH?.(sb.id);
2051
+ },
2052
+ className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
2053
+ title: "SSH",
2054
+ children: /* @__PURE__ */ jsx(Key, { className: "h-4 w-4" })
2055
+ })
2056
+ ] }),
2057
+ resumeHandler && /* @__PURE__ */ jsxs("button", {
1976
2058
  type: "button",
1977
2059
  onClick: (e) => {
1978
2060
  stopRowClick(e);
1979
- onOpenTerminal?.(sb.id);
2061
+ resumeHandler(sb.id);
1980
2062
  },
1981
- className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
1982
- title: "Terminal",
1983
- children: /* @__PURE__ */ jsx(Terminal, { className: "h-4 w-4" })
2063
+ className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--md3-outline-variant)] text-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all",
2064
+ title: resumeLabel,
2065
+ children: [/* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }), resumeLabel]
1984
2066
  }),
1985
- /* @__PURE__ */ jsx("button", {
2067
+ (() => {
2068
+ const runItem = (handler) => (e) => {
2069
+ e.stopPropagation();
2070
+ handler(sb.id);
2071
+ };
2072
+ const overflowSections = [];
2073
+ if (isActive) {
2074
+ const lifecycle = [];
2075
+ if (onStop) lifecycle.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
2076
+ onClick: runItem(onStop),
2077
+ children: [/* @__PURE__ */ jsx(PowerOff, { className: "mr-2 h-4 w-4" }), " Stop Sandbox"]
2078
+ }, "stop"));
2079
+ if (onKeepAlive) lifecycle.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
2080
+ onClick: runItem(onKeepAlive),
2081
+ children: [/* @__PURE__ */ jsx(Clock, { className: "mr-2 h-4 w-4" }), " Keep Alive"]
2082
+ }, "keep-alive"));
2083
+ if (lifecycle.length) overflowSections.push(lifecycle);
2084
+ const observability = [];
2085
+ if (onUsage) observability.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
2086
+ onClick: runItem(onUsage),
2087
+ children: [/* @__PURE__ */ jsx(BarChart2, { className: "mr-2 h-4 w-4" }), " View Usage"]
2088
+ }, "usage"));
2089
+ if (onHealth) observability.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
2090
+ onClick: runItem(onHealth),
2091
+ children: [/* @__PURE__ */ jsx(Activity, { className: "mr-2 h-4 w-4" }), " Health Check"]
2092
+ }, "health"));
2093
+ if (observability.length) overflowSections.push(observability);
2094
+ if (onFork) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
2095
+ onClick: runItem(onFork),
2096
+ children: [/* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }), " Fork Sandbox"]
2097
+ }, "fork")]);
2098
+ } else if (isResumable(sb.status)) {
2099
+ if (onFork) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
2100
+ onClick: runItem(onFork),
2101
+ children: [/* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }), " Fork Sandbox"]
2102
+ }, "fork")]);
2103
+ }
2104
+ if (onMore) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
2105
+ onClick: runItem(onMore),
2106
+ children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " View Details"]
2107
+ }, "view-details")]);
2108
+ if (overflowSections.length === 0) return null;
2109
+ return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
2110
+ asChild: true,
2111
+ children: /* @__PURE__ */ jsx("button", {
2112
+ type: "button",
2113
+ onClick: stopRowClick,
2114
+ className: `p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90 ${focusRing}`,
2115
+ "aria-label": `More actions for ${sb.name}`,
2116
+ title: "More actions",
2117
+ children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
2118
+ })
2119
+ }), /* @__PURE__ */ jsx(DropdownMenuContent, {
2120
+ align: "end",
2121
+ className: "min-w-[180px]",
2122
+ children: overflowSections.map((section, sectionIdx) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [sectionIdx > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), section] }, sectionIdx))
2123
+ })] });
2124
+ })(),
2125
+ onDelete && canAdminSandbox(sb) && /* @__PURE__ */ jsx("button", {
1986
2126
  type: "button",
2127
+ "aria-label": `Delete ${sb.name}`,
1987
2128
  onClick: (e) => {
1988
2129
  stopRowClick(e);
1989
- onSSH?.(sb.id);
2130
+ onDelete(sb.id);
1990
2131
  },
1991
- className: "p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90",
1992
- title: "SSH",
1993
- children: /* @__PURE__ */ jsx(Key, { className: "h-4 w-4" })
2132
+ className: `p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-muted-foreground hover:text-[var(--surface-danger-text)] transition-all active:scale-90 ${focusRing}`,
2133
+ title: "Delete",
2134
+ children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
1994
2135
  })
1995
- ] }),
1996
- resumeHandler && /* @__PURE__ */ jsxs("button", {
1997
- type: "button",
1998
- onClick: (e) => {
1999
- stopRowClick(e);
2000
- resumeHandler(sb.id);
2001
- },
2002
- className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-[var(--md3-outline-variant)] text-primary text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all",
2003
- title: resumeLabel,
2004
- children: [/* @__PURE__ */ jsx(Play, { className: "h-3 w-3" }), resumeLabel]
2005
- }),
2006
- (() => {
2007
- const runItem = (handler) => (e) => {
2008
- e.stopPropagation();
2009
- handler(sb.id);
2010
- };
2011
- const overflowSections = [];
2012
- if (isActive) {
2013
- const lifecycle = [];
2014
- if (onStop) lifecycle.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
2015
- onClick: runItem(onStop),
2016
- children: [/* @__PURE__ */ jsx(PowerOff, { className: "mr-2 h-4 w-4" }), " Stop Sandbox"]
2017
- }, "stop"));
2018
- if (onKeepAlive) lifecycle.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
2019
- onClick: runItem(onKeepAlive),
2020
- children: [/* @__PURE__ */ jsx(Clock, { className: "mr-2 h-4 w-4" }), " Keep Alive"]
2021
- }, "keep-alive"));
2022
- if (lifecycle.length) overflowSections.push(lifecycle);
2023
- const observability = [];
2024
- if (onUsage) observability.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
2025
- onClick: runItem(onUsage),
2026
- children: [/* @__PURE__ */ jsx(BarChart2, { className: "mr-2 h-4 w-4" }), " View Usage"]
2027
- }, "usage"));
2028
- if (onHealth) observability.push(/* @__PURE__ */ jsxs(DropdownMenuItem, {
2029
- onClick: runItem(onHealth),
2030
- children: [/* @__PURE__ */ jsx(Activity, { className: "mr-2 h-4 w-4" }), " Health Check"]
2031
- }, "health"));
2032
- if (observability.length) overflowSections.push(observability);
2033
- if (onFork) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
2034
- onClick: runItem(onFork),
2035
- children: [/* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }), " Fork Sandbox"]
2036
- }, "fork")]);
2037
- } else if (isResumable(sb.status)) {
2038
- if (onFork) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
2039
- onClick: runItem(onFork),
2040
- children: [/* @__PURE__ */ jsx(Copy, { className: "mr-2 h-4 w-4" }), " Fork Sandbox"]
2041
- }, "fork")]);
2042
- }
2043
- if (onMore) overflowSections.push([/* @__PURE__ */ jsxs(DropdownMenuItem, {
2044
- onClick: runItem(onMore),
2045
- children: [/* @__PURE__ */ jsx(ExternalLink, { className: "mr-2 h-4 w-4" }), " View Details"]
2046
- }, "view-details")]);
2047
- if (overflowSections.length === 0) return null;
2048
- return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
2049
- asChild: true,
2050
- children: /* @__PURE__ */ jsx("button", {
2051
- type: "button",
2052
- onClick: stopRowClick,
2053
- className: `p-2 rounded-lg hover:bg-surface-container-high text-muted-foreground hover:text-foreground transition-all active:scale-90 ${focusRing}`,
2054
- "aria-label": `More actions for ${sb.name}`,
2055
- title: "More actions",
2056
- children: /* @__PURE__ */ jsx(MoreVertical, { className: "h-4 w-4" })
2057
- })
2058
- }), /* @__PURE__ */ jsx(DropdownMenuContent, {
2059
- align: "end",
2060
- className: "min-w-[180px]",
2061
- children: overflowSections.map((section, sectionIdx) => /* @__PURE__ */ jsxs(React$1.Fragment, { children: [sectionIdx > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}), section] }, sectionIdx))
2062
- })] });
2063
- })(),
2064
- onDelete && canAdminSandbox(sb) && /* @__PURE__ */ jsx("button", {
2065
- type: "button",
2066
- "aria-label": `Delete ${sb.name}`,
2067
- onClick: (e) => {
2068
- stopRowClick(e);
2069
- onDelete(sb.id);
2070
- },
2071
- className: `p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-muted-foreground hover:text-[var(--surface-danger-text)] transition-all active:scale-90 ${focusRing}`,
2072
- title: "Delete",
2073
- children: /* @__PURE__ */ jsx(Trash2, { className: "h-4 w-4" })
2074
- })
2075
- ]
2136
+ ]
2137
+ })
2076
2138
  })
2077
- })
2078
- ]
2079
- }, sb.id);
2080
- })
2081
- })]
2139
+ ]
2140
+ }, sb.id);
2141
+ })
2142
+ })]
2143
+ })
2082
2144
  })
2145
+ }),
2146
+ totalPages > 1 && /* @__PURE__ */ jsxs("div", {
2147
+ className: "mt-6 flex flex-col md:flex-row justify-between items-center text-muted-foreground text-xs font-medium gap-4",
2148
+ children: [/* @__PURE__ */ jsxs("p", { children: [
2149
+ "Showing ",
2150
+ sandboxes.length,
2151
+ " of ",
2152
+ totalCount,
2153
+ " active sandboxes"
2154
+ ] }), /* @__PURE__ */ jsxs("div", {
2155
+ className: "flex items-center gap-2",
2156
+ children: [
2157
+ /* @__PURE__ */ jsx("button", {
2158
+ type: "button",
2159
+ onClick: () => onPageChange?.(page - 1),
2160
+ disabled: page <= 1,
2161
+ className: "p-2 rounded-lg border border-[var(--md3-outline-variant)] hover:bg-surface-container-high transition-colors disabled:opacity-30",
2162
+ children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
2163
+ }),
2164
+ Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx("button", {
2165
+ type: "button",
2166
+ onClick: () => onPageChange?.(p),
2167
+ className: cn$1("px-3 py-1 rounded-lg transition-colors", p === page ? "bg-[var(--accent-surface-soft)] text-primary border border-[var(--md3-outline)]" : "hover:bg-surface-container-high"),
2168
+ children: p
2169
+ }, p)),
2170
+ /* @__PURE__ */ jsx("button", {
2171
+ type: "button",
2172
+ onClick: () => onPageChange?.(page + 1),
2173
+ disabled: page >= totalPages,
2174
+ className: "p-2 rounded-lg border border-[var(--md3-outline-variant)] hover:bg-surface-container-high transition-colors disabled:opacity-30",
2175
+ children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
2176
+ })
2177
+ ]
2178
+ })]
2083
2179
  })
2084
- }), totalPages > 1 && /* @__PURE__ */ jsxs("div", {
2085
- className: "mt-6 flex flex-col md:flex-row justify-between items-center text-muted-foreground text-xs font-medium gap-4",
2086
- children: [/* @__PURE__ */ jsxs("p", { children: [
2087
- "Showing ",
2088
- sandboxes.length,
2089
- " of ",
2090
- totalCount,
2091
- " active sandboxes"
2092
- ] }), /* @__PURE__ */ jsxs("div", {
2093
- className: "flex items-center gap-2",
2094
- children: [
2095
- /* @__PURE__ */ jsx("button", {
2096
- type: "button",
2097
- onClick: () => onPageChange?.(page - 1),
2098
- disabled: page <= 1,
2099
- className: "p-2 rounded-lg border border-[var(--md3-outline-variant)] hover:bg-surface-container-high transition-colors disabled:opacity-30",
2100
- children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
2101
- }),
2102
- Array.from({ length: Math.min(totalPages, 5) }, (_, i) => i + 1).map((p) => /* @__PURE__ */ jsx("button", {
2103
- type: "button",
2104
- onClick: () => onPageChange?.(p),
2105
- className: cn$1("px-3 py-1 rounded-lg transition-colors", p === page ? "bg-[var(--accent-surface-soft)] text-primary border border-[var(--md3-outline)]" : "hover:bg-surface-container-high"),
2106
- children: p
2107
- }, p)),
2108
- /* @__PURE__ */ jsx("button", {
2109
- type: "button",
2110
- onClick: () => onPageChange?.(page + 1),
2111
- disabled: page >= totalPages,
2112
- className: "p-2 rounded-lg border border-[var(--md3-outline-variant)] hover:bg-surface-container-high transition-colors disabled:opacity-30",
2113
- children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
2114
- })
2115
- ]
2116
- })]
2117
- })]
2180
+ ]
2118
2181
  });
2119
2182
  }
2120
2183
  //#endregion