UI fixes

src/app/agents/[id]/edit/page.tsx

@@ -6,6 +6,7 @@ import { AgentForm } from "@/components/agents/agent-form";
 import { Agent } from "@/types/supabase";
 import { supabase } from "@/utils/supabase/client";
 import { useSessionStore } from "@/store/session";
+import { getRandomImageUrl } from "@/lib/generate-image";
 
 export const runtime = "edge";
 
@@ -66,15 +67,9 @@ export default function EditAgentPage() {
     e.preventDefault();
     if (!agent) return;
 
-    const imageUrlName = `${agent.name}_${
-      stxAddresses[network as keyof typeof stxAddresses]
-    }`;
-
     const updatedAgent = {
       ...agent,
-      image_url: `https://bitcoinfaces.xyz/api/get-image?name=${encodeURIComponent(
-        imageUrlName
-      )}`,
+      image_url: getRandomImageUrl(),
     };
 
     setSaving(true);

src/app/agents/new/page.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useRouter } from "next/navigation";
 import { AgentForm } from "@/components/agents/agent-form";
 import { Agent } from "@/types/supabase";
 import { supabase } from "@/utils/supabase/client";
 import { useSessionStore } from "@/store/session";
 import { useWalletStore } from "@/store/wallet";
+import { getRandomImageUrl } from "@/lib/generate-image";
 
 // Loading Modal Component
 const LoadingModal = () => (
@@ -24,10 +25,6 @@ export default function NewAgentPage() {
   const router = useRouter();
   const { userId } = useSessionStore();
   const fetchWallets = useWalletStore((state) => state.fetchWallets);
-  const [stxAddresses, setStxAddresses] = useState<{
-    testnet: string;
-    mainnet: string;
-  }>({ testnet: "", mainnet: "" });
 
   const [agent, setAgent] = useState<Partial<Agent>>({
     name: "",
@@ -41,38 +38,12 @@ export default function NewAgentPage() {
   const [saving, setSaving] = useState(false);
   const [showLoadingModal, setShowLoadingModal] = useState(false);
 
-  useEffect(() => {
-    try {
-      const blockstackSession = localStorage.getItem("blockstack-session");
-      if (blockstackSession) {
-        const sessionData = JSON.parse(blockstackSession);
-        const addresses = sessionData?.userData?.profile?.stxAddress;
-        if (addresses) {
-          setStxAddresses({
-            testnet: addresses.testnet,
-            mainnet: addresses.mainnet,
-          });
-        }
-      }
-    } catch (error) {
-      console.error("Error reading blockstack session:", error);
-    }
-  }, []);
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
-    // Create combined name for image URL only
-    const imageUrlName = `${agent.name}_${
-      process.env.NEXT_PUBLIC_STACKS_NETWORK === "mainnet"
-        ? stxAddresses.mainnet
-        : stxAddresses.testnet
-    }`;
     const updatedAgent = {
       ...agent,
-      image_url: `https://bitcoinfaces.xyz/api/get-image?name=${encodeURIComponent(
-        imageUrlName
-      )}`,
+      image_url: getRandomImageUrl(),
     };
 
     setSaving(true);

src/app/agents/page.tsx

@@ -5,7 +5,6 @@ import { Button } from "@/components/ui/button";
 import { Plus, Archive } from "lucide-react";
 import { Heading } from "@/components/ui/heading";
 import { useAgentsList } from "@/hooks/use-agents-list";
-import Image from "next/image";
 import { useState } from "react";
 import { cn } from "@/lib/utils";
 
@@ -46,24 +45,31 @@ export default function AgentsPage() {
       </div>
 
       {/* Active Agents */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {activeAgents.map((agent) => (
           <Link
             href={`/agents/${agent.id}`}
             key={agent.id}
-            className="group relative bg-card hover:bg-muted transition-colors duration-200 rounded-lg overflow-hidden"
+            className="group flex items-center p-4 bg-card hover:bg-muted transition-colors duration-200 rounded-lg"
           >
-            <div className="aspect-[4/3] relative">
-              <Image
-                src={agent.image_url || "/placeholder-agent.png"}
-                alt={agent.name}
-                fill
-                unoptimized={true}
-                className="object-cover w-full h-full"
-              />
+            <div
+              className="relative w-16 h-16 flex-shrink-0 rounded-full overflow-hidden"
+              style={{
+                backgroundImage: `url(${
+                  agent.image_url || "/placeholder-agent.png"
+                })`,
+                backgroundSize: "cover",
+                backgroundPosition: "center",
+              }}
+            >
+              <div className="absolute inset-0 bg-black/20 flex items-center justify-center">
+                <span className="text-2xl font-bold text-white">
+                  {agent.name ? agent.name.charAt(0).toUpperCase() : "?"}
+                </span>
+              </div>
             </div>
-            <div className="p-4">
-              <h3 className="font-medium text-lg">{agent.name}</h3>
+            <div className="ml-4 flex-grow">
+              <h3 className="font-medium text-base">{agent.name}</h3>
               <p className="text-sm text-muted-foreground mt-1 line-clamp-2">
                 {agent.goal || agent.role}
               </p>
@@ -80,25 +86,32 @@ export default function AgentsPage() {
               Archived Agents
             </h2>
           </div>
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
             {archivedAgents.map((agent) => (
               <Link
                 href={`/agents/${agent.id}`}
                 key={agent.id}
-                className="group relative bg-card hover:bg-muted transition-colors duration-200 rounded-lg overflow-hidden opacity-75 hover:opacity-100"
+                className="group flex items-center p-4 bg-card hover:bg-muted transition-colors duration-200 rounded-lg opacity-75 hover:opacity-100"
               >
-                <div className="aspect-[4/3] relative grayscale group-hover:grayscale-0 transition-all duration-200">
-                  <Image
-                    src={agent.image_url || "/placeholder-agent.png"}
-                    alt={agent.name}
-                    fill
-                    unoptimized={true}
-                    className="object-cover w-full h-full"
-                  />
+                <div
+                  className="relative w-16 h-16 flex-shrink-0 rounded-full overflow-hidden"
+                  style={{
+                    backgroundImage: `url(${
+                      agent.image_url || "/placeholder-agent.png"
+                    })`,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                  }}
+                >
+                  <div className="absolute inset-0 bg-black/20 flex items-center justify-center group-hover:bg-black/10 transition-colors">
+                    <span className="text-2xl font-bold text-white">
+                      {agent.name ? agent.name.charAt(0).toUpperCase() : "?"}
+                    </span>
+                  </div>
                 </div>
-                <div className="p-4">
-                  <div className="flex items-center gap-2 mb-2">
-                    <h3 className="font-medium text-lg">{agent.name}</h3>
+                <div className="ml-4 flex-grow">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-medium text-base">{agent.name}</h3>
                     <span className="px-2 py-0.5 rounded text-xs font-medium bg-zinc-800/40 text-zinc-400">
                       Archived
                     </span>

src/app/application-layout.tsx

@@ -4,15 +4,7 @@ import * as React from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { cn } from "@/lib/utils";
-import {
-  Users,
-  MessageSquare,
-  Boxes,
-  Menu,
-  Wallet,
-  X,
-  LogOut,
-} from "lucide-react";
+import { Users, Boxes, Menu, Wallet, X, LogOut } from "lucide-react";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { WalletPanel } from "@/components/wallet/wallet-panel";
 import { ThreadList } from "@/components/threads/thread-list";
@@ -26,10 +18,10 @@ interface ApplicationLayoutProps {
 }
 
 const navigation = [
-  { name: "Chat", href: "/chat", icon: MessageSquare },
-  { name: "Agents", href: "/agents", icon: Users },
-  { name: "DAOs", href: "/daos", icon: Boxes },
+  { id: "agents", name: "Agents", href: "/agents", icon: Users },
+  { id: "daos", name: "DAOs", href: "/daos", icon: Boxes },
   {
+    id: "profile",
     name: "Profile",
     href: "/profile",
     icon: ({ className }: { className?: string }) => (
@@ -82,7 +74,12 @@ export default function ApplicationLayout({
             width={20}
             height={20}
           />
-          <span className="text-lg font-medium text-white">AIBTCDEV</span>
+          <Image
+            src="/logos/aibtcdev-primary-logo-white-wide-1000px.png"
+            alt="AIBTCDEV"
+            width={150}
+            height={300}
+          />
         </div>
         <Button
           variant="ghost"
@@ -118,7 +115,12 @@ export default function ApplicationLayout({
                 width={20}
                 height={20}
               />
-              <span className="text-lg font-medium text-white">AIBTCDEV</span>
+              <Image
+                src="/logos/aibtcdev-primary-logo-white-wide-1000px.png"
+                alt="AIBTCDEV"
+                width={150}
+                height={300}
+              />
             </div>
             <Button
               variant="ghost"
@@ -132,14 +134,19 @@ export default function ApplicationLayout({
 
           {/* Navigation */}
           <div className="flex flex-col h-[calc(100vh-3.5rem)]">
+            {/* Thread List */}
+            <div className="flex-1 overflow-y-auto">
+              <ThreadList setLeftPanelOpen={setLeftPanelOpen} />
+            </div>
             <nav className="flex-none p-2" id="step4">
               <div className="space-y-1">
                 {navigation.map((item) => {
                   const isActive = pathname === item.href;
                   return (
                     <Link
-                      key={item.name}
+                      key={item.id}
                       href={item.href}
+                      id={item.id}
                       className={cn(
                         "flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-lg transition-colors",
                         isActive
@@ -155,11 +162,6 @@ export default function ApplicationLayout({
               </div>
             </nav>
 
-            {/* Thread List */}
-            <div className="flex-1 overflow-y-auto">
-              <ThreadList setLeftPanelOpen={setLeftPanelOpen} />
-            </div>
-
             {/* Sign Out Button */}
             <div className="flex-none p-2">
               <button
@@ -175,7 +177,6 @@ export default function ApplicationLayout({
 
         {/* Main Content */}
         <main className="flex-1 min-w-0 relative">
-          <div id="step1"></div>
           <ScrollArea className="h-screen w-full">{children}</ScrollArea>
         </main>