{section.title}
--
+
- {item} ))} @@ -87,10 +86,9 @@ export default function SecurityPage() { ))}
{section.title}
+-
{section.body.map((item) => (
-
-
Public security notes
-Security
-+
+
+
-
+
{sections.map((section) => (
-
-
-
-
Security
+agent-render is a static artifact viewer. Its core host boundary is simple: artifact data lives in the URL fragment, so the static host does not receive it as part of the initial page request.
Reports
-Security contact
-
+
Report security issues through the GitHub repository. Use a private vulnerability report when available;
otherwise open a minimal issue asking for a private contact path and do not include exploit details in public.
URL explainer
+
The long part after the # (which starts with a one-character codec tag) is the artifact itself, compressed into the URL fragment so a static host can show it without receiving the content in the page request.
The shape
- https://agent-render.com/#a<compressed-payload>
-
- Everything before # loads the app. Everything after # stays in the browser and tells the app what to render.
- v1
- The payload format version. It lets old and new links fail clearly instead of guessing.
- arx
- The compression method. It uses an agent-render dictionary, Brotli compression, and URL-safe text encoding to keep rich artifacts linkable.
- Privacy
- The static host does not receive fragment contents during the page request. The link is still not a secret: browser history, copied URLs, screenshots, logs from tools that inspect the full URL, and future client-side analytics can expose it.
-
+ WARN
+ The link is not a secret: browser history, copied URLs, screenshots, URL-inspecting tools, and future client-side analytics can expose it.
+ In 30 seconds
+
A normal page URL asks the server for a route. An agent-render URL also carries a compressed artifact after the hash mark. Browsers do not send that hash to the server in the initial request, so the static app loads first and then decodes the artifact locally.
+
The weird-looking text is a transport format, not a tracking code. Shorter codecs like deflate and arx make markdown, code, diffs, CSV, and JSON fit into shareable links.
+
Use fragment links for quick static sharing. Use the optional self-hosted UUID mode when the payload is too large, the target chat app mangles long links, or you need a short URL and accept server-side storage.
{link.artifact.filename?.trim() || link.artifact.title || ""}
+ Draft changed since last generation.
+ Try it now
- Paste content, pick a format, and get a shareable URL. Everything
- encodes client-side.
- Security contact
+
-
-
- Agent Render
+
+
+
+ agent-render
- Why does this URL look weird?
-
- Why does this URL look weird?
+
-
-
-
-
-
-
-
-
-
- Fragment anatomy
+
+ ADDRESS
+
+ https://agent-render.com/#a<compressed-payload>
+
+
+
+
+
+
+
+
+
+
- In 30 seconds
+
+
diff --git a/src/components/file-tree-nav.tsx b/src/components/file-tree-nav.tsx
new file mode 100644
index 0000000..df49690
--- /dev/null
+++ b/src/components/file-tree-nav.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { useLayoutEffect, useMemo, useRef } from "react";
+import { FileTree, useFileTree } from "@pierre/trees/react";
+
+const TREE_ROW_HEIGHT = 24;
+const TREE_MIN_ROWS = 4;
+const TREE_MAX_ROWS = 12;
+const TREE_SEARCH_THRESHOLD = 8;
+
+type FileTreeNavProps = {
+ paths: readonly string[];
+ selectedPath?: string;
+ onSelectPath: (path: string) => void;
+ ariaLabel?: string;
+};
+
+/**
+ * Renders a list of paths as a compact, keyboard-navigable file tree.
+ *
+ * `paths` contains leaf entries only; directory rows are synthesized by the tree and are filtered
+ * out of selection events, so `onSelectPath` always receives a real listed path. `useFileTree`
+ * builds its path model once per mount, so callers remount via `key` when the path set changes;
+ * `selectedPath` is synchronized in place through the model's public item handles. Load this module
+ * through `next/dynamic`: it carries the
+ * @pierre/trees runtime, which should stay out of surfaces that never show a tree.
+ */
+export function FileTreeNav({ paths, selectedPath, onSelectPath, ariaLabel = "Files" }: FileTreeNavProps) {
+ const onSelectRef = useRef(onSelectPath);
+ useLayoutEffect(() => {
+ onSelectRef.current = onSelectPath;
+ }, [onSelectPath]);
+ const filePathSet = useMemo(() => new Set(paths), [paths]);
+ const { model } = useFileTree({
+ density: "compact",
+ flattenEmptyDirectories: true,
+ initialExpansion: "open",
+ initialSelectedPaths: selectedPath ? [selectedPath] : [],
+ onSelectionChange(selectedPaths) {
+ const path = selectedPaths.at(-1);
+ if (path && filePathSet.has(path)) {
+ onSelectRef.current(path);
+ }
+ },
+ paths,
+ search: paths.length >= TREE_SEARCH_THRESHOLD,
+ });
+ useLayoutEffect(() => {
+ const selectedPaths = model.getSelectedPaths();
+ if (selectedPaths.length === 1 && selectedPaths[0] === selectedPath) {
+ return;
+ }
+ for (const path of selectedPaths) {
+ model.getItem(path)?.deselect();
+ }
+ if (selectedPath) {
+ model.getItem(selectedPath)?.select();
+ }
+ }, [model, selectedPath]);
+
+ const rowCount = Math.min(
+ TREE_MAX_ROWS,
+ Math.max(TREE_MIN_ROWS, paths.length + (paths.length >= TREE_SEARCH_THRESHOLD ? 2 : 1)),
+ );
+
+ return (
+
+ );
+}
diff --git a/src/components/generated-link.tsx b/src/components/generated-link.tsx
new file mode 100644
index 0000000..a84d8ec
--- /dev/null
+++ b/src/components/generated-link.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import { ArrowUpRight, Check, Copy, ExternalLink, Link2 } from "lucide-react";
+import type { Ref } from "react";
+import { numberFormatter } from "@/lib/format";
+import type { GeneratedArtifactLink } from "@/lib/payload/link-creator";
+import {
+ codecPickerLabel,
+ codecs,
+ isDeprecatedEmitCodec,
+} from "@/lib/payload/schema";
+import { cn } from "@/lib/utils";
+
+const codecOptions = ["auto", ...codecs] as const;
+
+export type CodecChoice = (typeof codecOptions)[number];
+
+type CodecPickerProps = {
+ value: string | undefined;
+ onSelect: (codec: CodecChoice) => void;
+ label?: string;
+};
+
+/**
+ * Shared compression-codec key row used by the link creator and the in-viewer
+ * artifact editor. Deprecated emit codecs render with a warning style.
+ */
+export function CodecPicker({ value, onSelect, label }: CodecPickerProps) {
+ const active = value ?? "auto";
+
+ return (
+
+ {label ? {label} : null}
+ {codecOptions.map((option) => (
+
+ ))}
+
+ );
+}
+
+type GeneratedLinkResultProps = {
+ link: GeneratedArtifactLink;
+ stale: boolean;
+ copyState: "idle" | "copied" | "failed";
+ markdownLinkCopyState: "idle" | "copied" | "failed";
+ onCopy: () => void;
+ onCopyMarkdownLink: () => void;
+ onPreview: () => void;
+ /** Editor variant: disables the result actions once the draft moves on. */
+ disableActionsWhenStale?: boolean;
+ /** Creator variant: also lists markdown-link length and bundle title. */
+ extendedMetrics?: boolean;
+ as?: "section" | "aside";
+ containerRef?: Ref
+
+ TRANSFER OK
+ Generated link
+
+
+
+
+
+
+
+
+
+ {link.discordMarkdownLinkWarning ? (
+
+
+
+
+ {extendedMetrics ? (
+ <>
+
+
+
+
+
+ ) : null}
+
+ {link.discordMarkdownLinkWarning}
+
+ ) : null}
+
+
+
+ {stale ? (
+
-
-
-
-
+
-
-
- Create a link
-
- Create a link
+