fix: remove redundant console chrome

This commit is contained in:
2026-08-21 17:26:47 +09:00
parent 2a48dfc41a
commit c110965911
3 changed files with 49 additions and 19 deletions
@@ -119,7 +119,6 @@
display: grid; display: grid;
gap: 0.1rem; gap: 0.1rem;
min-width: 0; min-width: 0;
margin-bottom: -0.75rem;
padding-inline: 0.75rem; padding-inline: 0.75rem;
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1.35; line-height: 1.35;
@@ -435,6 +435,34 @@ Deno.test("Worker Console exposes a foldable timeline beside the scroll body", a
); );
}); });
Deno.test("Worker Console removes redundant chrome and uses shared alerts", async () => {
const page = await Deno.readTextFile(
new URL(
"./../../../routes/w/[workspaceId]/runtimes/[runtimeId]/workers/[workerId]/console/+page.svelte",
import.meta.url,
),
);
const tasks = await Deno.readTextFile(
new URL("./ConsoleTasks.svelte", import.meta.url),
);
assert(
page.includes('<form class="console-composer"') &&
!page.includes('class="console-composer card"') &&
!page.includes(
"padding: var(--space-3) var(--space-6) var(--space-4)",
) &&
page.includes('import { pushWorkspaceAlert }') &&
page.includes('title: "Worker control"') &&
page.includes('title: "Rewind targets"') &&
page.includes('pushWorkspaceAlert("error"') &&
!page.includes("controlNotice") &&
!page.includes("console-notice") &&
!tasks.includes("margin-bottom: -0.75rem"),
"Console should remove redundant card/spacing chrome and route control notices through workspace alerts",
);
});
Deno.test("Worker Console composer fits to content without manual resize", async () => { Deno.test("Worker Console composer fits to content without manual resize", async () => {
const consolePage = await Deno.readTextFile( const consolePage = await Deno.readTextFile(
new URL( new URL(
@@ -33,6 +33,7 @@
type ConsoleViewScroll, type ConsoleViewScroll,
} from "$lib/workspace/console/model"; } from "$lib/workspace/console/model";
import type { Event as ProtocolEvent, Method as ProtocolMethod, RewindTarget, Segment } from "$lib/generated/protocol"; import type { Event as ProtocolEvent, Method as ProtocolMethod, RewindTarget, Segment } from "$lib/generated/protocol";
import { pushWorkspaceAlert } from "$lib/workspace/alerts/store";
import { workspaceApiPath } from "$lib/workspace/api/http"; import { workspaceApiPath } from "$lib/workspace/api/http";
import { workspaceMultiplexer, type WorkspaceMultiplexerSubscription } from "$lib/workspace/multiplexer"; import { workspaceMultiplexer, type WorkspaceMultiplexerSubscription } from "$lib/workspace/multiplexer";
import type { import type {
@@ -111,7 +112,6 @@
let sendError = $state<string | null>(null); let sendError = $state<string | null>(null);
let rewindTargets = $state<RewindTarget[]>([]); let rewindTargets = $state<RewindTarget[]>([]);
let rewindHeadEntries = $state(0); let rewindHeadEntries = $state(0);
let controlNotice = $state<string | null>(null);
let composerNotice = $state<string | null>(null); let composerNotice = $state<string | null>(null);
let protocolState = $state<"connecting" | "open" | "closed" | "error">( let protocolState = $state<"connecting" | "open" | "closed" | "error">(
"connecting", "connecting",
@@ -161,6 +161,9 @@
}; };
const consoleTarget = $derived({ workspaceId, runtimeId, workerId }); const consoleTarget = $derived({ workspaceId, runtimeId, workerId });
const controlAlertId = $derived(
`worker-console-control:${runtimeId}:${workerId}`,
);
const workerViews = $derived(consoleWorkerViews(consoleProjection)); const workerViews = $derived(consoleWorkerViews(consoleProjection));
const selectedWorkerView = $derived( const selectedWorkerView = $derived(
@@ -418,10 +421,18 @@
function sendControl(method: ProtocolMethod, label: string) { function sendControl(method: ProtocolMethod, label: string) {
try { try {
sendProtocolMethod(method); sendProtocolMethod(method);
controlNotice = `${label} sent through Worker protocol.`; pushWorkspaceAlert(
"info",
`${label} sent through Worker protocol.`,
{ id: controlAlertId, title: "Worker control" },
);
} catch (error) { } catch (error) {
controlNotice = null; const message = error instanceof Error ? error.message : String(error);
sendError = error instanceof Error ? error.message : String(error); sendError = message;
pushWorkspaceAlert("error", message, {
id: controlAlertId,
title: "Worker control failed",
});
} }
} }
@@ -674,10 +685,13 @@
if (event.event === "rewind_targets") { if (event.event === "rewind_targets") {
rewindHeadEntries = event.data.head_entries; rewindHeadEntries = event.data.head_entries;
rewindTargets = event.data.targets; rewindTargets = event.data.targets;
controlNotice = pushWorkspaceAlert(
"info",
event.data.targets.length === 0 event.data.targets.length === 0
? "No rewind targets are available." ? "No rewind targets are available."
: `Loaded ${event.data.targets.length} rewind target(s).`; : `Loaded ${event.data.targets.length} rewind target(s).`,
{ id: controlAlertId, title: "Rewind targets" },
);
return; return;
} }
if (event.event === "error") { if (event.event === "error") {
@@ -1324,10 +1338,6 @@
</div> </div>
</section> </section>
{#if controlNotice}
<p class="console-notice">{controlNotice}</p>
{/if}
{#if rewindTargets.length > 0} {#if rewindTargets.length > 0}
<section class="card rewind-targets" aria-label="Rewind targets"> <section class="card rewind-targets" aria-label="Rewind targets">
<h3>Rewind targets</h3> <h3>Rewind targets</h3>
@@ -1509,7 +1519,7 @@
}} }}
/> />
<form class="console-composer card" onsubmit={sendMessage}> <form class="console-composer" onsubmit={sendMessage}>
<div class="composer-input-shell"> <div class="composer-input-shell">
<textarea <textarea
id="worker-console-message" id="worker-console-message"
@@ -1653,12 +1663,6 @@
color: var(--bg); color: var(--bg);
} }
.console-notice {
margin: 0;
color: var(--text-muted);
font-size: 0.86rem;
}
.rewind-targets { .rewind-targets {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1832,7 +1836,6 @@
display: grid; display: grid;
gap: var(--space-3); gap: var(--space-3);
margin-inline: calc(-1 * var(--space-6)); margin-inline: calc(-1 * var(--space-6));
padding: var(--space-3) var(--space-6) var(--space-4);
background: var(--bg); background: var(--bg);
} }