Refactor logging in event handling and message processing to use trace-level logs, enhancing clarity and consistency across the application. Update web application structure to utilize Svelte and remove unused React components, streamlining the project. Additionally, clean up .gitignore and update package dependencies for improved performance.

app/web/src/index.jsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import App from './App';
-import './styles.css';
-
-const root = createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);

app/web/src/styles.css

@@ -1,191 +0,0 @@
-body {
-  font-family: Arial, sans-serif;
-  margin: 0;
-  padding: 0;
-}
-
-.container {
-  background: #f9f9f9;
-  padding: 30px;
-  border-radius: 8px;
-  margin-top: 20px; /* Reduced space since header is now sticky */
-}
-
-.form-group {
-  margin-bottom: 20px;
-}
-
-label {
-  display: block;
-  margin-bottom: 5px;
-  font-weight: bold;
-}
-
-input, textarea {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-}
-
-button {
-  background: #007cba;
-  color: white;
-  padding: 12px 20px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-button:hover {
-  background: #005a87;
-}
-
-.danger-button {
-  background: #dc3545;
-}
-
-.danger-button:hover {
-  background: #c82333;
-}
-
-.status {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  padding: 10px;
-  border-radius: 4px;
-}
-
-.success {
-  background: #d4edda;
-  color: #155724;
-}
-
-.error {
-  background: #f8d7da;
-  color: #721c24;
-}
-
-.info {
-  background: #d1ecf1;
-  color: #0c5460;
-}
-
-.header-panel {
-  position: sticky;
-  top: 0;
-  left: 0;
-  width: 100%;
-  background-color: #f8f9fa;
-  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  z-index: 1000;
-  height: 60px;
-  display: flex;
-  align-items: center;
-  background-size: cover;
-  background-position: center;
-  overflow: hidden;
-}
-
-.header-content {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  padding: 0 0 0 12px;
-  width: 100%;
-  margin: 0 auto;
-  box-sizing: border-box;
-}
-
-.header-left {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  height: 100%;
-}
-
-.header-center {
-  display: flex;
-  flex-grow: 1;
-  align-items: center;
-  justify-content: flex-start;
-  position: relative;
-  overflow: hidden;
-}
-
-.header-right {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  height: 100%;
-}
-
-.header-logo {
-  height: 100%;
-  aspect-ratio: 1 / 1;
-  width: auto;
-  border-radius: 0;
-  object-fit: cover;
-  flex-shrink: 0;
-}
-
-.user-avatar {
-  width: 2em;
-  height: 2em;
-  border-radius: 50%;
-  object-fit: cover;
-  border: 2px solid white;
-  margin-right: 10px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-}
-
-.user-profile {
-  display: flex;
-  align-items: center;
-  position: relative;
-  z-index: 1;
-}
-
-.user-info {
-  font-weight: bold;
-  font-size: 1.2em;
-  text-align: left;
-}
-
-.user-name {
-  font-weight: bold;
-  font-size: 1em;
-  display: block;
-}
-
-.profile-banner {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  z-index: -1;
-  opacity: 0.7;
-}
-
-.logout-button {
-  background: transparent;
-  color: #6c757d;
-  border: none;
-  font-size: 20px;
-  cursor: pointer;
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 100%;
-  margin-left: 10px;
-  margin-right: 0;
-  flex-shrink: 0;
-}
-
-.logout-button:hover {
-  background: transparent;
-  color: #343a40;
-}