deploy.sh 2.0.0 → 3.0.0

package/app/routes/dashboard/detail/history.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useOutletContext } from 'react-router';
+import { fetchDeployHistory as serverFetchHistory } from '../../../actions/deployments';
+import { getAuth } from './shared';
+import type { DetailContext } from './shared';
+
+interface HistoryEvent {
+  action: string;
+  username: string;
+  timestamp: string;
+  type?: string;
+  port?: number;
+}
+
+export default function Component() {
+  const { deployment } = useOutletContext<DetailContext>();
+  const name = deployment.name;
+  const [events, setEvents] = useState<HistoryEvent[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const auth = getAuth();
+    if (!auth) return;
+    serverFetchHistory(auth.username, auth.token, name)
+      .then((data) => setEvents(data as HistoryEvent[]))
+      .finally(() => setLoading(false));
+  }, [name]);
+
+  if (loading) {
+    return <div className="text-sm text-text-tertiary text-center py-8">Loading...</div>;
+  }
+
+  if (events.length === 0) {
+    return (
+      <div className="card p-6 text-center text-sm text-text-secondary">
+        No history recorded yet. History tracking starts from this version.
+      </div>
+    );
+  }
+
+  return (
+    <div className="card overflow-hidden">
+      <div className="divide-y divide-border">
+        {[...events].reverse().map((e, i) => (
+          <div key={i} className="px-4 py-3 flex items-center gap-4">
+            <div
+              className={`w-2 h-2 rounded-full shrink-0 ${
+                e.action === 'deploy'
+                  ? 'bg-success'
+                  : e.action === 'restart'
+                    ? 'bg-warning'
+                    : 'bg-danger'
+              }`}
+            />
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium capitalize">{e.action}</p>
+              <p className="text-xs text-text-secondary">
+                by {e.username}
+                {e.type && ` · ${e.type}`}
+                {e.port && ` · port ${e.port}`}
+              </p>
+            </div>
+            <time className="text-xs text-text-tertiary shrink-0">
+              {new Date(e.timestamp).toLocaleString()}
+            </time>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/app/routes/dashboard/detail/layout.tsx

@@ -0,0 +1,125 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useParams, Link, Outlet, useLocation } from 'react-router';
+import {
+  fetchDeployment as serverFetchDeployment,
+  fetchContainerInspect as serverFetchInspect,
+} from '../../../actions/deployments';
+import { getAuth, StatusBadge } from './shared';
+import type { Deployment, ContainerInfo, DetailContext } from './shared';
+
+type Tab = 'overview' | 'logs' | 'requests' | 'resources' | 'history';
+
+const tabs: { key: Tab; label: string; path: string }[] = [
+  { key: 'overview', label: 'Overview', path: '' },
+  { key: 'logs', label: 'Logs', path: 'logs' },
+  { key: 'requests', label: 'Requests', path: 'requests' },
+  { key: 'resources', label: 'Resources', path: 'resources' },
+  { key: 'history', label: 'History', path: 'history' },
+];
+
+function getActiveTab(pathname: string, name: string): Tab {
+  const base = `/dashboard/${name}`;
+  const suffix = pathname.slice(base.length).replace(/^\//, '');
+  const match = tabs.find((t) => t.path === suffix);
+  return match?.key ?? 'overview';
+}
+
+export default function Component() {
+  const { name } = useParams();
+  const location = useLocation();
+  const [deployment, setDeployment] = useState<Deployment | null>(null);
+  const [inspect, setInspect] = useState<ContainerInfo | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const activeTab = getActiveTab(location.pathname, name!);
+
+  const fetchDeployment = useCallback(async () => {
+    try {
+      const auth = getAuth();
+      if (!auth) return;
+      const data = await serverFetchDeployment(auth.username, auth.token, name!);
+      setDeployment(data as Deployment);
+      setError('');
+    } catch (err) {
+      setError((err as Error).message);
+    } finally {
+      setLoading(false);
+    }
+  }, [name]);
+
+  const fetchInspect = useCallback(async () => {
+    try {
+      const auth = getAuth();
+      if (!auth) return;
+      const data = await serverFetchInspect(auth.username, auth.token, name!);
+      setInspect(data as ContainerInfo);
+    } catch {
+      // container may not exist
+    }
+  }, [name]);
+
+  useEffect(() => {
+    fetchDeployment();
+    fetchInspect();
+  }, [fetchDeployment, fetchInspect]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      fetchDeployment();
+      if (activeTab === 'overview') fetchInspect();
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [fetchDeployment, fetchInspect, activeTab]);
+
+  if (loading) {
+    return <div className="text-sm text-text-tertiary py-12 text-center">Loading...</div>;
+  }
+
+  if (error || !deployment) {
+    return (
+      <div>
+        <Link to="/dashboard" className="text-sm text-accent hover:text-accent-hover mb-4 block">
+          &larr; Back to deployments
+        </Link>
+        <div className="card p-6 text-center text-sm text-danger">
+          {error || 'Deployment not found'}
+        </div>
+      </div>
+    );
+  }
+
+  const context: DetailContext = { deployment, inspect, fetchDeployment, fetchInspect };
+
+  return (
+    <div>
+      <div className="flex items-center gap-3 mb-6">
+        <Link to="/dashboard" className="text-text-tertiary hover:text-text-secondary text-sm">
+          &larr;
+        </Link>
+        <h1 className="text-lg font-semibold">{deployment.name}</h1>
+        <StatusBadge status={deployment.status} />
+      </div>
+
+      <div className="flex gap-1 border-b border-border mb-6">
+        {tabs.map((t) => (
+          <Link
+            key={t.key}
+            to={`/dashboard/${name}${t.path ? `/${t.path}` : ''}`}
+            className={`px-3 py-2 text-sm font-medium border-b-2 transition-colors -mb-px ${
+              activeTab === t.key
+                ? 'border-accent text-text'
+                : 'border-transparent text-text-tertiary hover:text-text-secondary'
+            }`}
+          >
+            {t.label}
+          </Link>
+        ))}
+      </div>
+
+      <Outlet context={context} />
+    </div>
+  );
+}

package/app/routes/dashboard/detail/logs.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useOutletContext } from 'react-router';
+import { getAuth } from './shared';
+import type { DetailContext } from './shared';
+
+export default function Component() {
+  const { deployment } = useOutletContext<DetailContext>();
+  const name = deployment.name;
+  const [logs, setLogs] = useState('');
+  const [streaming, setStreaming] = useState(false);
+  const containerRef = useRef<HTMLPreElement>(null);
+
+  useEffect(() => {
+    setStreaming(true);
+    setLogs('');
+
+    const auth = getAuth();
+    const controller = new AbortController();
+
+    (async () => {
+      try {
+        const res = await fetch(`/api/deployments/${name}/logs`, {
+          headers: {
+            'x-deploy-username': auth?.username || '',
+            'x-deploy-token': auth?.token || '',
+          },
+          signal: controller.signal,
+        });
+
+        if (!res.ok || !res.body) {
+          setStreaming(false);
+          return;
+        }
+
+        const reader = res.body.getReader();
+        const decoder = new TextDecoder();
+
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          setLogs((prev) => prev + decoder.decode(value, { stream: true }));
+        }
+      } catch {
+        // aborted or network error
+      }
+      setStreaming(false);
+    })();
+
+    return () => {
+      controller.abort();
+    };
+  }, [name]);
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    }
+  }, [logs]);
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-3">
+        <h3 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">
+          Container Logs
+        </h3>
+        <div className="flex items-center gap-2">
+          {streaming && (
+            <span className="flex items-center gap-1.5 text-xs text-success">
+              <span className="w-1.5 h-1.5 rounded-full bg-success animate-pulse" />
+              Live
+            </span>
+          )}
+        </div>
+      </div>
+      <pre
+        ref={containerRef}
+        className="card p-4 text-xs font-mono leading-relaxed text-text-secondary overflow-auto max-h-[500px] whitespace-pre-wrap"
+      >
+        {logs || (streaming ? 'Waiting for logs...' : 'No logs available.')}
+      </pre>
+    </div>
+  );
+}

package/app/routes/dashboard/detail/overview.tsx

@@ -0,0 +1,119 @@
+'use client';
+
+import { useOutletContext } from 'react-router';
+import { restartDeployment as serverRestart } from '../../../actions/deployments';
+import { appUrl, getAuth, StatusBadge } from './shared';
+import type { DetailContext } from './shared';
+
+function InfoRow({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center justify-between">
+      <span className="text-xs text-text-secondary">{label}</span>
+      <span className="text-sm">{children}</span>
+    </div>
+  );
+}
+
+function formatUptime(ms: number) {
+  const secs = Math.floor(ms / 1000);
+  if (secs < 60) return `${secs}s`;
+  const mins = Math.floor(secs / 60);
+  if (mins < 60) return `${mins}m ${secs % 60}s`;
+  const hours = Math.floor(mins / 60);
+  if (hours < 24) return `${hours}h ${mins % 60}m`;
+  const days = Math.floor(hours / 24);
+  return `${days}d ${hours % 24}h`;
+}
+
+export default function Component() {
+  const { deployment, inspect, fetchDeployment, fetchInspect } = useOutletContext<DetailContext>();
+
+  const started = inspect?.started ? new Date(inspect.started) : null;
+  const uptime = started ? formatUptime(Date.now() - started.getTime()) : 'N/A';
+
+  async function handleRestart() {
+    const auth = getAuth();
+    if (!auth) return;
+    await serverRestart(auth.username, auth.token, deployment.name);
+    fetchDeployment();
+    fetchInspect();
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div className="card p-4 space-y-3">
+          <h3 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">
+            Container
+          </h3>
+          <InfoRow label="Status">
+            <StatusBadge status={deployment.status} />
+          </InfoRow>
+          <InfoRow label="Uptime">{uptime}</InfoRow>
+          <InfoRow label="Restarts">{inspect?.restartCount ?? 'N/A'}</InfoRow>
+          <InfoRow label="Image">
+            <span className="font-mono text-xs">{inspect?.image ?? 'N/A'}</span>
+          </InfoRow>
+          <InfoRow label="Container ID">
+            <span className="font-mono text-xs">{deployment.containerId?.slice(0, 12)}</span>
+          </InfoRow>
+        </div>
+
+        <div className="card p-4 space-y-3">
+          <h3 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider">
+            Deployment
+          </h3>
+          <InfoRow label="Name">{deployment.name}</InfoRow>
+          <InfoRow label="Type">
+            <span className="badge bg-accent/10 text-accent">{deployment.type}</span>
+          </InfoRow>
+          <InfoRow label="URL">
+            <a
+              href={appUrl(deployment.name)}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-accent hover:text-accent-hover font-mono text-xs"
+            >
+              {deployment.name}.localhost
+            </a>
+          </InfoRow>
+          <InfoRow label="Created">{new Date(deployment.createdAt).toLocaleString()}</InfoRow>
+        </div>
+      </div>
+
+      {inspect?.env && inspect.env.length > 0 && (
+        <div className="card p-4">
+          <h3 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider mb-3">
+            Environment Variables
+          </h3>
+          <div className="space-y-1">
+            {inspect.env.map((e, i) => {
+              const [key, ...rest] = e.split('=');
+              return (
+                <div key={i} className="flex gap-2 text-xs font-mono">
+                  <span className="text-accent">{key}</span>
+                  <span className="text-text-tertiary">=</span>
+                  <span className="text-text-secondary">{rest.join('=')}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      <div className="flex gap-2">
+        <a
+          href={appUrl(deployment.name)}
+          target="_blank"
+          rel="noopener noreferrer"
+          className="btn btn-primary btn-sm"
+        >
+          Open App
+        </a>
+        <button type="button" className="btn btn-sm" onClick={handleRestart}>
+          Restart
+        </button>
+      </div>
+    </div>
+  );
+}

package/app/routes/dashboard/detail/requests.tsx

@@ -0,0 +1,163 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useOutletContext } from 'react-router';
+import { fetchRequestData as serverFetchRequests } from '../../../actions/deployments';
+import { appUrl, getAuth, StatCard } from './shared';
+import type { DetailContext } from './shared';
+
+interface RequestLog {
+  method: string;
+  path: string;
+  status: number;
+  duration: number;
+  timestamp: number;
+}
+
+interface RequestSummary {
+  total: number;
+  statusCodes: Record<string, number>;
+  avgDuration: number;
+  recentRpm: number;
+}
+
+export default function Component() {
+  const { deployment } = useOutletContext<DetailContext>();
+  const name = deployment.name;
+  const [logs, setLogs] = useState<RequestLog[]>([]);
+  const [summary, setSummary] = useState<RequestSummary | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchRequests = useCallback(async () => {
+    try {
+      const auth = getAuth();
+      if (!auth) return;
+      const data = await serverFetchRequests(auth.username, auth.token, name);
+      setLogs(data.logs as RequestLog[]);
+      setSummary(data.summary as RequestSummary);
+    } catch {
+      // may not have data yet
+    } finally {
+      setLoading(false);
+    }
+  }, [name]);
+
+  useEffect(() => {
+    fetchRequests();
+    const interval = setInterval(fetchRequests, 3000);
+    return () => clearInterval(interval);
+  }, [fetchRequests]);
+
+  if (loading) {
+    return <div className="text-sm text-text-tertiary text-center py-8">Loading...</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="card p-4">
+        <p className="text-xs text-text-tertiary mb-2">
+          App URL:{' '}
+          <a
+            href={appUrl(name)}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-accent hover:text-accent-hover font-mono"
+          >
+            {name}.localhost
+          </a>
+        </p>
+        <p className="text-xs text-text-secondary">
+          All traffic to this subdomain is tracked automatically.
+        </p>
+      </div>
+
+      {summary && summary.total > 0 ? (
+        <>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            <StatCard label="Total Requests" value={String(summary.total)} />
+            <StatCard label="Avg Response" value={`${summary.avgDuration}ms`} />
+            <StatCard label="Requests/min" value={String(summary.recentRpm)} />
+            <div className="card p-4">
+              <p className="text-xs text-text-tertiary mb-1">Status Codes</p>
+              <div className="flex flex-wrap gap-2 mt-1">
+                {Object.entries(summary.statusCodes).map(([code, count]) => (
+                  <span
+                    key={code}
+                    className={`text-xs font-mono px-1.5 py-0.5 rounded ${
+                      code === '2xx'
+                        ? 'bg-success/10 text-success'
+                        : code === '3xx'
+                          ? 'bg-accent/10 text-accent'
+                          : code === '4xx'
+                            ? 'bg-warning/10 text-warning'
+                            : 'bg-danger/10 text-danger'
+                    }`}
+                  >
+                    {code}: {count}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="card overflow-hidden">
+            <h3 className="text-xs font-semibold text-text-tertiary uppercase tracking-wider px-4 py-3 border-b border-border">
+              Recent Requests
+            </h3>
+            <div className="overflow-auto max-h-[400px]">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-border text-left text-xs text-text-tertiary">
+                    <th className="px-4 py-2 font-medium">Method</th>
+                    <th className="px-4 py-2 font-medium">Path</th>
+                    <th className="px-4 py-2 font-medium">Status</th>
+                    <th className="px-4 py-2 font-medium">Duration</th>
+                    <th className="px-4 py-2 font-medium">Time</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-border">
+                  {[...logs]
+                    .reverse()
+                    .slice(0, 100)
+                    .map((log, i) => (
+                      <tr key={i} className="hover:bg-bg-hover transition-colors">
+                        <td className="px-4 py-2 font-mono text-xs font-medium">{log.method}</td>
+                        <td className="px-4 py-2 font-mono text-xs text-text-secondary truncate max-w-[200px]">
+                          {log.path}
+                        </td>
+                        <td className="px-4 py-2">
+                          <span
+                            className={`text-xs font-mono px-1.5 py-0.5 rounded ${
+                              log.status < 300
+                                ? 'bg-success/10 text-success'
+                                : log.status < 400
+                                  ? 'bg-accent/10 text-accent'
+                                  : log.status < 500
+                                    ? 'bg-warning/10 text-warning'
+                                    : 'bg-danger/10 text-danger'
+                            }`}
+                          >
+                            {log.status}
+                          </span>
+                        </td>
+                        <td className="px-4 py-2 font-mono text-xs text-text-secondary">
+                          {log.duration}ms
+                        </td>
+                        <td className="px-4 py-2 text-xs text-text-tertiary">
+                          {new Date(log.timestamp).toLocaleTimeString()}
+                        </td>
+                      </tr>
+                    ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="card p-6 text-center text-sm text-text-secondary">
+          No requests recorded yet. Send traffic to the app URL above to see analytics.
+        </div>
+      )}
+    </div>
+  );
+}