coder · Parkreiner · May 23, 2025 · May 23, 2025 · May 23, 2025 · May 23, 2025
@@ -264,7 +264,7 @@ export const watchWorkspaceAgentLogs = (
 	});
 };
 
-type WatchWorkspaceAgentLogsParams = {
+export type WatchWorkspaceAgentLogsParams = {
 	after?: number;
 };
 

@@ -229,13 +229,12 @@ export function makeUseEmbeddedMetadata(
 			manager.getMetadata,
 		);
 
-		// biome-ignore lint/correctness/useExhaustiveDependencies(manager.clearMetadataByKey): baked into containing hook
 		const stableMetadataResult = useMemo<UseEmbeddedMetadataResult>(() => {
 			return {
 				metadata,
 				clearMetadataByKey: manager.clearMetadataByKey,
 			};
-		}, [metadata]);
+		}, [manager, metadata]);
 
 		return stableMetadataResult;
 	};

@@ -10,6 +10,7 @@ const meta: Meta<typeof AgentLogs> = {
 		sources: MockSources,
 		logs: MockLogs,
 		height: MockLogs.length * AGENT_LOG_LINE_HEIGHT,
+		overflowed: false,
 	},
 	parameters: {
 		layout: "fullscreen",
@@ -19,6 +20,10 @@ const meta: Meta<typeof AgentLogs> = {
 export default meta;
 type Story = StoryObj<typeof AgentLogs>;
 
-const Default: Story = {};
+export const Default: Story = {};
 
-export { Default as AgentLogs };
+export const Overflowed: Story = {
+	args: {
+		overflowed: true,
+	},
+};
@@ -1,178 +1,170 @@
-import type { Interpolation, Theme } from "@emotion/react";
 import Tooltip from "@mui/material/Tooltip";
 import type { WorkspaceAgentLogSource } from "api/typesGenerated";
 import type { Line } from "components/Logs/LogLine";
-import { type ComponentProps, forwardRef, useMemo } from "react";
+import { type ComponentProps, forwardRef } from "react";
 import { FixedSizeList as List } from "react-window";
+import { cn } from "utils/cn";
 import { AGENT_LOG_LINE_HEIGHT, AgentLogLine } from "./AgentLogLine";
 
+const fallbackLog: WorkspaceAgentLogSource = {
+	created_at: "",
+	display_name: "Logs",
+	icon: "",
+	id: "00000000-0000-0000-0000-000000000000",
+	workspace_agent_id: "",
+};
+
+function groupLogSourcesById(
+	sources: readonly WorkspaceAgentLogSource[],
+): Record<string, WorkspaceAgentLogSource> {
+	const sourcesById: Record<string, WorkspaceAgentLogSource> = {};
+	for (const source of sources) {
+		sourcesById[source.id] = source;
+	}
+	return sourcesById;
+}
+
 type AgentLogsProps = Omit<
 	ComponentProps<typeof List>,
-	"children" | "itemSize" | "itemCount"
+	"children" | "itemSize" | "itemCount" | "itemKey"
 > & {
 	logs: readonly Line[];
 	sources: readonly WorkspaceAgentLogSource[];
+	overflowed: boolean;
 };
 
 export const AgentLogs = forwardRef<List, AgentLogsProps>(
-	({ logs, sources, ...listProps }, ref) => {
-		const logSourceByID = useMemo(() => {
-			const sourcesById: { [id: string]: WorkspaceAgentLogSource } = {};
-			for (const source of sources) {
-				sourcesById[source.id] = source;
-			}
-			return sourcesById;
-		}, [sources]);
+	({ logs, sources, overflowed, ...listProps }, ref) => {
+		// getLogSource must always returns a valid log source. We need this to
+		// support deployments that were made before `coder_script` was created
+		// and that haven't updated to a newer Coder version yet
+		const logSourceByID = groupLogSourcesById(sources);
+		const getLogSource = (id: string) => logSourceByID[id] || fallbackLog;
 
 		return (
-			<List
-				ref={ref}
-				css={styles.logs}
-				itemCount={logs.length}
-				itemSize={AGENT_LOG_LINE_HEIGHT}
-				{...listProps}
-			>
-				{({ index, style }) => {
-					const log = logs[index];
-					// getLogSource always returns a valid log source.
-					// This is necessary to support deployments before `coder_script`.
-					// Existed that haven't restarted their agents.
-					const getLogSource = (id: string): WorkspaceAgentLogSource => {
-						return (
-							logSourceByID[id] || {
-								created_at: "",
-								display_name: "Logs",
-								icon: "",
-								id: "00000000-0000-0000-0000-000000000000",
-								workspace_agent_id: "",
-							}
-						);
-					};
-					const logSource = getLogSource(log.sourceId);
+			<div className="flex flex-col gap-2">
+				{overflowed && (
+					<p className="text-sm w-full text-content-secondary bg-content-tertiary max-w-prose pl-4 m-0 pt-2.5 pb-1">
+						Startup logs exceeded the max size of{" "}
+						<span className="tracking-wide font-mono">1MB</span>, and will not
+						continue to be written to the database! Logs will continue to be
+						written to the
+						<span className="font-mono bg-surface-tertiary rounded-md px-1.5 py-0.5">
+							/tmp/coder-startup-script.log
+						</span>{" "}
+						file in the workspace.
+					</p>
+				)}
 
-					let assignedIcon = false;
-					let icon: JSX.Element;
-					// If no icon is specified, we show a deterministic
-					// colored circle to identify unique scripts.
-					if (logSource.icon) {
-						icon = (
-							<img
-								src={logSource.icon}
-								alt=""
-								width={14}
-								height={14}
-								css={{
-									marginRight: 8,
-									flexShrink: 0,
-								}}
-							/>
-						);
-					} else {
-						icon = (
-							<div
-								css={{
-									width: 14,
-									height: 14,
-									marginRight: 8,
-									flexShrink: 0,
-									background: determineScriptDisplayColor(
-										logSource.display_name,
-									),
-									borderRadius: "100%",
-								}}
-							/>
-						);
-						assignedIcon = true;
-					}
+				<List
+					{...listProps}
+					ref={ref}
+					// We need the div selector to be able to apply the padding
+					// top from startupLogs
+					className="pt-4 [&>div]:relative bg-surface-secondary"
+					itemCount={logs.length}
+					itemSize={AGENT_LOG_LINE_HEIGHT}
+					itemKey={(index) => logs[index].id || 0}
+				>
+					{({ index, style }) => {
+						const log = logs[index];
+						const logSource = getLogSource(log.sourceId);
 
-					let nextChangesSource = false;
-					if (index < logs.length - 1) {
-						nextChangesSource =
-							getLogSource(logs[index + 1].sourceId).id !== log.sourceId;
-					}
-					// We don't want every line to repeat the icon, because
-					// that is ugly and repetitive. This removes the icon
-					// for subsequent lines of the same source and shows a
-					// line instead, visually indicating they are from the
-					// same source.
-					if (
-						index > 0 &&
-						getLogSource(logs[index - 1].sourceId).id === log.sourceId
-					) {
-						icon = (
-							<div
-								css={{
-									width: 14,
-									height: 14,
-									marginRight: 8,
-									display: "flex",
-									justifyContent: "center",
-									position: "relative",
-									flexShrink: 0,
-								}}
-							>
+						let assignedIcon = false;
+						let icon: JSX.Element;
+						// If no icon is specified, we show a deterministic
+						// colored circle to identify unique scripts.
+						if (logSource.icon) {
+							icon = (
+								<img
+									src={logSource.icon}
+									alt=""
+									className="size-3.5 mr-2 shrink-0"
+								/>
+							);
+						} else {
+							icon = (
 								<div
-									className="dashed-line"
-									css={(theme) => ({
-										height: nextChangesSource ? "50%" : "100%",
-										width: 2,
-										background: theme.experimental.l1.outline,
-										borderRadius: 2,
-									})}
+									role="presentation"
+									className="size-3.5 mr-2 shrink-0 rounded-full"
+									style={{
+										background: determineScriptDisplayColor(
+											logSource.display_name,
+										),
+									}}
 								/>
-								{nextChangesSource && (
+							);
+							assignedIcon = true;
+						}
+
+						const doesNextLineHaveDifferentSource =
+							index < logs.length - 1 &&
+							getLogSource(logs[index + 1].sourceId).id !== log.sourceId;
+
+						// We don't want every line to repeat the icon, because
+						// that is ugly and repetitive. This removes the icon
+						// for subsequent lines of the same source and shows a
+						// line instead, visually indicating they are from the
+						// same source.
+						const shouldHideSource =
+							index > 0 &&
+							getLogSource(logs[index - 1].sourceId).id === log.sourceId;
+						if (shouldHideSource) {
+							icon = (
+								<div className="size-3.5 mr-2 flex justify-center relative shrink-0">
 									<div
-										className="dashed-line"
-										css={(theme) => ({
-											height: 2,
-											width: "50%",
-											top: "calc(50% - 2px)",
-											left: "calc(50% - 1px)",
-											background: theme.experimental.l1.outline,
-											borderRadius: 2,
-											position: "absolute",
-										})}
+										// dashed-line class comes from LogLine
+										className={cn(
+											"dashed-line w-0.5 rounded-[2px] bg-surface-tertiary h-full",
+											doesNextLineHaveDifferentSource && "h-1/2",
+										)}
 									/>
-								)}
-							</div>
-						);
-					}
+									{doesNextLineHaveDifferentSource && (
+										<div
+											role="presentation"
+											className="dashed-line h-[2px] w-1/2 top-[calc(50%-2px)] left-[calc(50%-1px)] rounded-[2px] absolute bg-surface-tertiary"
+										/>
+									)}
+								</div>
+							);
+						}
 
-					return (
-						<AgentLogLine
-							line={logs[index]}
-							number={index + 1}
-							maxLineNumber={logs.length}
-							style={style}
-							sourceIcon={
-								<Tooltip
-									title={
-										<>
-											{logSource.display_name}
-											{assignedIcon && (
-												<i>
-													<br />
-													No icon specified!
-												</i>
-											)}
-										</>
-									}
-								>
-									{icon}
-								</Tooltip>
-							}
-						/>
-					);
-				}}
-			</List>
+						return (
+							<AgentLogLine
+								line={log}
+								number={index + 1}
+								maxLineNumber={logs.length}
+								style={style}
+								sourceIcon={
+									<Tooltip
+										title={
+											<>
+												{logSource.display_name}
+												{assignedIcon && (
+													<i>
+														<br />
+														No icon specified!
+													</i>
+												)}
+											</>
+										}
+									>
+										{icon}
+									</Tooltip>
+								}
+							/>
+						);
+					}}
+				</List>
+			</div>
 		);
 	},
 );
 
 // These colors were picked at random. Feel free
 // to add more, adjust, or change! Users will not
 // depend on these colors.
-const scriptDisplayColors = [
+const scriptDisplayColors: readonly string[] = [
 	"#85A3B2",
 	"#A37EB2",
 	"#C29FDE",
@@ -191,15 +183,3 @@ const determineScriptDisplayColor = (displayName: string): string => {
 	}, 0);
 	return scriptDisplayColors[Math.abs(hash) % scriptDisplayColors.length];
 };
-
-const styles = {
-	logs: (theme) => ({
-		backgroundColor: theme.palette.background.paper,
-		paddingTop: 16,
-
-		// We need this to be able to apply the padding top from startupLogs
-		"& > div": {
-			position: "relative",
-		},
-	}),
-} satisfies Record<string, Interpolation<Theme>>;
-Original file line number
+Diff line change
@@ Expand Up / @@ -264,7 +264,7 @@ export const watchWorkspaceAgentLogs = ( @@
     	});
     };
-    type WatchWorkspaceAgentLogsParams = {
+    export type WatchWorkspaceAgentLogsParams = {
     	after?: number;
     };
@@ Expand Down @@