busya/ss-tools
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: implement plugin architecture and application settings with Svelte UI

Browse Source 
- Added plugin base and loader for backend extensibility
- Implemented application settings management with config persistence
- Created Svelte-based frontend with Dashboard and Settings pages
- Added API routes for plugins, tasks, and settings
- Updated documentation and specifications
- Improved project structure and developer tools
This commit is contained in:
busya
2025-12-20 20:48:18 +03:00
parent ce703322c2
commit 2d8cae563f
98 changed files with 7894 additions and 5021 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
frontend/src/components/DynamicForm.svelte Normal file → Executable file
View File

@@ -1,56 +1,79 @@
<script>
import { createEventDispatcher } from 'svelte';
export let schema;
let formData = {};
const dispatch = createEventDispatcher();
function handleSubmit() {
dispatch('submit', formData);
}
// Initialize form data with default values from the schema
if (schema && schema.properties) {
for (const key in schema.properties) {
formData[key] = schema.properties[key].default || '';
}
}
</script>
<form on:submit|preventDefault={handleSubmit} class="space-y-4">
{#if schema && schema.properties}
{#each Object.entries(schema.properties) as [key, prop]}
<div class="flex flex-col">
<label for={key} class="mb-1 font-semibold text-gray-700">{prop.title || key}</label>
{#if prop.type === 'string'}
<input
type="text"
id={key}
bind:value={formData[key]}
placeholder={prop.description || ''}
class="p-2 border rounded-md"
/>
{:else if prop.type === 'number' || prop.type === 'integer'}
<input
type="number"
id={key}
bind:value={formData[key]}
placeholder={prop.description || ''}
class="p-2 border rounded-md"
/>
{:else if prop.type === 'boolean'}
<input
type="checkbox"
id={key}
bind:checked={formData[key]}
class="h-5 w-5"
/>
{/if}
</div>
{/each}
<button type="submit" class="w-full bg-green-500 text-white p-2 rounded-md hover:bg-green-600">
Run Task
</button>
{/if}
</form>
<!--
[DEF:DynamicForm:Component]
@SEMANTICS: form, schema, dynamic, json-schema
@PURPOSE: Generates a form dynamically based on a JSON schema.
@LAYER: UI
@RELATION: DEPENDS_ON -> svelte:createEventDispatcher
@PROPS:
- schema: Object - JSON schema for the form.
@EVENTS:
- submit: Object - Dispatched when the form is submitted, containing the form data.
-->
<script>
import { createEventDispatcher } from 'svelte';
export let schema;
let formData = {};
const dispatch = createEventDispatcher();
// [DEF:handleSubmit:Function]
// @PURPOSE: Dispatches the submit event with the form data.
function handleSubmit() {
console.log("[DynamicForm][Action] Submitting form data.", { formData });
dispatch('submit', formData);
}
// [/DEF:handleSubmit]
// [DEF:initializeForm:Function]
// @PURPOSE: Initialize form data with default values from the schema.
function initializeForm() {
if (schema && schema.properties) {
for (const key in schema.properties) {
formData[key] = schema.properties[key].default || '';
}
}
}
// [/DEF:initializeForm]
initializeForm();
</script>
<form on:submit|preventDefault={handleSubmit} class="space-y-4">
{#if schema && schema.properties}
{#each Object.entries(schema.properties) as [key, prop]}
<div class="flex flex-col">
<label for={key} class="mb-1 font-semibold text-gray-700">{prop.title || key}</label>
{#if prop.type === 'string'}
<input
type="text"
id={key}
bind:value={formData[key]}
placeholder={prop.description || ''}
class="p-2 border rounded-md"
/>
{:else if prop.type === 'number' || prop.type === 'integer'}
<input
type="number"
id={key}
bind:value={formData[key]}
placeholder={prop.description || ''}
class="p-2 border rounded-md"
/>
{:else if prop.type === 'boolean'}
<input
type="checkbox"
id={key}
bind:checked={formData[key]}
class="h-5 w-5"
/>
{/if}
</div>
{/each}
<button type="submit" class="w-full bg-green-500 text-white p-2 rounded-md hover:bg-green-600">
Run Task
</button>
{/if}
</form>
<!-- [/DEF:DynamicForm] -->

127
frontend/src/components/TaskRunner.svelte Normal file → Executable file
View File

@@ -1,54 +1,73 @@
<script>
import { onMount, onDestroy } from 'svelte';
import { selectedTask, taskLogs } from '../lib/stores.js';
let ws;
onMount(() => {
if ($selectedTask) {
taskLogs.set([]); // Clear previous logs
const wsUrl = `ws://localhost:8000/ws/logs/${$selectedTask.id}`;
ws = new WebSocket(wsUrl);
ws.onopen = () => {
console.log('WebSocket connection established');
};
ws.onmessage = (event) => {
const logEntry = JSON.parse(event.data);
taskLogs.update(logs => [...logs, logEntry]);
};
ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
ws.onclose = () => {
console.log('WebSocket connection closed');
};
}
});
onDestroy(() => {
if (ws) {
ws.close();
}
});
</script>
<div class="p-4 border rounded-lg bg-white shadow-md">
{#if $selectedTask}
<h2 class="text-xl font-semibold mb-2">Task: {$selectedTask.plugin_id}</h2>
<div class="bg-gray-900 text-white font-mono text-sm p-4 rounded-md h-96 overflow-y-auto">
{#each $taskLogs as log}
<div>
<span class="text-gray-400">{new Date(log.timestamp).toLocaleTimeString()}</span>
<span class="{log.level === 'ERROR' ? 'text-red-500' : 'text-green-400'}">[{log.level}]</span>
<span>{log.message}</span>
</div>
{/each}
</div>
{:else}
<p>No task selected.</p>
{/if}
</div>
<!--
[DEF:TaskRunner:Component]
@SEMANTICS: task, runner, logs, websocket
@PURPOSE: Connects to a WebSocket to display real-time logs for a running task.
@LAYER: UI
@RELATION: DEPENDS_ON -> frontend/src/lib/stores.js
@PROPS: None
@EVENTS: None
-->
<script>
import { onMount, onDestroy } from 'svelte';
import { selectedTask, taskLogs } from '../lib/stores.js';
let ws;
// [DEF:onMount:Function]
// @PURPOSE: Initialize WebSocket connection for task logs.
onMount(() => {
if ($selectedTask) {
console.log(`[TaskRunner][Entry] Connecting to logs for task: ${$selectedTask.id}`);
taskLogs.set([]); // Clear previous logs
const wsUrl = `ws://localhost:8000/ws/logs/${$selectedTask.id}`;
ws = new WebSocket(wsUrl);
ws.onopen = () => {
console.log('[TaskRunner][Coherence:OK] WebSocket connection established');
};
ws.onmessage = (event) => {
const logEntry = JSON.parse(event.data);
taskLogs.update(logs => [...logs, logEntry]);
};
ws.onerror = (error) => {
console.error('[TaskRunner][Coherence:Failed] WebSocket error:', error);
};
ws.onclose = () => {
console.log('[TaskRunner][Exit] WebSocket connection closed');
};
}
});
// [/DEF:onMount]
// [DEF:onDestroy:Function]
// @PURPOSE: Close WebSocket connection when the component is destroyed.
onDestroy(() => {
if (ws) {
console.log("[TaskRunner][Action] Closing WebSocket connection.");
ws.close();
}
});
// [/DEF:onDestroy]
</script>
<div class="p-4 border rounded-lg bg-white shadow-md">
{#if $selectedTask}
<h2 class="text-xl font-semibold mb-2">Task: {$selectedTask.plugin_id}</h2>
<div class="bg-gray-900 text-white font-mono text-sm p-4 rounded-md h-96 overflow-y-auto">
{#each $taskLogs as log}
<div>
<span class="text-gray-400">{new Date(log.timestamp).toLocaleTimeString()}</span>
<span class="{log.level === 'ERROR' ? 'text-red-500' : 'text-green-400'}">[{log.level}]</span>
<span>{log.message}</span>
</div>
{/each}
</div>
{:else}
<p>No task selected.</p>
{/if}
</div>
<!-- [/DEF:TaskRunner] -->

41
frontend/src/components/Toast.svelte Normal file → Executable file
View File

@@ -1,15 +1,26 @@
<script>
import { toasts } from '../lib/toasts.js';
</script>
<div class="fixed bottom-0 right-0 p-4 space-y-2">
{#each $toasts as toast (toast.id)}
<div class="p-4 rounded-md shadow-lg text-white
{toast.type === 'info' && 'bg-blue-500'}
{toast.type === 'success' && 'bg-green-500'}
{toast.type === 'error' && 'bg-red-500'}
">
{toast.message}
</div>
{/each}
</div>
<!--
[DEF:Toast:Component]
@SEMANTICS: toast, notification, feedback, ui
@PURPOSE: Displays transient notifications (toasts) in the bottom-right corner.
@LAYER: UI
@RELATION: DEPENDS_ON -> frontend/src/lib/toasts.js
@PROPS: None
@EVENTS: None
-->
<script>
import { toasts } from '../lib/toasts.js';
</script>
<div class="fixed bottom-0 right-0 p-4 space-y-2">
{#each $toasts as toast (toast.id)}
<div class="p-4 rounded-md shadow-lg text-white
{toast.type === 'info' && 'bg-blue-500'}
{toast.type === 'success' && 'bg-green-500'}
{toast.type === 'error' && 'bg-red-500'}
">
{toast.message}
</div>
{/each}
</div>
<!-- [/DEF:Toast] -->