diff --git a/frontend/common/src/components/SessionDrawer.js b/frontend/common/src/components/SessionDrawer.js
deleted file mode 100644
index f1b6311..0000000
--- a/frontend/common/src/components/SessionDrawer.js
+++ /dev/null
@@ -1,66 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SessionDrawer = void 0;
-var react_1 = require("react");
-var lucide_react_1 = require("lucide-react");
-var sheet_1 = require("./ui/sheet");
-var button_1 = require("./ui/button");
-var scroll_area_1 = require("./ui/scroll-area");
-var sample_data_1 = require("../utils/sample-data");
-var SessionDrawer = function (_a) {
-    var onSelectSession = _a.onSelectSession, currentSessionId = _a.currentSessionId, _b = _a.sessions, sessions = _b === void 0 ? (0, sample_data_1.getSampleAgentSessions)() : _b;
-    // Get status color
-    var getStatusColor = function (status) {
-        switch (status) {
-            case 'active':
-                return 'bg-blue-500';
-            case 'completed':
-                return 'bg-green-500';
-            case 'error':
-                return 'bg-red-500';
-            default:
-                return 'bg-gray-500';
-        }
-    };
-    // Format timestamp
-    var formatDate = function (date) {
-        return date.toLocaleDateString([], {
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-        });
-    };
-    return (<sheet_1.Sheet>
-      <sheet_1.SheetTrigger asChild>
-        <button_1.Button variant="ghost" size="icon" className="md:hidden">
-          <lucide_react_1.Menu className="h-5 w-5"/>
-          <span className="sr-only">Toggle navigation</span>
-        </button_1.Button>
-      </sheet_1.SheetTrigger>
-      <sheet_1.SheetContent side="left" className="w-[85%] sm:max-w-md">
-        <sheet_1.SheetHeader>
-          <sheet_1.SheetTitle>Sessions</sheet_1.SheetTitle>
-        </sheet_1.SheetHeader>
-        <scroll_area_1.ScrollArea className="h-[calc(100vh-5rem)] mt-6">
-          <div className="space-y-4">
-            {sessions.map(function (session) { return (<sheet_1.SheetClose key={session.id} asChild>
-                <button onClick={function () { return onSelectSession === null || onSelectSession === void 0 ? void 0 : onSelectSession(session.id); }} className={"w-full flex items-start p-3 text-left rounded-md transition-colors hover:bg-accent/50 ".concat(currentSessionId === session.id ? 'bg-accent' : '')}>
-                  <div className={"w-3 h-3 rounded-full ".concat(getStatusColor(session.status), " mt-1.5 mr-3 flex-shrink-0")}/>
-                  <div className="flex-1 min-w-0">
-                    <div className="font-medium truncate">{session.name}</div>
-                    <div className="text-xs text-muted-foreground mt-1">
-                      {session.steps.length} steps • {formatDate(session.updated)}
-                    </div>
-                    <div className="text-xs text-muted-foreground mt-1">
-                      <span className="capitalize">{session.status}</span>
-                    </div>
-                  </div>
-                </button>
-              </sheet_1.SheetClose>); })}
-          </div>
-        </scroll_area_1.ScrollArea>
-      </sheet_1.SheetContent>
-    </sheet_1.Sheet>);
-};
-exports.SessionDrawer = SessionDrawer;
diff --git a/frontend/common/src/components/SessionSidebar.js b/frontend/common/src/components/SessionSidebar.js
deleted file mode 100644
index e4b4808..0000000
--- a/frontend/common/src/components/SessionSidebar.js
+++ /dev/null
@@ -1,53 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SessionSidebar = void 0;
-var react_1 = require("react");
-var scroll_area_1 = require("./ui/scroll-area");
-var sample_data_1 = require("../utils/sample-data");
-var SessionSidebar = function (_a) {
-    var onSelectSession = _a.onSelectSession, currentSessionId = _a.currentSessionId, _b = _a.sessions, sessions = _b === void 0 ? (0, sample_data_1.getSampleAgentSessions)() : _b, _c = _a.className, className = _c === void 0 ? '' : _c;
-    // Get status color
-    var getStatusColor = function (status) {
-        switch (status) {
-            case 'active':
-                return 'bg-blue-500';
-            case 'completed':
-                return 'bg-green-500';
-            case 'error':
-                return 'bg-red-500';
-            default:
-                return 'bg-gray-500';
-        }
-    };
-    // Format timestamp
-    var formatDate = function (date) {
-        return date.toLocaleDateString([], {
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit'
-        });
-    };
-    return (<div className={"hidden md:block w-[250px] lg:w-[300px] h-screen border-r border-border ".concat(className)}>
-      <div className="p-4 border-b border-border">
-        <h3 className="font-medium text-lg">Sessions</h3>
-      </div>
-      <scroll_area_1.ScrollArea className="h-[calc(100vh-5rem)]">
-        <div className="p-4 space-y-4">
-          {sessions.map(function (session) { return (<button key={session.id} onClick={function () { return onSelectSession === null || onSelectSession === void 0 ? void 0 : onSelectSession(session.id); }} className={"w-full flex items-start p-3 text-left rounded-md transition-colors hover:bg-accent/50 ".concat(currentSessionId === session.id ? 'bg-accent' : '')}>
-              <div className={"w-3 h-3 rounded-full ".concat(getStatusColor(session.status), " mt-1.5 mr-3 flex-shrink-0")}/>
-              <div className="flex-1 min-w-0">
-                <div className="font-medium truncate">{session.name}</div>
-                <div className="text-xs text-muted-foreground mt-1">
-                  {session.steps.length} steps • {formatDate(session.updated)}
-                </div>
-                <div className="text-xs text-muted-foreground mt-1">
-                  <span className="capitalize">{session.status}</span>
-                </div>
-              </div>
-            </button>); })}
-        </div>
-      </scroll_area_1.ScrollArea>
-    </div>);
-};
-exports.SessionSidebar = SessionSidebar;
diff --git a/frontend/common/src/components/TimelineFeed.js b/frontend/common/src/components/TimelineFeed.js
deleted file mode 100644
index 1d0694c..0000000
--- a/frontend/common/src/components/TimelineFeed.js
+++ /dev/null
@@ -1,103 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineFeed = void 0;
-var react_1 = require("react");
-var scroll_area_1 = require("./ui/scroll-area");
-var TimelineStep_1 = require("./TimelineStep");
-var TimelineFeed = function (_a) {
-    var steps = _a.steps, _b = _a.maxHeight, maxHeight = _b === void 0 ? '500px' : _b, filter = _a.filter, _c = _a.sortOrder, sortOrder = _c === void 0 ? 'desc' : _c;
-    // State for filtered and sorted steps
-    var _d = (0, react_1.useState)(filter), activeFilter = _d[0], setActiveFilter = _d[1];
-    var _e = (0, react_1.useState)(sortOrder), activeSortOrder = _e[0], setActiveSortOrder = _e[1];
-    // Apply filters and sorting
-    var filteredSteps = steps.filter(function (step) {
-        if (!activeFilter)
-            return true;
-        var typeMatch = !activeFilter.types || activeFilter.types.length === 0 ||
-            activeFilter.types.includes(step.type);
-        var statusMatch = !activeFilter.status || activeFilter.status.length === 0 ||
-            activeFilter.status.includes(step.status);
-        return typeMatch && statusMatch;
-    });
-    // Sort steps
-    var sortedSteps = __spreadArray([], filteredSteps, true).sort(function (a, b) {
-        if (activeSortOrder === 'asc') {
-            return a.timestamp.getTime() - b.timestamp.getTime();
-        }
-        else {
-            return b.timestamp.getTime() - a.timestamp.getTime();
-        }
-    });
-    // Toggle sort order
-    var toggleSortOrder = function () {
-        setActiveSortOrder(function (prevOrder) { return prevOrder === 'asc' ? 'desc' : 'asc'; });
-    };
-    // Filter by type
-    var filterTypes = [
-        'all',
-        'tool-execution',
-        'thinking',
-        'planning',
-        'implementation',
-        'user-input'
-    ];
-    var handleFilterChange = function (type) {
-        if (type === 'all') {
-            setActiveFilter(__assign(__assign({}, activeFilter), { types: [] }));
-        }
-        else {
-            setActiveFilter(__assign(__assign({}, activeFilter), { types: [type] }));
-        }
-    };
-    return (<div className="w-full border border-border rounded-md bg-background">
-      <div className="p-3 border-b border-border">
-        <div className="flex justify-between items-center mb-2">
-          <h3 className="font-medium">Timeline Feed</h3>
-          <button onClick={toggleSortOrder} className="text-xs bg-secondary hover:bg-secondary/80 text-secondary-foreground px-2 py-1 rounded">
-            {activeSortOrder === 'asc' ? '⬆️ Oldest first' : '⬇️ Newest first'}
-          </button>
-        </div>
-        
-        <div className="flex gap-2 overflow-x-auto pb-2 text-xs">
-          {filterTypes.map(function (type) {
-            var _a;
-            return (<button key={type} onClick={function () { return handleFilterChange(type); }} className={"px-2 py-1 rounded whitespace-nowrap ".concat(type === 'all' && (!(activeFilter === null || activeFilter === void 0 ? void 0 : activeFilter.types) || activeFilter.types.length === 0) ||
-                    ((_a = activeFilter === null || activeFilter === void 0 ? void 0 : activeFilter.types) === null || _a === void 0 ? void 0 : _a.includes(type))
-                    ? 'bg-primary text-primary-foreground'
-                    : 'bg-secondary/50 text-secondary-foreground hover:bg-secondary/80')}>
-              {type === 'all' ? 'All types' : type}
-            </button>);
-        })}
-        </div>
-      </div>
-      
-      <scroll_area_1.ScrollArea className="h-full" style={{ maxHeight: maxHeight }}>
-        <div className="p-3">
-          {sortedSteps.length > 0 ? (sortedSteps.map(function (step) { return (<TimelineStep_1.TimelineStep key={step.id} step={step}/>); })) : (<div className="text-center text-muted-foreground py-8">
-              No steps to display
-            </div>)}
-        </div>
-      </scroll_area_1.ScrollArea>
-    </div>);
-};
-exports.TimelineFeed = TimelineFeed;
diff --git a/frontend/common/src/components/TimelineStep.js b/frontend/common/src/components/TimelineStep.js
deleted file mode 100644
index 931af59..0000000
--- a/frontend/common/src/components/TimelineStep.js
+++ /dev/null
@@ -1,76 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineStep = void 0;
-var react_1 = require("react");
-var collapsible_1 = require("./ui/collapsible");
-var TimelineStep = function (_a) {
-    var step = _a.step;
-    // Get status color
-    var getStatusColor = function (status) {
-        switch (status) {
-            case 'completed':
-                return 'bg-green-500';
-            case 'in-progress':
-                return 'bg-blue-500';
-            case 'error':
-                return 'bg-red-500';
-            case 'pending':
-                return 'bg-yellow-500';
-            default:
-                return 'bg-gray-500';
-        }
-    };
-    // Get icon based on step type
-    var getTypeIcon = function (type) {
-        switch (type) {
-            case 'tool-execution':
-                return '🛠️';
-            case 'thinking':
-                return '💭';
-            case 'planning':
-                return '📝';
-            case 'implementation':
-                return '💻';
-            case 'user-input':
-                return '👤';
-            default:
-                return '▶️';
-        }
-    };
-    // Format timestamp
-    var formatTime = function (timestamp) {
-        return timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-    };
-    return (<collapsible_1.Collapsible className="w-full mb-4 border border-border rounded-md overflow-hidden transition-all duration-200">
-      <collapsible_1.CollapsibleTrigger className="w-full flex items-center justify-between p-3 text-left hover:bg-accent/50 cursor-pointer">
-        <div className="flex items-center">
-          <div className={"w-3 h-3 rounded-full ".concat(getStatusColor(step.status), " mr-3")}/>
-          <div className="mr-2">{getTypeIcon(step.type)}</div>
-          <div>
-            <div className="font-medium">{step.title}</div>
-            <div className="text-sm text-muted-foreground truncate max-w-xs">
-              {step.type === 'tool-execution' ? 'Run tool' : step.content.substring(0, 60)}
-              {step.content.length > 60 ? '...' : ''}
-            </div>
-          </div>
-        </div>
-        <div className="text-xs text-muted-foreground flex flex-col items-end">
-          <span>{formatTime(step.timestamp)}</span>
-          {step.duration && (<span className="mt-1">{(step.duration / 1000).toFixed(1)}s</span>)}
-        </div>
-      </collapsible_1.CollapsibleTrigger>
-      <collapsible_1.CollapsibleContent>
-        <div className="p-4 bg-card border-t border-border">
-          <div className="text-sm whitespace-pre-wrap">
-            {step.content}
-          </div>
-          {step.duration && (<div className="mt-3 pt-3 border-t border-border">
-              <div className="text-xs text-muted-foreground">
-                Duration: {(step.duration / 1000).toFixed(1)} seconds
-              </div>
-            </div>)}
-        </div>
-      </collapsible_1.CollapsibleContent>
-    </collapsible_1.Collapsible>);
-};
-exports.TimelineStep = TimelineStep;
diff --git a/frontend/common/src/components/ui/button.js b/frontend/common/src/components/ui/button.js
deleted file mode 100644
index 016289f..0000000
--- a/frontend/common/src/components/ui/button.js
+++ /dev/null
@@ -1,48 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonVariants = exports.Button = void 0;
-var React = require("react");
-var react_slot_1 = require("@radix-ui/react-slot");
-var class_variance_authority_1 = require("class-variance-authority");
-var utils_1 = require("../../utils");
-var buttonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", {
-    variants: {
-        variant: {
-            default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-            destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-            outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-            secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-            ghost: "hover:bg-accent hover:text-accent-foreground",
-            link: "text-primary underline-offset-4 hover:underline",
-        },
-        size: {
-            default: "h-9 px-4 py-2",
-            sm: "h-8 rounded-md px-3 text-xs",
-            lg: "h-10 rounded-md px-8",
-            icon: "h-9 w-9",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "default",
-    },
-});
-exports.buttonVariants = buttonVariants;
-var Button = React.forwardRef(function (_a, ref) {
-    var className = _a.className, variant = _a.variant, size = _a.size, _b = _a.asChild, asChild = _b === void 0 ? false : _b, props = __rest(_a, ["className", "variant", "size", "asChild"]);
-    var Comp = asChild ? react_slot_1.Slot : "button";
-    return (<Comp className={(0, utils_1.cn)(buttonVariants({ variant: variant, size: size, className: className }))} ref={ref} {...props}/>);
-});
-exports.Button = Button;
-Button.displayName = "Button";
diff --git a/frontend/common/src/components/ui/card.js b/frontend/common/src/components/ui/card.js
deleted file mode 100644
index aeb7227..0000000
--- a/frontend/common/src/components/ui/card.js
+++ /dev/null
@@ -1,52 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CardContent = exports.CardDescription = exports.CardTitle = exports.CardFooter = exports.CardHeader = exports.Card = void 0;
-var React = require("react");
-var utils_1 = require("../../utils");
-var Card = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<div ref={ref} className={(0, utils_1.cn)("rounded-xl border bg-card text-card-foreground shadow", className)} {...props}/>);
-});
-exports.Card = Card;
-Card.displayName = "Card";
-var CardHeader = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<div ref={ref} className={(0, utils_1.cn)("flex flex-col space-y-1.5 p-6", className)} {...props}/>);
-});
-exports.CardHeader = CardHeader;
-CardHeader.displayName = "CardHeader";
-var CardTitle = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<h3 ref={ref} className={(0, utils_1.cn)("font-semibold leading-none tracking-tight", className)} {...props}/>);
-});
-exports.CardTitle = CardTitle;
-CardTitle.displayName = "CardTitle";
-var CardDescription = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<p ref={ref} className={(0, utils_1.cn)("text-sm text-muted-foreground", className)} {...props}/>);
-});
-exports.CardDescription = CardDescription;
-CardDescription.displayName = "CardDescription";
-var CardContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<div ref={ref} className={(0, utils_1.cn)("p-6 pt-0", className)} {...props}/>);
-});
-exports.CardContent = CardContent;
-CardContent.displayName = "CardContent";
-var CardFooter = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<div ref={ref} className={(0, utils_1.cn)("flex items-center p-6 pt-0", className)} {...props}/>);
-});
-exports.CardFooter = CardFooter;
-CardFooter.displayName = "CardFooter";
diff --git a/frontend/common/src/components/ui/collapsible.js b/frontend/common/src/components/ui/collapsible.js
deleted file mode 100644
index 03b31ea..0000000
--- a/frontend/common/src/components/ui/collapsible.js
+++ /dev/null
@@ -1,29 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = void 0;
-var React = require("react");
-var CollapsiblePrimitive = require("@radix-ui/react-collapsible");
-var utils_1 = require("../../utils");
-var Collapsible = CollapsiblePrimitive.Root;
-exports.Collapsible = Collapsible;
-var CollapsibleTrigger = CollapsiblePrimitive.Trigger;
-exports.CollapsibleTrigger = CollapsibleTrigger;
-var CollapsibleContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (<CollapsiblePrimitive.Content ref={ref} className={(0, utils_1.cn)("overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", className)} {...props}>
-    {children}
-  </CollapsiblePrimitive.Content>);
-});
-exports.CollapsibleContent = CollapsibleContent;
-CollapsibleContent.displayName = "CollapsibleContent";
diff --git a/frontend/common/src/components/ui/index.js b/frontend/common/src/components/ui/index.js
deleted file mode 100644
index 3aedba0..0000000
--- a/frontend/common/src/components/ui/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./button"), exports);
-__exportStar(require("./card"), exports);
-__exportStar(require("./collapsible"), exports);
-__exportStar(require("./input"), exports);
-__exportStar(require("./sheet"), exports);
-__exportStar(require("./switch"), exports);
-__exportStar(require("./scroll-area"), exports);
diff --git a/frontend/common/src/components/ui/input.js b/frontend/common/src/components/ui/input.js
deleted file mode 100644
index 47ac0f8..0000000
--- a/frontend/common/src/components/ui/input.js
+++ /dev/null
@@ -1,22 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Input = void 0;
-var React = require("react");
-var utils_1 = require("../../utils");
-var Input = React.forwardRef(function (_a, ref) {
-    var className = _a.className, type = _a.type, props = __rest(_a, ["className", "type"]);
-    return (<input type={type} className={(0, utils_1.cn)("flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", className)} ref={ref} {...props}/>);
-});
-exports.Input = Input;
-Input.displayName = "Input";
diff --git a/frontend/common/src/components/ui/scroll-area.js b/frontend/common/src/components/ui/scroll-area.js
deleted file mode 100644
index 4c5c39e..0000000
--- a/frontend/common/src/components/ui/scroll-area.js
+++ /dev/null
@@ -1,40 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ScrollBar = exports.ScrollArea = void 0;
-var React = require("react");
-var ScrollAreaPrimitive = require("@radix-ui/react-scroll-area");
-var utils_1 = require("../../utils");
-var ScrollArea = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (<ScrollAreaPrimitive.Root ref={ref} className={(0, utils_1.cn)("relative overflow-hidden", className)} {...props}>
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollBar orientation="horizontal"/>
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>);
-});
-exports.ScrollArea = ScrollArea;
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React.forwardRef(function (_a, ref) {
-    var className = _a.className, _b = _a.orientation, orientation = _b === void 0 ? "vertical" : _b, props = __rest(_a, ["className", "orientation"]);
-    return (<ScrollAreaPrimitive.ScrollAreaScrollbar ref={ref} orientation={orientation} className={(0, utils_1.cn)("flex touch-none select-none transition-colors", orientation === "vertical" &&
-            "h-full w-2.5 border-l border-l-transparent p-[1px]", orientation === "horizontal" &&
-            "h-2.5 border-t border-t-transparent p-[1px]", className)} {...props}>
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border"/>
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>);
-});
-exports.ScrollBar = ScrollBar;
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
diff --git a/frontend/common/src/components/ui/sheet.js b/frontend/common/src/components/ui/sheet.js
deleted file mode 100644
index a56b653..0000000
--- a/frontend/common/src/components/ui/sheet.js
+++ /dev/null
@@ -1,83 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SheetDescription = exports.SheetTitle = exports.SheetFooter = exports.SheetHeader = exports.SheetContent = exports.SheetClose = exports.SheetTrigger = exports.Sheet = void 0;
-var React = require("react");
-var SheetPrimitive = require("@radix-ui/react-dialog");
-var class_variance_authority_1 = require("class-variance-authority");
-var lucide_react_1 = require("lucide-react");
-var utils_1 = require("../../utils");
-var Sheet = SheetPrimitive.Root;
-exports.Sheet = Sheet;
-var SheetTrigger = SheetPrimitive.Trigger;
-exports.SheetTrigger = SheetTrigger;
-var SheetClose = SheetPrimitive.Close;
-exports.SheetClose = SheetClose;
-var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<SheetPrimitive.Overlay className={(0, utils_1.cn)("fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className)} {...props} ref={ref}/>);
-});
-SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
-var sheetVariants = (0, class_variance_authority_1.cva)("fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500", {
-    variants: {
-        side: {
-            top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-            right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-            bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-            left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        },
-    },
-    defaultVariants: {
-        side: "right",
-    },
-});
-var SheetContent = React.forwardRef(function (_a, ref) {
-    var _b = _a.side, side = _b === void 0 ? "right" : _b, className = _a.className, children = _a.children, props = __rest(_a, ["side", "className", "children"]);
-    return (<SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content ref={ref} className={(0, utils_1.cn)(sheetVariants({ side: side }), className)} {...props}>
-      {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
-        <lucide_react_1.X className="h-4 w-4"/>
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-    </SheetPrimitive.Content>
-  </SheetPortal>);
-});
-exports.SheetContent = SheetContent;
-SheetContent.displayName = SheetPrimitive.Content.displayName;
-var SheetHeader = function (_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<div className={(0, utils_1.cn)("flex flex-col space-y-2 text-center sm:text-left", className)} {...props}/>);
-};
-exports.SheetHeader = SheetHeader;
-SheetHeader.displayName = "SheetHeader";
-var SheetFooter = function (_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<div className={(0, utils_1.cn)("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props}/>);
-};
-exports.SheetFooter = SheetFooter;
-SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<SheetPrimitive.Title ref={ref} className={(0, utils_1.cn)("text-lg font-semibold text-foreground", className)} {...props}/>);
-});
-exports.SheetTitle = SheetTitle;
-SheetTitle.displayName = SheetPrimitive.Title.displayName;
-var SheetDescription = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<SheetPrimitive.Description ref={ref} className={(0, utils_1.cn)("text-sm text-muted-foreground", className)} {...props}/>);
-});
-exports.SheetDescription = SheetDescription;
-SheetDescription.displayName = SheetPrimitive.Description.displayName;
diff --git a/frontend/common/src/components/ui/switch.js b/frontend/common/src/components/ui/switch.js
deleted file mode 100644
index c56cb22..0000000
--- a/frontend/common/src/components/ui/switch.js
+++ /dev/null
@@ -1,25 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = void 0;
-var React = require("react");
-var SwitchPrimitives = require("@radix-ui/react-switch");
-var utils_1 = require("../../utils");
-var Switch = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (<SwitchPrimitives.Root className={(0, utils_1.cn)("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", className)} {...props} ref={ref}>
-    <SwitchPrimitives.Thumb className={(0, utils_1.cn)("pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0")}/>
-  </SwitchPrimitives.Root>);
-});
-exports.Switch = Switch;
-Switch.displayName = SwitchPrimitives.Root.displayName;
diff --git a/frontend/common/src/index.js b/frontend/common/src/index.js
deleted file mode 100644
index 286b602..0000000
--- a/frontend/common/src/index.js
+++ /dev/null
@@ -1,38 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.hello = exports.getSampleAgentSteps = exports.getSampleAgentSessions = void 0;
-// Entry point for @ra-aid/common package
-require("./styles/global.css");
-// Direct imports from sample-data
-var sample_data_1 = require("./utils/sample-data");
-Object.defineProperty(exports, "getSampleAgentSessions", { enumerable: true, get: function () { return sample_data_1.getSampleAgentSessions; } });
-Object.defineProperty(exports, "getSampleAgentSteps", { enumerable: true, get: function () { return sample_data_1.getSampleAgentSteps; } });
-// Export utility functions
-__exportStar(require("./utils"), exports);
-// Export all UI components
-__exportStar(require("./components/ui"), exports);
-// Export timeline components
-__exportStar(require("./components/TimelineStep"), exports);
-__exportStar(require("./components/TimelineFeed"), exports);
-// Export session navigation components
-__exportStar(require("./components/SessionDrawer"), exports);
-__exportStar(require("./components/SessionSidebar"), exports);
-// Export the hello function (temporary example)
-var hello = function () {
-    console.log("Hello from @ra-aid/common");
-};
-exports.hello = hello;
diff --git a/frontend/common/src/utils.js b/frontend/common/src/utils.js
deleted file mode 100644
index f4f70f3..0000000
--- a/frontend/common/src/utils.js
+++ /dev/null
@@ -1,32 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cn = cn;
-var clsx_1 = require("clsx");
-var tailwind_merge_1 = require("tailwind-merge");
-/**
- * Merges class names with Tailwind CSS classes
- * Combines clsx for conditional logic and tailwind-merge for handling conflicting tailwind classes
- */
-function cn() {
-    var inputs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        inputs[_i] = arguments[_i];
-    }
-    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
-}
-// Re-export everything from utils directory
-__exportStar(require("./utils"), exports);
diff --git a/frontend/common/src/utils/index.js b/frontend/common/src/utils/index.js
deleted file mode 100644
index 6cc63b7..0000000
--- a/frontend/common/src/utils/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cn = cn;
-var clsx_1 = require("clsx");
-var tailwind_merge_1 = require("tailwind-merge");
-/**
- * Merges class names with Tailwind CSS classes
- * Combines clsx for conditional logic and tailwind-merge for handling conflicting tailwind classes
- */
-function cn() {
-    var inputs = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        inputs[_i] = arguments[_i];
-    }
-    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
-}
-// Export sample data utilities
-__exportStar(require("./sample-data"), exports);
diff --git a/frontend/common/src/utils/sample-data.js b/frontend/common/src/utils/sample-data.js
deleted file mode 100644
index c6bc520..0000000
--- a/frontend/common/src/utils/sample-data.js
+++ /dev/null
@@ -1,163 +0,0 @@
-"use strict";
-/**
- * Sample data utility for agent UI components demonstration
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSampleAgentSteps = getSampleAgentSteps;
-exports.getSampleAgentSessions = getSampleAgentSessions;
-/**
- * Returns an array of sample agent steps
- */
-function getSampleAgentSteps() {
-    return [
-        {
-            id: "step-1",
-            timestamp: new Date(Date.now() - 30 * 60000), // 30 minutes ago
-            status: 'completed',
-            type: 'planning',
-            title: 'Initial Planning',
-            content: 'I need to analyze the codebase structure to understand the existing components and their relationships.',
-            duration: 5200
-        },
-        {
-            id: "step-2",
-            timestamp: new Date(Date.now() - 25 * 60000), // 25 minutes ago
-            status: 'completed',
-            type: 'tool-execution',
-            title: 'List Directory Structure',
-            content: 'Executing: list_directory_tree(path="src/", max_depth=2)\n\n📁 /project/src/\n├── 📁 components/\n│   ├── 📁 ui/\n│   └── App.tsx\n├── 📁 utils/\n└── index.tsx',
-            duration: 1800
-        },
-        {
-            id: "step-3",
-            timestamp: new Date(Date.now() - 20 * 60000), // 20 minutes ago
-            status: 'completed',
-            type: 'thinking',
-            title: 'Component Analysis',
-            content: 'Based on the directory structure, I see that the UI components are organized in a dedicated folder. I should examine the existing component patterns before implementing new ones.',
-            duration: 3500
-        },
-        {
-            id: "step-4",
-            timestamp: new Date(Date.now() - 15 * 60000), // 15 minutes ago
-            status: 'completed',
-            type: 'tool-execution',
-            title: 'Read Component Code',
-            content: 'Executing: read_file_tool(filepath="src/components/ui/Button.tsx")\n\n```tsx\nimport { cn } from "../../utils";\n\nexport interface ButtonProps {\n  // Component props...\n}\n\nexport function Button({ children, ...props }: ButtonProps) {\n  // Component implementation...\n}\n```',
-            duration: 2100
-        },
-        {
-            id: "step-5",
-            timestamp: new Date(Date.now() - 10 * 60000), // 10 minutes ago
-            status: 'completed',
-            type: 'implementation',
-            title: 'Creating NavBar Component',
-            content: 'I\'m creating a NavBar component following the design system patterns:\n\n```tsx\nimport { cn } from "../../utils";\n\nexport interface NavBarProps {\n  // New component props...\n}\n\nexport function NavBar({ ...props }: NavBarProps) {\n  // New component implementation...\n}\n```',
-            duration: 6800
-        },
-        {
-            id: "step-6",
-            timestamp: new Date(Date.now() - 5 * 60000), // 5 minutes ago
-            status: 'in-progress',
-            type: 'implementation',
-            title: 'Styling Timeline Component',
-            content: 'Currently working on styling the Timeline component to match the design system:\n\n```tsx\n// Work in progress...\nexport function Timeline({ steps, ...props }: TimelineProps) {\n  // Current implementation...\n}\n```',
-        },
-        {
-            id: "step-7",
-            timestamp: new Date(Date.now() - 2 * 60000), // 2 minutes ago
-            status: 'error',
-            type: 'tool-execution',
-            title: 'Running Tests',
-            content: 'Error executing: run_shell_command(command="npm test")\n\nTest failed: TypeError: Cannot read property \'steps\' of undefined',
-            duration: 3200
-        },
-        {
-            id: "step-8",
-            timestamp: new Date(), // Now
-            status: 'pending',
-            type: 'planning',
-            title: 'Next Steps',
-            content: 'Need to plan the implementation of the SessionDrawer component...',
-        }
-    ];
-}
-/**
- * Returns an array of sample agent sessions
- */
-function getSampleAgentSessions() {
-    var steps = getSampleAgentSteps();
-    return [
-        {
-            id: "session-1",
-            name: "UI Component Implementation",
-            created: new Date(Date.now() - 35 * 60000), // 35 minutes ago
-            updated: new Date(), // Now
-            status: 'active',
-            steps: steps
-        },
-        {
-            id: "session-2",
-            name: "API Integration",
-            created: new Date(Date.now() - 2 * 3600000), // 2 hours ago
-            updated: new Date(Date.now() - 30 * 60000), // 30 minutes ago
-            status: 'completed',
-            steps: [
-                {
-                    id: "other-step-1",
-                    timestamp: new Date(Date.now() - 2 * 3600000), // 2 hours ago
-                    status: 'completed',
-                    type: 'planning',
-                    title: 'API Integration Planning',
-                    content: 'Planning the integration with the backend API...',
-                    duration: 4500
-                },
-                {
-                    id: "other-step-2",
-                    timestamp: new Date(Date.now() - 1.5 * 3600000), // 1.5 hours ago
-                    status: 'completed',
-                    type: 'implementation',
-                    title: 'Implementing API Client',
-                    content: 'Creating API client with fetch utilities...',
-                    duration: 7200
-                },
-                {
-                    id: "other-step-3",
-                    timestamp: new Date(Date.now() - 1 * 3600000), // 1 hour ago
-                    status: 'completed',
-                    type: 'tool-execution',
-                    title: 'Testing API Endpoints',
-                    content: 'Running tests against API endpoints...',
-                    duration: 5000
-                }
-            ]
-        },
-        {
-            id: "session-3",
-            name: "Bug Fixes",
-            created: new Date(Date.now() - 5 * 3600000), // 5 hours ago
-            updated: new Date(Date.now() - 4 * 3600000), // 4 hours ago
-            status: 'error',
-            steps: [
-                {
-                    id: "bug-step-1",
-                    timestamp: new Date(Date.now() - 5 * 3600000), // 5 hours ago
-                    status: 'completed',
-                    type: 'planning',
-                    title: 'Bug Analysis',
-                    content: 'Analyzing reported bugs from issue tracker...',
-                    duration: 3600
-                },
-                {
-                    id: "bug-step-2",
-                    timestamp: new Date(Date.now() - 4.5 * 3600000), // 4.5 hours ago
-                    status: 'error',
-                    type: 'implementation',
-                    title: 'Fixing Authentication Bug',
-                    content: 'Error: Unable to resolve dependency conflict with auth package',
-                    duration: 2500
-                }
-            ]
-        }
-    ];
-}