@ohmykreee/dsh-remote-control 0.0.0-stage → 1.0.2

package/src/svelte/lib/components/SessionList.svelte

@@ -0,0 +1,364 @@
+<script lang="ts">
+  import { app, openQuestion } from '../state.svelte';
+  import type { SessionItem } from '../types';
+  import { runningDuration, timeAgo } from '../format';
+  import { t } from '../i18n.svelte';
+  import { buildSessionTree, type SessionNode } from '../session-tree';
+  import { Badge } from '$lib/components/ui/badge/index.js';
+  import { Card } from '$lib/components/ui/card/index.js';
+  import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+  import { Skeleton } from '$lib/components/ui/skeleton/index.js';
+  import { cn } from '$lib/utils.js';
+  import Layers3 from '@lucide/svelte/icons/layers-3';
+  import MessageCircle from '@lucide/svelte/icons/message-circle';
+  import MessagesSquare from '@lucide/svelte/icons/messages-square';
+  import Panel from './Panel.svelte';
+  import SectionHeader from './SectionHeader.svelte';
+  import EmptyState from './EmptyState.svelte';
+
+  let { sessions = [], error = null }: { sessions?: SessionItem[]; error?: string | null } = $props();
+
+  const tree = $derived(buildSessionTree(sessions));
+  const subtitle = $derived(
+    app.overview === null
+      ? t('sessionLoading')
+      : sessions.length === 1
+        ? t('sessionCountOne')
+        : sessions.length
+          ? t('sessionCount', { count: sessions.length })
+          : t('noActiveSessions'),
+  );
+  const labels = $derived<Record<string, string>>({
+    running: t('statusRunning'),
+    question: t('statusQuestion'),
+    error: t('statusError'),
+    done: t('statusDone'),
+  });
+  const statusClasses: Record<string, string> = {
+    running: 'status-success',
+    question: 'status-warn',
+    error: 'status-danger',
+    done: 'border-border bg-secondary text-muted-foreground',
+  };
+
+  function statusOf(session: SessionItem): string {
+    return session.status && ['running', 'question', 'error', 'done'].includes(session.status)
+      ? session.status
+      : 'done';
+  }
+
+  function previewOf(session: SessionItem): string {
+    return session.error || session.pending?.question || session.preview || t('noMessage');
+  }
+
+  function runningSinceOf(session: SessionItem): number | null {
+    const value = session.runningSince;
+    return typeof value === 'number' && Number.isFinite(value) ? value : null;
+  }
+
+  function isWaiting(session: SessionItem): boolean {
+    return statusOf(session) === 'question';
+  }
+
+  function canQuickAnswer(session: SessionItem): boolean {
+    return (
+      isWaiting(session) &&
+      app.pushQuestions &&
+      session.pending?.answerable !== false &&
+      (session.pending?.questions?.length ?? 0) > 0
+    );
+  }
+
+  function openSession(session: SessionItem): void {
+    if (!isWaiting(session) || !session.id) return;
+    openQuestion(session.id);
+  }
+
+  function openSessionFromKey(event: KeyboardEvent, session: SessionItem): void {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    openSession(session);
+  }
+
+  function metaOf(session: SessionItem, depth: number): string[] {
+    return [
+      session.turn ? t('turnLabel', { turn: session.turn }) : '',
+      session.isSubagent && depth === 0 ? t('subagent') : '',
+    ].filter((item): item is string => Boolean(item));
+  }
+</script>
+
+{#snippet sessionNode(node: SessionNode, depth: number)}
+  {@const session = node.session}
+  {@const status = statusOf(session)}
+  {@const runningSince = runningSinceOf(session)}
+  <Card
+    class={cn(
+      'session-card gap-0 rounded-[18px] border bg-card px-3.5 py-3 shadow-none ring-0 [--card-spacing:0px]',
+      status === 'running' && 'border-success/20',
+      status === 'question' && 'border-warn/25',
+      status === 'error' && 'border-danger/25',
+      isWaiting(session) && 'cursor-pointer',
+      depth > 0 && 'is-subagent bg-surface-2/60',
+    )}
+    role={isWaiting(session) ? 'button' : undefined}
+    tabindex={isWaiting(session) ? 0 : undefined}
+    aria-label={isWaiting(session) ? t('answerSession', { title: session.title || t('newSession') }) : undefined}
+    onclick={() => openSession(session)}
+    onkeydown={(event) => openSessionFromKey(event, session)}
+  >
+    <div class="flex min-w-0 items-start gap-3">
+      <span class={cn('session-icon', `tone-${status}`)} aria-hidden="true">
+        {Array.from(session.title || t('newSession'))[0] || '?'}
+        <i></i>
+      </span>
+
+      <div class="min-w-0 flex-1">
+        <div class="flex items-start justify-between gap-2.5">
+          <h3 class="session-title min-w-0 pt-0.5 text-[21px] leading-snug font-semibold text-foreground">
+            {session.title || t('newSession')}
+          </h3>
+          <Badge
+            variant="outline"
+            class={cn(
+              'mt-0.5 h-8 shrink-0 gap-1.5 rounded-full border px-3 text-[13px] font-semibold',
+              statusClasses[status],
+            )}
+          >
+            <span class="status-dot"></span>
+            {labels[status]}
+          </Badge>
+        </div>
+
+        <p class="session-preview mt-1 line-clamp-2 text-[15px] leading-snug text-muted-foreground">
+          {previewOf(session)}
+        </p>
+
+        <div class="mt-2 flex min-w-0 items-center justify-between gap-3">
+          <div class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1">
+            {#if session.error}
+              <span class="text-[13px] font-medium text-danger">{t('needsAttention')}</span>
+            {:else}
+              {#each metaOf(session, depth) as item, metaIndex (metaIndex)}
+                <span class="text-[13px] text-muted-foreground">{item}</span>
+              {/each}
+            {/if}
+            {#if canQuickAnswer(session)}
+              <span class="inline-flex items-center gap-1.5 text-[13px] font-semibold text-warn">
+                <MessageCircle class="size-4" strokeWidth={1.8} />
+                {t('answer')}
+              </span>
+            {/if}
+          </div>
+
+          {#if runningSince !== null}
+            <span class="numeric shrink-0 text-[13px] font-semibold text-success">
+              {runningDuration(runningSince, app.clockNow)}
+            </span>
+          {:else}
+            <span class="shrink-0 text-[13px] text-muted-foreground">
+              {timeAgo(session.lastActiveAt, app.clockNow)}
+            </span>
+          {/if}
+        </div>
+      </div>
+    </div>
+
+    {#if node.children.length > 0}
+      <div class="session-children">
+        <div class="mb-2 flex items-center gap-2 text-[13px] font-semibold tracking-[0.1em] text-muted-foreground uppercase">
+          {t('subagent')}
+          <span class="h-px flex-1 bg-border"></span>
+          {node.children.length}
+        </div>
+        {#each node.children as child (child.session.id || child.session.title)}
+          {@render sessionNode(child, depth + 1)}
+        {/each}
+      </div>
+    {/if}
+  </Card>
+{/snippet}
+
+<Panel class="conversation-panel flex min-h-0 flex-col p-4">
+  <SectionHeader icon={Layers3} eyebrow="CONVERSATIONS" title={t('conversations')} class="mb-3">
+    {#snippet children()}
+      <span class="text-[15px] text-muted-foreground">{subtitle}</span>
+    {/snippet}
+  </SectionHeader>
+
+  <div class="-mx-2 flex min-h-0 flex-1 flex-col border-t border-border pt-3">
+    {#if app.overview === null && sessions.length === 0 && !error}
+      <div class="flex flex-col gap-2 px-2">
+        {#each Array(4) as _, index (index)}
+          <div class="rounded-[18px] border border-border px-3.5 py-3">
+            <div class="flex items-center gap-3">
+              <Skeleton class="size-11 rounded-[13px]" />
+              <div class="flex-1 space-y-2">
+                <Skeleton class="h-4 w-2/5" />
+                <Skeleton class="h-3 w-3/4" />
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {:else if error}
+      <div class="flex min-h-0 flex-1 items-center justify-center px-6">
+        <EmptyState icon={MessagesSquare} title={t('sessionLoadFailed')} text={t('tryLater')} />
+      </div>
+    {:else if sessions.length === 0}
+      <div class="flex min-h-0 flex-1 items-center justify-center px-6">
+        <EmptyState icon={MessagesSquare} title={t('noSessions')} text={t('noSessionsHint')} />
+      </div>
+    {:else}
+      <ScrollArea class="min-h-0 flex-1" scrollbarYClasses="w-2">
+        <div class="flex flex-col gap-2 px-2 pb-1">
+          {#each tree as node (node.session.id || node.session.title)}
+            {@render sessionNode(node, 0)}
+          {/each}
+        </div>
+      </ScrollArea>
+    {/if}
+  </div>
+</Panel>
+
+<style>
+  :global(.conversation-panel) {
+    background:
+      radial-gradient(80% 100% at 100% 0%, color-mix(in srgb, var(--brand) 4%, transparent), transparent 60%),
+      var(--card);
+  }
+
+  .session-card.is-subagent {
+    border-radius: 15px;
+  }
+
+  .session-icon {
+    position: relative;
+    display: grid;
+    width: 42px;
+    height: 42px;
+    flex: 0 0 auto;
+    place-items: center;
+    border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
+    border-radius: 12px;
+    background: var(--brand-soft);
+    color: var(--brand);
+    font-size: 16px;
+    font-weight: 650;
+  }
+
+  .session-icon.tone-running {
+    border-color: color-mix(in srgb, var(--success) 18%, transparent);
+    background: var(--success-soft);
+    color: var(--success);
+  }
+
+  .session-icon.tone-question {
+    border-color: color-mix(in srgb, var(--warn) 20%, transparent);
+    background: var(--warn-soft);
+    color: var(--warn);
+  }
+
+  .session-icon.tone-error {
+    border-color: color-mix(in srgb, var(--danger) 20%, transparent);
+    background: var(--danger-soft);
+    color: var(--danger);
+  }
+
+  .session-icon i {
+    position: absolute;
+    right: -2px;
+    bottom: -2px;
+    width: 10px;
+    height: 10px;
+    border: 2px solid var(--card);
+    border-radius: 50%;
+    background: var(--muted-foreground);
+  }
+
+  .session-icon.tone-running i {
+    background: var(--success);
+  }
+
+  .session-icon.tone-question i {
+    background: var(--warn);
+  }
+
+  .session-icon.tone-error i {
+    background: var(--danger);
+  }
+
+  .session-icon.tone-done i {
+    background: var(--brand);
+    opacity: 0.55;
+  }
+
+  .session-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :global(.session-card.is-subagent .session-icon) {
+    width: 36px;
+    height: 36px;
+    border-radius: 10px;
+    font-size: 14px;
+  }
+
+  :global(.session-card.is-subagent .session-title) {
+    font-size: 19px;
+  }
+
+  .session-card:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--brand) 65%, transparent);
+    outline-offset: 2px;
+  }
+
+  .status-dot {
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+
+  .session-children {
+    display: flex;
+    flex-direction: column;
+    margin-top: 10px;
+    margin-left: 16px;
+    padding-left: 12px;
+    border-left: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
+  }
+
+  @media (max-height: 760px) {
+    :global(.conversation-panel) {
+      padding: 12px;
+    }
+
+    :global(.session-card) {
+      padding: 8px 11px;
+    }
+
+    .session-icon {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      font-size: 14px;
+    }
+
+    .session-title {
+      font-size: 19px;
+    }
+
+    .session-preview {
+      font-size: 14.5px;
+    }
+  }
+
+  @media (orientation: portrait) {
+    :global(.conversation-panel) {
+      min-height: 420px;
+    }
+  }
+</style>

package/src/svelte/lib/components/SessionStats.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import type { SessionItem } from '../types';
+  import { t } from '../i18n.svelte';
+  import { cn } from '$lib/utils.js';
+  import Panel from './Panel.svelte';
+
+  let { sessions = [] }: { sessions?: SessionItem[] } = $props();
+
+  const counts = $derived.by(() => {
+    const result = { running: 0, question: 0, error: 0, done: 0 };
+    for (const session of sessions) {
+      const key = session.status;
+      if (key && key in result) result[key as keyof typeof result] += 1;
+    }
+    return result;
+  });
+</script>
+
+{#snippet stat(value: number, label: string, tone: string)}
+  <div class={cn('stat', tone)}>
+    <strong class="numeric">{value}</strong>
+    <span>{label}</span>
+  </div>
+{/snippet}
+
+<Panel class="status-panel grid min-h-0 grid-cols-2 grid-rows-2 gap-1.5 p-2">
+  {@render stat(counts.running, t('statusRunning'), 'is-running')}
+  {@render stat(counts.question, t('statusQuestion'), counts.question > 0 ? 'is-question' : '')}
+  {@render stat(counts.error, t('statusError'), counts.error > 0 ? 'is-error' : '')}
+  {@render stat(counts.done, t('statusDone'), '')}
+</Panel>
+
+<style>
+  .stat {
+    display: flex;
+    min-height: 0;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1px;
+    padding: 6px 3px;
+    border: 1px solid transparent;
+    border-radius: 13px;
+    background: color-mix(in srgb, var(--secondary) 52%, transparent);
+  }
+
+  .stat strong {
+    color: var(--foreground);
+    font-size: clamp(36px, 4.6vw, 46px);
+    font-weight: 560;
+    line-height: 1;
+    letter-spacing: -0.03em;
+  }
+
+  .stat span {
+    color: var(--muted-foreground);
+    font-size: clamp(13px, 1.6vw, 16px);
+    white-space: nowrap;
+  }
+
+  .stat.is-running strong {
+    color: var(--success);
+  }
+
+  .stat.is-question {
+    border-color: color-mix(in srgb, var(--warn) 20%, transparent);
+    background: var(--warn-soft);
+  }
+
+  .stat.is-question strong {
+    color: var(--warn);
+  }
+
+  .stat.is-error {
+    border-color: color-mix(in srgb, var(--danger) 20%, transparent);
+    background: var(--danger-soft);
+  }
+
+  .stat.is-error strong {
+    color: var(--danger);
+  }
+
+  @media (max-height: 760px) {
+    .stat strong {
+      font-size: 36px;
+    }
+
+    .stat span {
+      font-size: 13px;
+    }
+  }
+
+  @media (orientation: portrait) {
+    :global(.status-panel) {
+      min-height: 120px;
+    }
+  }
+</style>

package/src/svelte/lib/components/SessionsPage.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+  import { app } from '../state.svelte';
+  import BalanceCard from './BalanceCard.svelte';
+  import SessionList from './SessionList.svelte';
+  import SessionStats from './SessionStats.svelte';
+  import SpendCard from './SpendCard.svelte';
+
+  const sessions = $derived(app.sessions);
+  const error = $derived(app.sessionsError);
+</script>
+
+<div class="sessions-grid">
+  <aside class="billing-column">
+    <BalanceCard />
+    <SpendCard />
+    <SessionStats {sessions} />
+  </aside>
+  <SessionList {sessions} {error} />
+</div>
+
+<style>
+  .sessions-grid {
+    display: grid;
+    grid-template-columns: clamp(288px, 30%, 344px) minmax(0, 1fr);
+    gap: 12px;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .billing-column {
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.8fr);
+    gap: 10px;
+    min-height: 0;
+  }
+
+  @media (max-height: 760px) {
+    .sessions-grid {
+      grid-template-columns: clamp(270px, 32%, 318px) minmax(0, 1fr);
+      gap: 10px;
+    }
+
+    .billing-column {
+      gap: 8px;
+    }
+  }
+
+  @media (orientation: portrait) {
+    .sessions-grid {
+      grid-template-columns: 1fr;
+      height: auto;
+      min-height: 100%;
+      gap: 12px;
+    }
+
+    .billing-column {
+      grid-template-rows: auto auto auto;
+      gap: 10px;
+    }
+  }
+</style>

package/src/svelte/lib/components/SpendCard.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import { app } from '../state.svelte';
+  import { formatMoney } from '../format';
+  import { t } from '../i18n.svelte';
+  import ChartColumn from '@lucide/svelte/icons/chart-column';
+  import Panel from './Panel.svelte';
+  import SectionHeader from './SectionHeader.svelte';
+
+  const account = $derived(app.account);
+  const signedIn = $derived(Boolean(account && account.available !== false && account.signedIn));
+  const usage = $derived(signedIn ? account?.usage || {} : {});
+  const currency = $derived(account?.balance?.currency || usage.currency || 'CNY');
+  const ready = $derived(usage.state === 'ready');
+  const daily = $derived(ready && Array.isArray(usage.daily) ? usage.daily : []);
+  const max = $derived(Math.max(0, ...daily.map((day) => Number(day.cost) || 0)));
+  const today = $derived(ready ? usage.today : null);
+  const spend = $derived(ready ? usage.spend : null);
+  const spendLabel = $derived(t(app.balanceDisplay.spendWindow === 'rolling' ? 'last7Days' : 'thisWeek'));
+</script>
+
+<Panel class="spend-card relative flex min-h-0 flex-col overflow-hidden p-4">
+  <div class="spend-chart" aria-hidden="true">
+    {#each daily as day, index (day.label || index)}
+      {@const height = max > 0 ? Math.max(6, Math.round(((Number(day.cost) || 0) / max) * 100)) : 6}
+      <i class:is-today={index === daily.length - 1} style={`height:${height}%`}></i>
+    {/each}
+  </div>
+
+  <div class="relative z-10">
+    <SectionHeader icon={ChartColumn} eyebrow="SPEND" title={t('usage')} />
+
+    <div class="spend-values mt-3 grid grid-cols-2 gap-3">
+      <div>
+        <p class="text-[15px] text-muted-foreground">{t('todaySpend')}</p>
+        <p class="spend-number numeric mt-1">{ready ? formatMoney(today, usage.currency || currency) : '—'}</p>
+      </div>
+      <div class="border-l border-border pl-3">
+        <p class="text-[15px] text-muted-foreground">{spendLabel}</p>
+        <p class="spend-number numeric mt-1">{ready ? formatMoney(spend, usage.currency || currency) : '—'}</p>
+      </div>
+    </div>
+  </div>
+</Panel>
+
+<style>
+  :global(.spend-card) {
+    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 4%, transparent), transparent 68%), var(--card);
+  }
+
+  .spend-chart {
+    position: absolute;
+    z-index: 0;
+    inset: 48% 12px 10px 12px;
+    display: flex;
+    align-items: flex-end;
+    gap: 7px;
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  .spend-chart i {
+    display: block;
+    min-width: 0;
+    flex: 1;
+    border-radius: 5px 5px 2px 2px;
+    background: color-mix(in srgb, var(--brand) 26%, transparent);
+  }
+
+  .spend-chart i.is-today {
+    background: color-mix(in srgb, var(--brand) 38%, transparent);
+  }
+
+  .spend-number {
+    color: var(--foreground);
+    font-size: clamp(26px, 3.3vw, 34px);
+    font-weight: 560;
+    line-height: 1;
+    letter-spacing: -0.035em;
+  }
+
+  @media (max-height: 760px) {
+    :global(.spend-card) {
+      padding: 12px;
+    }
+
+    .spend-values {
+      margin-top: 8px;
+    }
+
+    .spend-number {
+      font-size: 28px;
+    }
+
+    .spend-chart {
+      inset: 50% 10px 8px 10px;
+      gap: 6px;
+    }
+  }
+
+  @media (orientation: portrait) {
+    :global(.spend-card) {
+      min-height: 150px;
+    }
+  }
+</style>