botui/ui/suite/sources/index.html

<link rel="stylesheet" href="sources/sources.css" />

<div class="sources-container">
    <!-- Header -->
    <header class="sources-header">
        <div class="header-left">
            <h1 data-i18n="sources-title">Sources</h1>
            <p class="header-subtitle" data-i18n="sources-subtitle">
                Repositories, Apps, Prompts, Templates & MCP Servers
            </p>
        </div>
        <div class="header-right">
            <div class="search-box">
                <svg
                    width="18"
                    height="18"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <circle cx="11" cy="11" r="8"></circle>
                    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                </svg>
                <input
                    type="text"
                    placeholder="Search sources..."
                    data-i18n-placeholder="sources-search"
                    name="q"
                    hx-get="/api/ui/sources/search"
                    hx-trigger="keyup changed delay:300ms"
                    hx-target="#content-area"
                    hx-swap="innerHTML"
                />
            </div>
        </div>
    </header>

    <!-- Tab Navigation -->
    <nav class="tab-nav" role="tablist">
        <button
            class="tab-btn active"
            role="tab"
            aria-selected="true"
            hx-get="/api/ui/sources/repositories"
            hx-target="#content-area"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path
                    d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
                ></path>
            </svg>
            <span data-i18n="sources-repositories">Repositories</span>
        </button>
        <button
            class="tab-btn"
            role="tab"
            aria-selected="false"
            hx-get="/api/ui/sources/apps"
            hx-target="#content-area"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <rect x="3" y="3" width="7" height="7"></rect>
                <rect x="14" y="3" width="7" height="7"></rect>
                <rect x="14" y="14" width="7" height="7"></rect>
                <rect x="3" y="14" width="7" height="7"></rect>
            </svg>
            <span data-i18n="sources-apps">Apps</span>
        </button>
        <button
            class="tab-btn"
            role="tab"
            aria-selected="false"
            hx-get="/api/ui/sources/prompts"
            hx-target="#content-area"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path
                    d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
                ></path>
            </svg>
            <span data-i18n="sources-prompts">Prompts</span>
        </button>
        <button
            class="tab-btn"
            role="tab"
            aria-selected="false"
            hx-get="/api/ui/sources/templates"
            hx-target="#content-area"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path
                    d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
                ></path>
                <polyline points="14 2 14 8 20 8"></polyline>
                <line x1="16" y1="13" x2="8" y2="13"></line>
                <line x1="16" y1="17" x2="8" y2="17"></line>
                <polyline points="10 9 9 9 8 9"></polyline>
            </svg>
            <span data-i18n="sources-templates">Templates</span>
        </button>
        <button
            class="tab-btn"
            role="tab"
            aria-selected="false"
            hx-get="/api/ui/sources/news"
            hx-target="#content-area"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path
                    d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1m2 13a2 2 0 0 1-2-2V7m2 13a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2"
                ></path>
            </svg>
            <span data-i18n="sources-news">News</span>
        </button>
        <button
            class="tab-btn"
            role="tab"
            aria-selected="false"
            hx-get="/api/ui/sources/mcp-servers"
            hx-target="#content-area"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
                <rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
                <line x1="6" y1="6" x2="6.01" y2="6"></line>
                <line x1="6" y1="18" x2="6.01" y2="18"></line>
            </svg>
            <span data-i18n="sources-mcp-servers">MCP Servers</span>
        </button>
        <button
            class="tab-btn"
            role="tab"
            aria-selected="false"
            hx-get="/api/ui/sources/llm-tools"
            hx-target="#content-area"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path
                    d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
                ></path>
            </svg>
            <span data-i18n="sources-llm-tools">LLM Tools</span>
        </button>
        <button
            class="tab-btn"
            role="tab"
            aria-selected="false"
            hx-get="/api/ui/sources/models"
            hx-target="#content-area"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <rect x="4" y="4" width="16" height="16" rx="2" ry="2"></rect>
                <rect x="9" y="9" width="6" height="6"></rect>
                <line x1="9" y1="1" x2="9" y2="4"></line>
                <line x1="15" y1="1" x2="15" y2="4"></line>
                <line x1="9" y1="20" x2="9" y2="23"></line>
                <line x1="15" y1="20" x2="15" y2="23"></line>
                <line x1="20" y1="9" x2="23" y2="9"></line>
                <line x1="20" y1="14" x2="23" y2="14"></line>
                <line x1="1" y1="9" x2="4" y2="9"></line>
                <line x1="1" y1="14" x2="4" y2="14"></line>
            </svg>
            <span data-i18n="sources-models">Models</span>
        </button>
        <button
            class="tab-btn"
            role="tab"
            aria-selected="false"
            hx-get="/api/ui/sources/accounts"
            hx-target="#content-area"
            hx-swap="innerHTML"
            onclick="setActiveTab(this)"
        >
            <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
            >
                <path
                    d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"
                ></path>
                <polyline points="22,6 12,13 2,6"></polyline>
            </svg>
            Accounts
        </button>
    </nav>

    <!-- Main Content Area -->
    <main
        class="content-area"
        id="content-area"
        hx-get="/api/ui/sources/repositories"
        hx-trigger="load"
        hx-swap="innerHTML"
    >
        <!-- Content loaded via HTMX -->
        <div class="loading-spinner">
            <div class="spinner"></div>
            <p>Loading sources...</p>
        </div>
    </main>
</div>

<style>
    .sources-container {
        display: flex;
        flex-direction: column;
        height: calc(100vh - 56px);
        overflow: hidden;
        background: var(--bg);
    }

    /* Header */
    .sources-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
    }

    .sources-header h1 {
        font-size: 24px;
        font-weight: 600;
        color: var(--text);
        margin: 0;
    }

    .header-subtitle {
        font-size: 14px;
        color: var(--text-secondary);
        margin-top: 4px;
    }

    .search-box {
        position: relative;
        display: flex;
        align-items: center;
    }

    .search-box svg {
        position: absolute;
        left: 12px;
        color: var(--text-secondary);
    }

    .search-box input {
        padding: 10px 16px 10px 40px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        color: var(--text);
        font-size: 14px;
        width: 280px;
    }

    .search-box input::placeholder {
        color: var(--text-secondary);
    }

    .search-box input:focus {
        outline: none;
        border-color: var(--primary);
    }

    /* Tab Navigation */
    .tab-nav {
        display: flex;
        gap: 4px;
        padding: 12px 24px;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
    }

    .tab-btn {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 10px 16px;
        border: none;
        background: transparent;
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 500;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        white-space: nowrap;
    }

    .tab-btn:hover {
        background: var(--hover);
        color: var(--text);
    }

    .tab-btn.active {
        background: var(--primary);
        color: var(--primary-text, #000);
    }

    .tab-btn svg {
        flex-shrink: 0;
    }

    /* Content Area */
    .content-area {
        flex: 1;
        overflow-y: auto;
        padding: 24px;
    }

    /* Panel Layout */
    .panel-layout {
        display: grid;
        grid-template-columns: 240px 1fr;
        gap: 24px;
        height: 100%;
    }

    /* Categories Sidebar */
    .categories-sidebar {
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 16px;
        height: fit-content;
    }

    .categories-sidebar h3 {
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        margin: 0 0 12px 0;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .category-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .category-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border: none;
        background: transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        text-align: left;
        width: 100%;
        color: var(--text);
        font-size: 14px;
    }

    .category-item:hover {
        background: var(--hover);
    }

    .category-item.active {
        background: var(--primary-light, rgba(212, 245, 5, 0.1));
    }

    .category-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--surface-alt, var(--hover));
        font-size: 16px;
    }

    .category-icon svg {
        color: var(--text);
    }

    .category-name {
        flex: 1;
    }

    .category-count {
        font-size: 12px;
        color: var(--text-secondary);
        background: var(--hover);
        padding: 2px 8px;
        border-radius: 12px;
    }

    /* Section Header */
    .section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
    }

    .section-header h2 {
        font-size: 18px;
        font-weight: 600;
        color: var(--text);
        margin: 0;
    }

    .view-controls {
        display: flex;
        gap: 4px;
        background: var(--surface);
        padding: 4px;
        border-radius: 8px;
    }

    .view-btn {
        padding: 8px;
        border: none;
        background: transparent;
        border-radius: 6px;
        cursor: pointer;
        color: var(--text-secondary);
        transition: all 0.2s;
    }

    .view-btn:hover {
        background: var(--hover);
    }

    .view-btn.active {
        background: var(--primary);
        color: var(--primary-text, #000);
    }

    /* Grid Layouts */
    .repos-grid,
    .apps-grid,
    .prompts-grid,
    .templates-grid,
    .servers-grid,
    .models-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        gap: 16px;
    }

    /* Repository Card */
    .repo-card {
        background: var(--surface);
        border-radius: 12px;
        padding: 20px;
        border: 1px solid var(--border);
        transition: all 0.2s;
    }

    .repo-card:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
    }

    .repo-header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
    }

    .repo-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-light, rgba(212, 245, 5, 0.1));
    }

    .repo-icon svg {
        color: var(--primary);
    }

    .repo-info {
        flex: 1;
        min-width: 0;
    }

    .repo-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        margin: 0;
    }

    .repo-owner {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .repo-description {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 12px 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .repo-meta {
        display: flex;
        gap: 16px;
        font-size: 12px;
        color: var(--text-secondary);
    }

    .repo-meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .repo-status {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
    }

    .repo-status.connected {
        background: rgba(76, 175, 80, 0.1);
        color: #4caf50;
    }

    .repo-status.disconnected {
        background: rgba(158, 158, 158, 0.1);
        color: #9e9e9e;
    }

    .repo-actions {
        display: flex;
        gap: 8px;
        margin-top: 16px;
    }

    .repo-actions button {
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-connect {
        background: var(--primary);
        color: var(--primary-text, #000);
    }

    .btn-disconnect {
        background: var(--hover);
        color: var(--text);
    }

    .btn-browse {
        background: transparent;
        border: 1px solid var(--border) !important;
        color: var(--text);
    }

    /* Prompt Card */
    .prompt-card {
        background: var(--surface);
        border-radius: 12px;
        padding: 20px;
        border: 1px solid var(--border);
        transition: all 0.2s;
    }

    .prompt-card:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
    }

    .prompt-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .prompt-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-light, rgba(212, 245, 5, 0.1));
        font-size: 20px;
    }

    .prompt-icon svg {
        color: var(--primary);
    }

    .prompt-info {
        flex: 1;
        min-width: 0;
    }

    .prompt-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        margin: 0 0 4px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .prompt-category {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .prompt-description {
        font-size: 14px;
        color: var(--text-secondary);
        line-height: 1.5;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .prompt-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 16px;
    }

    .prompt-rating {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--text-secondary);
        font-size: 14px;
    }

    .prompt-rating svg {
        width: 16px;
        height: 16px;
        color: #ffc107;
        fill: #ffc107;
    }

    .prompt-actions {
        display: flex;
        gap: 8px;
    }

    .prompt-action-btn {
        padding: 6px 12px;
        border: none;
        background: var(--hover);
        border-radius: 6px;
        cursor: pointer;
        font-size: 12px;
        color: var(--text);
        transition: all 0.2s;
    }

    .prompt-action-btn:hover {
        background: var(--primary);
        color: var(--primary-text, #000);
    }

    /* Server Card */
    .server-card {
        background: var(--surface);
        border-radius: 12px;
        padding: 20px;
        border: 1px solid var(--border);
        transition: all 0.2s;
    }

    .server-card:hover {
        border-color: var(--primary);
    }

    .server-header {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
    }

    .server-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-light, rgba(212, 245, 5, 0.1));
    }

    .server-icon svg {
        color: var(--primary);
    }

    .server-info {
        flex: 1;
    }

    .server-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
    }

    .server-type {
        font-size: 12px;
        color: var(--text-secondary);
        padding: 2px 8px;
        background: var(--hover);
        border-radius: 4px;
        display: inline-block;
        margin-top: 4px;
    }

    .server-description {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 12px 0;
    }

    .server-meta {
        display: flex;
        gap: 16px;
        font-size: 12px;
        color: var(--text-secondary);
    }

    .server-meta-item {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    /* Model Card */
    .model-card {
        background: var(--surface);
        border-radius: 12px;
        padding: 20px;
        border: 1px solid var(--border);
        transition: all 0.2s;
    }

    .model-card:hover {
        border-color: var(--primary);
    }

    .model-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 8px;
    }

    .model-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
    }

    .model-status {
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 4px;
    }

    .model-status.active {
        background: rgba(76, 175, 80, 0.1);
        color: #4caf50;
    }

    .model-status.coming-soon {
        background: rgba(255, 152, 0, 0.1);
        color: #ff9800;
    }

    .model-provider {
        font-size: 12px;
        color: var(--text-secondary);
        margin-bottom: 12px;
    }

    .model-description {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 12px;
    }

    .model-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .model-tag {
        font-size: 11px;
        padding: 4px 8px;
        background: var(--hover);
        border-radius: 4px;
        color: var(--text-secondary);
    }

    /* App Card */
    .app-card {
        background: var(--surface);
        border-radius: 12px;
        padding: 20px;
        border: 1px solid var(--border);
        transition: all 0.2s;
    }

    .app-card:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
    }

    .app-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }

    .app-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--primary-light, rgba(212, 245, 5, 0.1));
        font-size: 24px;
    }

    .app-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
    }

    .app-type {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .app-description {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 16px;
    }

    .app-actions {
        display: flex;
        gap: 8px;
    }

    .app-actions button {
        padding: 8px 16px;
        border: none;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
    }

    .btn-open {
        background: var(--primary);
        color: var(--primary-text, #000);
    }

    .btn-edit {
        background: var(--hover);
        color: var(--text);
    }

    /* Template Card */
    .template-card {
        background: var(--surface);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        transition: all 0.2s;
    }

    .template-card:hover {
        border-color: var(--primary);
    }

    .template-preview {
        height: 120px;
        background: var(--hover);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .template-preview svg {
        width: 48px;
        height: 48px;
        color: var(--text-secondary);
        opacity: 0.5;
    }

    .template-content {
        padding: 16px;
    }

    .template-name {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 4px;
    }

    .template-meta {
        font-size: 12px;
        color: var(--text-secondary);
    }

    /* News Card */
    .news-card {
        background: var(--surface);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border);
        transition: all 0.2s;
    }

    .news-card:hover {
        border-color: var(--primary);
    }

    .news-image {
        height: 160px;
        background: var(--hover);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .news-content {
        padding: 16px;
    }

    .news-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
        margin-bottom: 8px;
    }

    .news-excerpt {
        font-size: 14px;
        color: var(--text-secondary);
        margin-bottom: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-meta {
        font-size: 12px;
        color: var(--text-secondary);
    }

    /* Loading Spinner */
    .loading-spinner {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px;
        color: var(--text-secondary);
    }

    .spinner {
        width: 40px;
        height: 40px;
        border: 3px solid var(--border);
        border-top-color: var(--primary);
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
        margin-bottom: 16px;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Empty State */
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 60px;
        text-align: center;
    }

    .empty-state svg {
        width: 64px;
        height: 64px;
        color: var(--text-secondary);
        margin-bottom: 16px;
        opacity: 0.5;
    }

    .empty-state h3 {
        font-size: 18px;
        font-weight: 600;
        color: var(--text);
        margin: 0 0 8px 0;
    }

    .empty-state p {
        font-size: 14px;
        color: var(--text-secondary);
        margin: 0;
    }

    /* Responsive */
    @media (max-width: 1024px) {
        .panel-layout {
            grid-template-columns: 1fr;
        }

        .categories-sidebar {
            display: none;
        }
    }

    @media (max-width: 768px) {
        .sources-header {
            flex-direction: column;
            gap: 16px;
            align-items: stretch;
        }

        .search-box {
            width: 100%;
        }

        .search-box input {
            width: 100%;
        }

        .tab-nav {
            padding: 12px 16px;
            overflow-x: auto;
        }

        .tab-btn span:not(.tab-icon) {
            display: none;
        }

        .content-area {
            padding: 16px;
        }

        .repos-grid,
        .apps-grid,
        .prompts-grid,
        .templates-grid,
        .servers-grid,
        .models-grid {
            grid-template-columns: 1fr;
        }
    }
</style>

<script>
    // Tab switching
    function setActiveTab(btn) {
        document.querySelectorAll(".tab-btn").forEach((t) => {
            t.classList.remove("active");
            t.setAttribute("aria-selected", "false");
        });
        btn.classList.add("active");
        btn.setAttribute("aria-selected", "true");
    }

    // Category switching
    document.addEventListener("click", function (e) {
        const categoryItem = e.target.closest(".category-item");
        if (categoryItem) {
            document
                .querySelectorAll(".category-item")
                .forEach((c) => c.classList.remove("active"));
            categoryItem.classList.add("active");
        }
    });

    // View toggle
    document.addEventListener("click", function (e) {
        const viewBtn = e.target.closest(".view-btn");
        if (viewBtn) {
            const controls = viewBtn.closest(".view-controls");
            controls
                .querySelectorAll(".view-btn")
                .forEach((b) => b.classList.remove("active"));
            viewBtn.classList.add("active");
        }
    });

    // Keyboard shortcuts
    document.addEventListener("keydown", function (e) {
        // Ctrl+K to focus search
        if ((e.ctrlKey || e.metaKey) && e.key === "k") {
            e.preventDefault();
            const searchInput = document.querySelector(
                ".sources-container .search-box input",
            );
            if (searchInput) searchInput.focus();
        }
    });

    // HTMX loading indicator
    document.body.addEventListener("htmx:beforeRequest", function (e) {
        if (e.detail.target.id === "content-area") {
            e.detail.target.innerHTML = `
                <div class="loading-spinner">
                    <div class="spinner"></div>
                    <p>Loading...</p>
                </div>
            `;
        }
    });
</script>