@d34dman/flowdrop 0.0.61 → 0.0.63

package/dist/components/playground/ExecutionLogs.svelte

@@ -10,7 +10,7 @@
 	import Icon from '@iconify/svelte';
 	import { slide } from 'svelte/transition';
 	import type { PlaygroundMessage, PlaygroundMessageLevel } from '../../types/playground.js';
-	import { logMessages } from '../../stores/playgroundStore.js';
+	import { getLogMessages } from '../../stores/playgroundStore.svelte.js';
 
 	/**
 	 * Component props
@@ -37,19 +37,19 @@
 	 */
 	const filteredLogs = $derived(
 		levelFilter === 'all'
-			? $logMessages
-			: $logMessages.filter((log) => log.metadata?.level === levelFilter)
+			? getLogMessages()
+			: getLogMessages().filter((log) => log.metadata?.level === levelFilter)
 	);
 
 	/**
 	 * Count of logs by level
 	 */
 	const logCounts = $derived({
-		all: $logMessages.length,
-		info: $logMessages.filter((l) => l.metadata?.level === 'info').length,
-		warning: $logMessages.filter((l) => l.metadata?.level === 'warning').length,
-		error: $logMessages.filter((l) => l.metadata?.level === 'error').length,
-		debug: $logMessages.filter((l) => l.metadata?.level === 'debug').length
+		all: getLogMessages().length,
+		info: getLogMessages().filter((l) => l.metadata?.level === 'info').length,
+		warning: getLogMessages().filter((l) => l.metadata?.level === 'warning').length,
+		error: getLogMessages().filter((l) => l.metadata?.level === 'error').length,
+		debug: getLogMessages().filter((l) => l.metadata?.level === 'debug').length
 	});
 
 	/**
@@ -247,7 +247,7 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		padding: var(--fd-space-3) var(--fd-space-4);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		border: none;
 		background: transparent;
 		cursor: pointer;
@@ -261,7 +261,7 @@
 	.execution-logs__title {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 		font-size: var(--fd-text-sm);
 		font-weight: 500;
 		color: var(--fd-foreground);
@@ -273,7 +273,7 @@
 		justify-content: center;
 		min-width: 1.25rem;
 		height: 1.25rem;
-		padding: 0 var(--fd-space-1);
+		padding: 0 var(--fd-space-3xs);
 		border-radius: var(--fd-radius-full);
 		font-size: var(--fd-text-xs);
 		font-weight: 600;
@@ -310,18 +310,18 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		padding: var(--fd-space-2) var(--fd-space-4);
+		padding: var(--fd-space-xs) var(--fd-space-xl);
 		background-color: var(--fd-background);
 		border-bottom: 1px solid var(--fd-border);
 	}
 
 	.execution-logs__filters {
 		display: flex;
-		gap: var(--fd-space-1);
+		gap: var(--fd-space-3xs);
 	}
 
 	.execution-logs__filter {
-		padding: var(--fd-space-1) var(--fd-space-2);
+		padding: var(--fd-space-3xs) var(--fd-space-xs);
 		border: 1px solid transparent;
 		border-radius: var(--fd-radius-md);
 		background: transparent;
@@ -360,8 +360,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 1.75rem;
-		height: 1.75rem;
+		width: var(--fd-playground-icon-btn-size);
+		height: var(--fd-playground-icon-btn-size);
 		border: 1px solid var(--fd-border);
 		border-radius: var(--fd-radius-md);
 		background: var(--fd-background);
@@ -383,25 +383,25 @@
 	/* Logs List */
 	.execution-logs__list {
 		overflow-y: auto;
-		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+		font-family: var(--fd-font-mono);
 		font-size: var(--fd-text-xs);
-		line-height: 1.5;
+		line-height: var(--fd-leading-normal);
 	}
 
 	.execution-logs__empty {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-8);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-4xl);
 		color: var(--fd-muted-foreground);
 	}
 
 	.execution-logs__entry {
 		display: flex;
 		align-items: flex-start;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-1) var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-3xs) var(--fd-space-xl);
 		border-bottom: 1px solid var(--fd-border-muted);
 		background-color: var(--fd-background);
 	}
@@ -464,7 +464,7 @@
 
 	.execution-logs__entry-node {
 		flex-shrink: 0;
-		padding: 0.125rem var(--fd-space-1);
+		padding: 0.125rem var(--fd-space-3xs);
 		background-color: var(--fd-secondary);
 		border-radius: var(--fd-radius-sm);
 		color: var(--fd-muted-foreground);

package/dist/components/playground/InputCollector.svelte

@@ -10,7 +10,7 @@
 	import Icon from '@iconify/svelte';
 	import { slide } from 'svelte/transition';
 	import type { PlaygroundInputField } from '../../types/playground.js';
-	import { inputFields, hasChatInput } from '../../stores/playgroundStore.js';
+	import { getInputFields, getHasChatInput } from '../../stores/playgroundStore.svelte.js';
 
 	/**
 	 * Component props
@@ -41,14 +41,14 @@
 	 */
 	$effect(() => {
 		// Only initialize once when we have input fields and haven't initialized yet
-		if ($inputFields.length > 0 && !hasInitializedDefaults) {
+		if (getInputFields().length > 0 && !hasInitializedDefaults) {
 			hasInitializedDefaults = true;
 
 			// Only set values if there are actual defaults to set
 			const initialValues: Record<string, unknown> = {};
 			let hasDefaults = false;
 
-			$inputFields.forEach((field) => {
+			getInputFields().forEach((field) => {
 				if (field.defaultValue !== undefined) {
 					initialValues[`${field.nodeId}:${field.fieldId}`] = field.defaultValue;
 					hasDefaults = true;
@@ -117,7 +117,7 @@
 	 */
 	function resetToDefaults(): void {
 		const defaultValues: Record<string, unknown> = {};
-		$inputFields.forEach((field) => {
+		getInputFields().forEach((field) => {
 			if (field.defaultValue !== undefined) {
 				defaultValues[`${field.nodeId}:${field.fieldId}`] = field.defaultValue;
 			}
@@ -127,7 +127,7 @@
 	}
 </script>
 
-{#if $inputFields.length > 0}
+{#if getInputFields().length > 0}
 	<div class="input-collector" class:input-collector--expanded={isExpanded}>
 		<!-- Header -->
 		<button
@@ -139,7 +139,7 @@
 			<div class="input-collector__title">
 				<Icon icon="mdi:form-textbox" />
 				<span>Workflow Inputs</span>
-				<span class="input-collector__count">{$inputFields.length}</span>
+				<span class="input-collector__count">{getInputFields().length}</span>
 			</div>
 			<Icon
 				icon="mdi:chevron-down"
@@ -150,7 +150,7 @@
 		<!-- Content -->
 		{#if isExpanded}
 			<div class="input-collector__content" transition:slide={{ duration: 200 }}>
-				{#if $hasChatInput}
+				{#if getHasChatInput()}
 					<div class="input-collector__hint">
 						<Icon icon="mdi:information-outline" />
 						<span>Chat input will be collected from the message field below</span>
@@ -158,7 +158,7 @@
 				{/if}
 
 				<div class="input-collector__fields">
-					{#each $inputFields as field (field.nodeId + ':' + field.fieldId)}
+					{#each getInputFields() as field (field.nodeId + ':' + field.fieldId)}
 						<div class="input-collector__field">
 							<label class="input-collector__label" for="input-{field.nodeId}-{field.fieldId}">
 								{field.label}
@@ -264,7 +264,7 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		padding: var(--fd-space-3) var(--fd-space-4);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		border: none;
 		background: transparent;
 		cursor: pointer;
@@ -278,7 +278,7 @@
 	.input-collector__title {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 		font-size: var(--fd-text-sm);
 		font-weight: 500;
 		color: var(--fd-foreground);
@@ -290,7 +290,7 @@
 		justify-content: center;
 		min-width: 1.25rem;
 		height: 1.25rem;
-		padding: 0 var(--fd-space-1);
+		padding: 0 var(--fd-space-3xs);
 		border-radius: var(--fd-radius-full);
 		font-size: var(--fd-text-xs);
 		font-weight: 600;
@@ -309,15 +309,15 @@
 
 	/* Content */
 	.input-collector__content {
-		padding: 0 var(--fd-space-4) var(--fd-space-4);
+		padding: 0 var(--fd-space-xl) var(--fd-space-xl);
 	}
 
 	.input-collector__hint {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		padding: var(--fd-space-2) var(--fd-space-3);
-		margin-bottom: var(--fd-space-4);
+		gap: var(--fd-space-xs);
+		padding: var(--fd-space-xs) var(--fd-space-md);
+		margin-bottom: var(--fd-space-xl);
 		background-color: var(--fd-info-muted);
 		border-radius: var(--fd-radius-lg);
 		font-size: var(--fd-text-sm);
@@ -328,13 +328,13 @@
 	.input-collector__fields {
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-4);
+		gap: var(--fd-space-xl);
 	}
 
 	.input-collector__field {
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-1);
+		gap: var(--fd-space-3xs);
 	}
 
 	.input-collector__label {
@@ -350,7 +350,7 @@
 	.input-collector__input,
 	.input-collector__select,
 	.input-collector__textarea {
-		padding: var(--fd-space-2) var(--fd-space-3);
+		padding: var(--fd-space-xs) var(--fd-space-md);
 		border: 1px solid var(--fd-border);
 		border-radius: var(--fd-radius-lg);
 		font-size: var(--fd-text-sm);
@@ -387,7 +387,7 @@
 	.input-collector__checkbox-wrapper {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
+		gap: var(--fd-space-xs);
 		cursor: pointer;
 	}
 
@@ -411,16 +411,16 @@
 
 	/* Actions */
 	.input-collector__actions {
-		margin-top: var(--fd-space-4);
-		padding-top: var(--fd-space-4);
+		margin-top: var(--fd-space-xl);
+		padding-top: var(--fd-space-xl);
 		border-top: 1px solid var(--fd-border-muted);
 	}
 
 	.input-collector__reset {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-1);
-		padding: var(--fd-space-1) var(--fd-space-3);
+		gap: var(--fd-space-3xs);
+		padding: var(--fd-space-3xs) var(--fd-space-md);
 		border: 1px solid var(--fd-border);
 		border-radius: var(--fd-radius-md);
 		background: var(--fd-background);
@@ -438,7 +438,7 @@
 	/* Responsive */
 	@media (max-width: 640px) {
 		.input-collector__content {
-			padding: 0 var(--fd-space-3) var(--fd-space-3);
+			padding: 0 var(--fd-space-md) var(--fd-space-md);
 		}
 	}
 </style>

package/dist/components/playground/MessageBubble.stories.svelte

@@ -0,0 +1,49 @@
+<script module>
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import MessageBubble from "./MessageBubble.svelte";
+
+	const { Story } = defineMeta({
+		title: "Playground/MessageBubble",
+		component: MessageBubble,
+		tags: ["autodocs"],
+		parameters: {
+			layout: "padded",
+		},
+	});
+</script>
+
+<Story name="User Message" args={{
+	message: {
+		id: "msg-1",
+		role: "user",
+		content: "Can you process this workflow for me?",
+		timestamp: new Date().toISOString(),
+	},
+}} />
+
+<Story name="Assistant Message" args={{
+	message: {
+		id: "msg-2",
+		role: "assistant",
+		content: "I've processed the workflow successfully. Here are the results:\n\n- **Step 1**: Data validated\n- **Step 2**: Transformation applied\n- **Step 3**: Output generated\n\nAll checks passed.",
+		timestamp: new Date().toISOString(),
+	},
+}} />
+
+<Story name="System Message" args={{
+	message: {
+		id: "msg-3",
+		role: "system",
+		content: "Workflow execution started",
+		timestamp: new Date().toISOString(),
+	},
+}} />
+
+<Story name="Log Message" args={{
+	message: {
+		id: "msg-4",
+		role: "log",
+		content: "[INFO] Processing node: data-transform-1",
+		timestamp: new Date().toISOString(),
+	},
+}} />

package/dist/components/playground/MessageBubble.stories.svelte.d.ts

@@ -0,0 +1,27 @@
+export default MessageBubble;
+type MessageBubble = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MessageBubble: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+import MessageBubble from "./MessageBubble.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/components/playground/MessageBubble.svelte

@@ -11,6 +11,7 @@
 <script lang="ts">
 	import Icon from '@iconify/svelte';
 	import { marked } from 'marked';
+	import { sanitizeHtml } from '../../utils/sanitize.js';
 	import type {
 		PlaygroundMessage,
 		PlaygroundMessageMetadata,
@@ -56,7 +57,9 @@
 	 * Render content as markdown or plain text
 	 */
 	const renderedContent = $derived(
-		enableMarkdown && message.role !== 'log' ? marked.parse(message.content || '') : message.content
+		enableMarkdown && message.role !== 'log'
+			? sanitizeHtml(marked.parse(message.content || '') as string)
+			: message.content
 	);
 
 	/**
@@ -193,7 +196,7 @@
 			<!-- Message Text -->
 			<div class="message-bubble__text">
 				{#if enableMarkdown && message.role !== 'log'}
-					<!-- Markdown content - marked.js sanitizes content by default -->
+					<!-- Markdown content - sanitized with DOMPurify to prevent XSS -->
 					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 					{@html renderedContent}
 				{:else}
@@ -225,9 +228,9 @@
 <style>
 	.message-bubble {
 		display: flex;
-		gap: var(--fd-space-3);
-		padding: var(--fd-space-3) var(--fd-space-4);
-		margin-bottom: var(--fd-space-2);
+		gap: var(--fd-space-md);
+		padding: var(--fd-space-md) var(--fd-space-xl);
+		margin-bottom: var(--fd-space-xs);
 		border-radius: var(--fd-radius-xl);
 		animation: fadeIn 0.2s ease-out;
 	}
@@ -248,7 +251,7 @@
 		background-color: var(--fd-muted);
 		border: 1px solid var(--fd-border);
 		color: var(--fd-foreground);
-		margin-left: var(--fd-space-8);
+		margin-left: var(--fd-space-4xl);
 		flex-direction: row-reverse;
 	}
 
@@ -256,14 +259,14 @@
 		background-color: var(--fd-card);
 		border: 1px solid var(--fd-border);
 		color: var(--fd-card-foreground);
-		margin-right: var(--fd-space-8);
+		margin-right: var(--fd-space-4xl);
 	}
 
 	.message-bubble--system {
 		background-color: var(--fd-muted);
 		border: 1px solid var(--fd-border);
 		color: var(--fd-muted-foreground);
-		margin: 0 var(--fd-space-4);
+		margin: 0 var(--fd-space-xl);
 		font-size: var(--fd-text-sm);
 	}
 
@@ -271,9 +274,9 @@
 		background-color: var(--fd-muted);
 		border: 1px solid var(--fd-border);
 		color: var(--fd-muted-foreground);
-		margin: 0 var(--fd-space-4);
+		margin: 0 var(--fd-space-xl);
 		font-size: var(--fd-text-sm);
-		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+		font-family: var(--fd-font-mono);
 	}
 
 	.message-bubble--log-error {
@@ -289,14 +292,14 @@
 	}
 
 	.message-bubble--last {
-		margin-bottom: var(--fd-space-4);
+		margin-bottom: var(--fd-space-xl);
 	}
 
 	/* Avatar */
 	.message-bubble__avatar {
 		flex-shrink: 0;
-		width: 2rem;
-		height: 2rem;
+		width: var(--fd-space-4xl);
+		height: var(--fd-space-4xl);
 		display: flex;
 		align-items: center;
 		justify-content: center;
@@ -322,8 +325,8 @@
 	.message-bubble--log .message-bubble__avatar {
 		background-color: var(--fd-secondary);
 		color: var(--fd-muted-foreground);
-		width: 1.5rem;
-		height: 1.5rem;
+		width: var(--fd-space-3xl);
+		height: var(--fd-space-3xl);
 		font-size: var(--fd-text-sm);
 	}
 
@@ -337,8 +340,8 @@
 	.message-bubble__header {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
-		margin-bottom: var(--fd-space-1);
+		gap: var(--fd-space-xs);
+		margin-bottom: var(--fd-space-3xs);
 	}
 
 	.message-bubble--user .message-bubble__header {
@@ -366,10 +369,10 @@
 	.message-bubble__log-level {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-1);
+		gap: var(--fd-space-3xs);
 		font-size: var(--fd-text-xs);
 		font-weight: 600;
-		padding: 0.125rem var(--fd-space-1);
+		padding: 0.125rem var(--fd-space-3xs);
 		border-radius: var(--fd-radius-sm);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
@@ -398,7 +401,7 @@
 	.message-bubble__timestamp {
 		font-size: var(--fd-text-xs);
 		color: var(--fd-muted-foreground);
-		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+		font-family: var(--fd-font-mono);
 	}
 
 	.message-bubble--user .message-bubble__timestamp {
@@ -407,19 +410,19 @@
 
 	/* Message text */
 	.message-bubble__text {
-		line-height: 1.6;
+		line-height: var(--fd-leading-relaxed);
 		word-break: break-word;
 	}
 
 	.message-bubble--log .message-bubble__text {
 		font-size: var(--fd-text-sm);
-		line-height: 1.4;
+		line-height: var(--fd-leading-tight);
 		white-space: pre-wrap;
 	}
 
 	/* Markdown styling for message content */
 	.message-bubble__text :global(p) {
-		margin: 0 0 var(--fd-space-3) 0;
+		margin: 0 0 var(--fd-space-md) 0;
 	}
 
 	.message-bubble__text :global(p:last-child) {
@@ -432,7 +435,7 @@
 	.message-bubble__text :global(h4),
 	.message-bubble__text :global(h5),
 	.message-bubble__text :global(h6) {
-		margin: var(--fd-space-4) 0 var(--fd-space-2) 0;
+		margin: var(--fd-space-xl) 0 var(--fd-space-xs) 0;
 		font-weight: 600;
 		line-height: 1.3;
 	}
@@ -460,31 +463,31 @@
 
 	.message-bubble__text :global(ul),
 	.message-bubble__text :global(ol) {
-		margin: var(--fd-space-2) 0;
-		padding-left: var(--fd-space-6);
+		margin: var(--fd-space-xs) 0;
+		padding-left: var(--fd-space-3xl);
 	}
 
 	.message-bubble__text :global(li) {
-		margin: var(--fd-space-1) 0;
+		margin: var(--fd-space-3xs) 0;
 	}
 
 	.message-bubble__text :global(code) {
 		background-color: var(--fd-secondary);
-		padding: 0.125rem var(--fd-space-1);
+		padding: 0.125rem var(--fd-space-3xs);
 		border-radius: var(--fd-radius-sm);
-		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+		font-family: var(--fd-font-mono);
 		font-size: 0.875em;
 	}
 
 	.message-bubble__text :global(pre) {
 		background-color: var(--fd-foreground);
 		color: var(--fd-background);
-		padding: var(--fd-space-3) var(--fd-space-4);
+		padding: var(--fd-space-md) var(--fd-space-xl);
 		border-radius: var(--fd-radius-lg);
 		overflow-x: auto;
-		margin: var(--fd-space-3) 0;
+		margin: var(--fd-space-md) 0;
 		font-size: var(--fd-text-sm);
-		line-height: 1.5;
+		line-height: var(--fd-leading-normal);
 	}
 
 	.message-bubble__text :global(pre code) {
@@ -497,8 +500,8 @@
 
 	.message-bubble__text :global(blockquote) {
 		border-left: 3px solid var(--fd-border-strong);
-		padding-left: var(--fd-space-4);
-		margin: var(--fd-space-3) 0;
+		padding-left: var(--fd-space-xl);
+		margin: var(--fd-space-md) 0;
 		color: var(--fd-muted-foreground);
 		font-style: italic;
 	}
@@ -515,20 +518,20 @@
 	.message-bubble__text :global(hr) {
 		border: none;
 		border-top: 1px solid var(--fd-border);
-		margin: var(--fd-space-4) 0;
+		margin: var(--fd-space-xl) 0;
 	}
 
 	.message-bubble__text :global(table) {
 		border-collapse: collapse;
 		width: 100%;
-		margin: var(--fd-space-3) 0;
+		margin: var(--fd-space-md) 0;
 		font-size: var(--fd-text-sm);
 	}
 
 	.message-bubble__text :global(th),
 	.message-bubble__text :global(td) {
 		border: 1px solid var(--fd-border);
-		padding: var(--fd-space-2) var(--fd-space-3);
+		padding: var(--fd-space-xs) var(--fd-space-md);
 		text-align: left;
 	}
 
@@ -549,8 +552,8 @@
 	.message-bubble__footer {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-3);
-		margin-top: var(--fd-space-2);
+		gap: var(--fd-space-md);
+		margin-top: var(--fd-space-xs);
 		font-size: var(--fd-text-xs);
 		color: var(--fd-muted-foreground);
 	}
@@ -563,7 +566,7 @@
 	.message-bubble__duration {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-1);
+		gap: var(--fd-space-3xs);
 	}
 
 	/* Responsive */
@@ -590,16 +593,16 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--fd-space-1);
-		padding: var(--fd-space-1) var(--fd-space-3);
-		margin: var(--fd-space-1) 0;
+		gap: var(--fd-space-3xs);
+		padding: var(--fd-space-3xs) var(--fd-space-md);
+		margin: var(--fd-space-3xs) 0;
 		font-size: var(--fd-text-xs);
 		color: var(--fd-muted-foreground);
 		text-align: center;
 	}
 
 	.system-notice--last {
-		margin-bottom: var(--fd-space-3);
+		margin-bottom: var(--fd-space-md);
 	}
 
 	/* Icon styling - using :global for Iconify component */
@@ -611,14 +614,14 @@
 
 	.system-notice__text {
 		color: var(--fd-muted-foreground);
-		line-height: 1.4;
+		line-height: var(--fd-leading-tight);
 	}
 
 	.system-notice__timestamp {
 		flex-shrink: 0;
 		font-size: 0.625rem;
 		color: var(--fd-border-strong);
-		font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+		font-family: var(--fd-font-mono);
 	}
 
 	/* Responsive: hide timestamp on small screens for compactness */