ltcai 2.2.7 → 3.1.0

package/static/workspace.css

@@ -730,8 +730,7 @@ textarea {
 
 :root[data-lt-theme="dark"] main {
   background:
-    radial-gradient(circle at 80% 14%, rgba(167, 139, 250, 0.12), transparent 30%),
-    linear-gradient(180deg, var(--bg) 0%, #10122c 100%);
+    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
 }
 
 :root[data-lt-theme="dark"] .workspace-band,
@@ -781,3 +780,342 @@ textarea {
   background: rgba(244, 113, 113, 0.16);
   color: #fca5a5;
 }
+
+/* ── Product shell redesign (frontend-only) ─────────────────────────────── */
+.workspace-page {
+  background: var(--bg);
+  color: var(--ink);
+}
+
+.workspace-page::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  background:
+    linear-gradient(90deg, rgba(12, 92, 115, 0.035) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(12, 92, 115, 0.035) 1px, transparent 1px);
+  background-size: 36px 36px;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), transparent 72%);
+}
+
+.workspace-shell {
+  grid-template-columns: minmax(240px, 284px) minmax(0, 1fr);
+  background: var(--app-bg);
+}
+
+.workspace-rail {
+  background: var(--rail-bg);
+  color: var(--rail-ink);
+  border-right: 1px solid var(--rail-line);
+  box-shadow: none;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+
+.rail-brand {
+  min-height: 48px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid var(--rail-line);
+}
+
+.rail-brand span {
+  line-height: 1;
+}
+
+.rail-brand small {
+  margin-left: auto;
+  color: var(--rail-ink-soft);
+  font-size: 10px;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.rail-section-label {
+  color: var(--rail-ink-soft);
+  display: block;
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0.1em;
+  padding: 8px 12px 4px;
+  text-transform: uppercase;
+}
+
+.workspace-rail nav a,
+.rail-links a {
+  border: 1px solid transparent;
+  min-height: 42px;
+}
+
+.workspace-rail nav a.active,
+.workspace-rail nav a:hover,
+.rail-links a:hover {
+  background: var(--rail-hover);
+  border-color: var(--rail-line);
+}
+
+.workspace-shell:not([data-admin-available="true"]) .admin-navigation {
+  display: none;
+}
+
+main {
+  gap: 16px;
+  padding: 20px clamp(16px, 2vw, 28px) 36px;
+}
+
+.workspace-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 4;
+  margin: -20px calc(clamp(16px, 2vw, 28px) * -1) 0;
+  padding: 16px clamp(16px, 2vw, 28px);
+  background: color-mix(in srgb, var(--surface-elevated) 94%, transparent);
+  border-bottom: 1px solid var(--line);
+  backdrop-filter: blur(18px);
+}
+
+.topbar-subtitle {
+  color: var(--muted);
+  font-size: 13px;
+  line-height: 1.45;
+  margin: 6px 0 0;
+  max-width: 760px;
+}
+
+.top-actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  min-width: min(100%, 560px);
+}
+
+.global-mode-switcher {
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(76px, 1fr);
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: var(--surface-2);
+}
+
+.global-mode-switcher button {
+  min-height: 34px;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 800;
+  padding: 0 10px;
+}
+
+.global-mode-switcher button.active {
+  background: var(--accent);
+  color: #fff;
+}
+
+.global-mode-switcher button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
+.chrome-select {
+  width: auto;
+  min-width: 108px;
+  min-height: 38px;
+  color: var(--ink);
+  background: var(--surface);
+}
+
+.workspace-switcher {
+  background: var(--surface);
+  border-color: var(--line);
+  color: var(--ink);
+}
+
+.workspace-switcher select {
+  color: var(--ink);
+  max-width: min(220px, 36vw);
+}
+
+.workspace-role-pill {
+  color: var(--muted);
+  opacity: 1;
+}
+
+.metric-grid {
+  grid-template-columns: repeat(4, minmax(150px, 1fr));
+}
+
+.metric-card,
+.workspace-panel,
+.workspace-band {
+  background: var(--surface);
+  border-color: var(--line);
+  border-radius: 8px;
+  box-shadow: none;
+}
+
+.metric-card {
+  border-left: 3px solid var(--accent);
+}
+
+.metric-card i,
+.health-card i {
+  color: var(--accent-2);
+}
+
+.workspace-band,
+.workspace-panel {
+  padding: 18px;
+}
+
+.section-head {
+  border-bottom: 1px solid var(--line);
+  margin: -2px 0 14px;
+  padding-bottom: 12px;
+}
+
+.eyebrow {
+  color: var(--accent);
+}
+
+.primary-action {
+  background: var(--accent);
+}
+
+.secondary-action,
+.tab.active,
+.switch-chip.active {
+  background: var(--accent-soft);
+  color: var(--accent);
+  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
+}
+
+.icon-action,
+.small-action,
+.step-chip,
+.tab,
+.switch-chip,
+.list-item,
+.health-card,
+.capability-card {
+  background: var(--surface-2);
+  border-color: var(--line);
+}
+
+.list-item,
+.health-card,
+.capability-card {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
+}
+
+:root[data-lt-theme="dark"] .list-item,
+:root[data-lt-theme="dark"] .health-card,
+:root[data-lt-theme="dark"] .capability-card {
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.status-pill {
+  background: var(--accent-soft);
+  color: var(--accent);
+}
+
+.status-complete {
+  background: color-mix(in srgb, var(--success) 16%, transparent);
+  color: var(--success);
+}
+
+.status-running {
+  background: color-mix(in srgb, var(--warning) 18%, transparent);
+  color: var(--warning);
+}
+
+.status-failed {
+  background: color-mix(in srgb, var(--danger) 16%, transparent);
+  color: var(--danger);
+}
+
+.importance-bar {
+  background: var(--surface-3);
+}
+
+.importance-bar span,
+.skill-progress-track span {
+  background: linear-gradient(90deg, var(--accent), var(--accent-2));
+}
+
+.code-box,
+.state-box,
+.toast {
+  background: #101820;
+  border-color: rgba(148, 163, 184, 0.22);
+}
+
+@media (min-width: 1600px) {
+  main {
+    max-width: 1680px;
+    width: 100%;
+  }
+
+  .metric-grid,
+  .health-grid {
+    grid-template-columns: repeat(4, minmax(180px, 1fr));
+  }
+}
+
+@media (max-width: 1180px) {
+  .workspace-topbar {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .top-actions {
+    justify-content: flex-start;
+    width: 100%;
+  }
+}
+
+@media (max-width: 860px) {
+  .workspace-shell {
+    grid-template-columns: 1fr;
+  }
+
+  .workspace-rail {
+    position: relative;
+    height: auto;
+    max-height: none;
+  }
+
+  .workspace-rail nav,
+  .rail-links {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .rail-section-label,
+  .rail-brand {
+    grid-column: 1 / -1;
+  }
+
+  .workspace-topbar {
+    position: static;
+    margin-top: 0;
+  }
+
+  .global-mode-switcher {
+    grid-auto-columns: minmax(88px, 1fr);
+    width: 100%;
+  }
+
+  .workspace-switcher,
+  .chrome-select,
+  .primary-action {
+    width: 100%;
+  }
+
+  .workspace-switcher select {
+    max-width: none;
+  }
+}

package/static/workspace.html

@@ -4,58 +4,77 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, interactive-widget=resizes-content">
   <title>Lattice AI Workspace OS</title>
-  <script src="/static/scripts/ux.js?v=2.2.7"></script>
+  <script src="/static/scripts/ux.js"></script>
   <link rel="manifest" href="/manifest.json">
   <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32.png">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
-  <link rel="stylesheet" href="/static/css/tokens.css?v=2.2.7">
-  <link rel="stylesheet" href="/static/workspace.css?v=2.2.7">
-  <link rel="stylesheet" href="/static/css/responsive.css?v=2.2.7">
+  <link rel="stylesheet" href="/static/css/tokens.css">
+  <link rel="stylesheet" href="/static/workspace.css">
+  <link rel="stylesheet" href="/static/css/responsive.css">
 </head>
-<body>
-  <div class="workspace-shell">
+<body class="workspace-page">
+  <div class="workspace-shell" data-workspace-mode="basic">
     <aside class="workspace-rail">
       <a class="rail-brand" href="/workspace" aria-label="Lattice AI Workspace OS">
         <img src="/static/icons/icon-192.png" alt="">
         <span>Lattice AI</span>
+        <small>Workspace OS</small>
       </a>
-      <nav>
-        <a class="active" href="#overview"><i class="ti ti-layout-dashboard"></i><span>Overview</span></a>
-        <a href="#health"><i class="ti ti-heartbeat"></i><span>Health</span></a>
-        <a href="#graph"><i class="ti ti-chart-dots-3"></i><span>Graph</span></a>
-        <a href="#graph-explorer"><i class="ti ti-affiliate"></i><span>Explorer</span></a>
-        <a href="#snapshots"><i class="ti ti-stack-2"></i><span>Snapshots</span></a>
-        <a href="#memory"><i class="ti ti-book-2"></i><span>Memory</span></a>
-        <a href="#agents"><i class="ti ti-route-alt-left"></i><span>Agents</span></a>
-        <a href="#workflows"><i class="ti ti-git-branch"></i><span>Workflow</span></a>
-        <a href="#skills"><i class="ti ti-puzzle"></i><span>Skills</span></a>
-        <a href="#timeline"><i class="ti ti-timeline-event"></i><span>Timeline</span></a>
-        <a href="#enterprise"><i class="ti ti-building-skyscraper"></i><span>Editions</span></a>
+      <nav aria-label="Primary workspace navigation">
+        <span class="rail-section-label">Primary</span>
+        <a class="active" href="#overview"><i class="ti ti-home"></i><span>Home</span></a>
+        <a href="/chat"><i class="ti ti-message-circle"></i><span>Chat</span></a>
+        <a href="/graph"><i class="ti ti-chart-dots-3"></i><span>Knowledge Graph</span></a>
+        <a href="#memory"><i class="ti ti-files"></i><span>Files</span></a>
+        <a href="#workflows"><i class="ti ti-git-branch"></i><span>Pipeline</span></a>
+        <a href="#memory"><i class="ti ti-device-desktop"></i><span>My Computer</span></a>
+        <a href="#graph-explorer"><i class="ti ti-search"></i><span>Search</span></a>
+        <a href="/chat?new=1"><i class="ti ti-plus"></i><span>New Chat</span></a>
+      </nav>
+      <nav class="admin-navigation" aria-label="Administration navigation">
+        <span class="rail-section-label">Admin</span>
+        <a href="/admin#users" data-admin-link><i class="ti ti-users"></i><span>User Management</span></a>
+        <a href="/admin#permissions" data-admin-link><i class="ti ti-key"></i><span>Permissions</span></a>
+        <a href="/admin#audit" data-admin-link><i class="ti ti-report-search"></i><span>Audit Logs</span></a>
+        <a href="/admin#security" data-admin-link><i class="ti ti-shield-check"></i><span>Security</span></a>
+        <a href="/admin#security" data-admin-link><i class="ti ti-radar"></i><span>Sensitive Data</span></a>
+        <a href="/admin#enterprise" data-admin-link><i class="ti ti-building-skyscraper"></i><span>Org Policies</span></a>
+        <a href="/admin#enterprise" data-admin-link><i class="ti ti-cloud-lock"></i><span>Private VPC</span></a>
       </nav>
       <div class="rail-links">
+        <span class="rail-section-label">Runtime</span>
         <a href="/plugins/sdk"><i class="ti ti-plug"></i><span>Plugins</span></a>
         <a href="/workflows"><i class="ti ti-sitemap"></i><span>Designer</span></a>
         <a href="/agents"><i class="ti ti-robot"></i><span>Agents</span></a>
         <a href="/activity"><i class="ti ti-broadcast"></i><span>Activity</span></a>
-        <a href="/chat"><i class="ti ti-message-circle"></i><span>Chat</span></a>
-        <a href="/graph"><i class="ti ti-network"></i><span>Graph Canvas</span></a>
-        <a href="/admin"><i class="ti ti-shield-lock"></i><span>Admin</span></a>
       </div>
     </aside>
 
     <main>
       <header class="workspace-topbar" id="overview">
         <div>
-          <div class="eyebrow">AI Workspace OS</div>
-          <h1>Workspace Command Center</h1>
+          <div class="eyebrow">Local-first AI Workspace</div>
+          <h1>Home</h1>
+          <p class="topbar-subtitle">Coordinate chat, graph context, files, pipelines, local models, and organization controls from one workspace surface.</p>
         </div>
         <div class="top-actions">
+          <div class="global-mode-switcher" role="tablist" aria-label="Workspace mode">
+            <button type="button" class="active" data-workspace-mode="basic" role="tab" aria-selected="true">Basic</button>
+            <button type="button" data-workspace-mode="advanced" role="tab" aria-selected="false">Advanced</button>
+            <button type="button" data-workspace-mode="admin" role="tab" aria-selected="false">Admin</button>
+          </div>
           <div class="workspace-switcher" title="Active workspace">
             <i class="ti ti-building-community"></i>
             <select id="workspace-select" aria-label="Active workspace"></select>
             <span class="workspace-role-pill" id="workspace-role"></span>
           </div>
+          <select class="chrome-select" id="workspace-language" aria-label="Language">
+            <option value="en">English</option>
+            <option value="ko">한국어</option>
+          </select>
+          <a class="icon-action" href="/account" title="User profile" aria-label="User profile"><i class="ti ti-user"></i></a>
+          <button class="icon-action" id="workspace-logout" title="Logout" aria-label="Logout"><i class="ti ti-logout"></i></button>
           <button class="icon-action" id="new-org-btn" title="New organization workspace"><i class="ti ti-plus"></i></button>
           <button class="icon-action" id="refresh-btn" title="Refresh"><i class="ti ti-refresh"></i></button>
           <button class="primary-action" id="snapshot-now"><i class="ti ti-device-floppy"></i><span>Snapshot</span></button>
@@ -333,6 +352,6 @@
   </div>
 
   <div class="toast" id="toast"></div>
-  <script src="/static/scripts/workspace.js?v=2.2.7"></script>
+  <script src="/static/scripts/workspace.js"></script>
 </body>
 </html>