213 lines
8.5 KiB
HTML
213 lines
8.5 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/nav.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/mobile.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav id="nav">
|
|
<div class="nav-content">
|
|
<div class="nav-brand">// gott</div>
|
|
<div class="nav-links">
|
|
<a href="#" data-page="dashboard" class="nav-link active">Dashboard</a>
|
|
<a href="#" data-page="settings" class="nav-link">Einstellungen</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="app"></div>
|
|
|
|
<!-- Templates -->
|
|
|
|
<template id="tpl-dashboard">
|
|
<div class="page dashboard">
|
|
<div class="page-content">
|
|
<section>
|
|
<div class="section-header">
|
|
<h2>Sessions</h2>
|
|
</div>
|
|
<div class="card-grid" id="sessionCards"></div>
|
|
<div class="card-grid" id="newSessionCard"></div>
|
|
</section>
|
|
<section>
|
|
<div class="section-header">
|
|
<h2>Agents</h2>
|
|
</div>
|
|
<div class="card-grid" id="agentCards"></div>
|
|
<div class="card-grid" id="newAgentCard"></div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-session">
|
|
<div class="page form-page">
|
|
<header>
|
|
<button class="back-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
|
|
<h1 id="sessionPageTitle">Neue Session</h1>
|
|
<button id="openChatBtn" disabled>Chat öffnen</button>
|
|
</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="input-addon-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>Custom-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" 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>
|
|
</select>
|
|
<label>Persona</label>
|
|
<textarea id="agentPersona" rows="6" placeholder="Persönlichkeit / Seele des Agents"></textarea>
|
|
<label>Anweisungen</label>
|
|
<textarea id="agentInstructions" rows="6" placeholder="Technische Anweisungen"></textarea>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="agentToolChoice" checked>
|
|
Tool-Nutzung erzwingen <span class="checkbox-hint">(tool_choice: any)</span>
|
|
</label>
|
|
<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" id="chatBackBtn"><i class="fa fa-arrow-left"></i></button>
|
|
<h1 id="sessionTitle">-</h1>
|
|
<div class="custom-cmd-bar" id="customCmdBar"></div>
|
|
<div class="header-menu">
|
|
<button class="header-menu-trigger" 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>
|
|
<button class="header-menu-item" id="backupDbBtn">Datenbank sichern</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 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="file-btn" title="Datei anhängen"><i class="fa fa-paperclip"></i></button>
|
|
<button id="explorerBtn" class="file-btn" title="Workspace durchsuchen"><i class="fa fa-folder"></i></button>
|
|
<textarea id="input" placeholder="Nachricht..." rows="1"></textarea>
|
|
<button id="send"><i class="fa fa-paper-plane"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="tpl-settings">
|
|
<div class="page settings-page">
|
|
<header>
|
|
<button class="back-btn" data-page="dashboard"><i class="fa fa-arrow-left"></i></button>
|
|
<h1>Einstellungen</h1>
|
|
</header>
|
|
<div class="page-content placeholder">
|
|
<h2><i class="fa fa-cog"></i> Einstellungen</h2>
|
|
<p>Hier können diverse Einstellungen getroffen werden.</p>
|
|
</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/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/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/app.js"></script>
|
|
</body>
|
|
</html>
|