openhacker 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "openhacker",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Scaffold a self-hosted OpenHacker security agent",
   "license": "UNLICENSED",
   "type": "module",

package/templates/agent/agent/instructions.md

@@ -4,7 +4,6 @@ You are OpenHacker, an application security agent.
 
 The user gives you a GitHub repository (as `owner/name` or a github.com URL). Analyze it for security vulnerabilities and report your findings.
 
-- Briefly narrate what you are checking as you go (dependencies, auth, input handling, secrets, etc.).
 - Use the shell to clone and explore the repo. Use `ls`/`find` to list directories; only use `read_file` on actual file paths, never on a directory.
 - Call out concrete risks with severity and, where possible, how to fix them.
 - If you cannot access the repository, say so plainly.

package/templates/agent/app/globals.css

@@ -95,13 +95,35 @@ h1 span {
   margin-bottom: 0;
 }
 .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);
 }
+.reply .reasoning > summary {
+  cursor: pointer;
+  color: var(--muted);
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  list-style: none;
+  user-select: none;
+}
+.reply .reasoning > summary::-webkit-details-marker {
+  display: none;
+}
+.reply .reasoning > summary::before {
+  content: "› ";
+  display: inline-block;
+}
+.reply .reasoning[open] > summary::before {
+  content: "⌄ ";
+}
+.reply .reasoning > p {
+  white-space: pre-wrap;
+  color: var(--muted);
+  font-size: 13px;
+  margin: 8px 0 0;
+}
 
 .tool {
   display: flex;
@@ -123,6 +145,33 @@ h1 span {
   padding: 0 8px;
 }
 
+.hacking {
+  color: var(--muted);
+  font-size: 13px;
+  margin: 0;
+}
+.reply .text + .hacking {
+  margin-top: 12px;
+}
+.dots::after {
+  content: "";
+  animation: dots 1.2s steps(4, end) infinite;
+}
+@keyframes dots {
+  0% {
+    content: "";
+  }
+  25% {
+    content: ".";
+  }
+  50% {
+    content: "..";
+  }
+  75% {
+    content: "...";
+  }
+}
+
 .cursor {
   display: inline-block;
   width: 8px;

package/templates/agent/app/page.tsx

@@ -15,7 +15,7 @@ export default function Home() {
     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.`,
+      message: `Analyze the GitHub repository "${value}" for security vulnerabilities. Reply with only the final report.`,
     });
   }
 
@@ -23,6 +23,20 @@ export default function Home() {
     .reverse()
     .find((m) => m.role === "assistant");
 
+  const parts = reply?.parts ?? [];
+  const lastStep = parts.reduce<number | undefined>((max, p) => {
+    const idx = "stepIndex" in p ? p.stepIndex : undefined;
+    if (typeof idx !== "number") return max;
+    return max === undefined ? idx : Math.max(max, idx);
+  }, undefined);
+
+  let result = "";
+  for (const p of parts) {
+    if (p.type !== "text") continue;
+    if (lastStep !== undefined && p.stepIndex !== lastStep) continue;
+    result += p.text;
+  }
+
   return (
     <main className="container">
       <h1>
@@ -45,41 +59,16 @@ export default function Home() {
         </button>
       </form>
 
-      {reply ? (
+      {reply || busy ? (
         <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 />
+          {result ? <p className="text">{result}</p> : null}
+          {busy && !result ? (
+            <p className="hacking">
+              hacking
+              <span className="dots" aria-hidden />
+            </p>
           ) : null}
         </section>
-      ) : busy ? (
-        <section className="reply">
-          <span className="cursor" aria-hidden />
-        </section>
       ) : null}
 
       {agent.status === "error" ? (