Move all three skills into skills/; add root README; fix paths

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
2026-10-16 17:04:38 +05:30
1 parent 312742cfef
commit d95e5d452d
@@ -0,0 +1,43 @@
+import { useEffect, useRef } from 'react'
+import { useStore } from '../store'
+
+const LOG_COLOUR = { info: 'text-[#7fc4f0]', success: 'text-[#5fe0a0]', warn: 'text-[#f5c563]', error: 'text-[#f68c82]' }
+
+export function RunPanel() {
+  const { step, log } = useStore()
+  const active = !step ? -1 : step.pct >= 100 ? STEPS.length : STEPS.indexOf(step.label)
+  const logBox = useRef<HTMLDivElement>(null)
+  useEffect(() => { logBox.current?.scrollTo(0, logBox.current.scrollHeight) }, [log.length])
+
+  return (
+    <div className="card">
+      <div className="card-title">Run automation</div>
+      <div className="mb-2 flex gap-3 text-[13px] font-bold">
+        <span>{step?.label ?? 'Waiting to start'}</span>
+        <span className="ml-auto text-accent">{step?.pct ?? 0}%</span>
+      </div>
+      <div className="mb-4 h-2 overflow-hidden rounded-lg bg-glass-strong">
+        <div className="h-full transition-[width] duration-500" style={{ width: `${step?.pct ?? 0}%`, background: 'var(--progress-bg)' }} />
+      </div>
+      <ol aria-label="Steps">
+        {STEPS.map((s, i) => {
+          const c = i < active ? 'done' : i === active ? 'active' : 'pending'
+          return (
+            <li key={s} aria-current={c === 'active' ? 'step' : undefined}
+              className={`mb-1.5 flex items-center gap-3 rounded-[10px] px-3 py-2.5 text-[13px] font-semibold ${c === 'done' ? 'bg-ok-bg text-ok' : c === 'active' ? 'bg-warn-bg text-warn' : 'opacity-50'}`}>
+              <span className={`flex h-[22px] w-[22px] items-center justify-center rounded-full text-[11px] ${c === 'done' ? 'bg-ok text-white' : c === 'active' ? 'bg-warn text-white' : 'bg-glass-strong'}`}>
+                {c === 'done' ? '✓' : i + 1}
+              </span>
+              {s}
+            </li>
+          )
+        })}
+      </ol>
+      {/* OPTIONAL: checkpoint tracker goes here */}
+      <div ref={logBox} role="log" aria-label="Run log"
+        className="mt-3 max-h-[220px] overflow-y-auto rounded-xl bg-accent-dark px-3.5 py-3 font-mono text-[13px] leading-[1.85] text-[#9fb6c4]">
+        {log.map((l, i) => <div key={i} className={LOG_COLOUR[l.type] ?? LOG_COLOUR.info}>{l.msg}</div>)}
+      </div>
+    </div>
+  )
+}