kruemel/Crumb-Core-v.1
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Fix vector indexing stability, add Gitea linking, enhance admin dashboard

Browse Source
This commit is contained in:
Krümel Branko
2025-12-07 18:42:38 +01:00
parent 7b300d1ba1
commit 9f2e599846
58 changed files with 12197 additions and 503 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
app/templates/crumbforest/crew.html Normal file
View File

@@ -0,0 +1,93 @@
{% extends "base_public.html" %}
{% block title %}The Crumbforest Crew{% endblock %}
{% block content %}
<main class="container">
<hgroup>
<h1>🌲 The Crumbforest Crew</h1>
<p>Meet the 15 experts ready to help you learn and build.</p>
</hgroup>
<div class="crew-grid">
{% for id, role in roles.items() %}
<article class="role-card" style="border-left: 5px solid {{ role.color }};">
<header>
<div class="role-icon">{{ role.icon }}</div>
<h3 style="color: {{ role.color }}">{{ role.name }}</h3>
<small>{{ role.title }}</small>
</header>
<p>{{ role.description }}</p>
<footer>
{% if id == 'eule' %}
<!-- Eule is public -->
<a href="/crumbforest/roles/{{ id }}" role="button" class="contrast"
style="background-color: {{ role.color }}; border-color: {{ role.color }}; width: 100%;">
Start Chat
</a>
{% else %}
<!-- Others require login (or are locked) -->
{% if user %}
<a href="/crumbforest/roles/{{ id }}" role="button" class="outline"
style="color: {{ role.color }}; border-color: {{ role.color }}; width: 100%;">
Chat
</a>
{% else %}
<a href="/login?next=/crumbforest/roles/{{ id }}" role="button" class="secondary outline"
style="width: 100%;">
🔒 Login to Chat
</a>
{% endif %}
{% endif %}
</footer>
</article>
{% endfor %}
</div>
</main>
<style>
.crew-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
}
/* 3 Column Layout for larger screens to enforce 3x5 if roles are multiple of 3 */
@media (min-width: 992px) {
.crew-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.role-card {
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 0;
/* Override pico */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.role-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.role-card header {
text-align: center;
padding-bottom: 0.5rem;
}
.role-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}
.role-card p {
flex-grow: 1;
/* Push footer down */
font-size: 0.9rem;
}
</style>
{% endblock %}

30
app/templates/crumbforest/role_chat.html
View File

@@ -5,7 +5,7 @@
{% block content %}
<main class="container">
<hgroup>
<h1>{{ role.icon }} {{ role.name }}</h1>
<h1 style="color: {{ role.color }};">{{ role.icon }} {{ role.name }}</h1>
<p>
{{ role.description }}
<a href="/crumbforest/roles/{{ role.id }}/export" role="button" class="outline secondary"
@@ -15,6 +15,18 @@
</p>
</hgroup>
<style>
:root {
--role-color: {
{
role.color
}
}
;
}
</style>
<!-- Prism.js for Syntax Highlighting -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
@@ -148,8 +160,22 @@
div.style.textAlign = 'left';
div.innerHTML = `<strong>You</strong><br>${formattedContent}`;
} else if (role === 'assistant') {
div.style.background = 'var(--pico-secondary-background)';
div.style.background = 'var(--role-color, var(--pico-secondary-background))';
div.style.color = 'white'; // Always white text on colored background? Or depends on brightness?
// Let's use a safe fallback or keep it simple. If role color is light, white text might be bad.
// But most config colors seem dark enough?
// Dumbo is #6c757d (grey), SnakePy #3776ab (blue). White text is fine.
// FunkFox #f7df1e (yellow) -> White text is BAD.
// We might need a contrast color from config or calc().
// For now, let's stick to the pico variable for text if we use role color for border?
// Or use an opacity version?
// Let's try attempting to use the role color as a border-left accent instead, to be safe with text contrast?
div.style.background = 'var(--pico-card-background-color)';
div.style.borderLeft = '5px solid var(--role-color, var(--pico-primary))';
div.style.color = 'var(--pico-color)';
div.style.marginRight = 'auto'; // Align left
div.innerHTML = `<strong>{{ role.name }}</strong><br>${formattedContent}`;
} else {

70
app/templates/crumbforest/roles_dashboard.html
View File

@@ -9,15 +9,13 @@
<p>Choose your learning companion!</p>
</hgroup>
<div class="grid">
<div class="roles-grid">
{% for role_id, role in roles.items() %}
<article class="card">
<article class="role-card" style="border-left: 5px solid {{ role.color }};">
<header>
<h3>
<span style="font-size: 2em; margin-right: 0.5rem;">{{ role.icon }}</span>
{{ role.name }}
</h3>
<p class="text-muted"><small>{{ role.title }}</small></p>
<div class="role-icon">{{ role.icon }}</div>
<h3 style="color: {{ role.color }}">{{ role.name }}</h3>
<small>{{ role.title }}</small>
</header>
<p>{{ role.description }}</p>
@@ -26,13 +24,14 @@
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem;">
{% for tag in role.tags %}
<span class="badge"
style="background-color: {{ role.color }}20; color: {{ role.color }}; border: 1px solid {{ role.color }}40;">
style="background-color: {{ role.color }}20; color: {{ role.color }}; border: 1px solid {{ role.color }}40; font-size: 0.7em; padding: 2px 6px; border-radius: 4px;">
#{{ tag }}
</span>
{% endfor %}
</div>
<a href="/crumbforest/roles/{{ role_id }}" role="button" style="width: 100%;">
<a href="/crumbforest/roles/{{ role_id }}" role="button" class="outline"
style="width: 100%; color: {{ role.color }}; border-color: {{ role.color }};">
Chat with {{ role.name }}
</a>
</footer>
@@ -40,4 +39,57 @@
{% endfor %}
</div>
</main>
<style>
.roles-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
/* Tablet: 2 columns */
@media (min-width: 768px) {
.roles-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Desktop: Strictly 3 columns */
@media (min-width: 1024px) {
.roles-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.role-card {
display: flex;
flex-direction: column;
height: 100%;
margin-bottom: 0;
transition: transform 0.2s ease, box-shadow 0.2s ease;
border-radius: 1rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.role-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.role-card header {
text-align: center;
padding-bottom: 0.5rem;
}
.role-icon {
font-size: 3rem;
margin-bottom: 0.5rem;
}
.role-card p {
flex-grow: 1;
font-size: 0.9rem;
}
</style>
{% endblock %}