Implement managed browser security, individual agents and observability

apps/browser/index.html

@@ -3,7 +3,7 @@
   <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'; object-src 'none'; base-uri 'none'; form-action 'none'">
+    <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>
@@ -107,6 +107,7 @@
         <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
@@ -225,20 +226,25 @@
     <!-- Trusted start page, shown only while the native website view is hidden. -->
     <main id="start-page" hidden>
       <div class="start-content">
-        <p class="start-eyebrow">
+        <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>
+        <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>
-            <span>
-              Keep what matters close.
-            </span>
+            <button id="favorites-manage" class="text-button">Manage bookmarks</button>
           </div>
           <div id="favorites-grid" class="favorites-grid">
           </div>
@@ -473,8 +479,14 @@
         <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 src="renderer.js">
+    <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>