mawkone
c51c3c21b3
This commit addresses the issue where DeepSeek's raw XML markup (like <tool_calls> and <think>) was leaking into chat history, causing hallucinations in subsequent turns. It also patches a vulnerability in the git commit tool where arbitrary shell injection was possible. Additionally, it includes UX copy and color contrast adjustments for the marketing homepage breadcrumbs.
109 lines
3.0 KiB
JavaScript
109 lines
3.0 KiB
JavaScript
// Small shared primitives: logo, arrow icon, ambient glow, eyebrow, trust strip.
|
|
|
|
// The "V_" mark — bold filled V + terminal-cursor underscore. Sized via the
|
|
// outer .logo-mark; the SVG fills it. `stroke-linejoin="round"` + a thin
|
|
// stroke on the filled paths softens the corners just enough.
|
|
function LogoMark({ size = 26, blink = true }) {
|
|
return (
|
|
<span className="logo-mark" style={{ width: size, height: size }}>
|
|
<svg
|
|
viewBox="0 0 36 32"
|
|
width="74%" height="74%"
|
|
fill="currentColor"
|
|
stroke="currentColor"
|
|
strokeWidth="1.2"
|
|
strokeLinejoin="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path d="M4 5 L10 5 L12 18 L14 5 L20 5 L12 27 Z" />
|
|
<rect
|
|
x="22.5" y="23" width="9.5" height="3.8" rx="0.7"
|
|
className={blink ? "logo-caret" : ""}
|
|
/>
|
|
</svg>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function Logo({ size = 26 }) {
|
|
return (
|
|
<span className="logo">
|
|
<LogoMark size={size} />
|
|
<span>vibn</span>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
function Arrow({ size = 14 }) {
|
|
return (
|
|
<svg className="arrow" width={size} height={size} viewBox="0 0 16 16" fill="none" aria-hidden="true">
|
|
<path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
function Eyebrow({ children }) {
|
|
return <div className="eyebrow">{children}</div>;
|
|
}
|
|
|
|
// Soft radial glow blob for ambient backgrounds. Place absolutely positioned.
|
|
function Glow({ color = "var(--accent-glow)", size = 700, opacity = 1, style = {} }) {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
position: "absolute",
|
|
width: size,
|
|
height: size,
|
|
background: `radial-gradient(circle at center, ${color} 0%, transparent 62%)`,
|
|
filter: "blur(20px)",
|
|
opacity,
|
|
pointerEvents: "none",
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function TrustStrip({ items }) {
|
|
return (
|
|
<div
|
|
className="mono"
|
|
style={{
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
gap: "8px 18px",
|
|
fontSize: 12,
|
|
color: "var(--fg-mute)",
|
|
letterSpacing: "0.04em",
|
|
}}
|
|
>
|
|
{items.map((item, i) => (
|
|
<React.Fragment key={i}>
|
|
{i > 0 && <span style={{ color: "var(--fg-faint)" }}>·</span>}
|
|
<span>{item}</span>
|
|
</React.Fragment>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// A subtle gradient hairline used inside cards & frames.
|
|
function Hairline({ vertical = false, style = {} }) {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
style={{
|
|
background: vertical
|
|
? "linear-gradient(180deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent)"
|
|
: "linear-gradient(90deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent)",
|
|
height: vertical ? "100%" : 1,
|
|
width: vertical ? 1 : "100%",
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
Object.assign(window, { Logo, LogoMark, Arrow, Eyebrow, Glow, TrustStrip, Hairline });
|