1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<script lang="ts">
import ModelStatus from "./ModelStatus.svelte";
import TaskListPanel from "./TaskListPanel.svelte";
import ConfigPanel from "./ConfigPanel.svelte";
import SkillsBrowser from "./SkillsBrowser.svelte";
import PermissionLog from "./PermissionLog.svelte";
import KeyUsage from "./KeyUsage.svelte";
import type { TaskItem, LogEntry, KeyInfo, ModelInfo } from "../types.js";
const {
models = [],
keys = [],
tags = [],
tasks = [],
permissionLog = [],
apiBase = "",
}: {
models?: ModelInfo[];
keys?: KeyInfo[];
tags?: string[];
tasks?: TaskItem[];
permissionLog?: LogEntry[];
apiBase?: string;
} = $props();
let selected = $state("Tasks");
const options = ["Key Usage", "Model Status", "Tasks", "Config", "Skills", "Permission Log"];
</script>
<div class="bg-base-200 rounded-lg p-3">
<select
class="select select-bordered select-sm w-full"
bind:value={selected}
>
{#each options as option}
<option value={option}>{option}</option>
{/each}
</select>
<div class="mt-2">
{#if selected === "Key Usage"}
<KeyUsage {keys} {apiBase} />
{:else if selected === "Model Status"}
<ModelStatus {models} {keys} {tags} />
{:else if selected === "Tasks"}
<TaskListPanel {tasks} />
{:else if selected === "Config"}
<ConfigPanel {apiBase} />
{:else if selected === "Skills"}
<SkillsBrowser {apiBase} />
{:else if selected === "Permission Log"}
<PermissionLog entries={permissionLog} />
{/if}
</div>
</div>
|
