blomios/Containarr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add auto update

Browse Source
This commit is contained in:
Blomios
2026-05-19 15:53:30 +02:00
parent bd3121d688
commit ba4de62a34
22 changed files with 3323 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
web/src/lib/api.ts
View File

@ -122,6 +122,7 @@ export interface ImageEntry {
agent_id: string;
hostname: string;
alias: string;
ip_address: string;
id: string;
tags: string[];
size: number;
@ -132,6 +133,7 @@ export interface VolumeEntry {
agent_id: string;
hostname: string;
alias: string;
ip_address: string;
name: string;
driver: string;
mountpoint: string;
@ -141,6 +143,7 @@ export interface NetworkEntry {
agent_id: string;
hostname: string;
alias: string;
ip_address: string;
id: string;
name: string;
driver: string;
@ -201,6 +204,92 @@ export function connectLogs(
return () => ws.close();
}
export async function fsList(
agentId: string,
path: string
): Promise<{ name: string; is_dir: boolean; has_compose: boolean }[]> {
const r = await apiFetch(`${BASE}/agents/${agentId}/fs/list?path=${encodeURIComponent(path)}`);
if (!r.ok) throw new Error(`fsList: ${r.status}`);
return r.json();
}
export async function fsRead(agentId: string, path: string): Promise<string> {
const r = await apiFetch(`${BASE}/agents/${agentId}/fs/read?path=${encodeURIComponent(path)}`);
if (!r.ok) throw new Error(`fsRead: ${r.status}`);
const json = await r.json();
return json.content as string;
}
export async function fsWrite(agentId: string, path: string, content: string): Promise<void> {
const r = await apiFetch(`${BASE}/agents/${agentId}/fs/write`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ path, content }),
});
if (!r.ok) throw new Error(`fsWrite: ${r.status}`);
}
export async function fsMkdir(agentId: string, path: string): Promise<void> {
const r = await apiFetch(`/api/v1/agents/${agentId}/fs/mkdir`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ path }),
});
if (!r.ok) throw new Error(`mkdir: ${r.status}`);
}
export async function composeAction(
agentId: string,
path: string,
action: "up" | "down" | "pull"
): Promise<{ ok: boolean; output: string }> {
const r = await apiFetch(`${BASE}/agents/${agentId}/compose`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ path, action }),
});
if (!r.ok) throw new Error(`composeAction: ${r.status}`);
return r.json();
}
export interface AutoUpdatePolicy {
enabled: boolean;
interval_minutes: number;
last_checked_at: string | null;
last_updated_at: string | null;
}
export async function getAutoUpdatePolicy(agentId: string, containerId: string): Promise<AutoUpdatePolicy> {
const r = await apiFetch(`${BASE}/agents/${agentId}/containers/${containerId}/auto-update`);
if (!r.ok) throw new Error(`getAutoUpdatePolicy: ${r.status}`);
return r.json();
}
export async function setAutoUpdatePolicy(
agentId: string,
containerId: string,
policy: Pick<AutoUpdatePolicy, "enabled" | "interval_minutes">
): Promise<AutoUpdatePolicy> {
const r = await apiFetch(`${BASE}/agents/${agentId}/containers/${containerId}/auto-update`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(policy),
});
if (!r.ok) throw new Error(`setAutoUpdatePolicy: ${r.status}`);
return r.json();
}
export async function updateNow(agentId: string, containerId: string): Promise<{ command_id: string }> {
const r = await apiFetch(`${BASE}/agents/${agentId}/containers/${containerId}/update-now`, {
method: "POST",
});
if (!r.ok) {
const text = await r.text().catch(() => "");
throw new Error(text || `updateNow: ${r.status}`);
}
return r.json();
}
export function connectEvents(
onEvent: (evt: { type: string; agent_id?: string; payload: unknown }) => void
): () => void {

411
web/src/routes/+page.svelte
View File

@ -13,11 +13,15 @@
fetchNetworks,
containerAction,
connectEvents,
getAutoUpdatePolicy,
setAutoUpdatePolicy,
updateNow,
type ContainerEntry,
type ContainerPort,
type ImageEntry,
type VolumeEntry,
type NetworkEntry,
type AutoUpdatePolicy,
} from "$lib/api";
import { clearToken } from "$lib/auth";
import LogModal from "$lib/LogModal.svelte";
@ -144,6 +148,19 @@
loadError = null;
try {
entries = await fetchContainers() ?? [];
// Pré-chargement en arrière-plan des policies pour colorer les boutons auto-update
const toLoad = entries;
Promise.allSettled(
toLoad.map(e => getAutoUpdatePolicy(e.agent_id, e.container.id).then(policy => ({ key: autoUpdateKey(e.agent_id, e.container.id), policy })))
).then(results => {
const updates: Record<string, AutoUpdateState> = {};
for (const r of results) {
if (r.status === "fulfilled") {
updates[r.value.key] = { policy: r.value.policy, loading: false, saving: false };
}
}
autoUpdateStates = { ...autoUpdateStates, ...updates };
});
} catch (e: unknown) {
loadError = e instanceof Error ? e.message : String(e);
entries = [];
@ -213,11 +230,170 @@
setTimeout(() => (toast = null), 3000);
}
// ── Auto-update panel ────────────────────────────────────────────────────
interface AutoUpdateState {
policy: AutoUpdatePolicy | null;
loading: boolean;
saving: boolean;
}
let autoUpdateOpen = $state<string | null>(null); // containerKey = `${agentId}/${containerId}`
let updateNowPending = $state<string | null>(null); // containerKey en cours d'update
let autoUpdateStates = $state<Record<string, AutoUpdateState>>({});
let autoUpdateDebounce = $state<ReturnType<typeof setTimeout> | null>(null);
let autoUpdatePanelPos = $state<{ top: number; right: number } | null>(null);
const INTERVAL_OPTIONS = [
{ label: "1 heure", value: 60 },
{ label: "6 heures", value: 360 },
{ label: "12 heures", value: 720 },
{ label: "24 heures", value: 1440 },
{ label: "7 jours", value: 10080 },
];
function autoUpdateKey(agentId: string, containerId: string) {
return `${agentId}/${containerId}`;
}
async function openAutoUpdate(agentId: string, containerId: string, panelPos?: { top: number; right: number }) {
const key = autoUpdateKey(agentId, containerId);
if (autoUpdateOpen === key) {
autoUpdateOpen = null;
autoUpdatePanelPos = null;
return;
}
autoUpdateOpen = key;
if (panelPos) autoUpdatePanelPos = panelPos;
// Si la policy a déjà été pré-chargée, on ne la réinitialise pas
const existing = autoUpdateStates[key];
if (!existing?.policy) {
autoUpdateStates = {
...autoUpdateStates,
[key]: { policy: existing?.policy ?? null, loading: true, saving: false },
};
try {
const policy = await getAutoUpdatePolicy(agentId, containerId);
autoUpdateStates = {
...autoUpdateStates,
[key]: { policy, loading: false, saving: false },
};
} catch {
autoUpdateStates = {
...autoUpdateStates,
[key]: { policy: null, loading: false, saving: false },
};
}
}
}
function scheduleAutoUpdateSave(agentId: string, containerId: string) {
const key = autoUpdateKey(agentId, containerId);
if (autoUpdateDebounce) clearTimeout(autoUpdateDebounce);
autoUpdateDebounce = setTimeout(async () => {
const state = autoUpdateStates[key];
if (!state?.policy) return;
autoUpdateStates = {
...autoUpdateStates,
[key]: { ...state, saving: true },
};
try {
const updated = await setAutoUpdatePolicy(agentId, containerId, {
enabled: state.policy.enabled,
interval_minutes: state.policy.interval_minutes,
});
autoUpdateStates = {
...autoUpdateStates,
[key]: { policy: updated, loading: false, saving: false },
};
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : String(e), false);
autoUpdateStates = {
...autoUpdateStates,
[key]: { ...state, saving: false },
};
}
}, 300);
}
function toggleAutoUpdateEnabled(agentId: string, containerId: string) {
const key = autoUpdateKey(agentId, containerId);
const state = autoUpdateStates[key];
if (!state?.policy) return;
autoUpdateStates = {
...autoUpdateStates,
[key]: { ...state, policy: { ...state.policy, enabled: !state.policy.enabled } },
};
scheduleAutoUpdateSave(agentId, containerId);
}
function changeAutoUpdateInterval(agentId: string, containerId: string, minutes: number) {
const key = autoUpdateKey(agentId, containerId);
const state = autoUpdateStates[key];
if (!state?.policy) return;
autoUpdateStates = {
...autoUpdateStates,
[key]: { ...state, policy: { ...state.policy, interval_minutes: minutes } },
};
scheduleAutoUpdateSave(agentId, containerId);
}
async function doUpdateNow(agentId: string, containerId: string) {
const key = autoUpdateKey(agentId, containerId);
updateNowPending = key;
try {
await updateNow(agentId, containerId);
showToast("Mise à jour lancée", true);
// Refresh panel après un délai pour montrer last_checked_at mis à jour
if (autoUpdateOpen !== null) {
const currentKey = autoUpdateOpen;
const parts = currentKey.split('/');
const panelAgentId = parts[0];
const panelContainerId = parts.slice(1).join('/');
setTimeout(async () => {
if (autoUpdateOpen !== currentKey) return; // panel fermé entretemps
try {
const policy = await getAutoUpdatePolicy(panelAgentId, panelContainerId);
autoUpdateStates = {
...autoUpdateStates,
[currentKey]: { policy, loading: false, saving: false },
};
} catch {}
}, 3000);
}
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : String(e), false);
} finally {
updateNowPending = null;
}
}
function closeAutoUpdateOnClickOutside(e: MouseEvent) {
if (autoUpdateOpen === null) return;
const target = e.target as HTMLElement;
if (!target.closest("[data-autoupdate-panel]") && !target.closest("[data-autoupdate-btn]")) {
autoUpdateOpen = null;
autoUpdatePanelPos = null;
}
}
function formatRelativeTime(iso: string | null): string {
if (!iso) return "Jamais";
const diff = Date.now() - new Date(iso).getTime();
const s = Math.floor(diff / 1000);
if (s < 60) return "Il y a quelques secondes";
const m = Math.floor(s / 60);
if (m < 60) return `Il y a ${m} min`;
const h = Math.floor(m / 60);
if (h < 24) return `Il y a ${h}h`;
const d = Math.floor(h / 24);
return `Il y a ${d}j`;
}
// ── Toggle helpers ────────────────────────────────────────────────────────
function toggleSection(agentId: string) { collapsed[agentId] = !(collapsed[agentId] ?? true); }
function toggleImages(agentId: string) { collapsedImages[agentId] = !(collapsedImages[agentId] ?? true); }
function toggleVolumes(agentId: string) { collapsedVolumes[agentId] = !(collapsedVolumes[agentId] ?? true); }
function toggleNetworks(agentId: string) { collapsedNetworks[agentId] = !(collapsedNetworks[agentId] ?? true); }
function toggleSection(agentId: string) { collapsed = { ...collapsed, [agentId]: !(collapsed[agentId] ?? true) }; }
function toggleImages(agentId: string) { collapsedImages = { ...collapsedImages, [agentId]: !(collapsedImages[agentId] ?? true) }; }
function toggleVolumes(agentId: string) { collapsedVolumes = { ...collapsedVolumes, [agentId]: !(collapsedVolumes[agentId] ?? true) }; }
function toggleNetworks(agentId: string) { collapsedNetworks = { ...collapsedNetworks, [agentId]: !(collapsedNetworks[agentId] ?? true) }; }
// ── Lifecycle ─────────────────────────────────────────────────────────────
onMount(() => {
@ -225,6 +401,18 @@
disconnect = connectEvents((evt) => {
if (evt.type === "containers.updated" || evt.type === "agent.connected" || evt.type === "agent.disconnected") {
if (activeTab === "containers") load();
// Refresh open auto-update panel
if (autoUpdateOpen !== null) {
const parts = autoUpdateOpen.split('/');
const panelAgentId = parts[0];
const panelContainerId = parts.slice(1).join('/');
getAutoUpdatePolicy(panelAgentId, panelContainerId).then(policy => {
autoUpdateStates = {
...autoUpdateStates,
[autoUpdateOpen!]: { policy, loading: false, saving: false },
};
}).catch(() => {});
}
}
if (evt.type === "resources.updated") {
if (activeTab === "images") loadImages();
@ -255,7 +443,7 @@
if (seen.has(key)) return false;
seen.add(key);
return true;
});
}).sort((a, b) => a.host_port - b.host_port);
}
function stateDotClass(state: string) {
@ -320,7 +508,7 @@
</div>
{/if}
<div class="min-h-screen bg-abyss-900 bg-grid-faint bg-grid text-slate-200">
<div class="min-h-screen bg-abyss-900 bg-grid-faint bg-grid text-slate-200" role="presentation" onclick={closeAutoUpdateOnClickOutside}>
<!-- Header -->
<header class="glass sticky top-0 z-40 px-5 py-3 flex items-center gap-3">
@ -334,18 +522,24 @@
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{entries.length} containers · {Object.keys(byAgent).length} hosts
</span>
{:else if activeTab === "images" && images !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{images.length} images · {Object.keys(byAgentImages).length} hosts
</span>
{:else if activeTab === "volumes" && volumes !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{volumes.length} volumes · {Object.keys(byAgentVolumes).length} hosts
</span>
{:else if activeTab === "networks" && networks !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{networks.length} networks · {Object.keys(byAgentNetworks).length} hosts
</span>
{:else if activeTab === "images"}
{#if images !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{images.length} images · {Object.keys(byAgentImages).length} hosts
</span>
{/if}
{:else if activeTab === "volumes"}
{#if volumes !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{volumes.length} volumes · {Object.keys(byAgentVolumes).length} hosts
</span>
{/if}
{:else if activeTab === "networks"}
{#if networks !== null}
<span class="text-xs text-slate-500 mr-3 tabular-nums">
{networks.length} networks · {Object.keys(byAgentNetworks).length} hosts
</span>
{/if}
{/if}
{#if installPrompt}
@ -357,6 +551,13 @@
</button>
{/if}
<a href="/compose" class="nav-btn" title="Éditeur Compose">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</a>
<a href="/admin" class="nav-btn" title="Administration">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
@ -405,7 +606,6 @@
<main class="p-4 md:p-6 max-w-7xl mx-auto">
{#key activeTab}
<!-- ═══════════════════════════════════════════════════
CONTAINERS TAB
════════════════════════════════════════════════════ -->
@ -434,7 +634,6 @@
{#each sortedAgents as [agentId, containers]}
{#if containers.length > 0}
{@const first = containers[0]}
{@const isCollapsed = collapsed[agentId] ?? true}
<section class="mb-8">
<button
@ -444,7 +643,7 @@
>
<svg
class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200 shrink-0
{isCollapsed ? '-rotate-90' : 'rotate-0'}"
{collapsed[agentId] !== false ? '-rotate-90' : 'rotate-0'}"
fill="none" stroke="currentColor" viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7" />
@ -465,7 +664,7 @@
</span>
</button>
{#if !isCollapsed}
{#if collapsed[agentId] === false}
<!-- Desktop table -->
<div class="hidden md:block card overflow-hidden">
<table class="w-full text-sm">
@ -480,7 +679,7 @@
</tr>
</thead>
<tbody>
{#each containers as { agent_id, container } (container.id)}
{#each containers.slice().sort((a, b) => a.container.name.localeCompare(b.container.name)) as { agent_id, container } (container.id)}
<tr class="border-b border-white/[0.04] last:border-0
hover:bg-white/[0.025] transition-colors group">
<td class="px-4 py-3">
@ -508,7 +707,7 @@
{container.compose_project || "—"}
</td>
<td class="px-4 py-3">
<div class="flex justify-end gap-1.5">
<div class="flex justify-end gap-1.5 relative">
{@render ActionBtn({ label: "Logs", variant: "cyan",
loading: false,
onclick: () => openLogs(agent_id, container.id, container.name) })}
@ -524,6 +723,7 @@
loading: actionPending === container.id,
onclick: () => doAction(agent_id, container.id, "restart") })}
{/if}
{@render AutoUpdateBtn(agent_id, container.id)}
</div>
</td>
</tr>
@ -534,7 +734,7 @@
<!-- Mobile cards -->
<div class="md:hidden space-y-2">
{#each containers as { agent_id, container } (container.id)}
{#each containers.slice().sort((a, b) => a.container.name.localeCompare(b.container.name)) as { agent_id, container } (container.id)}
<div class="card p-4">
<div class="flex items-start justify-between gap-2 mb-2">
<div class="flex items-center gap-2 min-w-0">
@ -554,7 +754,7 @@
{/each}
</div>
{/if}
<div class="flex gap-2 flex-wrap">
<div class="flex gap-2 flex-wrap relative">
{@render ActionBtn({ label: "Logs", variant: "cyan",
loading: false,
onclick: () => openLogs(agent_id, container.id, container.name) })}
@ -570,6 +770,7 @@
loading: actionPending === container.id,
onclick: () => doAction(agent_id, container.id, "restart") })}
{/if}
{@render AutoUpdateBtn(agent_id, container.id)}
</div>
</div>
{/each}
@ -609,7 +810,6 @@
{:else}
{#each sortedAgentImages as [agentId, agentImages]}
{@const first = agentImages[0]}
{@const isCollapsed = collapsedImages[agentId] ?? true}
<section class="mb-8">
<button
@ -619,7 +819,7 @@
>
<svg
class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200 shrink-0
{isCollapsed ? '-rotate-90' : 'rotate-0'}"
{collapsedImages[agentId] !== false ? '-rotate-90' : 'rotate-0'}"
fill="none" stroke="currentColor" viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7" />
@ -631,12 +831,16 @@
{#if first.alias}
<span class="font-mono text-xs text-slate-600">{first.hostname}</span>
{/if}
{#if first.ip_address}
<span class="font-mono text-xs text-slate-500 bg-abyss-700 px-2 py-0.5 rounded-full
border border-white/[0.06]">{first.ip_address}</span>
{/if}
<span class="text-xs text-slate-600 ml-auto">
{agentImages.length} image{agentImages.length !== 1 ? "s" : ""}
</span>
</button>
{#if !isCollapsed}
{#if collapsedImages[agentId] === false}
<div class="card overflow-hidden">
<table class="w-full text-sm">
<thead>
@ -648,10 +852,10 @@
</tr>
</thead>
<tbody>
{#each agentImages as img (img.id)}
{#each agentImages.slice().sort((a, b) => (a.tags[0] ?? a.id).localeCompare(b.tags[0] ?? b.id)) as img (img.id)}
<tr class="border-b border-white/[0.04] last:border-0 hover:bg-white/[0.025] transition-colors">
<td class="px-4 py-3">
{#if img.tags.length > 0}
{#if img.tags?.length > 0}
<div class="flex flex-wrap gap-1">
{#each img.tags as tag}
<span class="font-mono text-xs px-1.5 py-0.5 rounded
@ -706,7 +910,6 @@
{:else}
{#each sortedAgentVolumes as [agentId, agentVolumes]}
{@const first = agentVolumes[0]}
{@const isCollapsed = collapsedVolumes[agentId] ?? true}
<section class="mb-8">
<button
@ -716,7 +919,7 @@
>
<svg
class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200 shrink-0
{isCollapsed ? '-rotate-90' : 'rotate-0'}"
{collapsedVolumes[agentId] !== false ? '-rotate-90' : 'rotate-0'}"
fill="none" stroke="currentColor" viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7" />
@ -728,12 +931,16 @@
{#if first.alias}
<span class="font-mono text-xs text-slate-600">{first.hostname}</span>
{/if}
{#if first.ip_address}
<span class="font-mono text-xs text-slate-500 bg-abyss-700 px-2 py-0.5 rounded-full
border border-white/[0.06]">{first.ip_address}</span>
{/if}
<span class="text-xs text-slate-600 ml-auto">
{agentVolumes.length} volume{agentVolumes.length !== 1 ? "s" : ""}
</span>
</button>
{#if !isCollapsed}
{#if collapsedVolumes[agentId] === false}
<div class="card overflow-hidden">
<table class="w-full text-sm">
<thead>
@ -744,7 +951,7 @@
</tr>
</thead>
<tbody>
{#each agentVolumes as vol (vol.name)}
{#each agentVolumes.slice().sort((a, b) => a.name.localeCompare(b.name)) as vol (vol.name)}
<tr class="border-b border-white/[0.04] last:border-0 hover:bg-white/[0.025] transition-colors">
<td class="px-4 py-3 font-mono text-xs text-slate-200 font-medium">{vol.name}</td>
<td class="px-4 py-3 text-xs text-slate-400">{vol.driver}</td>
@ -789,7 +996,6 @@
{:else}
{#each sortedAgentNetworks as [agentId, agentNetworks]}
{@const first = agentNetworks[0]}
{@const isCollapsed = collapsedNetworks[agentId] ?? true}
<section class="mb-8">
<button
@ -799,7 +1005,7 @@
>
<svg
class="w-3.5 h-3.5 text-slate-500 transition-transform duration-200 shrink-0
{isCollapsed ? '-rotate-90' : 'rotate-0'}"
{collapsedNetworks[agentId] !== false ? '-rotate-90' : 'rotate-0'}"
fill="none" stroke="currentColor" viewBox="0 0 24 24"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7" />
@ -811,12 +1017,16 @@
{#if first.alias}
<span class="font-mono text-xs text-slate-600">{first.hostname}</span>
{/if}
{#if first.ip_address}
<span class="font-mono text-xs text-slate-500 bg-abyss-700 px-2 py-0.5 rounded-full
border border-white/[0.06]">{first.ip_address}</span>
{/if}
<span class="text-xs text-slate-600 ml-auto">
{agentNetworks.length} réseau{agentNetworks.length !== 1 ? "x" : ""}
</span>
</button>
{#if !isCollapsed}
{#if collapsedNetworks[agentId] === false}
<div class="card overflow-hidden">
<table class="w-full text-sm">
<thead>
@ -828,7 +1038,7 @@
</tr>
</thead>
<tbody>
{#each agentNetworks as net (net.id)}
{#each agentNetworks.slice().sort((a, b) => a.name.localeCompare(b.name)) as net (net.id)}
<tr class="border-b border-white/[0.04] last:border-0 hover:bg-white/[0.025] transition-colors">
<td class="px-4 py-3 font-mono text-xs text-slate-200 font-medium">{net.name}</td>
<td class="px-4 py-3 text-xs text-slate-400">{net.driver}</td>
@ -852,9 +1062,100 @@
{/each}
{/if}
{/if}
{/key}
</main>
<!-- Auto-update panel (position: fixed, hors du flux des tableaux) -->
{#if autoUpdateOpen !== null && autoUpdatePanelPos !== null}
{@const state = autoUpdateStates[autoUpdateOpen]}
{@const parts = autoUpdateOpen.split('/')}
{@const panelAgentId = parts[0]}
{@const panelContainerId = parts.slice(1).join('/')}
<div
data-autoupdate-panel
role="presentation"
onclick={(e) => e.stopPropagation()}
style="position: fixed; top: {autoUpdatePanelPos.top}px; right: {autoUpdatePanelPos.right}px;"
class="z-50 w-64 bg-gray-800 border border-gray-700 rounded-lg shadow-xl p-3"
>
{#if state?.loading}
<div class="flex items-center justify-center py-4 text-slate-500 text-xs gap-2">
<div class="w-4 h-4 border border-slate-600 border-t-violet-400 rounded-full animate-spin"></div>
Chargement…
</div>
{:else if !state?.policy}
<p class="text-xs text-signal-red text-center py-2">Erreur de chargement</p>
{:else}
<!-- Toggle -->
<div class="flex items-center justify-between mb-3">
<span class="text-xs font-medium text-slate-300">Auto-update</span>
<button
type="button"
aria-pressed={state.policy.enabled}
aria-label="Activer/désactiver l'auto-update"
onclick={() => toggleAutoUpdateEnabled(panelAgentId, panelContainerId)}
class="relative w-9 h-5 rounded-full cursor-pointer transition-colors focus:outline-none
{state.policy.enabled ? 'bg-violet-500' : 'bg-gray-600'}
{state.saving ? 'opacity-60' : ''}"
>
<span
class="absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow
transition-transform duration-200
{state.policy.enabled ? 'translate-x-4' : 'translate-x-0'}"
></span>
</button>
</div>
<!-- Interval -->
<div class="mb-3">
<label for="au-interval-{autoUpdateOpen}" class="text-xs text-slate-500 block mb-1">Intervalle</label>
<select
id="au-interval-{autoUpdateOpen}"
disabled={!state.policy.enabled || state.saving}
value={state.policy.interval_minutes}
onchange={(e) => changeAutoUpdateInterval(panelAgentId, panelContainerId, Number((e.target as HTMLSelectElement).value))}
class="w-full bg-gray-900 border border-gray-600 text-gray-300 text-xs
rounded-md px-2 py-1.5 focus:outline-none focus:border-violet-500
disabled:opacity-40 disabled:cursor-not-allowed"
>
{#each INTERVAL_OPTIONS as opt}
<option value={opt.value}>{opt.label}</option>
{/each}
</select>
</div>
<!-- Bouton update now -->
<div class="mb-3">
<button
type="button"
disabled={updateNowPending === autoUpdateOpen || state.saving}
onclick={() => doUpdateNow(panelAgentId, panelContainerId)}
class="w-full px-3 py-1.5 rounded-md text-xs font-medium transition-all border
bg-violet-500/15 hover:bg-violet-500/25 text-violet-300 border-violet-500/30
disabled:opacity-40 disabled:cursor-not-allowed"
>
{updateNowPending === autoUpdateOpen ? "Mise à jour en cours…" : "Mettre à jour maintenant"}
</button>
</div>
<!-- Info lines -->
<div class="space-y-1 border-t border-gray-700 pt-2">
<p class="text-gray-500 text-xs">
Vérification : <span class="text-slate-400">{formatRelativeTime(state.policy.last_checked_at)}</span>
</p>
<p class="text-gray-500 text-xs">
Mise à jour : <span class="text-slate-400">{formatRelativeTime(state.policy.last_updated_at)}</span>
</p>
</div>
{#if state.saving}
<p class="text-xs text-violet-400 mt-2 text-center">Enregistrement…</p>
{/if}
{/if}
</div>
{/if}
</div>
{#snippet ActionBtn({ label, variant, loading, onclick }: {
@ -876,3 +1177,33 @@
{loading ? "…" : label}
</button>
{/snippet}
{#snippet AutoUpdateBtn(agentId: string, containerId: string)}
{@const key = autoUpdateKey(agentId, containerId)}
{@const isOpen = autoUpdateOpen === key}
{@const state = autoUpdateStates[key]}
<div class="relative">
<button
data-autoupdate-btn
onclick={(e) => {
e.stopPropagation();
if (autoUpdateOpen !== key) {
const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
openAutoUpdate(agentId, containerId, { top: rect.bottom + 6, right: window.innerWidth - rect.right });
} else {
openAutoUpdate(agentId, containerId);
}
}}
title="Auto-update"
class="px-2 py-1 rounded-lg text-xs font-medium transition-all border
{isOpen || state?.policy?.enabled
? 'bg-violet-500/20 text-violet-300 border-violet-500/40'
: 'bg-white/[0.05] hover:bg-white/[0.09] text-slate-500 hover:text-slate-300 border-white/[0.08]'}"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg>
</button>
</div>
{/snippet}

649
web/src/routes/compose/+page.svelte Normal file
View File

@ -0,0 +1,649 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import { goto } from '$app/navigation';
import { EditorState } from '@codemirror/state';
import { EditorView, keymap, lineNumbers } from '@codemirror/view';
import { defaultKeymap, indentWithTab } from '@codemirror/commands';
import { yaml } from '@codemirror/lang-yaml';
import { oneDark } from '@codemirror/theme-one-dark';
import { indentUnit } from '@codemirror/language';
import { bracketMatching } from '@codemirror/language';
import { fetchAgents, fsList, fsRead, fsWrite, composeAction, fsMkdir, type Agent } from '$lib/api';
import { clearToken } from '$lib/auth';
// ── Auth ──────────────────────────────────────────────────────────────────
function logout() {
clearToken();
goto('/login');
}
// ── Toast ─────────────────────────────────────────────────────────────────
let toast = $state<{ msg: string; ok: boolean } | null>(null);
function showToast(msg: string, ok: boolean) {
toast = { msg, ok };
setTimeout(() => (toast = null), 3500);
}
// ── Agents ────────────────────────────────────────────────────────────────
let agents = $state<Agent[]>([]);
let selectedAgentId = $state<string>('');
const selectedAgent = $derived(agents.find(a => a.id === selectedAgentId) ?? null);
// ── File browser ──────────────────────────────────────────────────────────
let currentPath = $state('/opt');
let dirEntries = $state<{ name: string; is_dir: boolean; has_compose: boolean }[]>([]);
let filePath = $state('');
let browseError = $state<string | null>(null);
let browseLoading = $state(false);
const breadcrumbs = $derived(() => {
const parts = currentPath.split('/').filter(Boolean);
const crumbs: { label: string; path: string }[] = [{ label: '/', path: '/' }];
let built = '';
for (const p of parts) {
built += '/' + p;
crumbs.push({ label: p, path: built });
}
return crumbs;
});
function entryFullPath(name: string): string {
return currentPath === '/' ? '/' + name : currentPath + '/' + name;
}
function isComposeName(name: string): boolean {
return name === 'docker-compose.yaml' || name === 'docker-compose.yml'
|| name === 'compose.yaml' || name === 'compose.yml';
}
async function browse(path: string) {
if (!selectedAgentId) return;
browseLoading = true;
browseError = null;
try {
const entries = await fsList(selectedAgentId, path);
// dirs first (α), then files (α)
dirEntries = entries.sort((a, b) => {
if (a.is_dir !== b.is_dir) return a.is_dir ? -1 : 1;
return a.name.localeCompare(b.name);
});
currentPath = path;
// auto-suggest compose file if present in this directory
const compose = entries.find(e => !e.is_dir && isComposeName(e.name));
if (compose) {
filePath = (path === '/' ? '' : path) + '/' + compose.name;
}
} catch (e: unknown) {
browseError = e instanceof Error ? e.message : String(e);
dirEntries = [];
} finally {
browseLoading = false;
}
}
async function selectFile(name: string) {
filePath = entryFullPath(name);
await openFile();
}
function navigateUp() {
if (currentPath === '/') return;
const parent = currentPath.substring(0, currentPath.lastIndexOf('/')) || '/';
browse(parent);
}
// ── Nouveau dossier ───────────────────────────────────────────────────────
let mkdirInputVisible = $state(false);
let mkdirName = $state('');
let mkdirPending = $state(false);
function showMkdirInput() {
mkdirName = '';
mkdirInputVisible = true;
}
function cancelMkdir() {
mkdirInputVisible = false;
mkdirName = '';
}
async function confirmMkdir() {
const name = mkdirName.trim();
if (!name || !selectedAgentId) return;
const fullPath = currentPath === '/' ? '/' + name : currentPath + '/' + name;
mkdirPending = true;
try {
await fsMkdir(selectedAgentId, fullPath);
mkdirInputVisible = false;
mkdirName = '';
await browse(currentPath);
showToast('Dossier créé', true);
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : String(e), false);
} finally {
mkdirPending = false;
}
}
function onMkdirKeydown(e: KeyboardEvent) {
if (e.key === 'Enter') confirmMkdir();
if (e.key === 'Escape') cancelMkdir();
}
async function openFile() {
if (!selectedAgentId || !filePath) return;
isLoading = true;
try {
// Try exact path first, then fallback alternatives
let content: string;
try {
content = await fsRead(selectedAgentId, filePath);
} catch {
// Try yml variant
const altPath = filePath.replace(/\.yaml$/, '.yml').replace(/\.yml$/, '.yaml');
try {
content = await fsRead(selectedAgentId, altPath);
filePath = altPath;
} catch {
throw new Error(`Fichier non trouvé : ${filePath}`);
}
}
setContent(content);
composeOutput = '';
showToast('Fichier chargé', true);
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : String(e), false);
} finally {
isLoading = false;
}
}
// ── CodeMirror ────────────────────────────────────────────────────────────
let editorEl = $state<HTMLDivElement | null>(null);
let view: EditorView | null = null;
let isLoading = $state(false);
let actionPending = $state<string | null>(null);
let composeOutput = $state('');
onMount(async () => {
// Load agents
try {
const all = await fetchAgents();
agents = all.filter(a => a.online);
if (agents.length > 0) {
selectedAgentId = agents[0].id;
browse(currentPath);
}
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : String(e), false);
}
// Init CodeMirror
view = new EditorView({
state: EditorState.create({
doc: '',
extensions: [
lineNumbers(),
yaml(),
oneDark,
indentUnit.of(' '),
bracketMatching(),
keymap.of([...defaultKeymap, indentWithTab]),
EditorView.lineWrapping,
EditorView.theme({
'&': { height: '100%', minHeight: '500px' },
'.cm-scroller': { overflow: 'auto', fontFamily: '"JetBrains Mono", "Fira Code", ui-monospace, monospace', fontSize: '13px' },
}),
],
}),
parent: editorEl!,
});
});
onDestroy(() => view?.destroy());
function getContent(): string {
return view?.state.doc.toString() ?? '';
}
function setContent(text: string) {
if (!view) return;
view.dispatch({
changes: { from: 0, to: view.state.doc.length, insert: text },
});
}
// ── Agent change ──────────────────────────────────────────────────────────
function onAgentChange() {
dirEntries = [];
currentPath = '/opt';
filePath = '';
composeOutput = '';
if (selectedAgentId) browse('/opt');
}
// ── Actions ───────────────────────────────────────────────────────────────
async function save() {
if (!selectedAgentId || !filePath) {
showToast('Sélectionnez un agent et un chemin de fichier', false);
return;
}
actionPending = 'save';
try {
await fsWrite(selectedAgentId, filePath, getContent());
showToast('Fichier sauvegardé', true);
} catch (e: unknown) {
showToast(e instanceof Error ? e.message : String(e), false);
} finally {
actionPending = null;
}
}
async function runCompose(action: 'up' | 'down' | 'pull') {
if (!selectedAgentId || !filePath) {
showToast('Sélectionnez un agent et un chemin de fichier', false);
return;
}
const dir = filePath.substring(0, filePath.lastIndexOf('/')) || '/';
actionPending = action;
composeOutput = '';
try {
const result = await composeAction(selectedAgentId, dir, action);
composeOutput = result.output;
showToast(result.ok ? `compose ${action} terminé` : `compose ${action} a échoué`, result.ok);
} catch (e: unknown) {
const msg = e instanceof Error ? e.message : String(e);
composeOutput = msg;
showToast(msg, false);
} finally {
actionPending = null;
}
}
</script>
<svelte:head>
<title>Compose — Containarr</title>
</svelte:head>
<!-- Toast -->
{#if toast}
<div class="fixed top-4 right-4 z-50 flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm
font-medium shadow-2xl border transition-all
{toast.ok
? 'bg-abyss-800 border-signal-green/30 text-signal-green'
: 'bg-abyss-800 border-signal-red/30 text-signal-red'}">
<span class="w-1.5 h-1.5 rounded-full {toast.ok ? 'bg-signal-green' : 'bg-signal-red'}"></span>
{toast.msg}
</div>
{/if}
<div class="min-h-screen bg-abyss-900 bg-grid-faint bg-grid text-slate-200 flex flex-col">
<!-- Header -->
<header class="glass sticky top-0 z-40 px-5 py-3 flex items-center gap-3 shrink-0">
<div class="flex items-center gap-2.5">
<img src="/icon-192.png" alt="Containarr" class="w-6 h-6 rounded-md" />
<span class="font-semibold text-slate-100 tracking-tight">Containarr</span>
</div>
<div class="ml-auto flex items-center gap-1">
<a href="/" class="nav-btn" title="Dashboard">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>
</a>
<a href="/admin" class="nav-btn" title="Administration">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</a>
<button onclick={logout} class="nav-btn" title="Déconnexion">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h6a2 2 0 012 2v1" />
</svg>
</button>
</div>
</header>
<!-- Page title bar -->
<div class="border-b border-white/[0.06] bg-abyss-900/80 px-4 md:px-6 py-3 shrink-0">
<div class="max-w-screen-2xl mx-auto flex items-center gap-2">
<svg class="w-4 h-4 text-cyan-400 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span class="text-sm font-medium text-slate-300">Éditeur Compose</span>
{#if selectedAgent}
<span class="text-xs text-slate-600 ml-1">— {selectedAgent.alias || selectedAgent.hostname}</span>
{/if}
</div>
</div>
<!-- Main content: sidebar + editor -->
<div class="flex-1 flex flex-col md:flex-row overflow-hidden max-w-screen-2xl w-full mx-auto p-4 md:p-6 gap-4">
<!-- ── Sidebar ─────────────────────────────────────────────────────────── -->
<aside class="w-full md:w-72 shrink-0 flex flex-col gap-3">
<!-- Agent selector -->
<div class="card p-3 flex flex-col gap-2">
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider" for="agent-select">Agent</label>
{#if agents.length === 0}
<p class="text-xs text-slate-600 italic">Aucun agent en ligne</p>
{:else}
<select
id="agent-select"
bind:value={selectedAgentId}
onchange={onAgentChange}
class="w-full bg-abyss-800 border border-white/[0.08] rounded-lg px-3 py-2
text-sm text-slate-200 focus:outline-none focus:border-cyan-400/40
focus:ring-1 focus:ring-cyan-400/20 transition-colors"
>
{#each agents as agent (agent.id)}
<option value={agent.id}>{agent.alias || agent.hostname}</option>
{/each}
</select>
{/if}
</div>
<!-- Directory browser -->
<div class="card p-3 flex flex-col gap-2 flex-1 min-h-0">
<div class="flex items-center justify-between">
<span class="text-xs font-medium text-slate-500 uppercase tracking-wider">Navigateur</span>
{#if browseLoading}
<div class="w-3.5 h-3.5 border border-cyan-400/40 border-t-cyan-400 rounded-full animate-spin"></div>
{/if}
</div>
<!-- Breadcrumb -->
<div class="flex flex-wrap items-center gap-0.5 text-xs font-mono">
{#each breadcrumbs() as crumb, i}
{#if i > 1}
<span class="text-slate-700">/</span>
{/if}
<button
onclick={() => browse(crumb.path)}
class="text-cyan-400/70 hover:text-cyan-400 transition-colors px-0.5 rounded
{i === breadcrumbs().length - 1 ? 'text-cyan-400 font-semibold' : ''}"
>
{crumb.label}
</button>
{/each}
</div>
<!-- Up button -->
<button
onclick={navigateUp}
disabled={currentPath === '/'}
class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium
bg-white/[0.04] hover:bg-white/[0.08] text-slate-400 border border-white/[0.06]
disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
Remonter
</button>
<!-- Nouveau dossier -->
{#if mkdirInputVisible}
<div class="flex items-center gap-1.5">
<input
type="text"
bind:value={mkdirName}
onkeydown={onMkdirKeydown}
placeholder="nom-du-dossier"
disabled={mkdirPending}
class="flex-1 min-w-0 bg-abyss-800 border border-cyan-400/30 rounded-md px-2 py-1
text-xs font-mono text-slate-200 placeholder-slate-600
focus:outline-none focus:border-cyan-400/60 focus:ring-1 focus:ring-cyan-400/20
disabled:opacity-50 transition-colors"
/>
<button
onclick={confirmMkdir}
disabled={mkdirPending || !mkdirName.trim()}
title="Valider"
class="flex items-center justify-center w-6 h-6 rounded text-signal-green
hover:bg-signal-green/10 disabled:opacity-40 disabled:cursor-not-allowed
transition-colors shrink-0"
>
{#if mkdirPending}
<div class="w-3 h-3 border border-signal-green/40 border-t-signal-green rounded-full animate-spin"></div>
{:else}
✓
{/if}
</button>
<button
onclick={cancelMkdir}
title="Annuler"
class="flex items-center justify-center w-6 h-6 rounded text-slate-500
hover:text-slate-300 hover:bg-white/[0.06] transition-colors shrink-0"
>
✕
</button>
</div>
{:else}
<button
onclick={showMkdirInput}
disabled={!selectedAgentId}
title="Nouveau dossier"
class="flex items-center gap-1.5 px-2 py-1 rounded text-xs
text-slate-400 hover:text-slate-200 hover:bg-white/[0.05]
disabled:opacity-30 disabled:cursor-not-allowed transition-colors self-start"
>
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M9 13h6m-3-3v6m-9 1V7a2 2 0 012-2h6l2 2h6a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
</svg>
Nouveau dossier
</button>
{/if}
<!-- Error -->
{#if browseError}
<p class="text-xs text-signal-red/80 font-mono break-all">{browseError}</p>
{/if}
<!-- File browser list -->
<div class="flex-1 overflow-y-auto min-h-[120px] max-h-72 space-y-0.5">
{#if dirEntries.length === 0 && !browseLoading && !browseError}
<p class="text-xs text-slate-600 italic py-2 px-1">Dossier vide</p>
{/if}
{#each dirEntries as entry (entry.name)}
{#if entry.is_dir}
<!-- Directory: navigate into -->
<button
onclick={() => browse(entryFullPath(entry.name))}
class="flex items-center gap-2 w-full text-left px-2 py-1.5 rounded-md text-xs
text-slate-300 hover:text-slate-100 hover:bg-white/[0.06] transition-colors font-mono"
>
<svg class="w-3.5 h-3.5 shrink-0 {entry.has_compose ? 'text-cyan-400' : 'text-cyan-400/50'}"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M3 7a2 2 0 012-2h4l2 2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />
</svg>
<span class="truncate flex-1">{entry.name}</span>
{#if entry.has_compose}
<span class="shrink-0 text-[10px] px-1 py-0.5 rounded bg-cyan-400/15
text-cyan-400 border border-cyan-400/25 leading-none">compose</span>
{/if}
</button>
{:else}
<!-- File: select and open -->
<button
onclick={() => selectFile(entry.name)}
disabled={isLoading}
class="flex items-center gap-2 w-full text-left px-2 py-1.5 rounded-md text-xs
transition-colors font-mono disabled:opacity-40
{isComposeName(entry.name)
? 'text-cyan-300 hover:text-cyan-100 hover:bg-cyan-400/[0.06]'
: 'text-slate-400 hover:text-slate-200 hover:bg-white/[0.06]'}"
>
<svg class="w-3.5 h-3.5 shrink-0 {isComposeName(entry.name) ? 'text-cyan-400' : 'text-slate-600'}"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
<span class="truncate flex-1">{entry.name}</span>
</button>
{/if}
{/each}
</div>
<!-- Open button -->
<button
onclick={openFile}
disabled={!selectedAgentId || !filePath || isLoading}
class="flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium
bg-cyan-400/10 hover:bg-cyan-400/20 text-cyan-400 border border-cyan-400/25
disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
>
{#if isLoading}
<div class="w-3 h-3 border border-cyan-400/40 border-t-cyan-400 rounded-full animate-spin"></div>
Chargement…
{:else}
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
</svg>
Ouvrir
{/if}
</button>
</div>
<!-- File path input -->
<div class="card p-3 flex flex-col gap-2">
<label class="text-xs font-medium text-slate-500 uppercase tracking-wider" for="file-path">Chemin du fichier</label>
<input
id="file-path"
type="text"
bind:value={filePath}
placeholder="/opt/stacks/nginx/docker-compose.yaml"
class="w-full bg-abyss-800 border border-white/[0.08] rounded-lg px-3 py-2
text-xs font-mono text-slate-200 placeholder-slate-700
focus:outline-none focus:border-cyan-400/40 focus:ring-1 focus:ring-cyan-400/20
transition-colors"
/>
</div>
</aside>
<!-- ── Editor area ─────────────────────────────────────────────────────── -->
<div class="flex-1 flex flex-col gap-3 min-w-0">
<!-- CodeMirror editor -->
<div class="card flex-1 overflow-hidden flex flex-col min-h-[500px]">
<div
bind:this={editorEl}
class="flex-1 overflow-hidden [&_.cm-editor]:h-full [&_.cm-editor]:outline-none
[&_.cm-focused]:outline-none"
></div>
</div>
<!-- Action bar -->
<div class="flex flex-wrap items-center gap-2">
<!-- Save -->
<button
onclick={save}
disabled={actionPending !== null}
class="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium
bg-signal-cyan/10 hover:bg-signal-cyan/20 text-signal-cyan border border-signal-cyan/25
disabled:opacity-40 disabled:cursor-not-allowed transition-all"
>
{#if actionPending === 'save'}
<div class="w-3.5 h-3.5 border border-signal-cyan/40 border-t-signal-cyan rounded-full animate-spin"></div>
{:else}
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4" />
</svg>
{/if}
Sauvegarder
</button>
<!-- Up -->
<button
onclick={() => runCompose('up')}
disabled={actionPending !== null}
class="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium
bg-signal-green/10 hover:bg-signal-green/20 text-signal-green border border-signal-green/25
disabled:opacity-40 disabled:cursor-not-allowed transition-all"
>
{#if actionPending === 'up'}
<div class="w-3.5 h-3.5 border border-signal-green/40 border-t-signal-green rounded-full animate-spin"></div>
{:else}
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M5 10l7-7m0 0l7 7m-7-7v18" />
</svg>
{/if}
Up
</button>
<!-- Down -->
<button
onclick={() => runCompose('down')}
disabled={actionPending !== null}
class="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium
bg-white/[0.05] hover:bg-signal-red/10 text-signal-red border border-signal-red/20
disabled:opacity-40 disabled:cursor-not-allowed transition-all"
>
{#if actionPending === 'down'}
<div class="w-3.5 h-3.5 border border-signal-red/40 border-t-signal-red rounded-full animate-spin"></div>
{:else}
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
</svg>
{/if}
Down
</button>
<!-- Pull -->
<button
onclick={() => runCompose('pull')}
disabled={actionPending !== null}
class="flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-medium
bg-white/[0.05] hover:bg-white/[0.09] text-slate-400 border border-white/[0.08]
disabled:opacity-40 disabled:cursor-not-allowed transition-all"
>
{#if actionPending === 'pull'}
<div class="w-3.5 h-3.5 border border-slate-500/40 border-t-slate-400 rounded-full animate-spin"></div>
{:else}
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
{/if}
Pull
</button>
{#if actionPending && actionPending !== 'save'}
<span class="text-xs text-slate-500 ml-1">Exécution de compose {actionPending}…</span>
{/if}
</div>
<!-- Output area -->
{#if composeOutput}
<div class="card p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-medium text-slate-500 uppercase tracking-wider">Sortie</span>
<button
onclick={() => (composeOutput = '')}
class="text-xs text-slate-600 hover:text-slate-400 transition-colors"
>
Effacer
</button>
</div>
<pre class="text-xs font-mono text-slate-300 overflow-y-auto max-h-48 leading-relaxed
bg-abyss-950 rounded-lg p-3 border border-white/[0.04] whitespace-pre-wrap break-all">{composeOutput}</pre>
</div>
{/if}
</div>
</div>
</div>