update [node.js (vite) ] ✅

index.css

@@ -0,0 +1,881 @@
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@400;500;600;700&display=swap');
+
+:root {
+    --bg: #ffffff;
+    --text: #1a1a2e;
+    --text-secondary: #64748b;
+    --header-bg: #f8fafc;
+    --border: #e2e8f0;
+    --accent: #ff9d00;
+    --accent-hover: #e68a00;
+    --accent-light: rgba(255, 157, 0, 0.08);
+    --accent-border: rgba(255, 157, 0, 0.25);
+    --panel-bg: #ffffff;
+    --folder-color: #ff9d00;
+    --file-color: #94a3b8;
+    --line-num: #cbd5e1;
+    --tree-line: #94a3b8;
+    --btn-bg: #f1f5f9;
+    --btn-border: #e2e8f0;
+    --btn-hover: #e2e8f0;
+    --shadow: rgba(0, 0, 0, 0.06);
+    --shadow-lg: rgba(0, 0, 0, 0.1);
+    --model-color: #f59e0b;
+    --dataset-color: #10b981;
+    --space-color: #6366f1;
+    --tag-model: rgba(245, 158, 11, 0.1);
+    --tag-dataset: rgba(16, 185, 129, 0.1);
+    --tag-space: rgba(99, 102, 241, 0.1);
+    --mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;
+    --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+    --radius: 10px;
+    --radius-sm: 6px;
+}
+
+[data-theme="dark"] {
+    --bg: #0f172a;
+    --text: #e2e8f0;
+    --text-secondary: #94a3b8;
+    --header-bg: #1e293b;
+    --border: #334155;
+    --accent: #fbbf24;
+    --accent-hover: #f59e0b;
+    --accent-light: rgba(251, 191, 36, 0.08);
+    --accent-border: rgba(251, 191, 36, 0.2);
+    --panel-bg: #1e293b;
+    --folder-color: #fbbf24;
+    --file-color: #64748b;
+    --line-num: #475569;
+    --tree-line: #475569;
+    --btn-bg: #1e293b;
+    --btn-border: #334155;
+    --btn-hover: #334155;
+    --shadow: rgba(0, 0, 0, 0.3);
+    --shadow-lg: rgba(0, 0, 0, 0.5);
+    --tag-model: rgba(251, 191, 36, 0.1);
+    --tag-dataset: rgba(16, 185, 129, 0.1);
+    --tag-space: rgba(99, 102, 241, 0.12);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+    font-family: var(--sans);
+    background: var(--bg);
+    color: var(--text);
+    transition: background 0.3s ease, color 0.3s ease;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+}
+
+button, input, select { font-family: inherit; }
+a { text-decoration: none; color: inherit; }
+
+.app-container {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 24px 20px 40px;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 32px;
+    padding-top: 8px;
+}
+
+.brand a {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 1.4rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+.brand-icon {
+    width: 38px;
+    height: 38px;
+    background: linear-gradient(135deg, #ff9d00 0%, #ffb340 100%);
+    border-radius: var(--radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    font-size: 1.1rem;
+    box-shadow: 0 2px 8px rgba(255, 157, 0, 0.3);
+}
+
+.header-actions {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+}
+
+.icon-btn {
+    background: var(--btn-bg);
+    border: 1px solid var(--btn-border);
+    font-size: 1.1rem;
+    color: var(--text);
+    width: 38px;
+    height: 38px;
+    cursor: pointer;
+    border-radius: var(--radius);
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.icon-btn:hover { background: var(--btn-hover); border-color: var(--accent); }
+
+.text-btn {
+    background: var(--btn-bg);
+    border: 1px solid var(--btn-border);
+    font-size: 0.82rem;
+    color: var(--text);
+    cursor: pointer;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 14px;
+    border-radius: var(--radius);
+    transition: all 0.2s;
+    letter-spacing: -0.01em;
+}
+
+.text-btn:hover { border-color: var(--accent); color: var(--accent); }
+
+.sun-icon { display: none !important; }
+[data-theme="dark"] .sun-icon { display: inline-block !important; color: #fbbf24; }
+[data-theme="dark"] .moon-icon { display: none !important; }
+[data-theme="light"] .moon-icon { display: inline-block !important; color: #64748b; }
+
+/* Token Panel */
+.token-panel {
+    background: var(--header-bg);
+    border: 1px solid var(--border);
+    padding: 16px;
+    border-radius: var(--radius);
+    margin-bottom: 20px;
+    animation: slideDown 0.25s ease-out;
+}
+
+@keyframes slideDown {
+    from { opacity: 0; transform: translateY(-8px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+.token-inner {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.token-inner i { color: var(--accent); font-size: 0.9rem; }
+
+.token-inner input {
+    background: var(--bg);
+    border: 1px solid var(--border);
+    padding: 9px 14px;
+    border-radius: var(--radius-sm);
+    flex: 1;
+    color: var(--text);
+    font-family: var(--mono);
+    font-size: 0.82rem;
+}
+
+.token-inner input:focus {
+    outline: none;
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-border);
+}
+
+.token-inner button {
+    background: var(--accent);
+    color: white;
+    border: none;
+    padding: 9px 18px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    font-weight: 600;
+    font-size: 0.82rem;
+    transition: background 0.2s;
+}
+
+.token-inner button:hover { background: var(--accent-hover); }
+
+.token-warning {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    margin: 10px 0 0 0;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.token-warning i { color: #f59e0b; font-size: 0.75rem; }
+
+/* Search */
+.search-section {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+}
+
+.type-selector {
+    display: flex;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    overflow: hidden;
+    height: 44px;
+}
+
+.type-btn {
+    background: var(--btn-bg);
+    border: none;
+    border-right: 1px solid var(--border);
+    padding: 0 16px;
+    cursor: pointer;
+    font-size: 0.82rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    transition: all 0.2s;
+    white-space: nowrap;
+    letter-spacing: -0.01em;
+}
+
+.type-btn:last-child { border-right: none; }
+.type-btn:hover { background: var(--btn-hover); color: var(--text); }
+
+.type-btn.active-model {
+    background: var(--tag-model);
+    color: var(--model-color);
+}
+
+.type-btn.active-dataset {
+    background: var(--tag-dataset);
+    color: var(--dataset-color);
+}
+
+.type-btn.active-space {
+    background: var(--tag-space);
+    color: var(--space-color);
+}
+
+.input-group {
+    background: var(--header-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    display: flex;
+    align-items: center;
+    padding: 0 14px;
+    height: 44px;
+    flex: 1;
+    transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.input-group:focus-within {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 3px var(--accent-border);
+}
+
+.prefix {
+    color: var(--text-secondary);
+    font-size: 0.8rem;
+    margin-right: 4px;
+    white-space: nowrap;
+    font-family: var(--mono);
+    font-weight: 500;
+}
+
+input {
+    background: transparent;
+    border: none;
+    color: var(--text);
+    width: 100%;
+    outline: none;
+    font-size: 0.88rem;
+    font-family: var(--mono);
+    font-weight: 500;
+}
+
+.branch-input { max-width: 150px; }
+
+.primary-btn {
+    background: var(--accent);
+    color: white;
+    border: none;
+    padding: 0 28px;
+    border-radius: var(--radius);
+    font-weight: 700;
+    cursor: pointer;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 0.85rem;
+    transition: all 0.2s;
+    letter-spacing: -0.01em;
+    box-shadow: 0 2px 6px rgba(255, 157, 0, 0.2);
+}
+
+.primary-btn:hover {
+    background: var(--accent-hover);
+    box-shadow: 0 4px 12px rgba(255, 157, 0, 0.3);
+    transform: translateY(-1px);
+}
+
+.primary-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
+
+/* Status */
+#statusMsg {
+    padding: 12px 16px;
+    margin-bottom: 16px;
+    font-size: 0.85rem;
+    text-align: center;
+    font-weight: 500;
+    border-radius: var(--radius);
+    letter-spacing: -0.01em;
+}
+
+.error {
+    color: #ef4444;
+    background: rgba(239, 68, 68, 0.08);
+    border: 1px solid rgba(239, 68, 68, 0.15);
+}
+
+.loading {
+    color: var(--accent);
+    background: var(--accent-light);
+    border: 1px solid var(--accent-border);
+}
+
+/* Empty State */
+.empty-state { text-align: center; }
+
+.empty-state h3 {
+    font-weight: 600;
+    margin-top: 16px;
+    letter-spacing: -0.02em;
+}
+
+.empty-state p {
+    color: var(--text-secondary);
+    margin-bottom: 24px;
+    font-size: 0.92rem;
+}
+
+.tag-cloud {
+    display: flex;
+    justify-content: center;
+    gap: 10px;
+    flex-wrap: wrap;
+    max-width: 850px;
+    margin: 0 auto;
+}
+
+.repo-tag {
+    background: var(--btn-bg);
+    border: 1px solid var(--border);
+    color: var(--text);
+    padding: 8px 16px;
+    border-radius: 24px;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-family: var(--mono);
+    font-weight: 500;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.repo-tag:hover {
+    border-color: var(--accent);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px var(--shadow);
+}
+
+.tag-type {
+    font-size: 0.65rem;
+    padding: 2px 7px;
+    border-radius: 8px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.tag-type.model { background: var(--tag-model); color: var(--model-color); }
+.tag-type.dataset { background: var(--tag-dataset); color: var(--dataset-color); }
+.tag-type.space { background: var(--tag-space); color: var(--space-color); }
+
+.homepage-section { margin-bottom: 36px; }
+
+.homepage-section h3 {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    font-weight: 600;
+    margin-bottom: 16px;
+}
+
+/* Repo Info */
+.repo-info-card {
+    background: var(--header-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 14px 20px;
+    margin-bottom: 12px;
+    display: none;
+    animation: slideDown 0.25s ease-out;
+}
+
+.repo-info-card.visible { display: block; }
+
+.repo-info-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.repo-info-left {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.repo-type-badge {
+    font-size: 0.68rem;
+    padding: 4px 10px;
+    border-radius: 8px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.repo-type-badge.model { background: var(--tag-model); color: var(--model-color); }
+.repo-type-badge.dataset { background: var(--tag-dataset); color: var(--dataset-color); }
+.repo-type-badge.space { background: var(--tag-space); color: var(--space-color); }
+
+.repo-info-name {
+    font-size: 1rem;
+    font-weight: 600;
+    font-family: var(--mono);
+    letter-spacing: -0.02em;
+}
+
+.repo-info-name a { color: var(--accent); }
+.repo-info-name a:hover { text-decoration: underline; }
+
+.repo-info-stats {
+    display: flex;
+    gap: 18px;
+    font-size: 0.8rem;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+.repo-info-stats span {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+/* Tree Wrapper */
+.tree-wrapper {
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    display: flex;
+    flex-direction: column;
+    background: var(--panel-bg);
+    box-shadow: 0 4px 16px var(--shadow);
+    overflow: visible;
+    position: relative;
+    z-index: 10;
+}
+
+.toolbar {
+    background: var(--header-bg);
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: var(--radius) var(--radius) 0 0;
+}
+
+.tools-group {
+    display: flex;
+    gap: 8px;
+}
+
+.tool-btn {
+    background: var(--btn-bg);
+    border: 1px solid var(--btn-border);
+    color: var(--text);
+    padding: 7px 14px;
+    border-radius: var(--radius-sm);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    transition: all 0.2s;
+    letter-spacing: -0.01em;
+}
+
+.tool-btn:hover { background: var(--btn-hover); border-color: var(--tree-line); }
+
+.action-btn {
+    color: #fff;
+    background: var(--accent);
+    border-color: var(--accent);
+}
+
+.action-btn:hover {
+    background: var(--accent-hover);
+    border-color: var(--accent-hover);
+}
+
+/* Dropdowns */
+.dropdown { position: relative; }
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 6px;
+    background: var(--panel-bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    box-shadow: 0 12px 32px var(--shadow-lg);
+    z-index: 100;
+    min-width: 200px;
+    padding: 6px;
+    backdrop-filter: blur(10px);
+}
+
+.dropdown.active .dropdown-content { display: block; }
+
+.dropdown-content a {
+    display: block;
+    padding: 10px 14px;
+    color: var(--text);
+    font-size: 0.85rem;
+    border-radius: var(--radius-sm);
+    font-weight: 500;
+    transition: all 0.15s;
+}
+
+.dropdown-content a:hover {
+    background: var(--accent);
+    color: white;
+}
+
+/* Terminal */
+.terminal-window {
+    background: var(--panel-bg);
+    display: flex;
+    overflow: auto;
+    font-family: var(--mono);
+    font-size: 13px;
+    line-height: 1.7;
+    border-radius: 0 0 var(--radius) var(--radius);
+}
+
+.line-col {
+    padding: 16px 12px;
+    text-align: right;
+    color: var(--line-num);
+    border-right: 1px solid var(--border);
+    min-width: 48px;
+    user-select: none;
+    font-size: 0.75rem;
+    font-weight: 500;
+}
+
+.code-col {
+    padding: 16px;
+    flex: 1;
+    white-space: pre;
+}
+
+.tree-line {
+    display: flex;
+    align-items: center;
+    height: 26px;
+    border-radius: 4px;
+    padding: 0 4px;
+}
+
+.tree-line:hover { background: var(--accent-light); }
+
+.t-prefix {
+    color: var(--tree-line);
+    white-space: pre;
+    margin-right: 4px;
+}
+
+.t-icon {
+    width: 22px;
+    text-align: center;
+    display: inline-block;
+    margin-right: 7px;
+    font-size: 0.85rem;
+}
+
+.fa-folder { color: var(--folder-color); }
+.fa-file { color: var(--file-color); }
+
+.t-name {
+    color: var(--text);
+    font-weight: 500;
+}
+
+.t-name.folder { font-weight: 700; }
+
+.t-size {
+    color: var(--text-secondary);
+    font-size: 0.72rem;
+    margin-left: 12px;
+    font-weight: 500;
+    opacity: 0.8;
+}
+
+.sub-copy {
+    opacity: 0;
+    margin-left: 8px;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 3px;
+    font-size: 0.78rem;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+}
+
+.tree-line:hover .sub-copy { opacity: 1; }
+.sub-copy:hover { color: var(--accent); transform: scale(1.15); }
+
+.fa-check { color: #22c55e; }
+
+#lineNumbers div { height: 26px; display: flex; align-items: center; justify-content: flex-end; }
+
+.lfs-badge {
+    font-size: 0.6rem;
+    padding: 1px 6px;
+    border-radius: 4px;
+    background: var(--tag-dataset);
+    color: var(--dataset-color);
+    margin-left: 8px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+
+/* Tree Search */
+.tree-search {
+    padding: 10px 16px;
+    border-bottom: 1px solid var(--border);
+    background: var(--header-bg);
+}
+
+.tree-search input {
+    width: 100%;
+    padding: 9px 14px;
+    background: var(--bg);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font-family: var(--mono);
+    font-size: 0.82rem;
+    font-weight: 500;
+}
+
+.tree-search input:focus {
+    border-color: var(--accent);
+    outline: none;
+    box-shadow: 0 0 0 3px var(--accent-border);
+}
+
+/* Overlay */
+.overlay {
+    position: fixed;
+    top: 0; left: 0;
+    width: 100%; height: 100%;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(6px);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.overlay.visible { display: flex; }
+
+.overlay-content {
+    background: var(--panel-bg);
+    padding: 32px;
+    border-radius: 16px;
+    width: 90%;
+    max-width: 480px;
+    border: 1px solid var(--border);
+    box-shadow: 0 24px 48px var(--shadow-lg);
+    position: relative;
+    animation: slideUp 0.25s ease-out;
+}
+
+@keyframes slideUp {
+    from { transform: translateY(12px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+.overlay-content h3 {
+    margin: 0 0 20px 0;
+    font-size: 1.15rem;
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+.share-box {
+    display: flex;
+    gap: 10px;
+    margin-top: 12px;
+}
+
+.share-box input {
+    background: var(--header-bg);
+    border: 1px solid var(--border);
+    padding: 12px 14px;
+    border-radius: var(--radius-sm);
+    color: var(--text);
+    font-family: var(--mono);
+    font-size: 0.85rem;
+    flex: 1;
+    font-weight: 500;
+}
+
+.share-box button {
+    background: var(--accent);
+    color: white;
+    border: none;
+    border-radius: var(--radius-sm);
+    padding: 0 20px;
+    cursor: pointer;
+    font-size: 1rem;
+    transition: background 0.2s;
+}
+
+.share-box button:hover { background: var(--accent-hover); }
+
+.close-btn {
+    position: absolute;
+    top: 16px; right: 16px;
+    background: var(--btn-bg);
+    border: 1px solid var(--border);
+    width: 32px; height: 32px;
+    border-radius: 50%;
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s;
+}
+
+.close-btn:hover { background: var(--btn-hover); color: var(--text); }
+
+/* Footer */
+.footer {
+    padding: 40px 20px;
+    text-align: center;
+    font-family: var(--mono);
+    font-weight: 500;
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    margin-top: auto;
+}
+
+.footer a {
+    color: var(--accent);
+    font-weight: 600;
+    text-decoration: none;
+}
+
+.footer a:hover { text-decoration: underline; }
+
+/* Spinner */
+.spinner {
+    display: inline-block;
+    width: 14px; height: 14px;
+    border: 2px solid var(--accent-border);
+    border-top-color: var(--accent);
+    border-radius: 50%;
+    animation: spin 0.6s linear infinite;
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+@keyframes fadeIn { to { opacity: 1; } }
+
+/* Responsive */
+@media (max-width: 640px) {
+    .search-section { flex-direction: column; }
+    .primary-btn { width: 100%; justify-content: center; }
+    .branch-input { max-width: 100%; }
+
+    .toolbar {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 10px;
+        padding: 12px;
+    }
+
+    .tools-group {
+        width: 100%;
+        justify-content: space-between;
+        flex-wrap: wrap;
+    }
+
+    .tools-group.right { justify-content: flex-end; }
+    .repo-info-header { flex-direction: column; align-items: flex-start; }
+
+    .type-selector { width: 100%; }
+    .type-btn { flex: 1; justify-content: center; padding: 0 10px; }
+    .repo-info-stats { flex-wrap: wrap; gap: 10px; }
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover { background: var(--tree-line); }
+::-webkit-scrollbar-track { background: transparent; }
+
+/* Selection */
+::selection {
+    background: var(--accent);
+    color: white;
+}

index.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HuggingFace Repo Structure Visualizer : HFTree</title>
+    <meta name="description" content="Effortlessly explore and visualize the file structure of any HuggingFace model, dataset, or space online without cloning.">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link rel="stylesheet" href="index.css">
+    <script type="importmap">
+    {
+      "imports": {
+        "react": "https://esm.sh/react@19.0.0",
+        "react-dom": "https://esm.sh/react-dom@19.0.0",
+        "lucide-react": "https://esm.sh/lucide-react@0.474.0",
+        "@google/genai": "https://esm.sh/@google/genai@0.2.1"
+      }
+    }
+    </script>
+<link rel="stylesheet" href="/index.css">
+</head>
+<body>
+    <div class="app-container">
+        <header>
+            <div class="brand">
+                <a href="#">
+                    <div class="brand-icon"><i class="fas fa-tree"></i></div>
+                    <span>hf-tree🤗</span>
+                </a>
+            </div>
+            <div class="header-actions">
+                <button id="privateRepoBtn" class="text-btn" title="Access Private Repos">
+                    <i class="fas fa-lock"></i> Token
+                </button>
+                <button id="themeToggle" class="icon-btn" aria-label="Toggle Theme">
+                    <i class="fas fa-sun sun-icon"></i>
+                    <i class="fas fa-moon moon-icon"></i>
+                </button>
+            </div>
+        </header>
+
+        <div id="tokenSection" class="token-panel" style="display: none;">
+            <div class="token-inner">
+                <i class="fas fa-key"></i>
+                <input type="password" id="hfToken" placeholder="Paste HuggingFace Access Token (hf_...)">
+                <button id="saveTokenBtn">Save</button>
+                <button id="clearTokenBtn" style="display:none;">Clear</button>
+            </div>
+            <p class="token-warning">
+                <i class="fas fa-exclamation-triangle"></i> Token is saved to your browser's <b>LocalStorage</b>. Do not use on public computers.
+            </p>
+        </div>
+
+        <div class="search-section">
+            <div class="type-selector">
+                <button class="type-btn active-model" data-type="models" id="typeModel">
+                    <i class="fas fa-cube"></i> Model
+                </button>
+                <button class="type-btn" data-type="datasets" id="typeDataset">
+                    <i class="fas fa-database"></i> Dataset
+                </button>
+                <button class="type-btn" data-type="spaces" id="typeSpace">
+                    <i class="fas fa-rocket"></i> Space
+                </button>
+            </div>
+            <div class="input-group main-input">
+                <span class="prefix" id="urlPrefix">hf.co/</span>
+                <input type="text" id="repoInput" placeholder="username/repo-name" autocomplete="off">
+            </div>
+            <div class="input-group branch-input">
+                <span class="prefix">rev:</span>
+                <input type="text" id="branchInput" placeholder="main" autocomplete="off">
+            </div>
+            <button id="fetchBtn" class="primary-btn">
+                <i class="fas fa-search"></i> Fetch
+            </button>
+        </div>
+
+        <div id="statusMsg" style="display: none;"></div>
+
+        <div id="repoInfoCard" class="repo-info-card">
+            <div class="repo-info-header">
+                <div class="repo-info-left">
+                    <span class="repo-type-badge" id="repoTypeBadge">MODEL</span>
+                    <span class="repo-info-name" id="repoInfoName"></span>
+                </div>
+                <div class="repo-info-stats" id="repoInfoStats"></div>
+            </div>
+        </div>
+
+        <div id="emptyState" class="empty-state">
+            <div class="homepage-section">
+                <h3 style="font-size: 1.3rem; text-transform: none; letter-spacing: -0.02em; color: var(--text);">
+                    🤗 Explore HuggingFace Repositories
+                </h3>
+                <p>Visualize the file tree of any Model, Dataset, or Space</p>
+            </div>
+            <div class="homepage-section">
+                <h3>Featured</h3>
+                <div id="featuredCloud" class="tag-cloud"></div>
+            </div>
+            <div class="homepage-section">
+                <h3>Popular Models</h3>
+                <div id="modelCloud" class="tag-cloud"></div>
+            </div>
+            <div class="homepage-section">
+                <h3>Popular Datasets</h3>
+                <div id="datasetCloud" class="tag-cloud"></div>
+            </div>
+        </div>
+
+        <div id="treeWrapper" class="tree-wrapper" style="display: none;">
+            <div class="toolbar">
+                <div class="tools-group">
+                    <div class="dropdown">
+                        <button class="tool-btn" id="sortBtnLabel">
+                            <i class="fas fa-sort-amount-down"></i> Sort
+                        </button>
+                        <div class="dropdown-content">
+                            <a href="#" data-sort="folder-az">Folders First (A-Z)</a>
+                            <a href="#" data-sort="folder-za">Folders First (Z-A)</a>
+                            <a href="#" data-sort="alpha-az">Name (A-Z)</a>
+                            <a href="#" data-sort="alpha-za">Name (Z-A)</a>
+                            <a href="#" data-sort="size-desc">Size (Largest)</a>
+                            <a href="#" data-sort="size-asc">Size (Smallest)</a>
+                        </div>
+                    </div>
+                    <div class="dropdown">
+                        <button class="tool-btn" id="styleBtnLabel">
+                            <i class="fas fa-code-branch"></i> Style
+                        </button>
+                        <div class="dropdown-content">
+                            <a href="#" data-style="classic">Classic (└──)</a>
+                            <a href="#" data-style="slashed">Slashed (/src)</a>
+                            <a href="#" data-style="plus">ASCII (+--)</a>
+                            <a href="#" data-style="minimal">Minimal (Indent)</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="tools-group right">
+                    <button id="shareBtn" class="tool-btn">
+                        <i class="fas fa-share-alt"></i> Share
+                    </button>
+                    <button id="copyAllBtn" class="tool-btn action-btn">
+                        <i class="far fa-copy"></i> Copy Tree
+                    </button>
+                </div>
+            </div>
+            <div class="tree-search">
+                <input type="text" id="treeFilter" placeholder="Filter files… (e.g. .safetensors, config, README)">
+            </div>
+            <div class="terminal-window">
+                <div id="lineNumbers" class="line-col"></div>
+                <div id="treeContent" class="code-col"></div>
+            </div>
+        </div>
+
+        <div class="footer">
+            Built by <a href="https://hf.co/prithivMLmods" target="_blank" rel="noopener">prithivMLmods</a>
+        </div>
+    </div>
+
+    <div id="shareOverlay" class="overlay">
+        <div class="overlay-content">
+            <h3>Share View</h3>
+            <div class="share-box">
+                <input type="text" id="shareInput" readonly>
+                <button id="copyShareBtn"><i class="far fa-copy"></i></button>
+            </div>
+            <button id="closeOverlay" class="close-btn">&times;</button>
+        </div>
+    </div>
+
+    <script type="module" src="index.tsx"></script>
+<script type="module" src="/index.tsx"></script>
+</body>
+</html>

index.tsx

@@ -0,0 +1,511 @@
+/**
+ * HFTree — HuggingFace Repo Tree Visualizer
+ * Core logic implementation as a TypeScript module.
+ */
+
+const HF_API = 'https://huggingface.co/api';
+
+// Configuration
+const FEATURED = [
+    { repo: 'prithivMLmods/Qwen3-VL-4B-Instruct-Unredacted-MAX', type: 'models', label: 'Qwen3-VL-4B-Instruct-Unredacted-MAX' },
+    { repo: 'prithivMLmods/Qwen3-VL-abliterated-MAX-Fast', type: 'spaces', label: 'Qwen3-VL Space' },
+    { repo: 'prithivMLmods/LAP2-K-Think-v1.b', type: 'datasets', label: 'LAP2-K-Think' },
+];
+
+const POPULAR_MODELS = [
+    { repo: 'meta-llama/Llama-3.1-8B-Instruct', type: 'models' },
+    { repo: 'mistralai/Mistral-7B-Instruct-v0.3', type: 'models' },
+    { repo: 'google/gemma-2-9b-it', type: 'models' },
+    { repo: 'Qwen/Qwen2.5-7B-Instruct', type: 'models' },
+    { repo: 'stabilityai/stable-diffusion-xl-base-1.0', type: 'models' },
+    { repo: 'openai/whisper-large-v3', type: 'models' },
+    { repo: 'microsoft/Phi-3-mini-4k-instruct', type: 'models' },
+    { repo: 'black-forest-labs/FLUX.1-dev', type: 'models' },
+];
+
+const POPULAR_DATASETS = [
+    { repo: 'tatsu-lab/alpaca', type: 'datasets' },
+    { repo: 'databricks/databricks-dolly-15k', type: 'datasets' },
+    { repo: 'Open-Orca/OpenOrca', type: 'datasets' },
+    { repo: 'HuggingFaceFW/fineweb', type: 'datasets' },
+    { repo: 'allenai/c4', type: 'datasets' },
+];
+
+let currentData: any[] = [];
+let currentSort = 'folder-az';
+let currentStyle = 'classic';
+let currentType = 'models';
+let currentRepo = '';
+let currentBranch = 'main';
+let filterText = '';
+
+// DOM Cache
+const els: any = {
+    repo: document.getElementById('repoInput'),
+    branch: document.getElementById('branchInput'),
+    fetchBtn: document.getElementById('fetchBtn'),
+    wrapper: document.getElementById('treeWrapper'),
+    empty: document.getElementById('emptyState'),
+    status: document.getElementById('statusMsg'),
+    lineNums: document.getElementById('lineNumbers'),
+    treeContent: document.getElementById('treeContent'),
+    privateBtn: document.getElementById('privateRepoBtn'),
+    tokenPanel: document.getElementById('tokenSection'),
+    hfToken: document.getElementById('hfToken'),
+    saveToken: document.getElementById('saveTokenBtn'),
+    clearToken: document.getElementById('clearTokenBtn'),
+    copyAll: document.getElementById('copyAllBtn'),
+    shareBtn: document.getElementById('shareBtn'),
+    overlay: document.getElementById('shareOverlay'),
+    shareInput: document.getElementById('shareInput'),
+    copyShareBtn: document.getElementById('copyShareBtn'),
+    closeOverlay: document.getElementById('closeOverlay'),
+    sortBtnLabel: document.getElementById('sortBtnLabel'),
+    styleBtnLabel: document.getElementById('styleBtnLabel'),
+    dropdowns: document.querySelectorAll('.dropdown'),
+    urlPrefix: document.getElementById('urlPrefix'),
+    typeModel: document.getElementById('typeModel'),
+    typeDataset: document.getElementById('typeDataset'),
+    typeSpace: document.getElementById('typeSpace'),
+    repoInfoCard: document.getElementById('repoInfoCard'),
+    repoTypeBadge: document.getElementById('repoTypeBadge'),
+    repoInfoName: document.getElementById('repoInfoName'),
+    repoInfoStats: document.getElementById('repoInfoStats'),
+    treeFilter: document.getElementById('treeFilter'),
+};
+
+// --- Helpers ---
+
+function getHeaders() {
+    const t = localStorage.getItem('hft_token');
+    const h: Record<string, string> = { 'Accept': 'application/json' };
+    if (t && t.trim()) h['Authorization'] = `Bearer ${t.trim()}`;
+    return h;
+}
+
+function getRepoPageUrl(type: string, repo: string) {
+    if (type === 'datasets') return `https://huggingface.co/datasets/${repo}`;
+    if (type === 'spaces') return `https://huggingface.co/spaces/${repo}`;
+    return `https://huggingface.co/${repo}`;
+}
+
+function formatSize(bytes: number) {
+    if (!bytes) return '0 B';
+    const u = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${(bytes / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1)} ${u[i]}`;
+}
+
+function escapeRegex(s: string) {
+    return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function getFileIcon(name: string) {
+    const ext = name.split('.').pop()?.toLowerCase() || '';
+    const nl = name.toLowerCase();
+    if (nl === 'dockerfile') return 'fa-brands fa-docker';
+    if (nl === 'license' || nl === 'licence') return 'fa-solid fa-scale-balanced';
+    if (nl === 'readme.md' || nl === 'readme') return 'fa-solid fa-book';
+    if (nl === 'requirements.txt') return 'fa-solid fa-list-check';
+    if (nl === '.gitignore' || nl === '.gitattributes') return 'fa-brands fa-git-alt';
+    const map: Record<string, string> = {
+        py: 'fa-brands fa-python', js: 'fa-brands fa-js', ts: 'fa-brands fa-js',
+        jsx: 'fa-brands fa-react', tsx: 'fa-brands fa-react',
+        html: 'fa-brands fa-html5', css: 'fa-brands fa-css3-alt',
+        md: 'fa-solid fa-file-lines', json: 'fa-solid fa-file-code',
+        yaml: 'fa-solid fa-file-code', yml: 'fa-solid fa-file-code', toml: 'fa-solid fa-file-code',
+        txt: 'fa-solid fa-file-lines', csv: 'fa-solid fa-file-csv',
+        png: 'fa-solid fa-file-image', jpg: 'fa-solid fa-file-image', jpeg: 'fa-solid fa-file-image',
+        gif: 'fa-solid fa-file-image', svg: 'fa-solid fa-file-image', webp: 'fa-solid fa-file-image',
+        mp4: 'fa-solid fa-file-video', mp3: 'fa-solid fa-file-audio', wav: 'fa-solid fa-file-audio',
+        pdf: 'fa-solid fa-file-pdf', zip: 'fa-solid fa-file-zipper', tar: 'fa-solid fa-file-zipper', gz: 'fa-solid fa-file-zipper',
+        safetensors: 'fa-solid fa-cube', bin: 'fa-solid fa-cube', gguf: 'fa-solid fa-cube',
+        pt: 'fa-solid fa-cube', pth: 'fa-solid fa-cube', onnx: 'fa-solid fa-cube', h5: 'fa-solid fa-cube',
+        parquet: 'fa-solid fa-database', arrow: 'fa-solid fa-database',
+        rs: 'fa-brands fa-rust', go: 'fa-brands fa-golang', java: 'fa-brands fa-java',
+        sh: 'fa-solid fa-terminal', bash: 'fa-solid fa-terminal',
+    };
+    return map[ext] || 'fa-regular fa-file';
+}
+
+// --- API Methods ---
+
+async function fetchTree(type: string, repo: string, branch: string, path: string = '') {
+    const url = path
+        ? `${HF_API}/${type}/${repo}/tree/${branch}/${path}`
+        : `${HF_API}/${type}/${repo}/tree/${branch}`;
+    const resp = await fetch(url, { headers: getHeaders() });
+    if (!resp.ok) {
+        if (resp.status === 401) throw new Error('401: Unauthorized. Check your token.');
+        if (resp.status === 403) throw new Error('403: Forbidden / Rate Limited.');
+        if (resp.status === 404) {
+            if (branch === 'main' && !path) {
+                const r2 = await fetch(`${HF_API}/${type}/${repo}/tree/master`, { headers: getHeaders() });
+                if (r2.ok) return { items: await r2.json(), switchedBranch: 'master' };
+            }
+            throw new Error('404: Repository not found (or is private).');
+        }
+        throw new Error(`HTTP ${resp.status}: ${resp.statusText}`);
+    }
+    return { items: await resp.json(), switchedBranch: null };
+}
+
+async function fetchFullTree(type: string, repo: string, branch: string) {
+    let all: any[] = [], switched: string | null = null;
+    async function recurse(path: string) {
+        const r = await fetchTree(type, repo, switched || branch, path);
+        if (r.switchedBranch && !switched) switched = r.switchedBranch;
+        for (const item of r.items) {
+            all.push({
+                path: item.path,
+                type: item.type === 'directory' ? 'tree' : 'blob',
+                size: item.size || 0,
+                lfs: item.lfs || null,
+            });
+            if (item.type === 'directory') {
+                try { await recurse(item.path); }
+                catch (e: any) { console.warn(`Skip ${item.path}: ${e.message}`); }
+            }
+        }
+    }
+    await recurse('');
+    return { tree: all, branch: switched || branch };
+}
+
+// --- UI Methods ---
+
+function buildVisualHierarchy(sortedList: any[]) {
+    const root: any = { children: [] }, map: any = { '': root };
+    sortedList.forEach(item => { map[item.path] = { ...item, name: item.path.split('/').pop(), children: [] }; });
+    sortedList.forEach(item => {
+        const pts = item.path.split('/'); pts.pop();
+        (map[pts.join('/')] || root).children.push(map[item.path]);
+    });
+    const result: any[] = [];
+    function traverse(node: any, prefix: string, isLast: boolean) {
+        const conn = isLast ? "└── " : "├── ";
+        result.push({
+            name: node.name, path: node.path, type: node.type,
+            size: node.size, lfs: node.lfs,
+            prefix: prefix + conn,
+            indent: prefix.replace(/│   /g, '    ').replace(/├── /g, '    ').replace(/└── /g, '    ') + '    '
+        });
+        if (node.children && node.children.length) {
+            const cp = prefix + (isLast ? "    " : "│   ");
+            node.children.forEach((c: any, i: number) => traverse(c, cp, i === node.children.length - 1));
+        }
+    }
+    root.children.forEach((c: any, i: number) => traverse(c, "", i === root.children.length - 1));
+    return result;
+}
+
+function sortTree(data: any[], mode: string) {
+    const s = [...data];
+    s.sort((a, b) => {
+        const ad = a.type === 'tree' ? 1 : 0, bd = b.type === 'tree' ? 1 : 0;
+        const an = a.path.toLowerCase(), bn = b.path.toLowerCase();
+        switch (mode) {
+            case 'folder-az': if (ad !== bd) return bd - ad; return an.localeCompare(bn);
+            case 'folder-za': if (ad !== bd) return bd - ad; return bn.localeCompare(an);
+            case 'alpha-az': return an.localeCompare(bn);
+            case 'alpha-za': return bn.localeCompare(an);
+            case 'size-desc': return (b.size || 0) - (a.size || 0);
+            case 'size-asc': return (a.size || 0) - (b.size || 0);
+            default: return 0;
+        }
+    });
+    return s;
+}
+
+function render() {
+    els.lineNums.innerHTML = '';
+    els.treeContent.innerHTML = '';
+    let data = currentData;
+    if (filterText) {
+        const mp = new Set();
+        currentData.forEach(item => {
+            if (item.path.toLowerCase().includes(filterText)) {
+                mp.add(item.path);
+                const pts = item.path.split('/');
+                for (let i = 1; i < pts.length; i++) mp.add(pts.slice(0, i).join('/'));
+            }
+        });
+        data = currentData.filter(i => mp.has(i.path));
+    }
+    const sorted = sortTree(data, currentSort);
+    const hier = buildVisualHierarchy(sorted);
+    const fn = document.createDocumentFragment(), fl = document.createDocumentFragment();
+    hier.forEach((item, idx) => {
+        const n = document.createElement('div');
+        n.textContent = (idx + 1).toString();
+        fn.appendChild(n);
+        const row = document.createElement('div');
+        row.className = 'tree-line';
+        row.style.animation = `fadeIn 0.1s forwards ${Math.min(idx * 2, 500)}ms`;
+        row.style.opacity = '0';
+        const ic = item.type === 'tree' ? 'fa-solid fa-folder' : getFileIcon(item.name);
+        const tc = item.type === 'tree' ? 'folder' : 'file';
+        let pre = item.prefix, nm = item.name;
+        if (currentStyle === 'minimal') pre = item.indent;
+        if (currentStyle === 'plus') pre = pre.replace(/└──/g, '+--').replace(/├──/g, '+--').replace(/│/g, '|');
+        if (currentStyle === 'slashed') {
+            if (item.type === 'tree') nm = `/${item.name}`;
+            pre = item.prefix.replace(/│/g, ' ').replace(/├──/g, ' ').replace(/└──/g, ' ');
+        }
+        const sz = item.type === 'blob' && item.size ? `<span class="t-size">${formatSize(item.size)}</span>` : '';
+        const lf = item.lfs ? `<span class="lfs-badge">LFS</span>` : '';
+        let nh = nm;
+        if (filterText && nm.toLowerCase().includes(filterText)) {
+            const rx = new RegExp(`(${escapeRegex(filterText)})`, 'gi');
+            nh = nm.replace(rx, '<mark style="background:var(--accent-light);color:var(--accent);padding:0 2px;border-radius:2px;">$1</mark>');
+        }
+        row.innerHTML = `<span class="t-prefix">${pre}</span><span class="t-icon"><i class="${ic}"></i></span><span class="t-name ${tc}">${nh}</span>${sz}${lf}<button class="sub-copy" data-path="${item.path}" title="Copy Path"><i class="far fa-copy"></i></button>`;
+        fl.appendChild(row);
+    });
+    els.lineNums.appendChild(fn);
+    els.treeContent.appendChild(fl);
+}
+
+function showMsg(text: string, type: string) {
+    els.status.style.display = text ? 'block' : 'none';
+    els.status.innerHTML = text;
+    els.status.className = type;
+}
+
+function showRepoInfo(repo: string, branch: string) {
+    const tc = currentType === 'models' ? 'model' : currentType === 'datasets' ? 'dataset' : 'space';
+    const tl = currentType === 'models' ? 'MODEL' : currentType === 'datasets' ? 'DATASET' : 'SPACE';
+    els.repoTypeBadge.className = `repo-type-badge ${tc}`;
+    els.repoTypeBadge.textContent = tl;
+    els.repoInfoName.innerHTML = `<a href="${getRepoPageUrl(currentType, repo)}" target="_blank" rel="noopener">${repo}</a>`;
+    const fc = currentData.filter(i => i.type === 'blob').length;
+    const dc = currentData.filter(i => i.type === 'tree').length;
+    const ts = currentData.reduce((a, i) => a + (i.size || 0), 0);
+    els.repoInfoStats.innerHTML = `
+        <span><i class="far fa-file"></i> ${fc} files</span>
+        <span><i class="far fa-folder"></i> ${dc} folders</span>
+        <span><i class="fas fa-weight-hanging"></i> ${formatSize(ts)}</span>
+        <span><i class="fas fa-code-branch"></i> ${branch}</span>`;
+    els.repoInfoCard.classList.add('visible');
+}
+
+async function loadTree() {
+    const repo = els.repo.value.trim();
+    const branch = els.branch.value.trim() || 'main';
+    if (!repo.includes('/')) return showMsg("Invalid format. Use 'username/repo-name'", "error");
+    currentRepo = repo; currentBranch = branch;
+    filterText = ''; els.treeFilter.value = '';
+    if (els.empty) els.empty.style.display = 'none';
+    els.wrapper.style.display = 'none';
+    els.repoInfoCard.classList.remove('visible');
+    showMsg(`<span class="spinner"></span> Fetching ${currentType}/${repo} (${branch})…`, "loading");
+    els.fetchBtn.disabled = true;
+    try {
+        const ck = `hft_${currentType}_${repo}_${branch}`;
+        const ta = !!localStorage.getItem('hft_token');
+        const cached = !ta ? sessionStorage.getItem(ck) : null;
+        if (cached) {
+            const p = JSON.parse(cached);
+            currentData = p.tree; currentBranch = p.branch;
+            showMsg("", "");
+        } else {
+            const r = await fetchFullTree(currentType, repo, branch);
+            currentData = r.tree; currentBranch = r.branch;
+            if (r.branch !== branch) {
+                showMsg(`Branch '${branch}' not found → '${r.branch}'.`, "loading");
+                els.branch.value = r.branch;
+            } else showMsg("", "");
+            if (!ta) try { sessionStorage.setItem(ck, JSON.stringify({ tree: currentData, branch: currentBranch })); } catch (e) { }
+        }
+        window.location.hash = `${currentType}/${repo}/${currentBranch}`;
+        document.title = `${repo} — HFTree`;
+        showRepoInfo(repo, currentBranch);
+        render();
+        els.wrapper.style.display = 'flex';
+    } catch (err: any) {
+        console.error(err);
+        const m = err.message;
+        if (m.includes('401')) {
+            showMsg(`
+                <i class="fas fa-lock"></i> <b>Unauthorized (401)</b><br>
+                Check your HuggingFace token or Provide one.
+            `, "error");
+        } else if (m.includes('403')) {
+            showMsg("Rate limited or forbidden. Try adding a token.", "error");
+        } else if (m.includes('404')) {
+            showMsg("Repository not found. Check name and type.", "error");
+        } else {
+            showMsg(m, "error");
+        }
+        els.empty.style.display = 'block';
+    } finally { els.fetchBtn.disabled = false; }
+}
+
+function handleCopy(btn: any, text: string, isSub: boolean) {
+    navigator.clipboard.writeText(text).then(() => {
+        if (!isSub) {
+            const oh = btn.innerHTML;
+            btn.innerHTML = `<i class="fas fa-check"></i> Copied`;
+            setTimeout(() => { btn.innerHTML = oh; }, 1500);
+        } else {
+            const ic = btn.querySelector('i'), oc = ic.className;
+            ic.className = "fas fa-check";
+            setTimeout(() => { ic.className = oc; }, 1500);
+        }
+    }).catch(e => console.error("Copy failed", e));
+}
+
+function generateAsciiTree(data: any[]) {
+    const sorted = sortTree(data, currentSort);
+    const hier = buildVisualHierarchy(sorted);
+    const lines = [`${currentRepo} (${currentBranch})`];
+    hier.forEach(item => {
+        let pre = item.prefix, nm = item.name;
+        if (currentStyle === 'minimal') pre = item.indent;
+        if (currentStyle === 'plus') pre = pre.replace(/└──/g, '+--').replace(/├──/g, '+--').replace(/│/g, '|');
+        if (currentStyle === 'slashed') {
+            if (item.type === 'tree') nm = `/${nm}`;
+            pre = item.prefix.replace(/│/g, ' ').replace(/├──/g, ' ').replace(/└──/g, ' ');
+        }
+        const sz = item.type === 'blob' && item.size ? ` (${formatSize(item.size)})` : '';
+        lines.push(`${pre}${nm}${sz}`);
+    });
+    return lines.join('\n');
+}
+
+function setType(type: string) {
+    currentType = type;
+    [els.typeModel, els.typeDataset, els.typeSpace].forEach(b => b.classList.remove('active-model', 'active-dataset', 'active-space'));
+    if (type === 'models') { els.typeModel.classList.add('active-model'); els.urlPrefix.textContent = 'hf.co/'; }
+    if (type === 'datasets') { els.typeDataset.classList.add('active-dataset'); els.urlPrefix.textContent = 'hf.co/datasets/'; }
+    if (type === 'spaces') { els.typeSpace.classList.add('active-space'); els.urlPrefix.textContent = 'hf.co/spaces/'; }
+}
+
+function checkSavedToken() {
+    const t = localStorage.getItem('hft_token');
+    if (t) {
+        els.hfToken.value = t;
+        els.privateBtn.innerHTML = `<i class="fas fa-lock-open"></i> Active`;
+        els.privateBtn.style.color = 'var(--accent)';
+        els.saveToken.style.display = 'none';
+        els.clearToken.style.display = 'inline-block';
+    } else {
+        els.privateBtn.innerHTML = `<i class="fas fa-lock"></i> Token`;
+        els.privateBtn.style.color = '';
+        els.saveToken.style.display = 'inline-block';
+        els.clearToken.style.display = 'none';
+    }
+}
+
+// --- Init ---
+
+function init() {
+    // Theme
+    const savedTheme = localStorage.getItem('hft_theme') || 'light';
+    document.documentElement.setAttribute('data-theme', savedTheme);
+    document.getElementById('themeToggle')?.addEventListener('click', () => {
+        const n = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
+        document.documentElement.setAttribute('data-theme', n);
+        localStorage.setItem('hft_theme', n);
+    });
+
+    checkSavedToken();
+
+    // Dropdowns
+    [els.sortBtnLabel, els.styleBtnLabel].forEach(btn => {
+        btn.addEventListener('click', (e: any) => {
+            e.stopPropagation();
+            const p = btn.parentElement;
+            els.dropdowns.forEach((d: any) => { if (d !== p) d.classList.remove('active'); });
+            p.classList.toggle('active');
+        });
+    });
+    document.querySelectorAll('[data-sort]').forEach(el => {
+        el.addEventListener('click', (e: any) => {
+            e.preventDefault();
+            currentSort = e.target.dataset.sort;
+            els.sortBtnLabel.innerHTML = `<i class="fas fa-sort-amount-down"></i> ${e.target.innerText}`;
+            els.dropdowns.forEach((d: any) => d.classList.remove('active'));
+            render();
+        });
+    });
+    document.querySelectorAll('[data-style]').forEach(el => {
+        el.addEventListener('click', (e: any) => {
+            e.preventDefault();
+            currentStyle = e.target.dataset.style;
+            els.styleBtnLabel.innerHTML = `<i class="fas fa-code-branch"></i> ${e.target.innerText}`;
+            els.dropdowns.forEach((d: any) => d.classList.remove('active'));
+            render();
+        });
+    });
+    document.addEventListener('click', () => els.dropdowns.forEach((d: any) => d.classList.remove('active')));
+
+    // Event Listeners
+    els.fetchBtn.addEventListener('click', loadTree);
+    els.copyAll.addEventListener('click', () => handleCopy(els.copyAll, generateAsciiTree(currentData), false));
+    els.privateBtn.addEventListener('click', () => {
+        els.tokenPanel.style.display = els.tokenPanel.style.display === 'none' ? 'block' : 'none';
+    });
+    els.saveToken.addEventListener('click', () => {
+        const t = els.hfToken.value.trim();
+        if (t) localStorage.setItem('hft_token', t);
+        checkSavedToken();
+        showMsg("Token saved.", "loading");
+        setTimeout(() => showMsg("", ""), 1500);
+    });
+    els.clearToken.addEventListener('click', () => {
+        localStorage.removeItem('hft_token');
+        els.hfToken.value = '';
+        checkSavedToken();
+        showMsg("Token cleared.", "loading");
+        setTimeout(() => showMsg("", ""), 1500);
+    });
+    [els.typeModel, els.typeDataset, els.typeSpace].forEach(b =>
+        b.addEventListener('click', () => setType(b.dataset.type))
+    );
+    els.treeFilter.addEventListener('input', (e: any) => { filterText = e.target.value.trim().toLowerCase(); render(); });
+    els.treeContent.onclick = (e: any) => {
+        const b = e.target.closest('.sub-copy');
+        if (b) handleCopy(b, b.dataset.path, true);
+    };
+
+    // Share Overlay
+    els.shareBtn.addEventListener('click', (e: any) => {
+        e.stopPropagation();
+        els.shareInput.value = window.location.href;
+        els.overlay.classList.add('visible');
+    });
+    els.closeOverlay.addEventListener('click', () => els.overlay.classList.remove('visible'));
+    els.overlay.addEventListener('click', (e: any) => { if (e.target === els.overlay) els.overlay.classList.remove('visible'); });
+    els.shareInput.addEventListener('click', () => els.shareInput.select());
+    els.copyShareBtn.addEventListener('click', () => handleCopy(els.copyShareBtn, els.shareInput.value, true));
+
+    // Featured Tags
+    const createRepoTag = (label: string, type: string, repo: string) => {
+        const btn = document.createElement('button');
+        btn.className = 'repo-tag';
+        const tc = type === 'models' ? 'model' : type === 'datasets' ? 'dataset' : 'space';
+        const tl = type === 'models' ? 'MODEL' : type === 'datasets' ? 'DATA' : 'SPACE';
+        btn.innerHTML = `<span class="tag-type ${tc}">${tl}</span> ${label}`;
+        btn.addEventListener('click', () => {
+            setType(type); els.repo.value = repo; els.branch.value = 'main'; loadTree();
+        });
+        return btn;
+    };
+    FEATURED.forEach(i => document.getElementById('featuredCloud')?.appendChild(createRepoTag(i.label || i.repo, i.type, i.repo)));
+    POPULAR_MODELS.forEach(i => document.getElementById('modelCloud')?.appendChild(createRepoTag(i.repo, i.type, i.repo)));
+    POPULAR_DATASETS.forEach(i => document.getElementById('datasetCloud')?.appendChild(createRepoTag(i.repo, i.type, i.repo)));
+
+    // Hash check
+    if (window.location.hash && window.location.hash.startsWith('#')) {
+        const p = window.location.hash.substring(1).split('/');
+        if (p.length >= 3 && ['models', 'datasets', 'spaces'].includes(p[0])) {
+            setType(p[0]);
+            els.repo.value = p[1] + '/' + p[2];
+            els.branch.value = p[3] || 'main';
+            loadTree();
+        }
+    }
+}
+
+init();

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "HFTree",
+  "description": "Visualize HuggingFace repository structures without cloning.",
+  "requestFramePermissions": []
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "hftree",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "lucide-react": "0.474.0",
+    "@google/genai": "0.2.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0"
+  }
+}

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "node"
+    ],
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import path from 'path';
+import { defineConfig, loadEnv } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, '.', '');
+    return {
+      server: {
+        port: 3000,
+        host: '0.0.0.0',
+      },
+      plugins: [react()],
+      define: {
+        'process.env.API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+        'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY)
+      },
+      resolve: {
+        alias: {
+          '@': path.resolve(__dirname, '.'),
+        }
+      }
+    };
+});