forkless/strix
1
0
Fork 0
mirror of https://github.com/usestrix/strix.git synced 2026-08-17 01:29:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refresh the live view faster and follow new activity

Browse Source
This commit is contained in:
Jonathan Singer
2026-07-20 09:51:56 -04:00
parent b41abc9e58
commit 1ce37d7b12
5 changed files with 145 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
strix/viewer/viewer_dist/assets/index-mc1W09x2.js → strix/viewer/viewer_dist/assets/index-CCvWcFs6.js
+98 -98
View File
File diff suppressed because one or more lines are too long
strix/viewer/viewer_dist/assets/index-B8pfoev9.css → strix/viewer/viewer_dist/assets/index-D743S243.css
+1 -1
View File
File diff suppressed because one or more lines are too long
strix/viewer/viewer_dist/index.html
+2 -2
View File
@@ -6,8 +6,8 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<title>Strix Results</title>
<script type="module" crossorigin src="./assets/index-mc1W09x2.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-B8pfoev9.css">
<script type="module" crossorigin src="./assets/index-CCvWcFs6.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-D743S243.css">
</head>
<body>
<div id="root"></div>
strix/viewer_src/src/App.tsx
+2 -20
View File
@@ -20,31 +20,13 @@ import { buildGraphAgents } from "@/components/live/AgentTranscript";
import AgentDetailModal from "@/components/live/AgentDetailModal";
import { severityCounts, type ParsedRunSummary } from "@/lib/local-run-parser";
import { fetchAll, fetchRunSummary, fetchTranscript, fetchVulnerabilities, type LoadedRun } from "@/data/serverSource";
// All upsell / sign-up CTAs route anonymous local-viewer users to the public
// cloud sign-up. Opened in a new tab so the local results stay put.
const SIGNUP_URL = "https://app.strix.ai/api/auth/signup";
// Best-effort, anonymous conversion tracking. The local server forwards this to
// PostHog only if the user has telemetry enabled; it never blocks navigation.
function trackCta(cta: string): void {
try {
const body = JSON.stringify({ event: "cta_clicked", cta });
if (typeof navigator !== "undefined" && navigator.sendBeacon) {
navigator.sendBeacon("/api/event", body);
} else {
void fetch("/api/event", { method: "POST", body, keepalive: true });
}
} catch {
/* analytics is best-effort */
}
}
import { SIGNUP_URL, trackCta } from "@/lib/cta";
const TRUST_BANNER =
"Your findings stay on your machine. They're rendered here locally in your browser and never uploaded or stored by Strix.";
const SEVERITY_ORDER: VulnerabilitySeverity[] = ["critical", "high", "medium", "low"];
const POLL_MS = 1000;
const POLL_MS = 500;
export default function App() {
const [run, setRun] = useState<LoadedRun | null>(null);
strix/viewer_src/src/components/live/AgentDetailModal.tsx
+42 -5
View File
@@ -1,6 +1,7 @@
import { useEffect } from "react";
import { useCallback, useEffect, useRef } from "react";
import { X } from "lucide-react";
import { AgentTranscript } from "./AgentTranscript";
import { SIGNUP_URL, trackCta } from "@/lib/cta";
import type { TranscriptAgent, TranscriptEvent } from "@/data/serverSource";
/** Status -> the small leading dot color, matching the graph node styling. */
@@ -13,11 +14,15 @@ const STATUS_DOT: Record<string, string> = {
failed: "bg-red-400",
};
/** Consider the user "at the bottom" within this many px. */
const NEAR_BOTTOM_PX = 80;
/**
* Overlay modal showing a single agent's full transcript. Matches the cloud
* app: a fixed-size panel with a pinned header (status dot + agent name) and
* the transcript scrolling beneath it. Closes on backdrop click, the X button,
* or Escape.
* app: a fixed-size panel with a pinned header (status dot + agent name), the
* transcript scrolling beneath it, and a footer. Auto-scrolls to follow new
* activity while the user is near the bottom (so a live run trails). Closes on
* backdrop click, the X button, or Escape.
*/
export function AgentDetailModal({
agent,
@@ -28,6 +33,24 @@ export function AgentDetailModal({
events: TranscriptEvent[];
onClose: () => void;
}) {
const scrollRef = useRef<HTMLDivElement>(null);
const nearBottom = useRef(false);
const handleScroll = useCallback(() => {
const el = scrollRef.current;
if (!el) return;
nearBottom.current = el.scrollHeight - el.scrollTop - el.clientHeight < NEAR_BOTTOM_PX;
}, []);
// Follow new activity when the user is near the bottom (live trailing).
useEffect(() => {
const el = scrollRef.current;
if (!el || !nearBottom.current) return;
requestAnimationFrame(() => {
el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
});
}, [events]);
useEffect(() => {
const onKey = (e: KeyboardEvent) => {
if (e.key === "Escape") onClose();
@@ -70,9 +93,23 @@ export function AgentDetailModal({
<X className="h-4 w-4" />
</button>
</div>
<div className="flex-1 overflow-y-auto p-5">
<div ref={scrollRef} onScroll={handleScroll} className="flex-1 overflow-y-auto p-5">
<AgentTranscript agent={agent} events={events} showHeader={false} />
</div>
<div className="flex flex-wrap items-center justify-between gap-2 border-t border-[#222] px-5 py-3">
<span className="text-xs text-[#888]">Steer agents live from your terminal.</span>
<a
href={SIGNUP_URL}
target="_blank"
rel="noopener noreferrer"
onClick={() => trackCta("steer_agent")}
className="text-xs font-medium text-[#60a5fa] hover:underline"
>
Upgrade to Pro to steer agents from the web &rarr;
</a>
</div>
</div>
</div>
);