safetynet/apps/browser/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; connect-src 'none'; img-src 'self' data:; object-src 'none'; base-uri 'none'; form-action 'none'">
    <title>
      S Browser
    </title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body data-theme="auto" data-tab-mode="separate">

    <!-- Trusted browser chrome: native layout uses this measured height. -->
    <header id="chrome">
      <div class="toolbar">
        <div class="toolbar-leading">
          <div class="traffic-lights" aria-label="Window controls">
            <button id="window-close" class="traffic close" aria-label="Close window" title="Close">
              <img src="icons/x.svg" alt="">
            </button>
            <button id="window-minimize" class="traffic minimize" aria-label="Minimize window" title="Minimize">
              <img src="icons/minus.svg" alt="">
            </button>
            <button id="window-maximize" class="traffic maximize" aria-label="Maximize or restore window" title="Maximize">
              <img src="icons/maximize-2.svg" alt="">
            </button>
          </div>
          <button id="sidebar-toggle" class="icon-button" title="Show sidebar" aria-label="Toggle sidebar" aria-expanded="false">
            <img src="icons/panel-left.svg" alt="">
          </button>
          <button type="button" id="back" class="icon-button" aria-label="Back" title="Back">
            <img src="icons/chevron-left.svg" alt="">
          </button>
          <button type="button" id="forward" class="icon-button" aria-label="Forward" title="Forward">
            <img src="icons/chevron-right.svg" alt="">
          </button>
        </div>
        <form id="address-form">
          <img class="address-lock" src="icons/globe.svg" alt="">
          <input id="address" aria-label="Website address" aria-describedby="managed" placeholder="Enter website name or address" autocomplete="off" spellcheck="false">
          <button type="button" id="reload" class="icon-button" aria-label="Reload" title="Reload">
            <img src="icons/rotate-cw.svg" alt="">
          </button>
          <button type="submit" class="visually-hidden">
            Go
          </button>
        </form>
        <div class="toolbar-trailing">
          <button id="share-url" class="icon-button" title="Share page link" aria-label="Share page link">
            <img src="icons/share.svg" alt="">
          </button>
          <button id="new-tab" class="icon-button" title="New tab" aria-label="New tab">
            <img src="icons/plus.svg" alt="">
          </button>
          <button id="tab-overview" class="icon-button" title="Tab overview" aria-label="Tab overview" aria-expanded="false">
            <img src="icons/squares-unite.svg" alt="">
          </button>
          <button id="quick-ai" class="icon-button" hidden disabled title="AI workspace" aria-label="AI workspace"><img src="icons/sparkles.svg" alt=""></button>
          <button id="quick-passwords" class="icon-button" hidden disabled title="Passwords" aria-label="Passwords"><img src="icons/key-round.svg" alt=""></button>
          <button id="quick-inspect" class="icon-button" hidden disabled title="Inspect document locally" aria-label="Inspect document locally"><img src="icons/scan-text.svg" alt=""></button>
          <button id="quick-agents" class="icon-button" hidden disabled title="Local agents" aria-label="Local agents"><img src="icons/bot.svg" alt=""></button>
          <button id="tools-toggle" hidden disabled class="icon-button" title="Browser tools and appearance" aria-label="Browser tools and appearance" aria-expanded="false" aria-controls="tools-menu">
            <img src="icons/ellipsis.svg" alt="">
          </button>
        </div>
      </div>
      <div class="tab-row">
        <div id="tab-strip" aria-label="Saved browsing tabs">
          <button class="browser-tab active">
            Start Page
          </button>
        </div>
        <div class="security-state">
          <img src="icons/shield-check.svg" alt="">
          <span id="managed">
            Enrollment required
          </span>
        </div>
      </div>
    </header>
    <div id="tools-menu" class="glass-popover" hidden>
      <p class="menu-caption">
        WORKSPACE TOOLS
      </p>
      <button id="ai-toggle" class="menu-item" aria-expanded="false">
        <img src="icons/sparkles.svg" alt="">
        AI workspace
      </button>
      <button id="sidebar" class="menu-item" aria-expanded="false">
        <img src="icons/panel-right.svg" alt="">
        Toggle AI sidebar
      </button>
      <button id="passwords" class="menu-item" aria-expanded="false">
        <img src="icons/key-round.svg" alt="">
        Passwords
      </button>
      <button id="inspect" class="menu-item" title="Inspect document locally">
        <img src="icons/scan-text.svg" alt="">
        Inspect document / media
      </button>
      <button id="agents" class="menu-item">
        <img src="icons/bot.svg" alt="">
        Local agents
      </button>
      <button id="bookmark" class="menu-item">
        <img src="icons/bookmark-plus.svg" alt="">
        Bookmark this page
      </button>
      <button id="bookmark-manager-open" class="menu-item"><img src="icons/bookmark.svg" alt="">Manage bookmarks</button>
      <button id="reading-add" class="menu-item">
        <img src="icons/book-open.svg" alt="">
        Save to Reading List
      </button>
      <section id="appearance-section" hidden>
      <div class="menu-divider">
      </div>
      <p class="menu-caption">APPEARANCE</p>
      <div id="settings">
        <label for="theme-mode">
          Theme
        </label>
        <select id="theme-mode">
          <option value="auto">
            System
          </option>
          <option value="light">
            Light
          </option>
          <option value="dark">
            Dark
          </option>
        </select>
        <label for="accent-mode">Accent</label>
        <select id="accent-mode">
          <option value="blue">Blue</option>
          <option value="teal">Teal</option>
          <option value="violet">Violet</option>
        </select>
        <label for="tab-mode">
          Tab layout
        </label>
        <select id="tab-mode">
          <option value="separate">
            Separate
          </option>
          <option value="compact">
            Compact
          </option>
        </select>
      </div>
      <p id="settings-managed" class="appearance-status" hidden>Appearance is set by your administrator.</p>
      <p id="theme-status" class="appearance-status" aria-live="polite">Follows your system appearance.</p>
      </section>
    </div>

    <!-- Local sidebar metadata; remote website content is a separate native view. -->
    <aside id="library" hidden>
      <div class="library-brand">
        <div class="brand-monogram">
          S
        </div>
        <div>
          <strong id="brand">
            S Browser
          </strong>
          <span>
            Managed workspace
          </span>
        </div>
      </div>
      <nav aria-label="Browser library">
        <details class="library-section" open>
          <summary class="library-item">
            <img src="icons/star.svg" alt="">
            Favorites
          </summary>
          <div id="library-favorites" class="library-links">
          </div>
        </details>
        <details class="library-section">
          <summary class="library-item">
            <img src="icons/bookmark.svg" alt="">
            Bookmarks
          </summary>
          <div id="library-bookmarks" class="library-links">
          </div>
        </details>
        <details class="library-section">
          <summary class="library-item">
            <img src="icons/book-open.svg" alt="">
            Reading List
          </summary>
          <div id="library-reading" class="library-links">
          </div>
        </details>
        <div class="library-heading">
          <span>
            TAB GROUPS
          </span>
        </div>
        <div class="group-controls">
          <input id="group-name" placeholder="New group name" aria-label="New tab group name" maxlength="80" autocomplete="off">
          <button id="group-add" class="icon-button" aria-label="Add tab group">
            <img src="icons/plus.svg" alt="">
          </button>
        </div>
        <div id="library-groups">
        </div>
        <div class="library-heading">
          <span>
            OPEN TABS
          </span>
        </div>
        <div id="library-tabs">
        </div>
      </nav>
      <div class="library-footer">
        <img src="icons/shield-check.svg" alt="">
        <span>
          Managed browser workspace
        </span>
      </div>
    </aside>

    <!-- Trusted start page, shown only while the native website view is hidden. -->
    <main id="start-page" hidden>
      <div class="start-content">
        <img id="start-company-logo" class="company-logo start-company-logo" alt="" hidden>
        <p id="start-brand-name" class="start-eyebrow">
          S BROWSER
        </p>
        <h1 id="start-title">
          Your space to explore.
        </h1>
        <p id="start-subtitle" class="start-subtitle" hidden></p>
        <section id="company-news" class="start-section" hidden aria-labelledby="company-news-title">
          <div class="section-title"><h2 id="company-news-title">Company news</h2></div>
          <div id="company-news-items" class="company-news-items"></div>
          <p id="company-news-empty" class="company-news-empty">Company news is currently unavailable.</p>
        </section>
        <section class="start-section">
          <div class="section-title">
            <h2>
              Favorites
            </h2>
            <button id="favorites-manage" class="text-button">Manage bookmarks</button>
          </div>
          <div id="favorites-grid" class="favorites-grid">
          </div>
          <p id="favorites-empty" hidden>
            Bookmark a page to add it to your favorites.
          </p>
        </section>
        <section class="start-section">
          <div class="section-title">
            <h2>
              Recently visited
            </h2>
          </div>
          <div id="recent-list" class="recent-list">
          </div>
        </section>
        <div class="privacy-card">
          <div class="privacy-icon">
            <img src="icons/shield-check.svg" alt="">
          </div>
          <div>
            <strong>
              A protected workspace.
            </strong>
            <p>
              Your organization's rules follow you as you browse.
            </p>
          </div>
        </div>
        <p class="session-note">
          Each tab keeps its own managed browsing context.
        </p>
      </div>
    </main>

    <!-- Navigation-record overview; inactive records are not running isolated pages. -->
    <section id="overview" hidden aria-label="Tab overview">
      <div class="overview-heading">
        <h1>
          Your tabs
        </h1>
        <button id="overview-close" class="icon-button" aria-label="Close tab overview">
          <img src="icons/x.svg" alt="">
        </button>
      </div>
      <p class="overview-note">
        Pick up where you left off.
      </p>
      <div id="overview-grid">
      </div>
    </section>

    <!-- Enterprise enrollment and paused-access state. -->
    <main id="welcome">
      <div class="card">
        <div class="welcome-mark">
          <img src="icons/shield-check.svg" alt="">
        </div>
        <p class="eyebrow">
          YOUR MANAGED WORKSPACE
        </p>
        <h1>
          A safer place to work.
        </h1>
        <p id="message">
          Connect to your organization for secure browsing and approved AI.
        </p>
        <div id="enrollment">
          <label>
            Management server
            <input id="server" value="http://127.0.0.1:4310" type="url">
          </label>
          <label>
            Enrollment code
            <input id="code" type="password" autocomplete="off" placeholder="Provided by your administrator">
          </label>
          <div class="actions">
            <button id="enroll">
              Connect browser
            </button>
            <button id="sso" class="secondary">
              Enterprise SSO
            </button>
          </div>
          <small>
            Your organization's management server supplies the security policy for this browser.
          </small>
        </div>
        <p id="error" role="status" aria-live="polite">
        </p>
      </div>
    </main>

    <!-- Approved AI sidebar; retains existing security and inspection controls. -->
    <aside id="ai" hidden>
      <div class="panel-title">
        <div>
          <p class="eyebrow">
            APPROVED BY YOUR ORGANIZATION
          </p>
          <h2>
            AI workspace
          </h2>
        </div>
        <button id="ai-close" class="icon-button" aria-label="Close AI panel">
          <img src="icons/x.svg" alt="">
        </button>
      </div>
      <p class="panel-description">
        Prompts are inspected before reaching your approved model. Page content is shared only when you choose.
      </p>
      <div id="conversation" aria-live="polite">
        <div class="empty-chat">
          <img src="icons/sparkles.svg" alt="">
          <h3>
            Make room for better work.
          </h3>
          <p>
            Ask a question, draft an idea, or inspect a document locally.
          </p>
        </div>
      </div>
      <form id="ai-form">
        <label class="visually-hidden" for="prompt">
          Prompt
        </label>
        <textarea id="prompt" placeholder="Ask your company AI…" maxlength="100000">
        </textarea>
        <div class="composer-footer">
          <span>
            Policy checked
          </span>
          <button id="send" type="submit">
            Send
            <img src="icons/arrow-up.svg" alt="">
          </button>
        </div>
      </form>
    </aside>

    <!-- Local password-vault UI: passwords remain masked and never rendered in lists. -->
    <aside id="vault" hidden>
      <div class="panel-title">
        <div>
          <p class="eyebrow">
            PRIVATE TO THIS DEVICE
          </p>
          <h2>
            Passwords
          </h2>
        </div>
        <button id="vault-close" class="icon-button" aria-label="Close passwords">
          <img src="icons/x.svg" alt="">
        </button>
      </div>
      <p id="vault-description" class="panel-description">
        Unlock your encrypted vault to use a saved login.
      </p>
      <p id="vault-error" role="status" aria-live="polite">
      </p>
      <form id="vault-access">
        <label id="master-label" for="vault-master">
          Master password
        </label>
        <input id="vault-master" type="password" autocomplete="current-password" minlength="16" maxlength="1024" required>
        <label id="vault-confirm-label" for="vault-confirm" hidden>
          Confirm master password
        </label>
        <input id="vault-confirm" type="password" autocomplete="new-password" minlength="16" maxlength="1024" hidden>
        <button id="vault-access-submit" type="submit">
          Unlock vault
        </button>
        <small id="vault-access-note">
          Use at least 16 characters. Your master password is never saved.
        </small>
      </form>
      <div id="vault-open" hidden>
        <div class="vault-actions">
          <span id="vault-state">
            Unlocked
          </span>
          <button id="vault-lock" class="secondary">
            Lock
          </button>
        </div>
        <div id="vault-list">
        </div>
        <details id="vault-add">
          <summary>
            Add a login
          </summary>
          <form id="vault-save">
            <label>
              Website origin
              <input id="vault-origin" type="url" placeholder="https://company.example" required autocomplete="off" maxlength="4096">
            </label>
            <label>
              Label
              <input id="vault-label" placeholder="Work account" maxlength="100" autocomplete="off">
            </label>
            <label>
              Username
              <input id="vault-username" autocomplete="off" maxlength="512">
            </label>
            <label>
              Password
              <input id="vault-password" type="password" autocomplete="new-password" maxlength="1024" required>
            </label>
            <div class="actions">
              <button id="vault-generate" type="button" class="secondary">
                Generate
              </button>
              <button id="vault-save-submit" type="submit">
                Save login
              </button>
            </div>
          </form>
        </details>
        <small>
          Logins fill only when you click Fill. Automatic page-load filling is disabled.
        </small>
      </div>
    </aside>
    <dialog id="bookmark-editor" aria-labelledby="bookmark-editor-title">
      <form id="bookmark-form">
        <h2 id="bookmark-editor-title">Add bookmark</h2>
        <p class="bookmark-notice">Bookmarks are managed by your company. Administrators may access them when enabled by policy.</p>
        <label>Title<input id="bookmark-title" maxlength="120" required autocomplete="off"></label>
        <label>Website URL<input id="bookmark-url" type="url" maxlength="2048" required autocomplete="off"></label>
        <label>Folder<input id="bookmark-folder" maxlength="80" autocomplete="off"></label>
        <p id="bookmark-editor-error" role="alert"></p>
        <div class="actions"><button id="bookmark-cancel" type="button" class="secondary">Cancel</button><button id="bookmark-save" type="submit">Save bookmark</button></div>
      </form>
    </dialog>
    <script defer src="renderer.js">
    </script>
  <dialog id="bookmark-manager" aria-labelledby="bookmark-manager-title">
      <header class="manager-header"><div><p class="manager-eyebrow">YOUR LIBRARY</p><h2 id="bookmark-manager-title">Bookmarks</h2></div><button id="bookmark-manager-close" class="icon-button" aria-label="Close bookmark manager">×</button></header>
      <div class="manager-toolbar"><input id="bookmark-search" type="search" placeholder="Search titles, websites or folders" aria-label="Search bookmarks"><button id="manager-add">Add bookmark</button><button id="manager-ai" disabled>Organize with AI</button></div>
      <p id="manager-policy" class="bookmark-notice"></p><div id="manager-list" class="manager-list"></div><p id="manager-empty" hidden>No matching bookmarks.</p><p id="manager-error" role="alert"></p>
      <section id="manager-proposal" hidden aria-label="Organization preview"><h3>Review suggested changes</h3><p>Only your selected bookmarks change. Company bookmarks are managed centrally. Your approved model receives only personal titles and website domains.</p><div id="manager-diff"></div><button id="manager-apply">Apply changes</button><button id="manager-discard">Discard</button></section>
    </dialog>
  </body>
</html>