Merge pull request #894 from bitsocialhq/development

Development

Author: plebe1us

.gitignore

@@ -165,4 +165,5 @@ yarn-debug.log*
 yarn-error.log*
 
 .vscode
-.cursor
+.cursor
+.claude

AGENTS.md

@@ -107,6 +107,26 @@ Discover and install skills from the open agent skills ecosystem.
 npx skills add https://github.com/vercel-labs/skills --skill find-skills
 ```
 
+### playwright-cli (browser automation)
+
+Use **playwright-cli** for browser automation—navigation, form filling, screenshots, testing, and data extraction. The CLI + skill approach is token-efficient: it avoids loading large MCP tool schemas and verbose accessibility trees into context.
+
+**Do NOT use browser MCPs** (cursor-ide-browser, playwright-mcp, chrome MCP, etc.) for this project. MCP servers inject heavy tool definitions and page snapshots into the context window, degrading quality and response speed.
+
+**Install** (globally, once per machine). Agents working on this project without playwright-cli should run:
+
+```bash
+npm install -g @playwright/cli@latest
+```
+
+Then from the project root, install the skill so the agent can use it:
+
+```bash
+playwright-cli install --skills
+```
+
+The skill installs to `.cursor/skills/playwright-cli/` (or `.claude/skills/` for Claude Code). Agents invoke commands via Bash (e.g. `playwright-cli open`, `playwright-cli snapshot`, `playwright-cli click e1`).
+
 ## AI Agent Hooks (Recommended)
 
 If you're using an AI coding assistant (Cursor, Claude Code, Codex, etc.), set up hooks to automatically enforce code quality. Most modern AI agents support lifecycle hooks.
@@ -192,6 +212,10 @@ For Dependabot security alerts, GitHub Actions logs, issue/PR searches, or cross
 
 If not available, suggest the user install it.
 
+### Browser MCPs — Do NOT Use
+
+**Avoid browser-related MCP servers** for this project (cursor-ide-browser, playwright-mcp, chrome MCP, etc.). Use **playwright-cli** (skill) instead—see [playwright-cli (browser automation)](#playwright-cli-browser-automation) above. Browser MCPs bloat the context window with tool schemas and page snapshots; the CLI + skill workflow is more token-efficient for coding agents.
+
 ### Context Window Warning
 
 Each MCP server injects its tool definitions into the context window, consuming tokens even when the tools aren't being used. Too many servers will:

package.json

@@ -11,7 +11,7 @@
     "@capacitor/status-bar": "7.0.1",
     "@capawesome/capacitor-android-edge-to-edge-support": "7.2.2",
     "@floating-ui/react": "0.26.1",
-    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#df3cb6901f63054870dc127cd7565c98617c2a4f",
+    "@plebbit/plebbit-react-hooks": "https://github.com/plebbit/plebbit-react-hooks.git#e197af2381ad651e5b74a93bcb705de78f94742c",
     "@react-spring/web": "9.7.5",
     "@types/node": "20.8.2",
     "@types/react": "18.2.25",
@@ -138,6 +138,7 @@
     "wait-on": "9.0.3"
   },
   "resolutions": {
+    "axios": "1.13.5",
     "js-yaml": "4.1.1",
     "baseline-browser-mapping": "^2.9.11",
     "vite": "npm:rolldown-vite@7.3.1",

scripts/release-body.js

@@ -102,8 +102,7 @@ const htmlSection = section('Static HTML build', [htmlZip && `- 5chan-html (zip)
 const downloads = [macSection, winSection, linuxSection, androidSection, htmlSection].filter(Boolean).join('\n\n');
 
 // One-liner summary of what changed in this release. Update before each release.
-const oneLinerDescription =
-  'This version adds multiple-replying support, 4chan-like user anonymity with or without user IDs depending on the board, and several bug fixes.';
+const oneLinerDescription = 'This version adds backlinks for quoted posts, improves reply functionality with proper quote references, and includes several bug fixes.';
 
 const releaseBody = `${oneLinerDescription}
 

src/components/board-buttons/board-buttons.tsx

@@ -20,7 +20,7 @@ import CatalogSearch from '../catalog-search';
 import Tooltip from '../tooltip';
 import { ModQueueButton } from '../../views/mod-queue/mod-queue';
 import styles from './board-buttons.module.css';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 
 interface BoardButtonsProps {
   address?: string | undefined;
@@ -510,13 +510,13 @@ const PostPageStats = () => {
   const linkCount = useCountLinksInReplies(comment);
 
   const displayReplyCount = replyCount !== undefined ? replyCount.toString() : '?';
-  const replyCountTooltip = replyCount !== undefined ? _.capitalize(t('replies')) : t('loading');
+  const replyCountTooltip = replyCount !== undefined ? capitalize(t('replies')) : t('loading');
 
   return (
     <span>
-      {pinned && `${_.capitalize(t('sticky'))} / `}
-      {closed && `${_.capitalize(t('closed'))} / `}
-      <Tooltip children={displayReplyCount} content={replyCountTooltip} /> / <Tooltip children={linkCount?.toString()} content={_.capitalize(t('links'))} />
+      {pinned && `${capitalize(t('sticky'))} / `}
+      {closed && `${capitalize(t('closed'))} / `}
+      <Tooltip children={displayReplyCount} content={replyCountTooltip} /> / <Tooltip children={linkCount?.toString()} content={capitalize(t('links'))} />
     </span>
   );
 };

src/components/board-header/board-header.tsx

@@ -14,7 +14,7 @@ import useIsMobile from '../../hooks/use-is-mobile';
 import useIsSubplebbitOffline from '../../hooks/use-is-subplebbit-offline';
 import { shouldShowSnow } from '../../lib/snow';
 import Tooltip from '../tooltip';
-import _ from 'lodash';
+import { startCase } from 'lodash';
 import { BANNERS } from '../../generated/asset-manifest';
 
 const ImageBanner = () => {
@@ -78,7 +78,7 @@ const BoardHeader = () => {
     : isInSubscriptionsView
       ? '/subs/ - Subscriptions'
       : isInModView
-        ? _.startCase(t('boards_you_moderate'))
+        ? startCase(t('boards_you_moderate'))
         : defaultSubplebbit?.title || stableSubplebbit?.title;
   const subtitle = isInAllView ? '' : isInSubscriptionsView ? subscriptionsSubtitle : isInModView ? '/mod/' : `${address || subplebbitAddress || ''}`;
 

src/components/catalog-row/catalog-row.tsx

@@ -22,7 +22,7 @@ import useWindowWidth from '../../hooks/use-window-width';
 import { ContentPreview } from '../../views/home/popular-threads-box';
 import PostMenuDesktop from '../post-desktop/post-menu-desktop';
 import styles from './catalog-row.module.css';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 import { selectPostMenuProps } from '../../lib/utils/post-menu-props';
 
 interface CatalogPostMediaProps {
@@ -286,7 +286,7 @@ const CatalogPost = memo(
                 t('posted_by')
               )}{' '}
               <span className={`${styles.postAuthor} ${isCatalogPostAuthorMod && styles.capcode}`}>
-                {author?.displayName || _.capitalize(t('anonymous'))}
+                {author?.displayName || capitalize(t('anonymous'))}
                 {isCatalogPostAuthorMod && <span className='capitalize'>{` ## Board ${catalogPostAuthorRole}`}</span>}
               </span>
               {(isInAllView || isInSubscriptionsView) && subplebbitAddress && ` to p/${Plebbit.getShortAddress({ address: subplebbitAddress })}`}
@@ -295,7 +295,7 @@ const CatalogPost = memo(
                 <div className={styles.postLast}>
                   {t('last_reply_by')}{' '}
                   <span className={`${styles.postAuthor} ${isLastReplyAuthorMod && styles.capcode}`}>
-                    {lastReply?.author?.displayName || _.capitalize(t('anonymous'))}
+                    {lastReply?.author?.displayName || capitalize(t('anonymous'))}
                     {isLastReplyAuthorMod && ` ## Board ${lastReplyAuthorRole}`}
                   </span>
                   <span className={styles.postAgo}> {getFormattedTimeAgo(lastReply?.timestamp)}</span>

src/components/catalog-search/catalog-search.tsx

@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import styles from './catalog-search.module.css';
 import useIsMobile from '../../hooks/use-is-mobile';
 import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
-import _ from 'lodash';
+import { debounce } from 'lodash';
 
 const CatalogSearch = () => {
   const { t } = useTranslation();
@@ -44,7 +44,7 @@ const CatalogSearch = () => {
   // Create a debounced version of setSearchFilter and URL update
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debouncedSetSearchFilter = useCallback(
-    _.debounce((text: string) => {
+    debounce((text: string) => {
       if (text.trim()) {
         setSearchFilter(text);
         updateURL(text);

src/components/challenge-modal/challenge-modal.tsx

@@ -6,7 +6,7 @@ import useIsMobile from '../../hooks/use-is-mobile';
 import useChallengesStore from '../../stores/use-challenges-store';
 import useTheme from '../../hooks/use-theme';
 import styles from './challenge-modal.module.css';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 import { useSpring, animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 
@@ -269,7 +269,7 @@ const Challenge = ({ challenge, closeModal }: ChallengeProps) => {
         {isIframeChallenge && !showIframeConfirmation ? null : (
           <>
             <div className={styles.name}>
-              <input type='text' value={displayName || _.capitalize(t('anonymous'))} disabled />
+              <input type='text' value={displayName || capitalize(t('anonymous'))} disabled />
             </div>
             {title && (
               <div className={styles.subject}>

src/components/comment-content/comment-content.tsx

@@ -14,7 +14,7 @@ import ReplyQuotePreview from '../../components/reply-quote-preview';
 import Markdown from '../../components/markdown';
 import Tooltip from '../../components/tooltip';
 import styles from '../../views/post/post.module.css';
-import _ from 'lodash';
+import { capitalize } from 'lodash';
 
 const QuotedCidLink = ({ cid, postCid }: { cid: string; postCid: string }) => {
   const commentFromStore = useSubplebbitsPagesStore((state) => state.comments[cid]);
@@ -88,16 +88,16 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
             <span className={styles.redEditMessage}>({t('this_post_was_removed')})</span>
             <br />
             <br />
-            <span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}</span>
+            <span className={styles.grayEditMessage}>{`${capitalize(t('reason'))}: "${reason}"`}</span>
           </>
         ) : (
-          <span className={styles.grayEditMessage}>{_.capitalize(t('this_post_was_removed'))}.</span>
+          <span className={styles.grayEditMessage}>{capitalize(t('this_post_was_removed'))}.</span>
         )
       ) : deleted ? (
         reason ? (
           <>
             <span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>{' '}
-            <span className={styles.grayEditMessage}>{`${_.capitalize(t('reason'))}: "${reason}"`}</span>
+            <span className={styles.grayEditMessage}>{`${capitalize(t('reason'))}: "${reason}"`}</span>
           </>
         ) : (
           <span className={styles.grayEditMessage}>{t('user_deleted_this_post')}</span>
@@ -159,7 +159,7 @@ const CommentContent = ({ comment: post }: { comment: Comment }) => {
               address: subplebbitAddress && Plebbit.getShortAddress({ address: subplebbitAddress }),
               timestamp: getFormattedDate(post?.author?.subplebbit?.banExpiresAt),
               interpolation: { escapeValue: false },
-            })}${reason ? `. ${_.capitalize(t('reason'))}: "${reason}"` : ''}`}
+            })}${reason ? `. ${capitalize(t('reason'))}: "${reason}"` : ''}`}
           />
         </span>
       )}