nihalashetty
ae67bff5a3
Self-hosted platform for building, testing, and shipping LangChain/LangGraph agents. Deep-agent sub-agents on the canvas, a live tracing/observability timeline, auto-provisioned built-in tools with import/export, per-environment tool variables, streamed evaluations, and per-user auth token forwarding.
146 lines
11 KiB
TypeScript
146 lines
11 KiB
TypeScript
/* Forge icon set - lucide-style, 1.5px stroke, 24x24 viewBox. Ported from the design handoff. */
|
|
import type { CSSProperties } from "react";
|
|
|
|
const P: Record<string, string> = {
|
|
// nav / shell
|
|
dashboard: '<rect x="3" y="3" width="7" height="9" rx="1"/><rect x="14" y="3" width="7" height="5" rx="1"/><rect x="14" y="12" width="7" height="9" rx="1"/><rect x="3" y="16" width="7" height="5" rx="1"/>',
|
|
search: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/>',
|
|
sparkles: '<path d="M12 3l1.6 4.6L18 9l-4.4 1.4L12 15l-1.6-4.6L6 9l4.4-1.4z"/><path d="M19 14l.8 2.2L22 17l-2.2.8L19 20l-.8-2.2L16 17l2.2-.8z"/>',
|
|
help: '<circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.9.4-1.4 1-1.4 2"/><circle cx="12" cy="16.5" r=".6" fill="currentColor" stroke="none"/>',
|
|
bell: '<path d="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/>',
|
|
overview: '<path d="M3 12a9 9 0 1 0 18 0 9 9 0 0 0-18 0"/><path d="M12 7v5l3 2"/>',
|
|
workflows: '<rect x="3" y="3" width="6" height="6" rx="1"/><rect x="15" y="15" width="6" height="6" rx="1"/><rect x="15" y="3" width="6" height="6" rx="1"/><path d="M9 6h3a3 3 0 0 1 3 3v0M6 9v3a3 3 0 0 0 3 3h6"/>',
|
|
agents: '<circle cx="12" cy="8" r="4"/><path d="M5 21a7 7 0 0 1 14 0"/>',
|
|
tools: '<path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2-2z"/>',
|
|
auth: '<rect x="4" y="10" width="16" height="11" rx="2"/><path d="M8 10V7a4 4 0 0 1 8 0v3"/><circle cx="12" cy="15.5" r="1.4"/>',
|
|
knowledge: '<path d="M4 5.5A2.5 2.5 0 0 1 6.5 3H19v15H6.5A2.5 2.5 0 0 0 4 20.5z"/><path d="M4 20.5A2.5 2.5 0 0 1 6.5 18H19v3H6.5A2.5 2.5 0 0 1 4 20.5z"/>',
|
|
playground: '<path d="M5 4v16l13-8z"/>',
|
|
traces: '<path d="M4 5h16M4 5v6a2 2 0 0 0 2 2h4M10 13v6M14 5v2a2 2 0 0 0 2 2h2a2 2 0 0 1 2 2v2"/><circle cx="10" cy="19" r="1.6"/><circle cx="20" cy="19" r="1.6"/>',
|
|
widget: '<rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8M12 17v4"/><path d="M7 9h6M7 12h4"/>',
|
|
connect: '<path d="M9 12h6"/><rect x="3" y="9" width="4" height="6" rx="1"/><rect x="17" y="9" width="4" height="6" rx="1"/>',
|
|
settings: '<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M19 5l-2 2M7 17l-2 2"/>',
|
|
secret: '<rect x="3" y="11" width="18" height="10" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
|
|
logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><path d="m16 17 5-5-5-5"/><path d="M21 12H9"/>',
|
|
// sidebar nav — lucide glyphs from the Forge Console design
|
|
'layout-dashboard': '<rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/>',
|
|
workflow: '<rect width="8" height="8" x="3" y="3" rx="2"/><path d="M7 11v4a2 2 0 0 0 2 2h4"/><rect width="8" height="8" x="13" y="13" rx="2"/>',
|
|
bot: '<path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/>',
|
|
'book-open': '<path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/>',
|
|
'shield-check': '<path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/><path d="m9 12 2 2 4-4"/>',
|
|
server: '<rect width="20" height="8" x="2" y="2" rx="2"/><rect width="20" height="8" x="2" y="14" rx="2"/><path d="M6 6h.01"/><path d="M6 18h.01"/>',
|
|
'plug-zap': '<path d="M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z"/><path d="m2 22 3-3"/><path d="M7.5 13.5 10 11"/><path d="M10.5 16.5 13 14"/><path d="m18 3-4 4h6l-4 4"/>',
|
|
activity: '<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>',
|
|
mail: '<rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>',
|
|
inbox: '<path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/>',
|
|
// node types
|
|
n_start: '<circle cx="12" cy="12" r="9"/><path d="M10 8l6 4-6 4z"/>',
|
|
n_end: '<circle cx="12" cy="12" r="9"/><rect x="9" y="9" width="6" height="6" rx="1"/>',
|
|
n_agent: '<rect x="5" y="7" width="14" height="11" rx="2"/><path d="M12 7V4M9 12h.01M15 12h.01"/><path d="M2 12h3M19 12h3"/>',
|
|
n_deepagent: '<rect x="4" y="8" width="16" height="11" rx="2"/><path d="M12 8V5M8 13h.01M16 13h.01"/><path d="M7 5h10"/><path d="M2 13h2M20 13h2"/>',
|
|
n_llm: '<path d="M12 3a4 4 0 0 0-4 4 4 4 0 0 0-1 7.9A3.5 3.5 0 0 0 12 19a3.5 3.5 0 0 0 5-4.1A4 4 0 0 0 16 7a4 4 0 0 0-4-4z"/>',
|
|
n_tool: '<path d="M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.5 2.5-2-2z"/>',
|
|
n_router: '<path d="M4 12h6l3-5h7M13 17h7"/><circle cx="4" cy="12" r="1.6"/><path d="M18 4l3 3-3 3M17 14l3 3-3 3"/>',
|
|
n_retrieval: '<circle cx="11" cy="11" r="6"/><path d="m20 20-3.5-3.5M11 8v6M8 11h6"/>',
|
|
n_qa: '<path d="M21 12a8 8 0 1 1-3-6.2"/><path d="M21 4v4h-4"/><path d="M9.5 10a2.5 2.5 0 1 1 3 2.4V14"/>',
|
|
n_human: '<circle cx="12" cy="7" r="3"/><path d="M6 21a6 6 0 0 1 12 0"/><path d="M19 4l1 1 2-2"/>',
|
|
n_transform: '<path d="M4 7h11M11 3l4 4-4 4M20 17H9M13 21l-4-4 4-4"/>',
|
|
n_subworkflow: '<rect x="3" y="3" width="18" height="18" rx="2"/><rect x="7" y="7" width="5" height="5" rx="1"/><rect x="13" y="12" width="4" height="4" rx="1"/><path d="M12 9.5h1a2 2 0 0 1 2 2v.5"/>',
|
|
n_fanout: '<circle cx="5" cy="12" r="2"/><circle cx="19" cy="5" r="2"/><circle cx="19" cy="12" r="2"/><circle cx="19" cy="19" r="2"/><path d="M7 12h4M11 12l6-6M11 12h6M11 12l6 6"/>',
|
|
n_join: '<circle cx="19" cy="12" r="2"/><circle cx="5" cy="5" r="2"/><circle cx="5" cy="12" r="2"/><circle cx="5" cy="19" r="2"/><path d="M7 5l6 6M7 12h6M7 19l6-6M13 12h4"/>',
|
|
n_loop: '<path d="M4 9a8 8 0 0 1 14-3M20 6V2M20 6h-4"/><path d="M20 15a8 8 0 0 1-14 3M4 18v4M4 18h4"/>',
|
|
n_webhook: '<circle cx="12" cy="6" r="3"/><path d="M12 9v4l-3 5M9 18a3 3 0 1 1-3-3M15 13a3 3 0 1 1 0 6h-6"/>',
|
|
n_emit: '<path d="M3 11l18-7-7 18-2.5-7.5z"/>',
|
|
// tool kinds
|
|
k_rest: '<path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/><circle cx="12" cy="12" r="9"/>',
|
|
k_graphql: '<path d="M12 3l8 4.6v8.8L12 21l-8-4.6V7.6z"/><circle cx="12" cy="3" r="1.4"/><circle cx="20" cy="7.6" r="1.4"/><circle cx="20" cy="16.4" r="1.4"/><circle cx="12" cy="21" r="1.4"/><circle cx="4" cy="16.4" r="1.4"/><circle cx="4" cy="7.6" r="1.4"/>',
|
|
k_code: '<path d="M8 8l-4 4 4 4M16 8l4 4-4 4"/>',
|
|
k_mcp: '<rect x="3" y="9" width="4" height="6" rx="1"/><rect x="17" y="9" width="4" height="6" rx="1"/><path d="M9 12h6"/>',
|
|
k_builtin: '<rect x="4" y="4" width="16" height="16" rx="3"/><path d="M9 9h6v6H9z"/>',
|
|
// actions
|
|
plus: '<path d="M12 5v14M5 12h14"/>',
|
|
minus: '<path d="M5 12h14"/>',
|
|
x: '<path d="M6 6l12 12M18 6L6 18"/>',
|
|
check: '<path d="M5 12l5 5L20 7"/>',
|
|
play: '<path d="M6 4v16l13-8z"/>',
|
|
stop: '<rect x="6" y="6" width="12" height="12" rx="2"/>',
|
|
save: '<path d="M5 4h11l3 3v13H5z"/><path d="M8 4v5h7M8 20v-6h8v6"/>',
|
|
validate: '<path d="M9 12l2 2 4-4"/><circle cx="12" cy="12" r="9"/>',
|
|
undo: '<path d="M9 7L4 12l5 5"/><path d="M4 12h11a5 5 0 0 1 0 10h-1"/>',
|
|
redo: '<path d="M15 7l5 5-5 5"/><path d="M20 12H9a5 5 0 0 0 0 10h1"/>',
|
|
tidy: '<path d="M4 6h16M4 12h10M4 18h7"/>',
|
|
zoomin: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3M11 8v6M8 11h6"/>',
|
|
zoomout: '<circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3M8 11h6"/>',
|
|
fit: '<path d="M4 9V5h4M20 9V5h-4M4 15v4h4M20 15v4h-4"/>',
|
|
chevdown: '<path d="M6 9l6 6 6-6"/>',
|
|
chevright: '<path d="M9 6l6 6-6 6"/>',
|
|
chevleft: '<path d="M15 6l-6 6 6 6"/>',
|
|
chevup: '<path d="M6 15l6-6 6 6"/>',
|
|
more: '<circle cx="5" cy="12" r="1.6"/><circle cx="12" cy="12" r="1.6"/><circle cx="19" cy="12" r="1.6"/>',
|
|
drag: '<circle cx="9" cy="6" r="1.4"/><circle cx="9" cy="12" r="1.4"/><circle cx="9" cy="18" r="1.4"/><circle cx="15" cy="6" r="1.4"/><circle cx="15" cy="12" r="1.4"/><circle cx="15" cy="18" r="1.4"/>',
|
|
copy: '<rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h8"/>',
|
|
trash: '<path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/>',
|
|
edit: '<path d="M4 20h4L18 10l-4-4L4 16z"/><path d="M13.5 6.5l4 4"/>',
|
|
external: '<path d="M14 4h6v6M20 4l-9 9M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5"/>',
|
|
eye: '<path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7-10-7-10-7z"/><circle cx="12" cy="12" r="3"/>',
|
|
eyeoff: '<path d="M4 4l16 16M10 5.2A9 9 0 0 1 12 5c6 0 10 7 10 7a18 18 0 0 1-3 3.5M6 6.5A18 18 0 0 0 2 12s4 7 10 7a9 9 0 0 0 3-.5"/>',
|
|
refresh: '<path d="M20 11a8 8 0 0 0-14-4M4 5v4h4M4 13a8 8 0 0 0 14 4M20 19v-4h-4"/>',
|
|
theme: '<circle cx="12" cy="12" r="4.5"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/>',
|
|
filter: '<path d="M4 5h16l-6 8v5l-4 2v-7z"/>',
|
|
upload: '<path d="M12 16V4M8 8l4-4 4 4M5 20h14"/>',
|
|
file: '<path d="M7 3h7l5 5v13H7z"/><path d="M14 3v5h5"/>',
|
|
link: '<path d="M9 12h6"/><path d="M10 8H7a4 4 0 0 0 0 8h3M14 8h3a4 4 0 0 1 0 8h-3"/>',
|
|
clock: '<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
|
|
lock: '<rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/>',
|
|
coins: '<ellipse cx="9" cy="7" rx="6" ry="3"/><path d="M3 7v5c0 1.7 2.7 3 6 3s6-1.3 6-3V7"/><path d="M15 11.5c2.5.4 6 1.5 6 3.5 0 1.7-2.7 3-6 3s-6-1.3-6-3"/>',
|
|
bolt: '<path d="M13 3L4 14h7l-1 7 9-11h-7z"/>',
|
|
db: '<ellipse cx="12" cy="5" rx="8" ry="3"/><path d="M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/>',
|
|
globe: '<circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18"/>',
|
|
layers: '<path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5M3 17l9 5 9-5"/>',
|
|
msg: '<path d="M4 5h16v11H9l-5 4z"/>',
|
|
user: '<circle cx="12" cy="8" r="4"/><path d="M5 21a7 7 0 0 1 14 0"/>',
|
|
logo: '<path d="M12 2l3 5 5.5 1-4 4 1 5.5L12 20l-5.5 2.5 1-5.5-4-4L9 7z"/>',
|
|
grid: '<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>',
|
|
list: '<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/>',
|
|
flame: '<path d="M12 3c1 3 4 4 4 8a4 4 0 0 1-8 0c0-1 .5-2 1-2.5C9 11 9.5 13 11 13c-.5-2 .5-3.5 1-4 .3 1 .5 1.5 1.5 2 .2-3-1.5-5-1.5-8z"/>',
|
|
sliders: '<path d="M4 21v-7M4 10V3M12 21v-9M12 8V3M20 21v-5M20 12V3M1 14h6M9 8h6M17 16h6"/>',
|
|
download: '<path d="M12 4v12M8 12l4 4 4-4M5 20h14"/>',
|
|
rotate: '<path d="M20 11a8 8 0 0 0-14-4M4 5v4h4"/><path d="M4 13a8 8 0 0 0 14 4M20 19v-4h-4"/>',
|
|
};
|
|
|
|
export type IconName = keyof typeof P | string;
|
|
|
|
export function Icon({
|
|
name,
|
|
size = 18,
|
|
strokeWidth = 1.5,
|
|
style,
|
|
className,
|
|
}: {
|
|
name: IconName;
|
|
size?: number;
|
|
strokeWidth?: number;
|
|
style?: CSSProperties;
|
|
className?: string;
|
|
}) {
|
|
const d = P[name];
|
|
if (!d) return null;
|
|
return (
|
|
<svg
|
|
width={size}
|
|
height={size}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={strokeWidth}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
style={style}
|
|
className={className}
|
|
aria-hidden
|
|
dangerouslySetInnerHTML={{ __html: d }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export const ICON_NAMES = Object.keys(P);
|