openhacker 0.1.0 → 0.1.2

package/templates/agent/app/globals.css

@@ -8,11 +8,6 @@
   --accent: #ffffff;
   --accent-dim: #333333;
   --crit: #ffffff;
-  --high: #cfcfcf;
-  --med: #9a9a9a;
-  --low: #6f6f6f;
-  --info: #555555;
-  --ok: #f5f5f5;
 }
 
 * {
@@ -27,254 +22,127 @@ body {
   color: var(--text);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 14px;
-  line-height: 1.5;
-}
-
-a {
-  color: var(--accent);
-  text-decoration: none;
-}
-a:hover {
-  text-decoration: underline;
-}
-
-.nav {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-  padding: 14px 24px;
-  border-bottom: 1px solid var(--border);
-  background: var(--panel);
-}
-.nav .brand {
-  font-weight: 700;
-  letter-spacing: 0.5px;
-  color: var(--text);
-}
-.nav .brand span {
-  color: var(--accent);
-}
-.nav .spacer {
-  flex: 1;
-}
-.nav a {
-  color: var(--muted);
-}
-.nav a:hover {
-  color: var(--text);
-  text-decoration: none;
+  line-height: 1.6;
 }
 
 .container {
-  max-width: 960px;
+  max-width: 720px;
   margin: 0 auto;
-  padding: 28px 24px 80px;
+  padding: 64px 24px 96px;
 }
 
 h1 {
-  font-size: 20px;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
   margin: 0 0 4px;
 }
-h2 {
-  font-size: 15px;
-  margin: 28px 0 12px;
-  color: var(--muted);
-  text-transform: uppercase;
-  letter-spacing: 1px;
+h1 span {
+  color: var(--accent);
 }
 .sub {
   color: var(--muted);
-  margin: 0 0 24px;
+  margin: 0 0 28px;
 }
 
-.panel {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 18px;
-  margin-bottom: 16px;
-}
-
-.card {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 10px;
-  padding: 16px 18px;
-  margin-bottom: 12px;
+.ask {
   display: flex;
-  align-items: center;
-  gap: 16px;
+  gap: 8px;
 }
-.card .grow {
+.ask input {
   flex: 1;
-  min-width: 0;
-}
-.card .repo {
-  font-weight: 600;
-}
-.card .meta {
-  color: var(--muted);
-  font-size: 12px;
-  margin-top: 2px;
-}
-
-label {
-  display: block;
-  font-size: 12px;
-  color: var(--muted);
-  margin-bottom: 6px;
-}
-input[type="text"],
-input[type="password"],
-select {
-  width: 100%;
   background: var(--panel-2);
   border: 1px solid var(--border);
   color: var(--text);
   border-radius: 8px;
-  padding: 9px 11px;
+  padding: 11px 13px;
   font: inherit;
 }
-input:focus,
-select:focus {
+.ask input:focus {
   outline: none;
   border-color: var(--accent);
 }
-.row {
-  display: flex;
-  gap: 12px;
-  flex-wrap: wrap;
-  margin-bottom: 12px;
-}
-.row > div {
-  flex: 1;
-  min-width: 160px;
-}
-.check {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-.check label {
-  margin: 0;
-}
-
-button,
-.btn {
+.ask button {
   background: var(--accent);
   color: #000000;
   border: none;
   border-radius: 8px;
-  padding: 9px 14px;
+  padding: 11px 18px;
   font: inherit;
   font-weight: 600;
   cursor: pointer;
 }
-button:hover {
+.ask button:hover:not(:disabled) {
   filter: brightness(1.08);
 }
-.btn-ghost {
-  background: transparent;
-  color: var(--muted);
-  border: 1px solid var(--border);
-}
-.btn-ghost:hover {
-  color: var(--text);
-}
-.btn-danger {
-  background: transparent;
-  color: var(--crit);
-  border: 1px solid var(--accent-dim);
+.ask button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-.badge {
-  display: inline-block;
-  padding: 1px 8px;
-  border-radius: 20px;
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
+.reply {
+  margin-top: 28px;
+  background: var(--panel);
   border: 1px solid var(--border);
-  background: transparent;
-  color: var(--text);
-}
-.sev-critical {
-  background: #ffffff;
-  color: #000000;
-  border-color: #ffffff;
-}
-.sev-high {
-  color: #ffffff;
-  border-color: #cfcfcf;
-  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+  padding: 18px 20px;
 }
-.sev-medium {
-  color: var(--high);
-  border-color: #5a5a5a;
+.reply .text {
+  white-space: pre-wrap;
+  margin: 0 0 12px;
 }
-.sev-low {
-  color: var(--med);
-  border-color: #3a3a3a;
+.reply .text:last-child {
+  margin-bottom: 0;
 }
-.sev-info {
-  color: var(--info);
-  border-color: #2a2a2a;
+.reply .reasoning {
+  white-space: pre-wrap;
+  color: var(--muted);
+  font-size: 13px;
+  margin: 0 0 12px;
+  padding-left: 12px;
+  border-left: 2px solid var(--border);
 }
 
-.counts {
+.tool {
   display: flex;
-  gap: 6px;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
+  align-items: center;
+  gap: 10px;
+  font-size: 12.5px;
+  color: var(--muted);
+  padding: 4px 0;
 }
-th,
-td {
-  text-align: left;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--border);
-  vertical-align: top;
-  font-size: 13px;
+.tool-name {
+  color: var(--text);
 }
-th {
-  color: var(--muted);
+.tool-state {
   font-size: 11px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  padding: 0 8px;
+}
+
+.cursor {
+  display: inline-block;
+  width: 8px;
+  height: 1em;
+  background: var(--accent);
+  vertical-align: text-bottom;
+  animation: blink 1s steps(2) infinite;
+}
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
 }
 
 .banner {
+  margin-top: 20px;
   border: 1px solid var(--border);
   background: rgba(255, 255, 255, 0.04);
-  color: var(--text);
+  color: var(--crit);
   border-radius: 8px;
   padding: 10px 14px;
-  margin-bottom: 18px;
   font-size: 13px;
 }
-.empty {
-  color: var(--muted);
-  padding: 24px;
-  text-align: center;
-  border: 1px dashed var(--border);
-  border-radius: 10px;
-}
-.inline {
-  display: inline;
-}
-.actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-.mono-sm {
-  font-size: 12px;
-  color: var(--muted);
-}
-.login-wrap {
-  max-width: 360px;
-  margin: 12vh auto 0;
-}

package/templates/agent/app/layout.tsx

@@ -1,35 +1,15 @@
 import type { Metadata } from "next";
-import Link from "next/link";
-import { authEnabled } from "@/agent/lib/auth";
-import { logout } from "./actions";
 import "./globals.css";
 
 export const metadata: Metadata = {
   title: "OpenHacker",
-  description: "Autonomous application security agent",
+  description: "Analyze a GitHub repo for vulnerabilities",
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body>
-        <nav className="nav">
-          <Link href="/" className="brand">
-            open<span>hacker</span>
-          </Link>
-          <div className="spacer" />
-          <Link href="/">Dashboard</Link>
-          <Link href="/settings">Settings</Link>
-          {authEnabled() ? (
-            <form action={logout} className="inline">
-              <button className="btn-ghost" type="submit">
-                Sign out
-              </button>
-            </form>
-          ) : null}
-        </nav>
-        {children}
-      </body>
+      <body>{children}</body>
     </html>
   );
 }

package/templates/agent/app/page.tsx

@@ -1,114 +1,92 @@
-import Link from "next/link";
-import { getStore, isPersistent } from "@/agent/lib/store";
-import { SeverityCounts } from "./_components/ui";
-import { addTarget, deleteTarget, scanTarget } from "./actions";
+"use client";
 
-export const dynamic = "force-dynamic";
+import { useState } from "react";
+import { useEveAgent } from "eve/react";
 
-export default async function Dashboard({
-  searchParams,
-}: {
-  searchParams: Promise<{ error?: string }>;
-}) {
-  const { error } = await searchParams;
-  const store = getStore();
-  const targets = await store.listTargets();
-  const findingsByTarget = new Map(
-    await Promise.all(
-      targets.map(async (t) => [t.id, await store.listFindings(t.id)] as const),
-    ),
-  );
+export default function Home() {
+  const [repo, setRepo] = useState("");
+  const agent = useEveAgent();
+
+  const busy = agent.status === "submitted" || agent.status === "streaming";
+
+  function onSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    const value = repo.trim();
+    if (!value || busy) return;
+    agent.reset();
+    agent.send({
+      message: `Analyze the GitHub repository "${value}" for security vulnerabilities. Walk through what you check and report what you find.`,
+    });
+  }
+
+  const reply = [...agent.data.messages]
+    .reverse()
+    .find((m) => m.role === "assistant");
 
   return (
     <main className="container">
-      <h1>Targets</h1>
-      <p className="sub">Repositories OpenHacker continuously scans for vulnerabilities.</p>
+      <h1>
+        open<span>hacker</span>
+      </h1>
+      <p className="sub">
+        Paste a GitHub repo and the agent will analyze it for vulnerabilities.
+      </p>
+
+      <form className="ask" onSubmit={onSubmit}>
+        <input
+          type="text"
+          value={repo}
+          onChange={(e) => setRepo(e.target.value)}
+          placeholder="owner/name or https://github.com/owner/name"
+          autoFocus
+        />
+        <button type="submit" disabled={busy || !repo.trim()}>
+          {busy ? "Analyzing…" : "Analyze"}
+        </button>
+      </form>
+
+      {reply ? (
+        <section className="reply">
+          {reply.parts.map((part, i) => {
+            if (part.type === "reasoning") {
+              return (
+                <p key={i} className="reasoning">
+                  {part.text}
+                </p>
+              );
+            }
+            if (part.type === "text") {
+              return (
+                <p key={i} className="text">
+                  {part.text}
+                </p>
+              );
+            }
+            if (part.type === "dynamic-tool") {
+              return (
+                <div key={i} className="tool">
+                  <span className="tool-name">{part.toolName}</span>
+                  <span className="tool-state">{part.state}</span>
+                </div>
+              );
+            }
+            return null;
+          })}
+          {agent.status === "streaming" ? (
+            <span className="cursor" aria-hidden />
+          ) : null}
+        </section>
+      ) : busy ? (
+        <section className="reply">
+          <span className="cursor" aria-hidden />
+        </section>
+      ) : null}
 
-      {!isPersistent() ? (
+      {agent.status === "error" ? (
         <div className="banner">
-          Using an in-memory store — data will not persist across restarts/deploys. Add a Vercel KV
-          or Upstash Redis integration and set <code>KV_REST_API_URL</code> /{" "}
-          <code>KV_REST_API_TOKEN</code> to persist.
+          {String(agent.error ?? "Something went wrong.")}
         </div>
       ) : null}
-      {error === "invalid-repo" ? (
-        <div className="banner">Enter a valid GitHub repository (owner/name or a github.com URL).</div>
-      ) : null}
-
-      <div className="panel">
-        <h2 style={{ marginTop: 0 }}>Add a target</h2>
-        <form action={addTarget}>
-          <div className="row">
-            <div>
-              <label htmlFor="repo">GitHub repository</label>
-              <input id="repo" name="repo" type="text" placeholder="owner/name or URL" required />
-            </div>
-            <div>
-              <label htmlFor="branch">Branch (optional)</label>
-              <input id="branch" name="branch" type="text" placeholder="default branch" />
-            </div>
-          </div>
-          <div className="row">
-            <div>
-              <label htmlFor="name">Display name (optional)</label>
-              <input id="name" name="name" type="text" placeholder="My app" />
-            </div>
-            <div>
-              <label htmlFor="token">Access token (optional, for private repos)</label>
-              <input id="token" name="token" type="password" placeholder="ghp_..." />
-            </div>
-          </div>
-          <div className="check" style={{ marginBottom: 14 }}>
-            <input id="autoRemediate" name="autoRemediate" type="checkbox" />
-            <label htmlFor="autoRemediate">Open remediation PRs automatically</label>
-          </div>
-          <button type="submit">Add target</button>
-        </form>
-      </div>
-
-      <h2>Configured targets</h2>
-      {targets.length === 0 ? (
-        <div className="empty">No targets yet. Add a repository above to start scanning.</div>
-      ) : (
-        targets.map((t) => {
-          const findings = findingsByTarget.get(t.id) ?? [];
-          return (
-            <div className="card" key={t.id}>
-              <div className="grow">
-                <div className="repo">
-                  <Link href={`/targets/${t.id}`}>{t.name}</Link>{" "}
-                  <span className="mono-sm">{t.repo}@{t.branch}</span>
-                </div>
-                <div className="meta">
-                  {t.lastScanAt
-                    ? `last scan ${new Date(t.lastScanAt).toLocaleString()}${
-                        t.lastScanStatus === "error" ? ` — error: ${t.lastScanError}` : ""
-                      }`
-                    : "never scanned"}
-                </div>
-                <div style={{ marginTop: 8 }}>
-                  <SeverityCounts findings={findings} />
-                </div>
-              </div>
-              <div className="actions">
-                <form action={scanTarget} className="inline">
-                  <input type="hidden" name="id" value={t.id} />
-                  <button type="submit">Scan now</button>
-                </form>
-                <Link className="btn btn-ghost" href={`/targets/${t.id}`}>
-                  View
-                </Link>
-                <form action={deleteTarget} className="inline">
-                  <input type="hidden" name="id" value={t.id} />
-                  <button type="submit" className="btn-danger">
-                    Delete
-                  </button>
-                </form>
-              </div>
-            </div>
-          );
-        })
-      )}
     </main>
   );
 }

package/templates/agent/package.json

@@ -13,18 +13,17 @@
     "eve:info": "eve info"
   },
   "dependencies": {
-    "@upstash/redis": "^1.38.0",
     "ai": "^7.0.3",
     "eve": "^0.16.2",
     "next": "^16.2.9",
     "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "zod": "^4.4.3"
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
     "@types/node": "25.5.2",
     "@types/react": "19.2.14",
     "@types/react-dom": "^19.2.3",
+    "microsandbox": "^0.6.0",
     "typescript": "6.0.2"
   }
 }