UI redesign: SandBase-branded docs theme

.vitepress/config.ts

@@ -237,6 +237,13 @@ export default defineConfig({
   ignoreDeadLinks: true,
   appearance: true,
   cleanUrls: true,
+
+  // The SandBase design presents code on a dark "panel" surface in both light
+  // and dark appearance. Pin the syntax theme to a dark palette so code blocks
+  // read as the signature dark panels on every background.
+  markdown: {
+    theme: { light: 'github-dark', dark: 'github-dark' },
+  },
   // Frontmatter titles are already curated for SEO; avoid appending a second
   // brand suffix that can push rendered titles beyond search-result limits.
   titleTemplate: false,
@@ -295,7 +302,9 @@ export default defineConfig({
       { text: 'Docs', link: '/', activeMatch: '^/(?!api-reference/|model-api-reference/)' },
       { text: 'Model API Reference', link: '/model-api-reference/', activeMatch: '^/model-api-reference/' },
       { text: 'Platform API', link: '/api-reference/', activeMatch: '^/api-reference/' },
-      { text: 'Console', link: 'https://www.sandbase.ai/console', target: '_blank', rel: 'noopener noreferrer' },
+      { text: 'Pricing', link: 'https://www.sandbase.ai/pricing', target: '_blank', rel: 'noopener noreferrer' },
+      // Rendered as the primary "Start building" CTA button (see custom.css).
+      { text: 'Start building', link: 'https://www.sandbase.ai/console', target: '_blank', rel: 'noopener noreferrer' },
     ],
 
     sidebar: {

.vitepress/sidebar.ts

@@ -24,7 +24,6 @@ export const platformApiReferenceFallbackSidebar = modelApiReferenceSidebar(plat
 export const docsSidebar: DefaultTheme.SidebarItem[] = [
   {
     text: 'AI-Friendly Docs',
-    collapsed: true,
     items: [
       { text: 'AI-Readable Overview', link: '/for-agents/' },
       { text: 'AI API Guide', link: '/for-agents/full' },
@@ -34,7 +33,6 @@ export const docsSidebar: DefaultTheme.SidebarItem[] = [
   },
   {
     text: 'First steps',
-    collapsed: false,
     items: [
       { text: 'Overview', link: '/getting-started/' },
       { text: 'Quickstart', link: '/getting-started/quickstart' },
@@ -44,7 +42,6 @@ export const docsSidebar: DefaultTheme.SidebarItem[] = [
   },
   {
     text: 'Models & APIs',
-    collapsed: false,
     items: [
       { text: 'Store', link: '/store/' },
       { text: 'APIs', link: '/store/apis' },
@@ -56,7 +53,6 @@ export const docsSidebar: DefaultTheme.SidebarItem[] = [
   },
   {
     text: 'Guides',
-    collapsed: false,
     items: [
       { text: 'Overview', link: '/guides/' },
       { text: 'Chat Completions', link: '/guides/chat-completions' },
@@ -71,7 +67,6 @@ export const docsSidebar: DefaultTheme.SidebarItem[] = [
   },
   {
     text: 'Build agents',
-    collapsed: false,
     items: [
       { text: 'Overview', link: '/agents/' },
       { text: 'Define agent', link: '/agents/agent-api' },
@@ -81,7 +76,6 @@ export const docsSidebar: DefaultTheme.SidebarItem[] = [
   },
   {
     text: 'Agent operations',
-    collapsed: false,
     items: [
       { text: 'Services', link: '/agents/services' },
       { text: 'Schedules', link: '/agents/schedules' },
@@ -90,7 +84,6 @@ export const docsSidebar: DefaultTheme.SidebarItem[] = [
   },
   {
     text: 'Workspace',
-    collapsed: false,
     items: [
       { text: 'Overview', link: '/admin/' },
       { text: 'API Keys', link: '/getting-started/api-keys' },

.vitepress/theme/DocsSearch.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+/**
+ * "Search docs" button at the top of the sidebar, matching the sandbase /docs
+ * reference design. VitePress's local-search hotkey listener stays mounted
+ * (the default nav is only hidden, not removed), so dispatching Cmd/Ctrl+K
+ * opens the built-in local search modal.
+ */
+function openSearch() {
+  const fire = (target: Window | Document) =>
+    target.dispatchEvent(
+      new KeyboardEvent('keydown', {
+        key: 'k',
+        code: 'KeyK',
+        metaKey: true,
+        ctrlKey: true,
+        bubbles: true,
+        cancelable: true,
+      }),
+    )
+  fire(window)
+  fire(document)
+}
+</script>
+
+<template>
+  <button type="button" class="docs-search" aria-label="Search docs" aria-keyshortcuts="Meta+K Control+K" @click="openSearch">
+    <svg class="docs-search-icon" viewBox="0 0 24 24" width="14" height="14" aria-hidden="true">
+      <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2" />
+      <line x1="16.5" y1="16.5" x2="21" y2="21" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+    </svg>
+    <span class="docs-search-label">Search docs</span>
+    <kbd class="docs-search-kbd">⌘K</kbd>
+  </button>
+</template>
+
+<style scoped>
+.docs-search {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 0.625rem;
+  margin-bottom: 1.5rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-line);
+  border-radius: 0;
+  background: var(--color-surface);
+  color: var(--color-ink-subtle);
+  font-family: var(--font-family-body);
+  font-size: 0.9375rem;
+  line-height: 1.4375rem;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 150ms ease, color 150ms ease;
+}
+.docs-search:hover {
+  border-color: var(--sb-line-strong);
+  color: var(--color-ink);
+}
+.docs-search:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+.docs-search-icon {
+  flex: none;
+}
+.docs-search-label {
+  flex: 1 1 auto;
+}
+.docs-search-kbd {
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--color-ink-subtle);
+  font-family: var(--font-family-mono);
+  font-size: 0.625rem;
+  line-height: 1;
+}
+</style>