src/components/terminal/OmegaShell.tsx

/**

 * OMEGA BOTTOM SHELL INTEGRATION

 * Connects REXX-based Omega shell to bob-ide backend

 *

 * Bridge contract:

 * window.omegaIDE.execute(command) => Promise<{ stdout, stderr, code }>

 */

import React, { useEffect, useRef } from 'react';

interface OmegaResult {
  stdout: string;
  stderr: string;
  code: number;
}

export function OmegaShell() {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // Inject Omega shell HTML + CSS + init script
    injectOmegaShell();

    // Bind IDE execution bridge
    if (typeof window !== 'undefined') {
      (window as any).omegaIDE = {
        execute: executeCommand,
      };
    }

    return () => {
      // Cleanup
      if (typeof window !== 'undefined') {
        delete (window as any).omegaIDE;
      }
    };
  }, []);

  async function executeCommand(cmd: string): Promise<OmegaResult> {
    try {
      // Route to backend REXX executor
      const response = await fetch('/api/omega/run', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ command: cmd }),
      });

      if (!response.ok) {
        return {
          stdout: '',
          stderr: `HTTP ${response.status}`,
          code: response.status,
        };
      }

      const result = await response.json();
      return {
        stdout: result.output || '',
        stderr: result.error || '',
        code: result.exitCode || 0,
      };
    } catch (e: any) {
      return {
        stdout: '',
        stderr: `Bridge error: ${e.message}`,
        code: 1,
      };
    }
  }

  function injectOmegaShell() {
    // CSS
    const css = `

.omega-shell {

  --omega-bg: #020706;

  --omega-panel: rgba(4, 18, 17, .96);

  --omega-line: rgba(70, 255, 214, .22);

  --omega-cyan: #64ffe3;

  --omega-green: #58ff92;

  --omega-blue: #4cb8ff;

  --omega-muted: #71958f;

  --omega-danger: #ff5470;

  position: fixed;

  inset: auto 0 0 0;

  height: min(38vh, 430px);

  min-height: 190px;

  display: grid;

  grid-template-rows: 34px 1fr 42px;

  color: #d9fff8;

  background:

    radial-gradient(circle at 72% 0%, rgba(28, 114, 109, .19), transparent 36%),

    linear-gradient(180deg, rgba(2, 9, 9, .88), var(--omega-panel));

  border-top: 1px solid var(--omega-line);

  box-shadow: 0 -18px 60px rgba(0,0,0,.58), inset 0 1px rgba(255,255,255,.025);

  backdrop-filter: blur(18px) saturate(125%);

  font: 500 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  z-index: 2147483000;

}

.omega-shell::before {

  content: ""; position:absolute; inset:0; pointer-events:none; opacity:.17;

  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(100,255,227,.08) 4px);

}

.omega-bar {

  display:flex; align-items:center; gap:10px; padding:0 12px;

  border-bottom:1px solid var(--omega-line);

}

.omega-mark {

  color:var(--omega-cyan); font-weight:900;

  letter-spacing:.08em; text-shadow:0 0 16px rgba(100,255,227,.65);

}

.omega-state {

  color:var(--omega-green); font-size:11px;

  letter-spacing:.12em;

}

.omega-spacer { flex:1; }

.omega-chip {

  border:1px solid var(--omega-line); border-radius:999px;

  padding:2px 8px; color:var(--omega-muted); font-size:10px;

}

.omega-output {

  overflow:auto; padding:12px 14px 20px;

  scrollbar-color:#266b61 transparent;

}

.omega-line {

  white-space:pre-wrap; overflow-wrap:anywhere;

  margin-bottom: 4px;

}

.omega-line[data-kind="system"] { color:var(--omega-cyan); }

.omega-line[data-kind="ok"] { color:var(--omega-green); }

.omega-line[data-kind="error"] { color:var(--omega-danger); }

.omega-input-row {

  display:grid; grid-template-columns:auto 1fr auto;

  align-items:center; gap:9px; padding:7px 12px;

  border-top:1px solid var(--omega-line);

  background:rgba(0,0,0,.2);

}

.omega-prompt {

  color:var(--omega-green); font-weight:800;

}

.omega-input {

  width:100%; border:0; outline:0; color:#effffb;

  background:transparent; font:inherit; caret-color:var(--omega-cyan);

}

.omega-run {

  border:1px solid rgba(100,255,227,.3); border-radius:7px;

  padding:5px 11px; color:var(--omega-cyan);

  background:rgba(27,104,94,.14); cursor:pointer;

  font-weight: 600;

}

.omega-run:hover {

  background:rgba(27,104,94,.3);

  box-shadow:0 0 20px rgba(100,255,227,.12);

}

@media (max-width: 720px) {

  .omega-shell { height:44vh; }

  .omega-chip:nth-of-type(2) { display:none; }

}

    `;

    // HTML
    const html = `

<section class="omega-shell" id="omega-shell" aria-label="Omega command shell">

  <header class="omega-bar">

    <strong class="omega-mark">Ω OMEGA SHELL</strong>

    <span class="omega-state">EVIDENCE OR SILENCE</span>

    <span class="omega-spacer"></span>

    <span class="omega-chip">BOB-IDE</span>

    <span class="omega-chip" id="omega-mode">GUARDED · WORM</span>

  </header>

  <main class="omega-output" id="omega-output" role="log" aria-live="polite">

    <div class="omega-line" data-kind="system">[Ω] Omega bottom shell mounted on bob-ide.</div>

    <div class="omega-line">[policy] commands require the allowlist (git, grep, curl, bash, etc.)</div>

    <div class="omega-line">[worm] all executions sealed to immutable ledger.</div>

  </main>

  <form class="omega-input-row" id="omega-form">

    <label class="omega-prompt" for="omega-input">Ω›</label>

    <input class="omega-input" id="omega-input" autocomplete="off" spellcheck="false" placeholder="git status" />

    <button class="omega-run" type="submit">EXECUTE</button>

  </form>

</section>

    `;

    // Inject CSS
    const styleEl = document.createElement('style');
    styleEl.textContent = css;
    document.head.appendChild(styleEl);

    // Inject HTML
    const shellEl = document.createElement('div');
    shellEl.innerHTML = html;
    document.body.appendChild(shellEl);

    // Bind handlers
    const form = document.querySelector('#omega-form') as HTMLFormElement;
    const input = document.querySelector('#omega-input') as HTMLInputElement;
    const output = document.querySelector('#omega-output') as HTMLElement;

    const append = (text: string, kind: string = '') => {
      const line = document.createElement('div');
      line.className = 'omega-line';
      if (kind) line.setAttribute('data-kind', kind);
      line.textContent = text;
      output.appendChild(line);
      output.scrollTop = output.scrollHeight;
    };

    form.addEventListener('submit', async (event) => {
      event.preventDefault();
      const command = input.value.trim();
      if (!command) return;

      append(`Ω› ${command}`, 'system');
      input.value = '';

      try {
        if (!(window as any).omegaIDE?.execute) {
          throw new Error('IDE bridge not initialized');
        }

        const result = await (window as any).omegaIDE.execute(command);

        if (result.stdout) {
          append(result.stdout, result.code === 0 ? 'ok' : 'error');
        }
        if (result.stderr) {
          append(`[error] ${result.stderr}`, 'error');
        }
        if (result.code !== 0) {
          append(`[exit code: ${result.code}]`, 'error');
        }
      } catch (error: any) {
        append(`[SILENCE] ${error.message}`, 'error');
      }
    });
  }

  return (
    <div ref={containerRef}>

      {/* Omega shell is injected into document.body via useEffect */}

    </div>
  );
}

/**

 * USAGE IN APP:

 *

 * import { OmegaShell } from './components/terminal/OmegaShell';

 *

 * export function App() {

 *   return (

 *     <div>

 *       {/* Your main IDE content */}
 *       <SovereignIDE />
 *
 *       {/* Omega shell at bottom */}
 *       <OmegaShell />
 *     </div>
 *   );
 * }
 */