Files
CLI-Anything/docs/hub/index.html
2026-04-24 10:15:28 +00:00

3201 lines
104 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CLI-Anything Hub</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
:root {
--bg: #09090b;
--surface: #18181b;
--surface-raised: #1e1e22;
--border: #27272a;
--border-subtle: #1f1f23;
--text: #fafafa;
--text-secondary: #a1a1aa;
--text-tertiary: #71717a;
--hero-neutral-top: #e7ecf2;
--hero-neutral-bottom: #b8c1cd;
--accent: #3b82f6;
--accent-muted: #2563eb;
--green: #22c55e;
--green-muted: rgba(34, 197, 94, 0.12);
--purple: #a78bfa;
--purple-muted: rgba(167, 139, 250, 0.12);
--radius: 8px;
--radius-sm: 6px;
}
/* ── Light theme ── */
[data-theme="light"] {
--bg: #ffffff;
--surface: #f4f4f5;
--surface-raised: #e4e4e7;
--border: #d4d4d8;
--border-subtle: #e4e4e7;
--text: #09090b;
--text-secondary: #52525b;
--text-tertiary: #71717a;
--hero-neutral-top: #7f8894;
--hero-neutral-bottom: #a8b1bc;
--accent: #2563eb;
--accent-muted: #1d4ed8;
--green: #16a34a;
--green-muted: rgba(22, 163, 74, 0.1);
--purple: #7c3aed;
--purple-muted: rgba(124, 58, 237, 0.1);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Nav bar ── */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1120px;
margin: 0 auto;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-subtle);
}
.nav-brand {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
text-decoration: none;
letter-spacing: -0.01em;
}
.nav-brand span { color: var(--text-tertiary); }
.nav-links {
display: flex;
align-items: center;
gap: 0.25rem;
}
.nav-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.7rem;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.8rem;
font-weight: 500;
border-radius: var(--radius-sm);
transition: color 0.15s, background 0.15s;
}
.nav-link:hover {
color: var(--text);
background: var(--surface);
}
.nav-link svg { width: 15px; height: 15px; flex-shrink: 0; }
.nav-link-stars {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.8rem;
padding: 0.1rem 0.45rem;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
font-size: 0.72rem;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
/* ── Theme toggle ── */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: none;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: color 0.15s, border-color 0.15s, background 0.15s;
flex-shrink: 0;
}
.theme-toggle:hover {
color: var(--text);
border-color: var(--text-tertiary);
background: var(--surface);
}
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
/* ── Hero ── */
.hero {
max-width: 1120px;
margin: 0 auto;
padding: 3.5rem 1.5rem 2.5rem;
text-align: center;
}
.hero-title {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.95rem;
margin-bottom: 0.82rem;
position: relative;
}
.hero-title-badge {
position: relative;
width: 3.25rem;
height: 3.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid rgba(148, 163, 184, 0.12);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)),
linear-gradient(135deg, rgba(59, 130, 246, 0.08), transparent 42%),
var(--surface);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.05),
inset 0 -1px 0 rgba(255, 255, 255, 0.02),
0 14px 34px rgba(2, 6, 23, 0.2);
overflow: hidden;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero-title-badge::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 36%, transparent 100%);
pointer-events: none;
}
.hero-title-badge svg {
width: 2.26rem;
height: 2.26rem;
overflow: visible;
}
.hero h1 {
font-size: 2.8rem;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
margin: 0;
display: inline-flex;
align-items: baseline;
gap: 0.18em;
flex-wrap: wrap;
justify-content: center;
}
.hero-word {
display: inline-block;
will-change: transform, opacity;
}
.js .hero-word {
opacity: 0;
transform: translateY(18px);
}
.motion-ready .hero-word--cli {
animation: hero-rise-in 0.72s cubic-bezier(0.2, 0.9, 0.2, 1) 0.06s both;
}
.motion-ready .hero-word--anything {
animation: hero-rise-in 0.82s cubic-bezier(0.2, 0.9, 0.2, 1) 0.18s both;
}
.motion-ready .hero-word--hub {
animation: hero-drop-in 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) 0.34s both;
}
.hero-accent { color: var(--accent); }
.hero-dim {
color: var(--hero-neutral-bottom);
background: linear-gradient(180deg, var(--hero-neutral-top) 0%, var(--hero-neutral-bottom) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
opacity: 0.9;
}
.hero-shimmer {
position: relative;
isolation: isolate;
}
.hero-shimmer::after {
content: attr(data-text);
position: absolute;
inset: 0;
color: transparent;
background: linear-gradient(115deg, transparent 22%, rgba(255,255,255,0.94) 48%, transparent 72%);
background-size: 220% 100%;
background-position: 145% 50%;
-webkit-background-clip: text;
background-clip: text;
opacity: 0;
pointer-events: none;
}
.motion-ready .hero-shimmer::after {
animation: hero-shimmer-pass 1.25s ease-out 0.66s 1 both;
}
.hero-tagline {
font-size: 1.15rem;
color: var(--text-secondary);
line-height: 1.6;
max-width: 700px;
margin: 0 auto 1.5rem;
letter-spacing: 0;
text-align: center;
white-space: normal;
}
.hero-tagline-line {
display: inline;
}
.js .hero-tagline-line {
opacity: 0;
transform: translateY(10px);
}
.hero-tagline-line--any {
color: var(--text);
font-weight: 600;
}
.motion-ready .hero-tagline-line--any {
animation: hero-tagline-in 0.62s ease-out 0.5s both;
}
.motion-ready .hero-tagline-line--rest {
animation: hero-tagline-in 0.62s ease-out 0.64s both;
}
.hero-tagline strong { color: var(--text); font-weight: 600; }
.motion-ready .hero-title-badge {
animation: hero-badge-in 0.68s cubic-bezier(0.2, 0.9, 0.2, 1) 0.02s both;
}
.motion-ready .hero-title-badge svg {
animation: hero-badge-float 4.2s ease-in-out 1.1s infinite;
}
.motion-ready .hero-badge-glow {
animation: hero-badge-pulse 4.2s ease-in-out 1.1s infinite;
}
.motion-ready .hero-badge-cursor {
animation: hero-badge-cursor 1.1s steps(1) infinite;
}
@keyframes hero-rise-in {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hero-drop-in {
from {
opacity: 0;
transform: translateY(-16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hero-tagline-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes hero-badge-in {
from {
opacity: 0;
transform: translateY(10px) scale(0.94);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes hero-badge-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-3px); }
}
@keyframes hero-badge-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.88; }
}
@keyframes hero-badge-cursor {
0%, 48% { opacity: 1; }
49%, 100% { opacity: 0.18; }
}
@keyframes hero-shimmer-pass {
0% {
opacity: 0;
background-position: 145% 50%;
}
12% {
opacity: 0.92;
}
78% {
opacity: 0.92;
}
100% {
opacity: 0;
background-position: -55% 50%;
}
}
@keyframes hero-stats-in {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── Empower card ── */
.empower-row {
display: flex;
gap: 1rem;
max-width: 1100px;
margin: 0 auto 1.5rem;
align-items: stretch;
}
.empower-card {
flex: 1;
min-width: 0;
margin: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 1.5rem 1.75rem;
text-align: left;
position: relative;
overflow: hidden;
}
.empower-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: var(--accent);
}
.empower-card h3 {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 0.85rem;
color: var(--text);
}
.empower-card h3 span { color: var(--accent); }
.install-row {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.52rem 0.75rem;
margin-bottom: 0.5rem;
}
.install-row:hover { border-color: var(--text-tertiary); }
.install-row code {
font-family: 'JetBrains Mono', monospace;
font-size: 0.78rem;
color: var(--text-secondary);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.install-row--wrap {
align-items: flex-start;
}
.install-row--wrap code {
white-space: normal;
overflow: visible;
text-overflow: clip;
overflow-wrap: anywhere;
word-break: break-word;
line-height: 1.45;
padding-top: 0.08rem;
}
.empower-note {
margin-top: 0.25rem;
font-size: 0.76rem;
color: var(--text-tertiary);
line-height: 1.5;
}
.empower-note strong {
color: var(--text-secondary);
font-weight: 600;
}
.empower-prompt {
margin-top: 0.85rem;
padding: 0.6rem 0.85rem;
background: rgba(59, 130, 246, 0.05);
border: 1px dashed rgba(59, 130, 246, 0.2);
border-radius: var(--radius);
font-size: 0.82rem;
color: var(--text-tertiary);
line-height: 1.5;
}
.empower-prompt strong { color: var(--text-secondary); font-weight: 600; }
.empower-prompt em { color: var(--accent); font-style: italic; }
.empower-available {
margin: 0.25rem 0 0.7rem;
font-size: 0.78rem;
color: var(--text-tertiary);
}
.empower-available a { color: var(--accent); text-decoration: none; }
.empower-available a:hover { text-decoration: underline; }
.empower-card.empower-self::before { background: var(--green); }
.empower-card.empower-self h3 span { color: var(--green); }
.typing-shell {
position: relative;
margin-bottom: 0.9rem;
padding: 0.8rem 0.92rem 0.88rem;
background:
linear-gradient(180deg, rgba(34, 197, 94, 0.06) 0%, rgba(34, 197, 94, 0.015) 100%),
radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 42%),
var(--bg);
border: 1px solid rgba(63, 63, 70, 0.95);
border-radius: 11px;
overflow: hidden;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 12px 28px rgba(0, 0, 0, 0.16);
}
.typing-shell::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 22%, transparent 78%, rgba(255, 255, 255, 0.025));
pointer-events: none;
}
.typing-shell-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.56rem;
position: relative;
z-index: 1;
}
.typing-shell-label {
display: inline-flex;
align-items: center;
gap: 0.42rem;
color: var(--text-tertiary);
font-size: 0.68rem;
font-style: italic;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.typing-shell-label::before {
content: '';
width: 0.42rem;
height: 0.42rem;
border-radius: 999px;
background: var(--green);
box-shadow: 0 0 14px rgba(34, 197, 94, 0.55);
flex-shrink: 0;
}
.typing-shell-copy {
position: relative;
z-index: 1;
}
.typing-shell-body {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 0.65rem;
min-height: 2.5rem;
padding: 0.76rem 0.82rem;
border-radius: 9px;
border: 1px solid rgba(63, 63, 70, 0.92);
background: linear-gradient(180deg, rgba(9, 9, 11, 0.74), rgba(9, 9, 11, 0.94));
}
.typing-shell-prompt {
color: var(--green);
font-family: 'JetBrains Mono', monospace;
font-size: 0.82rem;
font-weight: 500;
text-shadow: 0 0 16px rgba(34, 197, 94, 0.25);
flex-shrink: 0;
}
.typing-shell-code {
flex: 1;
min-width: 0;
display: inline-flex;
align-items: center;
font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem;
color: #d4d4d8;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
}
.typing-shell-text {
display: inline-block;
min-height: 1em;
}
.typing-shell-cursor {
width: 0.62ch;
height: 1.1em;
margin-left: 0.1rem;
border-radius: 1px;
background: linear-gradient(180deg, #fafafa, #a1a1aa);
box-shadow: 0 0 14px rgba(255, 255, 255, 0.2);
animation: typing-caret 1s steps(1) infinite;
flex-shrink: 0;
}
.typing-shell-subtitle {
position: relative;
z-index: 1;
margin-top: 0.55rem;
color: var(--text-tertiary);
font-size: 0.73rem;
font-style: italic;
line-height: 1.45;
}
@keyframes typing-caret {
0%, 48% { opacity: 1; }
49%, 100% { opacity: 0.2; }
}
.empower-self .cmd-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.38rem;
}
.empower-self .cmd-item {
display: grid;
grid-template-rows: auto auto;
align-content: start;
gap: 0.1rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.42rem 0.64rem 0.44rem;
min-height: 3.12rem;
}
.empower-self .cmd-item:hover { border-color: var(--text-tertiary); }
.empower-self .cmd-item .cmd-name {
color: var(--green);
font-family: 'JetBrains Mono', monospace;
font-weight: 500;
font-size: 0.76rem;
line-height: 1.18;
white-space: nowrap;
}
.empower-self .cmd-item .cmd-desc {
color: var(--text-tertiary);
font-size: 0.68rem;
line-height: 1.22;
letter-spacing: -0.01em;
}
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 1.1rem;
background: var(--text);
color: var(--bg);
text-decoration: none;
font-size: 0.85rem;
font-weight: 600;
border-radius: var(--radius-sm);
transition: opacity 0.15s;
border: none;
cursor: pointer;
}
.btn-primary:hover { opacity: 0.85; }
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.55rem 1.1rem;
background: transparent;
color: var(--text-secondary);
text-decoration: none;
font-size: 0.85rem;
font-weight: 500;
border-radius: var(--radius-sm);
border: 1px solid var(--border);
transition: border-color 0.15s, color 0.15s;
cursor: pointer;
}
.btn-secondary:hover { border-color: var(--text-tertiary); color: var(--text); }
.btn-secondary svg { width: 15px; height: 15px; }
.hero-hint {
font-size: 0.78rem;
color: var(--text-tertiary);
font-style: italic;
margin-bottom: 0.75rem;
}
.hero-hint a {
color: var(--text-tertiary);
text-decoration: underline;
text-decoration-style: dotted;
}
.hero-hint a:hover { color: var(--text-secondary); }
.hero-cta {
font-size: 0.95rem;
color: var(--text-secondary);
line-height: 1.65;
max-width: 700px;
margin: 0 auto;
}
.hero-cta em { color: var(--accent); font-style: normal; font-weight: 600; }
.hero-cta a { color: var(--accent); text-decoration: none; font-weight: 500; }
.hero-cta a:hover { text-decoration: underline; }
.stats {
display: inline-flex;
align-items: flex-start;
justify-content: center;
gap: 0;
margin: 0.45rem auto 1.45rem;
}
.js .stats {
opacity: 0;
transform: translateY(12px);
}
.motion-ready .stats {
animation: hero-stats-in 0.66s cubic-bezier(0.2, 0.9, 0.2, 1) 0.78s both;
}
.stat {
min-width: 8.5rem;
padding: 0 1.55rem;
position: relative;
text-align: center;
}
.stat + .stat::before {
content: '';
position: absolute;
left: 0;
top: 0.2rem;
bottom: 0.2rem;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(148, 163, 184, 0.32), transparent);
}
.stat-num {
font-size: 2.7rem;
line-height: 1;
font-weight: 800;
letter-spacing: -0.045em;
color: var(--accent);
font-variant-numeric: tabular-nums;
text-shadow: 0 10px 28px rgba(37, 99, 235, 0.16);
}
.stat-label {
margin-top: 0.38rem;
font-size: 0.73rem;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.09em;
font-weight: 600;
}
.chip-label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-tertiary);
background: var(--surface-raised);
padding: 0.15rem 0.45rem;
border-radius: 4px;
flex-shrink: 0;
}
.copy-btn {
background: none;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text-tertiary);
cursor: pointer;
padding: 0.2rem 0.45rem;
font-size: 0.7rem;
font-family: 'Inter', sans-serif;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.copy-btn:hover { color: var(--text); border-color: var(--text-tertiary); }
/* ── Divider ── */
.section-divider {
max-width: 1120px;
margin: 0 auto;
border-top: 1px solid var(--border-subtle);
}
.marketplace-prelude {
max-width: 1200px;
margin: 0 auto;
padding: 0.9rem 1.5rem 0;
}
.marketplace-prelude .typing-shell {
margin-bottom: 0;
}
/* ── Deck system ── */
.deck-stage {
--deck-peek: 72px;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.deck-viewport {
--deck-panel-width: calc(100% - var(--deck-peek));
width: calc(100% + var(--deck-peek));
margin-right: calc(var(--deck-peek) * -1);
position: relative;
overflow: hidden;
isolation: isolate;
touch-action: pan-y pinch-zoom;
}
.deck-viewport.dragging * { user-select: none; }
.deck-track {
display: flex;
width: max-content;
transition: transform 0.55s cubic-bezier(0.4, 0, 0.15, 1);
will-change: transform;
}
.deck-track.is-dragging { transition: none; }
.deck-panel {
position: relative;
width: var(--deck-panel-width);
min-width: var(--deck-panel-width);
flex-shrink: 0;
}
.deck-panel--public {
box-shadow: inset 1px 0 0 rgba(161, 161, 170, 0.55);
}
.deck-panel::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease;
z-index: 2;
}
.deck-track[data-active="harness"] .deck-panel--public::before {
background: linear-gradient(90deg, rgba(9, 9, 11, 0.4) 0%, rgba(9, 9, 11, 0.2) 48%, rgba(9, 9, 11, 0.05) 100%);
opacity: 1;
}
.deck-track[data-active="public"] .deck-panel--harness::before {
background: linear-gradient(270deg, rgba(9, 9, 11, 0.4) 0%, rgba(9, 9, 11, 0.2) 48%, rgba(9, 9, 11, 0.05) 100%);
opacity: 1;
}
[data-theme="light"] .deck-track[data-active="harness"] .deck-panel--public::before {
background: linear-gradient(90deg, rgba(250, 250, 250, 0.56) 0%, rgba(250, 250, 250, 0.28) 48%, rgba(250, 250, 250, 0.06) 100%);
}
[data-theme="light"] .deck-track[data-active="public"] .deck-panel--harness::before {
background: linear-gradient(270deg, rgba(250, 250, 250, 0.56) 0%, rgba(250, 250, 250, 0.28) 48%, rgba(250, 250, 250, 0.06) 100%);
}
/* ── Deck nav strip ── */
.deck-nav {
max-width: 1200px;
margin: 0 auto;
padding: 1.25rem 1.5rem 0;
display: flex;
align-items: center;
gap: 0;
}
.deck-tab {
position: relative;
padding: 0.6rem 1.25rem;
background: none;
border: none;
color: var(--text-tertiary);
font-size: 0.85rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
cursor: pointer;
transition: color 0.2s;
display: flex;
align-items: center;
gap: 0.5rem;
}
.deck-tab::after {
content: '';
position: absolute;
bottom: 0; left: 1.25rem; right: 1.25rem;
height: 2px;
background: transparent;
border-radius: 1px;
transition: background 0.2s;
}
.deck-tab:hover { color: var(--text-secondary); }
.deck-tab.active {
color: var(--text);
font-weight: 600;
}
.deck-tab.active::after {
background: var(--accent);
}
.deck-tab.active.deck-tab--public::after {
background: var(--orange);
}
.deck-tab .deck-count {
font-size: 0.7rem;
font-weight: 600;
padding: 0.1rem 0.45rem;
border-radius: 999px;
background: var(--surface-raised);
color: var(--text-tertiary);
transition: all 0.2s;
}
.deck-tab.active .deck-count {
background: rgba(59, 130, 246, 0.12);
color: var(--accent);
}
.deck-tab.active.deck-tab--public .deck-count {
background: rgba(234, 138, 46, 0.12);
color: var(--orange);
}
.deck-separator {
flex: 1;
height: 1px;
background: var(--border-subtle);
margin: 0 0.5rem;
}
.deck-arrow-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.4rem 0.85rem;
background: none;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-tertiary);
font-size: 0.75rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
}
.deck-arrow-btn:hover {
border-color: var(--text-tertiary);
color: var(--text-secondary);
background: var(--surface);
}
.deck-arrow-btn svg {
width: 14px;
height: 14px;
transition: transform 0.2s;
}
.deck-arrow-btn:hover svg {
transform: translateX(2px);
}
.deck-arrow-btn--back:hover svg {
transform: translateX(-2px);
}
/* ── Public deck accent ── */
:root {
--orange: #ea8a2e;
--orange-muted: rgba(234, 138, 46, 0.12);
}
[data-theme="light"] {
--orange: #c2711e;
--orange-muted: rgba(194, 113, 30, 0.1);
}
/* ── Controls ── */
.controls {
margin: 0;
padding: 1.15rem 1.5rem 0;
display: flex;
gap: 0.7rem;
flex-wrap: wrap;
align-items: center;
}
.search {
flex: 1;
min-width: 200px;
padding: 0.72rem 0.95rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
outline: none;
transition: border-color 0.15s;
}
.search::placeholder { color: var(--text-tertiary); }
.search:focus { border-color: var(--text-tertiary); }
.sort-select {
min-width: 168px;
padding: 0.78rem 2.7rem 0.78rem 1rem;
background:
linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
var(--surface) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="%23a1a1aa" d="M7 10.2 2.8 6h8.4z"/></svg>') no-repeat right 0.85rem center;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text);
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
font-weight: 600;
letter-spacing: -0.01em;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
outline: none;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s, transform 0.15s;
}
.sort-select:focus, .sort-select:hover {
border-color: var(--text-tertiary);
background-color: var(--surface-raised);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
[data-theme="light"] .sort-select {
background-image:
linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0)),
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14"><path fill="%2352525b" d="M7 10.2 2.8 6h8.4z"/></svg>');
}
.filter-row {
display: flex;
gap: 0.45rem;
row-gap: 0.55rem;
flex-wrap: wrap;
margin: 0;
padding: 0.85rem 1.5rem 0;
}
.deck-panel--harness .filter-row {
margin-right: calc(var(--deck-peek) * 0.58);
padding-right: 1.5rem;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-btn {
padding: 0.3rem 0.7rem;
background: transparent;
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-tertiary);
font-size: 0.8rem;
font-family: 'Inter', sans-serif;
font-weight: 500;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
flex-shrink: 0;
}
.filter-btn:hover { border-color: var(--text-tertiary); color: var(--text-secondary); }
.filter-btn.active {
background: var(--text);
color: var(--bg);
border-color: var(--text);
font-weight: 600;
}
/* ── Grid ── */
.grid {
margin: 1.25rem 0 4rem;
padding: 0 1.5rem;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.9rem;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 1.25rem;
transition: border-color 0.15s;
}
.card:hover { border-color: var(--text-tertiary); }
.card-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 0.4rem;
gap: 0.5rem;
}
.card-title {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
}
.card-title a {
color: var(--text);
text-decoration: none;
transition: color 0.15s;
}
.card-title a:hover { color: var(--accent); }
.card-title a svg {
width: 11px;
height: 11px;
margin-left: 3px;
vertical-align: middle;
opacity: 0;
transition: opacity 0.15s;
}
.card-title a:hover svg { opacity: 0.5; }
.card-meta {
display: flex;
align-items: center;
gap: 0.4rem;
flex-shrink: 0;
}
.card-version {
font-family: 'JetBrains Mono', monospace;
font-size: 0.7rem;
font-weight: 500;
color: var(--green);
background: var(--green-muted);
padding: 0.12rem 0.45rem;
border-radius: 999px;
}
.category-tag {
font-size: 0.7rem;
font-weight: 500;
color: var(--text-tertiary);
background: var(--surface-raised);
padding: 0.12rem 0.45rem;
border-radius: 999px;
border: 1px solid var(--border);
}
.card-desc {
color: var(--text-secondary);
font-size: 0.85rem;
margin-bottom: 0.85rem;
line-height: 1.55;
}
.card-requires {
font-size: 0.78rem;
color: var(--text-tertiary);
margin-bottom: 0.75rem;
}
.card-requires strong {
color: var(--text-secondary);
font-weight: 500;
}
.card-install {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 0.8rem 0.9rem 0.8rem 0.9rem;
position: relative;
margin-bottom: 0.75rem;
}
.card-install--note {
justify-content: flex-start;
}
.card-install code {
font-family: 'JetBrains Mono', monospace;
font-size: 0.75rem;
color: var(--text-secondary);
white-space: pre-wrap;
overflow-wrap: break-word;
word-break: normal;
line-height: 1.45;
display: block;
padding-top: 0.1rem;
}
.card-install code .install-comment {
display: block;
color: var(--text-tertiary);
font-style: italic;
margin-bottom: 0.22rem;
padding-right: 4.8rem;
}
.card-install code .install-command {
display: block;
}
.card-install code .install-command + .install-comment {
margin-top: 0.38rem;
}
.card-copy-btn {
background: none;
border: 1px solid var(--border);
border-radius: 4px;
color: var(--text-tertiary);
cursor: pointer;
padding: 0.2rem 0.45rem;
font-size: 0.7rem;
font-family: 'Inter', sans-serif;
transition: all 0.15s;
white-space: nowrap;
}
.card-install .card-copy-btn {
position: absolute;
top: 0.78rem;
right: 0.72rem;
}
.card-copy-btn:hover { color: var(--text); border-color: var(--text-tertiary); }
.card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-top: 0.85rem;
padding-top: 0.8rem;
border-top: 1px solid var(--border-subtle);
flex-wrap: wrap;
}
.card-links {
display: flex;
gap: 0.6rem;
font-size: 0.78rem;
flex-wrap: wrap;
align-items: center;
}
.card-links a,
.card-link-btn {
color: var(--text-tertiary);
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.card-link-btn {
background: none;
border: 0;
cursor: pointer;
font: inherit;
padding: 0;
}
.card-links a:hover,
.card-link-btn:hover { color: var(--text-secondary); }
.skill-popover {
position: relative;
display: inline-flex;
align-items: center;
}
.skill-popover-panel {
position: absolute;
left: 0;
top: calc(100% + 0.45rem);
width: min(18rem, calc(100vw - 3rem));
padding: 0.7rem;
border-radius: 10px;
border: 1px solid rgba(148, 163, 184, 0.36);
background: rgba(248, 250, 252, 0.98);
color: #0f172a;
box-shadow: 0 16px 32px rgba(15, 23, 42, 0.24);
opacity: 0;
transform: translateY(-4px);
pointer-events: none;
transition: opacity 0.16s ease, transform 0.16s ease;
z-index: 10;
}
.skill-popover.is-open .skill-popover-panel {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.skill-popover-label {
display: block;
font-size: 0.64rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #475569;
margin-bottom: 0.45rem;
}
.skill-popover-panel code {
display: block;
font-size: 0.75rem;
line-height: 1.55;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
font-family: 'JetBrains Mono', monospace;
background: rgba(226, 232, 240, 0.7);
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: 8px;
padding: 0.55rem 0.6rem;
}
.skill-popover-copy {
margin-top: 0.55rem;
color: #334155;
border-color: rgba(100, 116, 139, 0.34);
background: rgba(255, 255, 255, 0.72);
}
.skill-popover-copy:hover {
color: #0f172a;
border-color: rgba(51, 65, 85, 0.42);
}
.card-contributor {
font-size: 0.75rem;
color: var(--text-tertiary);
display: flex;
align-items: center;
gap: 0.3rem;
flex-wrap: wrap;
}
.card-contributor a {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
}
.card-contributor a:hover { color: var(--text); }
.community-badge {
font-size: 0.65rem;
font-weight: 600;
color: var(--purple);
background: var(--purple-muted);
padding: 0.08rem 0.35rem;
border-radius: 999px;
}
.card-date {
font-size: 0.72rem;
color: var(--text-tertiary);
margin-bottom: 0.75rem;
}
.public-badge {
font-size: 0.65rem;
font-weight: 600;
color: var(--text-tertiary);
background: var(--surface-raised);
border: 1px solid var(--border);
padding: 0.08rem 0.35rem;
border-radius: 999px;
}
.public-badge--npm {
color: #cb3837;
background: rgba(203, 56, 55, 0.1);
border-color: rgba(203, 56, 55, 0.14);
}
.public-badge--brew {
color: #8b5cf6;
background: rgba(139, 92, 246, 0.1);
border-color: rgba(139, 92, 246, 0.14);
}
.public-badge--bundled {
color: #64748b;
background: rgba(100, 116, 139, 0.1);
border-color: rgba(100, 116, 139, 0.14);
}
.card-public-notes {
display: grid;
gap: 0.45rem;
margin-top: 0.2rem;
margin-bottom: 0.1rem;
padding: 0.7rem 0.75rem;
background: var(--surface);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
}
.card-npx {
font-size: 0.75rem;
color: var(--text-tertiary);
padding: 0.55rem 0.65rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: calc(var(--radius-sm) - 2px);
line-height: 1.55;
}
.card-npx--direct {
display: flex;
align-items: flex-start;
gap: 0.38rem;
background: transparent;
border: 0;
border-left: 2px solid var(--border);
border-radius: 0;
padding: 0.05rem 0 0.05rem 0.7rem;
}
.card-npx--direct strong {
color: var(--text-secondary);
font-weight: 500;
white-space: nowrap;
}
.card-npx--direct span {
color: var(--text-tertiary);
overflow-wrap: anywhere;
word-break: break-word;
}
.card-npx--comment {
background: transparent;
border: 0;
border-left: 2px solid var(--border-subtle);
border-radius: 0;
padding: 0.05rem 0 0.05rem 0.7rem;
color: var(--text-secondary);
}
.card-npx code {
font-family: 'JetBrains Mono', monospace;
color: var(--text-secondary);
font-size: 0.73rem;
display: inline-block;
margin-top: 0.25rem;
overflow-wrap: anywhere;
word-break: break-word;
}
.public-panel-note {
padding: 0.75rem 1.5rem 0;
font-size: 0.74rem;
color: var(--text-tertiary);
line-height: 1.5;
}
.public-panel-note code {
font-family: 'JetBrains Mono', monospace;
font-size: 0.72rem;
color: var(--text-secondary);
}
.empty {
grid-column: 1 / -1;
text-align: center;
padding: 3rem;
color: var(--text-tertiary);
font-size: 0.9rem;
}
/* ── Footer ── */
.footer {
max-width: 1120px;
margin: 0 auto;
padding: 2rem 1.5rem;
border-top: 1px solid var(--border-subtle);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.footer-left {
font-size: 0.8rem;
color: var(--text-tertiary);
}
.footer-left a {
color: var(--text-secondary);
text-decoration: none;
font-weight: 500;
}
.footer-left a:hover { color: var(--text); }
.footer-right {
display: flex;
gap: 1rem;
font-size: 0.8rem;
}
.footer-right a {
color: var(--text-tertiary);
text-decoration: none;
font-weight: 500;
transition: color 0.15s;
}
.footer-right a:hover { color: var(--text-secondary); }
.footer-stats {
width: 100%;
display: flex;
justify-content: center;
padding-top: 1.1rem;
margin-top: 0.35rem;
}
.analytics-report {
width: min(780px, 100%);
padding: 0.95rem 1.2rem 0.9rem;
border: 1px solid var(--border-subtle);
border-radius: 14px;
background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0));
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Inter, sans-serif;
transition: border-color 0.2s ease, background 0.2s ease;
}
:root[data-theme="light"] .analytics-report {
background: linear-gradient(180deg, rgba(9,9,11,0.012), rgba(9,9,11,0));
}
.analytics-report:hover {
border-color: var(--border);
}
.analytics-report-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}
.analytics-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-tertiary);
}
.analytics-eyebrow::before {
content: "";
width: 0.4rem;
height: 0.4rem;
border-radius: 999px;
background: var(--green);
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
animation: analyticsPulse 2.4s ease-in-out infinite;
}
@keyframes analyticsPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
.analytics-legend {
display: inline-flex;
align-items: center;
gap: 1rem;
font-size: 0.7rem;
color: var(--text-tertiary);
letter-spacing: 0.01em;
}
.analytics-legend-item {
display: inline-flex;
align-items: center;
gap: 0.42rem;
}
.analytics-dot {
width: 0.42rem;
height: 0.42rem;
border-radius: 999px;
background: var(--text-tertiary);
flex-shrink: 0;
}
.analytics-dot.human { background: var(--green); }
.analytics-dot.agent { background: var(--accent); }
.analytics-report-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
}
.analytics-stat {
display: flex;
flex-direction: column;
gap: 0.42rem;
min-width: 0;
}
.analytics-stat + .analytics-stat {
border-left: 1px solid var(--border-subtle);
padding-left: 1.5rem;
}
.analytics-stat-label {
font-size: 0.7rem;
font-weight: 500;
color: var(--text-secondary);
letter-spacing: 0;
line-height: 1;
}
.analytics-stat-value {
display: block;
font-size: 1.55rem;
font-weight: 600;
line-height: 1;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.04em;
white-space: nowrap;
}
.analytics-bar {
position: relative;
display: flex;
width: 100%;
height: 2px;
border-radius: 999px;
background: var(--border-subtle);
overflow: hidden;
}
.analytics-bar > span {
display: block;
height: 100%;
transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.analytics-bar .bar-human {
background: var(--green);
}
.analytics-bar .bar-agent {
background: var(--accent);
}
.analytics-split {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 1.1rem;
margin: 0;
}
.analytics-split-item {
display: inline-flex;
align-items: baseline;
gap: 0.42rem;
min-width: 0;
}
.analytics-split-item dt {
display: inline-flex;
align-items: center;
gap: 0.34rem;
font-size: 0.68rem;
color: var(--text-tertiary);
letter-spacing: 0.01em;
line-height: 1;
margin: 0;
}
.analytics-split-item dd {
display: inline-flex;
align-items: baseline;
gap: 0.34rem;
margin: 0;
min-width: 0;
}
.analytics-split-num {
font-size: 0.82rem;
font-weight: 500;
color: var(--text);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
line-height: 1;
white-space: nowrap;
}
.analytics-split-pct {
font-size: 0.68rem;
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
letter-spacing: 0;
line-height: 1;
}
/* ── Responsive ── */
@media (max-width: 640px) {
.deck-stage { --deck-peek: 46px; }
.hero { padding: 2rem 1.25rem 1.5rem; }
.hero h1 { font-size: 2rem; }
.hero-title {
gap: 0.72rem;
align-items: flex-start;
}
.hero-title-badge {
width: 2.7rem;
height: 2.7rem;
border-radius: 11px;
}
.hero-title-badge svg {
width: 1.84rem;
height: 1.84rem;
}
.stats {
display: flex;
width: 100%;
justify-content: center;
gap: 0;
}
.stat {
min-width: 0;
flex: 1;
padding: 0 1rem;
}
.stat + .stat::before {
top: 0.1rem;
bottom: 0.1rem;
}
.stat-num {
font-size: 2.2rem;
}
.hero-tagline { white-space: normal; }
.grid { grid-template-columns: 1fr; padding: 0 1.25rem; }
.controls { padding: 1rem 1.25rem 0; }
.filter-row {
gap: 0.4rem;
row-gap: 0.5rem;
padding: 0.75rem 1.25rem 0;
}
.public-panel-note { padding: 0.7rem 1.25rem 0; }
.deck-panel--harness .filter-row {
margin-right: calc(var(--deck-peek) * 0.5);
padding-right: 1.25rem;
}
.marketplace-prelude { padding: 0.75rem 1.25rem 0; }
.nav { padding: 0.75rem 1.25rem; }
.footer { padding: 1.5rem 1.25rem; flex-direction: column; align-items: flex-start; }
.empower-row { flex-direction: column; }
.empower-card { margin: 0 0 1rem; padding: 1.25rem; }
.typing-shell { padding: 0.72rem 0.78rem 0.8rem; }
.typing-shell-head { align-items: flex-start; }
.typing-shell-body { padding: 0.72rem 0.74rem; }
.typing-shell-code { font-size: 0.74rem; }
.empower-self .cmd-grid { grid-template-columns: 1fr; }
.deck-nav { padding: 1.25rem 1.25rem 0; }
.deck-arrow-btn span { display: none; }
.analytics-report {
padding: 0.85rem 1rem 0.8rem;
border-radius: 12px;
}
.analytics-report-head {
gap: 0.75rem;
margin-bottom: 0.65rem;
}
.analytics-report-grid {
grid-template-columns: 1fr;
gap: 0.75rem;
}
.analytics-stat + .analytics-stat {
border-left: none;
border-top: 1px solid var(--border-subtle);
padding-left: 0;
padding-top: 0.75rem;
}
.analytics-stat-value { font-size: 1.4rem; }
}
@media (max-width: 1120px) {
.grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 400px) {
.nav-links { gap: 0; }
.nav-link { padding: 0.4rem 0.4rem; font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
.hero-word,
.hero-tagline-line {
opacity: 1;
transform: none;
}
.hero-shimmer::after,
.hero-title-badge,
.hero-badge-glow,
.hero-badge-cursor,
.typing-shell-cursor {
animation: none !important;
}
}
</style>
<script>document.documentElement.classList.add('js');</script>
<!-- Analytics provider is configured in the footer script. -->
</head>
<body>
<!-- Nav -->
<nav class="nav">
<a class="nav-brand" href="#">CLI-Hub</a>
<div class="nav-links">
<a class="nav-link" href="https://reeceyang.sgp1.cdn.digitaloceanspaces.com/SKILL.md" target="_blank">
SKILL
</a>
<a class="nav-link" href="https://github.com/HKUDS/CLI-Anything" target="_blank">
<svg viewBox="0 0 98 96" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6C29.304 70.25 17.9 66.013 17.9 47.02c0-5.52 1.94-10.046 5.127-13.58-.486-1.302-2.264-6.437.486-13.34 0 0 4.206-1.302 13.59 5.216 3.963-1.14 8.17-1.628 12.34-1.628 4.17 0 8.376.568 12.34 1.628 9.384-6.518 13.59-5.216 13.59-5.216 2.75 6.903.972 12.038.486 13.34 3.268 3.534 5.127 8.06 5.127 13.58 0 19.074-11.485 23.15-22.328 24.29 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/></svg>
GitHub
<span class="nav-link-stars" data-github-stars aria-label="GitHub star count">--</span>
</a>
<a class="nav-link" href="https://github.com/HKUDS/CLI-Anything/blob/main/CONTRIBUTING.md" target="_blank">
Contribute
</a>
<button class="theme-toggle" onclick="toggleTheme()" aria-label="Toggle theme">
<svg class="icon-sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
<svg class="icon-moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
</button>
</div>
</nav>
<!-- Hero -->
<div class="hero">
<div class="hero-title">
<span class="hero-title-badge" aria-hidden="true">
<svg viewBox="0 0 48 48" fill="none">
<path d="M8 16.5 18.5 24 8 31.5" stroke="currentColor" stroke-width="3.9" stroke-linecap="square" stroke-linejoin="miter" style="color: var(--accent);" />
<path d="M24 29.2h16" stroke="currentColor" stroke-width="3.9" stroke-linecap="square" class="hero-badge-cursor" style="color: rgba(248,250,252,0.98);" />
<path d="M26 12h14" stroke="url(#heroBadgeBeam)" stroke-width="2.6" stroke-linecap="square" class="hero-badge-glow" opacity="0.78" />
<path d="M7 10.5h9" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" style="color: rgba(148,163,184,0.48);" />
<path d="M7 37.5h11" stroke="currentColor" stroke-width="1.8" stroke-linecap="square" style="color: rgba(96,165,250,0.3);" />
<defs>
<linearGradient id="heroBadgeBeam" x1="26" y1="12" x2="40" y2="12" gradientUnits="userSpaceOnUse">
<stop stop-color="#60A5FA" stop-opacity="0" />
<stop offset="0.52" stop-color="#93C5FD" />
<stop offset="1" stop-color="#60A5FA" stop-opacity="0" />
</linearGradient>
</defs>
</svg>
</span>
<h1>
<span class="hero-word hero-word--cli hero-accent">CLI-</span>
<span class="hero-word hero-word--anything hero-dim hero-shimmer" data-text="Anything">Anything</span>
<span class="hero-word hero-word--hub hero-accent">Hub</span>
</h1>
</div>
<p class="hero-tagline"><span class="hero-tagline-line hero-tagline-line--any">Any software. Any codebase. Any Web API.</span> <span class="hero-tagline-line hero-tagline-line--rest">Generate an agent-native CLI and let AI agents operate it &mdash; install with a single command.</span></p>
<div class="stats">
<div class="stat">
<div class="stat-num" id="cli-count">&mdash;</div>
<div class="stat-label">CLIs Available</div>
</div>
<div class="stat">
<div class="stat-num" id="category-count">&mdash;</div>
<div class="stat-label">Categories</div>
</div>
</div>
<div class="empower-row">
<div class="empower-card">
<h3>Empower your agents &mdash; <span>install in one command</span></h3>
<p class="empower-available">Also Available on: <a href="https://clawhub.ai/yuh-yang/cli-anything-hub" target="_blank">ClawHub</a>, <a href="https://www.skillhub.club/web/skills/itsyuhao-cli-anything-hub" target="_blank">SkillHub</a>, <a href="https://skillhub.cn/skills/cli-hub-meta-skill" target="_blank">SkillHub.cn</a></p>
<div class="install-row install-row--wrap">
<span class="chip-label">npx skills</span>
<code>npx skills add HKUDS/CLI-Anything --skill cli-hub-meta-skill -g -y</code>
<button class="copy-btn" onclick="copyCmd(this, 'npx skills add HKUDS/CLI-Anything --skill cli-hub-meta-skill -g -y')">Copy</button>
</div>
<p class="empower-note"><strong>Works with:</strong> OpenClaw, Nanobot, Claude Code, Codex, Antigravity, and other SKILL-compatible agents.</p>
<div class="empower-prompt">
<strong>Then prompt:</strong> <em>"Find appropriate CLI software in CLI-Hub and complete the task: ..."</em>
</div>
</div>
<div class="empower-card empower-self">
<h3>Empower yourself &mdash; <span>your CLI toolkit</span></h3>
<div class="install-row install-row--wrap">
<span class="chip-label">pip</span>
<code>pip install cli-anything-hub</code>
<button class="copy-btn" onclick="copyCmd(this, 'pip install cli-anything-hub')">Copy</button>
</div>
<div class="cmd-grid">
<div class="cmd-item"><span class="cmd-name">cli-hub list</span><span class="cmd-desc">Browse the registry</span></div>
<div class="cmd-item"><span class="cmd-name">cli-hub search</span><span class="cmd-desc">Search by keyword</span></div>
<div class="cmd-item"><span class="cmd-name">cli-hub install</span><span class="cmd-desc">Install from CLI-Hub</span></div>
<div class="cmd-item"><span class="cmd-name">cli-hub info</span><span class="cmd-desc">Inspect one CLI</span></div>
<div class="cmd-item"><span class="cmd-name">cli-hub update</span><span class="cmd-desc">Update an install</span></div>
<div class="cmd-item"><span class="cmd-name">cli-hub uninstall</span><span class="cmd-desc">Remove an install</span></div>
</div>
</div>
</div>
<div class="hero-actions">
<a class="btn-primary" href="https://reeceyang.sgp1.cdn.digitaloceanspaces.com/SKILL.md" target="_blank">Agent SKILL (SKILL.md)</a>
<a class="btn-secondary" href="https://github.com/HKUDS/CLI-Anything" target="_blank">
<svg viewBox="0 0 98 96" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6C29.304 70.25 17.9 66.013 17.9 47.02c0-5.52 1.94-10.046 5.127-13.58-.486-1.302-2.264-6.437.486-13.34 0 0 4.206-1.302 13.59 5.216 3.963-1.14 8.17-1.628 12.34-1.628 4.17 0 8.376.568 12.34 1.628 9.384-6.518 13.59-5.216 13.59-5.216 2.75 6.903.972 12.038.486 13.34 3.268 3.534 5.127 8.06 5.127 13.58 0 19.074-11.485 23.15-22.328 24.29 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"/></svg>
Star on GitHub
</a>
<a class="btn-secondary" href="https://github.com/HKUDS/CLI-Anything/blob/main/CONTRIBUTING.md" target="_blank">
Contributing Guide
</a>
<a class="btn-secondary" href="https://github.com/HKUDS/CLI-Anything/blob/main/.github/PULL_REQUEST_TEMPLATE.md" target="_blank">
PR Template
</a>
</div>
<p class="hero-hint">Feed <a href="https://reeceyang.sgp1.cdn.digitaloceanspaces.com/SKILL.md" target="_blank">SKILL.md</a> to your AI agent for autonomous CLI discovery &amp; installation</p>
<p class="hero-cta">We welcome contributions for <em>any</em> application &mdash; desktop apps, dev tools, cloud services, SaaS APIs, creative suites, and beyond. If it has a GUI or an API, it deserves an agent-native CLI. Read the <a href="https://github.com/HKUDS/CLI-Anything/blob/main/CONTRIBUTING.md" target="_blank">Contributing Guide</a>, use the <a href="https://github.com/HKUDS/CLI-Anything/blob/main/.github/PULL_REQUEST_TEMPLATE.md" target="_blank">PR Template</a>, and bring it to the hub!</p>
</div>
<div class="marketplace-prelude">
<div class="typing-shell" data-typing-text="pip install cli-anything-hub">
<div class="typing-shell-head">
<span class="typing-shell-label">install first, then browse the marketplace</span>
<button class="copy-btn typing-shell-copy" onclick="copyCmd(this, 'pip install cli-anything-hub')">Copy</button>
</div>
<div class="typing-shell-body" aria-label="pip install cli-anything-hub">
<span class="typing-shell-prompt">$</span>
<code class="typing-shell-code"><span class="typing-shell-text" data-typing-target></span><span class="typing-shell-cursor" aria-hidden="true"></span></code>
</div>
</div>
</div>
<!-- Deck nav -->
<div class="deck-nav">
<button class="deck-tab active" data-deck="harness" onclick="switchDeck('harness')">
CLI-Anything CLIs
<span class="deck-count" id="deck-count-harness">&mdash;</span>
</button>
<button class="deck-tab deck-tab--public" data-deck="public" onclick="switchDeck('public')">
Public CLIs
<span class="deck-count" id="deck-count-public">&mdash;</span>
</button>
<span class="deck-separator"></span>
<button class="deck-arrow-btn" id="deck-toggle" onclick="toggleDeck()">
<span>Public CLIs</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
</button>
</div>
<!-- Deck viewport -->
<div class="deck-stage">
<div class="deck-viewport">
<div class="deck-track" id="deck-track" data-active="harness">
<!-- Harness deck -->
<div class="deck-panel deck-panel--harness" data-peek-label="CLI-Anything">
<div class="controls">
<input class="search" type="text" placeholder="Search CLIs..." id="search-harness">
<select class="sort-select" id="sort-harness">
<option value="updated">Last updated</option>
<option value="name">Name</option>
<option value="category">Category</option>
</select>
</div>
<div class="filter-row" id="filters-harness"></div>
<div class="grid" id="grid-harness"></div>
</div>
<!-- Public CLI deck -->
<div class="deck-panel deck-panel--public" data-peek-label="Public CLIs">
<div class="controls">
<input class="search" type="text" placeholder="Search public CLIs..." id="search-public">
<select class="sort-select" id="sort-public">
<option value="updated">Last updated</option>
<option value="name">Name</option>
<option value="category">Category</option>
</select>
</div>
<div class="public-panel-note">
Public CLIs remain the property of their respective software owners and maintainers. All rights stay with those owners; CLI-Hub only helps you discover and install them.
</div>
<div class="filter-row" id="filters-public"></div>
<div class="grid" id="grid-public"></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div class="footer-left">
Want to add or update a CLI? Read the <a href="https://github.com/HKUDS/CLI-Anything/blob/main/CONTRIBUTING.md" target="_blank">Contributing Guide</a> and use the <a href="https://github.com/HKUDS/CLI-Anything/blob/main/.github/PULL_REQUEST_TEMPLATE.md" target="_blank">PR Template</a>
</div>
<div class="footer-right">
Powered by <a href="https://github.com/HKUDS/CLI-Anything" target="_blank">CLI-Anything</a>
</div>
<div class="footer-stats">
<section class="analytics-report" aria-label="Traffic snapshot">
<header class="analytics-report-head">
<span class="analytics-eyebrow">Live traffic</span>
<span class="analytics-legend" aria-hidden="true">
<span class="analytics-legend-item"><span class="analytics-dot human"></span>Human</span>
<span class="analytics-legend-item"><span class="analytics-dot agent"></span>Agent</span>
</span>
</header>
<div class="analytics-report-grid">
<article class="analytics-stat">
<span class="analytics-stat-label">Website visits</span>
<strong id="stat-total" class="analytics-stat-value">...</strong>
<div class="analytics-bar" aria-hidden="true">
<span class="bar-human" id="bar-site-human" style="width: 0%"></span>
<span class="bar-agent" id="bar-site-agent" style="width: 0%"></span>
</div>
<dl class="analytics-split">
<div class="analytics-split-item">
<dt><span class="analytics-dot human"></span>Human</dt>
<dd><span id="stat-human" class="analytics-split-num">...</span><span id="pct-site-human" class="analytics-split-pct">...</span></dd>
</div>
<div class="analytics-split-item">
<dt><span class="analytics-dot agent"></span>Agent</dt>
<dd><span id="stat-agent" class="analytics-split-num">...</span><span id="pct-site-agent" class="analytics-split-pct">...</span></dd>
</div>
</dl>
</article>
<article class="analytics-stat">
<span class="analytics-stat-label">CLI-Hub usage</span>
<strong id="stat-cli-total" class="analytics-stat-value">...</strong>
<div class="analytics-bar" aria-hidden="true">
<span class="bar-human" id="bar-cli-human" style="width: 0%"></span>
<span class="bar-agent" id="bar-cli-agent" style="width: 0%"></span>
</div>
<dl class="analytics-split">
<div class="analytics-split-item">
<dt><span class="analytics-dot human"></span>Human</dt>
<dd><span id="stat-cli-human" class="analytics-split-num">...</span><span id="pct-cli-human" class="analytics-split-pct">...</span></dd>
</div>
<div class="analytics-split-item">
<dt><span class="analytics-dot agent"></span>Agent</dt>
<dd><span id="stat-cli-agent" class="analytics-split-num">...</span><span id="pct-cli-agent" class="analytics-split-pct">...</span></dd>
</div>
</dl>
</article>
</div>
</section>
</div>
</footer>
<script>
// ── Theme: system preference + localStorage override ──
function getPreferredTheme() {
const stored = localStorage.getItem('theme');
if (stored) return stored;
return window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
}
function applyTheme(theme) {
document.documentElement.setAttribute('data-theme', theme);
}
function toggleTheme() {
const current = document.documentElement.getAttribute('data-theme') || 'dark';
const next = current === 'dark' ? 'light' : 'dark';
applyTheme(next);
localStorage.setItem('theme', next);
}
// Apply immediately to avoid flash
applyTheme(getPreferredTheme());
// Listen for system preference changes (if no manual override)
window.matchMedia('(prefers-color-scheme: light)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
applyTheme(e.matches ? 'light' : 'dark');
}
});
const REPO = 'https://github.com/HKUDS/CLI-Anything';
const GITHUB_REPO_API = 'https://api.github.com/repos/HKUDS/CLI-Anything';
const REPO_SKILLS_SOURCE = 'HKUDS/CLI-Anything';
const REGISTRY_URLS = [
'../../registry.json',
'https://raw.githubusercontent.com/HKUDS/CLI-Anything/main/registry.json'
];
const PUBLIC_REGISTRY_URLS = [
'../../public_registry.json',
'https://raw.githubusercontent.com/HKUDS/CLI-Anything/main/public_registry.json'
];
const DATES_URLS = [
'https://hkuds.github.io/CLI-Anything/registry-dates.json',
'../../registry-dates.json'
];
const EXTERNAL_LINK_SVG = '<svg viewBox="0 0 16 16" fill="currentColor"><path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5H4.56l6.72 6.72a.75.75 0 1 1-1.06 1.06L3.5 4.56v2.69a.75.75 0 0 1-1.5 0v-3.5A1.75 1.75 0 0 1 3.75 2Zm7.5 0h1A1.75 1.75 0 0 1 14 3.75v8.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-1a.75.75 0 0 1 1.5 0v1c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-8.5a.25.25 0 0 0-.25-.25h-1a.75.75 0 0 1 0-1.5Z"/></svg>';
let harnessClis = [];
let publicClis = [];
let activeDeck = 'harness';
let wheelSwitchLockUntil = 0;
const deckGesture = {
pointerId: null,
startX: 0,
deltaX: 0,
dragging: false,
};
// Per-deck state
const deckState = {
harness: { filter: 'all', sort: 'updated', query: '' },
public: { filter: 'all', sort: 'updated', query: '' },
};
async function fetchJson(urls) {
for (const url of urls) {
try {
const resp = await fetch(url);
if (resp.ok) return await resp.json();
} catch (_) { continue; }
}
return null;
}
function formatCompactCount(value) {
return new Intl.NumberFormat('en', {
notation: 'compact',
maximumFractionDigits: value >= 10000 ? 0 : 1,
}).format(value);
}
async function loadGitHubStars() {
try {
const resp = await fetch(GITHUB_REPO_API, {
headers: { 'Accept': 'application/vnd.github+json' }
});
if (!resp.ok) return;
const repo = await resp.json();
const stars = repo.stargazers_count;
if (typeof stars !== 'number') return;
document.querySelectorAll('[data-github-stars]').forEach(el => {
el.textContent = formatCompactCount(stars);
el.setAttribute('aria-label', `${stars.toLocaleString('en-US')} GitHub stars`);
el.title = `${stars.toLocaleString('en-US')} GitHub stars`;
});
} catch (_) {
// Keep fallback placeholder when GitHub API is unavailable.
}
}
async function loadRegistries() {
try {
const [harnessData, publicData, dates] = await Promise.all([
fetchJson(REGISTRY_URLS),
fetchJson(PUBLIC_REGISTRY_URLS),
fetchJson(DATES_URLS),
]);
if (!harnessData) throw new Error('Registry load failed');
harnessClis = harnessData.clis;
if (dates) harnessClis.forEach(c => c.last_modified = dates[c.name]);
if (publicData && publicData.clis) {
publicClis = publicData.clis;
if (dates) publicClis.forEach(c => c.last_modified = dates[c.name]);
}
// Update counts
const totalClis = harnessClis.length + publicClis.length;
const allCategories = [...new Set([...harnessClis, ...publicClis].map(c => c.category))];
animateCount(document.getElementById('cli-count'), totalClis, 980);
animateCount(document.getElementById('category-count'), allCategories.length, 860);
document.getElementById('deck-count-harness').textContent = harnessClis.length;
document.getElementById('deck-count-public').textContent = publicClis.length;
// Build filters for harness deck (initial)
const harnessCats = [...new Set(harnessClis.map(c => c.category))];
buildFilters('harness', harnessCats);
const publicCats = [...new Set(publicClis.map(c => c.category))];
buildFilters('public', publicCats);
renderDeck('harness');
renderDeck('public');
} catch (e) {
document.getElementById('grid-harness').innerHTML =
'<div class="empty">Failed to load registry. <a href="' + REPO + '/blob/main/registry.json" style="color:var(--accent)">View source</a></div>';
}
}
const CATEGORY_LABELS = { 'ai': 'AI', '3d': '3D' };
function catLabel(cat) {
return CATEGORY_LABELS[cat] || cat.charAt(0).toUpperCase() + cat.slice(1);
}
function buildFilters(deck, categories) {
const container = document.getElementById('filters-' + deck);
container.innerHTML = '';
const allBtn = document.createElement('button');
allBtn.className = 'filter-btn active';
allBtn.textContent = 'All';
allBtn.dataset.cat = 'all';
allBtn.dataset.deck = deck;
allBtn.onclick = () => setFilter(deck, 'all');
container.appendChild(allBtn);
categories.sort().forEach(cat => {
const btn = document.createElement('button');
btn.className = 'filter-btn';
btn.textContent = catLabel(cat);
btn.dataset.cat = cat;
btn.dataset.deck = deck;
btn.onclick = () => setFilter(deck, cat);
container.appendChild(btn);
});
}
function setFilter(deck, cat) {
deckState[deck].filter = cat;
document.querySelectorAll(`#filters-${deck} .filter-btn`).forEach(b => {
b.classList.toggle('active', b.dataset.cat === cat);
});
renderDeck(deck);
}
function switchDeck(deck) {
activeDeck = deck;
const track = document.getElementById('deck-track');
track.dataset.active = deck;
updateDeckPosition();
document.querySelectorAll('.deck-tab').forEach(t => {
t.classList.toggle('active', t.dataset.deck === deck);
});
// Update toggle button
const toggle = document.getElementById('deck-toggle');
if (deck === 'harness') {
toggle.querySelector('span').textContent = 'Public CLIs';
toggle.querySelector('svg').innerHTML = '<polyline points="9 18 15 12 9 6"/>';
toggle.classList.remove('deck-arrow-btn--back');
} else {
toggle.querySelector('span').textContent = 'CLI-Anything CLIs';
toggle.querySelector('svg').innerHTML = '<polyline points="15 18 9 12 15 6"/>';
toggle.classList.add('deck-arrow-btn--back');
}
}
function toggleDeck() {
switchDeck(activeDeck === 'harness' ? 'public' : 'harness');
}
function getDeckMetrics() {
const stage = document.querySelector('.deck-stage');
const viewport = document.querySelector('.deck-viewport');
const track = document.getElementById('deck-track');
if (!stage || !viewport || !track) return null;
const peek = parseFloat(getComputedStyle(stage).getPropertyValue('--deck-peek')) || 0;
const panelWidth = Math.max(viewport.clientWidth - peek, 0);
return {
viewport,
track,
panelWidth,
maxShift: Math.max(panelWidth - peek, 0),
};
}
function setDeckTransform(offset = 0) {
const metrics = getDeckMetrics();
if (!metrics) return;
const { viewport, track, panelWidth, maxShift } = metrics;
viewport.style.setProperty('--deck-panel-width', `${panelWidth}px`);
const baseShift = activeDeck === 'public' ? -maxShift : 0;
const clampedShift = Math.min(0, Math.max(-maxShift, baseShift + offset));
track.style.transform = `translateX(${clampedShift}px)`;
}
function updateDeckPosition() {
setDeckTransform();
}
function finishDeckDrag() {
const viewport = document.querySelector('.deck-viewport');
const track = document.getElementById('deck-track');
if (viewport) viewport.classList.remove('dragging');
if (track) track.classList.remove('is-dragging');
deckGesture.pointerId = null;
deckGesture.startX = 0;
deckGesture.deltaX = 0;
deckGesture.dragging = false;
}
function initDeckGestures() {
const viewport = document.querySelector('.deck-viewport');
const track = document.getElementById('deck-track');
if (!viewport || !track) return;
const isInteractiveTarget = (target) => !!target.closest('a, button, input, select, textarea, label');
viewport.addEventListener('pointerdown', (e) => {
if (e.pointerType === 'mouse' && e.button !== 0) return;
if (isInteractiveTarget(e.target)) return;
deckGesture.pointerId = e.pointerId;
deckGesture.startX = e.clientX;
deckGesture.deltaX = 0;
deckGesture.dragging = true;
viewport.classList.add('dragging');
track.classList.add('is-dragging');
if (viewport.setPointerCapture) viewport.setPointerCapture(e.pointerId);
});
viewport.addEventListener('pointermove', (e) => {
if (!deckGesture.dragging || e.pointerId !== deckGesture.pointerId) return;
deckGesture.deltaX = e.clientX - deckGesture.startX;
setDeckTransform(deckGesture.deltaX);
});
const endDrag = (e) => {
if (!deckGesture.dragging || e.pointerId !== deckGesture.pointerId) return;
const deltaX = deckGesture.deltaX;
finishDeckDrag();
if (activeDeck === 'harness' && deltaX < -60) {
switchDeck('public');
return;
}
if (activeDeck === 'public' && deltaX > 60) {
switchDeck('harness');
return;
}
updateDeckPosition();
};
viewport.addEventListener('pointerup', endDrag);
viewport.addEventListener('pointercancel', endDrag);
viewport.addEventListener('lostpointercapture', () => {
if (!deckGesture.dragging) return;
finishDeckDrag();
updateDeckPosition();
});
viewport.addEventListener('wheel', (e) => {
const now = Date.now();
if (now < wheelSwitchLockUntil) return;
if (Math.abs(e.deltaX) < 24 || Math.abs(e.deltaX) <= Math.abs(e.deltaY)) return;
e.preventDefault();
if (e.deltaX > 0 && activeDeck !== 'public') {
switchDeck('public');
wheelSwitchLockUntil = now + 450;
} else if (e.deltaX < 0 && activeDeck !== 'harness') {
switchDeck('harness');
wheelSwitchLockUntil = now + 450;
}
}, { passive: false });
}
function renderDeck(deck) {
const clis = deck === 'harness' ? harnessClis : publicClis;
const state = deckState[deck];
const query = state.query.toLowerCase();
const filtered = clis.filter(c => {
const matchFilter = state.filter === 'all' || c.category === state.filter;
const matchSearch = !query ||
c.display_name.toLowerCase().includes(query) ||
c.description.toLowerCase().includes(query) ||
c.name.toLowerCase().includes(query);
return matchFilter && matchSearch;
});
filtered.sort((a, b) => {
if (state.sort === 'updated') return (b.last_modified || '').localeCompare(a.last_modified || '');
if (state.sort === 'name') return a.display_name.localeCompare(b.display_name);
if (state.sort === 'category') return a.category.localeCompare(b.category) || a.display_name.localeCompare(b.display_name);
return 0;
});
const grid = document.getElementById('grid-' + deck);
if (filtered.length === 0) {
grid.innerHTML = '<div class="empty">No CLIs match your search.</div>';
return;
}
if (deck === 'harness') {
grid.innerHTML = filtered.map(renderHarnessCard).join('');
} else {
grid.innerHTML = filtered.map(renderNpmCard).join('');
}
}
function repoSkillId(skillPath) {
if (!skillPath || skillPath.startsWith('http')) return '';
const match = skillPath.match(/^skills\/([^/]+)\/SKILL\.md$/);
return match ? match[1] : '';
}
function isWebUrl(value) {
return /^https?:\/\//i.test(value || '');
}
function isRepoSkillPath(value) {
return !/\s/.test(value || '') && /(^\.{0,2}\/|\/|\.md$|\.txt$)/i.test(value || '');
}
function normalizeNpxSkillsCmd(cmd) {
if (!cmd) return '';
const trimmed = cmd.trim();
if (!trimmed.startsWith('npx skills add ')) return '';
return trimmed
.replace(/\s+-g\b/g, '')
.replace(/\s+-y\b/g, '')
.trim() + ' -g -y';
}
function harnessSkillCmd(c) {
const skillId = repoSkillId(c.skill_md);
return skillId ? `npx skills add ${REPO_SKILLS_SOURCE} --skill ${skillId} -g -y` : '';
}
function publicSkillCmd(c) {
return normalizeNpxSkillsCmd(c.skill_md);
}
function renderSkillAction(value) {
if (!value) return '';
if (isWebUrl(value)) {
return `<a href="${esc(value)}" target="_blank">Skill</a>`;
}
if (isRepoSkillPath(value)) {
return `<a href="${REPO}/blob/main/${esc(value)}" target="_blank">Skill</a>`;
}
return `
<span class="skill-popover">
<button class="card-link-btn skill-trigger" type="button" aria-expanded="false" data-skill-value="${escAttr(value)}">Skill</button>
<span class="skill-popover-panel">
<span class="skill-popover-label">Skill install</span>
<code>${esc(value)}</code>
<button class="card-copy-btn skill-popover-copy" type="button" data-copy-value="${escAttr(value)}">Copy</button>
</span>
</span>`;
}
function renderInstallStack(steps) {
const display = steps.map((step) =>
`<span class="install-comment"># ${esc(step.label.toLowerCase())}</span><span class="install-command">${esc(step.cmd)}</span>`
).join('');
const copyText = steps.map((step) =>
`# ${step.label.toLowerCase()}\n${step.cmd}`
).join('\n');
return `<div class="card-install">
<code>${display}</code>
<button class="card-copy-btn" onclick='copyCmd(this, ${JSON.stringify(copyText)})'>Copy</button>
</div>`;
}
function renderHarnessCard(c) {
const requiresHtml = c.requires
? `<div class="card-requires"><strong>Requires</strong> ${esc(c.requires)}</div>`
: '';
const skillLink = c.skill_md
? `<a href="${c.skill_md.startsWith('http') ? c.skill_md : `${REPO}/blob/main/${c.skill_md}`}" target="_blank">Skill</a>`
: '';
const sourceLink = c.source_url
? `<a href="${esc(c.source_url)}" target="_blank">Source</a>`
: `<a href="${REPO}/tree/main/${c.name}/agent-harness" target="_blank">Source</a>`;
const titleHtml = c.homepage
? `<a href="${esc(c.homepage)}" target="_blank">${esc(c.display_name)}${EXTERNAL_LINK_SVG}</a>`
: esc(c.display_name);
const contributors = c.contributors || (c.contributor ? [{name: c.contributor, url: c.contributor_url}] : []);
const isTeam = contributors.length === 1 && contributors[0].name === 'CLI-Anything-Team';
const contributorHtml = contributors.length
? `<div class="card-contributor">
${contributors.map(ct => `<a href="${esc(ct.url)}" target="_blank">${esc(ct.name)}</a>`).join(', ')}${isTeam ? '' : '<span class="community-badge">Community</span>'}
</div>`
: '';
const dateHtml = c.last_modified
? `<div class="card-date">Updated ${esc(c.last_modified)}</div>`
: '';
const installSteps = [
{ label: 'step 1 · install cli', cmd: `cli-hub install ${c.name}` }
];
const skillCmd = harnessSkillCmd(c);
if (skillCmd) installSteps.push({ label: 'step 2 · install skill', cmd: skillCmd });
const installHtml = renderInstallStack(installSteps);
return `
<div class="card">
<div class="card-head">
<span class="card-title">${titleHtml}</span>
<div class="card-meta">
<span class="category-tag">${catLabel(c.category)}</span>
<span class="card-version">${esc(c.version)}</span>
</div>
</div>
<div class="card-desc">${esc(c.description)}</div>
${dateHtml}
${requiresHtml}
${installHtml}
<div class="card-footer">
<div class="card-links">${sourceLink}${skillLink ? ' &middot; ' + skillLink : ''}</div>
${contributorHtml}
</div>
</div>`;
}
function formatPublicManager(c) {
const manager = (c.package_manager || c.install_strategy || 'public').toLowerCase();
const labelMap = { npm: 'npm', brew: 'brew', bundled: 'bundled' };
const label = labelMap[manager] || manager;
return `<span class="public-badge public-badge--${esc(manager)}">${esc(label)}</span>`;
}
function publicDirectCmd(c) {
return c.direct_cmd || c.entry_point || c.npx_cmd || '';
}
function renderNpmCard(c) {
const isBundled = (c.install_strategy || c.package_manager) === 'bundled';
const dateHtml = c.last_modified
? `<div class="card-date">Updated ${esc(c.last_modified)}</div>`
: '';
const requiresHtml = c.requires
? `<div class="card-requires"><strong>Requires</strong> ${esc(c.requires)}</div>`
: '';
const titleHtml = c.homepage
? `<a href="${esc(c.homepage)}" target="_blank">${esc(c.display_name)}${EXTERNAL_LINK_SVG}</a>`
: esc(c.display_name);
const skillLink = renderSkillAction(c.skill_md);
const sourceLink = c.source_url
? `<a href="${esc(c.source_url)}" target="_blank">Source</a>`
: '';
const contributors = c.contributors || [];
const contributorHtml = contributors.length
? `<div class="card-contributor">
${contributors.map(ct => `<a href="${esc(ct.url)}" target="_blank">${esc(ct.name)}</a>`).join(', ')}
</div>`
: '';
const directCmd = c.install_cmd || publicDirectCmd(c);
const directCmdHtml = directCmd && !isBundled
? `<div class="card-npx card-npx--direct"><strong>Or run directly:</strong><span>${esc(directCmd)}</span></div>`
: '';
const installNotesHtml = c.install_notes
? `<div class="card-npx card-npx--comment">${esc(c.install_notes)}</div>`
: '';
const publicNotesHtml = (directCmdHtml || installNotesHtml)
? `<div class="card-public-notes">${directCmdHtml}${installNotesHtml}</div>`
: '';
const installSteps = isBundled
? []
: [{ label: 'step 1 · install cli', cmd: `cli-hub install ${c.name}` }];
const skillCmd = publicSkillCmd(c);
if (skillCmd) installSteps.push({ label: 'step 2 · install skill', cmd: skillCmd });
const cliHubInstallHtml = isBundled
? `<div class="card-install card-install--note"><code>Bundled with the upstream app</code></div>`
: renderInstallStack(installSteps);
const linksHtml = [sourceLink, skillLink].filter(Boolean).join(' &middot; ');
return `
<div class="card">
<div class="card-head">
<span class="card-title">${titleHtml}</span>
<div class="card-meta">
${formatPublicManager(c)}
<span class="category-tag">${catLabel(c.category)}</span>
</div>
</div>
<div class="card-desc">${esc(c.description)}</div>
${dateHtml}
${requiresHtml}
${cliHubInstallHtml}
${publicNotesHtml}
<div class="card-footer">
<div class="card-links">${linksHtml}</div>
${contributorHtml}
</div>
</div>`;
}
function copyCmd(btn, cmd) {
navigator.clipboard.writeText(cmd).then(() => {
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = 'Copy', 1500);
});
}
function initHeroMotion() {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
document.documentElement.classList.remove('js');
return;
}
window.requestAnimationFrame(() => {
document.documentElement.classList.add('motion-ready');
});
}
function animateCount(el, target, duration = 900) {
if (!el) return;
const finalValue = Number(target) || 0;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
el.textContent = finalValue;
return;
}
const start = performance.now();
function step(now) {
const progress = Math.min((now - start) / duration, 1);
const eased = 1 - Math.pow(1 - progress, 3);
el.textContent = Math.round(finalValue * eased);
if (progress < 1) {
window.requestAnimationFrame(step);
} else {
el.textContent = finalValue;
}
}
window.requestAnimationFrame(step);
}
function initHeroTypingBar() {
const shell = document.querySelector('[data-typing-text]');
if (!shell) return;
const target = shell.querySelector('[data-typing-target]');
const fullText = shell.dataset.typingText || '';
if (!target || !fullText) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
target.textContent = fullText;
return;
}
let index = 0;
let deleting = false;
function tick() {
target.textContent = fullText.slice(0, index);
let delay = deleting ? 44 : 86;
if (!deleting && index < fullText.length) {
index += 1;
} else if (!deleting && index === fullText.length) {
deleting = true;
delay = 1650;
} else if (deleting && index > 0) {
index -= 1;
} else {
deleting = false;
delay = 480;
}
window.setTimeout(tick, delay);
}
window.setTimeout(tick, 420);
}
function esc(s) {
if (!s) return '';
const d = document.createElement('div');
d.textContent = s;
return d.innerHTML;
}
function escAttr(s) {
if (!s) return '';
return String(s)
.replace(/&/g, '&amp;')
.replace(/"/g, '&quot;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;');
}
function toggleSkillPopover(trigger) {
const popover = trigger.closest('.skill-popover');
if (!popover) return;
const shouldOpen = !popover.classList.contains('is-open');
document.querySelectorAll('.skill-popover.is-open').forEach((node) => {
node.classList.remove('is-open');
const btn = node.querySelector('.skill-trigger');
if (btn) btn.setAttribute('aria-expanded', 'false');
});
if (!shouldOpen) return;
popover.classList.add('is-open');
trigger.setAttribute('aria-expanded', 'true');
}
document.addEventListener('click', (e) => {
const copyBtn = e.target.closest('.skill-popover-copy');
if (copyBtn) {
e.preventDefault();
e.stopPropagation();
copyCmd(copyBtn, copyBtn.dataset.copyValue);
return;
}
const trigger = e.target.closest('.skill-trigger');
if (trigger) {
e.preventDefault();
e.stopPropagation();
toggleSkillPopover(trigger);
return;
}
document.querySelectorAll('.skill-popover.is-open').forEach((node) => {
node.classList.remove('is-open');
const btn = node.querySelector('.skill-trigger');
if (btn) btn.setAttribute('aria-expanded', 'false');
});
});
document.addEventListener('keydown', (e) => {
if (e.key !== 'Escape') return;
document.querySelectorAll('.skill-popover.is-open').forEach((node) => {
node.classList.remove('is-open');
const btn = node.querySelector('.skill-trigger');
if (btn) btn.setAttribute('aria-expanded', 'false');
});
});
// Wire up search and sort for each deck
document.getElementById('search-harness').addEventListener('input', (e) => {
deckState.harness.query = e.target.value;
renderDeck('harness');
});
document.getElementById('sort-harness').addEventListener('change', (e) => {
deckState.harness.sort = e.target.value;
renderDeck('harness');
});
document.getElementById('search-public').addEventListener('input', (e) => {
deckState.public.query = e.target.value;
renderDeck('public');
});
document.getElementById('sort-public').addEventListener('change', (e) => {
deckState.public.sort = e.target.value;
renderDeck('public');
});
window.addEventListener('resize', updateDeckPosition);
initDeckGestures();
initHeroMotion();
initHeroTypingBar();
loadRegistries().then(updateDeckPosition);
// ── Visitor classification: human vs AI agent ──
(function() {
const ANALYTICS_PROVIDER = 'posthog';
const ANALYTICS_SITE = 'clianything.cc';
const COUNTED_HOSTS = new Set(['clianything.cc', 'www.clianything.cc']);
// Fixed Umami baseline from remote main. Runtime PostHog counts are
// queried live and added to this.
const UMAMI_BASELINE_STATS = {
human: 7689, agent: 13434,
cli_hub_human: 3237, cli_hub_agent: 13124,
};
const ANALYTICS_TEST_RUN = new URLSearchParams(location.search).get('analytics_test_run') || '';
const POSTHOG_CONFIG = {
projectToken: 'phc_ovP8d5bmjpn8YZnTo7pb6rE3TikcAMgmNVt75o3Ywejz',
apiHost: 'https://us.i.posthog.com',
defaults: '2026-01-30',
personProfiles: 'identified_only',
};
const UMAMI_CONFIG = {
sendUrl: 'https://cloud.umami.is/api/send',
websiteId: 'a076c661-bed1-405c-a522-813794e688b4',
};
const OFFICIAL_AGENT_UA_RULES = [
{ id: 'openai-oai-searchbot', category: 'official_ai_agent', regex: /\bOAI-SearchBot\b/i },
{ id: 'openai-gptbot', category: 'official_ai_agent', regex: /\bGPTBot\b/i },
{ id: 'openai-chatgpt-user', category: 'official_ai_agent', regex: /\bChatGPT-User\b/i },
{ id: 'anthropic-claudebot', category: 'official_ai_agent', regex: /\bClaudeBot\b/i },
{ id: 'anthropic-claude-user', category: 'official_ai_agent', regex: /\bClaude-User\b/i },
{ id: 'anthropic-claude-searchbot', category: 'official_ai_agent', regex: /\bClaude-SearchBot\b/i },
{ id: 'perplexity-bot', category: 'official_ai_agent', regex: /\bPerplexityBot\b/i },
{ id: 'perplexity-user', category: 'official_ai_agent', regex: /\bPerplexity-User\b/i },
{ id: 'google-vertex-bot', category: 'official_ai_agent', regex: /\bGoogle-CloudVertexBot\b/i },
];
const AGENT_TOOL_UA_RULES = [
{ id: 'claude-code', category: 'agent_tool', regex: /\bclaude(?:[ -]?code)\b/i },
{ id: 'codex', category: 'agent_tool', regex: /\bcodex\b/i },
{ id: 'cursor', category: 'agent_tool', regex: /\bcursor\b/i },
{ id: 'cline', category: 'agent_tool', regex: /\bcline\b/i },
{ id: 'aider', category: 'agent_tool', regex: /\baider\b/i },
{ id: 'continue', category: 'agent_tool', regex: /\bcontinue\b/i },
{ id: 'openhands', category: 'agent_tool', regex: /\bopenhands\b/i },
{ id: 'openclaw', category: 'agent_tool', regex: /\bopenclaw\b/i },
{ id: 'nanobot', category: 'agent_tool', regex: /\bnanobot\b/i },
{ id: 'browser-use', category: 'agent_tool', regex: /\bbrowser[- ]use\b/i },
{ id: 'stagehand', category: 'agent_tool', regex: /\bstagehand\b/i },
];
const AUTOMATION_UA_RULES = [
{ id: 'headless-browser', category: 'automation_runtime', regex: /\bHeadlessChrome\b|\bHeadless\b/i },
{ id: 'playwright', category: 'automation_runtime', regex: /\bPlaywright\b/i },
{ id: 'puppeteer', category: 'automation_runtime', regex: /\bPuppeteer\b/i },
{ id: 'selenium', category: 'automation_runtime', regex: /\bSelenium\b/i },
{ id: 'phantomjs', category: 'automation_runtime', regex: /\bPhantomJS\b|\bPhantom\b/i },
];
const SCRIPTED_CLIENT_UA_RULES = [
{ id: 'python-requests', category: 'scripted_client', regex: /\bpython-requests\b/i },
{ id: 'python-httpx', category: 'scripted_client', regex: /\bpython-httpx\b/i },
{ id: 'axios', category: 'scripted_client', regex: /\baxios\b/i },
{ id: 'node-fetch', category: 'scripted_client', regex: /\bnode-fetch\b/i },
{ id: 'undici', category: 'scripted_client', regex: /\bundici\b/i },
{ id: 'go-http-client', category: 'scripted_client', regex: /\bGo-http-client\b/i },
{ id: 'curl', category: 'scripted_client', regex: /\bcurl\b/i },
{ id: 'wget', category: 'scripted_client', regex: /\bwget\b/i },
];
const CATEGORY_PRIORITY = ['official_ai_agent', 'agent_tool', 'automation_runtime', 'scripted_client'];
let humanConfirmed = false;
let posthogReady = false;
const pendingPosthogEvents = [];
function isTrackedHost() {
return COUNTED_HOSTS.has(location.hostname);
}
function applyVisitorStats(stats) {
const setText = (id, val) => {
const el = document.getElementById(id);
if (el) el.textContent = (val || 0).toLocaleString();
};
const setSplit = (prefix, human, agent) => {
const total = (human || 0) + (agent || 0);
const humanPct = total > 0 ? (human / total) * 100 : 0;
const agentPct = total > 0 ? 100 - humanPct : 0;
const fmtPct = (n) => (n >= 10 || n === 0 ? Math.round(n) : n.toFixed(1)) + '%';
const barH = document.getElementById('bar-' + prefix + '-human');
const barA = document.getElementById('bar-' + prefix + '-agent');
if (barH) barH.style.width = humanPct.toFixed(2) + '%';
if (barA) barA.style.width = agentPct.toFixed(2) + '%';
const pctH = document.getElementById('pct-' + prefix + '-human');
const pctA = document.getElementById('pct-' + prefix + '-agent');
if (pctH) pctH.textContent = fmtPct(humanPct);
if (pctA) pctA.textContent = fmtPct(agentPct);
};
setText('stat-total', stats.total);
setText('stat-human', stats.human);
setText('stat-agent', stats.agent);
setText('stat-cli-total', stats.cli_hub_total);
setText('stat-cli-human', stats.cli_hub_human);
setText('stat-cli-agent', stats.cli_hub_agent);
setSplit('site', stats.human || 0, stats.agent || 0);
setSplit('cli', stats.cli_hub_human || 0, stats.cli_hub_agent || 0);
}
function readUaBrands() {
const brands = navigator.userAgentData && Array.isArray(navigator.userAgentData.brands)
? navigator.userAgentData.brands
: [];
return brands.map((brand) => brand.brand).join(' ');
}
function collectRuleSignals(ua, rules, signals) {
rules.forEach((rule) => {
if (rule.regex.test(ua)) {
signals.push(rule);
}
});
}
function collectRuntimeSignals(brands, signals) {
if (navigator.webdriver === true) {
signals.push({ id: 'webdriver', category: 'automation_runtime' });
}
if (/HeadlessChrome/i.test(brands)) {
signals.push({ id: 'ua-brand-headlesschrome', category: 'automation_runtime' });
}
if ('__playwright__binding__' in window || '__pwManual' in window) {
signals.push({ id: 'playwright-runtime', category: 'automation_runtime' });
}
if ('Cypress' in window) {
signals.push({ id: 'cypress-runtime', category: 'automation_runtime' });
}
if ('_phantom' in window || 'callPhantom' in window) {
signals.push({ id: 'phantom-runtime', category: 'automation_runtime' });
}
if ('domAutomation' in window || 'domAutomationController' in window) {
signals.push({ id: 'dom-automation', category: 'automation_runtime' });
}
}
function classifyVisitor() {
const ua = navigator.userAgent || '';
const brands = readUaBrands();
const signals = [];
collectRuleSignals(ua, OFFICIAL_AGENT_UA_RULES, signals);
collectRuleSignals(ua, AGENT_TOOL_UA_RULES, signals);
collectRuleSignals(ua, AUTOMATION_UA_RULES, signals);
collectRuleSignals(ua, SCRIPTED_CLIENT_UA_RULES, signals);
collectRuntimeSignals(brands, signals);
const seen = new Set();
const uniqueSignals = signals.filter((signal) => {
if (seen.has(signal.id)) return false;
seen.add(signal.id);
return true;
}).sort((left, right) => CATEGORY_PRIORITY.indexOf(left.category) - CATEGORY_PRIORITY.indexOf(right.category));
const primary = uniqueSignals[0] || null;
const isAgent = uniqueSignals.length > 0;
return {
ua,
brands,
webdriver: navigator.webdriver === true,
isAgent,
isAutomation: !!primary && (primary.category === 'automation_runtime' || primary.category === 'scripted_client'),
trafficType: isAgent ? 'agent' : 'human',
reason: primary ? primary.id : 'human',
category: primary ? primary.category : 'human',
signals: uniqueSignals.map((signal) => signal.id),
};
}
const visitor = classifyVisitor();
function analyticsContext(eventData) {
const base = {
source: 'web',
site: ANALYTICS_SITE,
host: location.hostname,
visitor_type: visitor.trafficType,
is_agent: visitor.isAgent,
is_automation: visitor.isAutomation,
agent_category: visitor.category,
agent_reason: visitor.reason,
agent_signals: visitor.signals.slice(0, 12),
ua: visitor.ua.slice(0, 200),
ua_brands: visitor.brands.slice(0, 200),
webdriver: visitor.webdriver,
};
if (ANALYTICS_TEST_RUN) {
base.test_run = ANALYTICS_TEST_RUN;
}
return { ...base, ...eventData };
}
function initPosthog() {
if (!isTrackedHost()) return;
!function(t,e){var o,n,p,r;e.__SV||(window.posthog&&window.posthog.__loaded)||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split('.');2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement('script')).type='text/javascript',p.crossOrigin='anonymous',p.async=!0,p.src=s.api_host.replace('.i.posthog.com','-assets.i.posthog.com')+'/static/array.js',(r=t.getElementsByTagName('script')[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a='posthog',u.people=u.people||[],u.toString=function(t){var e='posthog';return'posthog'!==a&&(e+='.'+a),t||(e+=' (stub)'),e},u.people.toString=function(){return u.toString(1)+'.people (stub)'},o='init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug'.split(' '),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
window.posthog.init(POSTHOG_CONFIG.projectToken, {
api_host: POSTHOG_CONFIG.apiHost,
defaults: POSTHOG_CONFIG.defaults,
person_profiles: POSTHOG_CONFIG.personProfiles,
opt_out_useragent_filter: true,
loaded: function(posthog) {
posthogReady = true;
while (pendingPosthogEvents.length) {
const queued = pendingPosthogEvents.shift();
posthog.capture(queued.eventName, analyticsContext(queued.eventData));
}
},
});
}
function initUmami() {
if (!isTrackedHost()) return;
const script = document.createElement('script');
script.defer = true;
script.src = 'https://cloud.umami.is/script.js';
script.dataset.websiteId = UMAMI_CONFIG.websiteId;
document.head.appendChild(script);
}
function trackWithPosthog(eventName, eventData) {
if (!isTrackedHost() || !window.posthog) return;
if (!posthogReady || typeof window.posthog.capture !== 'function') {
pendingPosthogEvents.push({ eventName, eventData });
return;
}
window.posthog.capture(eventName, analyticsContext(eventData));
}
function trackWithUmami(eventName, eventData) {
if (!isTrackedHost()) return;
const payload = {
type: 'event',
payload: {
website: UMAMI_CONFIG.websiteId,
hostname: ANALYTICS_SITE,
url: location.pathname,
name: eventName,
data: analyticsContext(eventData),
},
};
fetch(UMAMI_CONFIG.sendUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
keepalive: true,
}).catch(() => {});
}
function trackAnalyticsEvent(eventName, eventData) {
if (ANALYTICS_PROVIDER === 'umami') {
trackWithUmami(eventName, eventData);
return;
}
trackWithPosthog(eventName, eventData);
}
if (ANALYTICS_PROVIDER === 'umami') {
initUmami();
} else {
initPosthog();
}
if (ANALYTICS_TEST_RUN) {
window.__CLI_ANYTHING_ANALYTICS__ = {
visitor: {
isAgent: visitor.isAgent,
isAutomation: visitor.isAutomation,
trafficType: visitor.trafficType,
category: visitor.category,
reason: visitor.reason,
signals: visitor.signals.slice(),
webdriver: visitor.webdriver,
ua: visitor.ua,
},
};
}
if (isTrackedHost() && visitor.isAgent) {
trackAnalyticsEvent('visit-agent', {
classification_source: 'initial-load',
});
}
function onHumanInteraction(event) {
if (humanConfirmed || !isTrackedHost() || visitor.trafficType !== 'human') return;
humanConfirmed = true;
trackAnalyticsEvent('visit-human', {
classification_source: 'user-interaction',
interaction: event.type,
});
['mousemove', 'touchstart', 'scroll', 'keydown', 'click'].forEach((evt) => {
document.removeEventListener(evt, onHumanInteraction);
});
}
['mousemove', 'touchstart', 'scroll', 'keydown', 'click'].forEach((evt) => {
document.addEventListener(evt, onHumanInteraction, { once: false, passive: true });
});
// ── Live analytics via Cloudflare Worker proxy ──
// PostHog personal key lives as a Worker secret (repo:
// ~/clianything-analytics-worker). Runtime PostHog counts are queried
// every refresh and added to the fixed pre-migration Umami baseline.
const ANALYTICS_PROXY_URL = 'https://analytics.clianything.cc/';
const LIVE_STATS_REFRESH_MS = 60_000;
const ZERO_STATS = {
human: 0, agent: 0,
cli_hub_human: 0, cli_hub_agent: 0,
};
async function fetchPosthogTotals() {
const hogql = (
"select " +
"countIf(event = 'visit-human' and properties.source = 'web' and properties.site = 'clianything.cc') as human, " +
"countIf(event = 'visit-agent' and properties.source = 'web' and properties.site = 'clianything.cc') as agent, " +
"countIf(event = 'cli-hub call' and properties.source = 'cli' and properties.channel = 'cli-hub' and properties.is_agent = false) as cli_hub_human, " +
"countIf(event = 'cli-hub call' and properties.source = 'cli' and properties.channel = 'cli-hub' and properties.is_agent = true) as cli_hub_agent " +
"from events"
);
const response = await fetch(ANALYTICS_PROXY_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query: { kind: 'HogQLQuery', query: hogql } }),
});
if (!response.ok) throw new Error('posthog query http ' + response.status);
const data = await response.json();
const row = (data.results && data.results[0]) || [0, 0, 0, 0];
return {
human: Number(row[0]) || 0,
agent: Number(row[1]) || 0,
cli_hub_human: Number(row[2]) || 0,
cli_hub_agent: Number(row[3]) || 0,
};
}
function sumStats(a, b) {
const out = {};
for (const key of Object.keys(ZERO_STATS)) out[key] = (a[key] || 0) + (b[key] || 0);
return out;
}
function withDerivedTotals(s) {
// cli-hub call is emitted once per invocation, so action events like
// install/launch must not be added here or usage would be double-counted.
return {
...s,
total: s.human + s.agent,
cli_hub_total: s.cli_hub_human + s.cli_hub_agent,
};
}
function hasAnyStats(s) {
return Object.keys(ZERO_STATS).some((key) => (s[key] || 0) > 0);
}
async function refreshVisitorStats() {
const posthog = await fetchPosthogTotals();
const merged = sumStats(UMAMI_BASELINE_STATS, posthog);
if (!hasAnyStats(merged)) return false;
applyVisitorStats(withDerivedTotals(merged));
return true;
}
async function loadVisitorStats() {
await refreshVisitorStats().catch(() => false);
setInterval(() => { refreshVisitorStats().catch(() => false); }, LIVE_STATS_REFRESH_MS);
}
loadVisitorStats();
if (typeof loadGitHubStars === 'function') {
loadGitHubStars();
}
})();
</script>
</body>
</html>