diff --git a/web/components/ui/Modal.tsx b/web/components/ui/Modal.tsx
new file mode 100644
index 0000000..df7e8d3
--- /dev/null
+++ b/web/components/ui/Modal.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { useEffect } from "react";
+
+export function Modal({
+  open,
+  title,
+  onClose,
+  children,
+  wide,
+}: {
+  open: boolean;
+  title: string;
+  onClose: () => void;
+  children: React.ReactNode;
+  wide?: boolean;
+}) {
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e: KeyboardEvent) => e.key === "Escape" && onClose();
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <div className="absolute inset-0 bg-black/60" onClick={onClose} />
+      <div
+        className={`relative z-10 w-full ${wide ? "max-w-2xl" : "max-w-md"} max-h-[90vh] overflow-auto rounded-xl border border-border bg-surface shadow-2xl`}
+        role="dialog"
+        aria-modal="true"
+      >
+        <div className="flex items-center justify-between border-b border-border px-5 py-3">
+          <h2 className="text-sm font-bold text-text-primary">{title}</h2>
+          <button onClick={onClose} className="text-text-secondary hover:text-text-primary" aria-label="Close">
+            ✕
+          </button>
+        </div>
+        <div className="p-5">{children}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts
index 7d3900e..a9ec029 100644
--- a/web/components/ui/index.ts
+++ b/web/components/ui/index.ts
@@ -2,3 +2,4 @@ export { Button } from "./Button";
 export { Badge } from "./Badge";
 export { Card, CardHeader, CardTitle } from "./Card";
 export { Table, Thead, Tbody, Tr, Th, Td } from "./Table";
+export { Modal } from "./Modal";
diff --git a/web/lib/api.ts b/web/lib/api.ts
index e8cc3f7..6d13f38 100644
--- a/web/lib/api.ts
+++ b/web/lib/api.ts
@@ -132,6 +132,12 @@ export interface ServerWithKeys extends Server {
   keys: (Assignment & { key: Key })[];
 }
 
+export interface InputParam {
+  name: string;
+  default: string;
+  description: string;
+}
+
 export interface WorkflowStep {
   step_id: string;
   name: string;
@@ -139,6 +145,7 @@ export interface WorkflowStep {
   interpreter: "bash" | "powershell";
   script: string;
   declared_outputs: string[];
+  declared_inputs: InputParam[];
   secret_refs: string[];
 }
 
@@ -148,6 +155,7 @@ export interface WorkflowStepRef {
   on_failure: "stop" | "continue" | "retry";
   max_retries: number;
   overrides?: { script?: string; secret_refs?: string[] };
+  inputs?: Record<string, string>;
 }
 
 export interface Workflow {
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index 0ee67b8..000c73d 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -21,6 +21,10 @@ const config: Config = {
         warning: "#f59e0b",
         danger: "#ef4444",
         "danger-hover": "#dc2626",
+        bash: "#3fb950",
+        pwsh: "#5b9bff",
+        signal: "#f5a524",
+        "signal-ink": "#241800",
       },
     },
   },