chore: remove dead routes (OpenClaw, CcConnect, InfoEngine, Docker, test.yml)
Deploy Dashboard (Dev) / Backend Tests (push) Failing after 1m10s
Deploy Dashboard (Dev) / Frontend Tests (push) Successful in 48s
Deploy Dashboard (Dev) / Deploy to Dev (push) Has been skipped
Deploy Dashboard (Dev) / Build Dev Image (push) Has been skipped
Deploy Dashboard (Main) / Backend Tests (push) Failing after 3m6s
Deploy Dashboard (Main) / Frontend Tests (push) Successful in 9s
Deploy Dashboard (Main) / Build Main Image (push) Failing after 9m11s
Deploy Dashboard (Main) / Deploy to Production (push) Has been skipped
Deploy Dashboard (Dev) / Backend Tests (push) Failing after 1m10s
Deploy Dashboard (Dev) / Frontend Tests (push) Successful in 48s
Deploy Dashboard (Dev) / Deploy to Dev (push) Has been skipped
Deploy Dashboard (Dev) / Build Dev Image (push) Has been skipped
Deploy Dashboard (Main) / Backend Tests (push) Failing after 3m6s
Deploy Dashboard (Main) / Frontend Tests (push) Successful in 9s
Deploy Dashboard (Main) / Build Main Image (push) Failing after 9m11s
Deploy Dashboard (Main) / Deploy to Production (push) Has been skipped
This commit is contained in:
Gan, Jimmy
@@ -1,155 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { getCcConnectHealth, startCcConnect, stopCcConnect } from "../lib/api.js";
|
||||
|
||||
let loading = $state(true);
|
||||
let health = $state(null);
|
||||
let requestError = $state("");
|
||||
let actionLoading = $state("");
|
||||
|
||||
async function loadHealth() {
|
||||
loading = true;
|
||||
requestError = "";
|
||||
try {
|
||||
health = await getCcConnectHealth();
|
||||
} catch (e) {
|
||||
requestError = e?.body?.detail || e?.message || "Failed to load cc-connect health";
|
||||
health = null;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function runAction(action) {
|
||||
actionLoading = action;
|
||||
requestError = "";
|
||||
try {
|
||||
const result = action === "start" ? await startCcConnect() : await stopCcConnect();
|
||||
if (!result?.ok) {
|
||||
requestError = result?.error || `Failed to ${action} cc-connect`;
|
||||
}
|
||||
} catch (e) {
|
||||
requestError = e?.body?.detail || e?.message || `Failed to ${action} cc-connect`;
|
||||
} finally {
|
||||
actionLoading = "";
|
||||
await loadHealth();
|
||||
}
|
||||
}
|
||||
|
||||
function statusBadgeClass(status) {
|
||||
if (status === "up") {
|
||||
return "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300";
|
||||
}
|
||||
return "bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300";
|
||||
}
|
||||
|
||||
function valueOrDash(value) {
|
||||
return value === null || value === undefined || value === "" ? "—" : value;
|
||||
}
|
||||
|
||||
onMount(loadHealth);
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">cc-connect</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">Mobile bridge operational status</p>
|
||||
<div class="mt-2 flex flex-wrap items-center gap-2 text-[11px] font-medium">
|
||||
<span class="px-2 py-0.5 rounded-full bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300">up</span>
|
||||
<span class="px-2 py-0.5 rounded-full bg-rose-100 text-rose-700 dark:bg-rose-900/40 dark:text-rose-300">down</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
{#if health?.container_status === "running"}
|
||||
<button
|
||||
onclick={() => runAction("stop")}
|
||||
disabled={loading || actionLoading === "stop"}
|
||||
class="px-3 py-1.5 text-xs font-medium text-rose-600 bg-rose-50 hover:bg-rose-100 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{actionLoading === "stop" ? "Stopping..." : "Stop"}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
onclick={() => runAction("start")}
|
||||
disabled={loading || actionLoading === "start"}
|
||||
class="px-3 py-1.5 text-xs font-medium text-emerald-600 bg-emerald-50 hover:bg-emerald-100 rounded-lg transition-colors disabled:opacity-50"
|
||||
>
|
||||
{actionLoading === "start" ? "Starting..." : "Start"}
|
||||
</button>
|
||||
{/if}
|
||||
<button onclick={loadHealth} disabled={loading || Boolean(actionLoading)} class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors disabled:opacity-50 dark:bg-primary-900/30 dark:text-primary-300">
|
||||
{loading ? "Loading..." : "Refresh"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if requestError}
|
||||
<div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-700 rounded-xl p-4 shadow-sm">
|
||||
<p class="text-sm font-medium text-rose-700 dark:text-rose-300">cc-connect action failed</p>
|
||||
<p class="text-xs text-rose-600 dark:text-rose-400 mt-1">{requestError}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
|
||||
{#if loading && !health}
|
||||
<div class="space-y-3">
|
||||
<div class="h-6 w-36 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{#each Array(8) as _}
|
||||
<div class="h-16 rounded-lg bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{:else if health}
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h3 class="text-sm font-semibold text-surface-700 dark:text-surface-200">Health Status</h3>
|
||||
<span class="px-2.5 py-1 text-xs font-semibold rounded-full {statusBadgeClass(health.status)}">{valueOrDash(health.status)}</span>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">OK</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{String(Boolean(health.ok))}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Source</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.source)}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Container</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.container_name)}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Container Status</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.container_status)}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Endpoint</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1 break-all">{valueOrDash(health.endpoint)}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">HTTP Status</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{valueOrDash(health.http_status)}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Latency</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1">{health.latency_ms === null || health.latency_ms === undefined ? "—" : `${health.latency_ms} ms`}</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg border border-surface-200 dark:border-surface-700 p-3 sm:col-span-2 lg:col-span-2">
|
||||
<p class="text-xs font-medium text-surface-400 uppercase tracking-wider">Error</p>
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 mt-1 break-all">{valueOrDash(health.error)}</p>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-sm text-surface-400">No health data available.</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,160 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { get, post } from "../lib/api.js";
|
||||
|
||||
let containers = $state([]);
|
||||
let loading = $state(true);
|
||||
let error = $state("");
|
||||
let logTarget = $state("");
|
||||
let logContent = $state("");
|
||||
let loadingLogs = $state(false);
|
||||
let actionLoading = $state("");
|
||||
|
||||
async function load() {
|
||||
loading = true;
|
||||
error = "";
|
||||
try {
|
||||
containers = (await get("/docker/containers")) || [];
|
||||
} catch (e) {
|
||||
error = e.message || "Docker API unavailable";
|
||||
containers = [];
|
||||
}
|
||||
loading = false;
|
||||
}
|
||||
|
||||
async function action(id, act) {
|
||||
actionLoading = id + act;
|
||||
try {
|
||||
await post(`/docker/containers/${id}/${act}`);
|
||||
await load();
|
||||
} catch (e) {
|
||||
error = e.message || "Action failed";
|
||||
}
|
||||
actionLoading = "";
|
||||
}
|
||||
|
||||
async function showLogs(id, name) {
|
||||
logTarget = name;
|
||||
loadingLogs = true;
|
||||
try {
|
||||
const r = await get(`/docker/containers/${id}/logs?tail=200`);
|
||||
logContent = r?.logs || "No logs available";
|
||||
} catch (e) {
|
||||
logContent = "Failed to load logs";
|
||||
}
|
||||
loadingLogs = false;
|
||||
}
|
||||
|
||||
onMount(load);
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Docker</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">{containers.length} containers · {containers.filter(c => c.status === "running").length} running</p>
|
||||
</div>
|
||||
<button onclick={load} class="text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 px-3 py-1.5 rounded-lg transition-colors">
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if loading}
|
||||
<div class="space-y-3">
|
||||
{#each Array(5) as _}
|
||||
<div class="h-[72px] rounded-xl bg-surface-100 dark:bg-surface-800 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-800 rounded-xl p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-rose-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" /></svg>
|
||||
<p class="text-sm font-medium text-rose-700 dark:text-rose-300">{error}</p>
|
||||
</div>
|
||||
<button onclick={load} class="text-xs font-medium text-rose-600 bg-rose-100 hover:bg-rose-200 px-3 py-1.5 rounded-lg transition-colors">
|
||||
Retry
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="space-y-2">
|
||||
{#each containers as c}
|
||||
<div class="bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 flex items-center justify-between shadow-sm hover:shadow-md transition-all duration-200 group">
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<span class="relative flex h-2.5 w-2.5 shrink-0">
|
||||
{#if c.status === "running"}
|
||||
<span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
|
||||
{:else}
|
||||
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-surface-300"></span>
|
||||
{/if}
|
||||
</span>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 truncate">{c.name}</p>
|
||||
<p class="text-xs text-surface-400 truncate mt-0.5">{c.image}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 opacity-70 group-hover:opacity-100 transition-opacity">
|
||||
{#if c.status === "running"}
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-rose-600 bg-rose-50 hover:bg-rose-100 transition-colors disabled:opacity-50"
|
||||
onclick={() => action(c.id, "stop")}
|
||||
disabled={actionLoading === c.id + "stop"}
|
||||
>
|
||||
{actionLoading === c.id + "stop" ? "..." : "Stop"}
|
||||
</button>
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-amber-600 bg-amber-50 hover:bg-amber-100 transition-colors disabled:opacity-50"
|
||||
onclick={() => action(c.id, "restart")}
|
||||
disabled={actionLoading === c.id + "restart"}
|
||||
>
|
||||
{actionLoading === c.id + "restart" ? "..." : "Restart"}
|
||||
</button>
|
||||
{:else}
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-emerald-600 bg-emerald-50 hover:bg-emerald-100 transition-colors disabled:opacity-50"
|
||||
onclick={() => action(c.id, "start")}
|
||||
disabled={actionLoading === c.id + "start"}
|
||||
>
|
||||
{actionLoading === c.id + "start" ? "..." : "Start"}
|
||||
</button>
|
||||
{/if}
|
||||
<button
|
||||
class="text-xs font-medium px-2.5 py-1.5 rounded-lg text-surface-600 bg-surface-100 hover:bg-surface-200 transition-colors"
|
||||
onclick={() => showLogs(c.id, c.name)}
|
||||
>
|
||||
Logs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Log Modal -->
|
||||
{#if logTarget}
|
||||
<div class="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50" role="dialog" aria-modal="true" onclick={() => { logTarget = ""; logContent = ""; }} onkeydown={(e) => e.key === "Escape" && (logTarget = "", logContent = "")}>
|
||||
<div class="bg-white dark:bg-surface-800 rounded-2xl shadow-2xl w-[90vw] max-w-4xl max-h-[80vh] flex flex-col" role="document" onclick={(e) => e.stopPropagation()} onkeydown={(e) => e.stopPropagation()}>
|
||||
<div class="flex items-center justify-between px-5 py-4 border-b border-surface-200 dark:border-surface-700">
|
||||
<div>
|
||||
<h3 class="text-sm font-bold text-surface-800 dark:text-surface-100">Container Logs</h3>
|
||||
<p class="text-xs text-surface-400 mt-0.5">{logTarget}</p>
|
||||
</div>
|
||||
<button aria-label="Close logs" class="text-surface-400 hover:text-surface-600 transition-colors" onclick={() => { logTarget = ""; logContent = ""; }}>
|
||||
<svg class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-auto p-1">
|
||||
{#if loadingLogs}
|
||||
<div class="flex items-center justify-center h-40">
|
||||
<div class="w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
{:else}
|
||||
<pre class="bg-surface-900 text-emerald-400 text-xs p-4 rounded-xl whitespace-pre-wrap leading-relaxed font-mono min-h-[200px]">{logContent}</pre>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,139 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { getInfoEngineItems, getInfoEngineItem } from "../lib/api.js";
|
||||
|
||||
let loading = $state(true);
|
||||
let loadingDetail = $state(false);
|
||||
let requestError = $state("");
|
||||
let items = $state([]);
|
||||
let total = $state(0);
|
||||
let selectedId = $state(null);
|
||||
let selectedItem = $state(null);
|
||||
|
||||
async function loadItems() {
|
||||
loading = true;
|
||||
requestError = "";
|
||||
try {
|
||||
const res = await getInfoEngineItems({ limit: 50, offset: 0 });
|
||||
items = res.items || [];
|
||||
total = res.total || 0;
|
||||
if (items.length > 0) {
|
||||
await selectItem(items[0].id);
|
||||
} else {
|
||||
selectedId = null;
|
||||
selectedItem = null;
|
||||
}
|
||||
} catch (e) {
|
||||
requestError = e?.body?.detail || e?.message || "Failed to load items";
|
||||
items = [];
|
||||
total = 0;
|
||||
selectedId = null;
|
||||
selectedItem = null;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function selectItem(id) {
|
||||
selectedId = id;
|
||||
loadingDetail = true;
|
||||
requestError = "";
|
||||
try {
|
||||
selectedItem = await getInfoEngineItem(id);
|
||||
} catch (e) {
|
||||
selectedItem = null;
|
||||
requestError = e?.body?.detail || e?.message || "Failed to load item";
|
||||
} finally {
|
||||
loadingDetail = false;
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) return "—";
|
||||
try {
|
||||
return new Date(value).toLocaleString();
|
||||
} catch {
|
||||
return value;
|
||||
}
|
||||
}
|
||||
|
||||
onMount(loadItems);
|
||||
</script>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 dark:text-white tracking-tight">Info Engine</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">Context-aware stream of curated signals</p>
|
||||
</div>
|
||||
<button onclick={loadItems} disabled={loading} class="px-3 py-1.5 text-xs font-medium text-primary-600 bg-primary-50 hover:bg-primary-100 rounded-lg transition-colors disabled:opacity-50 dark:bg-primary-900/30 dark:text-primary-300">
|
||||
{loading ? "Loading..." : "Refresh"}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if requestError}
|
||||
<div class="bg-rose-50 dark:bg-rose-900/20 border border-rose-200 dark:border-rose-700 rounded-xl p-4 shadow-sm">
|
||||
<p class="text-sm font-medium text-rose-700 dark:text-rose-300">{requestError}</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
<div class="lg:col-span-1 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm">
|
||||
<div class="px-4 py-3 border-b border-surface-200 dark:border-surface-700 text-xs text-surface-400">
|
||||
Latest items ({total})
|
||||
</div>
|
||||
{#if loading}
|
||||
<div class="p-4 space-y-2">
|
||||
{#each Array(6) as _}
|
||||
<div class="h-12 rounded-lg bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if items.length === 0}
|
||||
<div class="p-4 text-sm text-surface-400">No items yet.</div>
|
||||
{:else}
|
||||
<div class="max-h-[560px] overflow-y-auto p-2">
|
||||
{#each items as item}
|
||||
<button onclick={() => selectItem(item.id)} class="w-full text-left px-3 py-2 rounded-lg mb-1 transition-colors {selectedId === item.id ? 'bg-primary-50 dark:bg-primary-900/30' : 'hover:bg-surface-100 dark:hover:bg-surface-700'}">
|
||||
<p class="text-sm font-semibold text-surface-800 dark:text-surface-100 line-clamp-2">{item.title}</p>
|
||||
<p class="text-xs text-surface-400 mt-1">{item.source}</p>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-2 bg-white dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-5 shadow-sm">
|
||||
{#if loadingDetail}
|
||||
<div class="space-y-3">
|
||||
<div class="h-7 w-3/4 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
|
||||
<div class="h-4 w-full rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
|
||||
<div class="h-4 w-5/6 rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
|
||||
<div class="h-24 w-full rounded bg-surface-100 dark:bg-surface-700 animate-pulse"></div>
|
||||
</div>
|
||||
{:else if selectedItem}
|
||||
<h2 class="text-xl font-bold text-surface-900 dark:text-white">{selectedItem.title}</h2>
|
||||
<div class="mt-2 text-xs text-surface-400 space-y-1">
|
||||
<p>Source: {selectedItem.source}</p>
|
||||
<p>Published: {formatDate(selectedItem.published_at)}</p>
|
||||
<p>Collected: {formatDate(selectedItem.collected_at)}</p>
|
||||
</div>
|
||||
|
||||
{#if selectedItem.tags?.length}
|
||||
<div class="mt-3 flex flex-wrap gap-2">
|
||||
{#each selectedItem.tags as tag}
|
||||
<span class="px-2 py-0.5 text-xs rounded-full bg-surface-100 text-surface-600 dark:bg-surface-700 dark:text-surface-300">{tag}</span>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<p class="mt-4 text-sm text-surface-700 dark:text-surface-300 whitespace-pre-wrap">{selectedItem.summary || selectedItem.content_text || "No summary available."}</p>
|
||||
|
||||
<a href={selectedItem.url} target="_blank" rel="noopener" class="inline-flex mt-4 px-3 py-1.5 text-xs font-medium rounded-lg bg-primary-600 text-white hover:bg-primary-700">
|
||||
Open source
|
||||
</a>
|
||||
{:else}
|
||||
<p class="text-sm text-surface-400">Select an item to view details.</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,66 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { get } from "../lib/api.js";
|
||||
|
||||
let isTailscale = location.hostname.startsWith("100.");
|
||||
let isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1" || location.hostname.startsWith("192.168.");
|
||||
let canAccess = isTailscale || isLocal;
|
||||
let token = $state("");
|
||||
|
||||
onMount(async () => {
|
||||
if (canAccess) {
|
||||
const res = await get("/system/openclaw-token");
|
||||
token = res?.token || "";
|
||||
}
|
||||
});
|
||||
|
||||
function clawUrl() {
|
||||
const base = `${location.protocol}//${location.hostname}:3100`;
|
||||
return token ? `${base}/#token=${token}` : base;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">OpenClaw</h1>
|
||||
<p class="text-sm text-surface-400 mt-1">AI Assistant</p>
|
||||
</div>
|
||||
|
||||
{#if canAccess}
|
||||
<div class="flex flex-col items-center justify-center p-12 text-center bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 h-[calc(100vh-10rem)]">
|
||||
<div class="h-16 w-16 bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 rounded-2xl flex items-center justify-center mb-6">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-xl font-semibold text-surface-900 dark:text-white mb-2">OpenClaw Ready</h2>
|
||||
<p class="text-surface-600 dark:text-surface-400 max-w-md mb-8">
|
||||
OpenClaw's security settings prevent it from being embedded inside the dashboard. Click below to launch the assistant securely in a new tab.
|
||||
</p>
|
||||
<a
|
||||
href={clawUrl()}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-primary-600 hover:bg-primary-700 shadow-sm transition-colors"
|
||||
>
|
||||
Launch OpenClaw
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ml-2 -mr-1 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex flex-col items-center justify-center p-12 text-center bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 h-[calc(100vh-10rem)]">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-surface-400 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
<h2 class="text-xl font-semibold text-surface-900 dark:text-white mb-2">Tailscale Network Required</h2>
|
||||
<p class="text-surface-600 dark:text-surface-400 max-w-md">
|
||||
For security reasons, OpenClaw is only accessible when connected directly to the NAS via the internal Tailscale network.
|
||||
</p>
|
||||
<p class="mt-4 text-sm text-surface-500">
|
||||
Connect to Tailscale and visit <a href="http://100.78.131.124:4000" class="text-primary-500 hover:underline font-medium">http://100.78.131.124:4000</a> to use the AI Assistant.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
Reference in New Issue
Block a user