v2 - new interface, many new page for fine tuning

alfred/app/templates/alfred_identity_glass.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="fr">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="robots" content="noindex,nofollow">
+<title>Identité · Assistant</title>
+<link rel="stylesheet" href="/static/css/alfred-identity-glass.css?v=1">
+<script src="/static/js/alfred-identity-glass.js?v=1" defer></script>
+</head>
+<body>
+<header class="id-head">
+  <a class="id-brand" href="/"><span class="id-letter" id="idInitial">A</span><span><strong id="idName">Assistant</strong><small>Identité et personnalité</small></span></a>
+  <nav aria-label="Navigation"><a href="/">Accueil</a><a href="/config">Configuration</a><a href="/surveillance">Surveillance</a><a href="/logs">Journaux</a><a href="/identity" class="active" aria-current="page">Identité</a></nav>
+</header>
+<main class="id-main">
+ <div class="id-title"><div><p class="id-eyebrow">PERSONNALISATION · HERMES</p><h1>Identité de l'assistant</h1><p>Personnalise la personnalité, le ton et les instructions permanentes transmises à Hermes.</p></div><span class="id-pill" id="idBadge">Vérification…</span></div>
+ <section class="id-panel" id="idLoginPanel" hidden>
+  <h2>Accès administrateur</h2><p>Utilise le même mot de passe que la page Configuration.</p>
+  <form id="idLoginForm"><label for="idPassword">Mot de passe</label><input type="password" id="idPassword" autocomplete="current-password" required><button type="submit" class="id-button primary">Se connecter</button></form>
+  <p id="idLoginMessage" role="alert"></p>
+ </section>
+ <section id="idEditor" hidden>
+   <div class="id-layout">
+    <div class="id-panel id-editor-card">
+      <div class="id-editor-title"><div><h2>Document d'identité</h2><p>Édition directe de <code>config/identity.md</code> · format Markdown</p></div><span id="idCount">0 caractère</span></div>
+      <label class="id-sr-only" for="idText">Instructions Hermes</label>
+      <textarea id="idText" spellcheck="false" autocomplete="off" aria-describedby="idEditorHelp"></textarea>
+      <p class="id-tip" id="idEditorHelp">Les changements du texte s'appliquent aux prochaines demandes vocales. Les sessions Hermes anciennes peuvent conserver leur propre historique.</p>
+      <div class="id-buttons"><button type="button" class="id-button" id="idReload">Recharger</button><button type="button" class="id-button primary" id="idSave">Enregistrer l'identité</button></div>
+      <p id="idMessage" role="status" aria-live="polite"></p>
+    </div>
+    <aside class="id-side">
+      <section class="id-panel"><p class="id-kicker">IDENTITÉ ACTIVE</p><div class="id-current"><span id="idAvatar">A</span><div><strong id="idActiveName">—</strong><small>Nom configuré dans /config</small></div></div><p>Modifier le nom dans <a href="/config">Configuration</a> synchronise automatiquement les mentions de l'assistant dans ce document.</p></section>
+      <section class="id-panel"><h2>Conseils de rédaction</h2><p>Décris les règles de conversation et les préférences durables. Pour les outils spécialisés, utilise les Skills Hermes.</p><div class="id-example">## Style<br>Tu réponds en français, avec des phrases naturelles.<br><br>## Outils<br>Tu confirmes une action seulement après le succès de son outil.</div></section>
+      <section class="id-panel"><h2>Sauvegardes</h2><p>Une copie est créée avant chaque modification dans <code>config/identity_history/</code>. Les fichiers existants et les noms techniques ne sont pas renommés.</p></section>
+    </aside>
+   </div>
+ </section>
+</main>
+</body>
+</html>

alfred/app/templates/alfred_logs_v2.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="fr">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="robots" content="noindex,nofollow">
+<title>Journaux · Alfred</title>
+<link rel="stylesheet" href="/static/css/alfred-logs-v2.css?v=2">
+<script src="/static/js/alfred-logs-v2.js?v=2" defer></script>
+</head>
+<body>
+<header class="lg-header">
+  <a href="/" class="lg-brand"><span class="lg-letter" id="lgLetter">A</span><span><strong id="lgName">Alfred</strong><small>Journaux de l'assistant</small></span></a>
+  <nav class="lg-nav" aria-label="Navigation"><a href="/">Accueil</a><a href="/config">Configuration</a><a href="/surveillance">Surveillance</a><a href="/logs" class="active" aria-current="page">Journaux</a></nav>
+</header>
+<main class="lg-shell">
+ <div class="lg-title"><div><p class="lg-eyebrow">OBSERVABILITÉ · ALFRED</p><h1>Journaux</h1><p>Activité du service Alfred, reconnaissance vocale, Hermes et appels d'outils lorsqu'ils sont journalisés.</p></div><div class="lg-actions"><button id="lgRefresh" type="button">Actualiser</button><button id="lgExport" type="button">Exporter en JSON</button></div></div>
+ <section class="lg-filters" aria-label="Filtres des événements">
+  <label>Recherche<input id="lgSearch" type="search" placeholder="Proxmox, Whisper, erreur…" autocomplete="off"></label>
+  <label>Composant<select id="lgComponent"><option value="">Tous</option><option>Vocal</option><option>Hermes</option><option>MCP</option><option>Piper</option><option>Système</option></select></label>
+  <label>Niveau<select id="lgLevel"><option value="">Tous</option><option>Information</option><option>Avertissement</option><option>Erreur</option></select></label>
+  <label>Affichage<select id="lgLimit"><option value="100">100 lignes</option><option value="220" selected>220 lignes</option><option value="400">400 lignes</option></select></label>
+  <label class="lg-check"><input id="lgAuto" type="checkbox" checked> Actualisation automatique (10 s)</label>
+ </section>
+ <section class="lg-table-wrap" aria-label="Événements">
+   <div class="lg-table-top"><span id="lgStatus" role="status" aria-live="polite">Connexion…</span><span id="lgCount"></span></div>
+   <div id="lgEvents" class="lg-events" aria-live="off"></div>
+   <p class="lg-note">Source : journal systemd <code>alfred.service</code>. Les commandes Hermes exécutées dans un autre processus ne sont visibles ici que si Alfred les journalise. Les secrets courants sont masqués, mais vérifie les données avant tout partage.</p>
+ </section>
+</main>
+<!-- ALFRED_IDENTITY_GLASS_V1 -->
+<script src="/static/js/alfred-name-dynamic.js?v=1" defer></script>
+</body>
+</html>

alfred/app/templates/config.html

@@ -8,6 +8,8 @@
 <link rel="stylesheet" href="/static/css/alfred-admin-v2.css?v=2">
 <script defer src="/static/js/alfred-admin-v2.js?v=2"></script>
 <!-- ALFRED_ADMIN_SURVEILLANCE_V2 -->
+<!-- ALFRED_ADMIN_GLASS_MAISON_V1 -->
+<link rel="stylesheet" href="/static/css/alfred-admin-glass.css?v=1">
 </head>
 <body data-page="config">
 <div class="admin-layout">
@@ -71,5 +73,8 @@
   </main>
   <div class="auth-screen" id="authScreen"><div class="auth-box"><span class="brand-orb big">A</span><h1>Accès administrateur</h1><p>Connecte-toi pour modifier la configuration d'Alfred.</p><form id="loginForm"><label for="adminPassword">Mot de passe</label><input type="password" id="adminPassword" autocomplete="current-password" required><button class="button primary full" type="submit">Se connecter</button></form><p class="message" id="loginMessage" role="status"></p><small>Accès local / réseau privé uniquement.</small></div></div>
 </div>
+<script src="/static/js/alfred-admin-glass.js?v=1"></script>
+<!-- ALFRED_IDENTITY_GLASS_V1 -->
+<script src="/static/js/alfred-name-dynamic.js?v=1" defer></script>
 </body>
 </html>

alfred/app/templates/configuration.html

@@ -126,5 +126,7 @@
       }
     })();
   </script>
+<!-- ALFRED_IDENTITY_GLASS_V1 -->
+<script src="/static/js/alfred-name-dynamic.js?v=1" defer></script>
 </body>
 </html>

alfred/app/templates/index.html

@@ -12,6 +12,12 @@
   <link rel="stylesheet" href="/static/css/alfred-camera-popup.css">
 <link rel="stylesheet" href="/static/css/alfred-features.css?v=45">
   <link rel="stylesheet" href="/static/css/alfred-timers-context.css">
+  <!-- ALFRED_MAIN_VISUAL_V1 -->
+  <link rel="stylesheet" href="/static/css/alfred-main-v1.css?v=1">
+<!-- ALFRED_LISTES_GLASS_V1 -->
+<link rel="stylesheet" href="/static/css/alfred-listes-glass.css?v=1">
+  <!-- ALFRED_GLASS_V2 -->
+  <link rel="stylesheet" href="/static/css/alfred-main-v2.css?v=2">
 </head>
 <body>
   <main class="alfred-shell">
@@ -183,5 +189,12 @@
   <script src="/static/js/alfred-timers-context.js"></script>
   <!-- ALFRED_HIDE_HERMES_ACTIVITY_V2 -->
   <script src="/static/js/alfred-hide-hermes-activity.js?v=2" defer></script>
+  <script src="/static/js/alfred-main-v1.js?v=1"></script>
+<!-- ALFRED_ADMIN_GLASS_MAISON_V1 -->
+<script src="/static/js/alfred-maison-card.js?v=1"></script>
+<script src="/static/js/alfred-listes-glass.js?v=1"></script>
+  <script src="/static/js/alfred-main-v2.js?v=2"></script>
+<!-- ALFRED_IDENTITY_GLASS_V1 -->
+<script src="/static/js/alfred-name-dynamic.js?v=1" defer></script>
 </body>
 </html>

alfred/app/templates/surveillance.html

@@ -1,6 +1,8 @@
 <!doctype html><html lang="fr"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="theme-color" content="#121b25"><title>Alfred · Surveillance</title><link rel="stylesheet" href="/static/css/alfred-admin.css"><script defer src="/static/js/alfred-admin.js"></script><link rel="stylesheet" href="/static/css/alfred-admin-v2.css?v=2">
 <script defer src="/static/js/alfred-admin-v2.js?v=2"></script>
 <!-- ALFRED_ADMIN_SURVEILLANCE_V2 -->
+<!-- ALFRED_ADMIN_GLASS_MAISON_V1 -->
+<link rel="stylesheet" href="/static/css/alfred-admin-glass.css?v=1">
 </head>
 <body data-page="surveillance">
 <div class="admin-layout">
@@ -41,4 +43,7 @@
 <p role="status" aria-live="polite" class="message" id="message"></p>
 </main>
 <div class="auth-screen" id="authScreen"><div class="auth-box"><span class="brand-orb big">A</span><h1>Accès administrateur</h1><p>Connecte-toi pour consulter l'état d'Alfred.</p><form id="loginForm"><label for="adminPassword">Mot de passe</label><input type="password" id="adminPassword" autocomplete="current-password" required><button class="button primary full" type="submit">Se connecter</button></form><p class="message" id="loginMessage" role="status"></p><small>Accès local / réseau privé uniquement.</small></div></div>
-</div></body></html>
+</div><script src="/static/js/alfred-admin-glass.js?v=1"></script>
+<!-- ALFRED_IDENTITY_GLASS_V1 -->
+<script src="/static/js/alfred-name-dynamic.js?v=1" defer></script>
+</body></html>