chore: bootstrap devopspanel scaffold

src/App.css

@@ -0,0 +1,93 @@
+:root {
+  color: #e5eef7;
+  background: #0b1220;
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+  background:
+    radial-gradient(circle at top, rgba(56, 189, 248, 0.18), transparent 35%),
+    linear-gradient(180deg, #020617 0%, #0f172a 100%);
+}
+
+#root {
+  min-height: 100vh;
+}
+
+.app-shell {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 48px 24px 64px;
+}
+
+.hero-card,
+.next-slice-card,
+.status-grid article {
+  background: rgba(15, 23, 42, 0.8);
+  border: 1px solid rgba(148, 163, 184, 0.18);
+  border-radius: 24px;
+  box-shadow: 0 20px 45px rgba(2, 6, 23, 0.35);
+}
+
+.hero-card,
+.next-slice-card {
+  padding: 28px;
+}
+
+.eyebrow {
+  margin: 0 0 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.8rem;
+  color: #38bdf8;
+}
+
+h1,
+h2,
+p,
+ul {
+  margin-top: 0;
+}
+
+h1 {
+  font-size: clamp(2.4rem, 5vw, 4rem);
+  margin-bottom: 16px;
+}
+
+.lede {
+  font-size: 1.1rem;
+  line-height: 1.7;
+  max-width: 68ch;
+  color: #cbd5e1;
+}
+
+.status-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 20px;
+  margin: 28px 0;
+}
+
+.status-grid article {
+  padding: 22px;
+}
+
+.status-grid h2,
+.next-slice-card h2 {
+  margin-bottom: 12px;
+  font-size: 1.1rem;
+}
+
+.status-grid p,
+.next-slice-card li {
+  color: #cbd5e1;
+  line-height: 1.6;
+}
+
+.next-slice-card ul {
+  padding-left: 20px;
+  margin-bottom: 0;
+}

src/App.tsx

@@ -0,0 +1,48 @@
+import './App.css'
+
+const nextSlice = [
+  'Timeline block wired to approved DTO fixtures',
+  'Audit feed block wired to approved DTO fixtures',
+  'Environment summary placeholder kept mock-only',
+]
+
+function App() {
+  return (
+    <main className="app-shell">
+      <section className="hero-card">
+        <p className="eyebrow">Mission Control / devopspanel</p>
+        <h1>DevOps orchestration admin panel</h1>
+        <p className="lede">
+          Baseline frontend scaffold for the first implementation slice. This commit
+          intentionally sets the stack and shell contract before live integrations.
+        </p>
+      </section>
+
+      <section className="status-grid">
+        <article>
+          <h2>Baseline stack</h2>
+          <p>React + TypeScript + Vite</p>
+        </article>
+        <article>
+          <h2>Current state</h2>
+          <p>Scaffold only, no runtime data wiring yet</p>
+        </article>
+        <article>
+          <h2>Guardrail</h2>
+          <p>Environment summary remains mock-only until live worker-visible route exists</p>
+        </article>
+      </section>
+
+      <section className="next-slice-card">
+        <h2>Next development slice</h2>
+        <ul>
+          {nextSlice.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+      </section>
+    </main>
+  )
+}
+
+export default App

src/index.css

@@ -0,0 +1,15 @@
+html {
+  color-scheme: dark;
+}
+
+body {
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+a {
+  color: inherit;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)