fix(core): add dynamic ids as part of breadcrumbs

.changeset/shaggy-pants-argue.md

@@ -0,0 +1,7 @@
+---
+"@refinedev/core": patch
+---
+
+Update `useBreadcrumb` to include dynamic ids in return.
+
+[Resolves #6584](https://github.com/refinedev/refine/issues/6584)

documentation/blog/2025-02-17-replit.md

@@ -0,0 +1,190 @@
+---
+title: Replit AI Agent - AI Web App Builder
+description: We'll explore how Replit helps streamline the development process from generating project scaffolding to deploying applications.
+slug: replit-ai-agent
+authors: necati
+tags: [ai]
+image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-17-replit/social.png
+hide_table_of_contents: false
+---
+
+## Introduction
+
+AI-powered coding tools are rapidly transforming how developers build software. From generating full app scaffolding to assisting with debugging, AI is shifting development from manual coding to a more automated and iterative process.
+
+[Replit AI Agent](https://replit.com/) is one of the latest players in this space, designed to help developers write, refactor, and debug code directly inside the Replit IDE. Unlike some AI web app builders that generate entire applications from prompts, Replit AI Agent acts as an AI-powered pair programmer, assisting developers while they write and modify their code.
+
+When does it make sense to use Replit AI Agent over other options? Let’s break it down.
+
+## What is Replit AI Agent?
+
+Replit AI Agent is an AI-powered coding assistant built into the Replit IDE, designed to help developers write and modify code more efficiently. It’s not just about generating code—it actively assists while you code, making it more like an AI-powered pair programmer than a standalone app builder.
+
+Key Features:
+
+- AI-Assisted Coding: Suggests code completions and fixes as you write.
+- Instant Debugging: Identifies issues in your code and offers potential fixes.
+- Refactoring Assistance: Helps clean up and optimize existing code for better performance.
+- Multi-Language Support: Works across various programming languages inside Replit.
+- Built-in IDE Integration: Runs directly within Replit, eliminating the need for external AI tools.
+
+## How It Differs From Other AI Coding Tools
+
+While tools like Bolt.new and Lovable.dev generate full applications from prompts, Replit AI Agent is focused on inline AI assistance. It works more like GitHub Copilot, offering real-time suggestions, debugging, and refactoring help while you write code, rather than generating an entire project from scratch.
+
+If you’re someone who prefers to write code manually but wants AI-powered assistance to improve efficiency, Replit AI Agent could be the better fit compared to full app-generation tools.
+
+## How to Use Replit AI Agent?
+
+Replit AI Agent is designed to assist developers **inside the Replit editor**, making coding more interactive and efficient. Unlike full application generators like Bolt.new or Lovable.dev, **Replit AI Agent acts more like an AI-powered pair programmer**, helping with **code suggestions, debugging, and refactoring** as you write.
+
+<div className="centered-image">
+ <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-17-replit/intro.png" alt="replit ai" />
+</div>
+
+### 1. Sign Up and Access Replit AI Agent
+
+Go to **[Replit.com](https://replit.com/)** and sign up for an account. Once logged in:
+
+- Open a new Repl (Replit’s term for a coding project).
+- Ensure **Replit AI Agent** is enabled—some features might require a paid plan.
+
+As soon as you start coding, the AI Agent becomes available, offering **autocomplete suggestions and AI-driven improvements** as you work.
+
+### 2. Define Your Project
+
+Start by entering a natural language description of what you want to build.
+
+For example, I describe a Waitlist App.
+
+<div className="centered-image">
+ <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-17-replit/prompt.png" alt="Replit AI suggestion" />
+</div>
+
+Replit AI Agent will process your input and assist in generating the foundational code for your project.
+
+We wanted to create a **waitlist app**, so we simply described our requirements. Replit quickly set up a **basic structure**, and a simple dashboard—giving us a solid starting point without manual setup.
+
+### 3. Get AI Assistance While Coding
+
+Unlike other AI web app builders that generate entire applications, **Replit AI Agent helps in real-time as you write code**.
+
+- **Fix Bugs Instantly**: Highlight a problematic function and ask, _“What’s wrong with this code?”_ The AI will attempt to debug it for you.
+- **Generate Code Snippets**: Need a function for **sorting an array** or **connecting to an API**? Ask the AI, and it will generate the code on the spot.
+- **Explain Code**: If you’re working with unfamiliar code, you can simply ask the AI to break it down in plain English.
+
+<div className="centered-image">
+ <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-17-replit/app-1.png" alt="Replit ai agent" />
+</div>
+
+### 4. Modify and Refactor Code
+
+Once AI generates a snippet, you’re **not stuck with the first draft** you can adjust it.
+
+- **Refactor messy code** with a simple prompt like _“Make this more efficient”_.
+- **Convert code between languages**—for example, turning **Python code into JavaScript**.
+- **Improve readability** by asking AI to **rename variables** or **add comments** for better documentation.
+
+> The AI acts like a **real-time mentor**, guiding you to write **cleaner and more efficient code** without having to leave the editor.
+
+<div className="centered-image">
+ <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-17-replit/app-2.png" alt="Replit ai agent" />
+</div>
+
+### 5. Deploy & Share Your Project
+
+Once your code is ready, **Replit makes deployment seamless**. You can choose from four deployment options, depending on your needs:
+
+<div className="centered-image">
+ <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2025-02-17-replit/deploy.png" alt="Replit AI deploy" />
+</div>
+
+- **Reserved VM**: Deploy your app on a dedicated virtual machine that stays online 24/7.
+- **Autoscale** _(Chosen by Agent)_: Best for most apps, this option automatically adjusts server resources based on traffic.
+- **Static Pages**: Ideal for simple HTML-based websites with no backend logic.
+- **Scheduled Jobs**: Used for time-based tasks, like cron jobs or automated scripts.
+
+> Note: **Some deployment options require upgrading your plan**. Free-tier users have limited access to deployments.
+
+## Pricing – How Much Does It Cost?
+
+Replit AI Agent is available in **both free and paid plans**, with additional **optional add-ons** for enhanced computing power. Unlike Bolt.new and Lovable.dev, which use a token-based system, Replit operates on a **subscription model** where AI features are included in its **Replit Core and higher plans**.
+
+### Free Plan – What Do You Get?
+
+Replit offers a **starter plan for free**, allowing users to explore its platform with some limitations:
+
+- **Limited Replit Agent access**
+- **Up to 3 public apps**
+
+This is useful if you’re just testing AI-assisted coding, but it won’t be enough for regular development.
+
+**Replit Core plan** provides:
+
+- Full access to Replit AI Agent
+- $25 of monthly compute credits (~100 Agent checkpoints)
+- Unlimited public & private apps
+- Access to Claude Sonnet 3.5 & OpenAI GPT-4o
+- Live deployment & hosting
+- Pay-as-you-go for additional usage
+
+This plan is ideal for developers who want consistent AI assistance and cloud-based coding without worrying about credit limits.
+
+For businesses needing enterprise-level security and performance, a custom pricing model is available with:
+
+- SSO & SCIM integration
+- Dedicated support
+- Customizable infrastructure
+
+Replit also provides **scalable compute options** for developers with higher demands:
+
+| **Feature**                 | **Pricing**         | **Description**                                        |
+| --------------------------- | ------------------- | ------------------------------------------------------ |
+| **Autoscale Deployments**   | $0.000024/sec       | Dynamically scales servers based on demand.            |
+| **Reserved VM Deployments** | $7/month            | Consistent monthly rate for a VM (99.9% uptime).       |
+| **Scheduled Deployments**   | $0.000024/sec       | Automates deployments at predefined intervals.         |
+| **Static Deployments**      | Free (100 GiB data) | No server compute cost, only outbound data transfer.   |
+| **Scalable Compute**        | $0.36/hour          | Up to 16 vCPUs, 32 GiB RAM for high-performance tasks. |
+
+Ultimately, your choice depends on whether you want AI to build apps for you or assist you while you code.
+
+## Limitations of AI-Powered Code Generation
+
+AI-powered development tools like Replit AI Agent, Bolt.new, and Lovable.dev promise faster workflows and reduced manual effort, but they also come with some notable limitations. While AI-assisted coding has improved drastically in the past year, there are still challenges to consider.
+
+That said, these limitations are not set in stone—with AI advancing rapidly, what’s true today may be outdated in six months.
+
+Let’s go over the key constraints developers should keep in mind when using AI-generated code.
+
+### Scalability – Can AI-Generated Code Handle Growth?
+
+AI can quickly scaffold applications, but scaling those applications can be a different story.
+
+- AI-generated code might lack optimization for high-traffic scenarios and require manual performance tuning as the app grows.
+- Many AI builders don’t offer deep backend control, meaning you might hit limitations when integrating custom database queries, caching, or load balancing.
+
+If you're planning to scale beyond a simple MVP, AI-generated projects often require human refinement to ensure efficiency and maintainability.
+
+### Advanced Customization – When AI Becomes a Limitation
+
+While AI can generate functional code, deep customization is where it often falls short.
+
+- AI works best within predefined patterns and struggles with complex, domain-specific logic.
+- Debugging AI-generated code can be difficult since you didn’t write it yourself, making it harder to track down errors or performance issues.
+
+For projects with unique business logic, advanced state management, or low-level optimizations, AI-generated solutions might require significant manual adjustments.
+
+### Long-Term Maintainability – Who Owns the Code?
+
+One of the biggest concerns with AI-generated applications is long-term maintainability.
+
+- Many AI-generated projects rely on the AI tool’s ecosystem, meaning if the platform changes or shuts down, you might lose support for your app.
+- Since AI-generated code can lack documentation and consistency, it can be harder for teams to maintain without significant refactoring.
+
+If you’re building something for production use or team collaboration, you’ll likely need a well-defined structure, version control, and clear documentation to ensure long-term sustainability.
+
+### Final Thoughts: AI Is Powerful, But Not a Silver Bullet
+
+AI-powered code generation is revolutionizing software development, but it’s not a complete replacement for human developers—at least not yet. These tools excel at accelerating development and handling repetitive tasks, but they still require human oversight for performance, scalability, and customization.
+
+As AI continues evolving, some of these limitations may become non-issues, but for now, it’s important to approach AI-assisted development with the right expectations. If used wisely, AI can be an incredibly useful tool, but understanding its constraints will help you get the most out of it. 🚀

packages/core/src/hooks/breadcrumb/index.spec.tsx

@@ -181,4 +181,62 @@ describe("useBreadcrumb Hook", () => {
       { label: "buttons.show" },
     ]);
   });
+
+  it("if resource has nested resource with dynamic id -> route/:id/nested-route, the nested should be in breadcrumbs", async () => {
+    const { result } = renderHook(() => useBreadcrumb(), {
+      wrapper: renderWrapper({
+        resources: [
+          {
+            name: "blog_posts",
+            list: "/blog-posts",
+            show: "/blog-posts/show/:id",
+            create: "/blog-posts/create",
+            edit: "/blog-posts/edit/:id",
+            meta: {
+              canDelete: true,
+            },
+          },
+
+          {
+            name: "comments",
+            list: "blog-posts/show/:id/comments",
+            show: "blog-posts/show/:id/comments/:id",
+            meta: {
+              parent: "blog-posts",
+            },
+          },
+        ],
+        routerProvider: mockRouterProvider({
+          action: "list",
+          id: "2",
+          pathname: "/blog-posts/show/2/comments",
+          resource: {
+            name: "comments",
+            list: "blog-posts/show/:id/comments",
+            show: "blog-posts/show/:id/comments/:id",
+            meta: {
+              parent: "blog-posts",
+            },
+          },
+        }),
+      }),
+    });
+
+    expect(result.current.breadcrumbs).toEqual([
+      {
+        label: "Blog posts",
+        href: undefined,
+        icon: undefined,
+      },
+      {
+        label: "2",
+        href: "blog-posts/show/2",
+      },
+      {
+        label: "Comments",
+        href: "/blog-posts/show/2/comments",
+        icon: undefined,
+      },
+    ]);
+  });
 });

packages/core/src/hooks/breadcrumb/index.ts

@@ -80,6 +80,52 @@ export const useBreadcrumb = ({
           : composeRoute(hrefRaw, parentResource?.meta, parsed, metaFromProps)
         : undefined;
 
+      // innner route params: /:id in main-route/:id/sub-route
+      if (hrefRaw) {
+        // [^/]+  --> any number of letters not `/`
+        //      \/: ---> start with /:
+        //         [^/]+  --> any number of letters not `/`
+        //              \/ -- end with /
+        const regex = /[^/]+\/:[^/]+\//g;
+        const hrefRegexMatch = hrefRaw.match(regex);
+
+        if (hrefRegexMatch) {
+          const matches = hrefRegexMatch.map((match) => {
+            const end = hrefRaw.indexOf(match) + match.length;
+            return hrefRaw.slice(0, end);
+          });
+
+          if (matches && parsed.pathname) {
+            const lastMatch = matches.at(-1);
+
+            if (lastMatch) {
+              const pathnameSegments = parsed.pathname
+                .split("/")
+                .filter((segment) => segment);
+              const lastMatchSegments = lastMatch
+                .split("/")
+                .filter((segment) => segment);
+
+              const urlBits: string[] = [];
+              lastMatchSegments.forEach((segment, index) => {
+                let x = segment;
+
+                if (segment !== pathnameSegments[index]) {
+                  x = pathnameSegments[index];
+                }
+
+                urlBits.push(x);
+              });
+
+              const label = urlBits.at(-1);
+              const href = [...urlBits].join("/");
+
+              breadcrumbs.push({ label: String(label), href });
+            }
+          }
+        }
+      }
+
       breadcrumbs.push({
         label:
           pickNotDeprecated(
@@ -121,6 +167,14 @@ export const useBreadcrumb = ({
         label: translate(key, textTransformers.humanize(action)),
       });
     }
+
+    // add action path param to breadcrum
+    if (parsed.id) {
+      breadcrumbs.push({
+        label: String(parsed.id),
+        href: parsed.pathname,
+      });
+    }
   }
 
   return {