Meleki
81714b1f4c
- Zeigt Anthropic API Status aus status.claude.com an - Nur sichtbar bei aktiven Incidents (minor/major/critical) - Farbcodierte Indikatoren (gelb=warning, rot=danger) - Stille Fehlerbehandlung bei nicht erreichbarem Status-Endpoint
365 lines
16 KiB
HTML
365 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>// gott</title>
|
||
<script src="js/title.js"></script>
|
||
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
|
||
<link rel="stylesheet" href="css/fonts.css">
|
||
<link rel="stylesheet" href="css/theme.css">
|
||
<link rel="stylesheet" href="css/base.css">
|
||
<link rel="stylesheet" href="css/main.css">
|
||
|
||
<link rel="stylesheet" href="css/login.css">
|
||
<link rel="stylesheet" href="css/form.css">
|
||
<link rel="stylesheet" href="css/dashboard.css">
|
||
<link rel="stylesheet" href="css/chat.css">
|
||
<link rel="stylesheet" href="css/placeholder.css">
|
||
<link rel="stylesheet" href="css/codemirror.min.css">
|
||
<link rel="stylesheet" href="css/easymde.min.css">
|
||
<link rel="stylesheet" href="css/file-explorer.css">
|
||
<link rel="stylesheet" href="css/markdown.css">
|
||
<link rel="stylesheet" href="css/tooltip.css">
|
||
<link rel="stylesheet" href="css/mobile.css">
|
||
</head>
|
||
<body>
|
||
|
||
<div id="app"></div>
|
||
|
||
<!-- Templates -->
|
||
|
||
<template id="tpl-login">
|
||
<div class="page login-page">
|
||
<div class="login-box">
|
||
<h1 class="login-title">// gott</h1>
|
||
<div class="login-form">
|
||
<input type="text" id="loginUsername" placeholder="Benutzername" autocomplete="username" autofocus>
|
||
<input type="password" id="loginPassword" placeholder="Passwort" autocomplete="current-password">
|
||
<div class="login-error" id="loginError" hidden></div>
|
||
<button id="loginBtn">Anmelden</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="tpl-dashboard">
|
||
<div class="page dashboard">
|
||
<div id="claudeStatusBar" class="status-bar" hidden>
|
||
<span class="status-indicator"></span>
|
||
<span class="status-text"></span>
|
||
</div>
|
||
<header>
|
||
<button class="back-btn icon-btn" disabled></button>
|
||
<h1 class="dashboard-title">// gott</h1>
|
||
<div class="dashboard-links">
|
||
<a id="dashboardSettingsLink" class="dashboard-link">Einstellungen</a>
|
||
<a id="dashboardProfileLink" class="dashboard-link">Mein Profil</a>
|
||
</div>
|
||
</header>
|
||
<div class="page-content">
|
||
<section>
|
||
<div class="section-header">
|
||
<h2>Sessions</h2>
|
||
<button id="newSessionBtn" class="section-add-btn"><i class="fa fa-plus"></i> Neue Session</button>
|
||
</div>
|
||
<div class="card-grid" id="sessionCards"></div>
|
||
</section>
|
||
<section>
|
||
<div class="section-header">
|
||
<h2>Agents</h2>
|
||
<button id="newAgentBtn" class="section-add-btn"><i class="fa fa-plus"></i> Neuer Agent</button>
|
||
</div>
|
||
<div class="card-grid" id="agentCards"></div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="tpl-session">
|
||
<div class="page form-page">
|
||
<header>
|
||
<button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
|
||
<h1 id="sessionPageTitle">Neue Session</h1>
|
||
</header>
|
||
<div class="page-content">
|
||
<div class="form">
|
||
<div class="avatar-section">
|
||
<div class="avatar-preview" id="sessionImagePreview">?</div>
|
||
<input type="file" id="sessionImageInput" accept="image/*" hidden>
|
||
<button id="sessionImageBtn">Bild ändern</button>
|
||
<button id="sessionImageClearBtn">Entfernen</button>
|
||
</div>
|
||
<label>Name</label>
|
||
<input type="text" id="sessionName" placeholder="Name der Session">
|
||
<label>Beschreibung</label>
|
||
<textarea id="sessionDescription" rows="3" placeholder="Beschreibung (optional)"></textarea>
|
||
<label>Agent</label>
|
||
<select id="agentSelect"></select>
|
||
<label>Workspace</label>
|
||
<div class="input-with-btn">
|
||
<input type="text" id="sessionWorkspace" placeholder="Absoluter Pfad zum Arbeitsverzeichnis (optional)">
|
||
<button type="button" id="sessionWorkspaceBrowse" class="icon-btn"><i class="fa fa-folder"></i></button>
|
||
</div>
|
||
<label>Kontext</label>
|
||
<textarea id="sessionContext" rows="4" placeholder="Zusätzlicher Kontext für den System-Prompt (optional)"></textarea>
|
||
<label>Benutzerdefinierte Befehle</label>
|
||
<div class="custom-commands" id="customCommandsList"></div>
|
||
<button type="button" id="addCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
|
||
<div class="form-actions">
|
||
<button id="sessionSaveBtn">Speichern</button>
|
||
<button id="sessionCancelBtn">Abbrechen</button>
|
||
<button id="sessionDeleteBtn" class="danger-btn" hidden>Löschen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="tpl-agent">
|
||
<div class="page form-page">
|
||
<header>
|
||
<button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
|
||
<h1 id="agentPageTitle">Neuer Agent</h1>
|
||
</header>
|
||
<div class="page-content">
|
||
<div class="form">
|
||
<div class="avatar-section">
|
||
<div class="avatar-preview" id="avatarPreview">?</div>
|
||
<input type="file" id="avatarInput" accept="image/*" hidden>
|
||
<button id="avatarBtn">Avatar ändern</button>
|
||
<button id="avatarClearBtn">Entfernen</button>
|
||
</div>
|
||
<label>Name</label>
|
||
<input type="text" id="agentName" placeholder="Name des Agents">
|
||
<label>Beschreibung</label>
|
||
<input type="text" id="agentDescription" placeholder="Kurze Beschreibung (optional)">
|
||
<label>Model</label>
|
||
<select id="agentModel">
|
||
<option value="sonnet">Sonnet 4.6</option>
|
||
<option value="opus">Opus 4.6</option>
|
||
<option value="haiku">Haiku 4.5</option>
|
||
</select>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="agentToolChoice" checked>
|
||
Tool-Nutzung erzwingen <span class="checkbox-hint">(tool_choice: any)</span>
|
||
</label>
|
||
<label>Git-Commit-Verhalten</label>
|
||
<select id="agentAutoCommit">
|
||
<option value="">Nicht erwähnen</option>
|
||
<option value="mention">Anmerken (nur auf Anweisung)</option>
|
||
<option value="enforce">Erzwingen (nach jeder Änderung)</option>
|
||
<option value="forbid">Verbieten (strikt verboten)</option>
|
||
</select>
|
||
<label>Ego</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="agentUseSoul" checked>
|
||
Hat eine Seele <span class="checkbox-hint">(SOUL.md im System-Prompt)</span>
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="agentUseIdentity" checked>
|
||
Hat eine Identität <span class="checkbox-hint">(IDENTITY.md im System-Prompt)</span>
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="agentUseUserInfo" checked>
|
||
Kennt sein Gegenüber <span class="checkbox-hint">(Benutzer-Persona im System-Prompt)</span>
|
||
</label>
|
||
<label class="checkbox-label">
|
||
<input type="checkbox" id="agentUseMemory" checked>
|
||
Zugriff auf Erinnerungen <span class="checkbox-hint">(Memory-Tools verfügbar)</span>
|
||
</label>
|
||
<label>Web-Suche</label>
|
||
<select id="agentWebSearchVersion">
|
||
<option value="">Deaktiviert</option>
|
||
<option value="web_search_20250305">Aktiviert - Version 2025</option>
|
||
<option value="web_search_20260209">Aktiviert - Version 2026</option>
|
||
</select>
|
||
<label>Skills</label>
|
||
<div id="agentSkillsSection" hidden>
|
||
<div class="skill-list" id="agentSkillList"></div>
|
||
</div>
|
||
<label>Benutzerdefinierte Befehle</label>
|
||
<div class="custom-commands" id="agentCommandsList"></div>
|
||
<button type="button" id="agentAddCommandBtn" class="add-cmd-btn">+ Befehl hinzufügen</button>
|
||
<div class="form-actions">
|
||
<button id="agentSaveBtn">Speichern</button>
|
||
<button id="agentCancelBtn">Abbrechen</button>
|
||
<button id="agentDeleteBtn" class="danger-btn" hidden>Löschen</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="tpl-chat">
|
||
<div class="page chat-page">
|
||
<header>
|
||
<button class="back-btn icon-btn" id="chatBackBtn"><i class="fa fa-arrow-left"></i></button>
|
||
<h1 id="sessionTitle">-</h1>
|
||
<div class="header-menu">
|
||
<button class="header-menu-trigger icon-btn" id="chatMenuBtn"><i class="fa fa-ellipsis-v"></i></button>
|
||
<div class="header-menu-dropdown" id="chatMenuDropdown" hidden>
|
||
<button class="header-menu-item" id="systemPromptBtn">System-Prompt anzeigen</button>
|
||
<button class="header-menu-item" id="archiveBtn">Archivieren</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div class="page-content">
|
||
<div id="chat"></div>
|
||
<div class="meta-bar" id="meta"></div>
|
||
<div id="filePreview" class="file-preview" hidden></div>
|
||
<div id="refPreview" class="ref-preview" hidden></div>
|
||
<div id="replyPreview" class="reply-preview" hidden></div>
|
||
<div class="input-area">
|
||
<input type="file" id="fileInput" accept="image/jpeg,image/png,image/gif,image/webp,application/pdf" multiple hidden>
|
||
<button id="fileBtn" class="icon-btn" title="Datei anhängen"><i class="fa fa-paperclip"></i></button>
|
||
<button id="explorerBtn" class="icon-btn" title="Workspace durchsuchen"><i class="fa fa-folder"></i></button>
|
||
<textarea id="input" placeholder="Nachricht..." rows="1"></textarea>
|
||
<button id="send" class="icon-btn"><i class="fa fa-paper-plane"></i></button>
|
||
<button id="stop" class="icon-btn stop-btn" hidden title="Antwort abbrechen"><i class="fa fa-stop"></i></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="tpl-settings">
|
||
<div class="page settings-page">
|
||
<header>
|
||
<button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
|
||
<h1>Einstellungen</h1>
|
||
</header>
|
||
<div class="page-content">
|
||
<div class="settings">
|
||
<section class="settings-section">
|
||
<h2>Darstellung</h2>
|
||
<div class="setting-row">
|
||
<div class="setting-info">
|
||
<label>Seitenbreite</label>
|
||
<span class="setting-hint">Maximale Breite des Inhaltsbereichs</span>
|
||
</div>
|
||
<div class="setting-control">
|
||
<input type="range" id="settingPageWidth" min="600" max="1800" step="50">
|
||
<span class="setting-value" id="settingPageWidthValue">900px</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="settings-section">
|
||
<h2>Chat</h2>
|
||
<div class="setting-row">
|
||
<div class="setting-info">
|
||
<label>Tool-Calls</label>
|
||
<span class="setting-hint">Welche Tool-Aufrufe im Chat angezeigt werden</span>
|
||
</div>
|
||
<div class="setting-control">
|
||
<select id="settingToolCallDisplay">
|
||
<option value="all">Alle anzeigen</option>
|
||
<option value="modifications">Nur Modifikationen</option>
|
||
<option value="hidden">Verstecken</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="setting-row">
|
||
<div class="setting-info">
|
||
<label>Chain-Info</label>
|
||
<span class="setting-hint">Tokens, Dauer und Iterationen nach jeder Antwort</span>
|
||
</div>
|
||
<div class="setting-control">
|
||
<select id="settingChainMetaDisplay">
|
||
<option value="always">Immer anzeigen</option>
|
||
<option value="sometimes">Manchmal anzeigen</option>
|
||
<option value="never">Nie anzeigen</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section id="settingsBackupSection" class="settings-section" style="display:none">
|
||
<h2>Daten</h2>
|
||
<div class="setting-row">
|
||
<div class="setting-info">
|
||
<label>Backup erstellen</label>
|
||
<span class="setting-hint">Sichert den gesamten Data-Ordner (Datenbank, Agents, Memories)</span>
|
||
</div>
|
||
<div class="setting-control">
|
||
<button id="settingsBackupBtn">Jetzt sichern</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="settings-section settings-reset">
|
||
<button id="settingsResetBtn" class="danger-btn">Alle Einstellungen zurücksetzen</button>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="tpl-profile">
|
||
<div class="page form-page">
|
||
<header>
|
||
<button class="back-btn icon-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
|
||
<h1>Mein Profil</h1>
|
||
</header>
|
||
<div class="page-content">
|
||
<div class="form">
|
||
<label>Benutzername</label>
|
||
<input type="text" id="profileUsername" disabled>
|
||
<label>Anzeigename</label>
|
||
<input type="text" id="profileDisplayName" placeholder="Anzeigename">
|
||
<label>Persona</label>
|
||
<span class="setting-hint">Wird im System-Prompt verwendet, wenn der Agent "Kennt sein Gegenüber" aktiviert hat.</span>
|
||
<textarea id="profilePersona" rows="8" placeholder="Beschreibe dich selbst – Name, Rolle, Präferenzen, Kommunikationsstil..."></textarea>
|
||
<div class="form-actions">
|
||
<button id="profileSaveBtn">Speichern</button>
|
||
</div>
|
||
<div class="profile-message" id="profileMessage" hidden></div>
|
||
<hr class="profile-divider">
|
||
<h2>Passwort ändern</h2>
|
||
<label>Aktuelles Passwort</label>
|
||
<input type="password" id="profileCurrentPassword" placeholder="Aktuelles Passwort" autocomplete="current-password">
|
||
<label>Neues Passwort</label>
|
||
<input type="password" id="profileNewPassword" placeholder="Neues Passwort" autocomplete="new-password">
|
||
<label>Neues Passwort bestätigen</label>
|
||
<input type="password" id="profileConfirmPassword" placeholder="Passwort wiederholen" autocomplete="new-password">
|
||
<div class="form-actions">
|
||
<button id="profilePasswordBtn">Passwort ändern</button>
|
||
</div>
|
||
<div class="profile-message" id="profilePasswordMessage" hidden></div>
|
||
<hr class="profile-divider">
|
||
<button id="profileLogoutBtn" class="danger-btn">Abmelden</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script src="js/lib/marked.min.js"></script>
|
||
<script src="js/lib/codemirror.min.js"></script>
|
||
<script src="js/lib/cm-mode-xml.min.js"></script>
|
||
<script src="js/lib/cm-mode-javascript.min.js"></script>
|
||
<script src="js/lib/cm-mode-css.min.js"></script>
|
||
<script src="js/lib/cm-mode-htmlmixed.min.js"></script>
|
||
<script src="js/lib/cm-mode-python.min.js"></script>
|
||
<script src="js/lib/cm-mode-markdown.min.js"></script>
|
||
<script src="js/lib/cm-mode-shell.min.js"></script>
|
||
<script src="js/lib/cm-mode-clike.min.js"></script>
|
||
<script src="js/lib/cm-mode-yaml.min.js"></script>
|
||
<script src="js/lib/easymde.min.js"></script>
|
||
<script src="js/tooltip.js"></script>
|
||
<script src="js/emoji.js"></script>
|
||
<script src="js/ui.js"></script>
|
||
<script src="js/api.js"></script>
|
||
<script src="js/session.js"></script>
|
||
<script src="js/file-explorer.js"></script>
|
||
<script src="js/chat.js"></script>
|
||
<script src="js/history.js"></script>
|
||
<script src="js/router.js"></script>
|
||
<script src="js/commands-ui.js"></script>
|
||
<script src="js/pages/dashboard.js"></script>
|
||
<script src="js/pages/agent-page.js"></script>
|
||
<script src="js/pages/session-page.js"></script>
|
||
<script src="js/pages/chat-page.js"></script>
|
||
<script src="js/pages/login-page.js"></script>
|
||
<script src="js/pages/settings-page.js"></script>
|
||
<script src="js/pages/profile-page.js"></script>
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|