mop-agent 0.1.7 → 0.1.9

package/apps/web/app/globals.css

@@ -93,6 +93,365 @@ button {
 
 ::selection { background: #742220; color: #fef9e1; }
 
+/* Shared protected-app shell, inspired by a compact retro server console. */
+.mop-app-frame {
+  min-height: 100vh;
+  display: grid;
+  grid-template-columns: 238px minmax(0, 1fr);
+  grid-template-rows: 70px minmax(0, 1fr);
+  grid-template-areas:
+    "topbar topbar"
+    "sidebar main";
+  background: var(--mop-cream);
+}
+
+.mop-app-topbar {
+  grid-area: topbar;
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  display: grid;
+  grid-template-columns: 238px minmax(0, 1fr);
+  min-width: 0;
+  color: var(--mop-cream);
+  background:
+    linear-gradient(rgba(255, 255, 255, .025), rgba(0, 0, 0, .05)),
+    var(--mop-red);
+  border-bottom: 2px solid rgba(55, 18, 17, .55);
+  box-shadow: 0 2px 0 rgba(45, 74, 62, .28);
+}
+
+.mop-app-brand {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-width: 0;
+  padding: 7px 14px;
+  color: var(--mop-cream);
+  text-decoration: none;
+  border-right: 1px solid rgba(254, 249, 225, .16);
+}
+
+.mop-app-brand img {
+  width: 51px;
+  height: 51px;
+  object-fit: contain;
+  filter: drop-shadow(2px 3px 0 rgba(36, 20, 14, .34));
+}
+
+.mop-app-brand span {
+  overflow: hidden;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 14px;
+  font-weight: 900;
+  letter-spacing: .055em;
+  white-space: nowrap;
+}
+
+.mop-app-topbar-main {
+  position: relative;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 0 18px;
+}
+
+.mop-menu-toggle {
+  display: none;
+  width: 37px;
+  height: 37px;
+  border: 1px solid rgba(254, 249, 225, .28);
+  background: rgba(254, 249, 225, .08);
+  color: var(--mop-cream);
+  cursor: pointer;
+}
+
+.mop-topbar-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 130px;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 13px;
+  letter-spacing: .08em;
+  text-transform: uppercase;
+}
+
+.mop-live-dot {
+  width: 8px;
+  height: 8px;
+  background: #78e19b;
+  box-shadow: 0 0 0 3px rgba(120, 225, 155, .14);
+}
+
+.mop-topbar-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 255px;
+  padding: 9px 28px;
+  text-align: center;
+  color: rgba(254, 249, 225, .86);
+  border: 1px solid rgba(254, 249, 225, .12);
+  background: rgba(254, 249, 225, .07);
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: .18em;
+}
+
+.mop-topbar-meta {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin-left: auto;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: .12em;
+}
+
+.mop-version {
+  padding: 4px 6px;
+  border: 1px solid rgba(254, 249, 225, .22);
+  background: rgba(254, 249, 225, .07);
+}
+
+.mop-app-sidebar {
+  grid-area: sidebar;
+  position: sticky;
+  top: 70px;
+  height: calc(100vh - 70px);
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  padding: 15px 9px 12px;
+  color: var(--mop-cream);
+  background:
+    linear-gradient(rgba(255,255,255,.018), rgba(0,0,0,.05)),
+    var(--mop-green);
+  border-right: 2px solid #20362e;
+}
+
+.mop-nav-section { margin-bottom: 17px; }
+.mop-nav-section > p {
+  margin: 0 8px 9px;
+  color: rgba(254, 249, 225, .46);
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 9px;
+  font-weight: 900;
+  letter-spacing: .22em;
+}
+
+.mop-nav-section nav { display: grid; gap: 4px; }
+.mop-nav-section a {
+  display: flex;
+  align-items: center;
+  gap: 11px;
+  min-height: 43px;
+  padding: 8px 12px;
+  color: rgba(254, 249, 225, .78);
+  border: 1px solid transparent;
+  text-decoration: none;
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 12px;
+  font-weight: 800;
+  letter-spacing: .055em;
+  text-transform: uppercase;
+}
+
+.mop-nav-section a:hover {
+  color: var(--mop-cream);
+  background: rgba(254, 249, 225, .07);
+}
+
+.mop-nav-section a.is-active {
+  color: #ff8a3d;
+  border-color: rgba(254, 249, 225, .18);
+  background: rgba(254, 249, 225, .09);
+  box-shadow: inset 3px 0 #ff6f2c, 2px 2px 0 rgba(18, 38, 30, .25);
+}
+
+.mop-nav-icon {
+  width: 21px;
+  text-align: center;
+  color: #ff6f2c;
+  font-size: 16px;
+}
+
+.mop-sidebar-spacer { flex: 1; }
+.mop-account-card {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 10px 8px;
+  color: var(--mop-cream);
+  border: 1px solid rgba(254, 249, 225, .13);
+  background: rgba(0, 0, 0, .07);
+  text-align: left;
+  cursor: pointer;
+}
+
+.mop-account-avatar {
+  flex: 0 0 auto;
+  width: 31px;
+  height: 31px;
+  display: grid;
+  place-items: center;
+  background: var(--mop-red);
+  color: var(--mop-cream);
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-weight: 900;
+}
+
+.mop-account-copy {
+  min-width: 0;
+  display: grid;
+  flex: 1;
+}
+
+.mop-account-copy strong,
+.mop-account-copy small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.mop-account-copy strong { font-size: 12px; }
+.mop-account-copy small { color: rgba(254, 249, 225, .52); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; }
+
+.mop-app-main {
+  grid-area: main;
+  min-width: 0;
+  min-height: calc(100vh - 70px);
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 50% -20%, rgba(255, 255, 255, .95), transparent 54%),
+    var(--mop-cream);
+}
+
+.mop-page {
+  width: min(100%, 1180px);
+  margin: 0 auto;
+  padding: 30px clamp(18px, 3vw, 42px) 48px;
+}
+
+.mop-page-heading {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: 22px;
+}
+
+.mop-page-kicker {
+  margin: 0 0 6px;
+  color: var(--mop-red);
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: .18em;
+}
+
+.mop-page-heading h1 { margin: 0; font-family: "SFMono-Regular", Consolas, monospace; font-size: clamp(24px, 3vw, 34px); }
+.mop-page-heading p:last-child { margin: 7px 0 0; color: rgba(45, 74, 62, .65); }
+
+.mop-panel {
+  border: 1px solid rgba(45, 74, 62, .46);
+  border-bottom-width: 4px;
+  background: rgba(255, 253, 242, .82);
+  box-shadow: 2px 2px 0 rgba(45, 74, 62, .08);
+}
+
+.mop-sidebar-scrim { display: none; }
+
+/* Assistant content now lives inside the shared shell. */
+.mop-assistant-page {
+  min-height: calc(100vh - 70px);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+.mop-assistant-toolbar {
+  min-height: 55px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  padding: 9px 22px;
+  border-bottom: 1px solid rgba(45, 74, 62, .24);
+  background: rgba(254, 249, 225, .78);
+}
+
+.mop-assistant-conversation { flex: 1; overflow-y: auto; padding: 0 28px; }
+.mop-assistant-welcome {
+  min-height: calc(100vh - 285px);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 32px 0 90px;
+  text-align: center;
+}
+
+.mop-assistant-composer-wrap {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 28px 30px 18px;
+  background: linear-gradient(transparent, var(--mop-cream) 28%);
+}
+
+.mop-settings-grid {
+  display: grid;
+  grid-template-columns: 210px minmax(0, 1fr);
+  gap: 18px;
+  align-items: start;
+}
+
+.mop-settings-nav { padding: 9px; }
+.mop-settings-nav button {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--mop-green);
+  text-align: left;
+  cursor: pointer;
+}
+
+.mop-settings-nav button.is-active {
+  color: var(--mop-cream);
+  border-color: var(--mop-red);
+  background: var(--mop-red);
+}
+
+.mop-settings-content { padding: clamp(18px, 3vw, 30px); }
+.mop-settings-content th,
+.mop-settings-content td {
+  padding: 11px 9px;
+  border-bottom: 1px solid rgba(45, 74, 62, .2);
+  text-align: left;
+}
+.mop-settings-content th {
+  color: rgba(45, 74, 62, .58);
+  font-family: "SFMono-Regular", Consolas, monospace;
+  font-size: 9px;
+  letter-spacing: .13em;
+  text-transform: uppercase;
+}
+.mop-assistant-welcome img { width: 100%; height: 100%; object-fit: contain; }
+
 @media (prefers-reduced-transparency: reduce) {
   body::before,
   body::after { display: none; }
@@ -102,7 +461,47 @@ button {
   .mop-setup-shell { grid-template-columns: 1fr !important; }
   .mop-setup-brand { min-height: 34vh; padding: 36px !important; }
   .mop-setup-form { border-left: 0 !important; border-top: 1px solid #2d4a3e !important; }
-  .mop-assistant-shell { grid-template-columns: 1fr !important; }
-  .mop-assistant-sidebar { display: none !important; }
   .mop-prompt-grid { grid-template-columns: 1fr !important; }
+
+  .mop-app-frame {
+    grid-template-columns: 1fr;
+    grid-template-rows: 62px minmax(0, 1fr);
+    grid-template-areas: "topbar" "main";
+  }
+  .mop-app-topbar { grid-template-columns: 66px minmax(0, 1fr); }
+  .mop-app-brand { justify-content: center; padding: 5px; }
+  .mop-app-brand img { width: 49px; height: 49px; }
+  .mop-app-brand span, .mop-topbar-center { display: none; }
+  .mop-app-topbar-main { padding: 0 10px; gap: 9px; }
+  .mop-menu-toggle { display: block; }
+  .mop-topbar-title { min-width: 0; font-size: 11px; }
+  .mop-topbar-meta > span:first-child { display: none; }
+  .mop-app-sidebar {
+    position: fixed;
+    top: 62px;
+    left: 0;
+    bottom: 0;
+    width: min(82vw, 280px);
+    height: auto;
+    transform: translateX(-105%);
+    transition: transform 160ms steps(4, end);
+  }
+  .mop-app-sidebar.is-open { transform: translateX(0); }
+  .mop-sidebar-scrim {
+    display: block;
+    position: fixed;
+    inset: 62px 0 0;
+    z-index: 35;
+    border: 0;
+    background: rgba(20, 34, 29, .56);
+  }
+  .mop-app-main { min-height: calc(100vh - 62px); }
+  .mop-assistant-page { min-height: calc(100vh - 62px); }
+  .mop-assistant-toolbar { align-items: flex-start; flex-direction: column; }
+  .mop-assistant-conversation { padding: 0 16px; }
+  .mop-assistant-composer-wrap { padding: 26px 12px 12px; }
+  .mop-settings-grid { grid-template-columns: 1fr; }
+  .mop-settings-nav { display: flex; gap: 7px; }
+  .mop-settings-nav button { justify-content: center; }
+  .mop-user-invite-form { grid-template-columns: 1fr !important; }
 }

package/apps/web/app/login/layout.tsx

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import { unstable_noStore as noStore } from "next/cache";
+import { headers } from "next/headers";
+import { redirect } from "next/navigation";
+import { auth, ownerExists } from "@/lib/auth";
+
+export const dynamic = "force-dynamic";
+export const revalidate = 0;
+
+export default async function LoginLayout({ children }: { children: ReactNode }) {
+  noStore();
+  if (!ownerExists()) redirect("/setup");
+  const session = await auth.api.getSession({ headers: await headers() });
+  if (session) redirect("/assistant");
+  return children;
+}

package/apps/web/app/login/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useState } from "react";
+import { signIn } from "@/lib/auth-client";
+
+type SetupStatus = { authenticated: boolean };
+
+async function waitForSession(): Promise<boolean> {
+  for (let attempt = 0; attempt < 5; attempt += 1) {
+    try {
+      const response = await fetch(`/api/setup/status?t=${Date.now()}`, { cache: "no-store", credentials: "include" });
+      const status = await response.json() as SetupStatus;
+      if (status.authenticated) return true;
+    } catch {
+      // Retry a short proxy/session propagation gap.
+    }
+    await new Promise((resolve) => setTimeout(resolve, 250));
+  }
+  return false;
+}
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [msg, setMsg] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setMsg("");
+    const result = await signIn.email({ email, password });
+    if (result.error) {
+      setMsg(result.error.message ?? "Sign in failed.");
+      setBusy(false);
+      return;
+    }
+    if (await waitForSession()) {
+      window.location.replace(`/assistant?auth=${Date.now()}`);
+      return;
+    }
+    setMsg("Sign in succeeded, but the session cookie was not accepted. Use the configured domain and HTTPS address.");
+    setBusy(false);
+  }
+
+  return (
+    <main className="mop-setup-shell" style={shell}>
+      <section className="mop-setup-brand" style={brandPanel}>
+        <img src="/icon.svg" alt="MOP-AGENT" style={heroLogo} />
+      </section>
+      <section className="mop-setup-form" style={formWrap}>
+        <div style={formCard}>
+          <p style={eyebrow}>WELCOME BACK</p>
+          <h1 style={{ fontSize: 27, margin: "8px 0" }}>Sign in to MOP-AGENT</h1>
+          <p style={description}>Use the account created for you by the Administrator.</p>
+          <form onSubmit={submit} style={{ display: "grid", gap: 14, marginTop: 28 }}>
+            <label style={label}>Email
+              <input placeholder="you@example.com" type="email" autoComplete="email" required value={email} onChange={(e) => setEmail(e.target.value)} style={inputStyle} />
+            </label>
+            <label style={label}>Password
+              <input placeholder="Your password" type="password" autoComplete="current-password" required value={password} onChange={(e) => setPassword(e.target.value)} style={inputStyle} />
+            </label>
+            <button type="submit" disabled={busy} style={{ ...buttonStyle, opacity: busy ? 0.65 : 1 }}>
+              {busy ? "Signing in…" : "Sign in"}
+            </button>
+          </form>
+          {msg && <p role="alert" style={{ marginTop: 16, color: "#742220" }}>{msg}</p>}
+        </div>
+      </section>
+    </main>
+  );
+}
+
+const shell: React.CSSProperties = { minHeight: "100vh", display: "grid", gridTemplateColumns: "minmax(0, 1.25fr) minmax(380px, .75fr)", background: "#fef9e1" };
+const brandPanel: React.CSSProperties = { padding: "clamp(48px, 8vw, 110px)", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", background: "radial-gradient(circle at 50% 45%, #49685c 0, #2d4a3e 58%, #21382f 100%)" };
+const heroLogo: React.CSSProperties = { display: "block", width: "min(72%, 560px)", height: "auto", maxHeight: "72vh", objectFit: "contain", filter: "drop-shadow(0 24px 34px rgba(0,0,0,.28))" };
+const formWrap: React.CSSProperties = { display: "flex", alignItems: "center", justifyContent: "center", padding: 28, background: "#fef9e1", borderLeft: "1px solid #2d4a3e" };
+const formCard: React.CSSProperties = { width: "min(100%, 430px)", padding: "38px 34px", border: "1px solid rgba(45,74,62,.45)", borderRadius: 18, background: "#fffdf2", boxShadow: "0 24px 70px rgba(45,74,62,.14)" };
+const eyebrow: React.CSSProperties = { margin: "20px 0 0", color: "#742220", fontSize: 12, fontWeight: 800, letterSpacing: ".16em" };
+const description: React.CSSProperties = { color: "#7f8da2", lineHeight: 1.55, marginTop: 0 };
+const label: React.CSSProperties = { display: "grid", gap: 7, color: "#2d4a3e", fontSize: 13, fontWeight: 650 };
+const inputStyle: React.CSSProperties = { padding: "12px 13px", borderRadius: 9, border: "1px solid rgba(45,74,62,.42)", outline: "none", background: "#fef9e1", color: "#2d4a3e", fontSize: 15 };
+const buttonStyle: React.CSSProperties = { marginTop: 4, padding: "12px 14px", borderRadius: 9, border: "1px solid #742220", background: "#742220", color: "#fef9e1", fontWeight: 750, fontSize: 15, cursor: "pointer" };

package/apps/web/app/settings/layout.tsx

@@ -1,10 +1,19 @@
 import type { ReactNode } from "react";
-import { requirePageSession } from "@/lib/page-auth";
+import { AppShell } from "@/components/AppShell";
+import { requireOwnerPage } from "@/lib/page-auth";
 
 export const dynamic = "force-dynamic";
 export const revalidate = 0;
 
 export default async function SettingsLayout({ children }: { children: ReactNode }) {
-  await requirePageSession();
-  return children;
+  const session = await requireOwnerPage();
+  return (
+    <AppShell viewer={{
+      name: session.user.name || session.user.email,
+      email: session.user.email,
+      role: "owner",
+    }}>
+      {children}
+    </AppShell>
+  );
 }