artsite/app/components/home/Activity.vue

<script lang="ts" setup>
import type { Activity } from '~~/types'
import { IDEs } from '~~/types'

const { data: activity, refresh } = await useAsyncData<Activity>('activity', () => $fetch('/api/activity'), { lazy: true })
useIntervalFn(refresh, 5000)

const currentSession = computed(() => {
  const list = activity.value?.data.activities ?? []
  const ideActivity = list.find(a => IDEs.some(ide => ide.name === a.name))

  if (!ideActivity) return null

  const name = ideActivity.assets?.small_text === 'Cursor' ? 'Cursor' : ideActivity.name

  const isIdling = ideActivity.details?.includes('Idling') || (!ideActivity.state?.toLowerCase().includes('editing') && name !== 'Visual Studio Code')

  const rawProject = ideActivity.details ? ideActivity.details.replace('Workspace:', '').replace('Editing', '').trim() : 'Unknown Context'
  const project = rawProject.charAt(0).toUpperCase() + rawProject.slice(1)
  const file = ideActivity.state?.replace('Editing', '').trim() || 'No active file'

  return {
    name,
    project,
    file,
    isIdling,
    startTime: ideActivity.timestamps?.start,
    icon: IDEs.find(ide => ide.name === name)?.icon ?? 'i-ph-code-duotone'
  }
})

const timeAgo = useTimeAgo(computed(() => currentSession.value?.startTime ?? new Date()))

const statusColor = computed(() => {
  if (!currentSession.value) return 'red'
  return currentSession.value.isIdling ? 'orange' : 'green'
})

const statusLabel = computed(() => {
  if (!currentSession.value) return 'System Offline'
  if (currentSession.value.isIdling) return 'System Idling'
  return 'Active Development'
})
</script>

<template>
  <ClientOnly>
    <div class="w-full mb-4">
      <UCard v-if="activity">
        <div class="flex items-center justify-between mb-3">
          <div class="flex items-center gap-3">
            <div class="relative flex h-3 w-3">
              <span
                v-if="statusColor === 'green'"
                class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"
              />
              <span
                class="relative inline-flex rounded-full h-3 w-3 transition-colors duration-300"
                :class="{
                  'bg-green-500': statusColor === 'green',
                  'bg-orange-500': statusColor === 'orange',
                  'bg-red-500': statusColor === 'red'
                }"
              />
            </div>

            <span class="text-xs font-bold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
              {{ statusLabel }}
            </span>
          </div>

          <UIcon
            v-if="currentSession"
            :name="currentSession.icon"
            class="w-5 h-5 opacity-80"
          />
          <UIcon
            v-else
            name="i-ph-power-duotone"
            class="w-5 h-5 text-red-400 opacity-80"
          />
        </div>

        <div
          v-if="currentSession"
          class="space-y-1 pl-6 border-l-2 border-neutral-100 dark:border-neutral-800 ml-1.5"
        >
          <div class="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
            <h3 class="font-semibold text-neutral-900 dark:text-white truncate">
              {{ currentSession.project }}
            </h3>
            <span class="hidden sm:inline text-neutral-400 text-xs">•</span>
            <span class="text-sm text-neutral-500 dark:text-neutral-400 truncate">
              {{ currentSession.file }}
            </span>
          </div>

          <div class="flex items-center gap-2 text-xs text-neutral-400 mt-1">
            <UIcon
              name="i-ph-timer-duotone"
              class="w-4 h-4"
            />
            <span>Started {{ timeAgo }}</span>
          </div>
        </div>

        <div
          v-else
          class="text-sm text-neutral-500 dark:text-neutral-400 flex items-center gap-2 pl-6 border-l-2 border-red-100 dark:border-red-900/30 ml-1.5"
        >
          <p>Telemetry disconnected. Research in progress.</p>
        </div>
      </UCard>

      <UCard v-else>
        <div class="flex items-center gap-3">
          <USkeleton class="h-3 w-3 rounded-full" /> <div class="space-y-2 flex-1">
            <USkeleton class="h-4 w-1/3" />
            <USkeleton class="h-3 w-2/3" />
          </div>
        </div>
      </UCard>
    </div>
  </ClientOnly>
</template>