From 262fbcd89dba0c85b9bd95059fe8385aebcf3e90 Mon Sep 17 00:00:00 2001
From: Ivan <45982459+ivntsng@users.noreply.github.com>
Date: Wed, 13 Nov 2024 15:06:59 -0800
Subject: [PATCH] implement feature flags and improve UI consistency (#601)

* implement feature flags and improve UI consistency

* Additional updates to robot-hub

* Additional updates & resolved upload images bug
---
 .../listing/ListingFeatureButton.tsx          |   2 +-
 .../listing/ListingRegisterRobot.tsx          |   9 +-
 .../components/modals/DeleteRobotModal.tsx    |  10 +-
 .../components/modals/RegisterRobotModal.tsx  |  10 +-
 frontend/src/components/nav/Navbar.tsx        |  20 +--
 frontend/src/components/nav/navigation.tsx    |   2 +-
 frontend/src/components/pages/Profile.tsx     |  38 +++---
 frontend/src/components/pages/Terminal.tsx    |  27 +++-
 .../src/components/terminal/RobotCard.tsx     |  47 ++++---
 .../terminal/TerminalRobotModel.tsx           |   2 +-
 .../terminal/TerminalSingleRobot.tsx          | 119 ++++++++++++------
 frontend/src/lib/utils/featureFlags.ts        |   7 ++
 store/app/crud/base.py                        |  11 +-
 13 files changed, 195 insertions(+), 109 deletions(-)
 create mode 100644 frontend/src/lib/utils/featureFlags.ts

diff --git a/frontend/src/components/listing/ListingFeatureButton.tsx b/frontend/src/components/listing/ListingFeatureButton.tsx
index 74d3d399..8c634b72 100644
--- a/frontend/src/components/listing/ListingFeatureButton.tsx
+++ b/frontend/src/components/listing/ListingFeatureButton.tsx
@@ -72,7 +72,7 @@ const ListingFeatureButton = (props: Props) => {
     <div className="flex items-center gap-2 mt-2">
       <Button
         onClick={handleFeatureToggle}
-        variant="default"
+        variant="outline"
         disabled={isUpdating}
         title={
           currentFeaturedCount >= 3 && !isFeatured
diff --git a/frontend/src/components/listing/ListingRegisterRobot.tsx b/frontend/src/components/listing/ListingRegisterRobot.tsx
index eb2fe9d8..ec09c8a2 100644
--- a/frontend/src/components/listing/ListingRegisterRobot.tsx
+++ b/frontend/src/components/listing/ListingRegisterRobot.tsx
@@ -2,6 +2,8 @@ import { useState } from "react";
 import { FaPlus } from "react-icons/fa";
 
 import { Button } from "@/components/ui/button";
+import { useAuthentication } from "@/hooks/useAuth";
+import { FEATURE_FLAGS } from "@/lib/utils/featureFlags";
 
 import { RegisterRobotModal } from "../modals/RegisterRobotModal";
 
@@ -11,6 +13,11 @@ interface Props {
 
 const ListingRegisterRobot = ({ listingId }: Props) => {
   const [isRegisterModalOpen, setIsRegisterModalOpen] = useState(false);
+  const { isAuthenticated } = useAuthentication();
+
+  if (!isAuthenticated || FEATURE_FLAGS.DEMO_ROBOT_ENABLED) {
+    return null;
+  }
 
   return (
     <div className="flex flex-col items-start gap-3 mt-2">
@@ -20,7 +27,7 @@ const ListingRegisterRobot = ({ listingId }: Props) => {
         onClick={() => setIsRegisterModalOpen(true)}
       >
         <FaPlus className="mr-2 h-4 w-4" />
-        <span className="mr-2">Register Robot</span>
+        <span className="mr-2">Create Robot Instance</span>
       </Button>
 
       <p className="text-xs text-gray-6">
diff --git a/frontend/src/components/modals/DeleteRobotModal.tsx b/frontend/src/components/modals/DeleteRobotModal.tsx
index 760cedbc..cc764af8 100644
--- a/frontend/src/components/modals/DeleteRobotModal.tsx
+++ b/frontend/src/components/modals/DeleteRobotModal.tsx
@@ -53,19 +53,19 @@ export function DeleteRobotModal({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="sm:max-w-[425px] bg-gray-1 text-gray-12 border border-gray-3 rounded-lg shadow-lg">
+      <DialogContent className="sm:max-w-[425px] bg-gray-12 border border-gray-3 rounded-lg shadow-lg">
         <DialogHeader>
           <DialogTitle>Delete Robot</DialogTitle>
-          <DialogDescription className="text-gray-11">
+          <DialogDescription>
             <div className="flex flex-col gap-2">
               <span>
                 Are you sure you want to delete robot{" "}
-                <span className="text-primary-9 font-medium">
+                <span className="text-gray-9 font-medium">
                   &quot;{robot.name}&quot;
                 </span>
                 ? This action cannot be undone.
               </span>
-              <span className="text-gray-11 font-light text-xs">
+              <span className="font-light text-xs">
                 Data associated with this robot will be deleted and no longer
                 accessible.
               </span>
@@ -73,7 +73,7 @@ export function DeleteRobotModal({
           </DialogDescription>
         </DialogHeader>
         {error && <div className="text-red-500 text-sm mt-2">{error}</div>}
-        <div className="flex justify-end gap-2">
+        <div className="flex justify-between gap-2">
           <Button onClick={onClose} variant="outline" disabled={isLoading}>
             Cancel
           </Button>
diff --git a/frontend/src/components/modals/RegisterRobotModal.tsx b/frontend/src/components/modals/RegisterRobotModal.tsx
index e4435a80..86b3985b 100644
--- a/frontend/src/components/modals/RegisterRobotModal.tsx
+++ b/frontend/src/components/modals/RegisterRobotModal.tsx
@@ -69,13 +69,13 @@ export function RegisterRobotModal({
         onClose();
       }}
     >
-      <DialogContent className="sm:max-w-[425px] bg-gray-1 text-gray-12 border border-gray-3 rounded-lg shadow-lg">
+      <DialogContent className="sm:max-w-[425px] bg-gray-12 text-gray-2 border border-gray-3 rounded-lg shadow-lg">
         <DialogHeader>
-          <DialogTitle>Register New Robot</DialogTitle>
+          <DialogTitle>Create New Robot Instance</DialogTitle>
         </DialogHeader>
         <div className="grid gap-4 py-4">
           <div className="grid gap-2">
-            <Label htmlFor="name" className="text-sm font-medium text-gray-12">
+            <Label htmlFor="name" className="text-sm font-medium text-gray-2">
               Name
             </Label>
             <Input
@@ -92,7 +92,7 @@ export function RegisterRobotModal({
           <div className="grid gap-2">
             <Label
               htmlFor="description"
-              className="text-sm font-medium text-gray-12"
+              className="text-sm font-medium text-gray-2"
             >
               Description
             </Label>
@@ -113,7 +113,7 @@ export function RegisterRobotModal({
           <Button
             onClick={handleAdd}
             disabled={!name || isLoading}
-            variant="default"
+            variant="outline"
             className="flex items-center"
           >
             {isLoading ? (
diff --git a/frontend/src/components/nav/Navbar.tsx b/frontend/src/components/nav/Navbar.tsx
index 5425c7f8..71b52a57 100644
--- a/frontend/src/components/nav/Navbar.tsx
+++ b/frontend/src/components/nav/Navbar.tsx
@@ -49,15 +49,15 @@ const Navbar = () => {
             </Button>
           </div>
           <div className="hidden lg:flex items-center flex-grow justify-between ml-4">
-            <div className="flex space-x-1 p-2 flex-grow">
-              <div className="flex-grow flex space-x-1">
+            <div className="flex space-x-4 p-2 flex-grow items-center">
+              <div className="flex-grow flex space-x-4 items-center">
                 {featuredListings?.map((listing) => (
                   <Button
                     key={listing.id}
                     onClick={() =>
                       handleFeaturedClick(listing.username, listing.slug)
                     }
-                    variant="ghost"
+                    variant="outline"
                     className="px-2 xl:px-3 py-2 text-sm tracking-widest text-gray-1"
                   >
                     {listing.name}
@@ -69,7 +69,7 @@ const Navbar = () => {
                   <Button
                     key={item.name}
                     asChild
-                    variant="ghost"
+                    variant="outline"
                     className="px-2 xl:px-3 py-2 text-sm tracking-wide xl:tracking-widest text-gray-1"
                   >
                     <a
@@ -87,7 +87,7 @@ const Navbar = () => {
                     key={item.name}
                     asChild
                     variant={
-                      location.pathname === item.path ? "default" : "ghost"
+                      location.pathname === item.path ? "default" : "outline"
                     }
                     className="px-2 xl:px-3 py-2 text-sm tracking-widest"
                   >
@@ -98,19 +98,19 @@ const Navbar = () => {
                 ),
               )}
             </div>
-            <div className="flex items-center space-x-2 text-gray-1 p-2 ml-4 text-sm tracking-widest">
+            <div className="flex items-center space-x-4 text-gray-1 p-2 ml-4 text-sm tracking-widest">
               {isAuthenticated ? (
                 <>
                   <Button
                     asChild
-                    variant="ghost"
+                    variant="outline"
                     className="px-3 py-2 text-gray-1"
                   >
                     <Link to={ROUTES.ACCOUNT.path}>Account</Link>
                   </Button>
                   <Button
                     asChild
-                    variant="ghost"
+                    variant="outline"
                     className="px-3 py-2 text-gray-1"
                   >
                     <Link to={ROUTES.LOGOUT.path}>Logout</Link>
@@ -120,14 +120,14 @@ const Navbar = () => {
                 <>
                   <Button
                     asChild
-                    variant="ghost"
+                    variant="outline"
                     className="px-3 py-2 text-gray-1"
                   >
                     <Link to={ROUTES.LOGIN.path}>Log In</Link>
                   </Button>
                   <Button
                     asChild
-                    variant="ghost"
+                    variant="outline"
                     className="px-3 py-2 text-gray-1"
                   >
                     <Link to={ROUTES.SIGNUP.path}>Sign Up</Link>
diff --git a/frontend/src/components/nav/navigation.tsx b/frontend/src/components/nav/navigation.tsx
index cdae9877..63cb5c00 100644
--- a/frontend/src/components/nav/navigation.tsx
+++ b/frontend/src/components/nav/navigation.tsx
@@ -16,7 +16,7 @@ export interface NavItem extends BaseNavItem {
 
 export const DEFAULT_NAV_ITEMS: BaseNavItem[] = [
   {
-    name: "Bots",
+    name: "Robots Hub",
     path: ROUTES.BOTS.BROWSE.path,
     icon: <FaRobot />,
   },
diff --git a/frontend/src/components/pages/Profile.tsx b/frontend/src/components/pages/Profile.tsx
index c87df828..f94ae4bd 100644
--- a/frontend/src/components/pages/Profile.tsx
+++ b/frontend/src/components/pages/Profile.tsx
@@ -47,6 +47,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
   const [usernameError, setUsernameError] = useState<string | null>(null);
   const { addErrorAlert, addAlert } = useAlertQueue();
   const debouncedUsername = useDebounce(username, 500);
+  const [value, setValue] = useState("own");
 
   const formatJoinDate = (timestamp: number) => {
     const date = new Date(timestamp * 1000); // Convert seconds to milliseconds
@@ -121,12 +122,6 @@ export const RenderProfile = (props: RenderProfileProps) => {
     }
   };
 
-  const handleTabChange = (tab: string) => {
-    if (tab === "own") {
-      setUpvotedPage(1);
-    }
-  };
-
   useEffect(() => {
     const checkUsernameAvailability = async () => {
       if (debouncedUsername && debouncedUsername !== user.username) {
@@ -207,7 +202,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
                 </p>
               )}
             </div>
-            <p className="text-sm text-gray-6">
+            <p className="text-sm">
               Joined on{" "}
               {user.created_at
                 ? formatJoinDate(user.created_at)
@@ -218,7 +213,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
             <div className="flex flex-wrap gap-2 justify-center">
               <Button
                 onClick={() => navigate(ROUTES.KEYS.path)}
-                variant="default"
+                variant="outline"
               >
                 API Keys
               </Button>
@@ -267,7 +262,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
                 {user.bio ? (
                   <p>{user.bio}</p>
                 ) : (
-                  <p className="text-gray-6 text-sm">
+                  <p className="text-sm">
                     No bio set. Edit your profile to add a bio.
                   </p>
                 )}
@@ -301,7 +296,7 @@ export const RenderProfile = (props: RenderProfileProps) => {
           <div className="flex gap-2 mb-8">
             <Button
               onClick={() => navigate(ROUTES.ORDERS.path)}
-              variant="default"
+              variant="outline"
             >
               Orders
             </Button>
@@ -341,21 +336,22 @@ export const RenderProfile = (props: RenderProfileProps) => {
             <Tabs
               defaultValue="own"
               className="w-full"
-              onValueChange={handleTabChange}
+              onValueChange={setValue}
+              value={value}
             >
               <TabsList className="flex justify-center space-x-4 mb-4">
-                <TabsTrigger
-                  value="own"
-                  className="text-sm px-3 py-1.5 rounded-md transition-colors duration-300 hover:bg-gray-11 hover:text-gray-1 data-[state=active]:bg-gray-1 data-[state=active]:text-gray-12"
+                <Button
+                  variant={value === "own" ? "default" : "outline"}
+                  asChild
                 >
-                  Your Bot Listings
-                </TabsTrigger>
-                <TabsTrigger
-                  value="upvoted"
-                  className="text-sm px-3 py-1.5 rounded-md transition-colors duration-300 hover:bg-gray-9 hover:text-gray-1 data-[state=active]:bg-gray-1 data-[state=active]:text-gray-12"
+                  <TabsTrigger value="own">Your Robot Listings</TabsTrigger>
+                </Button>
+                <Button
+                  variant={value === "upvoted" ? "default" : "outline"}
+                  asChild
                 >
-                  Upvoted Bots
-                </TabsTrigger>
+                  <TabsTrigger value="upvoted">Upvoted Robots</TabsTrigger>
+                </Button>
               </TabsList>
               <TabsContent value="own">
                 <MyListingGrid userId={user.id} />
diff --git a/frontend/src/components/pages/Terminal.tsx b/frontend/src/components/pages/Terminal.tsx
index 9e188791..74f46eea 100644
--- a/frontend/src/components/pages/Terminal.tsx
+++ b/frontend/src/components/pages/Terminal.tsx
@@ -8,6 +8,7 @@ import Spinner from "@/components/ui/Spinner";
 import { useAlertQueue } from "@/hooks/useAlertQueue";
 import { useAuthentication } from "@/hooks/useAuth";
 import ROUTES from "@/lib/types/routes";
+import { FEATURE_FLAGS } from "@/lib/utils/featureFlags";
 
 import RequireAuthentication from "../auth/RequireAuthentication";
 
@@ -49,7 +50,21 @@ const TerminalInner = () => {
           if (error) {
             addErrorAlert(error);
           } else {
-            setRobots(data.robots);
+            if (FEATURE_FLAGS.DEMO_ROBOT_ENABLED && data.robots.length === 0) {
+              const demoRobot: SingleRobotResponse = {
+                robot_id: "d38afe50c9d6b936",
+                name: "K-Scale Demo",
+                description: "Click on the robot name to start the demo!",
+                listing_id: "3f26c2bc2c072f50",
+                user_id: "",
+                username: "K-Scale",
+                slug: "demo",
+                created_at: Date.now() / 1000,
+              };
+              setRobots([demoRobot]);
+            } else {
+              setRobots(data.robots);
+            }
           }
         } catch (error) {
           addErrorAlert(error);
@@ -61,6 +76,11 @@ const TerminalInner = () => {
   }, [api, currentUser, isAuthenticated]);
 
   const handleDeleteRobot = async (robotId: string) => {
+    if (FEATURE_FLAGS.DEMO_ROBOT_ENABLED && robotId === "3688c9a4af0b58e1") {
+      addErrorAlert("Demo robot cannot be deleted");
+      return;
+    }
+
     try {
       const { error } = await api.client.DELETE("/robots/delete/{robot_id}", {
         params: {
@@ -92,6 +112,11 @@ const TerminalInner = () => {
     robotId: string,
     updates: { name?: string; description?: string },
   ) => {
+    if (FEATURE_FLAGS.DEMO_ROBOT_ENABLED && robotId === "3688c9a4af0b58e1") {
+      addErrorAlert("Demo robot cannot be modified");
+      return;
+    }
+
     try {
       const { error } = await api.client.PUT("/robots/update/{robot_id}", {
         params: {
diff --git a/frontend/src/components/terminal/RobotCard.tsx b/frontend/src/components/terminal/RobotCard.tsx
index 6a469c6d..2d785e5c 100644
--- a/frontend/src/components/terminal/RobotCard.tsx
+++ b/frontend/src/components/terminal/RobotCard.tsx
@@ -6,6 +6,7 @@ import { SingleRobotResponse } from "@/components/terminal/types";
 import { Card } from "@/components/ui/Card";
 import { Button } from "@/components/ui/button";
 import ROUTES from "@/lib/types/routes";
+import { FEATURE_FLAGS } from "@/lib/utils/featureFlags";
 import { formatDate } from "@/lib/utils/formatDate";
 
 import { DeleteRobotModal } from "../modals/DeleteRobotModal";
@@ -19,6 +20,9 @@ interface RobotCardProps {
 export default function RobotCard({ robot, onDeleteRobot }: RobotCardProps) {
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
+  const isDemo =
+    FEATURE_FLAGS.DEMO_ROBOT_ENABLED && robot.robot_id === "3688c9a4af0b58e1";
+
   return (
     <Card className="w-full bg-black border border-gray-700 hover:border-white transition-all duration-300">
       <div className="p-6">
@@ -36,11 +40,14 @@ export default function RobotCard({ robot, onDeleteRobot }: RobotCardProps) {
               </h3>
             </div>
           </Link>
-          <Tooltip content="Delete robot">
+          <Tooltip
+            content={isDemo ? "Demo robot cannot be deleted" : "Delete robot"}
+          >
             <Button
               variant="ghost"
               size="icon"
               onClick={() => setIsDeleteModalOpen(true)}
+              disabled={isDemo}
               className="h-10 w-10 rounded-lg bg-gray-900 text-white hover:bg-gray-800 transition-colors"
             >
               <FaTrash className="h-4 w-4" />
@@ -56,23 +63,29 @@ export default function RobotCard({ robot, onDeleteRobot }: RobotCardProps) {
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 text-sm">
             <div>
               <p className="text-gray-400">Listing</p>
-              <Tooltip
-                content="View listing associated with robot"
-                position="bottom"
-              >
-                <Link
-                  to={ROUTES.BOT.buildPath({
-                    username: robot.username,
-                    slug: robot.slug,
-                  })}
-                  className="text-white hover:text-primary-9 flex items-center gap-1 group transition-colors"
+              {FEATURE_FLAGS.DEMO_ROBOT_ENABLED ? (
+                <p className="text-white flex items-center gap-1">
+                  {robot.username}/{robot.slug}
+                </p>
+              ) : (
+                <Tooltip
+                  content="View listing associated with robot"
+                  position="bottom"
                 >
-                  <span className="group-hover:underline">
-                    {robot.username}/{robot.slug}
-                  </span>
-                  <FaExternalLinkAlt className="h-3 w-3" />
-                </Link>
-              </Tooltip>
+                  <Link
+                    to={ROUTES.BOT.buildPath({
+                      username: robot.username,
+                      slug: robot.slug,
+                    })}
+                    className="text-white hover:text-primary-9 flex items-center gap-1 group transition-colors"
+                  >
+                    <span className="group-hover:underline">
+                      {robot.username}/{robot.slug}
+                    </span>
+                    <FaExternalLinkAlt className="h-3 w-3" />
+                  </Link>
+                </Tooltip>
+              )}
             </div>
             <div>
               <p className="text-gray-400">Registered</p>
diff --git a/frontend/src/components/terminal/TerminalRobotModel.tsx b/frontend/src/components/terminal/TerminalRobotModel.tsx
index 84b07b8c..f7056df0 100644
--- a/frontend/src/components/terminal/TerminalRobotModel.tsx
+++ b/frontend/src/components/terminal/TerminalRobotModel.tsx
@@ -87,7 +87,7 @@ const TerminalRobotModel = ({ listingId }: Props) => {
       files={files}
       supportedThemes={["dark"]}
       showWireframe={true}
-      useControls={false}
+      useControls={true}
     />
   );
 };
diff --git a/frontend/src/components/terminal/TerminalSingleRobot.tsx b/frontend/src/components/terminal/TerminalSingleRobot.tsx
index 3260b07e..10af567a 100644
--- a/frontend/src/components/terminal/TerminalSingleRobot.tsx
+++ b/frontend/src/components/terminal/TerminalSingleRobot.tsx
@@ -7,6 +7,7 @@ import TerminalRobotModel from "@/components/terminal/TerminalRobotModel";
 import { SingleRobotResponse } from "@/components/terminal/types";
 import { Button } from "@/components/ui/button";
 import ROUTES from "@/lib/types/routes";
+import { FEATURE_FLAGS } from "@/lib/utils/featureFlags";
 
 interface Props {
   robot: SingleRobotResponse;
@@ -192,55 +193,99 @@ const TerminalSingleRobot = ({ robot, onUpdateRobot }: Props) => {
         </div>
       </div>
 
-      {/* Connection controls */}
-      <div className="mb-4 flex flex-wrap gap-4">
-        <Button onClick={handleConnect} variant="default" className="flex-1">
-          Connect
-        </Button>
-        <Button onClick={handleDisconnect} variant="default" className="flex-1">
-          Disconnect
-        </Button>
-      </div>
+      {/* Connection controls - Only show if ROBOT_STREAMING is enabled */}
+      {FEATURE_FLAGS.ROBOT_STREAMING && (
+        <div className="mb-4 flex flex-wrap gap-4">
+          <Button onClick={handleConnect} variant="default" className="flex-1">
+            Connect
+          </Button>
+          <Button
+            onClick={handleDisconnect}
+            variant="default"
+            className="flex-1"
+          >
+            Disconnect
+          </Button>
+        </div>
+      )}
 
       {/* Main grid layout */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4 min-h-[calc(100vh-8rem)]">
-        {/* Video and Audio feed panel */}
-        <div className="border border-gray-700 bg-black rounded-lg overflow-hidden flex flex-col">
-          <div className="p-4 space-y-4 flex-1 flex flex-col justify-center">
-            {/* Video container */}
-            <div className="relative w-full" style={{ paddingTop: "56.25%" }}>
-              <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center border-2 border-dashed border-gray-700 p-4">
-                Waiting for video connection...
+        {FEATURE_FLAGS.ROBOT_STREAMING ? (
+          <>
+            {/* Video and Audio feed panel */}
+            <div className="border border-gray-700 bg-black rounded-lg overflow-hidden flex flex-col">
+              <div className="p-4 space-y-4 flex-1 flex flex-col justify-center">
+                {/* Video container */}
+                <div
+                  className="relative w-full"
+                  style={{ paddingTop: "56.25%" }}
+                >
+                  <div className="absolute top-0 left-0 w-full h-full flex items-center justify-center border-2 border-dashed border-gray-700 p-4">
+                    Waiting for video connection...
+                  </div>
+                </div>
+
+                {/* Audio indicator */}
+                <div className="flex items-center gap-2">
+                  <div className="flex-shrink-0">
+                    <AudioIcon />
+                  </div>
+                  <div className="flex-1 h-2 bg-gray-900 rounded-full overflow-hidden">
+                    <div className="h-full w-0 bg-gray-700 rounded-full animate-pulse"></div>
+                  </div>
+                </div>
               </div>
             </div>
 
-            {/* Audio indicator */}
-            <div className="flex items-center gap-2">
-              <div className="flex-shrink-0">
-                <AudioIcon />
-              </div>
-              <div className="flex-1 h-2 bg-gray-900 rounded-full overflow-hidden">
-                <div className="h-full w-0 bg-gray-700 rounded-full animate-pulse"></div>
-              </div>
+            {/* 3D Mesh Visualization panel */}
+            <div className="border border-gray-700 bg-black rounded-lg h-full w-full overflow-hidden">
+              <TerminalRobotModel listingId={robot.listing_id} />
             </div>
+          </>
+        ) : (
+          // When streaming is disabled, 3D viewer takes full width and combined height
+          <div className="border border-gray-700 bg-black rounded-lg w-full overflow-hidden md:col-span-2 h-[calc(100vh-24rem)]">
+            <TerminalRobotModel listingId={robot.listing_id} />
           </div>
-        </div>
-
-        {/* 3D Mesh Visualization panel */}
-        <div className="border border-gray-700 bg-black rounded-lg h-full w-full overflow-hidden">
-          <TerminalRobotModel listingId={robot.listing_id} />
-        </div>
+        )}
 
         {/* Klang Input panel */}
         <div className="border border-gray-700 bg-black rounded-lg overflow-hidden min-h-[300px]">
           <div className="p-4 h-full flex flex-col gap-4">
-            <textarea
-              className="w-full h-full bg-black text-white border border-gray-700 p-2 font-mono resize-none focus:outline-none focus:ring-1 focus:border-white"
-              placeholder="Enter code here..."
-            />
-            <Button variant="default" className="w-full">
-              Execute
-            </Button>
+            {FEATURE_FLAGS.KLANG_EXECUTION ? (
+              <>
+                <textarea
+                  className="w-full h-full bg-black text-white border border-gray-700 p-2 font-mono resize-none focus:outline-none focus:ring-1 focus:border-white"
+                  placeholder="Enter code here..."
+                />
+                <Button variant="default" className="w-full">
+                  Execute
+                </Button>
+              </>
+            ) : (
+              <>
+                <div className="relative flex-1">
+                  <textarea
+                    className="w-full h-full bg-black text-gray-500 border border-gray-700 p-2 font-mono resize-none focus:outline-none cursor-not-allowed"
+                    placeholder="Klang code execution coming soon..."
+                    disabled
+                  />
+                  <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
+                    <span className="px-2 py-1 bg-gray-800 text-gray-400 rounded text-sm">
+                      Demo - In Development
+                    </span>
+                  </div>
+                </div>
+                <Button
+                  variant="outline"
+                  className="w-full opacity-50 cursor-not-allowed"
+                  disabled
+                >
+                  Execute
+                </Button>
+              </>
+            )}
           </div>
         </div>
 
diff --git a/frontend/src/lib/utils/featureFlags.ts b/frontend/src/lib/utils/featureFlags.ts
new file mode 100644
index 00000000..2678a03b
--- /dev/null
+++ b/frontend/src/lib/utils/featureFlags.ts
@@ -0,0 +1,7 @@
+export const FEATURE_FLAGS = {
+  KLANG_EXECUTION: false,
+  ROBOT_STREAMING: false,
+  DEMO_ROBOT_ENABLED: true,
+} as const;
+
+export type FeatureFlags = typeof FEATURE_FLAGS;
diff --git a/store/app/crud/base.py b/store/app/crud/base.py
index cdd8a036..abe00d58 100644
--- a/store/app/crud/base.py
+++ b/store/app/crud/base.py
@@ -407,20 +407,13 @@ async def _upload_to_s3(self, data: IO[bytes], name: str, filename: str, content
         try:
             bucket = await self.s3.Bucket(settings.s3.bucket)
 
-            import time
-            from datetime import UTC, datetime
-
-            logger.info("=== Time Debug Info ===")
-            logger.info(f"Container UTC time: {datetime.now(UTC).isoformat()}")
-            logger.info(f"Container local time: {datetime.now().isoformat()}")
-            logger.info(f"Container timezone: {time.tzname}")
-            logger.info(f"Container time.time(): {time.time()}")
+            sanitized_name = name.replace("\u202f", " ").replace("\xa0", " ")
 
             await bucket.put_object(
                 Key=f"{settings.s3.prefix}{filename}",
                 Body=data,
                 ContentType=content_type,
-                ContentDisposition=f'attachment; filename="{name}"',
+                ContentDisposition=f'attachment; filename="{sanitized_name}"',
             )
             logger.info("S3 upload successful")
         except ClientError as e: