feat: initial SleepGuard implementation
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>
This commit is contained in:
53
packages/proxy/web/src/lib/components/IdleTimer.svelte
Normal file
53
packages/proxy/web/src/lib/components/IdleTimer.svelte
Normal file
@@ -0,0 +1,53 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user