Aug 18, 2025 · Aug 14, 2025 · Aug 14, 2025 · Aug 14, 2025 · Aug 14, 2025 · Aug 14, 2025
diff --git a/site/src/modules/resources/AgentMetadata.tsx b/site/src/modules/resources/AgentMetadata.tsx
 import type { Interpolation, Theme } from "@emotion/react";
 import Skeleton from "@mui/material/Skeleton";
 import Tooltip from "@mui/material/Tooltip";
 import { watchAgentMetadata } from "api/api";
 useRef,
 useState,
 } from "react";
 import {MONOSPACE_FONT_FAMILY } from "theme/constants";
 import {cn } from "utils/cn";
 import type { OneWayWebSocket } from "utils/OneWayWebSocket";

 type ItemStatus = "stale" | "valid" | "loading";
 return null;
 }
 return (
 <sectioncss={styles.root}>
 <sectionclassName="flex items-baseline flex-wrap gap-8 gap-y-4">
 {metadata.map((m) => (
 <MetadataItem key={m.description.key} item={m} />
 ))}

 if (activeMetadata === undefined) {
 return (
 <sectioncss={styles.root}>
 <sectionclassName="flex items-baseline flex-wrap gap-8 gap-y-4">
 <AgentMetadataSkeleton />
 </section>
 );
 const AgentMetadataSkeleton: FC = () => {
 return (
 <Stack alignItems="baseline" direction="row" spacing={6}>
 <divcss={styles.metadata}>
 <divclassName="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
 <Skeleton width={40} height={12} variant="text" />
 <Skeleton width={65} height={14} variant="text" />
 </div>

 <divcss={styles.metadata}>
 <divclassName="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
 <Skeleton width={40} height={12} variant="text" />
 <Skeleton width={65} height={14} variant="text" />
 </div>

 <divcss={styles.metadata}>
 <divclassName="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
 <Skeleton width={40} height={12} variant="text" />
 <Skeleton width={65} height={14} variant="text" />
 </div>
 // could be buggy. But, how common is that anyways?
 const value =
 status === "loading" ? (
 <Skeleton width={65} height={12} variant="text"css={styles.skeleton} />
 <Skeleton width={65} height={12} variant="text"className="mt-[6px]" />
 ) : status === "stale" ? (
 <Tooltip title="This data is stale and no longer up to date">
 <StaticWidthcss={[styles.metadataValue, styles.metadataStale]}>
 <StaticWidthclassName="text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-disabled cursor-pointer">
 {item.result.value}
 </StaticWidth>
 </Tooltip>
 ) : (
 <StaticWidth
 css={[
 styles.metadataValue,
 item.result.error.length === 0
 ? styles.metadataValueSuccess
 : styles.metadataValueError,
 ]}
 className={cn(
 "text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-success",
 item.result.error.length > 0 && "text-content-destructive",
 )}
 >
 {item.result.value}
 </StaticWidth>
 );

 return (
 <div css={styles.metadata}>
 <div css={styles.metadataLabel}>{item.description.display_name}</div>
 <div className="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
 <div className="text-content-secondary text-ellipsis overflow-hidden whitespace-nowrap text-[13px]">
 {item.description.display_name}
 </div>
 <div>{value}</div>
 </div>
 );
 </div>
 );
 };

 // These are more or less copied from
 // site/src/modules/resources/ResourceCard.tsx
 const styles = {
 root: {
 display: "flex",
 alignItems: "baseline",
 flexWrap: "wrap",
 gap: 32,
 rowGap: 16,
 },

 metadata: {
 lineHeight: "1.6",
 display: "flex",
 flexDirection: "column",
 overflow: "visible",
 flexShrink: 0,
 },

 metadataLabel: (theme) => ({
 color: theme.palette.text.secondary,
 textOverflow: "ellipsis",
 overflow: "hidden",
 whiteSpace: "nowrap",
 fontSize: 13,
 }),

 metadataValue: {
 textOverflow: "ellipsis",
 overflow: "hidden",
 whiteSpace: "nowrap",
 maxWidth: "16em",
 fontSize: 14,
 },

 metadataValueSuccess: (theme) => ({
 color: theme.roles.success.fill.outline,
 }),

 metadataValueError: (theme) => ({
 color: theme.palette.error.main,
 }),

 metadataStale: (theme) => ({
 color: theme.palette.text.disabled,
 cursor: "pointer",
 }),

 skeleton: {
 marginTop: 4,
 },

 inlineCommand: (theme) => ({
 fontFamily: MONOSPACE_FONT_FAMILY,
 display: "inline-block",
 fontWeight: 600,
 margin: 0,
 borderRadius: 4,
 color: theme.palette.text.primary,
 }),
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/resources/AgentOutdatedTooltip.tsx b/site/src/modules/resources/AgentOutdatedTooltip.tsx
 import { useTheme } from "@emotion/react";
 import type { WorkspaceAgent } from "api/typesGenerated";
 import { PopoverTrigger } from "components/deprecated/Popover/Popover";
 import {
 status,
 onUpdate,
 }) => {
 const theme = useTheme();
 const versionLabelStyles = {
 fontWeight: 600,
 color: theme.palette.text.primary,
 };
 const title =
 status === agentVersionStatus.Outdated
 ? "Agent Outdated"
 return (
 <HelpTooltip>
 <PopoverTrigger>
 <span role="status"css={{ cursor: "pointer" }}>
 <span role="status"className="cursor-pointer">
 {status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
 </span>
 </PopoverTrigger>
 </div>

 <Stack spacing={0.5}>
 <span css={versionLabelStyles}>Agent version</span>
 <span className="font-semibold text-content-primary">
 Agent version
 </span>
 <span>{agent.version}</span>
 </Stack>

 <Stack spacing={0.5}>
 <span css={versionLabelStyles}>Server version</span>
 <span className="font-semibold text-content-primary">
 Server version
 </span>
 <span>{serverVersion}</span>
 </Stack>

diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx
 import { useTheme } from "@emotion/react";
 import type * as TypesGen from "api/typesGenerated";
 import { DropdownMenuItem } from "components/DropdownMenu/DropdownMenu";
 import { Spinner } from "components/Spinner/Spinner";
 const { proxy } = useProxy();
 const host = proxy.preferredWildcardHostname;
 const [iconError, setIconError] = useState(false);
 const theme = useTheme();
 const link = useAppLink(app, { agent, workspace });

 // canClick is ONLY false when it's a subdomain app and the admin hasn't
 icon = (
 <CircleAlertIcon
 aria-hidden="true"
 className="size-icon-sm"
 css={{ color: theme.palette.warning.light }}
 className="size-icon-sm text-content-warning"
 />
 );
 primaryTooltip = "Unhealthy";
 icon = (
 <CircleAlertIcon
 aria-hidden="true"
 className="size-icon-sm"
 css={{ color: theme.palette.grey[300] }}
 className="size-icon-sm text-content-secondary"
 />
 );
 primaryTooltip =
diff --git a/site/src/modules/resources/AppLink/AppPreview.tsx b/site/src/modules/resources/AppLink/AppPreview.tsx
 export const AppPreview: FC<PropsWithChildren> = ({ children }) => {
 return (
 <Stack
 css={(theme) => ({
 padding: "2px 12px",
 borderRadius: 9999,
 border: `1px solid ${theme.palette.divider}`,
 color: theme.palette.text.primary,
 background: theme.palette.background.paper,
 flexShrink: 0,
 width: "fit-content",
 fontSize: 12,

 "& img, & svg": {
 width: 13,
 },
 })}
 className="flex items-center h-8 px-3 rounded-full border border-solid border-surface-quaternary text-content-primary bg-surface-secondary flex-shrink-0 w-fit text-xs [&>svg]:w-[13px] [&>img]:w-[13px]"
 alignItems="center"
 direction="row"
 spacing={1}
diff --git a/site/src/modules/resources/Resources.tsx b/site/src/modules/resources/Resources.tsx
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import Button from "@mui/material/Button";
 import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 }

 export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
 const theme = useTheme();
 const [shouldDisplayHideResources, setShouldDisplayHideResources] =
 useState(false);
 const displayResources = shouldDisplayHideResources
 const hasHideResources = resources.some((r) => r.hide);

 return (
 <Stack
 direction="column"
 spacing={0}
 css={{ background: theme.palette.background.default }}
 >
 <Stack direction="column" spacing={0} className="bg-surface-primary">
 {displayResources.map((resource) => (
 <ResourceCard
 key={resource.id}
 />
 ))}
 {hasHideResources && (
 <divcss={styles.buttonWrapper}>
 <divclassName="flex items-center justify-center mt-4">
 <Button
 css={styles.showMoreButton}
 className="rounded-full w-full max-w-[260px]"
 size="small"
 onClick={() => setShouldDisplayHideResources((v) => !v)}
 >
 </Stack>
 );
 };

 const styles = {
 buttonWrapper: {
 display: "flex",
 alignItems: "center",
 justifyContent: "center",
 marginTop: 16,
 },

 showMoreButton: {
 borderRadius: 9999,
 width: "100%",
 maxWidth: 260,
 },
 } satisfies Record<string, Interpolation<Theme>>;
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@
		import type { Interpolation, Theme } from "@emotion/react";
		import Skeleton from "@mui/material/Skeleton";
		import Tooltip from "@mui/material/Tooltip";
		import { watchAgentMetadata } from "api/api";
Expand All		@@ -18,7 +17,7 @@ import {
		useRef,
		useState,
		} from "react";
		import {MONOSPACE_FONT_FAMILY } from "theme/constants";
		import {cn } from "utils/cn";
		import type { OneWayWebSocket } from "utils/OneWayWebSocket";

		type ItemStatus = "stale" \| "valid" \| "loading";
Expand All		@@ -32,7 +31,7 @@ export const AgentMetadataView: FC<AgentMetadataViewProps> = ({ metadata }) => {
		return null;
		}
		return (
		<sectioncss={styles.root}>
		<sectionclassName="flex items-baseline flex-wrap gap-8 gap-y-4">
		{metadata.map((m) => (
		<MetadataItem key={m.description.key} item={m} />
		))}
Expand DownExpand Up		@@ -122,7 +121,7 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({

		if (activeMetadata === undefined) {
		return (
		<sectioncss={styles.root}>
		<sectionclassName="flex items-baseline flex-wrap gap-8 gap-y-4">
		<AgentMetadataSkeleton />
		</section>
		);
Expand All		@@ -134,17 +133,17 @@ export const AgentMetadata: FC<AgentMetadataProps> = ({
		const AgentMetadataSkeleton: FC = () => {
		return (
		<Stack alignItems="baseline" direction="row" spacing={6}>
		<divcss={styles.metadata}>
		<divclassName="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
		<Skeleton width={40} height={12} variant="text" />
		<Skeleton width={65} height={14} variant="text" />
		</div>

		<divcss={styles.metadata}>
		<divclassName="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
		<Skeleton width={40} height={12} variant="text" />
		<Skeleton width={65} height={14} variant="text" />
		</div>

		<divcss={styles.metadata}>
		<divclassName="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
		<Skeleton width={40} height={12} variant="text" />
		<Skeleton width={65} height={14} variant="text" />
		</div>
Expand DownExpand Up		@@ -182,29 +181,29 @@ const MetadataItem: FC<MetadataItemProps> = ({ item }) => {
		// could be buggy. But, how common is that anyways?
		const value =
		status === "loading" ? (
		<Skeleton width={65} height={12} variant="text"css={styles.skeleton} />
		<Skeleton width={65} height={12} variant="text"className="mt-[6px]" />
		) : status === "stale" ? (
		<Tooltip title="This data is stale and no longer up to date">
		<StaticWidthcss={[styles.metadataValue, styles.metadataStale]}>
		<StaticWidthclassName="text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-disabled cursor-pointer">
		{item.result.value}
		</StaticWidth>
		</Tooltip>
		) : (
		<StaticWidth
		css={[
		styles.metadataValue,
		item.result.error.length === 0
		? styles.metadataValueSuccess
		: styles.metadataValueError,
		]}
		className={cn(
		"text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-success",
		item.result.error.length > 0 && "text-content-destructive",
		)}
		>
		{item.result.value}
		</StaticWidth>
		);

		return (
		<div css={styles.metadata}>
		<div css={styles.metadataLabel}>{item.description.display_name}</div>
		<div className="leading-relaxed flex flex-col overflow-visible flex-shrink-0">
		<div className="text-content-secondary text-ellipsis overflow-hidden whitespace-nowrap text-[13px]">
		{item.description.display_name}
		</div>
		<div>{value}</div>
		</div>
		);
Expand DownExpand Up		@@ -236,65 +235,3 @@ const StaticWidth: FC<HTMLAttributes<HTMLDivElement>> = ({
		</div>
		);
		};

		// These are more or less copied from
		// site/src/modules/resources/ResourceCard.tsx
		const styles = {
		root: {
		display: "flex",
		alignItems: "baseline",
		flexWrap: "wrap",
		gap: 32,
		rowGap: 16,
		},

		metadata: {
		lineHeight: "1.6",
		display: "flex",
		flexDirection: "column",
		overflow: "visible",
		flexShrink: 0,
		},

		metadataLabel: (theme) => ({
		color: theme.palette.text.secondary,
		textOverflow: "ellipsis",
		overflow: "hidden",
		whiteSpace: "nowrap",
		fontSize: 13,
		}),

		metadataValue: {
		textOverflow: "ellipsis",
		overflow: "hidden",
		whiteSpace: "nowrap",
		maxWidth: "16em",
		fontSize: 14,
		},

		metadataValueSuccess: (theme) => ({
		color: theme.roles.success.fill.outline,
		}),

		metadataValueError: (theme) => ({
		color: theme.palette.error.main,
		}),

		metadataStale: (theme) => ({
		color: theme.palette.text.disabled,
		cursor: "pointer",
		}),

		skeleton: {
		marginTop: 4,
		},

		inlineCommand: (theme) => ({
		fontFamily: MONOSPACE_FONT_FAMILY,
		display: "inline-block",
		fontWeight: 600,
		margin: 0,
		borderRadius: 4,
		color: theme.palette.text.primary,
		}),
		} satisfies Record<string, Interpolation<Theme>>;
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@
		import { useTheme } from "@emotion/react";
		import type { WorkspaceAgent } from "api/typesGenerated";
		import { PopoverTrigger } from "components/deprecated/Popover/Popover";
		import {
Expand DownExpand Up		@@ -27,11 +26,6 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
		status,
		onUpdate,
		}) => {
		const theme = useTheme();
		const versionLabelStyles = {
		fontWeight: 600,
		color: theme.palette.text.primary,
		};
		const title =
		status === agentVersionStatus.Outdated
		? "Agent Outdated"
Expand All		@@ -45,7 +39,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
		return (
		<HelpTooltip>
		<PopoverTrigger>
		<span role="status"css={{ cursor: "pointer" }}>
		<span role="status"className="cursor-pointer">
		{status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
		</span>
		</PopoverTrigger>
Expand All		@@ -57,12 +51,16 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
		</div>

		<Stack spacing={0.5}>
		<span css={versionLabelStyles}>Agent version</span>
		<span className="font-semibold text-content-primary">
		Agent version
		</span>
		<span>{agent.version}</span>
		</Stack>

		<Stack spacing={0.5}>
		<span css={versionLabelStyles}>Server version</span>
		<span className="font-semibold text-content-primary">
		Server version
		</span>
		<span>{serverVersion}</span>
		</Stack>

Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@
		import { useTheme } from "@emotion/react";
		import type * as TypesGen from "api/typesGenerated";
		import { DropdownMenuItem } from "components/DropdownMenu/DropdownMenu";
		import { Spinner } from "components/Spinner/Spinner";
Expand DownExpand Up		@@ -41,7 +40,6 @@ export const AppLink: FC<AppLinkProps> = ({
		const { proxy } = useProxy();
		const host = proxy.preferredWildcardHostname;
		const [iconError, setIconError] = useState(false);
		const theme = useTheme();
		const link = useAppLink(app, { agent, workspace });

		// canClick is ONLY false when it's a subdomain app and the admin hasn't
Expand All		@@ -64,8 +62,7 @@ export const AppLink: FC<AppLinkProps> = ({
		icon = (
		<CircleAlertIcon
		aria-hidden="true"
		className="size-icon-sm"
		css={{ color: theme.palette.warning.light }}
		className="size-icon-sm text-content-warning"
		/>
		);
		primaryTooltip = "Unhealthy";
Expand All		@@ -76,8 +73,7 @@ export const AppLink: FC<AppLinkProps> = ({
		icon = (
		<CircleAlertIcon
		aria-hidden="true"
		className="size-icon-sm"
		css={{ color: theme.palette.grey[300] }}
		className="size-icon-sm text-content-secondary"
		/>
		);
		primaryTooltip =
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,20 +4,7 @@ import type { FC, PropsWithChildren } from "react";
		export const AppPreview: FC<PropsWithChildren> = ({ children }) => {
		return (
		<Stack
		css={(theme) => ({
		padding: "2px 12px",
		borderRadius: 9999,
		border: `1px solid ${theme.palette.divider}`,
		color: theme.palette.text.primary,
		background: theme.palette.background.paper,
		flexShrink: 0,
		width: "fit-content",
		fontSize: 12,

		"& img, & svg": {
		width: 13,
		},
		})}
		className="flex items-center h-8 px-3 rounded-full border border-solid border-surface-quaternary text-content-primary bg-surface-secondary flex-shrink-0 w-fit text-xs [&>svg]:w-[13px] [&>img]:w-[13px]"
		alignItems="center"
		direction="row"
		spacing={1}
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,3 @@
		import { type Interpolation, type Theme, useTheme } from "@emotion/react";
		import Button from "@mui/material/Button";
		import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
		import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
Expand All		@@ -16,7 +15,6 @@ interface ResourcesProps {
		}

		export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
		const theme = useTheme();
		const [shouldDisplayHideResources, setShouldDisplayHideResources] =
		useState(false);
		const displayResources = shouldDisplayHideResources
Expand All		@@ -28,11 +26,7 @@ export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
		const hasHideResources = resources.some((r) => r.hide);

		return (
		<Stack
		direction="column"
		spacing={0}
		css={{ background: theme.palette.background.default }}
		>
		<Stack direction="column" spacing={0} className="bg-surface-primary">
		{displayResources.map((resource) => (
		<ResourceCard
		key={resource.id}
Expand All		@@ -41,9 +35,9 @@ export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
		/>
		))}
		{hasHideResources && (
		<divcss={styles.buttonWrapper}>
		<divclassName="flex items-center justify-center mt-4">
		<Button
		css={styles.showMoreButton}
		className="rounded-full w-full max-w-[260px]"
		size="small"
		onClick={() => setShouldDisplayHideResources((v) => !v)}
		>
Expand All		@@ -55,18 +49,3 @@ export const Resources: FC<ResourcesProps> = ({ resources, agentRow }) => {
		</Stack>
		);
		};

		const styles = {
		buttonWrapper: {
		display: "flex",
		alignItems: "center",
		justifyContent: "center",
		marginTop: 16,
		},

		showMoreButton: {
		borderRadius: 9999,
		width: "100%",
		maxWidth: 260,
		},
		} satisfies Record<string, Interpolation<Theme>>;