feat: bookmarks and authentication gates

.gitignore

···
 *.db-wal
 
 .env
+apps/twisted/.env.local
 __pycache__/

README.md

···
 just api-run-api
 ```
 
-To enable indexed search in the client, set `VITE_TWISTER_API_BASE_URL` in `apps/twisted/.env`.
+The committed `apps/twisted/.env` points at production. Use `apps/twisted/.env.local`
+for machine-local overrides such as a localhost API or OAuth callback.
 
 ## Run Locally
 
···
 2. `pnpm api:run:api`
 3. `pnpm api:run:indexer`
 
-If you want the app to call the local API, set this in `apps/twisted/.env`:
+If you want the app to call the local API, put this in `apps/twisted/.env.local`:
 
 ```bash
 VITE_TWISTER_API_BASE_URL=http://localhost:8080
 ```
+
+Dev builds keep the current OAuth flow available. Production builds are read-only
+and hide auth entry points for now.
 
 ### Local API DB
 

apps/twisted/.env.example

···
-VITE_TWISTER_API_BASE_URL=http://127.0.0.1:8080
+VITE_TWISTER_API_BASE_URL=https://twister.stormlightlabs.org
 
 # OAuth configuration
-# VITE_OAUTH_CLIENT_ID must be a publicly accessible URL (use a tunnel for local dev)
-# VITE_OAUTH_CLIENT_ID=https://your-tunnel.example.com/oauth/client-metadata.json
-VITE_OAUTH_REDIRECT_URI=http://127.0.0.1:5173/oauth-callback
+# Auth is currently exposed in dev builds only. Override these in .env.local
+# if you need local OAuth testing against localhost.
+VITE_OAUTH_CLIENT_ID=https://twister.stormlightlabs.org/oauth/client-metadata.json
+VITE_OAUTH_REDIRECT_URI=https://twister.stormlightlabs.org/oauth-callback

apps/twisted/README.md

···
 
 - Node.js 20+
 - pnpm
-- The Twister API running locally
+- The Twister API running locally if you want local API overrides
 
 ## Running locally
 
···
 # From the repo root, install dependencies
 pnpm install
 
-# Copy env file and point it at your local Twister API
-cp apps/twisted/.env.example apps/twisted/.env
+# Local overrides live in .env.local
+cp apps/twisted/.env.example apps/twisted/.env.local
 
 # Start the Vite dev server
 cd apps/twisted
···
 
 ## Environment variables
 
-| Variable                    | Default                 | Description                                                                                                     |
-| --------------------------- | ----------------------- | --------------------------------------------------------------------------------------------------------------- |
-| `VITE_TWISTER_API_BASE_URL` | `http://localhost:8080` | Base URL of the Twister API. All app requests (AT Protocol, Jetstream, Constellation) are proxied through this. |
+Committed `.env` defaults point at production:
+
+- `VITE_TWISTER_API_BASE_URL=https://twister.stormlightlabs.org`
+- `VITE_OAUTH_CLIENT_ID=https://twister.stormlightlabs.org/oauth/client-metadata.json`
+- `VITE_OAUTH_REDIRECT_URI=https://twister.stormlightlabs.org/oauth-callback`
+
+Use `.env.local` for local overrides:
+
+| Variable                    | Local example                                      | Description                                                                                                     |
+| --------------------------- | -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| `VITE_TWISTER_API_BASE_URL` | `http://localhost:8080`                            | Base URL of the Twister API. All app requests (AT Protocol, Jetstream, Constellation) are proxied through this. |
+| `VITE_OAUTH_CLIENT_ID`      | `http://127.0.0.1:8080/oauth/client-metadata.json` | Public OAuth metadata URL for local dev auth flows.                                                             |
+| `VITE_OAUTH_REDIRECT_URI`   | `http://127.0.0.1:5173/oauth-callback`             | Redirect URI used by the local Vite app during OAuth testing.                                                   |
+
+Production builds hide auth entry points for now. Dev builds keep OAuth enabled.
 
 > All upstream requests — knot XRPC, PDS records, handle resolution, DID documents,
 > Constellation backlink counts, and the Jetstream activity stream — are routed

apps/twisted/src/app/router/index.ts

···
 import { createRouter, createWebHistory } from "@ionic/vue-router";
 import type { RouteRecordRaw } from "vue-router";
-
 import TabsPage from "@/views/TabsPage.vue";
+import { getIsDevAuthEnabled } from "@/core/auth/dev-access.ts";
 
 const routes: RouteRecordRaw[] = [
   { path: "/", redirect: "/tabs/home" },
-  { path: "/login", component: () => import("@/features/auth/LoginPage.vue") },
-  { path: "/oauth-callback", component: () => import("@/features/auth/OAuthCallbackPage.vue") },
+  { path: "/login", component: () => import("@/features/auth/LoginPage.vue"), meta: { requiresDevAuth: true } },
+  {
+    path: "/oauth-callback",
+    component: () => import("@/features/auth/OAuthCallbackPage.vue"),
+    meta: { requiresDevAuth: true },
+  },
   {
     path: "/tabs/",
     component: TabsPage,
···
         component: () => import("@/features/repo/PullRequestDetailPage.vue"),
       },
       { path: "activity/user/:handle", component: () => import("@/features/profile/UserProfilePage.vue") },
-      { path: "profile", component: () => import("@/features/profile/ProfilePage.vue") },
+      {
+        path: "profile",
+        component: () => import("@/features/profile/ProfilePage.vue"),
+        meta: { requiresDevAuth: true },
+      },
+      { path: "bookmarks", component: () => import("@/features/bookmarks/BookmarksPage.vue") },
+      { path: "bookmarks/:bookmarkId", component: () => import("@/features/bookmarks/BookmarkDetailPage.vue") },
       { path: "profile/settings", redirect: "/tabs/settings" },
       { path: "settings", component: () => import("@/features/profile/SettingsPage.vue") },
     ],
···
 ];
 
 const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes });
+
+router.beforeEach((to) => {
+  if (to.meta.requiresDevAuth && !getIsDevAuthEnabled()) {
+    return "/tabs/bookmarks";
+  }
+  return true;
+});
 
 export default router;

apps/twisted/src/components/bookmarks/StoredContentView.vue

···
+<template>
+  <div v-if="imageUrl" class="image-wrap">
+    <img :src="imageUrl" :alt="bookmark.title" class="image-preview" />
+  </div>
+  <div v-else-if="showMarkdown" class="markdown-wrap">
+    <MarkdownRenderer :content="textContent" />
+  </div>
+  <div v-else-if="highlightedHtml" class="code-render" v-html="highlightedHtml" />
+  <pre v-else-if="textContent" class="code-wrap"><code>{{ textContent }}</code></pre>
+  <div v-else class="empty-copy">This saved item has no viewable content.</div>
+</template>
+
+<script setup lang="ts">
+  import { computed, onBeforeUnmount, ref, watch } from "vue";
+  import MarkdownRenderer from "@/components/repo/MarkdownRenderer.vue";
+  import type { SavedFile, SavedString } from "@/domain/models/bookmark.js";
+  import { highlightCode } from "@/lib/syntax.js";
+  import { createObjectUrlFromBlobContent } from "@/services/tangled/repo-assets.js";
+
+  const props = defineProps<{ bookmark: SavedFile | SavedString }>();
+
+  const highlightedHtml = ref("");
+  const imageUrl = ref<string | null>(null);
+
+  const textContent = computed(() => {
+    return props.bookmark.kind === "string" ? props.bookmark.contents : props.bookmark.content;
+  });
+
+  const displayName = computed(() => {
+    return props.bookmark.kind === "string" ? props.bookmark.filename : props.bookmark.path;
+  });
+
+  const showMarkdown = computed(() => {
+    if (props.bookmark.kind === "string") return false;
+    return props.bookmark.sourceKind === "readme" || /\.md$/i.test(props.bookmark.path);
+  });
+
+  watch(
+    () => [props.bookmark, showMarkdown.value] as const,
+    async ([bookmark, markdown]) => {
+      highlightedHtml.value = "";
+
+      if (imageUrl.value) {
+        URL.revokeObjectURL(imageUrl.value);
+        imageUrl.value = null;
+      }
+
+      if (bookmark.kind === "file" && bookmark.isBinary) {
+        imageUrl.value = createObjectUrlFromBlobContent({
+          path: bookmark.path,
+          content: bookmark.content,
+          encoding: bookmark.encoding,
+          isBinary: bookmark.isBinary,
+          mimeType: bookmark.mimeType,
+          size: bookmark.size,
+        });
+        return;
+      }
+
+      if (!markdown && textContent.value) {
+        highlightedHtml.value = (await highlightCode(textContent.value, displayName.value)) ?? "";
+      }
+    },
+    { immediate: true },
+  );
+
+  onBeforeUnmount(() => {
+    if (imageUrl.value) {
+      URL.revokeObjectURL(imageUrl.value);
+    }
+  });
+</script>
+
+<style scoped>
+  .image-wrap,
+  .markdown-wrap,
+  .code-wrap {
+    margin: 0;
+  }
+
+  .image-preview {
+    display: block;
+    width: 100%;
+    height: auto;
+    object-fit: contain;
+    background: var(--t-surface-raised);
+  }
+
+  .code-wrap {
+    padding: 16px;
+    overflow-x: auto;
+    font-family: var(--t-mono);
+    font-size: 12px;
+    line-height: 1.6;
+    color: var(--t-text-primary);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  .code-render :deep(.shiki) {
+    margin: 0;
+    padding: 16px;
+    background: transparent !important;
+    white-space: pre-wrap;
+  }
+
+  .empty-copy {
+    padding: 24px 16px;
+    color: var(--t-text-muted);
+    font-size: 14px;
+  }
+</style>

apps/twisted/src/core/auth/dev-access.ts

···
+import { readonly, ref } from "vue";
+import { isDevBuild } from "@/core/config/app.ts";
+
+const STORAGE_KEY = "twisted-dev-auth-enabled";
+
+const devAuthEnabled = ref(readStoredDevAuthEnabled());
+
+export function useDevAuthFeatures() {
+  return {
+    canToggleDevAuth: isDevBuild,
+    isDevAuthEnabled: readonly(devAuthEnabled),
+    setDevAuthEnabled,
+  };
+}
+
+export function getIsDevAuthEnabled(): boolean {
+  return devAuthEnabled.value;
+}
+
+export function setDevAuthEnabled(value: boolean): void {
+  if (!isDevBuild) return;
+
+  devAuthEnabled.value = value;
+
+  if (typeof window !== "undefined") {
+    window.localStorage.setItem(STORAGE_KEY, value ? "true" : "false");
+  }
+}
+
+function readStoredDevAuthEnabled(): boolean {
+  if (!isDevBuild) return false;
+  if (typeof window === "undefined") return true;
+
+  const stored = window.localStorage.getItem(STORAGE_KEY);
+  return stored !== "false";
+}

apps/twisted/src/core/auth/oauth-config.ts

···
   WellKnownHandleResolver,
   DohJsonHandleResolver,
 } from "@atcute/identity-resolver";
+import { oauthClientId, oauthRedirectUri } from "@/core/config/app.js";
 
 const isNative = typeof window !== "undefined" && !window.location.origin.startsWith("http");
 const baseUrl = isNative ? "io.ionic.starter://" : window.location.origin;
-const clientId =
-  (!isNative && import.meta.env.VITE_OAUTH_CLIENT_ID?.trim()) ||
-  `${baseUrl}/client-metadata.json`;
-const redirectUri =
-  (!isNative && import.meta.env.VITE_OAUTH_REDIRECT_URI?.trim()) ||
-  `${baseUrl}/oauth-callback`;
+const clientId = (!isNative && oauthClientId) || `${baseUrl}/client-metadata.json`;
+const redirectUri = (!isNative && oauthRedirectUri) || `${baseUrl}/oauth-callback`;
 
 const didResolver = new CompositeDidDocumentResolver({
   methods: { plc: new PlcDidDocumentResolver(), web: new WebDidDocumentResolver() },

apps/twisted/src/core/bookmarks/service.ts

···
+import { computed, readonly, shallowRef } from "vue";
+import { del, get, set } from "idb-keyval";
+import type { RepoSummary } from "@/domain/models/repo.js";
+import type { StringSummary } from "@/domain/models/string.js";
+import type { BlobContent } from "@/services/tangled/normalizers.js";
+import type { BookmarkItem, BookmarkKind, BookmarkedRepo, SavedFile, SavedString } from "@/domain/models/bookmark.js";
+
+const BOOKMARKS_KEY = "twisted-bookmarks";
+
+type BookmarkStorage = { load(): Promise<BookmarkItem[]>; save(items: BookmarkItem[]): Promise<void> };
+
+const state = shallowRef<BookmarkItem[]>([]);
+let loaded = false;
+let loadPromise: Promise<BookmarkItem[]> | null = null;
+const defaultStorage: BookmarkStorage = {
+  async load() {
+    return ((await get<BookmarkItem[]>(BOOKMARKS_KEY)) ?? []).map(normalizeBookmarkItem);
+  },
+  async save(items) {
+    if (items.length === 0) {
+      await del(BOOKMARKS_KEY);
+      return;
+    }
+    await set(BOOKMARKS_KEY, items);
+  },
+};
+let storage: BookmarkStorage = defaultStorage;
+
+function normalizeBookmarkItem(item: BookmarkItem): BookmarkItem {
+  return item;
+}
+
+function sortItems(items: BookmarkItem[]): BookmarkItem[] {
+  return [...items].sort((a, b) => b.savedAt.localeCompare(a.savedAt));
+}
+
+async function persist(items: BookmarkItem[]): Promise<BookmarkItem[]> {
+  const next = sortItems(items);
+  state.value = next;
+  loaded = true;
+  await storage.save(next);
+  return next;
+}
+
+export async function ensureBookmarksLoaded(): Promise<BookmarkItem[]> {
+  if (loaded) return state.value;
+  if (!loadPromise) {
+    loadPromise = storage.load().then((items) => {
+      state.value = sortItems(items);
+      loaded = true;
+      loadPromise = null;
+      return state.value;
+    });
+  }
+  return loadPromise;
+}
+
+export function useBookmarks() {
+  void ensureBookmarksLoaded();
+  return { bookmarks: readonly(state), hasBookmarks: computed(() => state.value.length > 0) };
+}
+
+export function buildRepoBookmarkId(atUri: string): string {
+  return `repo:${atUri}`;
+}
+
+export function buildStringBookmarkId(atUri: string): string {
+  return `string:${atUri}`;
+}
+
+export function buildFileBookmarkId(owner: string, repo: string, branch: string, path: string): string {
+  return `file:${owner}/${repo}/${branch}/${path}`;
+}
+
+export async function listBookmarks(kind?: BookmarkKind): Promise<BookmarkItem[]> {
+  const items = await ensureBookmarksLoaded();
+  return kind ? items.filter((item) => item.kind === kind) : items;
+}
+
+export async function getBookmark(id: string): Promise<BookmarkItem | undefined> {
+  return (await ensureBookmarksLoaded()).find((item) => item.id === id);
+}
+
+export async function isBookmarked(id: string): Promise<boolean> {
+  return (await ensureBookmarksLoaded()).some((item) => item.id === id);
+}
+
+export function hasBookmark(id: string): boolean {
+  return state.value.some((item) => item.id === id);
+}
+
+export async function removeBookmark(id: string): Promise<void> {
+  await persist((await ensureBookmarksLoaded()).filter((item) => item.id !== id));
+}
+
+export async function removeRepoBookmark(id: string): Promise<void> {
+  await removeBookmark(id);
+}
+
+export async function saveRepoBookmark(repo: RepoSummary): Promise<BookmarkedRepo> {
+  const now = new Date().toISOString();
+  const bookmark: BookmarkedRepo = {
+    id: buildRepoBookmarkId(repo.atUri),
+    kind: "repo",
+    title: `${repo.ownerHandle}/${repo.name}`,
+    ownerHandle: repo.ownerHandle,
+    repoName: repo.name,
+    atUri: repo.atUri,
+    savedAt: now,
+    lastFetchedAt: now,
+    repo,
+  };
+  await persist([bookmark, ...(await ensureBookmarksLoaded()).filter((item) => item.id !== bookmark.id)]);
+  return bookmark;
+}
+
+export async function saveStringBookmark(ownerHandle: string, stringItem: StringSummary): Promise<SavedString> {
+  const now = new Date().toISOString();
+  const bookmark: SavedString = {
+    id: buildStringBookmarkId(stringItem.atUri),
+    kind: "string",
+    title: stringItem.filename,
+    ownerHandle,
+    atUri: stringItem.atUri,
+    filename: stringItem.filename,
+    description: stringItem.description,
+    contents: stringItem.contents,
+    createdAt: stringItem.createdAt,
+    savedAt: now,
+    lastFetchedAt: now,
+  };
+  await persist([bookmark, ...(await ensureBookmarksLoaded()).filter((item) => item.id !== bookmark.id)]);
+  return bookmark;
+}
+
+export async function saveFileBookmark(file: SavedFileInput): Promise<SavedFile> {
+  const now = new Date().toISOString();
+  const bookmark: SavedFile = { ...file, savedAt: now, lastFetchedAt: now };
+  await persist([bookmark, ...(await ensureBookmarksLoaded()).filter((item) => item.id !== bookmark.id)]);
+  return bookmark;
+}
+
+type SavedFileInput = Omit<SavedFile, "savedAt" | "lastFetchedAt">;
+
+export function createSavedFileInput(
+  ownerHandle: string,
+  repoName: string,
+  branch: string,
+  path: string,
+  blob: BlobContent,
+  sourceKind: "file" | "readme",
+): SavedFileInput {
+  return {
+    id: buildFileBookmarkId(ownerHandle, repoName, branch, path),
+    kind: "file",
+    title: path.split("/").pop() ?? path,
+    ownerHandle,
+    repoName,
+    branch,
+    path,
+    sourceKind,
+    content: blob.content,
+    encoding: blob.encoding,
+    isBinary: blob.isBinary,
+    mimeType: blob.mimeType,
+    size: blob.size,
+  };
+}
+
+export function resetBookmarkStateForTests(nextStorage?: BookmarkStorage): void {
+  state.value = [];
+  loaded = false;
+  loadPromise = null;
+  storage = nextStorage ?? defaultStorage;
+}

apps/twisted/src/core/config/app.ts

···
+type AppEnv = {
+  DEV: boolean;
+  VITE_TWISTER_API_BASE_URL?: string;
+  VITE_OAUTH_CLIENT_ID?: string;
+  VITE_OAUTH_REDIRECT_URI?: string;
+};
+
+type AppConfig = {
+  isDevBuild: boolean;
+  isProductionReadOnly: boolean;
+  twisterApiBaseUrl: string;
+  hasTwisterApi: boolean;
+  oauthClientId?: string;
+  oauthRedirectUri?: string;
+};
+
+const DEFAULT_API_BASE_URL = "https://twister.stormlightlabs.org";
+
+export function normalizeConfiguredUrl(value?: string): string | undefined {
+  const trimmed = value?.trim();
+  if (!trimmed) return undefined;
+  return trimmed.replace(/\/+$/, "");
+}
+
+export function createAppConfig(env: AppEnv): AppConfig {
+  const twisterApiBaseUrl = normalizeConfiguredUrl(env.VITE_TWISTER_API_BASE_URL) ?? DEFAULT_API_BASE_URL;
+  const oauthClientId = normalizeConfiguredUrl(env.VITE_OAUTH_CLIENT_ID);
+  const oauthRedirectUri = normalizeConfiguredUrl(env.VITE_OAUTH_REDIRECT_URI);
+
+  return {
+    isDevBuild: env.DEV,
+    isProductionReadOnly: !env.DEV,
+    twisterApiBaseUrl,
+    hasTwisterApi: twisterApiBaseUrl.length > 0,
+    oauthClientId,
+    oauthRedirectUri,
+  };
+}
+
+export const appConfig = createAppConfig(import.meta.env);
+export const isDevBuild = appConfig.isDevBuild;
+export const isProductionReadOnly = appConfig.isProductionReadOnly;
+export const twisterApiBaseUrl = appConfig.twisterApiBaseUrl;
+export const hasTwisterApi = appConfig.hasTwisterApi;
+export const oauthClientId = appConfig.oauthClientId;
+export const oauthRedirectUri = appConfig.oauthRedirectUri;

apps/twisted/src/core/config/project.ts

···
-const rawTwisterApiBaseUrl = import.meta.env.VITE_TWISTER_API_BASE_URL?.trim() ?? "http://127.0.0.1:8080";
+import { hasTwisterApi, twisterApiBaseUrl } from "./app.ts";
 
-export const twisterApiBaseUrl = rawTwisterApiBaseUrl.replace(/\/+$/, "");
-export const hasTwisterApi = twisterApiBaseUrl.length > 0;
+export { hasTwisterApi, twisterApiBaseUrl };
 
 export function getTwisterApiUrl(path: string): string {
   if (!hasTwisterApi) {

apps/twisted/src/core/query/client.ts

···
 import { QueryClient } from "@tanstack/vue-query";
+import { isDevBuild } from "@/core/config/app.ts";
 
-const isDev = import.meta.env.DEV;
+const isDev = isDevBuild;
 
 export const queryClient = new QueryClient({
   defaultOptions: {

apps/twisted/src/domain/models/bookmark.ts

···
+import type { RepoSummary } from "./repo.ts";
+
+export type BookmarkKind = "repo" | "string" | "file";
+
+type BookmarkBase = { id: string; kind: BookmarkKind; title: string; savedAt: string; lastFetchedAt: string };
+
+export type BookmarkedRepo = BookmarkBase & {
+  kind: "repo";
+  ownerHandle: string;
+  repoName: string;
+  atUri: string;
+  repo: RepoSummary;
+};
+
+export type SavedString = BookmarkBase & {
+  kind: "string";
+  ownerHandle: string;
+  atUri: string;
+  filename: string;
+  description?: string;
+  contents: string;
+  createdAt: string;
+};
+
+export type SavedFile = BookmarkBase & {
+  kind: "file";
+  ownerHandle: string;
+  repoName: string;
+  branch: string;
+  path: string;
+  sourceAtUri?: string;
+  sourceKind: "file" | "readme";
+  content: string;
+  encoding: "utf-8" | "base64";
+  isBinary: boolean;
+  mimeType?: string;
+  size?: number;
+};
+
+export type BookmarkItem = BookmarkedRepo | SavedString | SavedFile;

apps/twisted/src/features/bookmarks/BookmarkDetailPage.vue

···
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/tabs/bookmarks" />
+        </ion-buttons>
+        <ion-title>{{ bookmark?.title || "Saved Item" }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <EmptyState
+        v-if="!bookmark"
+        :icon="bookmarkOutline"
+        title="Saved item not found"
+        message="This bookmark may have been removed from local storage." />
+
+      <template v-else>
+        <div class="detail-meta">
+          <div class="meta-title">{{ bookmark.title }}</div>
+          <div class="meta-copy">{{ metaLine }}</div>
+        </div>
+        <StoredContentView :bookmark="bookmark" />
+      </template>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+  import { computed, onMounted } from "vue";
+  import { useRoute } from "vue-router";
+  import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+  import { bookmarkOutline } from "ionicons/icons";
+  import StoredContentView from "@/components/bookmarks/StoredContentView.vue";
+  import EmptyState from "@/components/common/EmptyState.vue";
+  import type { SavedFile, SavedString } from "@/domain/models/bookmark.ts";
+  import { ensureBookmarksLoaded, useBookmarks } from "@/core/bookmarks/service.ts";
+
+  const route = useRoute();
+  const { bookmarks } = useBookmarks();
+
+  onMounted(() => {
+    void ensureBookmarksLoaded();
+  });
+
+  const bookmark = computed(() => {
+    const id = decodeURIComponent(String(route.params.bookmarkId ?? ""));
+    const item = bookmarks.value.find((entry) => entry.id === id);
+    return item?.kind === "repo" ? undefined : (item as SavedFile | SavedString | undefined);
+  });
+
+  const metaLine = computed(() => {
+    if (!bookmark.value) return "";
+    if (bookmark.value.kind === "string") return `${bookmark.value.ownerHandle} · ${bookmark.value.filename}`;
+    return `${bookmark.value.ownerHandle}/${bookmark.value.repoName} · ${bookmark.value.path}`;
+  });
+</script>
+
+<style scoped>
+  .detail-meta {
+    padding: 16px;
+    border-bottom: 1px solid var(--t-border);
+  }
+
+  .meta-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--t-text-primary);
+  }
+
+  .meta-copy {
+    margin-top: 6px;
+    font-size: 12px;
+    color: var(--t-text-muted);
+  }
+</style>

apps/twisted/src/features/bookmarks/BookmarksPage.vue

···
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>Bookmarks</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true">
+      <ion-header collapse="condense">
+        <ion-toolbar>
+          <ion-title size="large">Bookmarks</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-segment v-model="activeKind" class="kind-segment">
+        <ion-segment-button value="repo">Repos</ion-segment-button>
+        <ion-segment-button value="string">Strings</ion-segment-button>
+        <ion-segment-button value="file">Files</ion-segment-button>
+      </ion-segment>
+
+      <EmptyState
+        v-if="filteredItems.length === 0"
+        :icon="bookmarkOutline"
+        title="Nothing saved yet"
+        message="Save repos, strings, files, or READMEs to keep them here for offline viewing." />
+
+      <ion-list v-else lines="inset" class="bookmark-list">
+        <ion-item v-for="item in filteredItems" :key="item.id" button @click="openItem(item)">
+          <ion-label>
+            <div class="item-title">{{ item.title }}</div>
+            <div class="item-meta">{{ itemMeta(item) }}</div>
+            <p class="item-copy">{{ itemCopy(item) }}</p>
+          </ion-label>
+          <ion-button slot="end" fill="clear" color="danger" @click.stop="removeItem(item.id)"> Remove </ion-button>
+        </ion-item>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+  import { computed, ref } from "vue";
+  import { useRouter } from "vue-router";
+  import {
+    IonButton,
+    IonContent,
+    IonHeader,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonPage,
+    IonSegment,
+    IonSegmentButton,
+    IonTitle,
+    IonToolbar,
+  } from "@ionic/vue";
+  import { bookmarkOutline } from "ionicons/icons";
+  import EmptyState from "@/components/common/EmptyState.vue";
+  import type { BookmarkItem, BookmarkKind } from "@/domain/models/bookmark.ts";
+  import { removeBookmark, useBookmarks } from "@/core/bookmarks/service.ts";
+
+  const router = useRouter();
+  const activeKind = ref<BookmarkKind>("repo");
+  const { bookmarks } = useBookmarks();
+
+  const filteredItems = computed(() => bookmarks.value.filter((item) => item.kind === activeKind.value));
+
+  function itemMeta(item: BookmarkItem): string {
+    if (item.kind === "repo") return `${item.ownerHandle}/${item.repoName}`;
+    if (item.kind === "string") return `${item.ownerHandle} · ${relativeTime(item.savedAt)}`;
+    return `${item.ownerHandle}/${item.repoName} · ${item.path}`;
+  }
+
+  function itemCopy(item: BookmarkItem): string {
+    if (item.kind === "repo") return item.repo.description || "Saved repo metadata available offline.";
+    if (item.kind === "string") return item.description || preview(item.contents);
+    return `${item.sourceKind === "readme" ? "README" : "Saved file"} · ${relativeTime(item.savedAt)}`;
+  }
+
+  function openItem(item: BookmarkItem) {
+    if (item.kind === "repo") {
+      router.push(`/tabs/home/repo/${item.ownerHandle}/${item.repoName}`);
+      return;
+    }
+    router.push(`/tabs/bookmarks/${encodeURIComponent(item.id)}`);
+  }
+
+  async function removeItem(id: string) {
+    await removeBookmark(id);
+  }
+
+  function preview(text: string): string {
+    return text.length > 96 ? `${text.slice(0, 96)}...` : text;
+  }
+
+  function relativeTime(iso: string): string {
+    const minutes = Math.floor((Date.now() - new Date(iso).getTime()) / 60000);
+    if (minutes < 1) return "just now";
+    if (minutes < 60) return `${minutes}m ago`;
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h ago`;
+    return `${Math.floor(hours / 24)}d ago`;
+  }
+</script>
+
+<style scoped>
+  .kind-segment {
+    padding: 12px 12px 8px;
+  }
+
+  .bookmark-list {
+    background: transparent;
+  }
+
+  .item-title {
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--t-text-primary);
+  }
+
+  .item-meta {
+    margin-top: 4px;
+    font-size: 12px;
+    color: var(--t-text-muted);
+  }
+
+  .item-copy {
+    margin: 6px 0 0;
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--t-text-secondary);
+  }
+</style>

apps/twisted/src/features/profile/ProfilePage.vue

···
       <ion-toolbar>
         <ion-title class="profile-title mono">{{ profile?.handle || "Profile" }}</ion-title>
         <ion-buttons v-if="authStore.isAuthenticated" slot="end">
+          <ion-button @click="goToBookmarks">
+            <ion-icon slot="icon-only" :icon="bookmarkOutline" />
+          </ion-button>
           <ion-button @click="goToSettings">
             <ion-icon slot="icon-only" :icon="settingsOutline" />
           </ion-button>
···
           <ion-avatar class="avatar">
             <img v-if="profile?.avatar" :src="profile.avatar" :alt="`${profile.handle} avatar`" class="avatar-image" />
             <div v-else class="avatar-fallback" :style="{ background: avatarColor(profile?.handle || '') }">
-              {{ initials(profile?.handle || '') }}
+              {{ initials(profile?.handle || "") }}
             </div>
           </ion-avatar>
 
···
             message="You haven't created any repositories yet." />
         </template>
 
-        <UserStrings v-else-if="section === 'strings'" :strings="strings" :is-loading="stringsQuery.isPending.value" />
+        <UserStrings
+          v-else-if="section === 'strings'"
+          :strings="strings"
+          :owner-handle="profile?.handle || identifier"
+          :is-loading="stringsQuery.isPending.value" />
 
         <RepoIssues
           v-else-if="section === 'issues'"
···
     codeSlashOutline,
     logInOutline,
     logOutOutline,
+    bookmarkOutline,
     settingsOutline,
     personOutline,
     locationOutline,
···
   import RepoIssues from "@/features/repo/RepoIssues.vue";
   import RepoPRs from "@/features/repo/RepoPRs.vue";
   import UserStrings from "@/features/profile/UserStrings.vue";
-  import { useAuthStore } from "@/core/auth/store.js";
+  import { useAuthStore } from "@/core/auth/store.ts";
   import {
     useActorProfile,
     useUserRepos,
···
     useUserIssues,
     useUserPullRequests,
     useUserFollowing,
-  } from "@/services/tangled/queries.js";
-  import { useIndexedProfileSummary } from "@/services/project-api/queries.js";
-  import type { IssueSummary } from "@/domain/models/issue.js";
-  import type { PullRequestSummary } from "@/domain/models/pull-request.js";
-  import type { RepoSummary } from "@/domain/models/repo.js";
+  } from "@/services/tangled/queries.ts";
+  import { useIndexedProfileSummary } from "@/services/project-api/queries.ts";
+  import type { IssueSummary } from "@/domain/models/issue.ts";
+  import type { PullRequestSummary } from "@/domain/models/pull-request.ts";
+  import type { RepoSummary } from "@/domain/models/repo.ts";
 
   const router = useRouter();
   const authStore = useAuthStore();
···
 
   function goToSettings() {
     router.push("/tabs/settings");
+  }
+
+  function goToBookmarks() {
+    router.push("/tabs/bookmarks");
   }
 
   async function switchToAccount(did: `did:${string}:${string}`) {

apps/twisted/src/features/profile/SettingsPage.vue

···
         <p class="helper-copy">{{ themeHelperCopy }}</p>
       </section>
 
+      <section v-if="isDevAuthEnabled" class="settings-card">
+        <div class="section-head">
+          <div>
+            <p class="section-label">Bookmarks</p>
+            <h2 class="section-title">Saved content</h2>
+          </div>
+        </div>
+
+        <p class="helper-copy">
+          Dev builds keep Profile for auth flows, so saved repos, strings, files, and READMEs live on a separate page.
+        </p>
+
+        <ion-button expand="block" @click="goToBookmarks">Open bookmarks</ion-button>
+      </section>
+
+      <section v-if="canToggleDevAuth" class="settings-card">
+        <div class="section-head">
+          <div>
+            <p class="section-label">Local Dev</p>
+            <h2 class="section-title">Auth features</h2>
+          </div>
+        </div>
+
+        <ion-item lines="none" class="toggle-row">
+          <ion-label>
+            <div class="toggle-title">Enable auth UI</div>
+            <p class="toggle-copy">
+              Turn this off to force the app into bookmark-only mode locally without changing your build config.
+            </p>
+          </ion-label>
+          <ion-toggle slot="end" :checked="isDevAuthEnabled" @ionChange="handleDevAuthToggle" />
+        </ion-item>
+      </section>
+
       <section class="settings-card danger-card">
         <div class="section-head">
           <div>
···
 
 <script setup lang="ts">
   import { computed, ref } from "vue";
+  import { useRouter } from "vue-router";
   import {
     IonPage,
     IonHeader,
···
     IonSegmentButton,
     IonLabel,
     IonButton,
+    IonItem,
     IonIcon,
+    IonToggle,
     IonAlert,
     IonToast,
   } from "@ionic/vue";
   import { trashOutline } from "ionicons/icons";
-  import { clearAppCache } from "@/core/query/cache.js";
-  import { setThemePreference, useThemePreference } from "@/core/theme/preferences.js";
-  import type { ThemePreference } from "@/core/theme/preferences.js";
+  import { useAuthStore } from "@/core/auth/store.ts";
+  import { useDevAuthFeatures } from "@/core/auth/dev-access.ts";
+  import { clearAppCache } from "@/core/query/cache.ts";
+  import { setThemePreference, useThemePreference } from "@/core/theme/preferences.ts";
+  import type { ThemePreference } from "@/core/theme/preferences.ts";
 
+  const router = useRouter();
+  const authStore = useAuthStore();
+  const { canToggleDevAuth, isDevAuthEnabled, setDevAuthEnabled } = useDevAuthFeatures();
   const { themePreference, resolvedTheme, isSystemTheme } = useThemePreference();
 
   const showClearConfirm = ref(false);
···
   function isThemePreference(value: unknown): value is ThemePreference {
     return value === "system" || value === "light" || value === "dark";
   }
+
+  function goToBookmarks() {
+    router.push("/tabs/bookmarks");
+  }
+
+  async function handleDevAuthToggle(event: CustomEvent<{ checked: boolean }>) {
+    const enabled = !!event.detail.checked;
+    setDevAuthEnabled(enabled);
+
+    if (enabled) {
+      authStore.initialize();
+      await authStore.restoreSession();
+      toastMessage.value = "Auth features enabled for local dev.";
+    } else {
+      router.replace("/tabs/bookmarks");
+      toastMessage.value = "Auth features hidden. Bookmarks mode is active.";
+    }
+
+    isToastOpen.value = true;
+  }
 </script>
 
 <style scoped>
···
   .theme-segment {
     margin-top: 18px;
     --background: transparent;
+  }
+
+  .toggle-row {
+    --background: transparent;
+    --padding-start: 0;
+    --inner-padding-end: 0;
+    margin-top: 10px;
+  }
+
+  .toggle-title {
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--t-text-primary);
+  }
+
+  .toggle-copy {
+    margin: 6px 0 0;
+    font-size: 13px;
+    line-height: 1.5;
+    color: var(--t-text-secondary);
   }
 
   .helper-copy {

apps/twisted/src/features/profile/UserProfilePage.vue

···
             message="This user hasn't created any repositories yet." />
         </template>
 
-        <UserStrings v-else-if="section === 'strings'" :strings="strings" :is-loading="stringsQuery.isPending.value" />
+        <UserStrings
+          v-else-if="section === 'strings'"
+          :strings="strings"
+          :owner-handle="handle"
+          :is-loading="stringsQuery.isPending.value" />
 
         <RepoIssues
           v-else-if="section === 'issues'"
···
     useUserIssues,
     useUserPullRequests,
     useUserFollowing,
-  } from "@/services/tangled/queries.js";
-  import { useIndexedProfileSummary } from "@/services/project-api/queries.js";
-  import type { IssueSummary } from "@/domain/models/issue.js";
-  import type { PullRequestSummary } from "@/domain/models/pull-request.js";
-  import type { RepoSummary } from "@/domain/models/repo.js";
+  } from "@/services/tangled/queries.ts";
+  import { useIndexedProfileSummary } from "@/services/project-api/queries.ts";
+  import type { IssueSummary } from "@/domain/models/issue.ts";
+  import type { PullRequestSummary } from "@/domain/models/pull-request.ts";
+  import type { RepoSummary } from "@/domain/models/repo.ts";
 
   const route = useRoute();
   const router = useRouter();

apps/twisted/src/features/profile/UserStrings.vue

···
             <p v-if="stringItem.description" class="string-description">{{ stringItem.description }}</p>
             <pre class="string-preview">{{ preview(stringItem.contents) }}</pre>
           </ion-label>
+          <ion-button slot="end" fill="clear" size="small" @click.stop="toggleSave(stringItem)">
+            {{ isSaved(stringItem.atUri) ? "Saved" : "Save" }}
+          </ion-button>
         </ion-item>
       </ion-list>
 
···
 </template>
 
 <script setup lang="ts">
-  import { IonItem, IonLabel, IonList, IonSpinner } from "@ionic/vue";
+  import { IonButton, IonItem, IonLabel, IonList, IonSpinner, toastController } from "@ionic/vue";
   import { documentTextOutline } from "ionicons/icons";
   import EmptyState from "@/components/common/EmptyState.vue";
-  import type { StringSummary } from "@/domain/models/string.js";
+  import type { StringSummary } from "@/domain/models/string.ts";
+  import { buildStringBookmarkId, hasBookmark, removeBookmark, saveStringBookmark } from "@/core/bookmarks/service.ts";
 
-  defineProps<{ strings: StringSummary[]; isLoading?: boolean }>();
+  const props = defineProps<{ strings: StringSummary[]; ownerHandle: string; isLoading?: boolean }>();
 
   function preview(contents: string): string {
     return contents.length > 280 ? `${contents.slice(0, 280)}...` : contents;
···
     if (hours > 0) return `${hours}h ago`;
     if (minutes > 0) return `${minutes}m ago`;
     return "just now";
+  }
+
+  function isSaved(atUri: string): boolean {
+    return hasBookmark(buildStringBookmarkId(atUri));
+  }
+
+  async function toggleSave(stringItem: StringSummary) {
+    const id = buildStringBookmarkId(stringItem.atUri);
+    if (hasBookmark(id)) {
+      await removeBookmark(id);
+      await presentToast("String removed.");
+      return;
+    }
+    await saveStringBookmark(props.ownerHandle, stringItem);
+    await presentToast("String saved.");
+  }
+
+  async function presentToast(message: string) {
+    const toast = await toastController.create({ message, duration: 1800, color: "success" });
+    await toast.present();
   }
 </script>
 

apps/twisted/src/features/repo/RepoDetailPage.vue

···
         <ion-title class="repo-title">
           <span class="owner">{{ owner }}/</span>{{ repo?.name ?? repoName }}
         </ion-title>
+        <ion-buttons slot="end">
+          <ion-button :disabled="!repo" @click="toggleRepoSave">
+            <ion-icon slot="icon-only" :icon="repoSaved ? bookmark : bookmarkOutline" />
+          </ion-button>
+        </ion-buttons>
       </ion-toolbar>
       <ion-toolbar>
         <ion-segment v-model="segment" class="detail-segment">
···
           v-if="segment === 'overview'"
           :repo="repo"
           :commits="commits"
-          :markdown-context="markdownContext" />
+          :markdown-context="markdownContext"
+          :readme-path="readmePath"
+          :is-readme-saved="readmeSaved"
+          @toggle-readme-save="toggleReadmeSave" />
         <RepoFiles v-else-if="segment === 'files'" :owner="owner" :repo="repoName" :branch="defaultBranch" />
         <RepoIssues
           v-else-if="segment === 'issues'"
···
     IonToolbar,
     IonTitle,
     IonContent,
+    IonButton,
     IonButtons,
     IonBackButton,
+    IonIcon,
     IonSegment,
     IonSegmentButton,
+    toastController,
   } from "@ionic/vue";
-  import { alertCircleOutline } from "ionicons/icons";
+  import { alertCircleOutline, bookmark, bookmarkOutline } from "ionicons/icons";
   import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
   import EmptyState from "@/components/common/EmptyState.vue";
   import RepoOverview from "./RepoOverview.vue";
···
     useRepoLog,
     useRepoIssues,
     useRepoPRs,
-  } from "@/services/tangled/queries.js";
-  import { useRepoStarCount } from "@/services/constellation/queries.js";
-  import type { RepoDetail } from "@/domain/models/repo.js";
-  import type { RepoAssetContext } from "@/services/tangled/repo-assets.js";
+  } from "@/services/tangled/queries.ts";
+  import { useRepoStarCount } from "@/services/constellation/queries.ts";
+  import type { RepoDetail } from "@/domain/models/repo.ts";
+  import type { RepoAssetContext } from "@/services/tangled/repo-assets.ts";
+  import {
+    buildFileBookmarkId,
+    buildRepoBookmarkId,
+    createSavedFileInput,
+    hasBookmark,
+    removeBookmark,
+    removeRepoBookmark,
+    saveFileBookmark,
+    saveRepoBookmark,
+  } from "@/core/bookmarks/service.ts";
 
   const route = useRoute();
   const router = useRouter();
···
 
   const repoAtUri = computed(() => recordQuery.data.value?.atUri ?? "");
   const hasAtUri = computed(() => !!repoAtUri.value);
+  const readmePath = computed(() => readmeQuery.data.value?.path ?? "");
 
   const starCountQuery = useRepoStarCount(repoAtUri, { enabled: hasAtUri });
 
···
     const err = recordQuery.error.value;
     return err instanceof Error ? err.message : "An unexpected error occurred.";
   });
+  const repoBookmarkId = computed(() => (repo.value ? buildRepoBookmarkId(repo.value.atUri) : ""));
+  const repoSaved = computed(() => !!repoBookmarkId.value && hasBookmark(repoBookmarkId.value));
+  const readmeBookmarkId = computed(() => {
+    if (!owner.value || !repoName.value || !defaultBranch.value || !readmePath.value) return "";
+    return buildFileBookmarkId(owner.value, repoName.value, defaultBranch.value, readmePath.value);
+  });
+  const readmeSaved = computed(() => !!readmeBookmarkId.value && hasBookmark(readmeBookmarkId.value));
 
   function openIssue(issue: { rkey: string }) {
     router.push(`${tabPrefix.value}/repo/${owner.value}/${repoName.value}/issues/${issue.rkey}?tab=issues`);
···
 
   function openPullRequest(pr: { rkey: string }) {
     router.push(`${tabPrefix.value}/repo/${owner.value}/${repoName.value}/pulls/${pr.rkey}?tab=prs`);
+  }
+
+  async function toggleRepoSave() {
+    if (!repo.value || !repoBookmarkId.value) return;
+    if (repoSaved.value) {
+      await removeRepoBookmark(repoBookmarkId.value);
+      await presentToast("Removed from bookmarks.");
+      return;
+    }
+    await saveRepoBookmark(repo.value);
+    await presentToast("Repo saved.");
+  }
+
+  async function toggleReadmeSave() {
+    if (!repo.value || !defaultBranch.value || !readmePath.value || !repo.value.readme) return;
+    if (readmeSaved.value) {
+      await removeBookmark(readmeBookmarkId.value);
+      await presentToast("README removed.");
+      return;
+    }
+    await saveFileBookmark(
+      createSavedFileInput(
+        owner.value,
+        repoName.value,
+        defaultBranch.value,
+        readmePath.value,
+        { path: readmePath.value, content: repo.value.readme, encoding: "utf-8", isBinary: false },
+        "readme",
+      ),
+    );
+    await presentToast("README saved.");
+  }
+
+  async function presentToast(message: string) {
+    const toast = await toastController.create({ message, duration: 1800, color: "success" });
+    await toast.present();
   }
 </script>
 

apps/twisted/src/features/repo/RepoFiles.vue

···
         {{ selectedFile ? "Files" : "Up" }}
       </ion-button>
       <span class="file-path mono">{{ selectedFile ? selectedFile.path : currentPath }}</span>
+      <ion-button
+        v-if="selectedFile && blobQuery.data.value"
+        fill="clear"
+        size="small"
+        class="save-btn"
+        @click="toggleFileSave">
+        {{ fileSaved ? "Saved" : "Save" }}
+      </ion-button>
     </div>
 
     <template v-if="selectedFile">
···
 
 <script setup lang="ts">
   import { ref, computed, watch, onBeforeUnmount } from "vue";
-  import { IonList, IonButton, IonIcon } from "@ionic/vue";
+  import { IonList, IonButton, IonIcon, toastController } from "@ionic/vue";
   import { folderOpenOutline, alertCircleOutline, arrowBackOutline, documentOutline } from "ionicons/icons";
   import FileTreeItem from "@/components/repo/FileTreeItem.vue";
   import EmptyState from "@/components/common/EmptyState.vue";
   import SkeletonLoader from "@/components/common/SkeletonLoader.vue";
-  import { useRepoBlob, useRepoTree } from "@/services/tangled/queries.js";
-  import type { RepoFile } from "@/domain/models/repo.js";
-  import { highlightCode } from "@/lib/syntax.js";
-  import { createObjectUrlFromBlobContent } from "@/services/tangled/repo-assets.js";
+  import {
+    buildFileBookmarkId,
+    createSavedFileInput,
+    hasBookmark,
+    removeBookmark,
+    saveFileBookmark,
+  } from "@/core/bookmarks/service.ts";
+  import { useRepoBlob, useRepoTree } from "@/services/tangled/queries.ts";
+  import type { RepoFile } from "@/domain/models/repo.ts";
+  import { highlightCode } from "@/lib/syntax.ts";
+  import { createObjectUrlFromBlobContent } from "@/services/tangled/repo-assets.ts";
 
   const props = defineProps<{ owner: string; repo: string; branch: string }>();
 
···
 
   const filePath = computed(() => selectedFile.value?.path ?? "");
   const isFileSelected = computed(() => !!selectedFile.value && selectedFile.value.type === "file");
+  const fileBookmarkId = computed(() => {
+    if (!selectedFile.value || !props.branch) return "";
+    return buildFileBookmarkId(props.owner, props.repo, props.branch, selectedFile.value.path);
+  });
+  const fileSaved = computed(() => !!fileBookmarkId.value && hasBookmark(fileBookmarkId.value));
 
   const blobQuery = useRepoBlob(
     computed(() => props.owner),
···
     if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   }
+
+  async function toggleFileSave() {
+    if (!selectedFile.value || !blobQuery.data.value || !props.branch || !fileBookmarkId.value) return;
+    if (fileSaved.value) {
+      await removeBookmark(fileBookmarkId.value);
+      await presentToast("File removed.");
+      return;
+    }
+    await saveFileBookmark(
+      createSavedFileInput(
+        props.owner,
+        props.repo,
+        props.branch,
+        selectedFile.value.path,
+        blobQuery.data.value,
+        "file",
+      ),
+    );
+    await presentToast("File saved.");
+  }
+
+  async function presentToast(message: string) {
+    const toast = await toastController.create({ message, duration: 1800, color: "success" });
+    await toast.present();
+  }
 </script>
 
 <style scoped>
···
   .back-btn {
     --color: var(--t-accent);
     flex-shrink: 0;
+  }
+
+  .save-btn {
+    --color: var(--t-accent);
+    margin: 0 0 0 auto;
   }
 
   .file-path {

apps/twisted/src/features/repo/RepoOverview.vue

···
 
     <!-- README -->
     <div class="section">
-      <h3 class="section-label">README</h3>
+      <div class="section-head">
+        <h3 class="section-label">README</h3>
+        <ion-button
+          v-if="readmePath && repo.readme"
+          fill="clear"
+          size="small"
+          class="save-button"
+          @click="$emit('toggleReadmeSave')">
+          {{ isReadmeSaved ? "Saved" : "Save" }}
+        </ion-button>
+      </div>
       <MarkdownRenderer v-if="repo.readme" :content="repo.readme" :repo-context="markdownContext" />
       <EmptyState v-else :icon="documentOutline" title="No README" message="This repo doesn't have a README yet." />
     </div>
···
 
 <script setup lang="ts">
   import { computed } from "vue";
-  import { IonIcon, IonChip } from "@ionic/vue";
+  import { IonButton, IonIcon, IonChip } from "@ionic/vue";
   import { starOutline, gitBranchOutline, codeOutline, documentOutline } from "ionicons/icons";
   import MarkdownRenderer from "@/components/repo/MarkdownRenderer.vue";
   import EmptyState from "@/components/common/EmptyState.vue";
-  import type { RepoDetail } from "@/domain/models/repo.js";
-  import type { CommitEntry } from "@/services/tangled/queries.js";
-  import type { RepoAssetContext } from "@/services/tangled/repo-assets.js";
+  import type { RepoDetail } from "@/domain/models/repo.ts";
+  import type { CommitEntry } from "@/services/tangled/queries.ts";
+  import type { RepoAssetContext } from "@/services/tangled/repo-assets.ts";
 
-  const props = defineProps<{ repo: RepoDetail; commits?: CommitEntry[]; markdownContext?: RepoAssetContext }>();
+  defineEmits<{ toggleReadmeSave: [] }>();
+
+  const props = defineProps<{
+    repo: RepoDetail;
+    commits?: CommitEntry[];
+    markdownContext?: RepoAssetContext;
+    readmePath?: string;
+    isReadmeSaved?: boolean;
+  }>();
 
   function relativeTime(iso: string): string {
     const d = new Date(iso);
···
     margin-top: 20px;
   }
 
+  .section-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    margin: 0 16px 10px;
+  }
+
   .section-label {
     font-size: 11px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.07em;
     color: var(--t-text-muted);
-    margin: 0 16px 10px;
+    margin: 0;
+  }
+
+  .save-button {
+    --color: var(--t-accent);
+    margin: 0;
   }
 
   .lang-list {

apps/twisted/src/main.ts

···
 import { createApp } from "vue";
 import App from "./App.vue";
-import router from "@/app/router/index.js";
+import router from "@/app/router/index.ts";
 
 import { IonicVue } from "@ionic/vue";
 import { createPinia } from "pinia";
 import { VueQueryPlugin } from "@tanstack/vue-query";
-import { queryClient } from "./core/query/client.js";
+import { queryClient } from "./core/query/client.ts";
 import { persistQueryClient } from "@tanstack/query-persist-client-core";
-import { createIdbPersister } from "./core/query/persister.js";
-import { initializeThemePreference } from "./core/theme/preferences.js";
-import { useAuthStore } from "./core/auth/store.js";
+import { createIdbPersister } from "./core/query/persister.ts";
+import { initializeThemePreference } from "./core/theme/preferences.ts";
+import { useAuthStore } from "./core/auth/store.ts";
+import { ensureBookmarksLoaded } from "./core/bookmarks/service.ts";
+import { getIsDevAuthEnabled } from "./core/auth/dev-access.ts";
 
 import "@ionic/vue/css/core.css";
 import "@ionic/vue/css/normalize.css";
···
 import "./theme/variables.css";
 
 initializeThemePreference();
+void ensureBookmarksLoaded();
 
 if (import.meta.env.DEV) {
   void createIdbPersister().removeClient();
···
 const app = createApp(App).use(IonicVue).use(router).use(pinia).use(VueQueryPlugin, { queryClient });
 
 const authStore = useAuthStore(pinia);
-authStore.initialize();
+if (getIsDevAuthEnabled()) {
+  authStore.initialize();
+}
 
 router.isReady().then(async () => {
-  await authStore.restoreSession();
+  if (getIsDevAuthEnabled()) {
+    await authStore.restoreSession();
+  }
   app.mount("#app");
 });

apps/twisted/src/views/TabsPage.vue

···
           <ion-icon :icon="pulseOutline" />
           <ion-label>Activity</ion-label>
         </ion-tab-button>
-        <ion-tab-button tab="profile" href="/tabs/profile">
-          <ion-icon :icon="personOutline" />
-          <ion-label>Profile</ion-label>
+        <ion-tab-button :tab="profileTab.tab" :href="profileTab.href">
+          <ion-icon :icon="profileTab.icon" />
+          <ion-label>{{ profileTab.label }}</ion-label>
         </ion-tab-button>
         <ion-tab-button tab="settings" href="/tabs/settings">
           <ion-icon :icon="settingsOutline" />
···
 
 <script setup lang="ts">
   import { IonPage, IonTabs, IonRouterOutlet, IonTabBar, IonTabButton, IonIcon, IonLabel } from "@ionic/vue";
-  import { homeOutline, searchOutline, pulseOutline, personOutline, settingsOutline } from "ionicons/icons";
+  import {
+    homeOutline,
+    searchOutline,
+    pulseOutline,
+    personOutline,
+    settingsOutline,
+    bookmarkOutline,
+  } from "ionicons/icons";
+  import { computed } from "vue";
+  import { useDevAuthFeatures } from "@/core/auth/dev-access.ts";
+
+  const { isDevAuthEnabled } = useDevAuthFeatures();
+
+  const profileTab = computed(() => {
+    if (isDevAuthEnabled.value) {
+      return { tab: "profile", href: "/tabs/profile", label: "Profile", icon: personOutline };
+    }
+
+    return { tab: "bookmarks", href: "/tabs/bookmarks", label: "Bookmarks", icon: bookmarkOutline };
+  });
 </script>

apps/twisted/src/vite-env.d.ts

···
 
 interface ImportMetaEnv {
   readonly VITE_TWISTER_API_BASE_URL?: string;
+  readonly VITE_OAUTH_CLIENT_ID?: string;
+  readonly VITE_OAUTH_REDIRECT_URI?: string;
 }
 
 interface ImportMeta {

apps/twisted/tests/unit/app-config.spec.ts

···
+import { describe, expect, it } from "vitest";
+import { createAppConfig, normalizeConfiguredUrl } from "@/core/config/app.ts";
+
+describe("app config", () => {
+  it("enables auth in dev", () => {
+    const config = createAppConfig({ DEV: true, VITE_TWISTER_API_BASE_URL: "http://127.0.0.1:8080/" });
+
+    expect(config.isDevBuild).toBe(true);
+    expect(config.isProductionReadOnly).toBe(false);
+    expect(config.twisterApiBaseUrl).toBe("http://127.0.0.1:8080");
+  });
+
+  it("disables auth in production", () => {
+    const config = createAppConfig({ DEV: false, VITE_TWISTER_API_BASE_URL: "https://twister.stormlightlabs.org/" });
+
+    expect(config.isDevBuild).toBe(false);
+    expect(config.isProductionReadOnly).toBe(true);
+    expect(config.twisterApiBaseUrl).toBe("https://twister.stormlightlabs.org");
+  });
+
+  it("normalizes configured urls", () => {
+    expect(normalizeConfiguredUrl("https://example.com///")).toBe("https://example.com");
+    expect(normalizeConfiguredUrl("")).toBeUndefined();
+  });
+});

apps/twisted/tests/unit/bookmark-service.spec.ts

···
+import { describe, expect, it, beforeEach } from "vitest";
+import type { BookmarkItem } from "@/domain/models/bookmark.ts";
+import {
+  buildFileBookmarkId,
+  buildRepoBookmarkId,
+  buildStringBookmarkId,
+  createSavedFileInput,
+  getBookmark,
+  hasBookmark,
+  listBookmarks,
+  removeBookmark,
+  resetBookmarkStateForTests,
+  saveFileBookmark,
+  saveRepoBookmark,
+  saveStringBookmark,
+} from "@/core/bookmarks/service.ts";
+
+function memoryStorage(seed: BookmarkItem[] = []) {
+  let items = [...seed];
+  return {
+    async load() {
+      return [...items];
+    },
+    async save(next: BookmarkItem[]) {
+      items = [...next];
+    },
+  };
+}
+
+describe("bookmark service", () => {
+  beforeEach(() => {
+    resetBookmarkStateForTests(memoryStorage());
+  });
+
+  it("saves, lists, and removes mixed bookmark kinds", async () => {
+    await saveRepoBookmark({
+      atUri: "at://did:plc:test/sh.tangled.repo/demo",
+      rkey: "demo",
+      ownerDid: "did:plc:test",
+      ownerHandle: "alice.test",
+      name: "demo",
+      description: "demo repo",
+      knot: "knot.test",
+    });
+    await saveStringBookmark("alice.test", {
+      atUri: "at://did:plc:test/sh.tangled.string/snippet",
+      rkey: "snippet",
+      filename: "main.ts",
+      contents: "console.log('hi')",
+      createdAt: "2026-03-25T10:00:00Z",
+    });
+    await saveFileBookmark(
+      createSavedFileInput(
+        "alice.test",
+        "demo",
+        "main",
+        "README.md",
+        { path: "README.md", content: "# Demo", encoding: "utf-8", isBinary: false },
+        "readme",
+      ),
+    );
+
+    expect((await listBookmarks()).map((item) => item.kind).sort()).toEqual(["file", "repo", "string"]);
+    expect(await listBookmarks("repo")).toHaveLength(1);
+    expect(await listBookmarks("string")).toHaveLength(1);
+    expect(await listBookmarks("file")).toHaveLength(1);
+
+    const repoId = buildRepoBookmarkId("at://did:plc:test/sh.tangled.repo/demo");
+    await removeBookmark(repoId);
+
+    expect(await getBookmark(repoId)).toBeUndefined();
+    expect(await listBookmarks("repo")).toHaveLength(0);
+  });
+
+  it("overwrites existing bookmarks and keeps reactive lookup current", async () => {
+    const stringId = buildStringBookmarkId("at://did:plc:test/sh.tangled.string/snippet");
+
+    await saveStringBookmark("alice.test", {
+      atUri: "at://did:plc:test/sh.tangled.string/snippet",
+      rkey: "snippet",
+      filename: "main.ts",
+      contents: "one",
+      createdAt: "2026-03-25T10:00:00Z",
+    });
+    await saveStringBookmark("alice.test", {
+      atUri: "at://did:plc:test/sh.tangled.string/snippet",
+      rkey: "snippet",
+      filename: "main.ts",
+      contents: "two",
+      createdAt: "2026-03-25T10:00:00Z",
+    });
+
+    expect(hasBookmark(stringId)).toBe(true);
+    expect((await getBookmark(stringId))?.kind).toBe("string");
+    expect((await getBookmark(stringId))?.kind === "string" && (await getBookmark(stringId))?.contents).toBe("two");
+  });
+
+  it("builds stable file bookmark ids", () => {
+    expect(buildFileBookmarkId("alice.test", "demo", "main", "docs/README.md")).toBe(
+      "file:alice.test/demo/main/docs/README.md",
+    );
+  });
+});

apps/twisted/tests/unit/example.spec.ts

···
-import { mount } from '@vue/test-utils'
-import HomePage from '@/views/HomePage.vue'
-import { describe, expect, test } from 'vitest'
-
-describe('HomePage.vue', () => {
-  test('renders home vue', () => {
-    const wrapper = mount(HomePage)
-    expect(wrapper.text()).toMatch('Ready to create an app?')
-  })
-})

apps/twisted/tests/unit/tabs-page.spec.ts

···
+import { mount } from "@vue/test-utils";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+
+async function loadTabsPage(isDevAuthEnabled: boolean) {
+  vi.resetModules();
+  vi.doMock("@/core/auth/dev-access.ts", () => ({
+    useDevAuthFeatures: () => ({
+      canToggleDevAuth: true,
+      isDevAuthEnabled: ref(isDevAuthEnabled),
+      setDevAuthEnabled: vi.fn(),
+    }),
+  }));
+  const module = await import("@/views/TabsPage.vue");
+  return module.default;
+}
+
+const globalStubs = {
+  "ion-page": { template: "<div><slot /></div>" },
+  "ion-tabs": { template: "<div><slot /></div>" },
+  "ion-router-outlet": { template: "<div />" },
+  "ion-tab-bar": { template: "<div><slot /></div>" },
+  "ion-tab-button": { template: "<button><slot /></button>" },
+  "ion-icon": { template: "<i />" },
+  "ion-label": { template: "<span><slot /></span>" },
+};
+
+describe("TabsPage", () => {
+  afterEach(() => {
+    vi.resetModules();
+    vi.doUnmock("@/core/auth/dev-access.ts");
+  });
+
+  it("shows Bookmarks in production mode", async () => {
+    const TabsPage = await loadTabsPage(false);
+    const wrapper = mount(TabsPage, { global: { stubs: globalStubs } });
+
+    expect(wrapper.text()).toContain("Bookmarks");
+    expect(wrapper.text()).not.toContain("Profile");
+  });
+
+  it("shows Profile in dev mode", async () => {
+    const TabsPage = await loadTabsPage(true);
+    const wrapper = mount(TabsPage, { global: { stubs: globalStubs } });
+
+    expect(wrapper.text()).toContain("Profile");
+  });
+});

docs/reference/app.md

···
 ---
 title: Mobile App Reference
-updated: 2026-03-24
+updated: 2026-03-25
 ---
 
 Twisted is an Ionic Vue mobile app for browsing Tangled, a git hosting platform built on the AT Protocol. It targets iOS and Android via Capacitor (no web target).
···
 
 Three-layer design:
 
-**Presentation** — Vue components and pages using Ionic's component library. Five-tab navigation: Home, Explore, Activity, Profile (visible tabs) plus Repo (pushed route). Repo detail uses segmented tabs: Overview, Files, Issues, PRs.
+**Presentation** — Vue components and pages using Ionic's component library. Five-tab navigation: Home, Explore, Activity, Bookmarks/Profile, Settings. Repo detail uses segmented tabs: Overview, Files, Issues, PRs.
 
 **Domain** — TypeScript types modeling the app's data: UserSummary, RepoSummary, RepoDetail, RepoFile, PullRequestSummary, IssueSummary, ActivityItem. These are app-internal representations, decoupled from API response shapes.
 
···
 - **Twister API** — Search and index-backed summaries (when available).
 - **Constellation** — Social signal counts and backlinks (stars, followers, reactions).
 
-Knots serve XRPC endpoints for git operations. The appview at `tangled.org` returns HTML only (no JSON API), so the app goes directly to knots for git data and PDS for AT Protocol records.
+The app calls the Twister API for app data. Twister proxies knot and PDS reads,
+handle resolution, Constellation counts, and the Jetstream activity stream.
 
 ## Completed Features
 
 ### Navigation & Shell (Phase 1)
 
-Five-tab layout with Vue Router, skeleton loaders, placeholder pages. Design system components: RepoCard, UserCard, ActivityCard, FileTreeItem, EmptyState, ErrorBoundary, SkeletonLoader, MarkdownRenderer.
+Five-tab layout with Vue Router, skeleton loaders, placeholder pages, and a
+local Bookmarks area for repos, strings, and saved files.
 
 ### Public Browsing (Phase 2)
 
-All read-only browsing works without authentication:
+All release-mode browsing works without authentication:
 
 **Repository browsing** — Metadata display, README rendering (markdown), file tree navigation, file viewer with syntax context, commit log with pagination, branch listing.
 
···
 
 **Pull Requests** — List view with status filter (open/closed/merged), detail view with comments.
 
-**Caching** — TanStack Query configured with per-data-type stale times. Persistence via Dexie (IndexedDB) — works in Capacitor's WebView on device and in the browser during local dev.
+**Caching** — TanStack Query configured with per-data-type stale times.
+Persistence currently uses IndexedDB via `idb-keyval`, with a separate local
+bookmarks store for saved repos, strings, files, and READMEs.
+
+## Storage Migration
+
+IndexedDB is the current implementation for cache and bookmark persistence, but
+it should be treated as an interim step.
+
+- Local cache and offline-content storage should migrate toward SQLite so larger
+  saved payloads, better inspection, and more explicit schema management are
+  available on-device.
+- Sensitive auth/session material should migrate toward Ionic secure storage
+  instead of living in browser-style storage primitives.
+- Until that migration lands, IndexedDB should stay limited to non-sensitive
+  cached data and user-saved offline reading content.
+
+## Auth Split
+
+Production builds are read-only and hide auth entry points. Dev builds keep the
+current OAuth flow available for testing future authenticated features.
 
 ## Routing
 

docs/roadmap.md

···
 
 **Depends on:** App: Search & Discovery (for cache persistence of search/feed data)
 
-- [ ] Dexie setup with database schema (query cache + pinned content tables)
-- [ ] TanStack Query persister backed by Dexie
+- [x] IndexedDB-backed local cache and bookmark storage for first release
+- [ ] Migrate offline cache and saved-content storage from IndexedDB to SQLite
+- [ ] TanStack Query persister backed by SQLite or equivalent app-managed store
 - [ ] Pinned content store (save/unsave files for offline reading)
 - [ ] Pinned files UI (list, pin/unpin actions on file viewer, last-fetched timestamp)
 - [ ] Offline detection and banner
-- [ ] Secure token storage (Capacitor Secure Storage)
+- [ ] Migrate auth/session data to Ionic secure storage
 - [ ] Cache eviction (per-type limits and TTL, pinned content exempt)
 - [ ] List virtualization for large datasets
 - [ ] Lazy-load avatars, prefetch on hover