@agent-native/core 0.76.5 → 0.76.6

package/corpus/core/docs/content/locales/hi-IN/client.md

@@ -0,0 +1,398 @@
+---
+title: "क्लाइंट"
+description: "एजेंट-नेटिव ऐप्स के लिए React हुक और उपयोगिताएँ: sentToAgentChat, वैकल्पिक एजेंट चैट संदर्भ स्थिति, useDbSync, useAgentChatGenerating, और cn।"
+---
+
+# ग्राहक
+
+`@agent-native/core` एजेंट-नेटिव ऐप्स के ब्राउज़र-साइड के लिए React हुक और उपयोगिताएँ प्रदान करता है।
+
+ये क्लाइंट/React APIs `@agent-native/core` और `@agent-native/core/client` दोनों से निर्यात किए जाते हैं। स्पष्टता और सही बंडलिंग के लिए उन्हें `@agent-native/core/client` (ब्राउज़र प्रविष्टि) से आयात करें, क्योंकि नंगे `@agent-native/core` रूट डिफ़ॉल्ट रूप से नोड बिल्ड का समाधान करता है।
+
+फ़ाइल-आधारित रूटिंग के लिए - पेज, डायनामिक पैरामीटर और नेविगेशन जोड़ना - [Routing](/docs/routing) देखें।
+
+## डेटा लाना और परिवर्तित करना {#fetching-mutating}
+
+ब्राउज़र से ऐप डेटा को पढ़ने और लिखने का प्राथमिक तरीका एक्शन हुक के माध्यम से है। `/_agent-native/*` मार्गों पर `fetch` कॉल को कभी भी हाथ से न लिखें - इसके बजाय नामित सहायकों का उपयोग करें ([Actions](/docs/actions) देखें)।
+
+```an-diagram title="The browser data loop" summary="Hooks read and write through actions; useDbSync watches the database so agent and background writes refetch the same caches automatically."
+{
+  "html": "<div class=\"diagram-client\"><div class=\"diagram-col\"><div class=\"diagram-node\">useActionQuery<br><small class=\"diagram-muted\">cached read</small></div><div class=\"diagram-node\">useActionMutation<br><small class=\"diagram-muted\">write + invalidate</small></div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-box\" data-rough>Actions<br><small class=\"diagram-muted\">/_agent-native/actions/*</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>SQL database</strong></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&#8635;</div><div class=\"diagram-pill ok\">useDbSync &rarr; refetch on change</div></div>",
+  "css": ".diagram-client{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.diagram-client .diagram-col{display:flex;flex-direction:column;gap:10px}.diagram-client .diagram-arrow{font-size:22px;line-height:1}"
+}
+```
+
+```tsx
+import {
+  useActionQuery,
+  useActionMutation,
+  callAction,
+} from "@agent-native/core/client";
+
+// Read: auto-cached, auto-invalidated on mutations
+const { data, isLoading } = useActionQuery("get-lead", { leadId });
+
+// Mutate: emits a change event so query caches refetch
+const { mutate, isPending } = useActionMutation("create-lead");
+mutate({ name: "Alice", company: "Acme" });
+
+// Imperative: for one-off calls outside a component
+await callAction("archive-lead", { leadId });
+```
+
+## sendToAgentChat(opts) {#sendtoagentchat}
+
+पोस्टमैसेज के माध्यम से एजेंट चैट को एक संदेश भेजें - UI इंटरैक्शन से AI कार्य सौंपने का सामान्य तरीका। छिपे हुए मॉडल संदर्भ के लिए `context` और तुरंत भेजने के लिए `submit: true` पास करें, या उपयोगकर्ता द्वारा पहले समीक्षा किए गए ड्राफ्ट को प्रीफिल करने के लिए `submit: false` पास करें।
+
+```ts
+import { sendToAgentChat } from "@agent-native/core/client";
+
+// Auto-submit a prompt with hidden context
+sendToAgentChat({
+  message: "Generate alt text for this image",
+  context: "Image path: /api/projects/hero.jpg",
+  submit: true,
+});
+
+// Prefill without submitting (user reviews first)
+sendToAgentChat({
+  message: "Rewrite this in a conversational tone",
+  context: selectedText,
+  submit: false,
+});
+```
+
+`embedApp()` के साथ बनाए गए MCP ऐप एम्बेड के अंदर, स्वचालित रूप से सबमिट किए गए संदेश
+(`submit` छोड़ा गया या `true`) MCP ऐप होस्ट ब्रिज पर अग्रेषित किया जाता है, जो
+शामिल होस्ट को छिपा हुआ संदर्भ जोड़ने और दृश्यमान उपयोगकर्ता को भेजने के लिए कहता है।
+`context` उपयोगकर्ता-सामना वाली चैट के रूप में पोस्ट किए बिना मॉडल-दृश्यमान रहता है।
+`submit: false` स्थानीय प्रीफ़िल/समीक्षा व्यवहार को बनाए रखता है क्योंकि MCP ऐप्स ऐसा नहीं करते हैं
+एक मानक ड्राफ्ट-प्रीफिल API को परिभाषित करें। आंतरिक रूप से यह सबमिट-चैट पथ
+कभी-कभी `agentNative.submitChat` के रूप में सामने आता है; ऐप कोड को कॉल करना चाहिए
+उस ईवेंट को सीधे पोस्ट करने के बजाय `sendToAgentChat()`।
+
+### साइलेंट बैकग्राउंड भेजता है {#background-send}
+
+`background: true` का उपयोग तब करें जब UI कार्रवाई के बिना वास्तविक एजेंट का काम शुरू हो जाए
+साइडबार को खोलना या फोकस करना। यह अभी भी एक सामान्य चैट थ्रेड/रन बनाता है,
+एजेंट के टूल/actions/संदर्भ का उपयोग करता है, और कार्य को इसके माध्यम से देखने योग्य रखता है
+रन ट्रे; यह कोई कच्चा वन-शॉट मॉडल कॉल नहीं है।
+
+```ts
+const tabId = sendToAgentChat({
+  message: "Analyze this import and create any missing records",
+  context: `Import batch id: ${batchId}`,
+  submit: true,
+  newTab: true,
+  background: true,
+  openSidebar: false,
+});
+```
+
+`background` को `newTab` के साथ जोड़ा जाना है ताकि छिपा हुआ काम न हो
+overwrite the user's active conversation. Use the returned `tabId` if the UI
+अनुवर्ती स्थिति को सहसंबंधित करने या बाद में चलने वाले डीप-लिंक की आवश्यकता है।
+
+### एजेंटचैटमैसेज {#agentchatmessage}
+
+| विकल्प                | प्रकार      | विवरण                                                                             |
+| --------------------- | ----------- | --------------------------------------------------------------------------------- |
+| `message`             | `string`    | चैट पर दृश्यमान संकेत भेजा गया                                                    |
+| `context`             | `string?`   | छिपा हुआ संदर्भ जोड़ा गया (चैट UI में नहीं दिखाया गया)                            |
+| `submit`              | `boolean?`  | सही = स्वतः-सबमिट, गलत = केवल पूर्व-भरण                                           |
+| `newTab`              | `boolean?`  | इस प्रॉम्प्ट के लिए एक अलग चैट थ्रेड बनाएं                                        |
+| `background`          | `boolean?`  | `newTab` के साथ, टैब पर ध्यान केंद्रित किए बिना चलाएं और `RunsTray` में रन दिखाएं |
+| `openSidebar`         | `boolean?`  | साइडबार खोले बिना सबमिट/प्रीफ़िल करने के लिए गलत सेट करें                         |
+| `projectSlug`         | `string?`   | संरचित संदर्भ के लिए वैकल्पिक प्रोजेक्ट स्लग                                      |
+| `preset`              | `string?`   | डाउनस्ट्रीम उपभोक्ताओं के लिए वैकल्पिक पूर्व निर्धारित नाम                        |
+| `referenceImagePaths` | `string[]?` | वैकल्पिक संदर्भ छवि पथ                                                            |
+
+## एजेंट चैट संदर्भ स्थिति (उन्नत) {#agent-chat-context-state}
+
+संदर्भ-स्थिति API, UI के लिए वैकल्पिक प्लंबिंग है जिसके साथ दो-तरफ़ा समन्वयन की आवश्यकता होती है
+मंचित संदर्भ चिप्स: कंपोजर के बाहर वर्तमान स्टेज्ड आइटम को प्रस्तुत करना,
+यह दर्शाता है कि क्या कोई आइटम पहले से ही संलग्न है, या स्पष्ट रूप से प्रदान कर रहा है
+नियंत्रण हटाएं/साफ़ करें।
+
+सरल "इसे एजेंट को भेजें" या
+"prefill this draft for review" flows. Use `sendToAgentChat()` with `context`
+और उनके लिए `submit`.
+
+| API                               | कब उपयोग करें                                                                   |
+| --------------------------------- | ------------------------------------------------------------------------------- |
+| `useAgentChatContext()`           | एक React घटक को लाइव चरणबद्ध संदर्भ सूची की आवश्यकता है                         |
+| `setAgentChatContextItem(item)`   | अनिवार्य कोड को एक कुंजी वाले संदर्भ आइटम को चरणबद्ध या प्रतिस्थापित करना चाहिए |
+| `listAgentChatContext()`          | गैर-React कोड को चरणबद्ध संदर्भ के एक बार के स्नैपशॉट की आवश्यकता है            |
+| `removeAgentChatContextItem(key)` | UI को अपने स्थिर `key` द्वारा एक चरणबद्ध संदर्भ आइटम को हटा देना चाहिए          |
+| `clearAgentChatContext()`         | UI को सभी चरणबद्ध संदर्भ साफ़ करना चाहिए, जैसे दृश्य या मोड रीसेट के बाद        |
+| `refreshAgentChatContext()`       | अनिवार्य कोड को नवीनतम जारी संदर्भ स्नैपशॉट को फिर से पढ़ना चाहिए               |
+
+`useAgentChatContext()`, `{ items, set, remove, clear, refresh }` लौटाता है।
+
+## openAgentSettings(अनुभाग?) {#openagentsettings}
+
+जब ऐप सेटिंग पेज या सेटअप कार्ड खुलना चाहिए तो `openAgentSettings()` का उपयोग करें
+एजेंट साइडबार का सेटिंग टैब। एक सेक्शन आईडी जैसे `"llm"`, `"secrets"`,
+किसी विशिष्ट अनुभाग को खोलने के लिए `"automations"`, `"voice"`, या `"limits"`।
+
+```ts
+import { openAgentSettings } from "@agent-native/core/client";
+
+openAgentSettings();
+openAgentSettings("secrets");
+```
+
+सीधे `agent-panel:open-settings` भेजने के बजाय इस सहायक को प्राथमिकता दें।
+
+```tsx
+import { useAgentChatContext } from "@agent-native/core/client";
+
+function SelectionContextButton({ record }: { record: { id: string } }) {
+  const chatContext = useAgentChatContext();
+  const contextKey = `selected-record:${record.id}`;
+  const isAttached = chatContext.items.some((item) => item.key === contextKey);
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        if (isAttached) {
+          chatContext.remove(contextKey);
+          return;
+        }
+
+        chatContext.set({
+          key: contextKey,
+          title: "Selected Record",
+          context: JSON.stringify(record, null, 2),
+          openSidebar: false,
+        });
+      }}
+    >
+      {isAttached ? "Remove from prompt context" : "Add to prompt context"}
+    </button>
+  );
+}
+```
+
+`listAgentChatContext()` अनिवार्य कोड के लिए है जिसे केवल निरीक्षण करने की आवश्यकता है
+वर्तमान चरणबद्ध आइटम एक बार। `clearAgentChatContext()` जानबूझकर व्यापक है; उपयोग करें
+`removeAgentChatContextItem(key)` जब केवल एक चयन बदला गया।
+
+### AgentChatContextSetOptions {#agentchatcontextsetoptions}
+
+| विकल्प        | प्रकार     | विवरण                                                              |
+| ------------- | ---------- | ------------------------------------------------------------------ |
+| `key`         | `string`   | मौजूदा नगेट को बदलने के लिए स्थिर पहचानकर्ता का उपयोग किया जाता है |
+| `title`       | `string`   | कंपोज़र चिप में दिखाया गया संक्षिप्त लेबल                          |
+| `context`     | `string`   | अगले सबमिट किए गए संकेत के साथ छिपा हुआ संदर्भ शामिल है            |
+| `openSidebar` | `boolean?` | डिफ़ॉल्ट सत्य पर; मंच के सन्दर्भ को चुपचाप पास करें                |
+
+## askUserQuestion(opts) {#ask-user-question}
+
+उपयोगकर्ता से ऐप कोड से बहुविकल्पीय प्रश्न पूछें, इसे इनलाइन में प्रस्तुत करें
+एजेंट पैनल, और **उनके उत्तर की प्रतीक्षा करें**। यह
+एजेंट का अंतर्निहित `ask-question` टूल: यह एक `GuidedQuestionPayload` लिखता है
+`"guided-questions"` एप्लिकेशन-स्टेट कुंजी (जहां माउंट किया गया है
+`GuidedQuestionFlow` इसे प्रस्तुत करता है) और एजेंट पैनल का खुलासा करता है इसलिए प्रश्न है
+दृश्यमान. एजेंट टूल के विपरीत - जिसका उत्तर एजेंट के पास वापस प्रवाहित होता है -
+`askUserQuestion()` **कॉल करने वाले के उत्तर के साथ समाधान करता है**, इसलिए UI कर सकता है
+उस पर शाखा.
+
+इसका उपयोग तब करें जब UI को इससे पहले ठीक एक छोटे निर्णय (2-4 विकल्प) की आवश्यकता हो
+कस्टम मोडल बनाने के बजाय एजेंट का काम शुरू करता है। के लिए पहुंचें
+फ्रीफॉर्म विवरण के लिए कंपोजर, और मल्टी-फील्ड इनपुट के लिए एक फॉर्म/पॉपओवर।
+
+```tsx
+import { askUserQuestion, sendToAgentChat } from "@agent-native/core/client";
+
+const length = await askUserQuestion({
+  question: "How long should this deck be?",
+  header: "Deck length", // optional short chip/heading (≈12 chars)
+  options: [
+    { label: "Short (3–5 slides)", value: "short" },
+    { label: "Medium (6–10 slides)", value: "medium", recommended: true },
+    { label: "Long (11+ slides)", value: "long" },
+  ],
+  allowFreeText: false, // omit the "Other" free-text option (default adds it)
+  allowMultiple: false, // single-select (default)
+});
+
+if (length) {
+  sendToAgentChat({ message: `Generate a ${length} deck.`, submit: true });
+}
+```
+
+प्रत्येक विकल्प `{ label, value?, description?, preview?, recommended? }` है; `value`
+`label` पर डिफ़ॉल्ट होता है, और `preview` के अंतर्गत एक छोटा मॉकअप/कोड स्निपेट प्रस्तुत करता है
+विकल्प। वादा चयनित `value` (या `value[]` जब
+`allowMultiple`), जब उपयोगकर्ता "अन्य", या `null` चुनता है तो फ्री-टेक्स्ट स्ट्रिंग
+यदि वे छोड़ देते हैं - यह तब तक लंबित रहता है जब तक उपयोगकर्ता उत्तर नहीं देता। एजेंट पैनल की आवश्यकता है
+माउंट किया जाना है (यह हर टेम्पलेट में है)।
+
+एजेंट अपने `ask-question` टूल के माध्यम से उसी UI तक पहुंचता है: इसे देना पसंद करें
+एजेंट पूछता है कि जब _it_ वास्तविक कांटे से टकराता है तो यह संदर्भ से हल नहीं हो पाता है; उपयोग करें
+`askUserQuestion()` जब _UI_ को किसी विकल्प पर कार्रवाई करने की आवश्यकता होती है।
+
+## MCP ऐप होस्ट ब्रिज {#mcp-app-host-bridge}
+
+MCP ऐप्स के रूप में एम्बेड किए गए रूट URL-पहले होने चाहिए: वर्तमान आर्टिफैक्ट को यहां से लोड करें
+पथ/क्वेरी पैरामीटर, वास्तविक React मार्ग या एक केंद्रित साझा घटक प्रस्तुत करें,
+और होस्ट ब्रिज का उपयोग केवल होस्ट-स्वामित्व वाले व्यवहार के लिए करें। `@agent-native/core/client`
+सहायक एम्बेडेड रूट कॉल निर्यात करता है:
+
+```ts
+import {
+  getMcpAppHostContext,
+  openMcpAppHostLink,
+  requestMcpAppDisplayMode,
+  updateMcpAppModelContext,
+  useMcpAppHostContext,
+} from "@agent-native/core/client";
+```
+
+`getMcpAppHostContext()` नवीनतम पुश किए गए होस्ट संदर्भ स्नैपशॉट को पढ़ता है;
+`useMcpAppHostContext()` परिवर्तनों के लिए React घटकों की सदस्यता लेता है। अनुरोध
+सहायक (`openMcpAppHostLink`, `requestMcpAppDisplayMode`,
+`updateMcpAppModelContext`) एम्बेडेड MCP ऐप फ्रेम के बाहर `false` लौटाएं, या
+एक फ्रेम के अंदर `Promise<boolean>`। `sendToAgentChat()`
+एम्बेडेड मार्गों से स्वतः सबमिट किए गए संकेत।
+
+पुल स्वयं - `ui/*` JSON-RPC संदेश, `agentNative.mcpHost.*`
+रैपर रिले, ट्रांसप्लांट बनाम नियंत्रित-फ़्रेम रेंडरिंग, होस्ट संदर्भ, और
+डिस्प्ले-मोड अनुरोध - स्वामित्व
+[External Agents](/docs/external-agents#mcp-app-bridge).
+
+## गतिशील सुझाव {#dynamic-suggestions}
+
+`<AgentSidebar>`, `<AgentPanel>`, और `<AssistantChat>` डिफ़ॉल्ट रूप से संदर्भ-जागरूक सुझावों के साथ स्थिर `suggestions` को मर्ज करते हैं। फ्रेमवर्क एप्लिकेशन स्थिति से `navigation`, `selection`, `pending-selection-context` और वर्तमान URL को पढ़ता है, जबकि एक खाली चैट दिखाई देती है, फिर वर्तमान स्क्रीन से मेल खाने वाले त्वरित चिप्स प्रदान करता है।
+
+```tsx
+<AgentSidebar
+  suggestions={["Summarize my inbox"]}
+  dynamicSuggestions={{ max: 4 }}
+>
+  <App />
+</AgentSidebar>
+```
+
+केवल स्थिर चिप्स रखने के लिए `dynamicSuggestions={false}` सेट करें। जब कोई ऐप समान एप्लिकेशन-स्टेट संदर्भ से नियतात्मक डोमेन-विशिष्ट चिप्स चाहता है तो `getSuggestions` पास करें।
+
+## useAgentChatGenerating() {#useagentchatgenerating}
+
+React हुक जो लोडिंग स्थिति ट्रैकिंग के साथ sentToAgentChat को लपेटता है:
+
+```ts
+import { useAgentChatGenerating } from "@agent-native/core/client";
+
+function GenerateButton() {
+  const [isGenerating, send] = useAgentChatGenerating();
+
+  return (
+    <button
+      disabled={isGenerating}
+      onClick={() => send({
+        message: "Generate a summary",
+        context: documentContent,
+        submit: true,
+      })}
+    >
+      {isGenerating ? "Generating..." : "Generate"}
+    </button>
+  );
+}
+```
+
+जब आप `send()` पर कॉल करते हैं तो `isGenerating` सत्य हो जाता है और जब एजेंट जनरेट करना समाप्त कर देता है तो स्वचालित रूप से गलत पर रीसेट हो जाता है।
+
+## useDbSync(विकल्प?) {#usedbsync}
+
+React हुक (पूर्व में `useFileWatcher`) जो SSE पर डेटाबेस परिवर्तनों को सुनता है, पोलिंग पर वापस आ जाता है, और फ्रेमवर्क क्वेरी कैश को अमान्य कर देता है जो UI को एजेंट राइट्स के साथ संरेखित रखता है:
+
+```ts
+import { useDbSync } from "@agent-native/core/client";
+import { useQueryClient } from "@tanstack/react-query";
+
+function App() {
+  const queryClient = useQueryClient();
+
+  useDbSync({
+    queryClient,
+    pollUrl: "/_agent-native/poll",
+    onEvent: (data) => console.log("Data changed:", data),
+  });
+
+  return <div>...</div>;
+}
+```
+
+### विकल्प {#usedbsync-options}
+
+| विकल्प             | प्रकार             | विवरण                                                                                      |
+| ------------------ | ------------------ | ------------------------------------------------------------------------------------------ |
+| `queryClient`      | `QueryClient?`     | कैश अमान्यकरण के लिए React-क्वेरी क्लाइंट                                                  |
+| `queryKeys`        | `string[]?`        | बहिष्कृत और उपेक्षित; पुरानी कॉल साइटों के लिए रखा गया                                     |
+| `pollUrl`          | `string?`          | पोल समापन बिंदु URL। डिफ़ॉल्ट: `"/_agent-native/poll"`                                     |
+| `sseUrl`           | `string \| false?` | SSE endpoint URL. Default: `"/_agent-native/events"`; pass `false` to use polling only     |
+| `interval`         | `number?`          | मतदान अंतराल एमएस में। डिफ़ॉल्ट: `2000`                                                    |
+| `fallbackInterval` | `number?`          | SSE अनुपलब्ध होने पर फ़ॉलबैक मतदान अंतराल। डिफ़ॉल्ट: `15000`                               |
+| `pauseWhenHidden`  | `boolean?`         | ब्राउज़र टैब छिपा होने पर मतदान रोकें। डिफ़ॉल्ट: `true`                                    |
+| `ignoreSource`     | `string?`          | प्रति-टैब अनुरोध स्रोत को अनदेखा करें ताकि कोई टैब अपने स्वयं के लेखन से पुनः प्राप्त न हो |
+| `onEvent`          | `(data) => void`   | वैकल्पिक कॉलबैक जब SSE/पोलिंग को एक परिवर्तन ईवेंट प्राप्त होता है                         |
+
+सामान्य CRUD के लिए, `useActionQuery` और `useActionMutation` को प्राथमिकता दें; actions को उत्परिवर्तित करने से `source: "action"` उत्सर्जित होता है और वे हुक स्वचालित रूप से पुनः प्राप्त हो जाते हैं।
+
+## यूजचेंजवर्जन / यूजचेंजवर्जन {#use-change-version}
+
+फ़्रेमवर्क React क्वेरी कैश को बैकग्राउंड एजेंटों, क्रॉन जॉब्स या अन्य उपयोगकर्ताओं द्वारा किए गए परिवर्तनों के साथ सिंक करने के लिए परिवर्तन संस्करणों का उपयोग करता है।
+
+जब कोई सर्वर-साइड डेटाबेस उत्परिवर्तन होता है, तो सर्वर एक विशिष्ट `source` कुंजी के साथ एक परिवर्तन ईवेंट रिकॉर्ड करता है। क्लाइंट का `useDbSync` श्रोता इन घटनाओं को प्राप्त करता है और उस स्रोत के लिए स्थानीय परिवर्तन संस्करण काउंटर को बंद कर देता है। संस्करण काउंटर को अपनी React क्वेरी कुंजियों में मोड़ने से, जब भी बैकएंड क्लाइंट को नई गतिविधि के बारे में सूचित करता है तो क्वेरीज़ स्वचालित रूप से पुनः प्राप्त हो जाती हैं।
+
+- **`useChangeVersion(source: string): number`** - एक काउंटर लौटाता है जो निर्दिष्ट `source` के उत्परिवर्तित होने पर बढ़ता है।
+- **`useChangeVersions(sources: readonly string[]): number`** - एकाधिक स्रोतों के लिए संस्करण काउंटरों का योग लौटाता है।
+
+### उदाहरण: डेटाबेस के साथ एक कच्ची क्वेरी को समन्वयित करना
+
+```tsx
+import { useQuery } from "@tanstack/react-query";
+import { useChangeVersion } from "@agent-native/core/client";
+
+function DashboardView({ id }) {
+  // Get version for dashboards domain source
+  const v = useChangeVersion("dashboards");
+
+  const { data } = useQuery({
+    queryKey: ["dashboard", id, v], // Invalidate automatically when version bumps
+    queryFn: () => fetchDashboard(id),
+    placeholderData: (prev) => prev, // Prevent layout flicker during refetch
+  });
+
+  return <div>{data?.title}</div>;
+}
+```
+
+### विलंबता मॉडल और अमान्य व्यवहार
+
+- **UI-आरंभित उत्परिवर्तन:** जब आप `useActionMutation` का उपयोग करके UI से एक क्रिया निष्पादित करते हैं, तो उत्परिवर्तन तुरंत सफलता पर `source: "action"` के साथ एक स्थानीय घटना को सक्रिय करता है। यह उस क्रिया के आधार पर सभी क्वेरी कुंजियों का **तत्काल, आशावादी रीफ़ेच** ट्रिगर करता है, जिससे दृश्य विलंब से बचा जा सकता है।
+- **बैकग्राउंड या एजेंट म्यूटेशन:** जब एआई एजेंट, वेबहुक या बैकग्राउंड वर्कर डेटा को म्यूट करता है, तो अपडेट क्लाइंट को प्रसारित किया जाता है। क्लाइंट का `useDbSync` इसे या तो तुरंत SSE (सर्वर-भेजे गए इवेंट) पर कैप्चर करता है या **2-सेकंड पोलिंग टिक** पर वापस आ जाता है। इसके बाद क्वेरी कुंजी संस्करण चालू हो जाता है, जिससे पृष्ठभूमि रीफ़ेच ट्रिगर हो जाता है।
+
+```an-diagram title="Two paths to a refetch" summary="A local mutation invalidates its own caches instantly; a remote write reaches this tab over SSE, or the polling tick as a fallback."
+{
+  "html": "<div class=\"diagram-latency\"><div class=\"diagram-col\"><div class=\"diagram-card\" data-rough><span class=\"diagram-pill ok\">This tab</span><strong>useActionMutation</strong><small class=\"diagram-muted\">fires source: \"action\" on success &rarr; instant local refetch</small></div><div class=\"diagram-card\" data-rough><span class=\"diagram-pill accent\">Agent · webhook · other tab</span><strong>Remote write</strong><small class=\"diagram-muted\">SSE push, or the ~2s polling tick as fallback &rarr; version bumps &rarr; background refetch</small></div></div></div>",
+  "css": ".diagram-latency .diagram-col{display:flex;flex-direction:column;gap:12px}.diagram-latency .diagram-card{display:flex;flex-direction:column;gap:4px;padding:14px 16px}"
+}
+```
+
+## cn(...इनपुट) {#cn}
+
+वर्ग नामों को मर्ज करने की उपयोगिता (clsx + टेलविंड-मर्ज):
+
+```ts
+import { cn } from "@agent-native/core/client";
+
+<div className={cn(
+  "px-4 py-2 rounded",
+  isActive && "bg-primary text-primary-foreground",
+  className
+)} />
+```

package/corpus/core/docs/content/locales/hi-IN/cloneable-saas.md

@@ -0,0 +1,114 @@
+---
+title: "टेम्पलेट"
+description: "एक कार्यशील SaaS उत्पाद को फोर्क करें और इसे अपना बनाएं - एजेंट शामिल।"
+---
+
+# टेम्पलेट्स
+
+क्या आप अपना खुद का AI-पावर्ड एनालिटिक्स टूल भेजना चाहते हैं? मेल क्लाइंट? फॉर्म बिल्डर? एक टेम्प्लेट चुनें, और आपको मिनटों में एक कार्यशील SaaS मिल जाएगा - एजेंट, डेटाबेस, ऑथ, और परिनियोजन पाइपलाइन पहले से ही तैयार है।
+
+अधिकांश "टेम्प्लेट" आपको एक खाली मचान और एक लंबी TODO सूची देते हैं। एजेंट-नेटिव उसे फ़्लिप करता है। प्रत्येक एक **पूर्ण, SaaS-ग्रेड उत्पाद** है - पहले ही दिन से चलाने योग्य, पहले से ही शिप करने योग्य, और अनुकूलित करने, ब्रांड करने और तैनात करने के लिए पूरी तरह से आपका। उन्हें क्लोन करने योग्य SaaS के रूप में सोचें, स्टार्टर किट के रूप में नहीं: आप एक तैयार उत्पाद फोर्क कर रहे हैं, बॉयलरप्लेट को नहीं देख रहे हैं।
+
+## टेम्प्लेट उपलब्ध हैं {#catalog}
+
+प्रत्येक एक वास्तविक ऐप है जिसका आप आज उपयोग कर सकते हैं, और इसके अपने संस्करण के लिए लॉन्चिंग पैड भी है।
+
+| टेम्पलेट                                  | यह क्या है                                                                                                           |
+| ----------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| [**Chat**](/docs/template-chat)           | टिकाऊ थ्रेड्स, actions, ऑथ और कस्टम UI या अपने स्वयं के बैकएंड के लिए एक साफ पथ के साथ न्यूनतम चैट-पहला ऐप।          |
+| [**Mail**](/docs/template-mail)           | एक एजेंट-देशी सुपरह्यूमन। इनबॉक्स, लेबल, एआई ट्राइएज, कीबोर्ड-प्रथम, ड्राफ्ट और एजेंट के माध्यम से भेजना।            |
+| [**Calendar**](/docs/template-calendar)   | एक एजेंट-मूल Google Calendar। इवेंट, सिंक, सार्वजनिक बुकिंग लिंक, एजेंट-संचालित शेड्यूलिंग।                          |
+| [**Content**](/docs/template-content)     | MDX के लिए ओपन-सोर्स ओब्सीडियन। स्थानीय Markdown/MDX, टिपटैप संपादक, Notion सिंक, वास्तविक समय बहु-उपयोगकर्ता सहयोग। |
+| [**Brain**](/docs/template-brain)         | उद्धृत संस्थागत स्मृति, अनुमोदित स्रोतों, समीक्षा द्वारों और उद्धरणों द्वारा समर्थित स्वच्छ कंपनी चैट।               |
+| [**Assets**](/docs/template-assets)       | ब्रांड लाइब्रेरी, अपलोड, संदर्भ और ऑन-ब्रांड छवि/वीडियो निर्माण के लिए डिजिटल परिसंपत्ति प्रबंधक।                    |
+| [**Slides**](/docs/template-slides)       | एक एजेंट-मूल Google स्लाइड। React-आधारित डेक एजेंट सीधे बनाता और संपादित करता है।                                    |
+| [**Video**](/docs/template-videos)        | रिमोशन पर प्रोग्रामेटिक मोशन ग्राफिक्स और उत्पाद-डेमो वीडियो।                                                        |
+| [**Analytics**](/docs/template-analytics) | एक एजेंट-मूल आयाम/मिक्सपैनल। डेटा स्रोतों को कनेक्ट करें, चार्ट के लिए संकेत दें, डैशबोर्ड पर पिन करें।              |
+| [**Clips**](/docs/template-clips)         | एसिंक स्क्रीन + ट्रांसक्रिप्शन, अध्याय और एआई सारांश के साथ कैमरा रिकॉर्डिंग।                                        |
+| [**Design**](/docs/template-design)       | इंटरैक्टिव अल्पाइन/Tailwind डिज़ाइन के लिए एजेंट-मूल HTML प्रोटोटाइप स्टूडियो।                                       |
+| [**Forms**](/docs/template-forms)         | एक एजेंट-मूल टाइपफॉर्म। Slack, शीट्स, webhooks, या डिस्कॉर्ड पर सबमिशन बनाएं, साझा करें, एकत्र करें और रूट करें।     |
+| [**Plan**](/docs/template-plan)           | चित्र, वायरफ्रेम और एनोटेशन के साथ विज़ुअल योजनाएं और पीआर पुनर्कथन।                                                 |
+| [**Dispatch**](/docs/template-dispatch)   | कार्यस्थान नियंत्रण विमान: साझा रहस्य, पुन: प्रयोज्य एकीकरण, Slack/टेलीग्राम, निर्धारित कार्य।                       |
+
+डोमेन टेम्पलेट नहीं चाहिए? जब आप एक बुनियादी ऐप चाहते हैं जिससे उपयोगकर्ता तुरंत बात कर सकें तो [Chat](/docs/template-chat) का उपयोग करें, या [Pure-Agent Apps](/docs/pure-agent-apps) के साथ सबसे पहले कार्रवाई शुरू करें।
+
+[Templates](/templates) के अंतर्गत पूरा कैटलॉग देखें, या सीधे एक पर जाएं - उदाहरण के लिए, यदि आप वर्कस्पेस-शैली ऐप चाहते हैं तो [Dispatch](/docs/template-dispatch) शुरू करने के लिए एक शानदार जगह है।
+
+## आपको बॉक्स से क्या मिलता है {#what-you-get}
+
+प्रत्येक टेम्प्लेट उन हिस्सों के साथ भेजा जाता है जिन्हें बनाने में आम तौर पर महीनों का समय लगता है:
+
+- **एक कार्यशील एजेंट** - पहले से ही ऐप से जुड़ा हुआ है, पहले से ही आपके डेटा पर actions लेने में सक्षम है, आप जो देख रहे हैं उसके बारे में पहले से ही संदर्भ-जागरूक है। यह कैसे काम करता है इसके लिए [Messaging the agent](/docs/messaging) देखें।
+- **प्रामाणिक** — साइन इन, सत्र, संगठन, बहु-किरायेदार अलगाव। पहले ही हो चुका है.
+- **एक डेटाबेस** - प्रत्येक टेम्पलेट की अपनी स्कीमा, क्वेरीज़ और माइग्रेशन जाने के लिए तैयार हैं। अपना खुद का SQL डेटाबेस (Postgres, SQLite, Turso, D1) लाएँ - फ्रेमवर्क अनुकूल है।
+- **एक वास्तविक समय UI** - एजेंट जो करता है उसके साथ स्क्रीन सिंक में रहती है। चैट में "ईमेल का मसौदा तैयार करें" पर क्लिक करें, ड्राफ्ट को तुरंत अपने इनबॉक्स में देखें।
+- **तैनाती के लिए तैयार** - नेटलिफाई, वर्सेल, क्लाउडफ्लेयर, AWS, या कहीं और जो नोड चलाता है, पर पुश करें। कोई वेंडर लॉक-इन नहीं।
+- **ब्रांडिंग हुक** — नाम, रंग, लोगो, कॉपी सभी को बदलना आसान है।
+
+यह कोई सैद्धांतिक दावा नहीं है। फ़्रेमवर्क का लेखक मेल टेम्पलेट पर अपना वास्तविक इनबॉक्स चलाता है, कैलेंडर टेम्पलेट पर अपना वास्तविक कैलेंडर चलाता है, और एनालिटिक्स टेम्पलेट पर अपना वास्तविक विश्लेषण चलाता है। टेम्प्लेट दैनिक-ड्राइवर सॉफ़्टवेयर हैं।
+
+## आप क्या करते हैं {#what-you-do}
+
+"मुझे अपना SaaS चाहिए" से "मेरे पास अपना SaaS है" तक का रास्ता छोटा है:
+
+```an-diagram title="Fork and customize" summary="Pick a finished product, brand it, evolve it in plain English, and ship it to your own domain."
+{
+  "html": "<div class=\"diagram-fork\"><div class=\"diagram-card\"><span class=\"diagram-pill\">1</span><strong>Pick</strong><small class=\"diagram-muted\">a complete template</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill\">2</span><strong>Brand</strong><small class=\"diagram-muted\">name, colors, logo, copy</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill accent\">3</span><strong>Customize</strong><small class=\"diagram-muted\">ask the agent &#8635;</small></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&rarr;</div><div class=\"diagram-card\"><span class=\"diagram-pill ok\">4</span><strong>Ship</strong><small class=\"diagram-muted\">your own domain</small></div></div>",
+  "css": ".diagram-fork{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.diagram-fork .diagram-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px;min-width:130px}.diagram-fork .diagram-arrow{font-size:22px;line-height:1}"
+}
+```
+
+1. **एक टेम्प्लेट चुनें।** CLI पिकर का उपयोग करें, या दस्तावेज़ ब्राउज़ करें और शुरू करने के लिए एक चुनें।
+2. **इसे ब्रांड करें।** नाम, रंग, लोगो और कॉपी बदलें। अधिकांश टेम्प्लेट इसे एक ही कॉन्फ़िगरेशन फ़ाइल में प्रदर्शित करते हैं।
+3. **इसे अनुकूलित करें।** एजेंट से कहें कि वह आपके लिए आवश्यक कॉलम जोड़ें, इनबॉक्स समूहों को कैसे बदलें, अपने आंतरिक API से कनेक्ट करें, एक नया दृश्य जोड़ें। एजेंट कोड संपादित करता है; आप अंतर की समीक्षा करें.
+4. **इसे शिप करें।** परिनियोजन आदेश चलाएँ। अब आपके पास अपने स्वयं के डोमेन पर अपना स्वयं का उत्पादन SaaS है।
+
+चरण 2-4 में आम तौर पर दिन लगते हैं, महीने नहीं। चरण 3 ओपन-एंडेड है - आपका फ़ोर्क्ड SaaS एजेंट से बात करके, सामान्य अंग्रेजी में, समय के साथ विकसित होता है।
+
+## यह व्यावहारिक क्यों है {#why}
+
+एक पारंपरिक फोर्क-द-कोडबेस मॉडल बड़े पैमाने पर टूट जाता है: प्रत्येक उपयोगकर्ता अपना स्वयं का इनबॉक्स बनाए रखना एक रखरखाव दुःस्वप्न जैसा लगता है। दो रूपरेखा निर्णय इसे कार्यान्वित करते हैं:
+
+1. **एजेंट रखरखाव करता है।** आप कॉलम जोड़ने या नया एकीकरण तार करने के लिए कोड नहीं लिखते हैं - आप एजेंट से पूछते हैं। तो "आपका अपना फोर्क्ड इनबॉक्स" एक सुविधा है, बोझ नहीं।
+2. **प्रति-उपयोगकर्ता कोड के बिना प्रति-उपयोगकर्ता अनुकूलन।** Skills, मेमोरी, निर्देश, कनेक्टेड MCP सर्वर और उप-एजेंट सभी SQL में रहते हैं। प्रत्येक उपयोगकर्ता को अपनी स्वयं की अनुकूलन परत मिलती है; साझा कोडबेस उन सभी को एक साथ होस्ट करता है।
+
+परिणाम: सामान्य SaaS परिनियोजन अर्थशास्त्र के साथ, प्रत्येक उपयोगकर्ता के लिए Claude-कोड-स्तरीय लचीलापन।
+
+```an-diagram title="Why per-user forks scale" summary="Two ideas keep the fork-and-customize model practical: the agent does the maintenance, and per-user customization lives in SQL — not in per-user code."
+{
+  "html": "<div class=\"diagram-why\"><div class=\"diagram-panel\" data-rough><strong>Shared codebase</strong><small class=\"diagram-muted\">one app, deployed once</small><div class=\"diagram-pill accent\">agent does the maintenance</div></div><div class=\"diagram-arrow diagram-muted\" aria-hidden=\"true\">&harr;</div><div class=\"diagram-panel\" data-rough><strong>Per-user layer in SQL</strong><small class=\"diagram-muted\">skills · memory · instructions · MCP · sub-agents</small><div class=\"diagram-pill ok\">no per-user code</div></div></div>",
+  "css": ".diagram-why{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.diagram-why .diagram-panel{display:flex;flex-direction:column;gap:8px;padding:14px 18px;min-width:240px;flex:1}.diagram-why .diagram-arrow{font-size:24px;line-height:1}"
+}
+```
+
+## फोर्क नहीं करना चाहते? {#hosted}
+
+आपको ऐसा करने की आवश्यकता नहीं है। प्रत्येक टेम्प्लेट `agent-native.com` - `mail.agent-native.com`, `calendar.agent-native.com` इत्यादि पर एक होस्टेड ऐप के रूप में भी उपलब्ध है। होस्ट किए गए संस्करण का निःशुल्क या सशुल्क उपयोग करें; केवल तभी फोर्क करें जब आप कुछ ऐसा बदलना चाहते हैं जो होस्ट किया गया संस्करण उजागर न हो।
+
+## इसे कौशल के साथ आज़माएं {#try-with-a-skill}
+
+मचान बनाने के लिए तैयार नहीं हैं? आप पहले से ही उपयोग किए जा रहे कोडिंग एजेंट में एक ही कमांड के साथ एजेंट-नेटिव सुपरपावर जोड़ सकते हैं - किसी ऐप की आवश्यकता नहीं है। [Skills Guide](/docs/skills-guide#app-backed-skills) देखें.
+
+## इस पर निर्माण
+
+- [**Getting Started**](/docs/getting-started) - एक न्यूनतम चैट ऐप या हेडलेस एजेंट बनाएं
+- [**Messaging the agent**](/docs/messaging) - उपयोगकर्ता (और आप) प्रत्येक टेम्पलेट के साथ शिप करने वाले एजेंट से कैसे बात करते हैं
+- [**Multi-App Workspace**](/docs/multi-app-workspace) - कई टेम्पलेट्स को एक कार्यक्षेत्र में बंडल करें जो ऑथ, ब्रांड और एजेंट को साझा करता है
+- [**Dispatch**](/docs/template-dispatch) - कार्यक्षेत्र नियंत्रण विमान टेम्पलेट
+- [**Creating Templates**](/docs/creating-templates) - लेखक और अपना स्वयं का टेम्पलेट प्रकाशित करें
+
+### डेवलपर्स के लिए {#dev-details}
+
+यदि आप अभी मचान बना रहे हैं, तो CLI कमांड है:
+
+```bash
+npx @agent-native/core@latest create my-platform
+```
+
+आपको एक बहु-चयन पिकर मिलेगा। एक ऐप (स्टैंडअलोन) या कई (वर्कस्पेस - ऐप्स शेयर ऑथ, ब्रांड, एजेंट कॉन्फ़िगरेशन और डेटाबेस) चुनें। प्रत्येक चयनित टेम्प्लेट को आपकी आवश्यक प्रत्येक फ़ाइल के साथ `apps/<name>/` में रखा गया है। टेम्पलेट UI के बजाय केवल एक्शन ऐप के लिए, `npx @agent-native/core@latest create my-agent --headless` का उपयोग करें।
+
+`.env` (ज्यादातर `ANTHROPIC_API_KEY` और `DATABASE_URL`), `pnpm install`, `pnpm dev` भरें और यह काम करता है। नहीं "TODO: लॉगिन लागू करें," कोई प्लेसहोल्डर रूट नहीं।
+
+परिनियोजन लक्ष्य: कोई भी Nitro-संगत होस्ट (नोड, क्लाउडफ्लेयर, नेटलिफाई, वर्सेल, डेनो, लैम्ब्डा, बन) और कोई भी Drizzle-संगत SQL डेटाबेस (SQLite, Postgres, Turso, D1, Supabase, Neon)। कार्यस्थानों के लिए, `npx @agent-native/core@latest deploy` प्रत्येक ऐप को एक ही बार में बनाता है और उन्हें एक ही मूल में शिप करता है। [Deployment](/docs/deployment) देखें.
+
+अपना स्वयं का टेम्पलेट लिखने और प्रकाशित करने के लिए, [Creating Templates](/docs/creating-templates) देखें।