Load complete background process output and fix dialog layout

This commit is contained in:
Shantur Rathore
2025-12-30 22:03:04 +00:00
parent 154c5208b4
commit a9524b3e30
4 changed files with 28 additions and 20 deletions

View File

@@ -26,7 +26,7 @@ export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDial
setLoading(true)
serverApi
.fetchBackgroundProcessOutput(props.instanceId, process.id, { method: "full" })
.fetchBackgroundProcessOutput(props.instanceId, process.id, { method: "full", maxBytes: undefined })
.then((response) => {
if (!active) return
setOutput(response.content)
@@ -65,18 +65,20 @@ export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDial
<Dialog.Overlay class="modal-overlay" />
<div class="fixed inset-0 z-50 flex items-center justify-center p-4">
<Dialog.Content class="modal-surface w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
<div class="flex items-center justify-between px-6 py-4 border-b border-base">
<div class="flex flex-col">
<Dialog.Title class="text-lg font-semibold text-primary">Background Output</Dialog.Title>
<Show when={props.process}>
<span class="text-xs text-secondary">
{props.process?.title} · {props.process?.id}
</span>
<span class="text-xs text-secondary mt-1 break-words">{props.process?.command}</span>
</Show>
</div>
<div class="flex items-start justify-between px-6 py-4 border-b border-base gap-4">
<div class="flex-1 min-w-0">
<Dialog.Title class="text-lg font-semibold text-primary">Background Output</Dialog.Title>
<Show when={props.process}>
<span class="text-xs text-secondary block">
{props.process?.title} · {props.process?.id}
</span>
<span class="text-xs text-secondary mt-1 block truncate" title={props.process?.command}>
{props.process?.command}
</span>
</Show>
</div>
<button type="button" class="button-tertiary" onClick={props.onClose}>
<button type="button" class="button-tertiary flex-shrink-0" onClick={props.onClose}>
Close
</button>
</div>
@@ -88,7 +90,7 @@ export function BackgroundProcessOutputDialog(props: BackgroundProcessOutputDial
<Show when={truncated()}>
<p class="text-xs text-secondary mb-2">Output truncated for display.</p>
</Show>
<pre class="text-xs whitespace-pre-wrap break-words text-primary bg-surface-secondary border border-base rounded-md p-4">
<pre class="text-xs whitespace-pre-wrap break-all text-primary bg-surface-secondary border border-base rounded-md p-4 font-mono">
{output()}
</pre>
</Show>

View File

@@ -247,7 +247,7 @@ export const serverApi = {
fetchBackgroundProcessOutput(
instanceId: string,
processId: string,
options?: { method?: "full" | "tail" | "head" | "grep"; pattern?: string; lines?: number },
options?: { method?: "full" | "tail" | "head" | "grep"; pattern?: string; lines?: number; maxBytes?: number },
): Promise<BackgroundProcessOutputResponse> {
const params = new URLSearchParams()
if (options?.method) {
@@ -259,6 +259,9 @@ export const serverApi = {
if (options?.lines) {
params.set("lines", String(options.lines))
}
if (options?.maxBytes !== undefined) {
params.set("maxBytes", String(options.maxBytes))
}
const query = params.toString()
const suffix = query ? `?${query}` : ""
return request<BackgroundProcessOutputResponse>(