devpush 0.0.0-stage → 1.0.0-beta.4

package/src/features/repositories/new-project-pending.tsx

@@ -0,0 +1,28 @@
+import {
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '#devpush/components/ui/dialog'
+import {
+  RepositoryListPending,
+  RepositoryToolbarPending,
+} from './repository-list-pending'
+
+export function NewProjectPendingContent() {
+  return (
+    <>
+      <DialogHeader>
+        <DialogTitle>Create project</DialogTitle>
+        <DialogDescription>
+          Select a repository, then confirm the initial deployment defaults.
+        </DialogDescription>
+      </DialogHeader>
+      <div className="scrollbar -m-4 min-h-0 overflow-y-auto p-4">
+        <div className="space-y-4">
+          <RepositoryToolbarPending />
+          <RepositoryListPending />
+        </div>
+      </div>
+    </>
+  )
+}

package/src/features/repositories/repository-list-pending.tsx

@@ -0,0 +1,59 @@
+import { ChevronsUpDownIcon, GithubIcon, SearchIcon } from 'lucide-react'
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from '#devpush/components/ui/input-group'
+import { Button } from '#devpush/components/ui/button'
+import { Skeleton } from '#devpush/components/ui/skeleton'
+
+export function RepositoryToolbarPending() {
+  return (
+    <div className="flex gap-2">
+      <Button
+        className="w-40 shrink-0 justify-start gap-1.5"
+        variant="outline"
+        disabled
+      >
+        <GithubIcon data-icon="inline-start" />
+        <span className="min-w-0 flex-1 truncate text-left">GitHub</span>
+        <ChevronsUpDownIcon data-icon="inline-end" />
+      </Button>
+      <InputGroup className="h-8 flex-1">
+        <InputGroupAddon>
+          <SearchIcon />
+        </InputGroupAddon>
+        <InputGroupInput placeholder="Search by name" disabled />
+      </InputGroup>
+    </div>
+  )
+}
+
+export function RepositoryListPending() {
+  return (
+    <ul
+      className="overflow-hidden rounded-lg border"
+      role="listbox"
+      aria-label="Loading repositories"
+      aria-live="polite"
+      aria-busy="true"
+    >
+      {Array.from({ length: 5 }, (_, index) => (
+        <li
+          className="flex h-11 items-center justify-between gap-x-2 border-b px-4 text-sm last:border-b-0"
+          key={index}
+          role="option"
+          aria-disabled="true"
+        >
+          <span className="flex min-w-0 flex-1 items-center gap-2">
+            <Skeleton className="h-4 w-32 rounded bg-muted-foreground/20" />
+            <Skeleton className="h-4 w-24 rounded bg-muted-foreground/20" />
+          </span>
+          <Button disabled size="xs" type="button">
+            Select
+          </Button>
+        </li>
+      ))}
+    </ul>
+  )
+}

package/src/features/servers/server-availability-alert.tsx

@@ -0,0 +1,44 @@
+import { Link } from '@tanstack/react-router'
+import { TriangleAlertIcon } from 'lucide-react'
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from '#devpush/components/ui/alert'
+import { Button } from '#devpush/components/ui/button'
+import { canManageTeamSettings } from '#devpush/lib/team-role'
+import type { TeamSummary } from '#devpush/server/teams/types'
+import type { ServerAvailabilityNotice } from './server-availability'
+
+export function ServerAvailabilityAlert({
+  notice,
+  team,
+}: {
+  notice: ServerAvailabilityNotice
+  team: Pick<TeamSummary, 'slug' | 'role'>
+}) {
+  const canManage = canManageTeamSettings(team.role)
+  return (
+    <Alert className="has-data-[slot=alert-action]:pr-32">
+      <TriangleAlertIcon />
+      <AlertTitle className="truncate">{notice.title}</AlertTitle>
+      <AlertDescription>
+        {notice.description}{' '}
+        {canManage
+          ? 'Restore the server connection to resume deployments on it.'
+          : 'Contact a workspace owner or admin to restore the server connection.'}
+      </AlertDescription>
+      <AlertAction>
+        <Button asChild variant="outline">
+          <Link
+            to="/$teamSlug/servers/$serverId"
+            params={{ teamSlug: team.slug, serverId: notice.targetServerId }}
+          >
+            View server
+          </Link>
+        </Button>
+      </AlertAction>
+    </Alert>
+  )
+}

package/src/features/servers/server-availability.ts

@@ -0,0 +1,29 @@
+import type { ServerSummary } from '#devpush/server/teams/types'
+
+export type ServerAvailabilityNotice = {
+  title: string
+  description: string
+  targetServerId: string
+}
+
+export function getServerAvailabilityNotice(
+  servers: Array<Pick<ServerSummary, 'id' | 'name' | 'status'>>,
+): ServerAvailabilityNotice | null {
+  const disconnected = servers.filter(
+    (server) => server.status === 'disconnected',
+  )
+  const target = disconnected.at(0)
+  if (!target) {
+    return null
+  }
+
+  const names = disconnected.map((server) => server.name)
+  return {
+    title: `${disconnected.length} ${disconnected.length === 1 ? 'server is' : 'servers are'} disconnected`,
+    description:
+      names.length <= 2
+        ? `${names.join(' and ')} ${names.length === 1 ? 'is' : 'are'} disconnected.`
+        : `${names.slice(0, 2).join(', ')} and ${names.length - 2} more are disconnected.`,
+    targetServerId: target.id,
+  }
+}

package/src/features/servers/server-avatar.tsx

@@ -0,0 +1,52 @@
+import { ServerIcon, ServerOffIcon } from 'lucide-react'
+
+import type { ServerStatus } from '#devpush/server/servers/status'
+import { cn } from '#devpush/lib/utils'
+
+const statusTextColors: Record<ServerStatus, string> = {
+  disabled: 'text-destructive',
+  disconnected: 'text-destructive',
+  connected: 'text-success',
+  deleted: 'text-muted-foreground',
+  pending: 'text-amber-500',
+}
+
+const iconClasses = {
+  xs: '[&>svg]:size-3 [&>svg]:stroke-2',
+  sm: '[&>svg]:size-4 [&>svg]:stroke-2',
+  md: '[&>svg]:size-6 [&>svg]:stroke-2',
+  lg: '[&>svg]:size-9 [&>svg]:stroke-[1.25]',
+  default: '[&>svg]:size-5 [&>svg]:stroke-2',
+} as const
+
+export function ServerAvatar({
+  className,
+  name,
+  size = 'xs',
+  status,
+}: {
+  className?: string
+  name: string
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'default'
+  status: ServerStatus
+}) {
+  const Icon =
+    status === 'disabled' || status === 'disconnected' || status === 'deleted'
+      ? ServerOffIcon
+      : ServerIcon
+
+  return (
+    <span
+      aria-label={name}
+      role="img"
+      className={cn(
+        'inline-flex shrink-0 items-center justify-center',
+        iconClasses[size],
+        statusTextColors[status],
+        className,
+      )}
+    >
+      <Icon className="shrink-0" />
+    </span>
+  )
+}

package/src/features/servers/server-detail-pending.tsx

@@ -0,0 +1,315 @@
+import {
+  formatPercent,
+  formatByteRatio,
+  formatNetworkSummary,
+} from './server-metric-format'
+import { CopyButton } from '#devpush/components/copy-button'
+import {
+  getRouteApi,
+  Link,
+  useParams,
+  useHydrated,
+} from '@tanstack/react-router'
+import { useQueryClient } from '@tanstack/react-query'
+
+import {
+  SettingsLayout,
+  SettingsSection,
+} from '#devpush/components/settings-layout'
+import { TeamHeading } from '#devpush/features/teams/team-heading'
+import { Button } from '#devpush/components/ui/button'
+import { Input } from '#devpush/components/ui/input'
+import { BanIcon, Trash2Icon } from 'lucide-react'
+import { ServerMetricChartPending } from './server-metric-chart-pending'
+import {
+  InputGroup,
+  InputGroupInput,
+  InputGroupAddon,
+} from '#devpush/components/ui/input-group'
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldDescription,
+} from '#devpush/components/ui/field'
+import { ServerAvatar } from './server-avatar'
+import { ServerDetail, ServerInstallCallout } from './server-detail'
+import { formatServerStatus, formatAge } from './team-servers'
+import { canManageTeamSettings } from '#devpush/lib/team-role'
+import type { ServerSummary } from '#devpush/server/teams/types'
+import type { getTeamServerContext } from '#devpush/server/servers/functions'
+import { Skeleton } from '#devpush/components/ui/skeleton'
+import { getCachedTeamContexts } from '#devpush/lib/team-context-query'
+import { displayNameFromSlug } from '#devpush/lib/display-name'
+
+const teamRoute = getRouteApi('/$teamSlug')
+
+export function ServerDetailPending() {
+  const params = useParams({ strict: false })
+  const queryClient = useQueryClient()
+  const hydrated = useHydrated()
+  const routeContext = teamRoute.useLoaderData()
+  const context = hydrated ? routeContext : undefined
+  const serverId = typeof params.serverId === 'string' ? params.serverId : ''
+  const teamSlug =
+    typeof params.teamSlug === 'string' ? params.teamSlug : 'team'
+  const cachedContexts = hydrated
+    ? getCachedTeamContexts(queryClient, teamSlug)
+    : []
+  const server =
+    context?.servers.find((item) => item.id === serverId) ??
+    cachedContexts
+      .flatMap((item) => item.servers)
+      .find((item) => item.id === serverId)
+  const team = context?.team ?? cachedContexts.at(0)?.team
+  const cachedDetail = queryClient.getQueryData<
+    NonNullable<Awaited<ReturnType<typeof getTeamServerContext>>>
+  >(['server-context', teamSlug, serverId])
+  const detail = hydrated ? cachedDetail : undefined
+  const canManage = Boolean(team && canManageTeamSettings(team.role))
+  const metrics = server?.monitoring.latestMetrics
+  const teamName = team?.name ?? displayNameFromSlug(teamSlug)
+
+  if (detail) return <ServerDetail server={detail.server} team={detail.team} />
+
+  return (
+    <div className="space-y-8" aria-label="Loading server" aria-busy="true">
+      <TeamHeading
+        team={
+          team ?? {
+            name: teamName,
+            slug: teamSlug,
+          }
+        }
+        crumb={
+          <>
+            <Link
+              className="hover:underline"
+              to="/$teamSlug/servers"
+              params={{ teamSlug }}
+            >
+              Servers
+            </Link>
+            <span className="text-muted-foreground/25 font-normal">/</span>
+            <span className="truncate">
+              {server?.name ?? <Skeleton className="h-6 w-32" />}
+            </span>
+          </>
+        }
+      />
+      <SettingsLayout
+        navigation={[
+          { href: '#general', label: 'General' },
+          { href: '#host', label: 'Host' },
+          { href: '#metrics', label: 'Metrics' },
+          ...(canManage || !team
+            ? [{ href: '#danger' as const, label: 'Danger', destructive: true }]
+            : []),
+        ]}
+      >
+        {server && canManage && server.status !== 'connected' ? (
+          <ServerInstallCallout server={server} teamSlug={teamSlug} />
+        ) : null}
+        <ServerGeneralPending
+          server={server}
+          serverId={serverId}
+          canManage={canManage}
+          permissionsPending={!team}
+        />
+        <ServerHostPending server={server} />
+        <SettingsSection
+          id="metrics"
+          title="Metrics"
+          description="Up to 24 hours of host resource history. Missing samples remain visible as gaps."
+          contentClassName="space-y-4"
+        >
+          {/* Shell summaries omit monitoring; null is unresolved here, not empty. */}
+          <div className="grid gap-4 md:grid-cols-2">
+            {[
+              {
+                label: 'CPU usage',
+                latestValue: metrics
+                  ? formatPercent(metrics.cpuPercent)
+                  : undefined,
+              },
+              {
+                label: 'Memory usage',
+                latestValue: metrics
+                  ? formatByteRatio(
+                      metrics.memoryUsedBytes,
+                      metrics.memoryTotalBytes,
+                    )
+                  : undefined,
+              },
+              {
+                label: 'Disk usage',
+                latestValue: metrics
+                  ? formatByteRatio(
+                      metrics.diskUsedBytes,
+                      metrics.diskTotalBytes,
+                    )
+                  : undefined,
+              },
+              {
+                label: 'Network traffic',
+                latestValue: metrics
+                  ? formatNetworkSummary(
+                      metrics.networkReceiveBytesPerSecond,
+                      metrics.networkTransmitBytesPerSecond,
+                    )
+                  : undefined,
+              },
+            ].map((metric) => (
+              <ServerMetricChartPending key={metric.label} {...metric} />
+            ))}
+          </div>
+        </SettingsSection>
+        {canManage || !team ? (
+          <SettingsSection
+            id="danger"
+            title="Danger"
+            description="Administrative actions that affect this server."
+            contentClassName="flex flex-col items-start gap-2"
+          >
+            <Button
+              variant={
+                server?.status === 'disabled' ? 'default' : 'destructive'
+              }
+              disabled
+            >
+              {server?.status !== 'disabled' ? (
+                <BanIcon data-icon="inline-start" />
+              ) : null}
+              {server?.status === 'disabled'
+                ? 'Enable server'
+                : 'Disable server'}
+            </Button>
+            <Button variant="destructive" disabled>
+              <Trash2Icon data-icon="inline-start" />
+              Delete server
+            </Button>
+          </SettingsSection>
+        ) : null}
+      </SettingsLayout>
+    </div>
+  )
+}
+
+function ServerGeneralPending({
+  server,
+  serverId,
+  canManage,
+  permissionsPending,
+}: {
+  server?: ServerSummary
+  serverId: string
+  canManage: boolean
+  permissionsPending: boolean
+}) {
+  return (
+    <SettingsSection
+      id="general"
+      title="General"
+      description="Basic details for this server."
+      contentClassName="space-y-6"
+      footer={
+        canManage || permissionsPending ? (
+          <>
+            <Button variant="ghost" disabled>
+              Cancel
+            </Button>
+            <Button disabled>Save</Button>
+          </>
+        ) : undefined
+      }
+    >
+      <div className="space-y-2">
+        <p className="text-sm font-medium">Status</p>
+        <div className="flex items-center gap-2 text-sm">
+          {server ? (
+            <>
+              <ServerAvatar
+                name={server.name}
+                status={server.status}
+                size="sm"
+              />
+              <span>{formatServerStatus(server.status)}</span>
+              <span className="text-muted-foreground">
+                ·{' '}
+                {server.lastSeenAt
+                  ? formatAge(server.lastSeenAt)
+                  : 'Never contacted'}
+              </span>
+            </>
+          ) : (
+            <Skeleton className="h-5 w-36" />
+          )}
+        </div>
+      </div>
+      <FieldGroup>
+        <Field>
+          <FieldLabel>Name</FieldLabel>
+          {server ? (
+            <Input value={server.name} readOnly disabled />
+          ) : (
+            <Skeleton className="h-8 w-full" />
+          )}
+        </Field>
+        <Field>
+          <FieldLabel>Server ID</FieldLabel>
+          <InputGroup>
+            <InputGroupInput
+              className="font-mono text-[13px] text-muted-foreground"
+              value={serverId}
+              readOnly
+            />
+            <InputGroupAddon align="inline-end">
+              <CopyButton value={serverId} label="Copy server ID" inputGroup />
+            </InputGroupAddon>
+          </InputGroup>
+          <FieldDescription>
+            A unique identifier used by the API and agent.
+          </FieldDescription>
+        </Field>
+      </FieldGroup>
+    </SettingsSection>
+  )
+}
+
+function ServerHostPending({ server }: { server?: ServerSummary }) {
+  return (
+    <SettingsSection
+      id="host"
+      title="Host"
+      description="System information reported by the agent."
+    >
+      <dl className="grid gap-6 text-sm sm:grid-cols-2">
+        {[
+          'Public IPv4',
+          'Public IPv6',
+          'Hostname',
+          'Operating system',
+          'CPU',
+          'Memory',
+          'Architecture',
+          'Host uptime',
+          'Kernel',
+          'Agent version',
+        ].map((label, index) => (
+          <div className="min-w-0 space-y-1.5" key={index}>
+            <dt className="text-xs text-muted-foreground">{label}</dt>
+            {server && !server.lastSeenAt && label !== 'Agent version' ? (
+              <dd className="text-sm break-words">Not reported</dd>
+            ) : label === 'Agent version' && server ? (
+              <dd className="text-sm break-words">
+                {server.agentVersion ?? 'Not reported'}
+              </dd>
+            ) : (
+              <Skeleton className={index % 3 === 0 ? 'h-5 w-40' : 'h-5 w-28'} />
+            )}
+          </div>
+        ))}
+      </dl>
+    </SettingsSection>
+  )
+}