852e01df39
Wake-on-demand proxy + agent system with SvelteKit dashboard. Monorepo: shared types, proxy (Hono + http-proxy), agent (monitors + locks), web (SvelteKit SPA). Co-Authored-By: Claude <noreply@anthropic.com>
54 lines
1.2 KiB
Svelte
54 lines
1.2 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
lastActivity: string;
|
|
remainingSeconds: number;
|
|
}
|
|
|
|
let { lastActivity, remainingSeconds }: Props = $props();
|
|
|
|
function formatTime(seconds: number): string {
|
|
const m = Math.floor(seconds / 60);
|
|
const s = seconds % 60;
|
|
return `${m}:${String(s).padStart(2, '0')}`;
|
|
}
|
|
|
|
function formatDate(iso: string): string {
|
|
return new Date(iso).toLocaleTimeString();
|
|
}
|
|
</script>
|
|
|
|
<div class="card">
|
|
<h2>Idle Timer</h2>
|
|
<div class="timer-display">
|
|
<span class="time">{formatTime(remainingSeconds)}</span>
|
|
<span class="label">until idle check</span>
|
|
</div>
|
|
<p class="last-activity">Last activity: {formatDate(lastActivity)}</p>
|
|
</div>
|
|
|
|
<style>
|
|
.timer-display {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
.time {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.label {
|
|
font-size: 0.75rem;
|
|
color: var(--text-muted);
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
.last-activity {
|
|
margin-top: 0.75rem;
|
|
font-size: 0.8rem;
|
|
color: var(--text-dim);
|
|
text-align: center;
|
|
}
|
|
</style>
|