semantic update

2026-02-08 22:53:54 +03:00
parent e6087bd3c1
commit 235b0e3c9f
71 changed files with 68034 additions and 62417 deletions
--- a/frontend/src/components/tasks/TaskLogPanel.svelte
+++ b/frontend/src/components/tasks/TaskLogPanel.svelte
@@ -0,0 +1,119 @@
+<!-- [DEF:TaskLogPanel:Component] -->
+<!--
+@TIER: STANDARD
+@SEMANTICS: task, log, panel, filter, list
+@PURPOSE: Combines log filtering and display into a single cohesive panel.
+@LAYER: UI
+@RELATION: USES -> frontend/src/components/tasks/LogFilterBar.svelte
+@RELATION: USES -> frontend/src/components/tasks/LogEntryRow.svelte
+@INVARIANT: Must always display logs in chronological order and respect auto-scroll preference.
+-->
+<script>
+  import { createEventDispatcher, onMount, afterUpdate } from 'svelte';
+  import LogFilterBar from './LogFilterBar.svelte';
+  import LogEntryRow from './LogEntryRow.svelte';
+
+  /**
+   * @PURPOSE: Component properties and state.
+   * @PRE: taskId is a valid string, logs is an array of LogEntry objects.
+   * @UX_STATE: [Empty] -> Displays "No logs available" message.
+   * @UX_STATE: [Populated] -> Displays list of LogEntryRow components.
+   * @UX_STATE: [AutoScroll] -> Automatically scrolls to bottom on new logs.
+   */
+  export let taskId = '';
+  export let logs = [];
+  export let autoScroll = true;
+
+  const dispatch = createEventDispatcher();
+  let scrollContainer;
+  let selectedSource = 'all';
+  let selectedLevel = 'all';
+
+  /**
+   * @PURPOSE: Handles filter changes from LogFilterBar.
+   * @PRE: event.detail contains source and level.
+   * @POST: Dispatches filterChange event to parent.
+   * @SIDE_EFFECT: Updates local filter state.
+   */
+  function handleFilterChange(event) {
+    const { source, level } = event.detail;
+    selectedSource = source;
+    selectedLevel = level;
+    console.log(`[TaskLogPanel][STATE] Filter changed: source=${source}, level=${level}`);
+    dispatch('filterChange', { source, level });
+  }
+
+  /**
+   * @PURPOSE: Scrolls the log container to the bottom.
+   * @PRE: autoScroll is true and scrollContainer is bound.
+   * @POST: scrollContainer.scrollTop is set to scrollHeight.
+   */
+  function scrollToBottom() {
+    if (autoScroll && scrollContainer) {
+      scrollContainer.scrollTop = scrollContainer.scrollHeight;
+    }
+  }
+
+  afterUpdate(() => {
+    scrollToBottom();
+  });
+
+  onMount(() => {
+    scrollToBottom();
+  });
+</script>
+
+<div class="flex flex-col h-full bg-gray-900 text-gray-100 rounded-lg overflow-hidden border border-gray-700">
+  <!-- Header / Filter Bar -->
+  <div class="p-2 bg-gray-800 border-b border-gray-700">
+    <LogFilterBar 
+      {taskId}
+      on:filter={handleFilterChange}
+    />
+  </div>
+
+  <!-- Log List -->
+  <div 
+    bind:this={scrollContainer}
+    class="flex-1 overflow-y-auto p-2 font-mono text-sm space-y-0.5"
+  >
+    {#if logs.length === 0}
+      <div class="text-gray-500 italic text-center py-4">
+        No logs available for this task.
+      </div>
+    {:else}
+      {#each logs as log}
+        <LogEntryRow {log} />
+      {/each}
+    {/if}
+  </div>
+
+  <!-- Footer / Stats -->
+  <div class="px-3 py-1 bg-gray-800 border-t border-gray-700 text-xs text-gray-400 flex justify-between items-center">
+    <span>Total: {logs.length} entries</span>
+    {#if autoScroll}
+      <span class="text-green-500 flex items-center gap-1">
+        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
+        Auto-scroll active
+      </span>
+    {/if}
+  </div>
+</div>
+
+<style>
+  /* Custom scrollbar for the log container */
+  div::-webkit-scrollbar {
+    width: 8px;
+  }
+  div::-webkit-scrollbar-track {
+    background: #1f2937;
+  }
+  div::-webkit-scrollbar-thumb {
+    background: #4b5563;
+    border-radius: 4px;
+  }
+  div::-webkit-scrollbar-thumb:hover {
+    background: #6b7280;
+  }
+</style>
+<!-- [/DEF:TaskLogPanel:Component] -->