diff --git a/app/api/get-repo-blobs/route.ts b/app/api/get-repo-blobs/route.ts
new file mode 100644
index 0000000..95660f1
--- /dev/null
+++ b/app/api/get-repo-blobs/route.ts
@@ -0,0 +1,56 @@
+import { octokit } from "@/components/github/octokit";
+import { getRepoBlobsSchema } from "@/components/github/schema";
+
+import { z } from "zod";
+
+const requestSchema = z.object({
+  owner: z.string(),
+  repo: z.string(),
+  branch: z.string(),
+  paths: z.array(z.string()),
+});
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+
+  const { owner, repo, branch, paths } = requestSchema.parse({
+    owner: searchParams.get("owner"),
+    repo: searchParams.get("repo"),
+    branch: searchParams.get("branch"),
+    paths: searchParams.getAll("path"),
+  });
+
+  const {
+    data: { tree },
+  } = await octokit.rest.git.getTree({
+    owner,
+    repo,
+    tree_sha: branch,
+    recursive: "true",
+  });
+
+  let response: { path: string; contents: string }[] = [];
+
+  const files = tree
+    .filter((i) => i.type === "blob")
+    .filter((i) => (i.path ? paths.includes(i.path) : false));
+
+  for (const file of files) {
+    const {
+      data: { content },
+    } = await octokit.rest.git.getBlob({
+      owner,
+      repo,
+      file_sha: file.sha!,
+    });
+
+    response.push({
+      path: file.path!,
+      contents: Buffer.from(content, "base64").toString("ascii"),
+    });
+  }
+
+  const parsed = getRepoBlobsSchema.parse(response);
+
+  return Response.json(parsed);
+}
diff --git a/app/api/get-repo-branches/route.ts b/app/api/get-repo-branches/route.ts
new file mode 100644
index 0000000..a90bfaa
--- /dev/null
+++ b/app/api/get-repo-branches/route.ts
@@ -0,0 +1,21 @@
+import { octokit } from "@/components/github/octokit";
+import { getRepoBranchesSchema } from "@/components/github/schema";
+
+import { z } from "zod";
+
+const requestSchema = z.object({ owner: z.string(), repo: z.string() });
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+
+  const { owner, repo } = requestSchema.parse({
+    owner: searchParams.get("owner"),
+    repo: searchParams.get("repo"),
+  });
+
+  const { data } = await octokit.rest.repos.listBranches({ owner, repo });
+
+  const parsed = getRepoBranchesSchema.parse(data.map((i) => i.name));
+
+  return Response.json(parsed);
+}
diff --git a/app/api/get-repo-info/route.ts b/app/api/get-repo-info/route.ts
new file mode 100644
index 0000000..511af1e
--- /dev/null
+++ b/app/api/get-repo-info/route.ts
@@ -0,0 +1,21 @@
+import { octokit } from "@/components/github/octokit";
+import { getRepoInfoSchema } from "@/components/github/schema";
+
+import { z } from "zod";
+
+const requestSchema = z.object({ owner: z.string(), repo: z.string() });
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+
+  const { owner, repo } = requestSchema.parse({
+    owner: searchParams.get("owner"),
+    repo: searchParams.get("repo"),
+  });
+
+  const { data } = await octokit.rest.repos.get({ owner, repo });
+
+  const parsed = getRepoInfoSchema.parse(data);
+
+  return Response.json(parsed);
+}
diff --git a/app/api/get-repo-tree/route.ts b/app/api/get-repo-tree/route.ts
new file mode 100644
index 0000000..092fb4b
--- /dev/null
+++ b/app/api/get-repo-tree/route.ts
@@ -0,0 +1,40 @@
+import { octokit } from "@/components/github/octokit";
+import { getRepoTreeSchema } from "@/components/github/schema";
+
+import { z } from "zod";
+
+const requestSchema = z.object({
+  owner: z.string(),
+  repo: z.string(),
+  branch: z.string(),
+});
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+
+  const { owner, repo, branch } = requestSchema.parse({
+    owner: searchParams.get("owner"),
+    repo: searchParams.get("repo"),
+    branch: searchParams.get("branch"),
+  });
+
+  const {
+    data: { default_branch },
+  } = await octokit.rest.repos.get({
+    owner,
+    repo,
+  });
+
+  const {
+    data: { tree },
+  } = await octokit.rest.git.getTree({
+    owner,
+    repo,
+    tree_sha: branch || default_branch,
+    recursive: "true",
+  });
+
+  const parsed = getRepoTreeSchema.parse(tree);
+
+  return Response.json(parsed);
+}
diff --git a/app/import/page.tsx b/app/import/page.tsx
new file mode 100644
index 0000000..5140ce2
--- /dev/null
+++ b/app/import/page.tsx
@@ -0,0 +1,10 @@
+import GitHub from "@/components/github";
+
+export default function Page() {
+  return (
+    <div className="container px-4 py-12 md:px-6 lg:py-16">
+      <h1 className="text-2xl mb-2">Import GitHub repository</h1>
+      <GitHub />
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index 3af092e..7c06c24 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -87,8 +87,12 @@ export default function Home() {
             <HomeCard key={link.title} {...link} />
           ))}
         </div>
-        <h3 className="text-xl font-bold">... enter a GitHub repo url:</h3>
-        <RepoUrlForm />
+        <h3 className="text-xl font-bold">
+          ... enter a{" "}
+          <Link href="/import" className="hover:underline">
+            GitHub repo url (click here)
+          </Link>{" "}
+        </h3>
         <h3 className="text-xl font-bold">... or generate from a prompt:</h3>
         <div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
           <div className="rounded-lg border bg-background p-6 shadow-sm">
diff --git a/components/github/file-selection.css b/components/github/file-selection.css
new file mode 100644
index 0000000..623875f
--- /dev/null
+++ b/components/github/file-selection.css
@@ -0,0 +1,63 @@
+.checkbox {
+  font-size: 16px;
+  user-select: none;
+  padding: 20px;
+  box-sizing: content-box;
+}
+
+.checkbox .tree,
+.checkbox .tree-node,
+.checkbox .tree-node-group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.checkbox .tree-branch-wrapper,
+.checkbox .tree-node__leaf {
+  outline: none;
+}
+
+.checkbox .tree-node {
+  cursor: pointer;
+}
+
+.checkbox .tree-node .name:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.checkbox .tree-node--focused .name {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+.checkbox .tree-node {
+  display: inline-block;
+}
+
+.checkbox .tree-node > * {
+  display: inline;
+}
+
+.checkbox .checkbox-icon {
+  margin: 0 5px;
+  vertical-align: middle;
+}
+
+.checkbox button {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.checkbox .arrow {
+  margin-left: 5px;
+  vertical-align: middle;
+}
+
+.checkbox .arrow--open {
+  transform: rotate(90deg);
+}
+
+.checkbox .tree-leaf-list-item {
+  margin-left: 21px;
+}
\ No newline at end of file
diff --git a/components/github/file-selection.tsx b/components/github/file-selection.tsx
new file mode 100644
index 0000000..ddf037c
--- /dev/null
+++ b/components/github/file-selection.tsx
@@ -0,0 +1,134 @@
+import React, { useMemo } from "react";
+import { FaSquare, FaCheckSquare, FaMinusSquare } from "react-icons/fa";
+import { IoMdArrowDropright } from "react-icons/io";
+import TreeView, { ITreeViewOnSelectProps } from "react-accessible-treeview";
+import clsx from "clsx";
+import { IconBaseProps } from "react-icons/lib";
+import "./file-selection.css";
+import { useRepoTree } from "./use-octokit";
+
+function FileSelection({
+  ownerrepo,
+  branch,
+  onSelect,
+}: {
+  ownerrepo?: string;
+  branch?: string;
+  onSelect?: (props: ITreeViewOnSelectProps) => void;
+}) {
+  const { data: repoData, isLoading } = useRepoTree(ownerrepo, branch);
+
+  const data = useMemo(() => {
+    if (!!repoData) {
+      const tree = repoData;
+
+      const root = {
+        id: 0,
+        children: tree
+          .filter((i) => !i.path?.includes("/"))
+          .map((i) => i.path!),
+        parent: null,
+        name: "",
+      };
+
+      const rest = tree.map((i) => ({
+        id: i.path!,
+        name: i.path?.split("/").pop() || "",
+        children: tree
+          .filter((j) => i.path === j.path?.split("/").slice(0, -1).join("/"))
+          .map((k) => k.path!),
+        parent:
+          tree.find((j) => j.path === i.path?.split("/").slice(0, -2).join("/"))
+            ?.path || root.id,
+      }));
+
+      return [root, ...rest];
+    }
+
+    return undefined;
+  }, [repoData]);
+
+  if (isLoading || !data) return <div>Loading...</div>;
+
+  return (
+    <div>
+      <div className="checkbox">
+        <TreeView
+          data={data}
+          aria-label="Checkbox tree"
+          multiSelect
+          propagateSelect
+          propagateSelectUpwards
+          togglableSelect
+          onSelect={onSelect}
+          nodeRenderer={({
+            element,
+            isBranch,
+            isExpanded,
+            isSelected,
+            isHalfSelected,
+            getNodeProps,
+            level,
+            handleSelect,
+            handleExpand,
+          }) => {
+            return (
+              <div
+                {...getNodeProps({ onClick: handleExpand })}
+                style={{ marginLeft: 40 * (level - 1) }}
+              >
+                {isBranch && <ArrowIcon isOpen={isExpanded} />}
+                <CheckBoxIcon
+                  className="checkbox-icon"
+                  onClick={(e) => {
+                    handleSelect(e);
+                    e.stopPropagation();
+                  }}
+                  variant={
+                    isHalfSelected ? "some" : isSelected ? "all" : "none"
+                  }
+                />
+                <span className="name">{element.name}</span>
+              </div>
+            );
+          }}
+        />
+      </div>
+    </div>
+  );
+}
+
+const ArrowIcon = ({
+  isOpen,
+  className,
+}: {
+  isOpen: boolean;
+  className?: string;
+}) => {
+  const baseClass = "arrow";
+  const classes = clsx(
+    baseClass,
+    { [`${baseClass}--closed`]: !isOpen },
+    { [`${baseClass}--open`]: isOpen },
+    className
+  );
+  return <IoMdArrowDropright className={classes} />;
+};
+
+const CheckBoxIcon = ({
+  variant,
+  ...rest
+}: IconBaseProps & { variant: "all" | "none" | "some" | string }) => {
+  switch (variant) {
+    case "all":
+      return <FaCheckSquare {...rest} />;
+    case "none":
+      return <FaSquare {...rest} />;
+    case "some":
+      return <FaMinusSquare {...rest} />;
+    default:
+      return null;
+  }
+};
+
+export default FileSelection;
diff --git a/components/github/index.tsx b/components/github/index.tsx
new file mode 100644
index 0000000..3f03619
--- /dev/null
+++ b/components/github/index.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import { useState } from "react";
+import { RepoUrlForm } from "./repo-url-form";
+import { RepoSelectFiles } from "./repo-select-files";
+import { X } from "lucide-react";
+import { RepoBranchSelection } from "./repo-branch-selection";
+import { RepoWorkspaceName } from "./repo-workspace-name";
+
+export default function GitHub() {
+  const [repo, setRepo] = useState<string>();
+  const [branch, setBranch] = useState<string>();
+  const [selected, setSelected] = useState<string[]>([]);
+
+  return (
+    <>
+      {repo ? (
+        <div className="mb-8">
+          <p>Currently selected repo:</p>
+          <p>
+            <b>{repo}</b>{" "}
+            <button
+              className="text-red-600 hover:font-bold"
+              onClick={() => setRepo(undefined)}
+            >
+              <X className="inline w-4" />
+              reset
+            </button>
+          </p>
+        </div>
+      ) : (
+        <RepoUrlForm
+          onSubmit={async ({ repo, branch }) => {
+            setRepo(repo);
+            setBranch(branch);
+          }}
+        />
+      )}
+      {repo ? (
+        <>
+          {branch ? (
+            <p className="mb-8">
+              You have selected <b>{branch}</b> branch.{" "}
+              <button
+                className="text-red-600 hover:font-bold"
+                onClick={() => {
+                  setBranch(undefined);
+                }}
+              >
+                <X className="inline w-4" />
+                reset
+              </button>
+            </p>
+          ) : (
+            <RepoBranchSelection
+              repo={repo}
+              onSubmit={({ branch }) => setBranch(branch)}
+            />
+          )}
+          {branch && selected.length === 0 ? (
+            <RepoSelectFiles
+              repo={repo}
+              branch={branch}
+              onSubmit={async (paths) => {
+                setSelected(paths);
+              }}
+            />
+          ) : null}
+        </>
+      ) : null}
+      {selected.length > 0 && repo && branch ? (
+        <div>
+          {selected.join(", ")} selected.{" "}
+          <button
+            className="text-red-600 hover:font-bold"
+            onClick={() => {
+              setSelected([]);
+            }}
+          >
+            <X className="inline w-4" />
+            reset
+          </button>
+          <RepoWorkspaceName repo={repo} branch={branch} paths={selected} />
+        </div>
+      ) : null}
+    </>
+  );
+}
diff --git a/components/github/octokit.ts b/components/github/octokit.ts
new file mode 100644
index 0000000..62e4f90
--- /dev/null
+++ b/components/github/octokit.ts
@@ -0,0 +1,28 @@
+import { Octokit } from "octokit";
+import { throttling } from "@octokit/plugin-throttling";
+import { getGitHubToken } from "@/lib/env";
+
+const MyOctokit = Octokit.plugin(throttling);
+
+export const octokit = new MyOctokit({
+  auth: getGitHubToken(),
+  throttle: {
+    onRateLimit: (retryAfter, options, octokit, retryCount) => {
+      octokit.log.warn(
+        `Request quota exhausted for request ${options.method} ${options.url}`
+      );
+
+      if (retryCount < 1) {
+        // only retries once
+        octokit.log.info(`Retrying after ${retryAfter} seconds!`);
+        return true;
+      }
+    },
+    onSecondaryRateLimit: (_retryAfter, options, octokit) => {
+      // does not retry, only logs a warning
+      octokit.log.warn(
+        `SecondaryRateLimit detected for request ${options.method} ${options.url}`
+      );
+    },
+  },
+});
diff --git a/components/github/repo-branch-selection.tsx b/components/github/repo-branch-selection.tsx
new file mode 100644
index 0000000..0f328c8
--- /dev/null
+++ b/components/github/repo-branch-selection.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useRepoBranch, useRepoInfo } from "./use-octokit";
+import { useEffect, useMemo } from "react";
+
+const FormSchema = z.object({
+  branch: z.string({
+    required_error: "Please select a branch.",
+  }),
+});
+
+export function RepoBranchSelection({
+  repo,
+  onSubmit: _onSubmit,
+}: {
+  repo: string;
+  onSubmit?: (val: { branch?: string }) => void;
+}) {
+  const { data } = useRepoBranch(repo);
+  const { data: info } = useRepoInfo(repo);
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    _onSubmit?.(data);
+  }
+
+  const branches = useMemo(() => {
+    if (!data) return [];
+
+    return data.map((i) => ({ label: i, value: i }));
+  }, [data]);
+
+  useEffect(() => {
+    if (!!info) {
+      form.setValue("branch", info.default_branch);
+    }
+  }, [info]);
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="branch"
+          render={({ field }) => (
+            <FormItem className="flex flex-col">
+              <FormLabel>Branches</FormLabel>
+              <Popover>
+                <PopoverTrigger asChild>
+                  <FormControl>
+                    <Button
+                      variant="outline"
+                      role="combobox"
+                      className={cn(
+                        "justify-between w-fit min-w-96",
+                        !field.value && "text-muted-foreground"
+                      )}
+                    >
+                      {field.value
+                        ? branches.find(
+                            (branch) => branch.value === field.value
+                          )?.label
+                        : "Select branch"}
+                      <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                    </Button>
+                  </FormControl>
+                </PopoverTrigger>
+                <PopoverContent className="p-0 w-fit">
+                  <Command>
+                    <CommandInput placeholder="Search branches..." />
+                    <CommandList>
+                      <CommandEmpty>No branch found.</CommandEmpty>
+                      <CommandGroup>
+                        {branches.map((branch) => (
+                          <CommandItem
+                            value={branch.label}
+                            key={branch.value}
+                            onSelect={() => {
+                              form.setValue("branch", branch.value);
+                            }}
+                          >
+                            <Check
+                              className={cn(
+                                "mr-2 h-4 w-4",
+                                branch.value === field.value
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                            />
+                            {branch.label}
+                          </CommandItem>
+                        ))}
+                      </CommandGroup>
+                    </CommandList>
+                  </Command>
+                </PopoverContent>
+              </Popover>
+              <FormDescription>Choose a branch.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Apply</Button>
+      </form>
+    </Form>
+  );
+}
diff --git a/components/github/repo-select-files.tsx b/components/github/repo-select-files.tsx
new file mode 100644
index 0000000..8d4460f
--- /dev/null
+++ b/components/github/repo-select-files.tsx
@@ -0,0 +1,83 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Loader2 } from "lucide-react";
+import FileSelection from "./file-selection";
+
+const FormSchema = z.object({
+  paths: z.array(z.string()).min(1, "At least 1 file should be selected!"),
+});
+
+export function RepoSelectFiles({
+  repo,
+  branch,
+  onSubmit: _onSubmit,
+}: {
+  repo?: string;
+  branch?: string;
+  onSubmit?: (val: string[]) => Promise<void>;
+}) {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      paths: [],
+    },
+  });
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    form.clearErrors();
+    if (!!_onSubmit) {
+      await _onSubmit(data.paths);
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full flex">
+        <FormField
+          control={form.control}
+          name="paths"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Select files</FormLabel>
+              <FormControl>
+                <FileSelection
+                  ownerrepo={repo}
+                  branch={branch}
+                  onSelect={({ treeState }) =>
+                    field.onChange(Array.from(treeState.selectedIds))
+                  }
+                />
+              </FormControl>
+              <FormDescription>Choose files to import</FormDescription>
+              <FormMessage />
+              <Button type="submit" disabled={form.formState.isSubmitting}>
+                {form.formState.isSubmitting ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Please wait
+                  </>
+                ) : (
+                  "Choose files"
+                )}
+              </Button>
+            </FormItem>
+          )}
+        />
+      </form>
+    </Form>
+  );
+}
diff --git a/components/github/repo-url-form.tsx b/components/github/repo-url-form.tsx
new file mode 100644
index 0000000..2a92889
--- /dev/null
+++ b/components/github/repo-url-form.tsx
@@ -0,0 +1,75 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Loader2 } from "lucide-react";
+import gh from "parse-github-url";
+
+const FormSchema = z.object({
+  url: z.string().refine((arg) => {
+    const { repo } = gh(arg) || {};
+
+    return !!repo;
+  }, "Is not a valid github url"),
+});
+
+export function RepoUrlForm({
+  onSubmit: _onSubmit,
+}: {
+  onSubmit?: (val: { repo?: string; branch?: string }) => Promise<void>;
+}) {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      url: "https://github.com/AElfProject/aelf-developer-tools",
+    },
+  });
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    form.clearErrors();
+    if (!!_onSubmit) {
+      const { repo, branch } = gh(data.url) || {};
+      await _onSubmit({ repo: repo || undefined, branch: branch || undefined });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full flex mb-8">
+        <FormField
+          control={form.control}
+          name="url"
+          render={({ field }) => (
+            <FormItem className="flex-grow mr-3">
+              <FormControl>
+                <Input placeholder="workspace-name" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" disabled={form.formState.isSubmitting}>
+          {form.formState.isSubmitting ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Please wait
+            </>
+          ) : (
+            "Apply"
+          )}
+        </Button>
+      </form>
+    </Form>
+  );
+}
diff --git a/components/github/repo-workspace-name.tsx b/components/github/repo-workspace-name.tsx
new file mode 100644
index 0000000..b3d3f42
--- /dev/null
+++ b/components/github/repo-workspace-name.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { useRouter } from "next/navigation";
+import { db } from "@/data/db";
+import { Loader2 } from "lucide-react";
+import { getRepoBlobsSchema } from "./schema";
+
+const FormSchema = z.object({
+  name: z.string().min(2, {
+    message: "Name must be at least 2 characters.",
+  }),
+  template: z.string(),
+});
+
+function formatError(err: unknown) {
+  const strErr = String(err);
+
+  if (strErr.includes("Key already exists in the object store")) {
+    return "This workspace name already in use.";
+  }
+
+  return strErr;
+}
+
+export function RepoWorkspaceName({
+  repo,
+  branch,
+  paths,
+}: {
+  repo: string;
+  branch: string;
+  paths: string[];
+}) {
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      name: "",
+      template: `github.com/${repo}/tree/${branch}`,
+    },
+  });
+
+  const router = useRouter();
+
+  async function onSubmit(data: z.infer<typeof FormSchema>) {
+    form.clearErrors();
+    try {
+      await db.workspaces.add({
+        name: data.name,
+        template: data.template,
+        dll: "",
+      });
+
+      const [owner, repoName] = repo.split("/");
+
+      const params = new URLSearchParams();
+
+      params.set("owner", owner);
+      params.set("repo", repoName);
+      params.set("branch", branch);
+      paths.forEach((path) => params.append("path", path));
+
+      const filesRes = await fetch(`/api/get-repo-blobs?${params.toString()}`);
+      const fileData = await filesRes.json();
+
+      const parsedData = getRepoBlobsSchema.parse(fileData);
+
+      await db.files.bulkAdd(
+        parsedData.map(({ path, contents }) => ({
+          path: `/workspace/${data.name}/${encodeURIComponent(path)}`,
+          contents,
+        }))
+      );
+      await router.push(`/workspace/${data.name}`);
+    } catch (err) {
+      form.setError("name", { message: formatError(err) });
+    }
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="w-full space-y-6">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input
+                  className="w-full"
+                  placeholder="workspace-name"
+                  {...field}
+                />
+              </FormControl>
+              <FormDescription>This is your workspace name.</FormDescription>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit" disabled={form.formState.isSubmitting}>
+          {form.formState.isSubmitting ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Please wait
+            </>
+          ) : (
+            "Submit"
+          )}
+        </Button>
+      </form>
+    </Form>
+  );
+}
diff --git a/components/github/schema.ts b/components/github/schema.ts
new file mode 100644
index 0000000..568933f
--- /dev/null
+++ b/components/github/schema.ts
@@ -0,0 +1,22 @@
+import { z } from "zod";
+
+export const getRepoInfoSchema = z.object({ default_branch: z.string() });
+
+export const getRepoBranchesSchema = z.array(z.string());
+
+export const getRepoBlobSchema = z.object({ content: z.string() });
+
+export const getRepoTreeSchema = z.array(
+  z.object({
+    path: z.string().optional(),
+    mode: z.string().optional(),
+    type: z.string().optional(),
+    sha: z.string().optional(),
+    size: z.number().optional(),
+    url: z.string().optional(),
+  })
+);
+
+export const getRepoBlobsSchema = z.array(
+  z.object({ path: z.string(), contents: z.string() })
+);
diff --git a/components/github/use-octokit.ts b/components/github/use-octokit.ts
new file mode 100644
index 0000000..18285f6
--- /dev/null
+++ b/components/github/use-octokit.ts
@@ -0,0 +1,53 @@
+"use client";
+import useSWR from "swr";
+import {
+  getRepoBranchesSchema,
+  getRepoInfoSchema,
+  getRepoTreeSchema,
+} from "./schema";
+
+export function useRepoTree(ownerrepo?: string, branch?: string) {
+  return useSWR(
+    ownerrepo ? `repo-tree-${ownerrepo}-${branch}` : undefined,
+    async () => {
+      const [owner, repo] = ownerrepo!.split("/");
+
+      const res = await fetch(
+        `/api/get-repo-tree?owner=${owner}&repo=${repo}&branch=${branch}`
+      );
+
+      const data = await res.json();
+
+      return getRepoTreeSchema.parse(data);
+    }
+  );
+}
+
+export function useRepoBranch(ownerrepo?: string) {
+  return useSWR(
+    ownerrepo ? `repo-branch-${ownerrepo}` : undefined,
+    async () => {
+      const [owner, repo] = ownerrepo!.split("/");
+
+      const res = await fetch(
+        `/api/get-repo-branches?owner=${owner}&repo=${repo}`
+      );
+
+      const data = await res.json();
+
+      return getRepoBranchesSchema.parse(data);
+    }
+  );
+}
+
+export function useRepoInfo(ownerrepo?: string) {
+  return useSWR(ownerrepo ? `repo-info-${ownerrepo}` : undefined, async () => {
+    const [owner, repo] = ownerrepo!.split("/");
+
+    const res = await fetch(`/api/get-repo-info?owner=${owner}&repo=${repo}`);
+
+    const data = await res.json();
+
+    return getRepoInfoSchema.parse(data);
+  });
+}
diff --git a/components/ui/command.tsx b/components/ui/command.tsx
new file mode 100644
index 0000000..1a37e67
--- /dev/null
+++ b/components/ui/command.tsx
@@ -0,0 +1,155 @@
+"use client"
+
+import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
+import { Command as CommandPrimitive } from "cmdk"
+import { Search } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Dialog, DialogContent } from "@/components/ui/dialog"
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+Command.displayName = CommandPrimitive.displayName
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  </div>
+))
+
+CommandInput.displayName = CommandPrimitive.Input.displayName
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+))
+
+CommandList.displayName = CommandPrimitive.List.displayName
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+))
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 h-px bg-border", className)}
+    {...props}
+  />
+))
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      className
+    )}
+    {...props}
+  />
+))
+
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+CommandShortcut.displayName = "CommandShortcut"
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+}
diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx
new file mode 100644
index 0000000..a0ec48b
--- /dev/null
+++ b/components/ui/popover.tsx
@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import * as PopoverPrimitive from "@radix-ui/react-popover"
+
+import { cn } from "@/lib/utils"
+
+const Popover = PopoverPrimitive.Root
+
+const PopoverTrigger = PopoverPrimitive.Trigger
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
+
+export { Popover, PopoverTrigger, PopoverContent }
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
new file mode 100644
index 0000000..521b94b
--- /dev/null
+++ b/components/ui/toast.tsx
@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}
diff --git a/components/ui/toaster.tsx b/components/ui/toaster.tsx
new file mode 100644
index 0000000..e223385
--- /dev/null
+++ b/components/ui/toaster.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/components/ui/toast"
+import { useToast } from "@/components/ui/use-toast"
+
+export function Toaster() {
+  const { toasts } = useToast()
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        )
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  )
+}
diff --git a/components/ui/use-toast.ts b/components/ui/use-toast.ts
new file mode 100644
index 0000000..02e111d
--- /dev/null
+++ b/components/ui/use-toast.ts
@@ -0,0 +1,194 @@
+"use client"
+
+// Inspired by react-hot-toast library
+import * as React from "react"
+
+import type {
+  ToastActionElement,
+  ToastProps,
+} from "@/components/ui/toast"
+
+const TOAST_LIMIT = 1
+const TOAST_REMOVE_DELAY = 1000000
+
+type ToasterToast = ToastProps & {
+  id: string
+  title?: React.ReactNode
+  description?: React.ReactNode
+  action?: ToastActionElement
+}
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const
+
+let count = 0
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
+  return count.toString()
+}
+
+type ActionType = typeof actionTypes
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"]
+      toast: ToasterToast
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"]
+      toast: Partial<ToasterToast>
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"]
+      toastId?: ToasterToast["id"]
+    }
+
+interface State {
+  toasts: ToasterToast[]
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId)
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    })
+  }, TOAST_REMOVE_DELAY)
+
+  toastTimeouts.set(toastId, timeout)
+}
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      }
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t
+        ),
+      }
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId)
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id)
+        })
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t
+        ),
+      }
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        }
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      }
+  }
+}
+
+const listeners: Array<(state: State) => void> = []
+
+let memoryState: State = { toasts: [] }
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action)
+  listeners.forEach((listener) => {
+    listener(memoryState)
+  })
+}
+
+type Toast = Omit<ToasterToast, "id">
+
+function toast({ ...props }: Toast) {
+  const id = genId()
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    })
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss()
+      },
+    },
+  })
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  }
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState)
+
+  React.useEffect(() => {
+    listeners.push(setState)
+    return () => {
+      const index = listeners.indexOf(setState)
+      if (index > -1) {
+        listeners.splice(index, 1)
+      }
+    }
+  }, [state])
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  }
+}
+
+export { useToast, toast }
diff --git a/package-lock.json b/package-lock.json
index 2843c0a..d8f5cb0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,9 +20,11 @@
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-menubar": "^1.1.1",
+        "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-scroll-area": "^1.1.0",
         "@radix-ui/react-select": "^2.1.1",
         "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-toast": "^1.2.1",
         "@radix-ui/react-toggle": "^1.1.0",
         "@radix-ui/react-toggle-group": "^1.1.0",
         "@replit/codemirror-lang-csharp": "^6.2.0",
@@ -32,6 +34,7 @@
         "aelf-sdk": "^3.4.14-beta.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "cmdk": "^1.0.0",
         "date-fns": "^3.6.0",
         "dexie": "^4.0.8",
         "dexie-react-hooks": "^1.1.7",
@@ -43,9 +46,12 @@
         "next-mdx-remote": "^5.0.0",
         "next-themes": "^0.3.0",
         "octokit": "^4.0.2",
+        "parse-github-url": "^1.0.3",
         "react": "^18",
+        "react-accessible-treeview": "^2.9.1",
         "react-dom": "^18",
         "react-hook-form": "^7.52.1",
+        "react-icons": "^5.2.1",
         "react-resizable-panels": "^2.0.20",
         "react-terminal": "^1.4.4",
         "reflect-metadata": "^0.2.2",
@@ -63,6 +69,7 @@
       },
       "devDependencies": {
         "@types/node": "^20",
+        "@types/parse-github-url": "^1.0.3",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "@types/uuid": "^10.0.0",
@@ -1758,6 +1765,43 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popover": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.1.tgz",
+      "integrity": "sha512-3y1A3isulwnWhvTTwmIreiB8CF4L+qRjZnK1wYLO7pplddzXKby/GnZ2M7OZY3qgnl6p9AodUIHRYGXNah8Y7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-focus-guards": "1.1.0",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-popper": "1.2.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.7"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popper": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz",
@@ -1984,6 +2028,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-toast": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.1.tgz",
+      "integrity": "sha512-5trl7piMXcZiCq7MW6r8YYmu0bK5qDpTWz+FdEPdKyft2UixkspheYbjbrLXVN5NGKHFbOP7lm8eD0biiSqZqg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-collection": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.0",
+        "@radix-ui/react-dismissable-layer": "1.1.0",
+        "@radix-ui/react-portal": "1.1.1",
+        "@radix-ui/react-presence": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0",
+        "@radix-ui/react-visually-hidden": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-toggle": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.0.tgz",
@@ -2399,6 +2477,16 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/parse-github-url": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@types/parse-github-url/-/parse-github-url-1.0.3.tgz",
+      "integrity": "sha512-7sTbCVmSVzK/iAsHGIxoqiyAnqix9opZm68lOvaU6DBx9EQ9kHMSp0y7Criu2OCsZ9wDllEyCRU+LU4hPRxXUA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.12",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -3480,6 +3568,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT",
+      "peer": true
+    },
     "node_modules/client-only": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
@@ -3495,6 +3590,384 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.0.0.tgz",
+      "integrity": "sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/primitive": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz",
+      "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz",
+      "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-context": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz",
+      "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz",
+      "integrity": "sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1",
+        "@radix-ui/react-use-escape-keydown": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz",
+      "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz",
+      "integrity": "sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-id": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz",
+      "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-portal": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.4.tgz",
+      "integrity": "sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-primitive": "1.0.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-presence": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.1.tgz",
+      "integrity": "sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-primitive": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz",
+      "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-slot": "1.0.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-slot": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz",
+      "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-compose-refs": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz",
+      "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz",
+      "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz",
+      "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/react-use-callback-ref": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz",
+      "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/cmdk/node_modules/react-remove-scroll": {
+      "version": "2.5.5",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz",
+      "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.3",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/codemirror": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
@@ -7593,6 +8066,18 @@
       "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==",
       "license": "MIT"
     },
+    "node_modules/parse-github-url": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/parse-github-url/-/parse-github-url-1.0.3.tgz",
+      "integrity": "sha512-tfalY5/4SqGaV/GIGzWyHnFjlpTPTNpENR9Ea2lLldSJ8EWXMsvacWucqY3m3I4YPtas15IxTLQVQ5NSYXPrww==",
+      "license": "MIT",
+      "bin": {
+        "parse-github-url": "cli.js"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/parse-numeric-range": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz",
@@ -7973,6 +8458,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-accessible-treeview": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/react-accessible-treeview/-/react-accessible-treeview-2.9.1.tgz",
+      "integrity": "sha512-UlmeFJtlh1SryN8kHLf4ICLlF4HeIpiacWwHh+7AzhmOmOs9vObXAjJWTiLpxP342TQ1QbCdSGq086Y8oD7NSw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "classnames": "^2.2.6",
+        "prop-types": "^15.7.2",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-device-detect": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.1.2.tgz",
@@ -8015,6 +8512,15 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz",
+      "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/package.json b/package.json
index 749246d..c1827dc 100644
--- a/package.json
+++ b/package.json
@@ -21,9 +21,11 @@
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-menubar": "^1.1.1",
+    "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-toggle": "^1.1.0",
     "@radix-ui/react-toggle-group": "^1.1.0",
     "@replit/codemirror-lang-csharp": "^6.2.0",
@@ -33,6 +35,7 @@
     "aelf-sdk": "^3.4.14-beta.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
     "dexie": "^4.0.8",
     "dexie-react-hooks": "^1.1.7",
@@ -44,9 +47,12 @@
     "next-mdx-remote": "^5.0.0",
     "next-themes": "^0.3.0",
     "octokit": "^4.0.2",
+    "parse-github-url": "^1.0.3",
     "react": "^18",
+    "react-accessible-treeview": "^2.9.1",
     "react-dom": "^18",
     "react-hook-form": "^7.52.1",
+    "react-icons": "^5.2.1",
     "react-resizable-panels": "^2.0.20",
     "react-terminal": "^1.4.4",
     "reflect-metadata": "^0.2.2",
@@ -64,6 +70,7 @@
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/parse-github-url": "^1.0.3",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/uuid": "^10.0.0",