mop-agent 0.1.7 → 0.1.8

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/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>
+  );
 }