@adens/openwa 0.1.0

package/web/components/SessionSidebar.js

@@ -0,0 +1,167 @@
+import { BrandLogo } from "@/components/BrandLogo";
+
+function SessionStatusBadge({ status }) {
+  const colors = {
+    ready: "bg-brand-500/15 text-brand-100 ring-1 ring-brand-400/20",
+    connecting: "bg-amber-500/15 text-amber-100 ring-1 ring-amber-400/20",
+    disconnected: "bg-white/8 text-white/60 ring-1 ring-white/10",
+    error: "bg-red-500/15 text-red-100 ring-1 ring-red-400/20"
+  };
+
+  return (
+    <span className={`rounded-full px-2.5 py-1 text-[11px] font-medium capitalize tracking-[0.08em] ${colors[status] || colors.disconnected}`}>
+      {status}
+    </span>
+  );
+}
+
+function initials(label) {
+  return String(label || "?")
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+function SessionAvatar({ label }) {
+  return <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full bg-[#202c33] text-sm font-semibold text-white">{initials(label)}</div>;
+}
+
+export function SessionSidebar({
+  sessions,
+  activeSessionId,
+  onSelect,
+  onConnect,
+  onDisconnect,
+  sessionName,
+  sessionPhone,
+  onSessionNameChange,
+  onSessionPhoneChange,
+  onCreateSession
+}) {
+  const activeSession = sessions.find((session) => session.id === activeSessionId) || sessions[0] || null;
+
+  return (
+    <aside className="flex w-[330px] shrink-0 flex-col border-r border-white/6 bg-[#0b141a]">
+      <div className="border-b border-white/6 px-5 py-5">
+        <p className="text-[11px] uppercase tracking-[0.28em] text-brand-100/60">Workspace</p>
+        <div className="mt-3 flex items-center gap-3">
+          <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white p-2 shadow-[0_16px_40px_rgba(0,0,0,0.18)]">
+            <BrandLogo variant="square" alt="OpenWA" className="h-full w-full rounded-xl" />
+          </div>
+          <div>
+            <h2 className="text-lg font-semibold text-white">OpenWA Devices</h2>
+            <p className="text-sm text-white/45">Manage multiple numbers in one dashboard.</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto px-4 py-4">
+        <div className="space-y-2.5">
+          {sessions.map((session) => (
+            <button
+              key={session.id}
+              type="button"
+              className={`w-full rounded-[26px] border px-4 py-3.5 text-left transition ${
+                session.id === activeSessionId
+                  ? "border-brand-500/40 bg-brand-500/10 shadow-panel"
+                  : "border-white/6 bg-white/[0.03] hover:border-white/12 hover:bg-white/[0.05]"
+              }`}
+              onClick={() => onSelect(session.id)}
+            >
+              <div className="flex items-start gap-3">
+                <SessionAvatar label={session.name} />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center justify-between gap-3">
+                    <h3 className="truncate font-medium text-white">{session.name}</h3>
+                    <SessionStatusBadge status={session.status} />
+                  </div>
+                  <p className="mt-1 truncate text-sm text-white/45">{session.phoneNumber || "Number will appear after device connects"}</p>
+                </div>
+              </div>
+            </button>
+          ))}
+
+          {sessions.length === 0 ? (
+            <div className="rounded-[26px] border border-dashed border-white/10 bg-white/[0.03] px-4 py-7 text-sm leading-6 text-white/45">
+              No active sessions. Add a new device to start building your OpenWA workspace.
+            </div>
+          ) : null}
+        </div>
+      </div>
+
+      <div className="border-t border-white/6 px-5 py-5">
+        {activeSession ? (
+          <div className="mb-4 rounded-[28px] border border-white/8 bg-gradient-to-b from-white/[0.06] to-white/[0.03] p-4 shadow-panel">
+             <div className="mb-4 flex items-center justify-between gap-3">
+               <div>
+                 <h3 className="font-semibold text-white">{activeSession.name}</h3>
+                 <p className="text-sm text-white/45">{activeSession.phoneNumber || "Waiting for WhatsApp pairing"}</p>
+                 <p className="mt-1 text-xs uppercase tracking-[0.18em] text-white/30">
+                   Transport: {activeSession.transportType === "mock" ? "Mock" : "WhatsApp Web"}
+                 </p>
+               </div>
+               <SessionStatusBadge status={activeSession.status} />
+             </div>
+
+            {activeSession.qrCode ? (
+              <div className="rounded-[24px] bg-white p-3">
+                <img src={activeSession.qrCode} alt="QR Code" className="mx-auto h-40 w-40 rounded-2xl" />
+              </div>
+             ) : (
+               <div className="rounded-[24px] border border-dashed border-white/10 bg-[#111b21] px-4 py-10 text-center text-sm leading-6 text-white/45">
+                 QR code will appear here when session starts pairing.
+               </div>
+             )}
+
+             {activeSession.lastError ? (
+               <div className="mt-3 rounded-2xl border border-red-400/20 bg-red-500/10 px-3 py-2.5 text-sm leading-6 text-red-100">
+                 {activeSession.lastError}
+               </div>
+             ) : null}
+
+             <div className="mt-4 grid grid-cols-2 gap-2">
+              <button
+                type="button"
+                className="rounded-2xl bg-brand-500 px-4 py-3 text-sm font-semibold text-[#10251a] transition hover:bg-brand-600"
+                onClick={() => onConnect(activeSession.id)}
+              >
+                Connect
+              </button>
+              <button
+                type="button"
+                className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm font-medium text-white/80 transition hover:bg-white/[0.06]"
+                onClick={() => onDisconnect(activeSession.id)}
+              >
+                Disconnect
+              </button>
+            </div>
+          </div>
+        ) : null}
+
+        <form className="space-y-3" onSubmit={onCreateSession}>
+          <div>
+            <p className="mb-2 text-[11px] uppercase tracking-[0.26em] text-white/35">Add device</p>
+            <input
+              className="w-full rounded-2xl border border-white/10 bg-[#202c33] px-4 py-3 text-sm text-white outline-none transition placeholder:text-white/30 focus:border-brand-500"
+              placeholder="Session name, e.g. Sales Team"
+              value={sessionName}
+              onChange={(event) => onSessionNameChange(event.target.value)}
+              required
+            />
+          </div>
+          <input
+            className="w-full rounded-2xl border border-white/10 bg-[#202c33] px-4 py-3 text-sm text-white outline-none transition placeholder:text-white/30 focus:border-brand-500"
+            placeholder="Nomor WhatsApp (opsional)"
+            value={sessionPhone}
+            onChange={(event) => onSessionPhoneChange(event.target.value)}
+          />
+          <button type="submit" className="w-full rounded-2xl border border-brand-500/30 bg-brand-500/10 px-4 py-3 text-sm font-semibold text-brand-100 transition hover:bg-brand-500/20">
+            Add WhatsApp Session
+          </button>
+        </form>
+      </div>
+    </aside>
+  );
+}

package/web/components/SettingsModal.js

@@ -0,0 +1,266 @@
+import { useState } from "react";
+import { BrandLogo } from "@/components/BrandLogo";
+
+function SessionStatusBadge({ status }) {
+  const colors = {
+    ready: "bg-brand-500/15 text-brand-100 ring-1 ring-brand-400/20",
+    connecting: "bg-amber-500/15 text-amber-100 ring-1 ring-amber-400/20",
+    disconnected: "bg-white/8 text-white/60 ring-1 ring-white/10",
+    error: "bg-red-500/15 text-red-100 ring-1 ring-red-400/20"
+  };
+
+  return (
+    <span className={`rounded-full px-2.5 py-1 text-[11px] font-medium capitalize tracking-[0.08em] ${colors[status] || colors.disconnected}`}>
+      {status}
+    </span>
+  );
+}
+
+function initials(label) {
+  return String(label || "?")
+    .split(" ")
+    .map((part) => part[0])
+    .join("")
+    .slice(0, 2)
+    .toUpperCase();
+}
+
+function SessionAvatar({ label }) {
+  return <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-[#2e2f2f] text-sm font-semibold text-white">{initials(label)}</div>;
+}
+
+function formatDateTime(value) {
+  if (!value) {
+    return "Never";
+  }
+
+  return new Intl.DateTimeFormat("en-US", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(new Date(value));
+}
+
+export function SettingsModal({
+  open,
+  sessions,
+  activeSessionId,
+  onClose,
+  onSelect,
+  onConnect,
+  onDisconnect,
+  sessionName,
+  sessionPhone,
+  onSessionNameChange,
+  onSessionPhoneChange,
+  onCreateSession,
+  apiKeys,
+  apiKeysLoading,
+  apiKeyName,
+  apiKeySecret,
+  onApiKeyNameChange,
+  onCreateApiKey,
+  onRevokeApiKey
+}) {
+  const [copied, setCopied] = useState(false);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-6 py-8 backdrop-blur-sm">
+      <div className="flex h-full max-h-[840px] w-full max-w-[1080px] flex-col overflow-hidden rounded-[32px] bg-[#161717] shadow-[0_40px_120px_rgba(0,0,0,0.5)]">
+        <div className="flex items-center justify-between px-6 py-5">
+          <div className="flex items-center gap-4">
+            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white p-2 shadow-[0_16px_40px_rgba(0,0,0,0.18)]">
+              <BrandLogo variant="square" alt="OpenWA" className="h-full w-full rounded-xl" />
+            </div>
+            <div>
+              <p className="text-[11px] uppercase tracking-[0.26em] text-white/35">Settings</p>
+              <h2 className="mt-2 text-xl font-semibold text-white">OpenWA Devices</h2>
+            </div>
+          </div>
+          <button type="button" className="rounded-full bg-[#2e2f2f] px-4 py-2 text-sm text-white/70 transition hover:bg-[#3a3b3b] hover:text-white" onClick={onClose}>
+            Close
+          </button>
+        </div>
+
+        <div className="grid min-h-0 flex-1 gap-0 md:grid-cols-[1.2fr_0.8fr]">
+          <div className="min-h-0 px-5 py-5">
+            <div className="h-full overflow-y-auto pr-1">
+              <div className="space-y-3">
+                {sessions.map((session) => (
+                  <button
+                    key={session.id}
+                    type="button"
+                    className={`w-full rounded-[18px] px-4 py-4 text-left transition ${
+                      session.id === activeSessionId
+                        ? "bg-[#2e2f2f]"
+                        : "bg-transparent hover:bg-white/[0.04]"
+                    }`}
+                    onClick={() => onSelect(session.id)}
+                  >
+                    <div className="flex items-start gap-3">
+                      <SessionAvatar label={session.name} />
+                      <div className="min-w-0 flex-1">
+                        <div className="flex items-center justify-between gap-3">
+                          <h3 className="truncate font-medium text-white">{session.name}</h3>
+                          <SessionStatusBadge status={session.status} />
+                        </div>
+                        <p className="mt-1 text-sm text-white/45">{session.phoneNumber || "Waiting for WhatsApp pairing"}</p>
+                        <p className="mt-2 text-xs uppercase tracking-[0.16em] text-white/30">
+                          Transport: {session.transportType === "mock" ? "Mock" : "WhatsApp Web"}
+                        </p>
+                        {session.lastError ? <p className="mt-3 rounded-2xl bg-red-500/10 px-3 py-2 text-sm text-red-100">{session.lastError}</p> : null}
+                      </div>
+                    </div>
+
+                    <div className="mt-4 flex gap-2">
+                      <button
+                        type="button"
+                        className="rounded-2xl bg-brand-500 px-4 py-2 text-sm font-semibold text-[#10251a]"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onConnect(session.id);
+                        }}
+                      >
+                        Connect
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded-2xl bg-[#2e2f2f] px-4 py-2 text-sm text-white/75"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onDisconnect(session.id);
+                        }}
+                      >
+                        Disconnect
+                      </button>
+                    </div>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          <div className="min-h-0 overflow-y-auto px-6 py-5">
+            <div className="rounded-[28px] bg-[#161717] p-4">
+              <p className="text-[11px] uppercase tracking-[0.24em] text-white/35">Pairing QR</p>
+              {sessions.find((session) => session.id === activeSessionId)?.qrCode ? (
+                <div className="mt-4 rounded-[24px] bg-white p-4">
+                  <img
+                    src={sessions.find((session) => session.id === activeSessionId)?.qrCode}
+                    alt="QR Code"
+                    className="mx-auto h-56 w-56 rounded-2xl"
+                  />
+                </div>
+              ) : (
+                <div className="mt-4 rounded-[24px] bg-[#2e2f2f] px-4 py-16 text-center text-sm leading-6 text-white/40">
+                  QR code for pairing will appear here when session is connecting.
+                </div>
+              )}
+            </div>
+
+            <form className="mt-5 space-y-3 rounded-[28px] bg-[#161717] p-4" onSubmit={onCreateSession}>
+              <div>
+                <p className="mb-2 text-[11px] uppercase tracking-[0.24em] text-white/35">Add device</p>
+                <input
+                  className="w-full rounded-[22px] bg-[#2e2f2f] px-4 py-3 text-sm text-white outline-none placeholder:text-white/30"
+                  placeholder="Session name, e.g. Sales Team"
+                  value={sessionName}
+                  onChange={(event) => onSessionNameChange(event.target.value)}
+                  required
+                />
+              </div>
+              <input
+                className="w-full rounded-[22px] bg-[#2e2f2f] px-4 py-3 text-sm text-white outline-none placeholder:text-white/30"
+                placeholder="WhatsApp number (optional)"
+                value={sessionPhone}
+                onChange={(event) => onSessionPhoneChange(event.target.value)}
+              />
+              <button type="submit" className="w-full rounded-2xl bg-brand-500 px-4 py-3 text-sm font-semibold text-[#10251a]">
+                Add WhatsApp Session
+              </button>
+            </form>
+
+            <div className="mt-5 rounded-[28px] bg-[#161717] p-4">
+              <div className="flex items-start justify-between gap-4">
+                <div>
+                  <p className="text-[11px] uppercase tracking-[0.24em] text-white/35">API Access</p>
+                  <h3 className="mt-2 text-base font-semibold text-white">Generate API key</h3>
+                  <p className="mt-2 text-sm leading-6 text-white/45">Use with external agents via `X-API-Key` header or `Authorization: Bearer &lt;api-key&gt;`.</p>
+                </div>
+              </div>
+
+              {apiKeySecret ? (
+                <div className="mt-4 rounded-[22px] bg-[#2e2f2f] p-4">
+                  <p className="text-[11px] uppercase tracking-[0.22em] text-brand-200/80">Shown once</p>
+                  <p className="mt-2 break-all font-mono text-sm text-white">{apiKeySecret}</p>
+                  <button
+                    type="button"
+                    className="mt-3 rounded-full bg-brand-500 px-4 py-2 text-sm font-semibold text-[#10251a]"
+                    onClick={async () => {
+                      await navigator.clipboard.writeText(apiKeySecret);
+                      setCopied(true);
+                      setTimeout(() => setCopied(false), 1500);
+                    }}
+                  >
+                    {copied ? "Copied" : "Copy API key"}
+                  </button>
+                </div>
+              ) : null}
+
+              <form className="mt-4 flex gap-2" onSubmit={onCreateApiKey}>
+                <input
+                  className="w-full rounded-[22px] bg-[#2e2f2f] px-4 py-3 text-sm text-white outline-none placeholder:text-white/30"
+                  placeholder="Key name, e.g. OpenClaw Agent"
+                  value={apiKeyName}
+                  onChange={(event) => onApiKeyNameChange(event.target.value)}
+                  required
+                />
+                <button type="submit" className="shrink-0 rounded-[22px] bg-brand-500 px-4 py-3 text-sm font-semibold text-[#10251a]">
+                  Generate
+                </button>
+              </form>
+
+              <div className="mt-4 max-h-[260px] space-y-3 overflow-y-auto pr-1">
+                {apiKeysLoading ? <div className="rounded-[22px] bg-[#2e2f2f] px-4 py-6 text-sm text-white/45">Loading API keys...</div> : null}
+
+                {!apiKeysLoading && !apiKeys.length ? (
+                  <div className="rounded-[22px] bg-[#2e2f2f] px-4 py-6 text-sm leading-6 text-white/45">
+                    No API keys yet. Create one for OpenAPI client, AI agents, or external integrations.
+                  </div>
+                ) : null}
+
+                {apiKeys.map((apiKey) => (
+                  <div key={apiKey.id} className="rounded-[22px] bg-[#2e2f2f] px-4 py-4">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="min-w-0">
+                        <h4 className="truncate text-sm font-semibold text-white">{apiKey.name}</h4>
+                        <p className="mt-1 font-mono text-xs text-white/55">{apiKey.maskedKey}</p>
+                      </div>
+                      <button
+                        type="button"
+                        className="rounded-full bg-white/5 px-3 py-1.5 text-xs font-medium text-red-200 transition hover:bg-red-500/15"
+                        onClick={() => onRevokeApiKey(apiKey.id)}
+                      >
+                        Revoke
+                      </button>
+                    </div>
+                    <div className="mt-3 grid gap-2 text-xs text-white/40">
+                      <p>Created: {formatDateTime(apiKey.createdAt)}</p>
+                      <p>Last used: {formatDateTime(apiKey.lastUsedAt)}</p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/web/components/Skeletons.js

@@ -0,0 +1,73 @@
+export function MessageSkeleton() {
+  return (
+    <div className="flex justify-start">
+      <div className="max-w-[72%] space-y-2 rounded-[18px] bg-[#2e2f2f] px-4 py-3">
+        <div className="h-4 w-48 animate-pulse rounded bg-white/10" />
+        <div className="h-4 w-40 animate-pulse rounded bg-white/10" />
+        <div className="mt-3 flex justify-between">
+          <div className="h-3 w-12 animate-pulse rounded bg-white/5" />
+          <div className="h-3 w-8 animate-pulse rounded bg-white/5" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function MessagesSkeletonList() {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: 5 }).map((_, i) => (
+        <MessageSkeleton key={i} />
+      ))}
+    </div>
+  );
+}
+
+export function ConversationSkeleton() {
+  return (
+    <div className="flex items-center gap-3 border-b border-white/5 px-3 py-3 transition hover:bg-white/5 cursor-pointer">
+      <div className="h-12 w-12 animate-pulse rounded-2xl bg-white/10" />
+      <div className="flex-1 min-w-0">
+        <div className="h-4 w-32 animate-pulse rounded bg-white/10 mb-2" />
+        <div className="h-3 w-48 animate-pulse rounded bg-white/5" />
+      </div>
+      <div className="h-3 w-10 animate-pulse rounded bg-white/5" />
+    </div>
+  );
+}
+
+export function ConversationsSkeletonList() {
+  return (
+    <div>
+      {Array.from({ length: 8 }).map((_, i) => (
+        <ConversationSkeleton key={i} />
+      ))}
+    </div>
+  );
+}
+
+export function ImageGroupSkeleton() {
+  return (
+    <div className="flex justify-start">
+      <div className="max-w-[72%] rounded-[18px] overflow-hidden bg-[#2e2f2f]">
+        <div className="grid grid-cols-2 gap-1 p-1">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="h-32 w-32 animate-pulse rounded-lg bg-white/10" />
+          ))}
+        </div>
+        <div className="px-4 py-3 border-t border-white/10">
+          <div className="h-3 w-20 animate-pulse rounded bg-white/5" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SendButtonSpinner() {
+  return (
+    <svg className="h-5 w-5 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+    </svg>
+  );
+}

package/web/jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  }
+}

package/web/lib/api.js

@@ -0,0 +1,33 @@
+export function getApiBaseUrl() {
+  return process.env.NEXT_PUBLIC_API_URL || "http://localhost:55222";
+}
+
+export async function apiFetch(url, options = {}) {
+  const target = `${getApiBaseUrl()}${url}`;
+  const authHeaders = {
+    ...(options.token ? { Authorization: `Bearer ${options.token}` } : {}),
+    ...(options.apiKey ? { "X-API-Key": options.apiKey } : {})
+  };
+  const response = await fetch(target, {
+    method: options.method || "GET",
+    headers: options.formData
+      ? {
+          ...authHeaders
+        }
+      : {
+          "Content-Type": "application/json",
+          ...authHeaders
+        },
+    body: options.formData || (options.body ? JSON.stringify(options.body) : undefined)
+  });
+
+  const payload = await response.json().catch(() => ({}));
+
+  if (!response.ok) {
+    const error = new Error(payload.error || "Request failed.");
+    error.status = response.status;
+    throw error;
+  }
+
+  return payload;
+}

package/web/lib/socket.js

@@ -0,0 +1,9 @@
+import { io } from "socket.io-client";
+
+export function createSocket(token) {
+  return io(process.env.NEXT_PUBLIC_SOCKET_URL || "http://localhost:55222", {
+    auth: {
+      token
+    }
+  });
+}

package/web/pages/_app.js

@@ -0,0 +1,5 @@
+import "@/styles/globals.css";
+
+export default function App({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}