From b85b79739ce02bdbeb5455a2f4e902e79c052dcf Mon Sep 17 00:00:00 2001
From: "Matt J." <matthieu@probabl.ai>
Date: Mon, 3 Feb 2025 12:37:27 +0100
Subject: [PATCH] chore(UI): Remove view builder (#1267)

Closes #1266.

This PR removes all view builder related code.
Activity feed item now have a version number in backend aswell as in
frontend.

User can now annotate there items in the activity feed.

## UI preview:


https://github.com/user-attachments/assets/7f283b74-17a4-4f4b-a6cc-a043a2415b24
---
 skore-ui/src/SkoreUi.vue                      |  29 +-
 skore-ui/src/StandaloneWidget.vue             |   1 +
 skore-ui/src/assets/styles/_typography.css    |   1 -
 skore-ui/src/components/FloatingTooltip.vue   |   2 +-
 skore-ui/src/components/RichTextEditor.vue    |   5 +-
 skore-ui/src/dto.ts                           |  22 +-
 skore-ui/src/models.ts                        |   2 +
 skore-ui/src/router.ts                        |  10 -
 skore-ui/src/services/api.ts                  |  54 +--
 skore-ui/src/stores/project.ts                | 438 ------------------
 skore-ui/src/views/AppToolbar.vue             |  49 +-
 .../views/activity/ActivityFeedCardHeader.vue |  26 +-
 .../src/views/activity/ActivityFeedItem.vue   |  68 +++
 .../src/views/activity/ActivityFeedView.vue   |  59 +--
 .../src/views/activity/ItemNoteEditor.vue     | 121 +++++
 skore-ui/src/views/activity/activity.ts       |  83 ++++
 skore-ui/src/views/project/ItemNote.vue       | 162 -------
 .../src/views/project/ProjectItemList.vue     |  97 ----
 skore-ui/src/views/project/ProjectView.vue    | 246 ----------
 .../views/project/ProjectViewNavigator.vue    | 229 ---------
 skore-ui/tests/services/api.spec.ts           |  18 +-
 skore-ui/tests/stores/project.spec.ts         | 112 -----
 skore-ui/tests/views/ProjectView.spec.ts      |  49 --
 .../tests/views/ProjectViewNavigator.spec.ts  |  94 ----
 skore-ui/tests/views/activity.spec.ts         |  59 +++
 .../skore/persistence/repository/__init__.py  |   2 -
 .../persistence/repository/view_repository.py |  87 ----
 skore/src/skore/project/project.py            |  16 +-
 skore/src/skore/ui/project_routes.py          |  91 +---
 skore/tests/conftest.py                       |   4 +-
 skore/tests/integration/ui/test_ui.py         | 343 ++++++--------
 skore/tests/unit/project/test_project.py      |   2 -
 skore/tests/unit/utils/test_environment.py    |   6 +
 skore/tests/unit/view/test_view_repository.py |  36 --
 34 files changed, 626 insertions(+), 1997 deletions(-)
 delete mode 100644 skore-ui/src/stores/project.ts
 create mode 100644 skore-ui/src/views/activity/ActivityFeedItem.vue
 create mode 100644 skore-ui/src/views/activity/ItemNoteEditor.vue
 create mode 100644 skore-ui/src/views/activity/activity.ts
 delete mode 100644 skore-ui/src/views/project/ItemNote.vue
 delete mode 100644 skore-ui/src/views/project/ProjectItemList.vue
 delete mode 100644 skore-ui/src/views/project/ProjectView.vue
 delete mode 100644 skore-ui/src/views/project/ProjectViewNavigator.vue
 delete mode 100644 skore-ui/tests/stores/project.spec.ts
 delete mode 100644 skore-ui/tests/views/ProjectView.spec.ts
 delete mode 100644 skore-ui/tests/views/ProjectViewNavigator.spec.ts
 create mode 100644 skore-ui/tests/views/activity.spec.ts
 delete mode 100644 skore/src/skore/persistence/repository/view_repository.py
 delete mode 100644 skore/tests/unit/view/test_view_repository.py

diff --git a/skore-ui/src/SkoreUi.vue b/skore-ui/src/SkoreUi.vue
index 2eec868f4..b05ad02ca 100644
--- a/skore-ui/src/SkoreUi.vue
+++ b/skore-ui/src/SkoreUi.vue
@@ -17,13 +17,15 @@ const themesStore = useThemesStore();
   <div class="skore" :class="themesStore.currentThemeClass">
     <div class="app-shell">
       <AppToolbar>
-        <NavigationButton
-          v-for="(r, i) in router.getRoutes()"
-          :key="i"
-          :icon="`${r.meta['icon']}`"
-          :is-selected="r.name == route.name"
-          :to="r.path"
-        />
+        <template v-if="router.getRoutes().length > 1">
+          <NavigationButton
+            v-for="(r, i) in router.getRoutes()"
+            :key="i"
+            :icon="`${r.meta['icon']}`"
+            :is-selected="r.name == route.name"
+            :to="r.path"
+          />
+        </template>
       </AppToolbar>
       <RouterView v-slot="{ Component, route }">
         <template v-if="Component">
@@ -49,20 +51,21 @@ const themesStore = useThemesStore();
 
 <style scoped>
 .skore {
+  color: var(--color-text-primary);
+
   & .app-shell {
     display: flex;
-    flex-direction: row;
+    height: 100dvh;
+    flex-direction: column;
     background-color: var(--color-background-primary);
 
-    main {
-      width: calc(100dvw - var(--width-toolbar));
-      height: 100vh;
+    main,
+    .loader {
+      flex: 1;
     }
 
     .loader {
       display: flex;
-      height: 100dvh;
-      flex: 1;
       align-items: center;
       justify-content: center;
     }
diff --git a/skore-ui/src/StandaloneWidget.vue b/skore-ui/src/StandaloneWidget.vue
index 459e81756..314007742 100644
--- a/skore-ui/src/StandaloneWidget.vue
+++ b/skore-ui/src/StandaloneWidget.vue
@@ -25,5 +25,6 @@ onBeforeUnmount(() => {
 .widget {
   width: 100%;
   background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
 }
 </style>
diff --git a/skore-ui/src/assets/styles/_typography.css b/skore-ui/src/assets/styles/_typography.css
index 3dad6f613..693669641 100644
--- a/skore-ui/src/assets/styles/_typography.css
+++ b/skore-ui/src/assets/styles/_typography.css
@@ -9,7 +9,6 @@
 }
 
 .skore-ui {
-  color: var(--color-text-primary);
   font-family: Geist, sans-serif;
   font-size: var(--root-font-size);
   font-weight: var(--font-weight-regular);
diff --git a/skore-ui/src/components/FloatingTooltip.vue b/skore-ui/src/components/FloatingTooltip.vue
index b380e62a1..c9b0bc527 100644
--- a/skore-ui/src/components/FloatingTooltip.vue
+++ b/skore-ui/src/components/FloatingTooltip.vue
@@ -56,7 +56,7 @@ const { floatingStyles } = useFloating(reference, floating, {
   .floating-tooltip-content {
     position: absolute;
     z-index: 9999;
-    width: max-content;
+    max-width: 50dvw;
     padding: var(--spacing-6);
     border: solid var(--stroke-width-md) var(--color-stroke-background-primary);
     border-radius: var(--radius-xs);
diff --git a/skore-ui/src/components/RichTextEditor.vue b/skore-ui/src/components/RichTextEditor.vue
index 6910dff71..37921440c 100644
--- a/skore-ui/src/components/RichTextEditor.vue
+++ b/skore-ui/src/components/RichTextEditor.vue
@@ -96,16 +96,13 @@ defineExpose({ markBold, markItalic, markList, focus });
   & textarea {
     width: 100%;
     height: 100%;
-    border: var(--stroke-width-md) solid var(--color-stroke-background-primary);
-    border-radius: var(--radius-xs);
+    border: none;
     background-color: var(--color-background-primary);
     color: var(--color-text-secondary);
     font-family: GeistMono, monospace;
     resize: none;
-    transition: border-color var(--animation-duration) var(--animation-easing);
 
     &:focus {
-      border-color: var(--color-stroke-background-branding);
       outline: none;
     }
   }
diff --git a/skore-ui/src/dto.ts b/skore-ui/src/dto.ts
index 854fb804d..df4391412 100644
--- a/skore-ui/src/dto.ts
+++ b/skore-ui/src/dto.ts
@@ -10,19 +10,7 @@ export interface ProjectItemDto {
   updated_at: string;
   created_at: string;
   note?: string;
-}
-
-/**
- * A layout is a list of keys that are visible in a view
- */
-export type LayoutDto = string[];
-
-/**
- * A project is a collection of items and views
- */
-export interface ProjectDto {
-  items: { [key: string]: ProjectItemDto[] };
-  views: { [key: string]: LayoutDto };
+  version: number;
 }
 
 /**
@@ -31,3 +19,11 @@ export interface ProjectDto {
  * Sorted from newest to oldest.
  */
 export type ActivityFeedDto = ProjectItemDto[];
+
+/**
+ * Project info
+ */
+export interface ProjectInfoDto {
+  name: string;
+  path: string;
+}
diff --git a/skore-ui/src/models.ts b/skore-ui/src/models.ts
index 0fbffbc57..d70481687 100644
--- a/skore-ui/src/models.ts
+++ b/skore-ui/src/models.ts
@@ -11,6 +11,7 @@ export interface PresentableItem {
   createdAt: Date;
   updatedAt: Date;
   note?: string;
+  version: number;
 }
 
 /**
@@ -45,5 +46,6 @@ export function deserializeProjectItemDto(dto: ProjectItemDto): PresentableItem
     createdAt,
     updatedAt,
     note: dto.note,
+    version: dto.version,
   };
 }
diff --git a/skore-ui/src/router.ts b/skore-ui/src/router.ts
index 0e6879c71..43cf735d4 100644
--- a/skore-ui/src/router.ts
+++ b/skore-ui/src/router.ts
@@ -1,10 +1,8 @@
 import { createRouter as cr, createWebHashHistory, type RouteRecordRaw } from "vue-router";
 
 import ActivityFeedView from "@/views/activity/ActivityFeedView.vue";
-import ProjectView from "@/views/project/ProjectView.vue";
 
 export enum ROUTE_NAMES {
-  VIEW_BUILDER = "view-builder",
   ACTIVITY_FEED = "activity-feed",
   COMPONENTS = "components",
 }
@@ -18,14 +16,6 @@ const routes: RouteRecordRaw[] = [
       icon: "icon-list-sparkle",
     },
   },
-  {
-    path: "/views",
-    name: ROUTE_NAMES.VIEW_BUILDER,
-    component: ProjectView,
-    meta: {
-      icon: "icon-pie-chart",
-    },
-  },
 ];
 
 if (import.meta.env.DEV) {
diff --git a/skore-ui/src/services/api.ts b/skore-ui/src/services/api.ts
index 5e72978f7..ac82cdbe3 100644
--- a/skore-ui/src/services/api.ts
+++ b/skore-ui/src/services/api.ts
@@ -1,4 +1,4 @@
-import type { ActivityFeedDto, LayoutDto, ProjectDto } from "@/dto";
+import type { ActivityFeedDto, ProjectInfoDto } from "@/dto";
 import { getErrorMessage } from "@/services/utils";
 import { useToastsStore } from "@/stores/toasts";
 
@@ -19,45 +19,6 @@ function checkResponseStatus(r: Response, attendedStatusCode: number) {
   }
 }
 
-export async function fetchProject(): Promise<ProjectDto | null> {
-  try {
-    const r = await fetch(`${BASE_URL}/project/items`);
-    checkResponseStatus(r, 200);
-    return await r.json();
-  } catch (error) {
-    reportError(getErrorMessage(error));
-  }
-  return null;
-}
-
-export async function putView(view: string, layout: LayoutDto): Promise<ProjectDto | null> {
-  try {
-    const r = await fetch(`${BASE_URL}/project/views?key=${view}`, {
-      method: "PUT",
-      body: JSON.stringify(layout),
-      headers: {
-        "Content-Type": "application/json",
-      },
-    });
-    checkResponseStatus(r, 201);
-    return await r.json();
-  } catch (error) {
-    reportError(getErrorMessage(error));
-  }
-  return null;
-}
-
-export async function deleteView(view: string) {
-  try {
-    const r = await fetch(`${BASE_URL}/project/views?key=${view}`, {
-      method: "DELETE",
-    });
-    checkResponseStatus(r, 202);
-  } catch (error) {
-    reportError(getErrorMessage(error));
-  }
-}
-
 export async function fetchActivityFeed(after?: string): Promise<ActivityFeedDto | null> {
   try {
     let url = `${BASE_URL}/project/activity`;
@@ -77,7 +38,7 @@ export async function setNote(
   key: string,
   message: string,
   version: number = -1
-): Promise<ProjectDto | null> {
+): Promise<object | null> {
   try {
     const r = await fetch(`${BASE_URL}/project/note`, {
       method: "PUT",
@@ -93,3 +54,14 @@ export async function setNote(
   }
   return null;
 }
+
+export async function getInfo(): Promise<ProjectInfoDto | null> {
+  try {
+    const r = await fetch(`${BASE_URL}/project/info`);
+    checkResponseStatus(r, 200);
+    return await r.json();
+  } catch (error) {
+    reportError(getErrorMessage(error));
+  }
+  return null;
+}
diff --git a/skore-ui/src/stores/project.ts b/skore-ui/src/stores/project.ts
deleted file mode 100644
index b6c4b5a20..000000000
--- a/skore-ui/src/stores/project.ts
+++ /dev/null
@@ -1,438 +0,0 @@
-import { acceptHMRUpdate, defineStore } from "pinia";
-import { ref, shallowRef, watch } from "vue";
-
-import { type LayoutDto, type ProjectDto, type ProjectItemDto } from "@/dto";
-import { deserializeProjectItemDto, type PresentableItem } from "@/models";
-import { deleteView as deleteViewApi, fetchProject, putView, setNote } from "@/services/api";
-import { poll } from "@/services/utils";
-
-export interface TreeNode {
-  name: string;
-  children: TreeNode[];
-}
-
-type ProjectPresentableItem = PresentableItem & {
-  updates: string[];
-};
-
-export const useProjectStore = defineStore("project", () => {
-  // this objects are not deeply reactive as they may be very large
-  const items = shallowRef<{ [key: string]: ProjectItemDto } | null>(null);
-  const currentViewItems = shallowRef<ProjectPresentableItem[]>([]);
-  const views = ref<{ [key: string]: LayoutDto }>({});
-  const currentView = ref<string | null>(null);
-  const itemsUpdates = ref<{ [key: string]: string[] }>({});
-  let currentItemUpdateIndex: { [key: string]: number } = {};
-
-  /**
-   * Return true if the given key is in the list of displayed keys, false otherwise.
-   * @param view the view to check
-   * @param key the key to look for
-   * @returns true if the key is displayed, false otherwise
-   */
-  function isKeyDisplayed(view: string, key: string) {
-    const realKey = key.replace(" (self)", "");
-    const visibleKeys = views.value[view] ?? [];
-    return visibleKeys.includes(realKey);
-  }
-
-  /**
-   * Add the value of a key to the view.
-   * @param view the view to add the key to
-   * @param key the key to add to the view
-   * @param position the position to add the key at, default to the end of the list
-   * @returns true if the key was successfully displayed, false otherwise (e.g. if it was already displayed)
-   */
-  async function displayKey(view: string, key: string, position: number = -1) {
-    stopBackendPolling();
-    let hasChanged = false;
-    const realKey = key.replace(" (self)", "");
-    if (!isKeyDisplayed(view, realKey)) {
-      if (position === -1) {
-        views.value[view] = [...views.value[view], realKey];
-      } else {
-        views.value[view] = [
-          ...views.value[view].slice(0, position),
-          realKey,
-          ...views.value[view].slice(position),
-        ];
-      }
-      await _persistView(view, views.value[view]);
-      hasChanged = true;
-    }
-    await startBackendPolling();
-    return hasChanged;
-  }
-
-  /**
-   * Hide the value of a key from the view.
-   * @param view the view to hide the key from
-   * @param key the key to hide
-   */
-  async function hideKey(view: string, key: string) {
-    stopBackendPolling();
-    if (isKeyDisplayed(view, key)) {
-      const v = views.value[view];
-      views.value[view] = v.filter((k) => k !== key);
-      await _persistView(view, views.value[view]);
-    }
-    await startBackendPolling();
-  }
-
-  /**
-   * Fetch project data from the backend.
-   */
-  let _isCanceledCall = false;
-  async function fetch() {
-    if (!_isCanceledCall) {
-      const r = await fetchProject();
-      if (r) {
-        setProject(r);
-      }
-    }
-  }
-  /**
-   * Start real time sync with the server.
-   */
-  let _stopBackendPolling: (() => void) | null = null;
-  async function startBackendPolling() {
-    // ensure that there is only one polling running
-    if (_stopBackendPolling === null) {
-      _isCanceledCall = false;
-      _stopBackendPolling = await poll(fetch, 1500);
-    }
-  }
-
-  /**
-   * Stop real time sync with the server.
-   */
-  function stopBackendPolling() {
-    _isCanceledCall = true;
-    if (_stopBackendPolling) {
-      _stopBackendPolling();
-      _stopBackendPolling = null;
-    }
-  }
-
-  /**
-   * Set the current views and items
-   * Autoselect the first view if no view is selected
-   *
-   * For now only the latest item is kept in memory.
-   *
-   * @param p data received from the backend
-   */
-  async function setProject(p: ProjectDto) {
-    const historyByKey: { [key: string]: string[] } = {};
-    const latestItemByKey: { [key: string]: ProjectItemDto } = {};
-    for (const [key, value] of Object.entries(p.items)) {
-      latestItemByKey[key] = value[value.length - 1];
-      historyByKey[key] = value.map((item) => item.updated_at);
-    }
-
-    items.value = latestItemByKey;
-    views.value = p.views;
-    itemsUpdates.value = historyByKey;
-
-    const viewNames = Object.keys(views.value);
-    if (currentView.value === null) {
-      if (viewNames.length > 0) {
-        currentView.value = viewNames[0];
-      }
-    } else if (!viewNames.includes(currentView.value)) {
-      currentView.value = null;
-    }
-    _updatePresentableItemsInView();
-    _saveItemsToSessionStorage(p.items);
-  }
-
-  /**
-   * Transform a list of leys into a tree of FileTreeNodes.
-   *
-   * i.e. `["a", "a/b", "a/b/d", "a/b/e", "a/b/f/g"]` ->
-   * ```json
-   * [
-   *   {
-   *     name: "a",
-   *     children: [
-   *       { name: "a (self)", children: [] },
-   *       {
-   *         name: "a/b",
-   *         children: [
-   *           { name: "a/b (self)", children: [] },
-   *           { name: "a/b/d", children: [] },
-   *           { name: "a/b/e", children: [] },
-   *           {
-   *             name: "a/b/f",
-   *             children: [
-   *               { name: "a/b/f/g", children: [] },
-   *             ],
-   *           },
-   *         ],
-   *       },
-   *     ],
-   *   },
-   * ]
-   * ```
-   *
-   * @param list - A list of strings to transform into a tree.
-   * @returns A tree of FileTreeNodes.
-   */
-  function keysAsTree() {
-    const lut: { [key: string]: TreeNode } = {};
-    const tree: TreeNode[] = [];
-    const keys = Object.keys(items.value || {});
-
-    for (const key of keys) {
-      const segments = key.split("/").filter((s) => s.length > 0);
-      const rootSegment = segments[0];
-      let currentNode = lut[rootSegment];
-      if (!currentNode) {
-        currentNode = { name: rootSegment, children: [] };
-        tree.push(currentNode);
-        lut[rootSegment] = currentNode;
-      }
-      let n = currentNode!;
-      for (const s of segments.slice(1)) {
-        n.children = n.children || [];
-        const name = `${n.name}/${s}`;
-        let childNode = lut[name];
-        if (!childNode) {
-          childNode = { name, children: [] };
-          n.children.push(childNode);
-          lut[name] = childNode;
-        }
-        n = childNode;
-      }
-    }
-
-    // sort items alphabetically
-    function sortNode(node: TreeNode) {
-      node.children.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase()));
-      for (const child of node.children) {
-        sortNode(child);
-      }
-    }
-
-    for (const node of tree) {
-      sortNode(node);
-    }
-
-    // add (self) to the name of the node if it is the same as the name of the key
-    function addSelf(node: TreeNode) {
-      if (keys.includes(node.name) && node.children.length > 0) {
-        node.children.unshift({ name: `${node.name} (self)`, children: [] });
-      }
-      for (const child of node.children) {
-        addSelf(child);
-      }
-    }
-
-    for (const node of tree) {
-      addSelf(node);
-    }
-    return tree;
-  }
-
-  /**
-   * Create a new view with the given name.
-   * @param name the name of the view to create
-   */
-  async function createView(name: string) {
-    views.value[name] = [];
-    await _persistView(name, views.value[name]);
-  }
-
-  /**
-   * Duplicate a view.
-   * @param src the source view to duplicate
-   * @param name the name of the new view
-   */
-  async function duplicateView(src: string, name: string) {
-    if (views.value[src] === undefined) {
-      console.error("View not found", src);
-      return;
-    }
-    views.value[name] = [...views.value[src]];
-    await _persistView(name, views.value[name]);
-  }
-
-  /**
-   * Delete a view.
-   * @param name the name of the view to delete
-   */
-  async function deleteView(name: string) {
-    if (name === currentView.value) {
-      currentView.value = null;
-    }
-    delete views.value[name];
-    await deleteViewApi(name);
-  }
-
-  /**
-   * Rename a view.
-   * @param name the name of the view to rename
-   */
-  async function renameView(name: string, newName: string) {
-    if (name !== newName) {
-      views.value[newName] = [...views.value[name]];
-      await deleteView(name);
-      await _persistView(newName, views.value[newName]);
-    }
-  }
-
-  /**
-   * Set the current view
-   */
-  function setCurrentView(view: string) {
-    currentView.value = view;
-    currentItemUpdateIndex = {};
-    _updatePresentableItemsInView();
-  }
-
-  /**
-   * Get the history of an item in the project.
-   * @param key the item's key to get the history of
-   * @param index the index of the update to get
-   * @returns the update at the given index
-   */
-  function getItemUpdate(key: string, index: number) {
-    const r = sessionStorage.getItem(`items/${key}`);
-    if (r) {
-      return JSON.parse(r)[index] as ProjectItemDto;
-    }
-    return null;
-  }
-
-  /**
-   * Set the current update index for an item.
-   * @param key the key of the item to set the update index for
-   * @param index the index of the update to set
-   */
-  function setCurrentItemUpdateIndex(key: string, index: number) {
-    currentItemUpdateIndex[key] = index;
-    _updatePresentableItemsInView();
-  }
-
-  /**
-   * Set the current update index for an item.
-   * @param key the key of the item to get the update index for
-   * @returns the index of the update for the given key
-   */
-  function getCurrentItemUpdateIndex(key: string) {
-    if (currentItemUpdateIndex[key] === undefined) {
-      const updates = currentViewItems.value.find((item) => item.name === key)?.updates;
-      if (updates) {
-        return updates.length - 1;
-      } else {
-        return 0;
-      }
-    }
-    return currentItemUpdateIndex[key];
-  }
-
-  /**
-   * Set a note on a currently displayed note
-   */
-  async function setNoteOnItem(key: string, message: string) {
-    const updateIndex = getCurrentItemUpdateIndex(key);
-    await setNote(key, message, updateIndex);
-  }
-
-  /**
-   * Get the items in the current view as a presentable list.
-   * @returns a list of items with their metadata
-   */
-  function _updatePresentableItemsInView() {
-    const r: ProjectPresentableItem[] = [];
-    if (items.value !== null && currentView.value !== null) {
-      const v = views.value[currentView.value];
-      for (const key of v) {
-        const item =
-          currentItemUpdateIndex[key] !== undefined
-            ? getItemUpdate(key, currentItemUpdateIndex[key])
-            : items.value[key];
-        if (item) {
-          r.push({
-            ...deserializeProjectItemDto(item),
-            updates: itemsUpdates.value[key],
-          });
-        }
-      }
-    }
-    currentViewItems.value = r;
-  }
-
-  /**
-   * Send the view's layout to backend
-   * @param view the view to persist
-   * @param layout the layout to persist
-   */
-  async function _persistView(view: string, layout: LayoutDto) {
-    if (items.value && views.value) {
-      const r = await putView(view, layout);
-      if (r) {
-        setProject(r);
-      }
-    }
-  }
-
-  /**
-   * Save the items to the session storage.
-   */
-  function _saveItemsToSessionStorage(items: { [key: string]: ProjectItemDto[] }) {
-    for (const [key, value] of Object.entries(items)) {
-      sessionStorage.setItem(`items/${key}`, JSON.stringify(value));
-    }
-  }
-
-  /**
-   * Persist the current view's layout when the items change.
-   * Useful when user reorganizes items in the current view.
-   */
-  watch(
-    () => currentViewItems.value,
-    async (value, oldValue) => {
-      // Compare arrays by mapping to keys and checking if they're in the same order
-      const newKeys = value.map((item) => item.name);
-      const oldKeys = oldValue.map((item) => item.name);
-
-      const arraysMatch =
-        newKeys.length === oldKeys.length && newKeys.every((key, index) => key === oldKeys[index]);
-
-      if (!arraysMatch && currentView.value !== null) {
-        const name = currentView.value;
-        views.value[name] = [...currentViewItems.value.map((item) => item.name)];
-        await _persistView(name, views.value[name]);
-      }
-    }
-  );
-
-  return {
-    // refs
-    currentView,
-    currentViewItems,
-    items,
-    views,
-    // actions
-    createView,
-    deleteView,
-    displayKey,
-    duplicateView,
-    hideKey,
-    isKeyDisplayed,
-    keysAsTree,
-    setCurrentView,
-    setProject,
-    renameView,
-    setCurrentItemUpdateIndex,
-    getCurrentItemUpdateIndex,
-    setNoteOnItem,
-    startBackendPolling,
-    stopBackendPolling,
-  };
-});
-
-if (import.meta.hot) {
-  import.meta.hot.accept(acceptHMRUpdate(useProjectStore, import.meta.hot));
-}
diff --git a/skore-ui/src/views/AppToolbar.vue b/skore-ui/src/views/AppToolbar.vue
index 0bd4d226e..8456b4efa 100644
--- a/skore-ui/src/views/AppToolbar.vue
+++ b/skore-ui/src/views/AppToolbar.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { onMounted, ref, watch } from "vue";
 
+import FloatingTooltip from "@/components/FloatingTooltip.vue";
 import SlideToggle from "@/components/SlideToggle.vue";
 import SkoreLogo from "@/components/icons/SkoreLogo.vue";
+import { getInfo } from "@/services/api";
 import { useThemesStore } from "@/stores/themes";
 
 const themesStore = useThemesStore();
 const isDarkModeForced = ref(themesStore.currentTheme === "dark");
+const projectName = ref("");
+const projectPath = ref("");
 
 watch(isDarkModeForced, (forceDarkMode) => {
   themesStore.setTheme(forceDarkMode ? "dark" : "light");
@@ -17,6 +21,14 @@ watch(
     isDarkModeForced.value = themesStore.currentTheme === "dark";
   }
 );
+
+onMounted(async () => {
+  const info = await getInfo();
+  if (info) {
+    projectName.value = info.name;
+    projectPath.value = info.path;
+  }
+});
 </script>
 
 <template>
@@ -27,6 +39,11 @@ watch(
     <nav>
       <slot></slot>
     </nav>
+    <div class="project-name">
+      <FloatingTooltip :text="projectPath" placement="bottom-start">
+        {{ projectName }}
+      </FloatingTooltip>
+    </div>
     <div class="tools">
       <div class="dark-light">
         <i class="icon icon-sun" />
@@ -40,39 +57,45 @@ watch(
 <style scoped>
 .app-toolbar {
   display: flex;
-  min-width: var(--width-toolbar);
-  height: 100dvh;
-  flex-direction: column;
+  width: 100%;
+  height: var(--height-header);
+  flex-direction: row;
   border-right: solid var(--stroke-width-md) var(--color-stroke-background-primary);
   background-color: var(--color-background-secondary);
 
   & .logo {
     display: flex;
-    height: var(--height-header);
     align-items: center;
     justify-content: center;
-    border-bottom: solid var(--stroke-width-md) var(--color-stroke-background-primary);
+    padding: var(--spacing-8);
+    border-right: solid var(--stroke-width-md) var(--color-stroke-background-primary);
 
     & svg {
-      width: calc(var(--width-toolbar) * 0.8);
+      height: calc(var(--height-header) * 0.8);
     }
   }
 
-  & nav {
+  & .project-name {
     display: flex;
     flex: 1;
-    flex-direction: column;
     align-items: center;
-    padding: var(--spacing-12) 0;
-    gap: var(--spacing-10);
+    color: var(--color-text-primary);
+  }
+
+  & nav {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: var(--spacing-8);
+    gap: var(--spacing-8);
   }
 
   & .tools {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
     justify-content: center;
-    padding: var(--spacing-8) 0;
+    padding: var(--spacing-8);
     gap: var(--spacing-8);
 
     & .dark-light {
diff --git a/skore-ui/src/views/activity/ActivityFeedCardHeader.vue b/skore-ui/src/views/activity/ActivityFeedCardHeader.vue
index f54c94211..8995a65f6 100644
--- a/skore-ui/src/views/activity/ActivityFeedCardHeader.vue
+++ b/skore-ui/src/views/activity/ActivityFeedCardHeader.vue
@@ -2,20 +2,34 @@
 import { format } from "date-fns";
 import { computed } from "vue";
 
+import FloatingTooltip from "@/components/FloatingTooltip.vue";
+import SimpleButton from "@/components/SimpleButton.vue";
+
 const props = defineProps<{
   icon: string;
   name: string;
+  version: number;
   datetime: Date;
 }>();
 
+const emit = defineEmits(["annotate"]);
+
 const date = computed(() => format(props.datetime, "yyyy/MM/dd"));
 const time = computed(() => format(props.datetime, "HH:mm:ss"));
 </script>
 
 <template>
   <div class="activity-feed-card-header">
-    <div class="name"><i class="icon" :class="props.icon" /> {{ props.name }}</div>
+    <div class="name">
+      <i class="icon" :class="props.icon" /> {{ props.name }}
+      <span v-if="version > 0" class="version">#{{ props.version }}</span>
+    </div>
     <div class="datetime">{{ date }} <span class="at">at</span> {{ time }}</div>
+    <div class="actions">
+      <FloatingTooltip text="Annotate this item." placement="bottom-end">
+        <SimpleButton icon="icon-edit" @click.stop="emit('annotate')" />
+      </FloatingTooltip>
+    </div>
   </div>
 </template>
 
@@ -34,15 +48,25 @@ const time = computed(() => format(props.datetime, "HH:mm:ss"));
       color: var(--color-icon-tertiary);
       vertical-align: middle;
     }
+
+    & .version {
+      color: var(--color-text-secondary);
+    }
   }
 
   & .datetime {
+    flex: 1;
     color: var(--color-text-primary);
     font-size: var(--font-size-xs);
+    text-align: right;
 
     & .at {
       color: var(--color-text-secondary);
     }
   }
+
+  & .actions {
+    padding: 0 0 0 var(--spacing-8);
+  }
 }
 </style>
diff --git a/skore-ui/src/views/activity/ActivityFeedItem.vue b/skore-ui/src/views/activity/ActivityFeedItem.vue
new file mode 100644
index 000000000..759f9a015
--- /dev/null
+++ b/skore-ui/src/views/activity/ActivityFeedItem.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { nextTick, ref, useTemplateRef } from "vue";
+
+import MarkdownWidget from "@/components/MarkdownWidget.vue";
+import MediaWidgetSelector from "@/components/MediaWidgetSelector.vue";
+import ActivityFeedCardHeader from "@/views/activity/ActivityFeedCardHeader.vue";
+import ItemNoteEditor from "@/views/activity/ItemNoteEditor.vue";
+import type { ActivityPresentableItem } from "@/views/activity/activity";
+
+const props = defineProps<{ item: ActivityPresentableItem }>();
+
+const isAnnotating = ref(false);
+const editor = useTemplateRef<InstanceType<typeof ItemNoteEditor>>("editor");
+
+function annotateItem() {
+  isAnnotating.value = true;
+  nextTick(() => {
+    editor.value?.focus();
+  });
+}
+
+function finishEdition() {
+  isAnnotating.value = false;
+}
+</script>
+
+<template>
+  <div class="activity-feed-item" :class="{ 'has-note': item.note && item.note.length > 1 }">
+    <ActivityFeedCardHeader
+      :icon="props.item.icon"
+      :datetime="props.item.updatedAt"
+      :name="props.item.name"
+      :version="props.item.version"
+      @annotate="annotateItem()"
+    />
+    <ItemNoteEditor
+      v-if="isAnnotating"
+      ref="editor"
+      :name="props.item.name"
+      :version="props.item.version"
+      :note="props.item.note ?? ''"
+      @edition-end="finishEdition"
+    />
+    <div class="note-wrapper">
+      <MarkdownWidget
+        v-if="props.item.note && props.item.note.length > 0 && !isAnnotating"
+        :source="props.item.note"
+        @click.stop="annotateItem()"
+      />
+    </div>
+    <div class="item-wrapper">
+      <MediaWidgetSelector :item="item" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.activity-feed-item {
+  &.has-note .item-wrapper {
+    margin-top: var(--spacing-4);
+  }
+
+  .note-wrapper {
+    padding-left: var(--spacing-12);
+    border-left: solid var(--stroke-width-md) var(--color-stroke-background-primary);
+  }
+}
+</style>
diff --git a/skore-ui/src/views/activity/ActivityFeedView.vue b/skore-ui/src/views/activity/ActivityFeedView.vue
index 444e78d52..bd97df107 100644
--- a/skore-ui/src/views/activity/ActivityFeedView.vue
+++ b/skore-ui/src/views/activity/ActivityFeedView.vue
@@ -1,36 +1,17 @@
 <script setup lang="ts">
 import Simplebar from "simplebar-vue";
-import { onBeforeUnmount, shallowRef } from "vue";
+import { onBeforeUnmount } from "vue";
 
-import MediaWidgetSelector from "@/components/MediaWidgetSelector.vue";
-import { deserializeProjectItemDto, type PresentableItem } from "@/models";
-import { fetchActivityFeed } from "@/services/api";
-import { poll } from "@/services/utils";
-import ActivityFeedCardHeader from "@/views/activity/ActivityFeedCardHeader.vue";
+import { useActivityStore } from "@/views/activity/activity";
 import ActivityFeedCurvedArrow from "@/views/activity/ActivityFeedCurvedArrow.vue";
+import ActivityFeedItem from "@/views/activity/ActivityFeedItem.vue";
 
-type ActivityPresentableItem = PresentableItem & { icon: string };
-
-const items = shallowRef<ActivityPresentableItem[]>([]);
-let lastFetchTime = new Date(1, 1, 1, 0, 0, 0, 0);
-
-async function fetch() {
-  const now = new Date();
-  const feed = await fetchActivityFeed(lastFetchTime.toISOString());
-  lastFetchTime = now;
-  if (feed !== null) {
-    const newItems = feed.map((i) => ({
-      ...deserializeProjectItemDto(i),
-      icon: i.media_type.startsWith("text") ? "icon-pill" : "icon-playground",
-    }));
-    items.value = [...newItems, ...items.value];
-  }
-}
+const activityStore = useActivityStore();
 
-const stopPolling = await poll(fetch, 1000);
+activityStore.startBackendPolling();
 
 onBeforeUnmount(() => {
-  stopPolling();
+  activityStore.stopBackendPolling();
 });
 </script>
 
@@ -41,19 +22,14 @@ onBeforeUnmount(() => {
         <h1>Activity feed</h1>
         <h2>Find all your activity, right below.</h2>
         <Transition name="fade" mode="out-in">
-          <div class="items" v-if="items.length > 0">
+          <div class="items" v-if="activityStore.items.length > 0">
             <div
               class="item"
-              v-for="(item, i) in items"
+              v-for="(item, i) in activityStore.items"
               :key="`${item.name}-${item.updatedAt.getTime()}`"
             >
               <ActivityFeedCurvedArrow :has-arrow="i === 0" />
-              <ActivityFeedCardHeader
-                :icon="item.icon"
-                :datetime="item.updatedAt"
-                :name="item.name"
-              />
-              <MediaWidgetSelector :item="item" />
+              <ActivityFeedItem :item="item" />
             </div>
           </div>
           <div class="placeholder" v-else>
@@ -67,14 +43,13 @@ onBeforeUnmount(() => {
 
 <style scoped>
 .scroll {
-  max-height: 100dvh;
+  max-height: calc(100dvh - var(--height-header));
 }
 
 .activity-feed {
   display: flex;
-  min-height: 100dvh;
   flex-direction: column;
-  padding: var(--spacing-24) 11%;
+  padding: var(--spacing-24);
 
   & h1 {
     color: var(--color-text-primary);
@@ -141,4 +116,16 @@ onBeforeUnmount(() => {
     }
   }
 }
+
+@media screen and (width >= 801px) {
+  .activity-feed {
+    padding: var(--spacing-24) calc(var(--spacing-24) * 2);
+  }
+}
+
+@media screen and (width >= 1025px) {
+  .activity-feed {
+    padding: var(--spacing-24) calc(var(--spacing-24) * 4);
+  }
+}
 </style>
diff --git a/skore-ui/src/views/activity/ItemNoteEditor.vue b/skore-ui/src/views/activity/ItemNoteEditor.vue
new file mode 100644
index 000000000..18c373cc7
--- /dev/null
+++ b/skore-ui/src/views/activity/ItemNoteEditor.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from "vue";
+
+import RichTextEditor from "@/components/RichTextEditor.vue";
+import SimpleButton from "@/components/SimpleButton.vue";
+import { useActivityStore } from "@/views/activity/activity";
+
+const props = defineProps<{ name: string; note: string | null; version: number }>();
+const emit = defineEmits(["editionEnd"]);
+defineExpose({ focus });
+
+const activityStore = useActivityStore();
+const el = useTemplateRef<HTMLDivElement>("el");
+const editor = useTemplateRef<InstanceType<typeof RichTextEditor>>("editor");
+const isEditing = ref(false);
+const innerNote = ref(`${props.note !== null ? props.note : ""}`);
+
+function focus() {
+  isEditing.value = true;
+  editor.value?.focus();
+  // start to listen for click outside of this component
+  document.addEventListener("click", onClickOutside);
+}
+
+async function onEditionEnd() {
+  // if there is multiple instances of the component in the page
+  // this function may be called multiple times
+  // so guard this call
+  if (isEditing.value) {
+    // stop listening to outside click
+    document.removeEventListener("click", onClickOutside);
+    innerNote.value = innerNote.value.replace(/\n+$/g, "");
+    await activityStore.setNoteOnItem(props.name, props.version, innerNote.value);
+    isEditing.value = false;
+    // actually wait for the editor to be closed to restart backend polling
+    nextTick(() => {
+      activityStore.startBackendPolling();
+      emit("editionEnd");
+    });
+  }
+}
+
+async function onClickOutside(e: Event) {
+  if (isEditing.value) {
+    const clicked = e.target as Node;
+    if (el.value && document.body.contains(clicked)) {
+      // is it a click outside ?
+      const isOutside = !el.value.contains(clicked);
+      console.log("clicked outside", isOutside);
+      if (isOutside) {
+        await onEditionEnd();
+      }
+    }
+  }
+}
+
+watch(innerNote, async () => {
+  await activityStore.setNoteOnItem(props.name, props.version, innerNote.value);
+});
+
+watch(
+  () => props.note,
+  (newNote) => {
+    innerNote.value = `${newNote !== null ? newNote : ""}`;
+  }
+);
+
+onBeforeUnmount(() => {
+  // avoid event listener leak in case the component is unmounted in edit mode
+  document.removeEventListener("click", onClickOutside);
+});
+</script>
+
+<template>
+  <div class="item-note-editor" ref="el" :class="{ focus: isEditing }">
+    <!-- <Transition name="fade"> -->
+    <div class="edit-actions">
+      <SimpleButton :is-inline="true" icon="icon-bold" @click="editor?.markBold()" />
+      <SimpleButton :is-inline="true" icon="icon-italic" @click="editor?.markItalic()" />
+      <SimpleButton :is-inline="true" icon="icon-bullets" @click="editor?.markList()" />
+    </div>
+    <!-- </Transition> -->
+    <RichTextEditor
+      class="inline-editor"
+      ref="editor"
+      v-model:value="innerNote"
+      :rows="4"
+      @keyup.esc="onEditionEnd"
+      @keydown.shift.enter.prevent="onEditionEnd"
+      @keydown.meta.enter.prevent="onEditionEnd"
+    />
+  </div>
+</template>
+
+<style scoped>
+.item-note-editor {
+  position: relative;
+  padding-top: var(--spacing-8);
+  border: solid var(--stroke-width-md) var(--color-stroke-background-primary);
+  border-radius: var(--radius-xs);
+  color: var(--color-text-secondary);
+  transition: border-color var(--animation-duration) var(--animation-easing);
+
+  .edit-actions {
+    position: absolute;
+    top: 0;
+    right: 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+  }
+
+  .inline-editor {
+    padding-top: var(--spacing-12);
+  }
+
+  &.focus {
+    border-color: var(--color-stroke-background-branding);
+  }
+}
+</style>
diff --git a/skore-ui/src/views/activity/activity.ts b/skore-ui/src/views/activity/activity.ts
new file mode 100644
index 000000000..01886a66c
--- /dev/null
+++ b/skore-ui/src/views/activity/activity.ts
@@ -0,0 +1,83 @@
+import { acceptHMRUpdate, defineStore } from "pinia";
+import { shallowRef } from "vue";
+
+import { deserializeProjectItemDto, type PresentableItem } from "@/models";
+import { fetchActivityFeed, setNote } from "@/services/api";
+import { poll } from "@/services/utils";
+
+export type ActivityPresentableItem = PresentableItem & { icon: string };
+
+export const useActivityStore = defineStore("activity", () => {
+  // this object is not deeply reactive as it may be very large
+  const items = shallowRef<ActivityPresentableItem[]>([]);
+
+  /**
+   * Set a note on a currently displayed note
+   */
+  async function setNoteOnItem(key: string, version: number, message: string) {
+    // save in the backend
+    await setNote(key, message, version);
+    // also keep it locally
+    items.value = items.value.map((item) => {
+      if (item.name === key && item.version === version) {
+        item.note = message;
+      }
+      return item;
+    });
+  }
+
+  /**
+   * Fetch project data from the backend.
+   */
+  let _isCanceledCall = false;
+  let _lastFetchTime = new Date(1, 1, 1, 0, 0, 0, 0);
+  async function _fetch() {
+    if (!_isCanceledCall) {
+      const now = new Date();
+      const feed = await fetchActivityFeed(_lastFetchTime.toISOString());
+      _lastFetchTime = now;
+      if (feed !== null) {
+        const newItems = feed.map((i) => ({
+          ...deserializeProjectItemDto(i),
+          icon: i.media_type.startsWith("text") ? "icon-pill" : "icon-playground",
+        }));
+        items.value = [...newItems, ...items.value];
+      }
+    }
+  }
+  /**
+   * Start real time sync with the server.
+   */
+  let _stopBackendPolling: (() => void) | null = null;
+  async function startBackendPolling() {
+    // ensure that there is only one polling running
+    if (_stopBackendPolling === null) {
+      _isCanceledCall = false;
+      _stopBackendPolling = await poll(_fetch, 1500);
+    }
+  }
+
+  /**
+   * Stop real time sync with the server.
+   */
+  function stopBackendPolling() {
+    _isCanceledCall = true;
+    if (_stopBackendPolling) {
+      _stopBackendPolling();
+      _stopBackendPolling = null;
+    }
+  }
+
+  return {
+    // refs
+    items,
+    // actions
+    setNoteOnItem,
+    startBackendPolling,
+    stopBackendPolling,
+  };
+});
+
+if (import.meta.hot) {
+  import.meta.hot.accept(acceptHMRUpdate(useActivityStore, import.meta.hot));
+}
diff --git a/skore-ui/src/views/project/ItemNote.vue b/skore-ui/src/views/project/ItemNote.vue
deleted file mode 100644
index 472ee3c09..000000000
--- a/skore-ui/src/views/project/ItemNote.vue
+++ /dev/null
@@ -1,162 +0,0 @@
-<script setup lang="ts">
-import { nextTick, onBeforeUnmount, ref, useTemplateRef, watch } from "vue";
-
-import MarkdownWidget from "@/components/MarkdownWidget.vue";
-import RichTextEditor from "@/components/RichTextEditor.vue";
-import SimpleButton from "@/components/SimpleButton.vue";
-import { useProjectStore } from "@/stores/project";
-
-const props = defineProps<{ name: string; note: string | null }>();
-
-const projectStore = useProjectStore();
-const el = useTemplateRef<HTMLDivElement>("el");
-const editor = useTemplateRef<InstanceType<typeof RichTextEditor>>("editor");
-const isEditing = ref(false);
-const innerNote = ref(`${props.note !== null ? props.note : ""}`);
-
-function onEdit() {
-  projectStore.stopBackendPolling();
-  isEditing.value = true;
-  // start to listen for click outside of this component
-  document.addEventListener("click", onClickOutside);
-  // actually wait for the editor to be open to focus it
-  nextTick(() => {
-    editor.value?.focus();
-  });
-}
-
-async function onEditionEnd() {
-  // if there is multiple instances of the component in the page
-  // this function may be called multiple times
-  // so guard this call
-  if (isEditing.value) {
-    // stop listening to outside click
-    document.removeEventListener("click", onClickOutside);
-    innerNote.value = innerNote.value.replace(/\n+$/g, "");
-    await projectStore.setNoteOnItem(props.name, innerNote.value);
-    isEditing.value = false;
-    // actually wait for the editor to be closed to resatrt backend polling
-    nextTick(() => {
-      projectStore.startBackendPolling();
-    });
-  }
-}
-
-async function onClear() {
-  innerNote.value = "";
-  await onEditionEnd();
-}
-
-async function onClickOutside(e: Event) {
-  if (isEditing.value) {
-    const clicked = e.target as Node;
-    if (el.value && document.body.contains(clicked)) {
-      // is it a click outside ?
-      const isOutside = !el.value.contains(clicked);
-      if (isOutside) {
-        await onEditionEnd();
-      }
-    }
-  }
-}
-
-watch(innerNote, async () => {
-  await projectStore.setNoteOnItem(props.name, innerNote.value);
-});
-
-watch(
-  () => props.note,
-  (newNote) => {
-    innerNote.value = `${newNote !== null ? newNote : ""}`;
-  }
-);
-
-onBeforeUnmount(() => {
-  // avoid event listener leak in case the component is unmounted in edit mode
-  document.removeEventListener("click", onClickOutside);
-});
-</script>
-
-<template>
-  <div class="item-note" ref="el">
-    <div class="header">
-      <div class="info">
-        <div>Note</div>
-        <Transition name="fade">
-          <SimpleButton
-            v-if="isEditing && innerNote && innerNote.length > 0"
-            label="clear"
-            class="clear"
-            :is-inline="true"
-            @click="onClear"
-          />
-        </Transition>
-      </div>
-      <Transition name="fade">
-        <div class="edit-actions" v-if="isEditing">
-          <SimpleButton :is-inline="true" icon="icon-bold" @click="editor?.markBold()" />
-          <SimpleButton :is-inline="true" icon="icon-italic" @click="editor?.markItalic()" />
-          <SimpleButton :is-inline="true" icon="icon-bullets" @click="editor?.markList()" />
-        </div>
-      </Transition>
-    </div>
-    <div class="editor" v-if="isEditing">
-      <RichTextEditor
-        ref="editor"
-        v-model:value="innerNote"
-        :rows="4"
-        @keyup.esc="onEditionEnd"
-        @keydown.shift.enter.prevent="onEditionEnd"
-        @keydown.meta.enter.prevent="onEditionEnd"
-      />
-    </div>
-    <div class="preview" v-if="!isEditing" @click="onEdit">
-      <MarkdownWidget :source="innerNote" v-if="innerNote && innerNote.length > 0" />
-      <div class="placeholder" v-else>Click to annotate {{ props.name }}.</div>
-    </div>
-  </div>
-</template>
-
-<style lang="css" scoped>
-.item-note {
-  border: solid var(--stroke-width-md) var(--color-stroke-background-primary);
-  border-radius: var(--radius-xs);
-  color: var(--color-text-secondary);
-
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: var(--spacing-8);
-    border-bottom: solid var(--stroke-width-md) var(--color-stroke-background-primary);
-    background-color: var(--color-background-secondary);
-
-    .info {
-      display: flex;
-      gap: var(--spacing-8);
-
-      .clear {
-        padding: 0;
-        color: var(--color-text-danger);
-        font-size: var(--font-size-xs);
-      }
-    }
-
-    .edit-actions {
-      display: flex;
-      flex-direction: row;
-      justify-content: flex-end;
-    }
-  }
-
-  .preview {
-    padding: var(--spacing-8);
-
-    .placeholder {
-      color: var(--color-text-secondary);
-      font-size: var(--font-size-xs);
-      font-style: italic;
-    }
-  }
-}
-</style>
diff --git a/skore-ui/src/views/project/ProjectItemList.vue b/skore-ui/src/views/project/ProjectItemList.vue
deleted file mode 100644
index 1746c5b0c..000000000
--- a/skore-ui/src/views/project/ProjectItemList.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import Simplebar from "simplebar-vue";
-
-import SectionHeader from "@/components/SectionHeader.vue";
-import TreeAccordion, { type TreeAccordionNode } from "@/components/TreeAccordion.vue";
-import { useProjectStore } from "@/stores/project";
-import { useToastsStore } from "@/stores/toasts";
-import { computed } from "vue";
-
-const projectStore = useProjectStore();
-const toastsStore = useToastsStore();
-
-const itemsAsTree = computed(() => {
-  const source = projectStore.keysAsTree();
-  const tree = structuredClone(source) as unknown as TreeAccordionNode[];
-  // add actions to the leaf nodes
-  function addActions(node: TreeAccordionNode) {
-    if (node.children?.length === 0) {
-      node.actions = [{ icon: "icon-plus", actionName: "add", enabled: true }];
-    }
-    for (const child of node.children ?? []) {
-      addActions(child);
-    }
-  }
-  for (const node of tree) {
-    addActions(node);
-  }
-  // add interactive status to nodes
-  function addInteractiveStatus(node: TreeAccordionNode) {
-    node.enabled =
-      projectStore.currentView !== null
-        ? !projectStore.isKeyDisplayed(projectStore.currentView, node.name)
-        : false;
-    for (const child of node.children ?? []) {
-      addInteractiveStatus(child);
-    }
-  }
-  for (const node of tree) {
-    addInteractiveStatus(node);
-  }
-  return tree;
-});
-
-async function onItemAction(action: string, key: string) {
-  if (projectStore.currentView) {
-    switch (action) {
-      case "add": {
-        const success = await projectStore.displayKey(projectStore.currentView, key);
-
-        if (success) {
-          // Scroll to last element
-          const lastItemElement = document.querySelector(".editor-container .item:last-child");
-          if (lastItemElement) {
-            lastItemElement.scrollIntoView({ behavior: "smooth", block: "start" });
-          }
-        }
-        break;
-      }
-      case "clicked": {
-        // if clicke item is added to the view then scroll to it
-        const relatedCard = document.querySelector(`.item [data-name="${key}"]`);
-        if (relatedCard) {
-          relatedCard.scrollIntoView({ behavior: "smooth", block: "start" });
-          relatedCard.classList.add("blink");
-        }
-        break;
-      }
-    }
-  } else {
-    toastsStore.addToast("No view selected", "error");
-  }
-}
-</script>
-
-<template>
-  <div class="keys-list">
-    <SectionHeader title="Items" icon="icon-pie-chart" />
-    <Simplebar class="scrollable">
-      <TreeAccordion :nodes="itemsAsTree" @item-action="onItemAction" />
-    </Simplebar>
-  </div>
-</template>
-
-<style scoped>
-.keys-list {
-  display: flex;
-  max-height: 100%;
-  flex-direction: column;
-
-  & .scrollable {
-    height: 0;
-    flex: 1;
-    padding: var(--spacing-16);
-    background-color: var(--color-background-primary);
-  }
-}
-</style>
diff --git a/skore-ui/src/views/project/ProjectView.vue b/skore-ui/src/views/project/ProjectView.vue
deleted file mode 100644
index 2b3916ae5..000000000
--- a/skore-ui/src/views/project/ProjectView.vue
+++ /dev/null
@@ -1,246 +0,0 @@
-<script setup lang="ts">
-import { formatDistance } from "date-fns";
-import Simplebar from "simplebar-vue";
-import { onBeforeUnmount, onMounted, ref } from "vue";
-
-import DraggableList from "@/components/DraggableList.vue";
-import MediaWidgetSelector from "@/components/MediaWidgetSelector.vue";
-import ProjectViewCard from "@/components/ProjectViewCard.vue";
-import SimpleButton from "@/components/SimpleButton.vue";
-import { useProjectStore } from "@/stores/project";
-import { useToastsStore } from "@/stores/toasts";
-import ItemNote from "@/views/project/ItemNote.vue";
-import ProjectItemList from "@/views/project/ProjectItemList.vue";
-import ProjectViewNavigator from "@/views/project/ProjectViewNavigator.vue";
-
-const props = defineProps({
-  showCardActions: {
-    type: Boolean,
-    default: true,
-  },
-});
-
-const projectStore = useProjectStore();
-const isInFocusMode = ref(false);
-const currentDropPosition = ref<number>();
-const toastsStore = useToastsStore();
-
-function onFocusMode() {
-  isInFocusMode.value = !isInFocusMode.value;
-}
-
-function onCardRemoved(key: string) {
-  if (projectStore.currentView) {
-    projectStore.hideKey(projectStore.currentView, key);
-  }
-}
-
-function onItemDrop(event: DragEvent) {
-  if (projectStore.currentView) {
-    if (event.dataTransfer) {
-      const itemName = event.dataTransfer.getData("application/x-skore-item-name");
-      projectStore.displayKey(projectStore.currentView, itemName, currentDropPosition.value ?? 0);
-    }
-  } else {
-    toastsStore.addToast("No view selected", "error");
-  }
-}
-
-function getItemSubtitle(created_at: Date) {
-  const now = new Date();
-  return `Created ${formatDistance(created_at, now)} ago`;
-}
-
-onMounted(async () => {
-  await projectStore.startBackendPolling();
-});
-
-onBeforeUnmount(() => {
-  projectStore.stopBackendPolling();
-});
-</script>
-
-<template>
-  <main class="project-view" v-if="projectStore.items !== null">
-    <div class="left-panel" v-if="projectStore.items && !isInFocusMode">
-      <ProjectItemList />
-    </div>
-    <div ref="editor" class="editor">
-      <div class="editor-header">
-        <SimpleButton
-          icon="icon-left-double-chevron"
-          @click="onFocusMode"
-          class="focus-mode-button"
-          :class="{ flipped: isInFocusMode }"
-        />
-        <ProjectViewNavigator />
-      </div>
-      <Transition name="fade">
-        <div
-          v-if="
-            projectStore.currentView === null ||
-            projectStore.views[projectStore.currentView] === undefined ||
-            projectStore.views[projectStore.currentView]?.length === 0
-          "
-          class="placeholder"
-          @drop="onItemDrop($event)"
-          @dragover.prevent
-        >
-          <div class="wrapper" v-if="projectStore.currentView === null">No view selected.</div>
-          <div class="dropzone" v-else>
-            <div class="wrapper">The view is empty, start by dropping an item.</div>
-          </div>
-        </div>
-        <Simplebar class="editor-container" v-else>
-          <DraggableList
-            v-model:items="projectStore.currentViewItems"
-            auto-scroll-container-selector=".editor-container"
-            v-model:current-drop-position="currentDropPosition"
-            @drop="onItemDrop($event)"
-            @dragover.prevent
-          >
-            <template #item="{ name, mediaType, data, createdAt, updatedAt, updates, note }">
-              <ProjectViewCard
-                :key="name"
-                :title="name"
-                :subtitle="getItemSubtitle(createdAt)"
-                :showActions="props.showCardActions"
-                :updates="updates"
-                :current-update-index="projectStore.getCurrentItemUpdateIndex(name)"
-                :data-name="name"
-                @card-removed="onCardRemoved(name)"
-                @update-selected="projectStore.setCurrentItemUpdateIndex(name, $event)"
-              >
-                <ItemNote :name="name" :note="note" />
-                <MediaWidgetSelector :item="{ name, mediaType, data, createdAt, updatedAt }" />
-              </ProjectViewCard>
-            </template>
-          </DraggableList>
-        </Simplebar>
-      </Transition>
-    </div>
-  </main>
-  <main class="not-found" v-else>No Skore has been created, this worskpace is empty.</main>
-</template>
-
-<style scoped>
-main {
-  display: flex;
-  overflow: hidden;
-  min-width: 0;
-  flex-direction: row;
-
-  &.project-view {
-    height: 100dvh;
-    flex-direction: row;
-
-    & .left-panel {
-      display: flex;
-      width: 200px;
-      flex-direction: column;
-      flex-shrink: 0;
-      border-right: solid 1px var(--color-stroke-background-primary);
-
-      & .views-list {
-        z-index: 2;
-      }
-
-      & .keys-list {
-        z-index: 1;
-        height: 0;
-        flex: 1;
-      }
-    }
-
-    & .editor {
-      --editor-height: 44px;
-
-      display: flex;
-      min-width: 0;
-      max-height: 100vh;
-      flex: auto;
-      flex-direction: column;
-
-      & .editor-header {
-        display: flex;
-        height: var(--editor-height);
-        align-items: center;
-        padding: var(--spacing-12);
-        border-bottom: solid var(--stroke-width-md) var(--color-stroke-background-primary);
-        background-color: var(--color-background-secondary);
-
-        & .project-view-navigator {
-          flex-grow: 1;
-          color: var(--color-text-primary);
-          font-size: var(--font-size-sm);
-          font-weight: var(--font-weight-regular);
-          text-align: center;
-        }
-
-        & .focus-mode-button {
-          transform-origin: center;
-
-          &.flipped {
-            transform: scaleX(-1);
-          }
-        }
-      }
-
-      & .placeholder {
-        display: flex;
-        height: 100%;
-        flex-direction: column;
-        justify-content: center;
-        background-color: var(--color-background-primary);
-        color: var(--color-text-secondary);
-
-        & .wrapper {
-          padding-top: 225px;
-          margin: var(--spacing-24);
-          background-image: var(--image-editor-placeholder);
-          background-position: 50% 0;
-          background-repeat: no-repeat;
-          background-size: 265px 192px;
-          text-align: center;
-        }
-
-        & .dropzone {
-          display: flex;
-          height: 100%;
-          flex-direction: column;
-          align-items: center;
-          justify-content: center;
-          border-radius: var(--radius-lg);
-          margin: var(--spacing-24);
-          background-color: var(--color-background-secondary);
-          background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='17' ry='17' stroke='%23BABBBDFF' stroke-width='1' stroke-dasharray='11%2c11' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
-        }
-      }
-
-      & .editor-container {
-        height: 0;
-        flex: 1;
-        padding: var(--spacing-24);
-
-        & .draggable {
-          min-height: calc(100dvh - var(--editor-height) - var(--spacing-24) * 2);
-          gap: var(--spacing-24);
-        }
-
-        & .item-note {
-          margin-bottom: var(--spacing-16);
-        }
-      }
-    }
-  }
-
-  &.not-found {
-    display: flex;
-    height: 100vh;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    color: var(--color-text-secondary);
-  }
-}
-</style>
diff --git a/skore-ui/src/views/project/ProjectViewNavigator.vue b/skore-ui/src/views/project/ProjectViewNavigator.vue
deleted file mode 100644
index 1ec3cfa7d..000000000
--- a/skore-ui/src/views/project/ProjectViewNavigator.vue
+++ /dev/null
@@ -1,229 +0,0 @@
-<script setup lang="ts">
-import { autoUpdate, useFloating } from "@floating-ui/vue";
-import Simplebar from "simplebar-vue";
-import { onBeforeUnmount, onMounted, ref } from "vue";
-
-import EditableList, { type EditableListItemModel } from "@/components/EditableList.vue";
-import { generateRandomId } from "@/services/utils";
-import { useProjectStore } from "@/stores/project";
-import { useToastsStore } from "@/stores/toasts";
-
-const projectStore = useProjectStore();
-const toastsStore = useToastsStore();
-const isDropdownOpen = ref(false);
-const el = ref<HTMLElement>();
-const dropdown = ref<HTMLDivElement>();
-const floating = ref<HTMLDivElement>();
-const { floatingStyles } = useFloating(dropdown, floating, {
-  placement: "bottom",
-  strategy: "fixed",
-  whileElementsMounted: autoUpdate,
-});
-const views = ref<EditableListItemModel[]>([]);
-let unsavedViewsId: string = "";
-
-function onViewSelected(view: string) {
-  projectStore.setCurrentView(view);
-  isDropdownOpen.value = false;
-  populateViewList();
-}
-
-async function onViewRenamed(oldName: string, newName: string, item: EditableListItemModel) {
-  const viewAlreadyExists = views.value.filter((view) => view.name === newName).length > 1;
-  if (viewAlreadyExists) {
-    toastsStore.addToast(`A view named "${newName}" already exists`, "error");
-    item.isNamed = false;
-    return;
-  }
-  // user can rename an existing view
-  // and rename a new view that is not known by the backend
-  if (unsavedViewsId == item.id) {
-    await projectStore.createView(newName);
-    unsavedViewsId = "";
-    toastsStore.addToast("View added successfully", "success", { duration: 20 });
-  } else {
-    await projectStore.renameView(oldName, newName);
-  }
-  // auto switch the view to the renamed one
-  onViewSelected(newName);
-}
-
-async function onViewsListAction(action: string, item: EditableListItemModel) {
-  switch (action) {
-    case "rename": {
-      item.isNamed = false;
-      break;
-    }
-    case "duplicate": {
-      const index = views.value.indexOf(item) ?? 0;
-      const newName = `${item.name} - copy`;
-      const id = generateRandomId();
-      views.value.splice(index + 1, 0, {
-        name: newName,
-        isNamed: false,
-        id,
-      });
-      unsavedViewsId = id;
-      await projectStore.duplicateView(item.name, newName);
-      break;
-    }
-    case "delete": {
-      views.value.splice(views.value.indexOf(item), 1);
-      if (item.isNamed) {
-        await projectStore.deleteView(item.name);
-        toastsStore.addToast("View deleted successfully", "success", { duration: 20 });
-      }
-      break;
-    }
-  }
-}
-
-function onAddView() {
-  const hasUnsavedViews = views.value.some((view) => !view.isNamed);
-  if (!hasUnsavedViews) {
-    const search = /New view ?(\d+)?/;
-    const viewsNamedWithDefaultCount = views.value.reduce((acc, view) => {
-      const match = view.name.match(search);
-      if (match && match.length > 1) {
-        return parseInt(match[1] ?? 0) + 1;
-      }
-      return acc;
-    }, 0);
-    const id = generateRandomId();
-    const suffix = viewsNamedWithDefaultCount > 0 ? ` ${viewsNamedWithDefaultCount}` : "";
-    views.value.push({ name: `New view${suffix}`, isNamed: false, id });
-    unsavedViewsId = id;
-  }
-}
-
-function onClickOutside(e: Event) {
-  if (el.value) {
-    // is it a click outside and do we have a pending action ?
-    const isOutside = !el.value.contains(e.target as Node);
-    const isPendingRename = views.value.some((view) => !view.isNamed) || unsavedViewsId !== "";
-    if (isOutside && !isPendingRename) {
-      isDropdownOpen.value = false;
-    }
-  }
-}
-
-function populateViewList() {
-  views.value = Object.keys(projectStore.views).map((key) => ({
-    name: key,
-    isNamed: true,
-    id: generateRandomId(),
-    isSelected: key === projectStore.currentView,
-  }));
-}
-
-onMounted(async () => {
-  populateViewList();
-  document.addEventListener("click", onClickOutside);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener("click", onClickOutside);
-});
-</script>
-
-<template>
-  <div class="project-view-navigator" ref="el">
-    <div class="dropdown" @click="isDropdownOpen = !isDropdownOpen" ref="dropdown">
-      <i class="icon-recent-document" />
-      <span class="current-view-name">{{ projectStore.currentView ?? "Select a view" }}</span>
-      <i class="icon-chevron-up" :class="{ turned: isDropdownOpen }" />
-    </div>
-    <Transition name="fade">
-      <div class="dropdown-menu" v-if="isDropdownOpen" ref="floating" :style="floatingStyles">
-        <div class="new-view" @click="onAddView">
-          <span>Add a new view</span>
-          <i class="icon-plus-circle" />
-        </div>
-        <Simplebar class="view-list simplebar-inverted" v-if="views.length > 0">
-          <EditableList
-            v-model:items="views"
-            :actions="[
-              { label: 'rename', emitPayload: 'rename', icon: 'icon-edit' },
-              { label: 'duplicate', emitPayload: 'duplicate', icon: 'icon-copy' },
-              { label: 'delete', emitPayload: 'delete', icon: 'icon-trash' },
-            ]"
-            @action="onViewsListAction"
-            @select="onViewSelected"
-            @rename="onViewRenamed"
-          />
-        </Simplebar>
-      </div>
-    </Transition>
-  </div>
-</template>
-
-<style scoped>
-.project-view-navigator {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  align-content: center;
-  align-items: center;
-
-  & .dropdown {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    color: var(--color-text-secondary);
-    cursor: pointer;
-
-    & .current-view-name {
-      padding: 0 var(--spacing-4);
-      color: var(--color-text-tertiary);
-    }
-
-    & .icon-chevron-up {
-      transition: transform var(--animation-duration) var(--animation-easing);
-
-      &.turned {
-        transform: rotate(-180deg);
-      }
-    }
-  }
-
-  & .dropdown-menu {
-    z-index: 9999;
-    display: flex;
-    min-width: 300px;
-    flex: 1 0 auto;
-    flex-direction: column;
-    border: var(--stroke-width-md) solid var(--color-stroke-background-primary);
-    border-radius: var(--radius-xs);
-    filter: drop-shadow(0 4px 20.9px var(--color-shadow));
-
-    & .new-view,
-    & .view-list {
-      padding: var(--spacing-4) var(--spacing-6);
-    }
-
-    & .new-view {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: space-between;
-      border-bottom: var(--stroke-width-md) solid var(--color-stroke-background-primary);
-      background-color: var(--color-background-secondary);
-      border-top-left-radius: var(--radius-xs);
-      border-top-right-radius: var(--radius-xs);
-      color: var(--color-text-tertiary);
-      cursor: pointer;
-
-      &:is(:last-child) {
-        border-bottom: 0;
-        border-bottom-left-radius: var(--radius-xs);
-        border-bottom-right-radius: var(--radius-xs);
-      }
-    }
-
-    & .view-list {
-      max-height: 20dvh;
-      background-color: var(--color-background-primary);
-    }
-  }
-}
-</style>
diff --git a/skore-ui/tests/services/api.spec.ts b/skore-ui/tests/services/api.spec.ts
index 47c2cfa10..120603c5e 100644
--- a/skore-ui/tests/services/api.spec.ts
+++ b/skore-ui/tests/services/api.spec.ts
@@ -2,7 +2,7 @@ import { createTestingPinia } from "@pinia/testing";
 import { setActivePinia } from "pinia";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { deleteView, fetchProject, putView, setNote } from "@/services/api";
+import { fetchActivityFeed, getInfo, setNote } from "@/services/api";
 import { useToastsStore } from "@/stores/toasts";
 import { createFetchResponse, mockedFetch } from "../test.utils";
 
@@ -21,26 +21,22 @@ describe("API Service", () => {
       throw error;
     });
 
-    expect(await fetchProject()).toBeNull();
+    expect(await fetchActivityFeed()).toBeNull();
     const toastsStore = useToastsStore();
     expect(toastsStore.toasts.length).toBe(1);
   });
 
   it("Can call endpoints", async () => {
     mockedFetch.mockResolvedValue(createFetchResponse({}, 200));
-    const project = await fetchProject();
+    const project = await fetchActivityFeed();
     expect(project).toBeDefined();
 
-    mockedFetch.mockResolvedValue(createFetchResponse({}, 201));
-    const view = await putView("test", []);
-    expect(view).toBeDefined();
-
-    mockedFetch.mockResolvedValue(createFetchResponse({}, 202));
-    const del = await deleteView("test");
-    expect(del).toBeUndefined();
-
     mockedFetch.mockResolvedValue(createFetchResponse({}, 201));
     const note = await setNote("test", "test");
     expect(note).toBeDefined();
+
+    mockedFetch.mockResolvedValue(createFetchResponse({}, 200));
+    const info = await getInfo();
+    expect(info).toBeDefined();
   });
 });
diff --git a/skore-ui/tests/stores/project.spec.ts b/skore-ui/tests/stores/project.spec.ts
deleted file mode 100644
index 8a4635efb..000000000
--- a/skore-ui/tests/stores/project.spec.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import type { ProjectItemDto } from "@/dto";
-import { fetchProject } from "@/services/api";
-import { useProjectStore } from "@/stores/project";
-import { createTestingPinia } from "@pinia/testing";
-import { setActivePinia } from "pinia";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const epoch = new Date("1970-01-01T00:00:00Z").toISOString();
-function makeFakeViewItem(name: string, note: string = "") {
-  return {
-    name,
-    media_type: "text/markdown",
-    value: "",
-    updated_at: epoch,
-    created_at: epoch,
-    note,
-  } as ProjectItemDto;
-}
-
-vi.mock("@/services/api", () => {
-  const noop = vi.fn().mockImplementation(() => {});
-  return { fetchProject: noop, putView: noop, deleteView: noop };
-});
-
-describe("Project store", () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia({ stubActions: false, createSpy: vi.fn }));
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("Can poll the backend.", async () => {
-    const projectStore = useProjectStore();
-
-    await projectStore.startBackendPolling();
-    expect(fetchProject).toBeCalled();
-    projectStore.stopBackendPolling();
-  });
-
-  it("Can transform keys to a tree", async () => {
-    const projectStore = useProjectStore();
-
-    const project = {
-      items: {
-        a: [makeFakeViewItem("a")],
-        "a/b": [makeFakeViewItem("a/b")],
-        "a/b/d": [makeFakeViewItem("a/b/d")],
-        "a/b/e": [makeFakeViewItem("a/b/e")],
-        "a/b/f/g": [makeFakeViewItem("a/b/f/g")],
-      },
-      views: {},
-    };
-    await projectStore.setProject(project);
-    expect(projectStore.keysAsTree()).toEqual([
-      {
-        name: "a",
-        children: [
-          { name: "a (self)", children: [] },
-          {
-            name: "a/b",
-            children: [
-              { name: "a/b (self)", children: [] },
-              { name: "a/b/d", children: [] },
-              { name: "a/b/e", children: [] },
-              {
-                name: "a/b/f",
-                children: [{ name: "a/b/f/g", children: [] }],
-              },
-            ],
-          },
-        ],
-      },
-    ]);
-  });
-
-  it("Can get the history of an item", async () => {
-    const projectStore = useProjectStore();
-
-    const h1 = makeFakeViewItem("a");
-    const h2 = makeFakeViewItem("a");
-    const h3 = makeFakeViewItem("a");
-    const project = {
-      items: {
-        a: [h1, h2, h3],
-      },
-      views: { default: ["a"] },
-    };
-    await projectStore.setProject(project);
-
-    let d = projectStore.currentViewItems[0];
-    expect(d.createdAt.toISOString()).toEqual(h1.created_at);
-    expect(d.updatedAt.toISOString()).toEqual(h1.updated_at);
-    expect(d.data).toEqual(h1.value);
-    expect(d.name).toEqual("a");
-
-    projectStore.setCurrentItemUpdateIndex("a", 1);
-    d = projectStore.currentViewItems[0];
-    expect(d.createdAt.toISOString()).toEqual(h2.created_at);
-    expect(d.updatedAt.toISOString()).toEqual(h2.updated_at);
-    expect(d.data).toEqual(h2.value);
-    expect(d.name).toEqual("a");
-
-    projectStore.setCurrentItemUpdateIndex("a", 2);
-    d = projectStore.currentViewItems[0];
-    expect(d.createdAt.toISOString()).toEqual(h3.created_at);
-    expect(d.updatedAt.toISOString()).toEqual(h3.updated_at);
-    expect(d.data).toEqual(h3.value);
-    expect(d.name).toEqual("a");
-  });
-});
diff --git a/skore-ui/tests/views/ProjectView.spec.ts b/skore-ui/tests/views/ProjectView.spec.ts
deleted file mode 100644
index 82da0c5d2..000000000
--- a/skore-ui/tests/views/ProjectView.spec.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { VueWrapper } from "@vue/test-utils";
-import { createPinia, setActivePinia } from "pinia";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { createApp } from "vue";
-import { useRoute } from "vue-router";
-
-import { ROUTE_NAMES } from "@/router";
-import ProjectView from "@/views/project/ProjectView.vue";
-import { mountSuspense } from "../test.utils";
-
-vi.mock("@/services/api", () => {
-  const fetchProject = vi.fn().mockImplementation(() => {
-    return { items: {}, views: [] };
-  });
-  return { fetchProject };
-});
-
-describe("ProjectView", () => {
-  beforeEach(() => {
-    vi.mock("vue-router");
-
-    const app = createApp({});
-    const pinia = createPinia();
-    app.use(pinia);
-    setActivePinia(pinia);
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-  });
-
-  it("Renders properly", async () => {
-    vi.mocked(useRoute).mockImplementationOnce(() => ({
-      fullPath: `/${ROUTE_NAMES.VIEW_BUILDER}`,
-      path: `/${ROUTE_NAMES.VIEW_BUILDER}`,
-      query: {},
-      params: {},
-      matched: [],
-      name: ROUTE_NAMES.VIEW_BUILDER,
-      hash: "",
-      redirectedFrom: undefined,
-      meta: {},
-    }));
-
-    const builder = await mountSuspense(ProjectView);
-    // i.e. not a `VueError`
-    expect(builder).toBeInstanceOf(VueWrapper);
-  });
-});
diff --git a/skore-ui/tests/views/ProjectViewNavigator.spec.ts b/skore-ui/tests/views/ProjectViewNavigator.spec.ts
deleted file mode 100644
index 8ba4b9035..000000000
--- a/skore-ui/tests/views/ProjectViewNavigator.spec.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import { config, shallowMount } from "@vue/test-utils";
-import { createPinia, setActivePinia } from "pinia";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-import { createApp } from "vue";
-
-import { useProjectStore } from "@/stores/project";
-import ProjectViewNavigator from "@/views/project/ProjectViewNavigator.vue";
-
-vi.mock("@/services/api", () => {
-  const fetchProject = vi.fn(() => {
-    return { items: {}, views: {} };
-  });
-  const putView = vi.fn();
-  return { fetchProject, putView };
-});
-
-vi.hoisted(() => {
-  // required because plotly depends on URL.createObjectURL
-  const mockObjectURL = vi.fn();
-  window.URL.createObjectURL = mockObjectURL;
-  window.URL.revokeObjectURL = mockObjectURL;
-});
-
-describe("ProjectView", () => {
-  beforeEach(() => {
-    vi.mock("vue-router");
-
-    const app = createApp({});
-    const pinia = createPinia();
-    app.use(pinia);
-    setActivePinia(pinia);
-
-    // Simplebar will be stub but we want it's content to be rendered
-    config.global.renderStubDefaultSlot = true;
-  });
-
-  afterEach(() => {
-    vi.restoreAllMocks();
-
-    config.global.renderStubDefaultSlot = false;
-  });
-
-  it("Can name next view with an incremented name", async () => {
-    const projectStore = useProjectStore();
-    projectStore.createView("New view");
-
-    const wrapper = shallowMount(ProjectViewNavigator, {
-      global: {
-        stubs: {
-          EditableList: false,
-          EditableListItem: false,
-        },
-      },
-    });
-    const dropdown = wrapper.find(".dropdown");
-    expect(dropdown).toBeDefined();
-    await dropdown.trigger("click");
-
-    const addViewButton = wrapper.find(".new-view");
-    await addViewButton.trigger("click");
-
-    const items = wrapper.findAll(".editable-list-item");
-    expect(items.length).toEqual(2);
-
-    const newItem = wrapper.get(".editable-list-item:last-child");
-    expect(newItem.text()).toContain("New view 1");
-  });
-
-  it("Can increment new view even if list has holes?", async () => {
-    const projectStore = useProjectStore();
-    projectStore.createView("New view");
-    projectStore.createView("New view 2");
-    projectStore.createView("New view 5");
-    projectStore.createView("New view 6");
-
-    const wrapper = shallowMount(ProjectViewNavigator, {
-      global: {
-        stubs: {
-          EditableList: false,
-          EditableListItem: false,
-        },
-      },
-    });
-    const dropdown = wrapper.find(".dropdown");
-    expect(dropdown).toBeDefined();
-    await dropdown.trigger("click");
-
-    const addViewButton = wrapper.find(".new-view");
-    await addViewButton.trigger("click");
-
-    const newItem = wrapper.get(".editable-list-item:last-child");
-    expect(newItem.text()).toContain("New view 7");
-  });
-});
diff --git a/skore-ui/tests/views/activity.spec.ts b/skore-ui/tests/views/activity.spec.ts
new file mode 100644
index 000000000..4782331f7
--- /dev/null
+++ b/skore-ui/tests/views/activity.spec.ts
@@ -0,0 +1,59 @@
+import { setActivePinia } from "pinia";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import type { ProjectItemDto } from "@/dto";
+import { fetchActivityFeed } from "@/services/api";
+import { useActivityStore } from "@/views/activity/activity";
+import { createTestingPinia } from "@pinia/testing";
+
+const epoch = new Date("1970-01-01T00:00:00Z").toISOString();
+function makeFakeViewItem(name: string, note: string = "") {
+  return {
+    name,
+    media_type: "text/markdown",
+    value: "",
+    updated_at: epoch,
+    created_at: epoch,
+    note,
+    version: 0,
+  } as ProjectItemDto;
+}
+
+vi.mock("@/services/api", () => {
+  const noop = vi.fn().mockImplementation(() => {});
+  return {
+    fetchActivityFeed: vi.fn(() => {
+      return [makeFakeViewItem("a", ""), makeFakeViewItem("b", "")];
+    }),
+    setNote: noop,
+  };
+});
+
+describe("Project store", () => {
+  beforeEach(() => {
+    setActivePinia(createTestingPinia({ stubActions: false, createSpy: vi.fn }));
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("Can poll the backend.", async () => {
+    const activityStore = useActivityStore();
+
+    await activityStore.startBackendPolling();
+    expect(fetchActivityFeed).toBeCalled();
+    activityStore.stopBackendPolling();
+  });
+
+  it("Can add a note on an item", async () => {
+    const activityStore = useActivityStore();
+
+    await activityStore.startBackendPolling();
+    expect(fetchActivityFeed).toBeCalled();
+    activityStore.stopBackendPolling();
+
+    await activityStore.setNoteOnItem("a", 0, "test");
+    expect(activityStore.items[0].note).toBe("test");
+  });
+});
diff --git a/skore/src/skore/persistence/repository/__init__.py b/skore/src/skore/persistence/repository/__init__.py
index 845bb362c..b5f914374 100644
--- a/skore/src/skore/persistence/repository/__init__.py
+++ b/skore/src/skore/persistence/repository/__init__.py
@@ -1,9 +1,7 @@
 """Provide a set of classes responsible for manipulating items and views."""
 
 from .item_repository import ItemRepository
-from .view_repository import ViewRepository
 
 __all__ = [
     "ItemRepository",
-    "ViewRepository",
 ]
diff --git a/skore/src/skore/persistence/repository/view_repository.py b/skore/src/skore/persistence/repository/view_repository.py
deleted file mode 100644
index 02f42baa8..000000000
--- a/skore/src/skore/persistence/repository/view_repository.py
+++ /dev/null
@@ -1,87 +0,0 @@
-"""Implement a repository for Views."""
-
-from __future__ import annotations
-
-from collections.abc import Iterator
-from typing import TYPE_CHECKING
-
-if TYPE_CHECKING:
-    from skore.persistence.abstract_storage import AbstractStorage
-    from skore.view.view import View
-
-
-class ViewRepository:
-    """
-    A repository for managing storage and retrieval of Views.
-
-    This class provides methods to get, put, and delete Views from a storage system.
-    """
-
-    def __init__(self, storage: AbstractStorage):
-        """
-        Initialize the ViewRepository with a storage system.
-
-        Parameters
-        ----------
-        storage : AbstractStorage
-            The storage system to be used by the repository.
-        """
-        self.storage = storage
-
-    def get_view(self, key: str) -> View:
-        """
-        Retrieve the View from storage.
-
-        Parameters
-        ----------
-        key : str
-            A key at which to look for a View.
-
-        Returns
-        -------
-        View
-            The retrieved View.
-
-        Raises
-        ------
-        KeyError
-            When `key` is not present in the underlying storage.
-        """
-        return self.storage[key]
-
-    def put_view(self, key: str, view: View):
-        """
-        Store a view in storage.
-
-        Parameters
-        ----------
-        view : View
-            The view to be stored.
-        """
-        self.storage[key] = view
-
-    def delete_view(self, key: str):
-        """Delete the view from storage."""
-        del self.storage[key]
-
-    def keys(self) -> list[str]:
-        """
-        Get all keys of views stored in the repository.
-
-        Returns
-        -------
-        list[str]
-            A list of all keys.
-        """
-        return list(self.storage.keys())
-
-    def __iter__(self) -> Iterator[str]:
-        """
-        Yield the keys of views stored in the repository.
-
-        Returns
-        -------
-        Iterator[str]
-            An iterator yielding all keys.
-        """
-        yield from self.storage
diff --git a/skore/src/skore/project/project.py b/skore/src/skore/project/project.py
index 025041428..0134a96ca 100644
--- a/skore/src/skore/project/project.py
+++ b/skore/src/skore/project/project.py
@@ -8,9 +8,8 @@
 from typing import Any, Literal, Optional, Union
 
 from skore.persistence.item import item_to_object, object_to_item
-from skore.persistence.repository import ItemRepository, ViewRepository
+from skore.persistence.repository import ItemRepository
 from skore.persistence.storage import DiskCacheStorage
-from skore.persistence.view import View
 
 logger = getLogger(__name__)
 logger.addHandler(NullHandler())  # Default to no output
@@ -91,19 +90,12 @@ def __init__(
             )
 
         item_storage_dirpath = self.path / "items"
-        view_storage_dirpath = self.path / "views"
 
         # Create diskcache directories
         item_storage_dirpath.mkdir(parents=True, exist_ok=True)
-        view_storage_dirpath.mkdir(parents=True, exist_ok=True)
 
         # Initialize repositories with dedicated storages
         self._item_repository = ItemRepository(DiskCacheStorage(item_storage_dirpath))
-        self._view_repository = ViewRepository(DiskCacheStorage(view_storage_dirpath))
-
-        # Ensure default view is available
-        if "default" not in self._view_repository:
-            self._view_repository.put_view("default", View(layout=[]))
 
         # Check if the project should rejoin a server
         from skore.project._launch import ServerInfo  # avoid circular import
@@ -115,12 +107,6 @@ def clear(self):
         for item_key in self._item_repository:
             self._item_repository.delete_item(item_key)
 
-        for view_key in self._view_repository:
-            self._view_repository.delete_view(view_key)
-
-        # Ensure default view is available
-        self._view_repository.put_view("default", View(layout=[]))
-
     def put(
         self,
         key: str,
diff --git a/skore/src/skore/ui/project_routes.py b/skore/src/skore/ui/project_routes.py
index 0a75afd71..5178ca320 100644
--- a/skore/src/skore/ui/project_routes.py
+++ b/skore/src/skore/ui/project_routes.py
@@ -7,12 +7,11 @@
 from datetime import datetime, timezone
 from typing import Any
 
-from fastapi import APIRouter, HTTPException, Request, status
+from fastapi import APIRouter, Request, status
 from fastapi.responses import ORJSONResponse
 
 from skore.persistence.item import Item
-from skore.persistence.view.view import Layout, View
-from skore.project import Project
+from skore.project.project import Project
 
 router = APIRouter(prefix="/project")
 
@@ -27,17 +26,10 @@ class SerializableItem:
     updated_at: str
     created_at: str
     note: str
+    version: int
 
 
-@dataclass
-class SerializableProject:
-    """Serialized project, to be sent to the skore-ui."""
-
-    items: dict[str, list[SerializableItem]]
-    views: dict[str, Layout]
-
-
-def __item_as_serializable(name: str, item: Item) -> SerializableItem:
+def __item_as_serializable(name: str, item: Item, version: int) -> SerializableItem:
     d = item.as_serializable_dict()
     return SerializableItem(
         name=name,
@@ -46,65 +38,10 @@ def __item_as_serializable(name: str, item: Item) -> SerializableItem:
         updated_at=d.get("updated_at"),
         created_at=d.get("created_at"),
         note=d.get("note"),
+        version=version,
     )
 
 
-def __project_as_serializable(project: Project) -> SerializableProject:
-    items = {
-        key: [
-            __item_as_serializable(key, item)
-            for item in project._item_repository.get_item_versions(key)
-        ]
-        for key in project._item_repository
-    }
-
-    views = {
-        key: project._view_repository.get_view(key).layout
-        for key in project._view_repository
-    }
-
-    return SerializableProject(
-        items=items,
-        views=views,
-    )
-
-
-@router.get("/items", response_class=ORJSONResponse)
-async def get_items(request: Request):
-    """Serialize a project and send it."""
-    project: Project = request.app.state.project
-    return __project_as_serializable(project)
-
-
-@router.put("/views", status_code=status.HTTP_201_CREATED)
-async def put_view(request: Request, key: str, layout: Layout):
-    """Set the layout of the view corresponding to `key`.
-
-    If the view corresponding to `key` does not exist, it will be created.
-    """
-    project: Project = request.app.state.project
-
-    view = View(layout=layout)
-    project._view_repository.put_view(key, view)
-
-    return __project_as_serializable(project)
-
-
-@router.delete("/views", status_code=status.HTTP_202_ACCEPTED)
-async def delete_view(request: Request, key: str):
-    """Delete the view corresponding to `key`."""
-    project: Project = request.app.state.project
-
-    try:
-        project._view_repository.delete_view(key)
-    except KeyError:
-        raise HTTPException(
-            status_code=status.HTTP_404_NOT_FOUND, detail="View not found"
-        ) from None
-
-    return __project_as_serializable(project)
-
-
 @router.get("/activity", response_class=ORJSONResponse)
 async def get_activity(
     request: Request,
@@ -118,9 +55,11 @@ async def get_activity(
     project: Project = request.app.state.project
     return sorted(
         (
-            __item_as_serializable(key, version)
+            __item_as_serializable(key, version, index)
             for key in project._item_repository
-            for version in project._item_repository.get_item_versions(key)
+            for index, version in enumerate(
+                project._item_repository.get_item_versions(key)
+            )
             if datetime.fromisoformat(version.updated_at) > after
         ),
         key=operator.attrgetter("updated_at"),
@@ -142,4 +81,14 @@ async def set_note(request: Request, payload: NotePayload):
     """Add a note to the given item."""
     project: Project = request.app.state.project
     project.set_note(key=payload.key, note=payload.message, version=payload.version)
-    return __project_as_serializable(project)
+    return {"result": "ok"}
+
+
+@router.get("/info", response_class=ORJSONResponse)
+async def get_info(request: Request):
+    """Get the name and path of the current project."""
+    project: Project = request.app.state.project
+    return {
+        "name": project.name,
+        "path": project.path,
+    }
diff --git a/skore/tests/conftest.py b/skore/tests/conftest.py
index 993575a02..bfcce2619 100644
--- a/skore/tests/conftest.py
+++ b/skore/tests/conftest.py
@@ -1,7 +1,7 @@
 from datetime import datetime, timezone
 
 import pytest
-from skore.persistence.repository import ItemRepository, ViewRepository
+from skore.persistence.repository import ItemRepository
 from skore.persistence.storage import InMemoryStorage
 from skore.project import Project
 
@@ -41,8 +41,8 @@ def in_memory_project(monkeypatch):
 
     project = Project()
     project.path = None
+    project.name = "test"
     project._item_repository = ItemRepository(storage=InMemoryStorage())
-    project._view_repository = ViewRepository(storage=InMemoryStorage())
 
     return project
 
diff --git a/skore/tests/integration/ui/test_ui.py b/skore/tests/integration/ui/test_ui.py
index ad5b2baba..052e4480e 100644
--- a/skore/tests/integration/ui/test_ui.py
+++ b/skore/tests/integration/ui/test_ui.py
@@ -12,7 +12,6 @@
 from fastapi.testclient import TestClient
 from PIL import Image
 from sklearn.linear_model import Lasso
-from skore.persistence.view.view import View
 from skore.ui.app import create_app
 
 
@@ -30,111 +29,63 @@ def test_app_state(client):
     assert client.app.state.project is not None
 
 
-def test_get_items(client, in_memory_project):
-    response = client.get("/api/project/items")
-
-    assert response.status_code == 200
-    assert response.json() == {"views": {}, "items": {}}
-
-    in_memory_project.put("test", "version_1")
-    in_memory_project.put("test", "version_2")
-
-    items = in_memory_project._item_repository.get_item_versions("test")
-
-    response = client.get("/api/project/items")
-    assert response.status_code == 200
-    assert response.json() == {
-        "views": {},
-        "items": {
-            "test": [
-                {
-                    "name": "test",
-                    "media_type": "text/markdown",
-                    "value": item.media,
-                    "created_at": item.created_at,
-                    "updated_at": item.updated_at,
-                    "note": None,
-                }
-                for item in items
-            ],
-        },
-    }
-
-
-def test_put_view_layout(client):
-    response = client.put("/api/project/views?key=hello", json=["test"])
-    assert response.status_code == 201
-
-
-def test_delete_view(client, in_memory_project):
-    in_memory_project._view_repository.put_view("hello", View(layout=[]))
-    response = client.delete("/api/project/views?key=hello")
-    assert response.status_code == 202
-
-
-def test_delete_view_missing(client):
-    response = client.delete("/api/project/views?key=hello")
-    assert response.status_code == 404
-
-
 def test_serialize_pandas_dataframe_with_missing_values(client, in_memory_project):
     pandas_df = pandas.DataFrame([1, 2, 3, 4, None, float("nan")])
     in_memory_project.put("🐼", pandas_df)
-
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
     assert response.status_code == 200
-    project = response.json()
-    assert len(project["items"]["🐼"][0]["value"]["data"]) == 6
+    feed = response.json()
+    assert len(feed[0]["value"]["data"]) == 6
 
 
 def test_serialize_polars_dataframe_with_missing_values(client, in_memory_project):
     polars_df = polars.DataFrame([1, 2, 3, 4, None, float("nan")], strict=False)
     in_memory_project.put("🐻‍❄️", polars_df)
 
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
     assert response.status_code == 200
-    project = response.json()
-    assert len(project["items"]["🐻‍❄️"][0]["value"]["data"]) == 6
+    feed = response.json()
+    assert len(feed[0]["value"]["data"]) == 6
 
 
 def test_serialize_pandas_series_with_missing_values(client, in_memory_project):
     pandas_series = pandas.Series([1, 2, 3, 4, None, float("nan")])
     in_memory_project.put("🐼", pandas_series)
 
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
     assert response.status_code == 200
-    project = response.json()
-    assert len(project["items"]["🐼"][0]["value"]) == 6
+    feed = response.json()
+    assert len(feed[0]["value"]) == 6
 
 
 def test_serialize_polars_series_with_missing_values(client, in_memory_project):
     polars_df = polars.Series([1, 2, 3, 4, None, float("nan")], strict=False)
     in_memory_project.put("🐻‍❄️", polars_df)
 
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
     assert response.status_code == 200
-    project = response.json()
-    assert len(project["items"]["🐻‍❄️"][0]["value"]) == 6
+    feed = response.json()
+    assert len(feed[0]["value"]) == 6
 
 
 def test_serialize_numpy_array(client, in_memory_project):
     np_array = numpy.array([1, 2, 3, 4])
     in_memory_project.put("np array", np_array)
 
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
     assert response.status_code == 200
-    project = response.json()
-    assert len(project["items"]["np array"][0]["value"]) == 4
+    feed = response.json()
+    assert len(feed[0]["value"]) == 4
 
 
 def test_serialize_sklearn_estimator(client, in_memory_project):
     estimator = Lasso()
     in_memory_project.put("estimator", estimator)
 
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
     assert response.status_code == 200
-    project = response.json()
-    assert project["items"]["estimator"][0]["value"] is not None
+    feed = response.json()
+    assert feed[0]["value"] is not None
 
 
 class FakeFigure(matplotlib.figure.Figure):
@@ -157,24 +108,20 @@ def test_serialize_matplotlib_item(
         figure_b64_str = base64.b64encode(figure_bytes).decode()
 
     in_memory_project.put("figure", figure)
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
 
     assert response.status_code == 200
-    assert response.json() == {
-        "views": {},
-        "items": {
-            "figure": [
-                {
-                    "name": "figure",
-                    "media_type": "image/svg+xml;base64",
-                    "value": figure_b64_str,
-                    "updated_at": mock_nowstr,
-                    "created_at": mock_nowstr,
-                    "note": None,
-                }
-            ]
-        },
-    }
+    assert response.json() == [
+        {
+            "name": "figure",
+            "media_type": "image/svg+xml;base64",
+            "value": figure_b64_str,
+            "updated_at": mock_nowstr,
+            "created_at": mock_nowstr,
+            "note": None,
+            "version": 0,
+        }
+    ]
 
 
 def test_serialize_altair_item(
@@ -189,24 +136,20 @@ def test_serialize_altair_item(
     chart_b64_str = base64.b64encode(chart_bytes).decode()
 
     in_memory_project.put("chart", chart)
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
 
     assert response.status_code == 200
-    assert response.json() == {
-        "views": {},
-        "items": {
-            "chart": [
-                {
-                    "name": "chart",
-                    "media_type": "application/vnd.vega.v5+json;base64",
-                    "value": chart_b64_str,
-                    "updated_at": mock_nowstr,
-                    "created_at": mock_nowstr,
-                    "note": None,
-                }
-            ]
-        },
-    }
+    assert response.json() == [
+        {
+            "name": "chart",
+            "media_type": "application/vnd.vega.v5+json;base64",
+            "value": chart_b64_str,
+            "updated_at": mock_nowstr,
+            "created_at": mock_nowstr,
+            "note": None,
+            "version": 0,
+        }
+    ]
 
 
 def test_serialize_pillow_item(
@@ -225,24 +168,20 @@ def test_serialize_pillow_item(
         png_b64_str = base64.b64encode(png_bytes).decode()
 
     in_memory_project.put("image", image)
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
 
     assert response.status_code == 200
-    assert response.json() == {
-        "views": {},
-        "items": {
-            "image": [
-                {
-                    "name": "image",
-                    "media_type": "image/png;base64",
-                    "value": png_b64_str,
-                    "updated_at": mock_nowstr,
-                    "created_at": mock_nowstr,
-                    "note": None,
-                }
-            ]
-        },
-    }
+    assert response.json() == [
+        {
+            "name": "image",
+            "media_type": "image/png;base64",
+            "value": png_b64_str,
+            "updated_at": mock_nowstr,
+            "created_at": mock_nowstr,
+            "note": None,
+            "version": 0,
+        }
+    ]
 
 
 def test_serialize_plotly_item(
@@ -258,24 +197,20 @@ def test_serialize_plotly_item(
     figure_b64_str = base64.b64encode(figure_bytes).decode()
 
     in_memory_project.put("figure", figure)
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
 
     assert response.status_code == 200
-    assert response.json() == {
-        "views": {},
-        "items": {
-            "figure": [
-                {
-                    "name": "figure",
-                    "media_type": "application/vnd.plotly.v1+json;base64",
-                    "value": figure_b64_str,
-                    "updated_at": mock_nowstr,
-                    "created_at": mock_nowstr,
-                    "note": None,
-                }
-            ]
-        },
-    }
+    assert response.json() == [
+        {
+            "name": "figure",
+            "media_type": "application/vnd.plotly.v1+json;base64",
+            "value": figure_b64_str,
+            "updated_at": mock_nowstr,
+            "created_at": mock_nowstr,
+            "note": None,
+            "version": 0,
+        }
+    ]
 
 
 def test_serialize_primitive_item(
@@ -285,24 +220,20 @@ def test_serialize_primitive_item(
     mock_nowstr,
 ):
     in_memory_project.put("primitive", [1, 2, [3, 4]])
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
 
     assert response.status_code == 200
-    assert response.json() == {
-        "views": {},
-        "items": {
-            "primitive": [
-                {
-                    "name": "primitive",
-                    "media_type": "text/markdown",
-                    "value": [1, 2, [3, 4]],
-                    "updated_at": mock_nowstr,
-                    "created_at": mock_nowstr,
-                    "note": None,
-                }
-            ]
-        },
-    }
+    assert response.json() == [
+        {
+            "name": "primitive",
+            "media_type": "text/markdown",
+            "value": [1, 2, [3, 4]],
+            "updated_at": mock_nowstr,
+            "created_at": mock_nowstr,
+            "note": None,
+            "version": 0,
+        }
+    ]
 
 
 def test_serialize_primitive_item_with_nan(
@@ -312,24 +243,20 @@ def test_serialize_primitive_item_with_nan(
     mock_nowstr,
 ):
     in_memory_project.put("primitive", float("nan"))
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
 
     assert response.status_code == 200
-    assert response.json() == {
-        "views": {},
-        "items": {
-            "primitive": [
-                {
-                    "name": "primitive",
-                    "media_type": "text/markdown",
-                    "value": None,
-                    "updated_at": mock_nowstr,
-                    "created_at": mock_nowstr,
-                    "note": None,
-                }
-            ]
-        },
-    }
+    assert response.json() == [
+        {
+            "name": "primitive",
+            "media_type": "text/markdown",
+            "value": None,
+            "updated_at": mock_nowstr,
+            "created_at": mock_nowstr,
+            "note": None,
+            "version": 0,
+        }
+    ]
 
 
 def test_serialize_media_item(
@@ -339,24 +266,20 @@ def test_serialize_media_item(
     mock_nowstr,
 ):
     in_memory_project.put("media", "<media>", display_as="HTML")
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
 
     assert response.status_code == 200
-    assert response.json() == {
-        "views": {},
-        "items": {
-            "media": [
-                {
-                    "name": "media",
-                    "media_type": "text/html",
-                    "value": "<media>",
-                    "updated_at": mock_nowstr,
-                    "created_at": mock_nowstr,
-                    "note": None,
-                }
-            ]
-        },
-    }
+    assert response.json() == [
+        {
+            "name": "media",
+            "media_type": "text/html",
+            "value": "<media>",
+            "updated_at": mock_nowstr,
+            "created_at": mock_nowstr,
+            "note": None,
+            "version": 0,
+        }
+    ]
 
 
 def test_activity_feed(monkeypatch, client, in_memory_project):
@@ -409,24 +332,20 @@ def test_get_items_with_pickle_item(
     monkeypatch.setattr("skore.persistence.item.item.datetime", MockDatetime)
     in_memory_project.put("pickle", object)
 
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
 
     assert response.status_code == 200
-    assert response.json() == {
-        "views": {},
-        "items": {
-            "pickle": [
-                {
-                    "created_at": mock_nowstr,
-                    "updated_at": mock_nowstr,
-                    "name": "pickle",
-                    "media_type": "text/markdown",
-                    "value": "```python\n<class 'object'>\n```",
-                    "note": None,
-                },
-            ],
+    assert response.json() == [
+        {
+            "created_at": mock_nowstr,
+            "updated_at": mock_nowstr,
+            "name": "pickle",
+            "media_type": "text/markdown",
+            "value": "```python\n<class 'object'>\n```",
+            "note": None,
+            "version": 0,
         },
-    }
+    ]
 
 
 def test_get_items_with_pickle_item_and_unpickling_error(
@@ -447,26 +366,20 @@ def test_get_items_with_pickle_item_and_unpickling_error(
         lambda *args, **kwargs: "<traceback>",
     )
 
-    response = client.get("/api/project/items")
+    response = client.get("/api/project/activity")
 
     assert response.status_code == 200
-    assert response.json() == {
-        "views": {},
-        "items": {
-            "pickle": [
-                {
-                    "created_at": mock_nowstr,
-                    "updated_at": mock_nowstr,
-                    "name": "pickle",
-                    "media_type": "text/markdown",
-                    "value": "Item cannot be displayed",
-                    "note": (
-                        "\n\nUnpicklingError with complete traceback:\n\n<traceback>"
-                    ),
-                },
-            ],
+    assert response.json() == [
+        {
+            "created_at": mock_nowstr,
+            "updated_at": mock_nowstr,
+            "name": "pickle",
+            "media_type": "text/markdown",
+            "value": "Item cannot be displayed",
+            "note": ("\n\nUnpicklingError with complete traceback:\n\n<traceback>"),
+            "version": 0,
         },
-    }
+    ]
 
 
 def test_set_note(client, in_memory_project):
@@ -487,3 +400,11 @@ def test_set_note(client, in_memory_project):
     for i in range(3):
         note = in_memory_project.get_note("notted", version=i)
         assert note == f"note{i}"
+
+
+def test_get_info(client, in_memory_project):
+    response = client.get("/api/project/info")
+    assert response.json() == {
+        "name": in_memory_project.name,
+        "path": in_memory_project.path,
+    }
diff --git a/skore/tests/unit/project/test_project.py b/skore/tests/unit/project/test_project.py
index f521189de..145a642a2 100644
--- a/skore/tests/unit/project/test_project.py
+++ b/skore/tests/unit/project/test_project.py
@@ -27,7 +27,6 @@ def test_init(tmp_path):
 
     assert dirpath.exists()
     assert (dirpath / "items").exists()
-    assert (dirpath / "views").exists()
 
     # Ensure existing project raises an error with `if_exists="raise"`
     with pytest.raises(FileExistsError):
@@ -49,7 +48,6 @@ def test_clear(tmp_path):
 
     assert project.keys() == []
     assert project._item_repository.keys() == []
-    assert project._view_repository.keys() == ["default"]
 
 
 def test_put_string_item(in_memory_project):
diff --git a/skore/tests/unit/utils/test_environment.py b/skore/tests/unit/utils/test_environment.py
index e1cdd41f7..cb77b03b1 100644
--- a/skore/tests/unit/utils/test_environment.py
+++ b/skore/tests/unit/utils/test_environment.py
@@ -39,6 +39,9 @@ def test_get_environment_info_vscode():
         assert "vscode" in info["environment_name"]
 
 
+@patch.dict(
+    "os.environ", {}, clear=True
+)  # to avoid false vscode detection when running tests from vscode test runner
 @patch("skore.utils._environment.get_ipython", create=True)
 def test_get_environment_info_jupyter(mock_get_ipython):
     """Test environment detection for Jupyter"""
@@ -68,6 +71,9 @@ def test_is_environment_notebook_like_jupyter(mock_get_ipython):
     assert is_environment_notebook_like() is True
 
 
+@patch.dict(
+    "os.environ", {}, clear=True
+)  # to avoid false vscode detection when running tests from vscode test runner
 @patch("skore.utils._environment.get_ipython", create=True)
 def test_get_environment_info_ipython_terminal(mock_get_ipython):
     """Test environment detection for IPython terminal"""
diff --git a/skore/tests/unit/view/test_view_repository.py b/skore/tests/unit/view/test_view_repository.py
deleted file mode 100644
index 87c21cea1..000000000
--- a/skore/tests/unit/view/test_view_repository.py
+++ /dev/null
@@ -1,36 +0,0 @@
-import pytest
-from skore.persistence.repository import ViewRepository
-from skore.persistence.storage import InMemoryStorage
-from skore.persistence.view.view import View
-
-
-@pytest.fixture
-def view_repository():
-    return ViewRepository(InMemoryStorage())
-
-
-def test_get(view_repository):
-    view = View(layout=["key1", "key2"])
-
-    view_repository.put_view("view", view)
-
-    assert view_repository.get_view("view") == view
-
-
-def test_get_with_no_put(view_repository):
-    with pytest.raises(KeyError):
-        view_repository.get_view("view")
-
-
-def test_delete(view_repository):
-    view_repository.put_view("view", View(layout=[]))
-
-    view_repository.delete_view("view")
-
-    with pytest.raises(KeyError):
-        view_repository.get_view("view")
-
-
-def test_delete_with_no_put(view_repository):
-    with pytest.raises(KeyError):
-        view_repository.delete_view("view")