larkup 0.1.14 → 0.1.21

package/app/globals.css

@@ -51,34 +51,34 @@
 
 :root {
   --background: #FAFAFA;
-  --foreground: #171717;
+  --foreground: oklch(0.15 0.01 50);
   --card: #FFFFFF;
-  --card-foreground: #171717;
-  --panel: #F4F4F4;
-  --panel-foreground: #171717;
+  --card-foreground: oklch(0.15 0.01 50);
+  --panel: #f6f6f6;
+  --panel-foreground: oklch(0.15 0.01 50);
   --popover: #FFFFFF;
-  --popover-foreground: #171717;
-  --primary: #000000;
+  --popover-foreground: oklch(0.15 0.01 50);
+  --primary: oklch(0 0 0);
   --primary-foreground: #ffffff;
-  --secondary: #F5F5F5;
-  --secondary-foreground: #000000;
-  --muted: #F5F5F5;
-  --muted-foreground: #737373;
-  --accent: #F5F5F5;
-  --accent-foreground: #000000;
+  --secondary: #f4f4f5;
+  --secondary-foreground: oklch(0.2 0.01 50);
+  --muted: #f4f4f5;
+  --muted-foreground: oklch(0.5 0.02 55);
+  --accent: #e4e4e7;
+  --accent-foreground: oklch(0.2 0.02 50);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: #E5E5E5;
-  --input: #E5E5E5;
-  --ring: #000000;
-  --sidebar: #F4F4F4;
-  --sidebar-foreground: #525252;
-  --sidebar-primary: #000000;
+  --border: #e4e4e7;
+  --input: #e4e4e7;
+  --ring: oklch(0.5 0.05 50);
+  --sidebar: #FAFAFA;
+  --sidebar-foreground: oklch(0.45 0.02 55);
+  --sidebar-primary: oklch(0 0 0);
   --sidebar-primary-foreground: #ffffff;
-  --sidebar-border: #E5E5E5;
-  --sidebar-accent: #F5F5F5;
-  --sidebar-accent-foreground: #000000;
-  --sidebar-ring: #000000;
+  --sidebar-border: #e4e4e7;
+  --sidebar-accent: #f4f4f5;
+  --sidebar-accent-foreground: oklch(0.2 0.02 50);
+  --sidebar-ring: oklch(0 0 0);
   --radius: 0.625rem;
   --chart-1: #6e56cf;
   --chart-2: oklch(0.6 0.13 220);
@@ -188,3 +188,131 @@
 [data-sonner-toaster] {
   z-index: 999999 !important;
 }
+
+@layer base {
+  button, a, [role="button"] {
+    transition: all 0.2s ease;
+  }
+}
+
+/* ── Premium Chat Message Styles ── */
+
+.assistant-text-content {
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--foreground);
+  opacity: 0.92;
+}
+
+.assistant-text-content p,
+.assistant-text-content .msg-p {
+  margin: 0.5em 0;
+}
+
+/* Headings */
+.assistant-text-content .msg-h1 {
+  font-size: 1.15rem;
+  font-weight: 650;
+  color: var(--foreground);
+  letter-spacing: -0.01em;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  padding-bottom: 0.35em;
+  border-bottom: 1px solid var(--border);
+}
+
+.assistant-text-content .msg-h2 {
+  font-size: 1.0rem;
+  font-weight: 650;
+  color: var(--foreground);
+  letter-spacing: -0.01em;
+  margin-top: 1.4em;
+  margin-bottom: 0.4em;
+  padding-bottom: 0.3em;
+  border-bottom: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
+}
+
+.assistant-text-content .msg-h3 {
+  font-size: 0.925rem;
+  font-weight: 600;
+  color: var(--foreground);
+  letter-spacing: -0.005em;
+  margin-top: 1.2em;
+  margin-bottom: 0.35em;
+  padding-bottom: 0.25em;
+  border-bottom: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
+}
+
+/* Bold */
+.assistant-text-content .msg-bold {
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+/* Lists */
+.assistant-text-content .msg-ul,
+.assistant-text-content .msg-ol {
+  margin: 0.6em 0;
+  padding-left: 1.25em;
+}
+
+.assistant-text-content .msg-ul {
+  list-style-type: disc;
+}
+
+.assistant-text-content .msg-ol {
+  list-style-type: decimal;
+}
+
+.assistant-text-content .msg-li,
+.assistant-text-content .msg-li-ordered {
+  margin: 0.3em 0;
+  padding-left: 0.25em;
+  line-height: 1.6;
+}
+
+.assistant-text-content .msg-li::marker,
+.assistant-text-content .msg-li-ordered::marker {
+  color: var(--muted-foreground);
+}
+
+/* Inline code */
+.assistant-text-content .msg-inline-code {
+  border-radius: 0.375rem;
+  background: var(--muted);
+  padding: 0.15em 0.4em;
+  font-size: 0.85em;
+  font-weight: 500;
+  font-family: var(--font-mono);
+  color: var(--foreground);
+}
+
+/* Code blocks */
+.assistant-text-content .msg-code-block {
+  border-radius: 0.625rem;
+  border: 1px solid color-mix(in oklch, var(--border) 50%, transparent);
+  background: color-mix(in oklch, var(--muted) 30%, transparent);
+  padding: 1rem;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  overflow-x: auto;
+  margin: 0.75em 0;
+}
+
+.assistant-text-content .msg-code-block code {
+  font-family: var(--font-mono);
+}
+
+/* Links */
+.assistant-text-content .msg-link {
+  font-weight: 500;
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  transition: opacity 0.15s ease;
+}
+
+.assistant-text-content .msg-link:hover {
+  opacity: 0.75;
+}
+

package/app/layout.tsx

@@ -1,24 +1,24 @@
-import { Analytics } from "@vercel/analytics/next";
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-import { AppSidebar } from "@/components/app-sidebar";
-import { Toaster } from "@/components/ui/sonner";
-import { WorkspaceProvider } from "@/components/workspace/workspace-provider";
-import { WorkspaceTopBar } from "@/components/workspace/workspace-top-bar";
-import { ThemeCustomizerProvider } from "@/components/theme-customizer-provider";
-import { ClientLayoutWrapper } from "@/components/client-layout-wrapper";
+import { Analytics } from '@vercel/analytics/next';
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';
+import { Toaster } from '@/components/ui/sonner';
+import { WorkspaceProvider } from '@/components/workspace/workspace-provider';
+import { ThemeCustomizerProvider } from '@/components/theme-customizer-provider';
+import { ClientLayoutWrapper } from '@/components/client-layout-wrapper';
+import { GlobalIndexProgress } from '@/components/index/global-index-progress';
+import { UpdateBanner } from '@/components/update-banner';
 
-const geistSans = Geist({ variable: "--font-geist-sans", subsets: ["latin"] });
+const geistSans = Geist({ variable: '--font-geist-sans', subsets: ['latin'] });
 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
 });
 
 export const metadata: Metadata = {
-  title: "larkup",
+  title: 'larkup',
   description:
-    "larkup — a dual-mode (Web + CLI) toolkit to build, index, and serve a lightweight, deployable RAG pipeline.",
+    'larkup — a toolkit to build, index, and serve your own AI model and knowledge base.',
 };
 
 export default function RootLayout({
@@ -38,13 +38,15 @@ export default function RootLayout({
             __html: `(function(){try{var t=localStorage.getItem('app-theme');var b=localStorage.getItem('app-background');var r=localStorage.getItem('app-radius');var d=document.body;if(t&&t!=='default')d.classList.add(t);if(b)d.classList.add(b);if(r&&r!=='radius-default')d.classList.add(r);}catch(e){}})();`,
           }}
         />
+        <UpdateBanner />
         <ThemeCustomizerProvider>
           <WorkspaceProvider>
             <ClientLayoutWrapper>{children}</ClientLayoutWrapper>
-            <Toaster position="bottom-right" />
+            <Toaster position="bottom-left" />
+            <GlobalIndexProgress />
           </WorkspaceProvider>
         </ThemeCustomizerProvider>
-        {process.env.NODE_ENV === "production" && <Analytics />}
+        {process.env.NODE_ENV === 'production' && <Analytics />}
       </body>
     </html>
   );

package/app/page.tsx

@@ -1,34 +1,5 @@
-"use client"
+import { redirect } from "next/navigation";
 
-import { useEffect } from "react"
-import { useRouter } from "next/navigation"
-import { useWorkspace } from "@/components/workspace/workspace-provider"
-import { Loader2 } from "lucide-react"
-
-export default function Page() {
-  const router = useRouter()
-  const { mode, isLoading, isFirstRun } = useWorkspace()
-
-  useEffect(() => {
-    if (isLoading) return
-    // If it's first run, the ClientLayoutWrapper will show the welcome screen
-    if (isFirstRun || !mode) return
-
-    if (mode === "simple") {
-      router.replace("/simple/chat")
-    } else {
-      router.replace("/configure")
-    }
-  }, [mode, isLoading, isFirstRun, router])
-
-  // Show a minimal loading state while determining the redirect
-  if (isLoading) {
-    return (
-      <div className="flex h-[50vh] items-center justify-center">
-        <Loader2 className="size-6 animate-spin text-muted-foreground" />
-      </div>
-    )
-  }
-
-  return null
+export default function Home() {
+  redirect("/chat");
 }

package/app/settings/page.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useState, useEffect, Suspense } from 'react';
+import { useSearchParams, useRouter, usePathname } from 'next/navigation';
+import { SettingsLayout, type SettingsSection } from '@/components/settings/settings-layout';
+import { GeneralSection } from '@/components/settings/general-section';
+import { ModelsSection } from '@/components/settings/models-section';
+import { ServerSection } from '@/components/settings/server-section';
+import { PromptsSection } from '@/components/settings/prompts-section';
+import { PlaygroundSection } from '@/components/settings/playground-section';
+import { AppearanceSection } from '@/components/settings/appearance-section';
+import { StorageSection } from '@/components/settings/storage-section';
+import { ConnectionsSection } from '@/components/settings/connections-section';
+import { DeploymentSection } from '@/components/settings/deployment-section';
+import { MarketplaceSection } from '@/components/settings/marketplace-section';
+import { MarketplaceToolsSettings } from '@/components/settings/marketplace-tools-settings';
+
+function SettingsContent() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const getInitialSection = (): SettingsSection => {
+    if (searchParams.has('ai-models')) return 'models';
+    const section = searchParams.get('section') as SettingsSection;
+    if (section) return section;
+    return 'general';
+  };
+
+  const [activeSection, setActiveSection] = useState<SettingsSection>(getInitialSection());
+
+  useEffect(() => {
+    const currentSection = searchParams.get('section');
+    const hasAiModels = searchParams.has('ai-models');
+
+    if (hasAiModels) {
+      const params = new URLSearchParams(searchParams.toString());
+      params.delete('ai-models');
+      params.set('section', 'models');
+      router.replace(`${pathname}?${params.toString()}`);
+      if (activeSection !== 'models') {
+        setActiveSection('models');
+      }
+    } else if (currentSection && currentSection !== activeSection) {
+      setActiveSection(currentSection as SettingsSection);
+    }
+  }, [searchParams, activeSection, pathname, router]);
+
+  const handleSectionChange = (newSection: SettingsSection) => {
+    setActiveSection(newSection);
+    const params = new URLSearchParams(searchParams.toString());
+    params.delete('ai-models');
+    params.set('section', newSection);
+    router.replace(`${pathname}?${params.toString()}`);
+  };
+
+  return (
+    <SettingsLayout activeSection={activeSection} onSectionChange={handleSectionChange}>
+      {activeSection === 'general' && <GeneralSection />}
+      {activeSection === 'models' && <ModelsSection />}
+      {activeSection === 'storage' && <StorageSection />}
+      {activeSection === 'server' && <ServerSection />}
+      {activeSection === 'connections' && <ConnectionsSection />}
+      {activeSection === 'deployment' && <DeploymentSection />}
+      {activeSection === 'marketplace' && <MarketplaceSection />}
+      {activeSection === 'tool-settings' && <MarketplaceToolsSettings />}
+      {activeSection === 'prompts' && <PromptsSection />}
+      {activeSection === 'playground' && <PlaygroundSection />}
+      {activeSection === 'appearance' && <AppearanceSection />}
+    </SettingsLayout>
+  );
+}
+
+export default function SettingsPage() {
+  return (
+    <Suspense>
+      <SettingsContent />
+    </Suspense>
+  );
+}

package/app/themes.css

@@ -535,8 +535,8 @@
 }
 
 .bg-default {
-  --background: #fff !important;
-  --sidebar: #f4f4f4 !important;
+  --background: #FAFAFA !important;
+  --sidebar: #FAFAFA !important;
   --card: #ffffff !important;
   --popover: #ffffff !important;
   --border: #e5e5e5 !important;
@@ -731,3 +731,39 @@
 .radius-full {
   --radius: 9999px !important;
 }
+
+.bg-fafafa {
+  --background: #FAFAFA !important;
+  --sidebar: #FAFAFA !important;
+  --card: #ffffff !important;
+  --popover: #ffffff !important;
+  --border: #e0e0e0 !important;
+  --input: #e0e0e0 !important;
+  --foreground: #171717 !important;
+  --card-foreground: #171717 !important;
+  --popover-foreground: #171717 !important;
+  --sidebar-foreground: #525252 !important;
+  --sidebar-border: #e0e0e0 !important;
+  --muted: #eeeeee !important;
+  --muted-foreground: #737373 !important;
+  --secondary: #eeeeee !important;
+  --accent: #eeeeee !important;
+}
+.dark.bg-fafafa,
+.bg-fafafa .dark {
+  --background: #0d0d0d !important;
+  --sidebar: #171717 !important;
+  --card: #202020 !important;
+  --popover: #202020 !important;
+  --border: #333333 !important;
+  --input: #333333 !important;
+  --foreground: #f4f4f4 !important;
+  --card-foreground: #f4f4f4 !important;
+  --popover-foreground: #f4f4f4 !important;
+  --sidebar-foreground: #a6a6a6 !important;
+  --sidebar-border: #333333 !important;
+  --muted: #1f1f1f !important;
+  --muted-foreground: #a6a6a6 !important;
+  --secondary: #1f1f1f !important;
+  --accent: #1f1f1f !important;
+}

package/archive/redesign-v2/app/configure/page.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { PageHeader } from "@/components/page-header";
+import {
+  ConfigureForm,
+  type ConfigureFormHandle,
+} from "@/components/configure/configure-form";
+import { Button } from "@/components/ui/button";
+import { Loader2, Save, Check } from "lucide-react";
+
+export default function ConfigurePage() {
+  const [handle, setHandle] = useState<ConfigureFormHandle | null>(null);
+
+  const onHandleReady = useCallback((h: ConfigureFormHandle) => {
+    setHandle({ ...h });
+  }, []);
+
+  const dirty = handle?.dirty ?? false;
+  const saving = handle?.saving ?? false;
+
+  return (
+    <div className="flex  min-h-full flex-col">
+      <PageHeader
+        eyebrow="Step 1 · Configure"
+        title="Pipeline configuration"
+        description="Choose your embedding model, indexing strategy, and vector store. "
+        actions={
+          <Button
+            size="lg"
+            variant={dirty ? "default" : "default"}
+            disabled={saving || !dirty}
+            onClick={() => handle?.requestSave()}
+            className="min-w-[110px] px-3.5 h-9.5 rounded-md transition-all text-white/90 text-[13px]"
+          >
+            {saving ? (
+              <>
+                <Loader2 className="size-4 animate-spin" />
+                Saving…
+              </>
+            ) : (
+              <>
+                <Save className="size-4" />
+                Save Configuration
+              </>
+            )}
+          </Button>
+        }
+      />
+      <ConfigureForm onHandleReady={onHandleReady} />
+    </div>
+  );
+}

package/archive/redesign-v2/app/demo/page.tsx

@@ -0,0 +1,15 @@
+import { PageHeader } from "@/components/page-header"
+import { DemoWorkspace } from "@/components/demo/demo-workspace"
+
+export default function DemoPage() {
+  return (
+    <div className="flex min-h-full flex-col">
+      <PageHeader
+        eyebrow="Step 5 · Demo"
+        title="Query your RAG pipeline"
+        description="Send a test question and inspect the top-k documents your pipeline returns. If a generated server is running, the query hits it directly; otherwise it runs in-process against your store."
+      />
+      <DemoWorkspace />
+    </div>
+  )
+}

package/archive/redesign-v2/app/server/page.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useState } from "react";
+import { PageHeader } from "@/components/page-header";
+import { ServerWorkspace } from "@/components/server/server-workspace";
+import { DeployButton } from "@/components/server/deploy-button";
+
+export default function ServerPage() {
+  const [serverId, setServerId] = useState<string>("default");
+
+  return (
+    <div className="flex min-h-full flex-col">
+      <PageHeader
+        eyebrow="Step 4 · Server"
+        title="Generate &amp; launch your Custom AI Model server"
+        description="Emit a standalone, deployable AI server tailored to your selected vector store"
+        actions={<DeployButton serverId={serverId} />}
+      />
+      <ServerWorkspace onServerId={setServerId} />
+    </div>
+  );
+}

package/archive/redesign-v2/app/simple/chat/page.tsx

@@ -0,0 +1,17 @@
+import { ChatWorkspace } from "@/components/chat/chat-workspace"
+
+export default function SimpleChatPage() {
+  return (
+    <div className="flex flex-col overflow-hidden" style={{ height: "100%" }}>
+      <div className="px-6 pt-5 pb-1 md:px-8">
+        <h1 className="text-lg font-semibold tracking-tight text-foreground">
+          Chat
+        </h1>
+        <p className="text-sm text-muted-foreground">
+          Ask questions and get AI-powered answers from your documents.
+        </p>
+      </div>
+      <ChatWorkspace />
+    </div>
+  )
+}

package/archive/redesign-v2/app/simple/docs/page.tsx

@@ -0,0 +1,21 @@
+import { DataWorkspace } from "@/components/data/data-workspace"
+import { SimpleIndexButton } from "@/components/simple/simple-index-button"
+
+export default function SimpleDocsPage() {
+  return (
+    <div className="flex min-h-full flex-col">
+      <div className="flex items-center justify-between px-6 pt-5 pb-4 md:px-8">
+        <div>
+          <h1 className="text-lg font-semibold tracking-tight text-foreground">
+            Documents
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            Upload files, paste text, or scrape the web to build your knowledge base.
+          </p>
+        </div>
+        <SimpleIndexButton />
+      </div>
+      <DataWorkspace />
+    </div>
+  )
+}