Add Repositories and Apps tabs to Sources for @mention context in chat
- Added Repositories tab with GitHub/GitLab/Bitbucket support - Added Apps tab for previously created HTMX apps - @mention autocomplete in chat for repos (@botserver) and apps (@myapp) - Task context storage for autonomous task execution - CSS for repo and app cards with connection status - Mention suggestions dropdown with keyboard navigation
This commit is contained in:
parent
88a2610a62
commit
664211d6db
3 changed files with 1296 additions and 296 deletions
|
|
@ -8,7 +8,7 @@
|
|||
<header class="sources-header">
|
||||
<div class="header-left">
|
||||
<h1>Sources</h1>
|
||||
<p class="header-subtitle">Prompts, Templates, MCP Servers & AI Models</p>
|
||||
<p class="header-subtitle">Repositories, Apps, Prompts, Templates & MCP Servers</p>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="search-box">
|
||||
|
|
@ -32,6 +32,33 @@
|
|||
<button class="tab-btn active"
|
||||
role="tab"
|
||||
aria-selected="true"
|
||||
hx-get="/api/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>
|
||||
Repositories
|
||||
</button>
|
||||
<button class="tab-btn"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
hx-get="/api/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>
|
||||
Apps
|
||||
</button>
|
||||
<button class="tab-btn"
|
||||
role="tab"
|
||||
aria-selected="false"
|
||||
hx-get="/api/sources/prompts"
|
||||
hx-target="#content-area"
|
||||
hx-swap="innerHTML"
|
||||
|
|
@ -120,7 +147,7 @@
|
|||
</nav>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="content-area" id="content-area" hx-get="/api/sources/prompts" hx-trigger="load" hx-swap="innerHTML">
|
||||
<main class="content-area" id="content-area" hx-get="/api/sources/repositories" hx-trigger="load" hx-swap="innerHTML">
|
||||
<!-- Content loaded via HTMX -->
|
||||
<div class="loading-spinner">
|
||||
<div class="spinner"></div>
|
||||
|
|
|
|||
|
|
@ -525,7 +525,9 @@
|
|||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
|
|
@ -651,7 +653,402 @@
|
|||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Repository Card */
|
||||
.repo-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.repo-card:hover {
|
||||
border-color: var(--primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.repo-card.connected {
|
||||
border-color: var(--success);
|
||||
}
|
||||
|
||||
.repo-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.repo-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.repo-icon svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.repo-icon.github {
|
||||
background: linear-gradient(135deg, #24292e, #40464e);
|
||||
}
|
||||
|
||||
.repo-icon.gitlab {
|
||||
background: linear-gradient(135deg, #fc6d26, #e24329);
|
||||
}
|
||||
|
||||
.repo-icon.bitbucket {
|
||||
background: linear-gradient(135deg, #0052cc, #2684ff);
|
||||
}
|
||||
|
||||
.repo-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.repo-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 4px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.repo-name .mention-tag {
|
||||
font-size: 12px;
|
||||
color: var(--primary);
|
||||
background: var(--primary-bg);
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.repo-owner {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.repo-description {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.repo-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.repo-meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.repo-meta-item svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.repo-language {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.repo-language-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.repo-language-dot.rust {
|
||||
background: #dea584;
|
||||
}
|
||||
.repo-language-dot.typescript {
|
||||
background: #3178c6;
|
||||
}
|
||||
.repo-language-dot.javascript {
|
||||
background: #f7df1e;
|
||||
}
|
||||
.repo-language-dot.python {
|
||||
background: #3776ab;
|
||||
}
|
||||
.repo-language-dot.html {
|
||||
background: #e34f26;
|
||||
}
|
||||
.repo-language-dot.css {
|
||||
background: #1572b6;
|
||||
}
|
||||
|
||||
.repo-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.repo-status.connected {
|
||||
background: var(--success-bg);
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.repo-status.disconnected {
|
||||
background: var(--surface-hover);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.repo-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.repo-action-btn {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.repo-action-btn:hover {
|
||||
background: var(--surface-hover);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.repo-action-btn.primary {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.repo-action-btn.primary:hover {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
/* App Card */
|
||||
.app-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.app-card:hover {
|
||||
border-color: var(--primary);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.app-preview {
|
||||
height: 140px;
|
||||
background: linear-gradient(135deg, var(--surface-hover), var(--surface));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-preview-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-secondary);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.app-preview-placeholder svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.app-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.app-name .mention-tag {
|
||||
font-size: 11px;
|
||||
color: var(--primary);
|
||||
background: var(--primary-bg);
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.app-type {
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 500;
|
||||
background: var(--surface-hover);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.app-type.htmx {
|
||||
background: #e8f4fd;
|
||||
color: #0284c7;
|
||||
}
|
||||
.app-type.site {
|
||||
background: #fef3c7;
|
||||
color: #d97706;
|
||||
}
|
||||
.app-type.dashboard {
|
||||
background: #dcfce7;
|
||||
color: #16a34a;
|
||||
}
|
||||
|
||||
.app-description {
|
||||
font-size: 13px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 12px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.app-created {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.app-url {
|
||||
color: var(--primary);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.app-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.app-action-btn {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.app-action-btn:hover {
|
||||
background: var(--surface-hover);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.app-action-btn.primary {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Add Repository Modal */
|
||||
.add-repo-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.repo-url-input {
|
||||
width: 100%;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.repo-url-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px var(--primary-bg);
|
||||
}
|
||||
|
||||
/* Grids for different content types */
|
||||
.repos-grid,
|
||||
.apps-grid,
|
||||
.templates-grid,
|
||||
.servers-grid,
|
||||
.models-grid,
|
||||
|
|
@ -661,6 +1058,8 @@
|
|||
gap: 16px;
|
||||
}
|
||||
|
||||
.repos-grid.list-view,
|
||||
.apps-grid.list-view,
|
||||
.templates-grid.list-view,
|
||||
.servers-grid.list-view,
|
||||
.models-grid.list-view,
|
||||
|
|
@ -703,6 +1102,8 @@
|
|||
}
|
||||
|
||||
.prompts-grid,
|
||||
.repos-grid,
|
||||
.apps-grid,
|
||||
.templates-grid,
|
||||
.servers-grid,
|
||||
.models-grid,
|
||||
|
|
@ -710,3 +1111,79 @@
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mention autocomplete in chat */
|
||||
.mention-suggestion {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 14px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.mention-suggestion:hover,
|
||||
.mention-suggestion.active {
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
|
||||
.mention-suggestion-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.mention-suggestion-icon.repo {
|
||||
background: linear-gradient(135deg, #24292e, #40464e);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mention-suggestion-icon.app {
|
||||
background: linear-gradient(135deg, #06b6d4, #0ea5e9);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.mention-suggestion-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.mention-suggestion-name {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mention-suggestion-type {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Inline mention tag in chat */
|
||||
.chat-mention {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
background: var(--primary-bg);
|
||||
color: var(--primary);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.chat-mention:hover {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.chat-mention svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue