@lightupai/polaris 0.0.1

package/src/web/app.ts

@@ -0,0 +1,397 @@
+import { Hono } from "hono";
+import { Google } from "arctic";
+import { createToken, verifyToken } from "../service/auth";
+import {
+  createOrg,
+  getOrg,
+  getOrgByDomain,
+  createUser,
+  getUserByEmail,
+  upsertUser,
+  setOrgSlack,
+  type Sql,
+} from "../service/db";
+import { layout, nav } from "./layout";
+import { renderSetupView, renderActiveView, renderProfileView, renderErrorView } from "./views";
+import { renderLandingPage } from "./pages";
+import { createSystemChannel, postSystemEvent } from "../slack/system";
+import {
+  mockUser,
+  mockOrg,
+  mockOrgNoSlack,
+  mockProjects,
+  mockActiveSessions,
+  mockEmptySessions,
+  mockDevices,
+} from "./fixtures";
+
+// --- Google OAuth ---
+
+function getGoogle(): Google {
+  return new Google(
+    process.env.GOOGLE_CLIENT_ID ?? "",
+    process.env.GOOGLE_CLIENT_SECRET ?? "",
+    process.env.GOOGLE_REDIRECT_URI ?? "http://localhost:3000/auth/google/callback"
+  );
+}
+
+const oauthStates = new Map<string, { type: "login" | "signup"; codeVerifier: string; timestamp: number }>();
+const cliCallbackPorts = new Map<string, number>(); // state → CLI local server port
+
+// If this auth flow was initiated by the CLI, redirect the token to the CLI's local server.
+// Otherwise redirect to the dashboard.
+function authRedirect(c: { redirect: (url: string) => Response }, state: string, token: string): Response {
+  const cliPort = cliCallbackPorts.get(state);
+  if (cliPort) {
+    cliCallbackPorts.delete(state);
+    return c.redirect(`http://127.0.0.1:${cliPort}/callback?token=${token}`);
+  }
+  return c.redirect(`/dashboard?token=${token}`);
+}
+
+setInterval(() => {
+  const now = Date.now();
+  for (const [key, val] of oauthStates) {
+    if (now - val.timestamp > 10 * 60 * 1000) oauthStates.delete(key);
+  }
+}, 10 * 60 * 1000);
+
+// --- App ---
+
+export function createApp(sql: Sql) {
+  const app = new Hono();
+
+  // --- Landing page ---
+
+  app.get("/", (c) => {
+    return layout(renderLandingPage());
+  });
+
+  // --- Auth: single Google SSO flow for both signup and login ---
+
+  function startGoogleAuth(c: { redirect: (url: string) => Response }) {
+    const google = getGoogle();
+    const state = crypto.randomUUID();
+    const codeVerifier = crypto.randomUUID();
+    oauthStates.set(state, { type: "login", codeVerifier, timestamp: Date.now() });
+    const url = google.createAuthorizationURL(state, codeVerifier, ["openid", "email", "profile"]);
+    return c.redirect(url.toString());
+  }
+
+  app.get("/signup", async (c) => startGoogleAuth(c));
+  app.get("/login", async (c) => startGoogleAuth(c));
+
+  app.get("/auth/google/callback", async (c) => {
+    const code = c.req.query("code");
+    const state = c.req.query("state");
+    if (!code || !state) return layout(renderErrorView("Missing code or state.", "Try again", "/login"));
+
+    const stateData = oauthStates.get(state);
+    if (!stateData) return layout(renderErrorView("Invalid or expired OAuth state.", "Try again", "/login"));
+    oauthStates.delete(state);
+
+    const google = getGoogle();
+    let tokens;
+    try {
+      tokens = await google.validateAuthorizationCode(code, stateData.codeVerifier);
+    } catch {
+      return layout(renderErrorView("Authentication failed.", "Try again", "/login"));
+    }
+
+    const userInfoRes = await fetch("https://www.googleapis.com/oauth2/v3/userinfo", {
+      headers: { Authorization: `Bearer ${tokens.accessToken()}` },
+    });
+    const userInfo = (await userInfoRes.json()) as { sub: string; email: string; name: string };
+    const { email, name } = userInfo;
+    const domain = email.split("@")[1];
+
+    // 1. Existing user → log in
+    const existingUser = await getUserByEmail(sql, email);
+    if (existingUser) {
+      const token = await createToken({
+        sub: existingUser.id,
+        email: existingUser.email,
+        name: existingUser.name,
+        org_id: existingUser.org_id,
+        participant_id: existingUser.participant_id,
+      });
+      return authRedirect(c, state, token);
+    }
+
+    // 2. Existing org for this domain → auto-join
+    const existingOrg = await getOrgByDomain(sql, domain);
+    if (existingOrg) {
+      const userId = crypto.randomUUID();
+      const participantId = `user:${name.toLowerCase().replace(/\s+/g, ".")}`;
+      await createUser(sql, userId, email, name, existingOrg.id, participantId);
+      const token = await createToken({ sub: userId, email, name, org_id: existingOrg.id, participant_id: participantId });
+      return authRedirect(c, state, token);
+    }
+
+    // 3. No org → auto-create from email domain
+    const orgName = domain.split(".")[0].charAt(0).toUpperCase() + domain.split(".")[0].slice(1);
+    const orgId = crypto.randomUUID();
+    try {
+      await createOrg(sql, orgId, orgName, domain);
+    } catch {
+      return layout(renderErrorView("Failed to create team. Please try again.", "Try again", "/login"));
+    }
+    const userId = crypto.randomUUID();
+    const participantId = `user:${name.toLowerCase().replace(/\s+/g, ".")}`;
+    await createUser(sql, userId, email, name, orgId, participantId);
+    const token = await createToken({ sub: userId, email, name, org_id: orgId, participant_id: participantId });
+    return authRedirect(c, state, token);
+  });
+
+  // --- Dashboard ---
+
+  app.get("/dashboard", async (c) => {
+    const token = c.req.query("token");
+    if (!token) return c.redirect("/login");
+
+    const payload = await verifyToken(token);
+    if (!payload) return c.redirect("/login");
+
+    const org = await getOrg(sql, payload.org_id);
+    if (!org) return c.redirect("/login");
+
+    // TODO: detect cliInstalled (check if user has ever hit /auth/token from CLI)
+    // TODO: detect hasConnectedSession (check if user has any sessions as driver in DB)
+    const ctx = {
+      token,
+      userName: payload.name,
+      orgName: org.name,
+      email: payload.email,
+      slackConnected: !!org.slack_team_id,
+      cliInstalled: false,
+      hasConnectedSession: false,
+    };
+
+    // TODO: query cloud service for active sessions for this user
+    const activeSessions: unknown[] = [];
+
+    if (activeSessions.length > 0) {
+      return layout(renderActiveView(ctx, [], []), "Polaris");
+    }
+    return layout(renderSetupView(ctx), "Polaris");
+  });
+
+  // --- Profile ---
+
+  app.get("/profile", async (c) => {
+    const token = c.req.query("token");
+    if (!token) return c.redirect("/login");
+
+    const payload = await verifyToken(token);
+    if (!payload) return c.redirect("/login");
+
+    const org = await getOrg(sql, payload.org_id);
+    if (!org) return c.redirect("/login");
+
+    const ctx = {
+      token,
+      userName: payload.name,
+      orgName: org.name,
+      email: payload.email,
+      slackConnected: !!org.slack_team_id,
+      cliInstalled: false,
+      hasConnectedSession: false,
+    };
+
+    return layout(renderProfileView(ctx, payload.participant_id), "Polaris - Profile");
+  });
+
+  // --- Preview (dev only — all view states on one page) ---
+
+  app.get("/preview", (c) => {
+    const mockToken = "preview-token";
+    const base = { token: mockToken, userName: mockUser.name, orgName: mockOrg.name, email: mockUser.email };
+
+    const fresh       = { ...base, slackConnected: false, cliInstalled: false, hasConnectedSession: false };
+    const slackDone   = { ...base, slackConnected: true,  cliInstalled: false, hasConnectedSession: false };
+    const cliDone     = { ...base, slackConnected: true,  cliInstalled: true,  hasConnectedSession: false };
+    const allDone     = { ...base, slackConnected: true,  cliInstalled: true,  hasConnectedSession: true };
+
+    return layout(`
+      <div class="max-w-5xl mx-auto px-6 py-12">
+        <h1 class="text-3xl font-bold text-gray-900 mb-2">View Preview</h1>
+        <p class="text-gray-500 mb-12">All dashboard states rendered on one page for visual testing.</p>
+
+        <div class="space-y-16">
+          <section>
+            <h2 class="text-lg font-bold text-gray-700 mb-1">Setup: fresh (nothing done)</h2>
+            <p class="text-sm text-gray-400 mb-4">Brand new user, no steps completed.</p>
+            <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+              ${renderSetupView(fresh)}
+            </div>
+          </section>
+
+          <section>
+            <h2 class="text-lg font-bold text-gray-700 mb-1">Setup: Slack connected</h2>
+            <p class="text-sm text-gray-400 mb-4">Floor is live, CLI not installed yet.</p>
+            <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+              ${renderSetupView(slackDone)}
+            </div>
+          </section>
+
+          <section>
+            <h2 class="text-lg font-bold text-gray-700 mb-1">Setup: Slack + CLI done</h2>
+            <p class="text-sm text-gray-400 mb-4">Waiting for first session connection.</p>
+            <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+              ${renderSetupView(cliDone, mockDevices)}
+            </div>
+          </section>
+
+          <section>
+            <h2 class="text-lg font-bold text-gray-700 mb-1">Active view (multiple sessions)</h2>
+            <p class="text-sm text-gray-400 mb-4">User is driver in one session, advisor in others.</p>
+            <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+              ${renderActiveView(allDone, mockActiveSessions, mockProjects, mockDevices)}
+            </div>
+          </section>
+
+          <section>
+            <h2 class="text-lg font-bold text-gray-700 mb-1">Profile view</h2>
+            <p class="text-sm text-gray-400 mb-4">User identity, participant ID, API token.</p>
+            <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+              ${renderProfileView(allDone, mockUser.participant_id)}
+            </div>
+          </section>
+          <section>
+            <h2 class="text-lg font-bold text-gray-700 mb-1">Error: auth failed</h2>
+            <p class="text-sm text-gray-400 mb-4">Google OAuth rejected or expired.</p>
+            <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+              ${renderErrorView("Authentication failed.", "Try again", "/login")}
+            </div>
+          </section>
+
+          <section>
+            <h2 class="text-lg font-bold text-gray-700 mb-1">Error: expired OAuth state</h2>
+            <p class="text-sm text-gray-400 mb-4">Stale or replayed OAuth callback.</p>
+            <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+              ${renderErrorView("Invalid or expired OAuth state.", "Try again", "/login")}
+            </div>
+          </section>
+
+          <section>
+            <h2 class="text-lg font-bold text-gray-700 mb-1">Error: team creation failed</h2>
+            <p class="text-sm text-gray-400 mb-4">Database error during org creation.</p>
+            <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+              ${renderErrorView("Failed to create team. Please try again.", "Try again", "/login")}
+            </div>
+          </section>
+
+          <section>
+            <h2 class="text-lg font-bold text-gray-700 mb-1">Error: Slack not configured</h2>
+            <p class="text-sm text-gray-400 mb-4">Missing SLACK_CLIENT_ID env var.</p>
+            <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+              ${renderErrorView("Slack integration not configured. Set SLACK_CLIENT_ID and SLACK_CLIENT_SECRET.", "Back to dashboard", "/dashboard")}
+            </div>
+          </section>
+
+          <section>
+            <h2 class="text-lg font-bold text-gray-700 mb-1">Error: Slack OAuth failed</h2>
+            <p class="text-sm text-gray-400 mb-4">Slack rejected the OAuth flow.</p>
+            <div class="border border-gray-200 rounded-xl overflow-hidden shadow-sm">
+              ${renderErrorView("Slack connection failed: invalid_code", "Back to dashboard", "/dashboard")}
+            </div>
+          </section>
+        </div>
+      </div>
+    `, "Polaris - Preview");
+  });
+
+  // --- Slack OAuth ---
+
+  app.get("/slack/install", async (c) => {
+    const token = c.req.query("token");
+    const slackClientId = process.env.SLACK_CLIENT_ID;
+    if (!slackClientId) {
+      return layout(renderErrorView("Slack integration not configured. Set SLACK_CLIENT_ID and SLACK_CLIENT_SECRET.", "Back to dashboard", `/dashboard?token=${token}`));
+    }
+    const state = `${token}`;
+    const scopes = "channels:manage,channels:join,chat:write,channels:read,users:read,users:read.email";
+    const url = `https://slack.com/oauth/v2/authorize?client_id=${slackClientId}&scope=${scopes}&state=${state}&redirect_uri=${encodeURIComponent(process.env.SLACK_REDIRECT_URI ?? "http://localhost:3000/slack/callback")}`;
+    return c.redirect(url);
+  });
+
+  app.get("/slack/callback", async (c) => {
+    const code = c.req.query("code");
+    const state = c.req.query("state");
+    if (!code || !state) return layout(renderErrorView("Missing code or state.", "Back to dashboard", "/login"));
+
+    const payload = await verifyToken(state);
+    if (!payload) return c.redirect("/login");
+
+    const slackRes = await fetch("https://slack.com/api/oauth.v2.access", {
+      method: "POST",
+      headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      body: new URLSearchParams({
+        client_id: process.env.SLACK_CLIENT_ID ?? "",
+        client_secret: process.env.SLACK_CLIENT_SECRET ?? "",
+        code,
+        redirect_uri: process.env.SLACK_REDIRECT_URI ?? "http://localhost:3000/slack/callback",
+      }),
+    });
+    const slackData = (await slackRes.json()) as { ok: boolean; team?: { id: string }; access_token?: string; error?: string };
+
+    if (!slackData.ok) {
+      // Check if Slack is already connected (e.g., stale callback reload)
+      const org = await getOrg(sql, payload.org_id);
+      if (org?.slack_team_id) {
+        return c.redirect(`/dashboard?token=${state}`);
+      }
+      return layout(renderErrorView(`Slack connection failed: ${slackData.error}`, "Try again", `/slack/install?token=${state}`));
+    }
+
+    // Create the #polaris system channel
+    let systemChannelId: string | undefined;
+    try {
+      systemChannelId = await createSystemChannel(slackData.access_token!, payload.email);
+      await postSystemEvent(
+        slackData.access_token!,
+        systemChannelId,
+        `:star: *${payload.name}* connected this Slack workspace to Polaris`,
+        `Organization: ${payload.org_id}`
+      );
+    } catch {
+      // Non-fatal — Slack is connected even if channel creation fails
+    }
+
+    await setOrgSlack(sql, payload.org_id, slackData.team!.id, slackData.access_token!, systemChannelId);
+    return c.redirect(`/dashboard?token=${state}`);
+  });
+
+  // --- CLI auth flow ---
+
+  // CLI calls this with a local callback port. We redirect to Google SSO
+  // with state that encodes the CLI callback URL.
+  app.get("/auth/cli", async (c) => {
+    const port = c.req.query("port");
+    if (!port) return c.json({ error: "port is required" }, 400);
+
+    const google = getGoogle();
+    const state = crypto.randomUUID();
+    const codeVerifier = crypto.randomUUID();
+    oauthStates.set(state, { type: "login", codeVerifier, timestamp: Date.now() });
+    // Store CLI callback port in a separate map
+    cliCallbackPorts.set(state, Number(port));
+    const url = google.createAuthorizationURL(state, codeVerifier, ["openid", "email", "profile"]);
+    return c.redirect(url.toString());
+  });
+
+  // After Google SSO, if state has a CLI callback port, redirect token there
+  // (This is handled in the main /auth/google/callback by checking cliCallbackPorts)
+
+  // --- Token validation endpoint ---
+
+  app.get("/auth/token", async (c) => {
+    const token = c.req.query("token");
+    if (!token) return c.json({ error: "No token" }, 400);
+    const payload = await verifyToken(token);
+    if (!payload) return c.json({ error: "Invalid token" }, 401);
+    return c.json(payload);
+  });
+
+  return app;
+}

package/src/web/fixtures.ts

@@ -0,0 +1,121 @@
+// --- Seed data for dev, test, and /preview ---
+
+export interface DeviceFixture {
+  name: string;
+  lastSeen: string;
+  os: string;
+  activeSession?: string;
+}
+
+export interface SessionFixture {
+  name: string;
+  project: string;
+  driver: string;
+  role: "driver" | "advisor";
+  description: string;
+  participants: Array<{ id: string; role: "driver" | "advisor" }>;
+  eventCount: number;
+  connectedSince: string;
+}
+
+export interface ProjectFixture {
+  name: string;
+  sessions: SessionFixture[];
+  slackChannel: string;
+}
+
+export const mockUser = {
+  name: "Manu Bansal",
+  email: "manu@lightup.ai",
+  participant_id: "user:manu",
+  org_id: "org-lightup",
+};
+
+export const mockOrg = {
+  id: "org-lightup",
+  name: "Lightup",
+  domain: "lightup.ai",
+  slack_team_id: "T0123SLACK",
+  slack_bot_token: null,
+};
+
+export const mockOrgNoSlack = {
+  ...mockOrg,
+  slack_team_id: null,
+};
+
+export const mockProjects: ProjectFixture[] = [
+  {
+    name: "polaris",
+    slackChannel: "#polaris",
+    sessions: [
+      {
+        name: "auth",
+        project: "polaris",
+        driver: "user:manu",
+        role: "driver",
+        description: "Google SSO + JWT auth",
+        participants: [
+          { id: "user:manu", role: "driver" },
+          { id: "agent:security-reviewer", role: "advisor" },
+        ],
+        eventCount: 42,
+        connectedSince: "2026-06-08T10:00:00.000Z",
+      },
+      {
+        name: "slack-bridge",
+        project: "polaris",
+        driver: "user:krishna",
+        role: "advisor",
+        description: "Slack floor integration",
+        participants: [
+          { id: "user:krishna", role: "driver" },
+          { id: "user:manu", role: "advisor" },
+          { id: "agent:test-writer", role: "advisor" },
+        ],
+        eventCount: 18,
+        connectedSince: "2026-06-08T11:30:00.000Z",
+      },
+    ],
+  },
+  {
+    name: "data-pipeline",
+    slackChannel: "#data-pipeline",
+    sessions: [
+      {
+        name: "ingestion",
+        project: "data-pipeline",
+        driver: "agent:dq-checker",
+        role: "advisor",
+        description: "S3-to-Snowflake rewrite",
+        participants: [
+          { id: "agent:dq-checker", role: "driver" },
+          { id: "user:manu", role: "advisor" },
+        ],
+        eventCount: 7,
+        connectedSince: "2026-06-08T09:15:00.000Z",
+      },
+    ],
+  },
+];
+
+export const mockActiveSessions: SessionFixture[] = mockProjects
+  .flatMap((p) => p.sessions)
+  .filter((s) => s.participants.some((p) => p.id === mockUser.participant_id));
+
+export const mockEmptySessions: SessionFixture[] = [];
+
+export const mockDevices: DeviceFixture[] = [
+  {
+    name: "Manu's MacBook Pro",
+    lastSeen: "2026-06-08T18:42:00.000Z",
+    os: "macOS",
+    activeSession: "polaris/auth",
+  },
+  {
+    name: "Manu's iMac",
+    lastSeen: "2026-06-08T16:10:00.000Z",
+    os: "macOS",
+    activeSession: undefined,
+  },
+];

package/src/web/layout.ts

@@ -0,0 +1,68 @@
+// --- Shared layout, nav, and HTML shell ---
+
+export interface NavOpts {
+  userName?: string;
+  orgName?: string;
+  email?: string;
+}
+
+export function layout(body: string, title = "Polaris"): Response {
+  return new Response(
+    `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${title}</title>
+<script src="https://cdn.tailwindcss.com"></script>
+<script>
+tailwind.config = {
+  theme: {
+    extend: {
+      colors: {
+        polaris: { 50: '#f0f4ff', 100: '#dbe4ff', 200: '#bac8ff', 300: '#91a7ff', 400: '#748ffc', 500: '#5c7cfa', 600: '#4c6ef5', 700: '#4263eb', 800: '#3b5bdb', 900: '#364fc7' }
+      }
+    }
+  }
+}
+</script>
+</head>
+<body class="bg-gray-50 text-gray-900 antialiased">${body}</body></html>`,
+    { headers: { "Content-Type": "text/html" } }
+  );
+}
+
+export function nav(token?: string, opts?: NavOpts): string {
+  const right = token
+    ? `<div class="relative group">
+         <button class="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-gray-100 transition">
+           <div class="w-7 h-7 rounded-full bg-polaris-600 flex items-center justify-center text-white text-xs font-bold">${(opts?.userName ?? "U").charAt(0).toUpperCase()}</div>
+           <div class="text-left">
+             <p class="text-xs font-medium text-gray-900 leading-tight">${opts?.userName ?? ""}</p>
+             <p class="text-[10px] text-gray-400 leading-tight">${opts?.orgName ?? ""}</p>
+           </div>
+           <svg class="w-3.5 h-3.5 text-gray-400 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
+         </button>
+         <div class="hidden group-hover:block absolute right-0 top-full mt-1 w-48 bg-white border border-gray-200 rounded-lg shadow-lg py-1 z-50">
+           <div class="px-3 py-2 border-b border-gray-100">
+             <p class="text-xs font-medium text-gray-900">${opts?.userName ?? ""}</p>
+             <p class="text-[10px] text-gray-500">${opts?.email ?? ""}</p>
+             <p class="text-[10px] text-gray-400">${opts?.orgName ?? ""}</p>
+           </div>
+           <a href="/dashboard?token=${token}" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50">Dashboard</a>
+           <a href="/profile?token=${token}" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50">Profile</a>
+           <div class="border-t border-gray-100"></div>
+           <a href="/" class="block px-3 py-2 text-sm text-gray-700 hover:bg-gray-50">Log out</a>
+         </div>
+       </div>`
+    : `<a href="/login" class="text-sm font-medium text-polaris-700 hover:text-polaris-800">Sign in</a>`;
+  return `
+    <nav class="border-b border-gray-200 bg-white">
+      <div class="max-w-5xl mx-auto px-6 h-14 flex items-center justify-between">
+        <a href="${token ? `/dashboard?token=${token}` : "/"}" class="text-lg font-bold tracking-tight text-gray-900">Polaris</a>
+        <div class="flex items-center gap-4">${right}</div>
+      </div>
+    </nav>`;
+}
+
+export const slackIcon = `<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zm1.271 0a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zm0 1.271a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zm10.124 2.521a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.52 2.521h-2.522V8.834zm-1.271 0a2.528 2.528 0 0 1-2.521 2.521 2.528 2.528 0 0 1-2.521-2.521V2.522A2.528 2.528 0 0 1 15.165 0a2.528 2.528 0 0 1 2.522 2.522v6.312zm-2.522 10.124a2.528 2.528 0 0 1 2.522 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.521-2.52v-2.523h2.521zm0-1.271a2.527 2.527 0 0 1-2.521-2.521 2.528 2.528 0 0 1 2.521-2.521h6.313A2.528 2.528 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.522h-6.313z"/></svg>`;