Загрузка...
Тёмная адаптивная панель для создания и запуска DevOps плейбуков. Редактор кода, коллаборация, AI-чат, статистика, управление параметрами.
<div class="flex justify-center items-center h-screen">
<div
class="overflow-hidden w-full border-white/10 border rounded-2xl relative shadow-2xl backdrop-blur-xl max-w-7xl mt-0 mb-0">
<!-- Topbar -->
<div class="flex border-white/10 border-b pt-2 pr-3 pb-2 pl-3 items-center justify-between">
<div class="flex items-center gap-2">
<span class="h-3 w-3 rounded-full bg-red-500/80"></span>
<span class="h-3 w-3 rounded-full bg-yellow-400/80"></span>
<span class="h-3 w-3 rounded-full bg-green-500/80"></span>
</div>
<div class="flex items-center gap-2"></div>
</div>
<!-- Platform body -->
<div class="grid grid-cols-1 md:grid-cols-12">
<!-- Left panel - Campaigns -->
<aside class="hidden md:block md:col-span-3 bg-black/30 border-white/10 border-r pt-3 pr-3 pb-3 pl-3">
<div class="mb-3 flex items-center justify-between">
<div
class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-slate-300 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
<path
d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
class=""></path>
<polyline points="3.29 7 12 12 20.71 7" class=""></polyline>
<line x1="12" x2="12" y1="22" y2="12" class=""></line>
</svg>
Playbooks
</div>
<button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M5 12h14" class=""></path>
<path d="M12 5v14" class=""></path>
</svg>
</button>
</div>
<div class="flex flex-col text-slate-300 h-[520px] space-y-4">
<!-- Playbook Filters -->
<div class="flex gap-1 mb-3">
<button class="px-2 py-1 text-xs bg-white text-neutral-900 rounded font-sans font-medium">
Active
</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-sans">
Draft
</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-sans">
Archive
</button>
</div>
<!-- Active Playbooks List -->
<div class="bg-white/5 rounded-lg p-2 flex-1">
<div class="text-xs text-slate-400 mb-2 font-sans">
Active Playbooks
</div>
<ul class="space-y-1 text-xs">
<li class="flex items-center gap-2 rounded-md bg-white/10 px-2 py-1 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-white">
<circle cx="12" cy="12" r="10" class=""></circle>
<polyline points="12 6 12 12 16 14" class=""></polyline>
</svg>
DB Failover Script
<div class="ml-auto flex items-center gap-1">
<span class="text-[9px] text-white/70">
Ready
</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-cyan-400">
<path
d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
class=""></path>
<path d="M9 18h6" class=""></path>
<path d="M10 22h4" class=""></path>
</svg>
Scale Workers
<div class="ml-auto flex items-center gap-1">
<span class="text-[9px] text-white/60">
Ready
</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-white/80">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" class=""></path>
</svg>
Restart Service
<div class="ml-auto flex items-center gap-1">
<span class="text-[9px] text-white/60">
Ready
</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-purple-400">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
</svg>
Cache Warmup
<div class="ml-auto flex items-center gap-1">
<span class="text-[9px] text-white/60">Ready</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-sans opacity-60">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-slate-500">
<rect width="7" height="9" x="3" y="3" rx="1" class=""></rect>
<rect width="7" height="5" x="14" y="3" rx="1" class=""></rect>
<rect width="7" height="9" x="14" y="12" rx="1" class=""></rect>
<rect width="7" height="5" x="3" y="16" rx="1" class=""></rect>
</svg>
Deploy Rollback
<div class="ml-auto">
<span class="text-xs text-slate-500 font-sans">
Paused
</span>
</div>
</li>
<li class="flex items-center gap-2 rounded-md px-2 py-1 hover:bg-white/5 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-3.5 w-3.5 text-red-400">
<path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
class=""></path>
<line x1="12" x2="12" y1="9" y2="13" class=""></line>
<line x1="12" x2="12.01" y1="17" y2="17" class=""></line>
</svg>
CPU Alert Fix
<div class="ml-auto flex items-center gap-1">
<span class="text-[9px] text-orange-400">
Ready
</span>
</div>
</li>
</ul>
</div>
<!-- Performance Stats -->
<div class="bg-white/5 rounded-lg p-2 mt-3">
<div class="mb-1 flex items-center justify-between">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="h-4 w-4 text-white">
<line x1="12" y1="20" x2="12" y2="10" class=""></line>
<line x1="18" y1="20" x2="18" y2="4" class=""></line>
<line x1="6" y1="20" x2="6" y2="16" class=""></line>
</svg>
<span class="text-xs font-medium font-sans">
Execution Stats
</span>
</div>
<div class="flex gap-1">
<button class="p-1 rounded border border-white/10 bg-white/5 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-slate-400">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" class=""></path>
<polyline points="7 10 12 15 17 10" class=""></polyline>
<line x1="12" x2="12" y1="15" y2="3" class=""></line>
</svg>
</button>
</div>
</div>
<div class="space-y-1">
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-3 h-2 rounded-sm bg-white"></div>
<span class="text-slate-300 font-sans text-[10px]">
Success Rate
</span>
<div class="ml-auto text-[10px] text-white/70">
98.5%
</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-4 h-2 bg-white/80 rounded-sm"></div>
<span class="text-slate-300 font-sans text-[10px]">
Total Runs
</span>
<div class="ml-auto text-[10px] text-white/70">
1,247
</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-5 h-2 bg-white/60 rounded-sm"></div>
<span class="text-slate-300 font-sans text-[10px]">
Avg Duration
</span>
<div class="ml-auto text-[10px] text-white/60">
2.3s
</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-3 h-2 bg-cyan-400 rounded-sm"></div>
<span class="text-slate-300 font-sans text-[10px]">
Active Users
</span>
<div class="ml-auto text-[10px] text-cyan-400">
12
</div>
</div>
<div class="flex items-center gap-2 text-xs hover:bg-white/5 p-1 rounded">
<div class="w-4 h-2 bg-orange-400 rounded-sm"></div>
<span class="text-slate-300 font-sans text-[10px]">
Last Run
</span>
<div class="ml-auto text-[10px] text-slate-400">
2m ago
</div>
</div>
</div>
</div>
</div>
</aside>
<!-- Center - Script Editor -->
<main class="md:col-span-6 bg-black/20 relative">
<div
class="flex gap-2 text-xs text-slate-300 border-white/10 border-b pt-2 pr-3 pb-2 pl-3 gap-x-2 gap-y-2 items-center">
<span class="font-sans">recover-workers.playbook</span>
<div class="text-slate-500">•</div>
<span class="font-sans text-slate-400">Live editing</span>
<div class="ml-auto flex items-center gap-1">
<div class="text-xs text-slate-400 font-sans">
Saved 1m ago
</div>
<div class="h-4 w-px bg-white/10 mx-2"></div>
<button class="rounded-md border border-white/10 bg-white/5 p-1 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4">
<path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8" class=""></path>
<path d="M21 3v5h-5" class=""></path>
</svg>
</button>
</div>
</div>
<!-- Editor Toolbar -->
<div
class="flex flex-col sm:flex-row gap-2 bg-black/10 border-white/10 border-b pt-2 pr-3 pb-2 pl-3 gap-x-2 gap-y-2 items-center justify-between">
<div class="flex items-center gap-2 w-full sm:w-auto">
<button class="p-1 rounded border border-white/10 bg-white text-neutral-900 hover:bg-zinc-100">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<polyline points="9 11 12 14 22 4" class=""></polyline>
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" class=""></path>
</svg>
</button>
<button class="p-1 rounded border border-white/10 bg-white/5 text-slate-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<polygon points="5 3 19 12 5 21 5 3" class=""></polygon>
</svg>
</button>
<div class="h-4 w-px bg-white/10"></div>
<div class="flex items-center gap-1 flex-1">
<span class="text-xs text-slate-400 font-sans">Version:</span>
<button class="inline-flex items-center justify-center px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-300 hover:bg-white/10 font-sans whitespace-nowrap">
v1.2.1
</button>
<button class="sm:hidden p-1 rounded border border-white/10 bg-white/5 text-slate-300 hover:bg-white/10 ml-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<line x1="4" x2="20" y1="12" y2="12" class=""></line>
<line x1="4" x2="20" y1="6" y2="6" class=""></line>
<line x1="4" x2="20" y1="18" y2="18" class=""></line>
</svg>
</button>
</div>
</div>
<div class="hidden sm:flex items-center gap-2">
<button class="px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-300 hover:bg-white/10 font-sans">
Script
</button>
<button class="px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-400 hover:bg-white/10 font-sans">
Params
</button>
<button class="px-2 py-1 rounded border border-white/10 bg-white/5 text-xs text-slate-400 hover:bg-white/10 font-sans">
History
</button>
</div>
</div>
<div class="sm:p-6 pt-4 pr-4 pb-4 pl-4">
<div
class="overflow-hidden min-h-[400px] grid grid-rows-[auto,1fr,auto,auto] sm:min-h-[450px] sm:pt-0 sm:pb-0 sm:pl-0 sm:pr-0 border-0 rounded-none ring-0 pt-0 pr-0 pb-0 pl-0 gap-x-4 gap-y-4">
<!-- Row 1: Live Collaborators -->
<div class="grid grid-cols-2 gap-3">
<div class="xl:bg-black/10 bg-black/40 border-white/10 border rounded-xl px-4 py-4 backdrop-blur">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-400 font-sans">
Active Editors
</span>
</div>
<div class="flex items-center gap-2">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/4c9aa348-4474-47a8-8f1e-3fe52ac8d2b9_320w.webp" class="w-8 h-8 rounded-full ring-white/20 ring-2 object-cover" alt="user">
<img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/ca687bcc-f3d6-4ed6-9efe-e0fd4cbe69a9_320w.webp" class="h-8 w-8 rounded-full ring-2 ring-white/20 -ml-3 object-cover" alt="user">
<div
class="flex items-center justify-center h-8 w-8 rounded-full bg-white/10 ring-2 ring-white/20 -ml-3">
<span class="text-xs text-white/80">+1</span>
</div>
</div>
<div class="text-xs mt-2 font-sans text-white/70">
3 people editing now
</div>
</div>
<div class="xl:bg-black/10 bg-black/40 border-white/10 border rounded-xl px-4 py-4 backdrop-blur">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-400 font-sans">
Last Execution
</span>
</div>
<div class="text-2xl font-medium text-white font-sans">
2.4s
</div>
<div class="text-xs mt-1 font-sans text-white/70">
Success • 2 minutes ago
</div>
</div>
</div>
<!-- Row 2: Code Editor (grows) -->
<div class="min-h-0 xl:bg-black/10 bg-black/40 border-white/10 border rounded-xl px-4 py-4 backdrop-blur">
<div class="flex items-center justify-between mb-3">
<h3 class="text-sm font-medium text-white font-sans">
Playbook Script
</h3>
<span class="text-xs text-slate-400 font-sans">
TypeScript
</span>
</div>
<div class="relative bg-black/60 rounded-lg p-4 font-mono text-sm text-white/90 overflow-auto"
style="max-height: 250px;">
<pre class="whitespace-pre-wrap">// shared live script
const s = Runlyx.Script.open("recover-workers");
s.apply("restartWorkers()", { user: "jordan" });
s.comment(2, "Check CPU before restart");
s.save("v1.2.1", "Add safety check");</pre>
</div>
<div class="flex justify-between mt-3 text-[10px] text-slate-500 font-sans">
<span>Line 1-5</span>
<span class="text-white/60">5 lines • No errors</span>
</div>
</div>
<!-- Row 3: Chat / Text Area -->
<div class="xl:bg-black/10 bg-black/40 border-white/10 border rounded-xl px-4 py-4 backdrop-blur">
<div class="flex items-center justify-between mb-3">
<h3 class="text-sm font-medium text-white font-sans flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" class=""></path>
</svg>
AI Assistant Chat
</h3>
<span class="text-xs text-slate-400 font-sans">
Ask questions
</span>
</div>
<div class="relative">
<textarea placeholder="Ask AI to help with your script, explain code, or suggest improvements..." class="w-full bg-black/60 border border-white/10 rounded-lg p-3 font-sans text-sm text-white/90 placeholder-slate-500 focus:outline-none focus:border-white/20 focus:ring-1 focus:ring-white/20 resize-none" rows="3"></textarea>
<button class="absolute bottom-3 right-3 p-2 rounded-lg bg-white text-neutral-900 hover:bg-zinc-100 transition">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="">
<line x1="22" x2="11" y1="2" y2="13" class=""></line>
<polygon points="22 2 15 22 11 13 2 9 22 2" class=""></polygon>
</svg>
</button>
</div>
<div class="flex items-center gap-2 mt-3 text-xs text-slate-500 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" class=""></path>
</svg>
<span class="text-white/60">AI-powered suggestions</span>
</div>
</div>
<!-- Row 4: Action Buttons -->
<div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
<button class="xl:bg-black/10 text-center bg-white/10 border-white/10 border rounded-lg pt-2 pr-2 pb-2 pl-2 backdrop-blur hover:bg-white/20 transition">
<div class="text-sm font-medium text-white font-sans">
Run
</div>
<div class="text-[10px] text-slate-400 font-sans">
Execute
</div>
</button>
<button class="xl:bg-black/10 text-center bg-black/40 border-white/10 border rounded-lg pt-2 pr-2 pb-2 pl-2 backdrop-blur hover:bg-white/10 transition">
<div class="text-sm font-medium text-white font-sans">
Test
</div>
<div class="text-[10px] text-slate-400 font-sans">
Dry Run
</div>
</button>
<button class="xl:bg-black/10 text-center bg-black/40 border-white/10 border rounded-lg pt-2 pr-2 pb-2 pl-2 backdrop-blur hover:bg-white/10 transition">
<div class="text-sm font-medium text-white font-sans">
Share
</div>
<div class="text-[10px] text-slate-400 font-sans">
Collaborate
</div>
</button>
<button class="xl:bg-black/10 text-center bg-black/40 border-white/10 border rounded-lg pt-2 pr-2 pb-2 pl-2 backdrop-blur hover:bg-white/10 transition">
<div class="text-sm font-medium text-white font-sans">
Export
</div>
<div class="text-[10px] text-slate-400 font-sans">
Download
</div>
</button>
</div>
</div>
</div>
</main>
<!-- Right panel - Execution Settings -->
<aside class="hidden md:block md:col-span-3 bg-black/30 border-white/10 border-l pt-3 pr-3 pb-3 pl-3">
<div class="mb-3 flex items-center justify-between">
<div
class="inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 px-2 py-1 text-xs font-medium text-slate-300 font-sans">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5">
<path
d="M12.22 2h-.44a2 v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
class=""></path>
<circle cx="12" cy="12" r="3" class=""></circle>
</svg>
Execution
</div>
<div class="flex gap-1">
<button class="rounded-md border border-white/10 bg-white/5 p-1 text-slate-300 hover:bg-white/10">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3">
<circle cx="12" cy="12" r="1" class=""></circle>
<circle cx="19" cy="12" r="1" class=""></circle>
<circle cx="5" cy="12" r="1" class=""></circle>
</svg>
</button>
</div>
</div>
<!-- Settings Tabs -->
<div class="flex gap-1 mb-3">
<button class="px-2 py-1 text-xs bg-white text-neutral-900 rounded font-sans font-medium">
Parameters
</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-sans">
Safety
</button>
<button class="px-2 py-1 text-xs bg-white/5 text-slate-400 hover:bg-white/10 rounded font-sans">
Triggers
</button>
</div>
<div class="space-y-3 h-[480px] overflow-y-auto">
<!-- Script Info -->
<div class="bg-white/5 rounded-lg p-3">
<div class="flex items-center justify-between mb-2">
<span class="text-xs text-slate-300 font-sans">
Active Script
</span>
<span class="text-xs text-white font-sans">
recover-workers
</span>
</div>
<div class="text-[10px] text-slate-500 space-y-1 font-sans">
<div class="flex justify-between">
<span>Status:</span>
<span class="text-white/70">Ready</span>
</div>
<div class="flex justify-between">
<span>Version:</span>
<span class="text-white/70">v1.2.1</span>
</div>
<div class="flex justify-between">
<span>Last Run:</span>
<span class="text-white/70">2m ago</span>
</div>
</div>
</div>
<!-- Input Parameters -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 text-xs">
<span class="text-slate-300 font-sans">
Input Parameters
</span>
</div>
<div class="space-y-2 text-[10px]">
<div class="">
<div class="text-slate-400 mb-1 font-sans">
Service Name
</div>
<input type="text" value="worker" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-300 font-sans">
</div>
<div class="">
<div class="text-slate-400 mb-1 font-sans">
Region
</div>
<select class="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-300 font-sans">
<option>us-east-1</option>
<option>us-west-2</option>
<option>eu-west-1</option>
<option>ap-south-1</option>
</select>
</div>
<div class="">
<div class="text-slate-400 mb-1 font-sans">
Scale Factor
</div>
<input type="number" value="3" class="w-full bg-white/5 border border-white/10 rounded px-2 py-1 text-slate-300 font-sans">
</div>
</div>
</div>
<!-- Safety Checks -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-sans">Safety Checks</span>
<button class="text-[10px] text-white/70 hover:text-white font-sans">
Configure
</button>
</div>
<div class="space-y-2 text-[10px]">
<div class="flex justify-between">
<span class="text-slate-400 font-sans">
Dry Run:
</span>
<span class="text-white/70 font-sans">
Enabled
</span>
</div>
<div class="flex justify-between">
<span class="text-slate-400 font-sans">
Approvals:
</span>
<span class="text-white/70 font-sans">
Required (2)
</span>
</div>
<div class="flex justify-between">
<span class="text-slate-400 font-sans">
Blast Radius:
</span>
<span class="text-white/70 font-sans">
Limited
</span>
</div>
</div>
</div>
<!-- Execution History -->
<div class="bg-white/5 rounded-lg p-3 space-y-3">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-sans">
Recent Executions
</span>
<span class="rounded-md px-2 py-0.5 text-[10px] font-sans bg-white/10 text-white/70">
24h
</span>
</div>
<div class="space-y-2">
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-300 font-sans">
Today
</span>
<span class="text-slate-400 font-sans text-[10px]">
8 runs
</span>
</div>
<div class="h-2 bg-white/10 rounded-full overflow-hidden">
<div class="h-2 bg-white rounded-full" style="width: 87%"></div>
</div>
</div>
<div class="space-y-1">
<div class="flex items-center justify-between text-xs">
<span class="text-slate-300 font-sans">
This Week
</span>
<span class="text-slate-400 font-sans text-[10px]">
42 runs
</span>
</div>
<div class="h-2 bg-white/10 rounded-full overflow-hidden">
<div class="h-2 bg-gradient-to-r from-white to-white/60 rounded-full" style="width: 94%"></div>
</div>
</div>
</div>
</div>
<!-- Observability Alerts -->
<div class="bg-white/5 rounded-lg p-3 space-y-2">
<div class="mb-2 flex items-center justify-between text-xs">
<span class="text-slate-300 font-sans">Connected Alerts</span>
<span class="rounded-md bg-white/5 px-2 py-0.5 text-[10px] text-slate-400 font-sans">
2
</span>
</div>
<div class="space-y-2 text-[11px]">
<div class="flex items-center gap-2 p-2 rounded border bg-white/10 border-white/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-3 h-3 flex-shrink-0 text-white">
<polyline points="20 6 9 17 4 12" class=""></polyline>
</svg>
<span class="text-slate-300 font-sans text-[10px]">
PagerDuty: CPU High trigger
</span>
</div>
<div class="flex items-center gap-2 p-2 bg-white/10 rounded border border-white/20">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="w-3 h-3 text-white flex-shrink-0">
<circle cx="12" cy="12" r="10" class=""></circle>
<line x1="12" x2="12" y1="8" y2="12" class=""></line>
<line x1="12" x2="12.01" y1="16" y2="16" class=""></line>
</svg>
<span class="text-slate-300 font-sans text-[10px]">
Grafana: Workers degraded
</span>
</div>
</div>
</div>
<!-- Quick Actions -->
<div class="bg-white/5 rounded-lg p-3 space-y-2">
<div class="mb-2 text-xs">
<span class="text-slate-300 font-sans">
Quick Actions
</span>
</div>
<div class="space-y-2 text-[10px]">
<div class="flex items-center justify-between">
<span class="text-slate-400 font-sans">
Auto-approve
</span>
<button class="w-8 h-4 bg-white/10 rounded-full relative">
<div class="w-3 h-3 bg-white rounded-full absolute left-0.5 top-0.5 transition-transform"></div>
</button>
</div>
<div class="flex items-center justify-between">
<span class="text-slate-400 font-sans">
Slack
</span>
<button class="w-8 h-4 bg-white rounded-full relative">
<div class="w-3 h-3 bg-neutral-900 rounded-full absolute right-0.5 top-0.5 transition-transform"></div>
</button>
</div>
<div class="flex items-center justify-between">
<span class="text-slate-400 font-sans">
Halt on error
</span>
<button class="w-8 h-4 bg-white rounded-full relative">
<div class="w-3 h-3 bg-neutral-900 rounded-full absolute right-0.5 top-0.5 transition-transform"></div>
</button>
</div>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="mt-4 flex gap-2">
<button class="flex-1 hover:bg-zinc-100 text-xs font-medium text-neutral-900 bg-white rounded pt-2 pr-3 pb-2 pl-3">
Run Script
</button>
<button class="px-3 py-2 bg-white/5 text-slate-300 rounded text-xs font-medium border border-white/10 hover:bg-white/10 font-sans">
Test
</button>
</div>
</aside>
</div>
</div>