devpush 0.0.0-stage → 1.0.0-beta.3

package/src/cloudflare-runtime.d.ts

@@ -0,0 +1,78 @@
+/* Ambient modules require inline import types to keep this file a script. */
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+// Keep this ambient file a script so cloudflare:workers is declared, not augmented.
+
+type D1Database = import('@cloudflare/workers-types').D1Database
+
+interface R2ObjectBody {
+  arrayBuffer: () => Promise<ArrayBuffer>
+  httpMetadata?: {
+    contentType?: string
+  }
+}
+
+interface R2Bucket {
+  delete: (key: string) => Promise<void>
+  get: (key: string) => Promise<R2ObjectBody | null>
+  head: (key: string) => Promise<{ size: number } | null>
+  put: (
+    key: string,
+    value: ArrayBuffer | ArrayBufferView | string,
+    options?: { httpMetadata?: { contentType?: string } },
+  ) => Promise<unknown>
+}
+
+interface WorkerVersionMetadata {
+  id: string
+  tag: string
+}
+
+interface WorkspaceUpdatesNamespace {
+  getByName: (name: string) => {
+    fetch: (request: Request) => Promise<Response>
+    publish: (kind: string, activeSessionIds: string[]) => Promise<void>
+  }
+}
+
+declare const WebSocketPair: typeof import('@cloudflare/workers-types').WebSocketPair
+declare const WebSocketRequestResponsePair: typeof import('@cloudflare/workers-types').WebSocketRequestResponsePair
+interface ResponseInit {
+  webSocket?: import('@cloudflare/workers-types').WebSocket
+}
+
+interface Env {
+  DEVPUSH_WORKSPACE_UPDATES?: WorkspaceUpdatesNamespace
+  DEVPUSH_DATABASE: D1Database
+  DEVPUSH_LOG_DATABASE: D1Database
+  DEVPUSH_DATABASE_URL?: string
+  DEVPUSH_LOG_DATABASE_URL?: string
+  DEVPUSH_DATABASE_AUTH_TOKEN?: string
+  DEVPUSH_LOG_DATABASE_AUTH_TOKEN?: string
+  DEVPUSH_OBJECTS?: R2Bucket
+}
+
+interface ExecutionContext {
+  waitUntil: (promise: Promise<unknown>) => void
+}
+
+interface ScheduledController {
+  scheduledTime: number
+}
+
+interface ExportedHandler<TEnvironment> {
+  fetch?: (
+    request: Request,
+    env: TEnvironment,
+    context: ExecutionContext,
+  ) => Response | Promise<Response>
+  scheduled?: (
+    controller: ScheduledController,
+    env: TEnvironment,
+    context: ExecutionContext,
+  ) => void | Promise<void>
+}
+
+declare module 'cloudflare:workers' {
+  export const env: Env
+  export const DurableObject: typeof import('@cloudflare/workers-types').DurableObject
+}

package/src/components/about-dialog.tsx

@@ -0,0 +1,70 @@
+import { LogoMark } from '#devpush/components/logo-mark'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '#devpush/components/ui/dialog'
+import packageJson from '../../package.json'
+
+const links = [
+  { label: 'Website', href: 'https://devpu.sh', text: 'devpu.sh' },
+  {
+    label: 'Documentation',
+    href: 'https://devpu.sh/docs',
+    text: 'devpu.sh/docs',
+  },
+  { label: 'Discord', href: 'https://devpu.sh/chat', text: 'devpu.sh/chat' },
+  {
+    label: 'GitHub',
+    href: 'https://github.com/hunvreus/devpush',
+    text: 'hunvreus/devpush',
+  },
+]
+
+export function AboutDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+}) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[22rem]">
+        <DialogHeader className="items-center gap-3 text-center sm:text-center">
+          <div className="flex size-15 shrink-0 items-center justify-center rounded-lg bg-orange-600 text-white">
+            <LogoMark className="size-9 shrink-0" />
+          </div>
+          <DialogTitle>devpush</DialogTitle>
+          <DialogDescription>
+            Deploy your applications on your own servers.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="rounded-lg border text-sm">
+          <div className="flex items-center justify-between gap-3 border-b px-4 py-3">
+            <span className="text-muted-foreground">Version</span>
+            <span>{packageJson.version}</span>
+          </div>
+          {links.map(({ label, href, text }) => (
+            <div
+              key={label}
+              className="flex items-center justify-between gap-3 border-b px-4 py-3 last:border-b-0"
+            >
+              <span className="text-muted-foreground">{label}</span>
+              <a
+                className="inline-flex items-center gap-2 hover:underline"
+                href={href}
+                target="_blank"
+                rel="noreferrer noopener"
+              >
+                {text}
+              </a>
+            </div>
+          ))}
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/copy-button.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import type { ReactNode } from 'react'
+import { CheckIcon, CopyIcon } from 'lucide-react'
+import { Button } from '#devpush/components/ui/button'
+import { InputGroupButton } from '#devpush/components/ui/input-group'
+
+export function CopyButton({
+  value,
+  label,
+  size,
+  inputGroup = false,
+  disabled = false,
+  children,
+  className,
+}: {
+  value: string
+  label: string
+  size?: 'icon-xs' | 'icon-sm'
+  inputGroup?: boolean
+  disabled?: boolean
+  children?: ReactNode
+  className?: string
+}) {
+  const [feedback, setFeedback] = useState<{
+    status: 'copied' | 'failed'
+    attempt: number
+  } | null>(null)
+  const [busy, setBusy] = useState(false)
+  useEffect(() => {
+    if (!feedback) return
+    const timer = setTimeout(() => {
+      setFeedback(null)
+    }, 1500)
+    return () => clearTimeout(timer)
+  }, [feedback])
+  const feedbackLabel =
+    feedback?.status === 'copied'
+      ? 'Copied'
+      : feedback?.status === 'failed'
+        ? 'Unable to copy'
+        : 'Copy'
+  const Control = inputGroup ? InputGroupButton : Button
+  async function copy() {
+    setBusy(true)
+    try {
+      await navigator.clipboard.writeText(value)
+      setFeedback((previous) => ({
+        status: 'copied',
+        attempt: (previous?.attempt ?? 0) + 1,
+      }))
+    } catch {
+      setFeedback((previous) => ({
+        status: 'failed',
+        attempt: (previous?.attempt ?? 0) + 1,
+      }))
+    } finally {
+      setBusy(false)
+    }
+  }
+  return (
+    <Control
+      type="button"
+      variant="ghost"
+      size={children ? 'sm' : (size ?? (inputGroup ? 'icon-xs' : 'icon-sm'))}
+      className={className}
+      disabled={disabled || busy}
+      aria-label={feedback ? feedbackLabel : label}
+      onClick={() => void copy()}
+    >
+      {children}
+      {feedback?.status === 'copied' ? <CheckIcon /> : <CopyIcon />}
+    </Control>
+  )
+}

package/src/components/logo-mark.tsx

@@ -0,0 +1,20 @@
+export function LogoMark({
+  className = 'size-4.5 shrink-0',
+}: {
+  className?: string
+}) {
+  return (
+    <svg
+      viewBox="0 0 120 96"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        d="M48 0H96L120 24V72H72V96H24L0 72V24H48V0ZM24 48V72H48V48H24ZM72 24V48H96V24H72Z"
+      />
+    </svg>
+  )
+}

package/src/components/pending-collection.tsx

@@ -0,0 +1,103 @@
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '#devpush/components/ui/table'
+import { Skeleton } from '#devpush/components/ui/skeleton'
+
+export function PendingList({
+  label,
+  rows = 1,
+}: {
+  label: string
+  rows?: number
+}) {
+  return (
+    <div
+      className="scrollbar overflow-x-auto rounded-xl border bg-card text-card-foreground"
+      aria-label={label}
+      aria-busy="true"
+    >
+      {Array.from({ length: rows }, (_, index) => (
+        <div
+          className="flex h-11 min-w-[20rem] items-center gap-4 border-b px-4 last:border-b-0"
+          key={index}
+        >
+          <Skeleton className="size-4 shrink-0 rounded-full" />
+          <Skeleton className="h-4 w-20 shrink-0" />
+          <Skeleton className="h-4 w-32 shrink-0" />
+          <Skeleton className="h-4 w-20 shrink-0" />
+          <Skeleton className="-mr-2 size-8 shrink-0" />
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export function PendingTable({
+  label,
+  columns,
+  avatar = false,
+  secondaryName = false,
+}: {
+  label: string
+  columns: Array<{ title: string; className?: string }>
+  avatar?: boolean
+  secondaryName?: boolean
+}) {
+  return (
+    <div
+      className="scrollbar overflow-x-auto rounded-xl border bg-card text-card-foreground"
+      aria-label={label}
+      aria-busy="true"
+    >
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {columns.map((column, index) => (
+              <TableHead
+                className={`${column.className ?? ''} ${column.title ? 'first:pl-4 last:pr-4' : ''}`}
+                key={index}
+              >
+                {column.title || <span className="sr-only">Actions</span>}
+              </TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            {columns.map((column, index) => (
+              <TableCell
+                className={column.title ? 'first:pl-4 last:pr-4' : undefined}
+                key={index}
+              >
+                {column.title ? (
+                  <div className="flex items-center gap-3">
+                    {avatar && index === 0 ? (
+                      <Skeleton className="size-8 shrink-0 rounded-full" />
+                    ) : null}
+                    {secondaryName && index === 0 ? (
+                      <div className="space-y-1">
+                        <Skeleton className="h-4 w-24 max-w-full" />
+                        <Skeleton className="h-4 w-16 max-w-full" />
+                      </div>
+                    ) : (
+                      <Skeleton className="h-4 w-24 max-w-full" />
+                    )}
+                  </div>
+                ) : (
+                  <div className="ml-auto w-fit">
+                    <Skeleton className="-mr-2 size-8" />
+                  </div>
+                )}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+  )
+}

package/src/components/resource-avatar.tsx

@@ -0,0 +1,65 @@
+import { createElement } from 'react'
+import { cn } from '#devpush/lib/utils'
+
+const sizeClasses = {
+  xs: 'size-5 rounded text-xs font-semibold',
+  sm: 'size-6 rounded-md text-sm font-semibold',
+  md: 'size-10 rounded-lg text-xl font-medium',
+  lg: 'size-14 rounded-xl text-4xl font-medium',
+  default: 'size-8 rounded-lg text-lg font-semibold',
+} as const
+
+const colorClasses = {
+  amber:
+    'from-amber-100 to-amber-100/50 border-amber-200 text-amber-500 dark:from-amber-950/50 dark:to-amber-950 dark:border-amber-900',
+  blue: 'from-blue-100 to-blue-100/50 border-blue-200 text-blue-500 dark:from-blue-950/50 dark:to-blue-950 dark:border-blue-900',
+  green:
+    'from-green-100 to-green-100/50 border-green-200 text-green-500 dark:from-green-950/50 dark:to-green-950 dark:border-green-900',
+  neutral:
+    'from-neutral-100 to-neutral-100/50 border-neutral-200 text-neutral-500 dark:from-neutral-800/70 dark:to-neutral-900 dark:border-neutral-700 dark:text-neutral-400',
+  rose: 'from-rose-100 to-rose-100/50 border-rose-200 text-rose-500 dark:from-rose-950/50 dark:to-rose-950 dark:border-rose-900',
+  lime: 'from-lime-100 to-lime-100/50 border-lime-200 text-lime-500 dark:from-lime-950/50 dark:to-lime-950 dark:border-lime-900',
+  sky: 'from-sky-100 to-sky-100/50 border-sky-200 text-sky-500 dark:from-sky-950/50 dark:to-sky-950 dark:border-sky-900',
+  zinc: 'from-zinc-100 to-zinc-100/50 border-zinc-200 text-zinc-500 dark:from-zinc-950/50 dark:to-zinc-950 dark:border-zinc-900',
+} as const
+
+export type ResourceColor = keyof typeof colorClasses
+
+type ResourceAvatarProps = {
+  'data-icon'?: 'inline-start' | 'inline-end'
+  name: string
+  src?: string
+  color?: ResourceColor
+  size?: keyof typeof sizeClasses
+  className?: string
+}
+
+export function ResourceAvatar({
+  'data-icon': dataIcon,
+  name,
+  src,
+  color = 'zinc',
+  size = 'default',
+  className,
+}: ResourceAvatarProps) {
+  const initial = name.trim().charAt(0).toLocaleUpperCase()
+
+  if (src) {
+    return createElement('img', {
+      'data-icon': dataIcon,
+      src,
+      alt: name,
+      className: cn('shrink-0 object-cover', sizeClasses[size], className),
+    })
+  }
+
+  return createElement('span', {
+    'data-icon': dataIcon,
+    className: cn(
+      'flex shrink-0 items-center justify-center border bg-gradient-to-tl uppercase',
+      sizeClasses[size],
+      colorClasses[color],
+      className,
+    ),
+  }, initial)
+}

package/src/components/route-error-state.tsx

@@ -0,0 +1,95 @@
+import { publicErrorMessages } from '#devpush/lib/public-error'
+import type { ErrorComponentProps } from '@tanstack/react-router'
+import { ArrowLeftIcon } from 'lucide-react'
+
+import { Button } from '#devpush/components/ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from '#devpush/components/ui/empty'
+
+export function RouteNotFoundState({
+  description,
+  title,
+}: {
+  description: string
+  title: string
+}) {
+  return (
+    <main className="flex min-h-svh items-center justify-center p-6">
+      <Empty className="max-w-md border-0">
+        <EmptyHeader>
+          <EmptyTitle>{title}</EmptyTitle>
+          <EmptyDescription>{description}</EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button asChild variant="outline">
+            <a href="/">
+              <ArrowLeftIcon data-icon="inline-start" />
+              Go home
+            </a>
+          </Button>
+        </EmptyContent>
+      </Empty>
+    </main>
+  )
+}
+
+export function RouteErrorState({ error }: ErrorComponentProps) {
+  const pathname =
+    typeof window === 'undefined' ? null : window.location.pathname
+
+  if (isNotFoundError(error)) {
+    return (
+      <RouteNotFoundState
+        title="Not found"
+        description="The team, project, or resource you requested does not exist, or you do not have access."
+      />
+    )
+  }
+
+  return (
+    <main className="flex min-h-svh items-center justify-center p-6">
+      <Empty className="max-w-md border-0">
+        <EmptyHeader>
+          <EmptyTitle>Something went wrong</EmptyTitle>
+          <EmptyDescription>
+            The app hit an unexpected error while loading this page.
+          </EmptyDescription>
+        </EmptyHeader>
+        {pathname !== '/' ? (
+          <EmptyContent>
+            <Button asChild variant="outline">
+              <a href="/">
+                <ArrowLeftIcon data-icon="inline-start" />
+                Go home
+              </a>
+            </Button>
+          </EmptyContent>
+        ) : null}
+      </Empty>
+    </main>
+  )
+}
+
+function isNotFoundError(error: unknown) {
+  // Server actions serialize PublicError as a plain object, not an Error instance.
+  if (
+    error &&
+    typeof error === 'object' &&
+    'code' in error &&
+    typeof error.code === 'string' &&
+    error.code.endsWith('_NOT_FOUND') &&
+    Object.hasOwn(publicErrorMessages, error.code)
+  )
+    return true
+
+  if (!(error instanceof Error)) {
+    return false
+  }
+
+  return /\bnot found\.?$/i.test(error.message)
+}

package/src/components/section-navigation.tsx

@@ -0,0 +1,39 @@
+import { Button } from '#devpush/components/ui/button'
+import { cn } from '#devpush/lib/utils'
+
+export type SectionNavigationItem = {
+  href: `#${string}`
+  label: string
+  destructive?: boolean
+}
+
+export function SectionNavigation({
+  className,
+  items,
+}: {
+  className?: string
+  items: Array<SectionNavigationItem>
+}) {
+  return (
+    <nav
+      aria-label="Page sections"
+      className={cn('flex flex-col gap-y-1', className)}
+    >
+      {items.map((item) => (
+        <Button
+          asChild
+          className={cn(
+            'w-full justify-start px-2',
+            item.destructive &&
+              'text-destructive hover:bg-destructive/10 hover:text-destructive dark:hover:bg-destructive/20',
+          )}
+          key={item.href}
+          size="sm"
+          variant="ghost"
+        >
+          <a href={item.href}>{item.label}</a>
+        </Button>
+      ))}
+    </nav>
+  )
+}

package/src/components/settings-layout.tsx

@@ -0,0 +1,111 @@
+import { Link } from '@tanstack/react-router'
+import { ArrowLeftIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+import { SectionNavigation } from '#devpush/components/section-navigation'
+import type { SectionNavigationItem } from '#devpush/components/section-navigation'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '#devpush/components/ui/card'
+import { Button } from '#devpush/components/ui/button'
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '#devpush/components/ui/tooltip'
+
+export function StandaloneSettingsLayout({
+  ariaLabel,
+  busy = false,
+  children,
+  navigation,
+  title,
+}: {
+  ariaLabel?: string
+  busy?: boolean
+  children: ReactNode
+  navigation: Array<SectionNavigationItem>
+  title: string
+}) {
+  return (
+    <main className="min-h-screen bg-background text-foreground">
+      <div
+        className="mx-auto w-full max-w-screen-xl space-y-8 p-8"
+        aria-busy={busy || undefined}
+        aria-label={ariaLabel}
+      >
+        <header className="flex items-center gap-x-3">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button asChild variant="outline" size="icon-sm">
+                <Link to="/" aria-label="Back to home">
+                  <ArrowLeftIcon />
+                </Link>
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>Back to home</TooltipContent>
+          </Tooltip>
+          <h1 className="text-2xl font-medium">{title}</h1>
+        </header>
+        <div className="flex flex-row-reverse gap-x-8">
+          <SectionNavigation
+            className="sticky top-8 hidden h-full min-w-64 lg:flex"
+            items={navigation}
+          />
+          <div className="w-full min-w-0 flex-1 space-y-8">{children}</div>
+        </div>
+      </div>
+    </main>
+  )
+}
+
+export function SettingsLayout({
+  children,
+  navigation,
+}: {
+  children: ReactNode
+  navigation: Array<SectionNavigationItem>
+}) {
+  return (
+    <div className="grid min-w-0 gap-8 lg:grid-cols-[minmax(0,1fr)_240px]">
+      <div className="min-w-0 space-y-8">{children}</div>
+      <aside className="hidden lg:block">
+        <SectionNavigation className="sticky top-[122px]" items={navigation} />
+      </aside>
+    </div>
+  )
+}
+
+export function SettingsSection({
+  children,
+  contentClassName,
+  description,
+  footer,
+  id,
+  title,
+}: {
+  children: ReactNode
+  contentClassName?: string
+  description: ReactNode
+  footer?: ReactNode
+  id: string
+  title: string
+}) {
+  return (
+    <Card id={id} className="scroll-mt-8">
+      <CardHeader className="border-b">
+        <CardTitle>{title}</CardTitle>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardContent className={contentClassName}>{children}</CardContent>
+      {footer ? (
+        <CardFooter className="justify-end gap-x-2">{footer}</CardFooter>
+      ) : null}
+    </Card>
+  )
+}

package/src/components/storage-capabilities.tsx

@@ -0,0 +1,11 @@
+import { createContext, useContext } from 'react'
+import type { ReactNode } from 'react'
+
+export const ImageUploadsContext = createContext(true)
+export function useImageUploads() {
+  return useContext(ImageUploadsContext)
+}
+
+export function ImageUploadControls({ children }: { children: ReactNode }) {
+  return useImageUploads() ? children : null
+}