@nosana/kit 0.1.1 → 0.1.3

package/dist/programs/JobsProgram.js

@@ -1,51 +1,12 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.JobsProgram = void 0;
-const BaseProgram_js_1 = require("./BaseProgram.js");
-const gill_1 = require("gill");
-const index_js_1 = require("../index.js");
-const programClient = __importStar(require("../generated_clients/jobs/index.js"));
-const token_1 = require("@solana-program/token");
-const bs58_1 = __importDefault(require("bs58"));
-const IPFS_js_1 = require("../ipfs/IPFS.js");
-const index_js_2 = require("../utils/index.js");
-class JobsProgram extends BaseProgram_js_1.BaseProgram {
+import { BaseProgram } from './BaseProgram.js';
+import { generateKeyPairSigner, parseBase64RpcAccount } from 'gill';
+import { ErrorCodes, NosanaError } from '../index.js';
+import * as programClient from "../generated_clients/jobs/index.js";
+import { findAssociatedTokenPda, TOKEN_PROGRAM_ADDRESS } from '@solana-program/token';
+import bs58 from 'bs58';
+import { IPFS } from '../ipfs/IPFS.js';
+import { convertBigIntToNumber } from '../utils/index.js';
+export class JobsProgram extends BaseProgram {
     constructor(sdk) {
         super(sdk);
         this.client = programClient;
@@ -144,7 +105,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
                     extraGPAFilters.push({
                         memcmp: {
                             offset: BigInt(208),
-                            bytes: bs58_1.default.encode(Buffer.from([filters.state])),
+                            bytes: bs58.encode(Buffer.from([filters.state])),
                             encoding: "base58",
                         },
                     });
@@ -184,7 +145,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
                     {
                         memcmp: {
                             offset: BigInt(0),
-                            bytes: bs58_1.default.encode(Buffer.from(programClient.JOB_ACCOUNT_DISCRIMINATOR)),
+                            bytes: bs58.encode(Buffer.from(programClient.JOB_ACCOUNT_DISCRIMINATOR)),
                             encoding: "base58",
                         },
                     },
@@ -195,7 +156,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
             const jobs = getProgramAccountsResponse
                 .map((result) => {
                 try {
-                    const jobAccount = programClient.decodeJobAccount((0, gill_1.parseBase64RpcAccount)(result.pubkey, result.account));
+                    const jobAccount = programClient.decodeJobAccount(parseBase64RpcAccount(result.pubkey, result.account));
                     return this.transformJobAccount(jobAccount);
                 }
                 catch (err) {
@@ -257,7 +218,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
                     {
                         memcmp: {
                             offset: BigInt(0),
-                            bytes: bs58_1.default.encode(Buffer.from(programClient.RUN_ACCOUNT_DISCRIMINATOR)),
+                            bytes: bs58.encode(Buffer.from(programClient.RUN_ACCOUNT_DISCRIMINATOR)),
                             encoding: "base58",
                         },
                     },
@@ -267,7 +228,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
             const runAccounts = getProgramAccountsResponse
                 .map((result) => {
                 try {
-                    const runAccount = programClient.decodeRunAccount((0, gill_1.parseBase64RpcAccount)(result.pubkey, result.account));
+                    const runAccount = programClient.decodeRunAccount(parseBase64RpcAccount(result.pubkey, result.account));
                     return this.transformRunAccount(runAccount);
                 }
                 catch (err) {
@@ -295,7 +256,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
                     {
                         memcmp: {
                             offset: BigInt(0),
-                            bytes: bs58_1.default.encode(Buffer.from(programClient.MARKET_ACCOUNT_DISCRIMINATOR)),
+                            bytes: bs58.encode(Buffer.from(programClient.MARKET_ACCOUNT_DISCRIMINATOR)),
                             encoding: "base58",
                         },
                     },
@@ -305,7 +266,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
             const marketAccounts = getProgramAccountsResponse
                 .map((result) => {
                 try {
-                    const marketAccount = programClient.decodeMarketAccount((0, gill_1.parseBase64RpcAccount)(result.pubkey, result.account));
+                    const marketAccount = programClient.decodeMarketAccount(parseBase64RpcAccount(result.pubkey, result.account));
                     return this.transformMarketAccount(marketAccount);
                 }
                 catch (err) {
@@ -327,15 +288,12 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
      * @returns The transaction signature
      */
     async post(params) {
-        if (!this.sdk.config.wallet) {
-            throw new index_js_1.NosanaError('No wallet found', index_js_1.ErrorCodes.NO_WALLET);
-        }
-        const jobKey = await (0, gill_1.generateKeyPairSigner)();
-        const runKey = await (0, gill_1.generateKeyPairSigner)();
-        const [associatedTokenAddress] = await (0, token_1.findAssociatedTokenPda)({
+        const jobKey = await generateKeyPairSigner();
+        const runKey = await generateKeyPairSigner();
+        const [associatedTokenAddress] = await findAssociatedTokenPda({
             mint: this.sdk.config.programs.nosTokenAddress,
-            owner: this.sdk.config.wallet.signer.address,
-            tokenProgram: token_1.TOKEN_PROGRAM_ADDRESS
+            owner: this.sdk.wallet.address,
+            tokenProgram: TOKEN_PROGRAM_ADDRESS
         });
         try {
             const staticAccounts = await this.getStaticAccounts();
@@ -349,41 +307,20 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
                     params.market,
                     this.sdk.config.programs.nosTokenAddress,
                 ], staticAccounts.jobsProgram),
-                payer: this.sdk.config.wallet.signer,
+                payer: this.sdk.wallet,
                 rewardsReflection: staticAccounts.rewardsReflection,
                 rewardsVault: staticAccounts.rewardsVault,
-                authority: this.sdk.config.wallet.signer,
+                authority: this.sdk.wallet,
                 rewardsProgram: staticAccounts.rewardsProgram,
-                ipfsJob: bs58_1.default.decode(params.ipfsHash).subarray(2),
+                ipfsJob: bs58.decode(params.ipfsHash).subarray(2),
                 timeout: params.timeout
             });
-            if (params.instructionOnly)
-                return instruction;
-            // Create the transaction
-            const transaction = (0, gill_1.createTransaction)({
-                instructions: [instruction],
-                feePayer: this.sdk.config.wallet.signer,
-                latestBlockhash: await this.sdk.solana.getLatestBlockhash(),
-                version: 0,
-            });
-            // Sign the transaction with all required signers
-            const signedTransaction = await (0, gill_1.signTransactionMessageWithSigners)(transaction);
-            // Get the transaction signature for logging
-            const signature = (0, gill_1.getSignatureFromTransaction)(signedTransaction);
-            // Log the transaction explorer link
-            const explorerLink = (0, gill_1.getExplorerLink)({
-                cluster: this.sdk.config.solana.cluster,
-                transaction: signature
-            });
-            this.sdk.logger.info(`Sending list job transaction: ${explorerLink}`);
-            // Send and confirm the transaction
-            await this.sdk.solana.sendAndConfirmTransaction(signedTransaction);
-            this.sdk.logger.info("Job listing transaction confirmed!");
-            return signature;
+            return instruction;
         }
         catch (err) {
-            this.sdk.logger.error(`Failed to list job: ${err instanceof Error ? err.message : String(err)}`);
-            throw new Error(`Failed to list job: ${err instanceof Error ? err.message : String(err)}`);
+            const errorMessage = `Failed to create list instruction: ${err instanceof Error ? err.message : String(err)}`;
+            this.sdk.logger.error(errorMessage);
+            throw new Error(errorMessage);
         }
     }
     /**
@@ -462,7 +399,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
         }
         catch (error) {
             this.sdk.logger.error(`Failed to start monitoring job program accounts: ${error}`);
-            throw new index_js_1.NosanaError('Failed to start monitoring job program accounts', index_js_1.ErrorCodes.RPC_ERROR, error);
+            throw new NosanaError('Failed to start monitoring job program accounts', ErrorCodes.RPC_ERROR, error);
         }
     }
     /**
@@ -519,9 +456,9 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
         const { discriminator: _, ...jobAccountData } = jobAccount.data;
         return {
             address: jobAccount.address,
-            ...(0, index_js_2.convertBigIntToNumber)(jobAccountData),
-            ipfsJob: IPFS_js_1.IPFS.solHashToIpfsHash(jobAccountData.ipfsJob),
-            ipfsResult: IPFS_js_1.IPFS.solHashToIpfsHash(jobAccountData.ipfsResult),
+            ...convertBigIntToNumber(jobAccountData),
+            ipfsJob: IPFS.solHashToIpfsHash(jobAccountData.ipfsJob),
+            ipfsResult: IPFS.solHashToIpfsHash(jobAccountData.ipfsResult),
         };
     }
     transformRunAccount(runAccount) {
@@ -529,7 +466,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
         const { discriminator: _, ...runAccountData } = runAccount.data;
         return {
             address: runAccount.address,
-            ...(0, index_js_2.convertBigIntToNumber)(runAccountData),
+            ...convertBigIntToNumber(runAccountData),
         };
     }
     transformMarketAccount(marketAccount) {
@@ -537,7 +474,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
         const { discriminator: _, ...marketAccountData } = marketAccount.data;
         return {
             address: marketAccount.address,
-            ...(0, index_js_2.convertBigIntToNumber)(marketAccountData),
+            ...convertBigIntToNumber(marketAccountData),
         };
     }
     /**
@@ -546,7 +483,7 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
     async handleAccountUpdate(accountData, options, isMonitoring) {
         try {
             const { account, pubkey } = accountData;
-            const encodedAccount = (0, gill_1.parseBase64RpcAccount)(pubkey, account);
+            const encodedAccount = parseBase64RpcAccount(pubkey, account);
             const accountType = programClient.identifyNosanaJobsAccount(encodedAccount);
             switch (accountType) {
                 case programClient.NosanaJobsAccount.JobAccount:
@@ -608,4 +545,3 @@ class JobsProgram extends BaseProgram_js_1.BaseProgram {
         this.sdk.logger.debug(`Processed run account ${runAccount.address.toString()}`);
     }
 }
-exports.JobsProgram = JobsProgram;

package/dist/solana/SolanaUtils.d.ts

@@ -1,4 +1,4 @@
-import { Address, SolanaClient } from 'gill';
+import { Address, SolanaClient, Signature, IInstruction, TransactionMessageWithBlockhashLifetime, CompilableTransactionMessage, FullySignedTransaction, TransactionWithBlockhashLifetime } from 'gill';
 import { NosanaClient } from '../index.js';
 export declare class SolanaUtils {
     private readonly sdk;
@@ -12,4 +12,18 @@ export declare class SolanaUtils {
         blockhash: import("gill").Blockhash;
         lastValidBlockHeight: bigint;
     }>>;
+    /**
+     * Type guard to check if the input is a transaction
+     */
+    private isTransaction;
+    /**
+     * Type guard to check if the input is a signed transaction
+     */
+    private isSignedTransaction;
+    /**
+     * Create, sign, and send a transaction with proper logging and error handling
+     * @param instructionsOrTransaction Single instruction, array of instructions, or pre-built transaction
+     * @returns The transaction signature
+     */
+    send(instructionsOrTransaction: IInstruction | IInstruction[] | CompilableTransactionMessage & TransactionMessageWithBlockhashLifetime | FullySignedTransaction & TransactionWithBlockhashLifetime): Promise<Signature>;
 }

package/dist/solana/SolanaUtils.js

@@ -1,22 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SolanaUtils = void 0;
-const gill_1 = require("gill");
-const NosanaError_js_1 = require("../errors/NosanaError.js");
-class SolanaUtils {
+import { createSolanaClient, address, getProgramDerivedAddress, getAddressEncoder, createTransaction, signTransactionMessageWithSigners, getExplorerLink, getSignatureFromTransaction } from 'gill';
+import { NosanaError, ErrorCodes } from '../errors/NosanaError.js';
+export class SolanaUtils {
     constructor(sdk) {
         this.sdk = sdk;
         const rpcEndpoint = this.sdk.config.solana.rpcEndpoint;
         if (!rpcEndpoint)
-            throw new NosanaError_js_1.NosanaError('RPC URL is required', NosanaError_js_1.ErrorCodes.INVALID_CONFIG);
-        const { rpc, rpcSubscriptions, sendAndConfirmTransaction } = (0, gill_1.createSolanaClient)({ urlOrMoniker: rpcEndpoint });
+            throw new NosanaError('RPC URL is required', ErrorCodes.INVALID_CONFIG);
+        const { rpc, rpcSubscriptions, sendAndConfirmTransaction } = createSolanaClient({ urlOrMoniker: rpcEndpoint });
         this.rpc = rpc;
         this.rpcSubscriptions = rpcSubscriptions;
         this.sendAndConfirmTransaction = sendAndConfirmTransaction;
     }
     async pda(seeds, programId) {
-        const addressEncoder = (0, gill_1.getAddressEncoder)();
-        const [pda] = await (0, gill_1.getProgramDerivedAddress)({
+        const addressEncoder = getAddressEncoder();
+        const [pda] = await getProgramDerivedAddress({
             programAddress: programId,
             seeds: seeds.map(seed => typeof seed !== 'string' ? addressEncoder.encode(seed) : seed),
         });
@@ -25,13 +22,13 @@ class SolanaUtils {
     async getBalance(addressStr) {
         try {
             this.sdk.logger.debug(`Getting balance for address: ${addressStr}`);
-            const addr = (0, gill_1.address)(addressStr);
+            const addr = address(addressStr);
             const balance = await this.rpc.getBalance(addr).send();
             return balance.value;
         }
         catch (error) {
             this.sdk.logger.error(`Failed to get balance: ${error}`);
-            throw new NosanaError_js_1.NosanaError('Failed to get balance', NosanaError_js_1.ErrorCodes.RPC_ERROR, error);
+            throw new NosanaError('Failed to get balance', ErrorCodes.RPC_ERROR, error);
         }
     }
     async getLatestBlockhash() {
@@ -41,8 +38,75 @@ class SolanaUtils {
         }
         catch (error) {
             this.sdk.logger.error(`Failed to get latest blockhash: ${error}`);
-            throw new NosanaError_js_1.NosanaError('Failed to get latest blockhash', NosanaError_js_1.ErrorCodes.RPC_ERROR, error);
+            throw new NosanaError('Failed to get latest blockhash', ErrorCodes.RPC_ERROR, error);
+        }
+    }
+    /**
+     * Type guard to check if the input is a transaction
+     */
+    isTransaction(input) {
+        return 'instructions' in input && 'version' in input && !('programAddress' in input);
+    }
+    /**
+     * Type guard to check if the input is a signed transaction
+     */
+    isSignedTransaction(input) {
+        return 'signatures' in input && input.signatures && input.signatures.length > 0;
+    }
+    /**
+     * Create, sign, and send a transaction with proper logging and error handling
+     * @param instructionsOrTransaction Single instruction, array of instructions, or pre-built transaction
+     * @returns The transaction signature
+     */
+    async send(instructionsOrTransaction) {
+        if (!this.sdk.wallet) {
+            throw new NosanaError('No wallet found', ErrorCodes.NO_WALLET);
+        }
+        try {
+            let signedTransaction;
+            // Check if it's already a transaction or if we need to create one from instructions
+            if (this.isTransaction(instructionsOrTransaction)) {
+                // Check if it's already signed
+                if (this.isSignedTransaction(instructionsOrTransaction)) {
+                    // Already signed, use it directly
+                    signedTransaction = instructionsOrTransaction;
+                }
+                else {
+                    // Not signed yet, sign it
+                    signedTransaction = await signTransactionMessageWithSigners(instructionsOrTransaction);
+                }
+            }
+            else {
+                // It's instructions, create and sign a transaction
+                const instructions = Array.isArray(instructionsOrTransaction)
+                    ? instructionsOrTransaction
+                    : [instructionsOrTransaction];
+                const transaction = createTransaction({
+                    instructions,
+                    feePayer: this.sdk.wallet,
+                    latestBlockhash: await this.getLatestBlockhash(),
+                    version: 0,
+                });
+                // Sign the transaction with all required signers
+                signedTransaction = await signTransactionMessageWithSigners(transaction);
+            }
+            // Get the transaction signature for logging
+            const signature = getSignatureFromTransaction(signedTransaction);
+            // Log the transaction explorer link
+            const explorerLink = getExplorerLink({
+                cluster: this.sdk.config.solana.cluster,
+                transaction: signature
+            });
+            this.sdk.logger.info(`Sending transaction: ${explorerLink}`);
+            // Send and confirm the transaction
+            await this.sendAndConfirmTransaction(signedTransaction);
+            this.sdk.logger.info('Transaction confirmed!');
+            return signature;
+        }
+        catch (err) {
+            const errorMessage = `Failed to send transaction: ${err instanceof Error ? err.message : String(err)}`;
+            this.sdk.logger.error(errorMessage);
+            throw new Error(errorMessage);
         }
     }
 }
-exports.SolanaUtils = SolanaUtils;

package/dist/utils/index.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.convertBigIntToNumber = convertBigIntToNumber;
 /**
  * Helper function to convert bigint values to numbers in an object
  * @param obj Object that may contain bigint values
  * @returns Object with all bigint values converted to numbers
  */
-function convertBigIntToNumber(obj) {
+export function convertBigIntToNumber(obj) {
     const result = { ...obj };
     for (const [key, value] of Object.entries(result)) {
         if (typeof value === 'bigint') {

package/examples/browser/.gitlab-ci.yml

@@ -0,0 +1,78 @@
+include:
+  - project: nosana-ci/tools/cicd/gitlab-ci
+    file: templates/semver.yml
+  - project: nosana-ci/tools/cicd/gitlab-ci
+    file: templates/cacheflush.yml
+
+variables:
+  NODE_VERSION: 22
+  OUTPUT_DIR: examples/browser/.output/public
+  PURGE_FILE: examples/browser/purge.json
+
+.npm:
+  image: node:$NODE_VERSION
+  cache:
+    key:
+      files:
+        - examples/browser/package-lock.json
+    paths:
+      - examples/browser/node_modules
+      - examples/browser/.npm
+
+build:
+  extends: .npm
+  stage: build
+  before_script:
+    - cd examples/browser
+  script: npm ci --cache .npm --prefer-offline
+  rules:
+    - if: $CI_MERGE_REQUEST_ID                                          # merge requests
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH                       # main
+    - if: $DEPLOYMENT_BRANCH && $CI_COMMIT_BRANCH == $DEPLOYMENT_BRANCH # optional deployment branch
+
+pages:
+  extends: .npm
+  stage: deploy
+  before_script:
+    - cd examples/browser
+  script:
+    - NODE_OPTIONS=--max_old_space_size=25384 npm run generate
+    - |
+      if [ -z ${SKIP_CACHEFLUSH} ] && [ -n ${FQDN} ]
+      then
+        apt update
+        apt install -y jq
+        find $OUTPUT_DIR -type f | sed "s/${OUTPUT_DIR//\//\\/}/https:\/\/$FQDN/g" | jq -R -s -c 'split("\n")[:-1]' > $PURGE_FILE
+      fi
+    - mv $OUTPUT_DIR public
+  artifacts:
+    paths:
+      - public
+      - $PURGE_FILE
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH && $AUTO_DEPLOY != null # main
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH && $AUTO_DEPLOY == null # main
+      when: manual
+    - if: $DEPLOYMENT_BRANCH && $CI_COMMIT_BRANCH == $DEPLOYMENT_BRANCH && $AUTO_DEPLOY != null # deployment branch
+    - if: $DEPLOYMENT_BRANCH && $CI_COMMIT_BRANCH == $DEPLOYMENT_BRANCH && $AUTO_DEPLOY == null # deployment branch
+      when: manual
+
+release:
+  extends: .release
+  stage: .post
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH                       # main
+    - if: $DEPLOYMENT_BRANCH && $CI_COMMIT_BRANCH == $DEPLOYMENT_BRANCH # optional deployment branch
+
+gitlab-release:
+  extends: .gitlab-release
+  stage: .post
+
+cacheflush:
+  extends: .cacheflush
+  stage: .post
+  rules:
+    - if: $CI_COMMIT_BRANCH == $CI_DEFAULT_BRANCH                       # main
+    - if: $DEPLOYMENT_BRANCH && $CI_COMMIT_BRANCH == $DEPLOYMENT_BRANCH # optional deployment branch
+
+

package/examples/browser/FEATURES.md

@@ -0,0 +1,141 @@
+# Nosana SDK Browser Playground - Features
+
+This interactive documentation site provides a comprehensive testing environment for the Nosana SDK with the following features:
+
+## 🎯 Core Features
+
+### 1. **Interactive SDK Testing**
+- Test all major SDK functions through a user-friendly web interface
+- No need to write code - just click buttons and see results
+- Perfect for developers learning the SDK or testing specific functionality
+
+### 2. **Network Management**
+- **Mainnet/Devnet Switching**: Easily switch between networks with a dropdown
+- **Connection Status**: Real-time connection indicator
+- **Automatic Reinitialization**: SDK automatically reinitializes when switching networks
+
+### 3. **Job Operations**
+- **Individual Job Retrieval**: Get detailed information about specific jobs by address
+- **Bulk Job Fetching**: Retrieve multiple jobs with optional filtering
+- **State Filtering**: Filter jobs by state (Queued, Running, Stopped, Done)
+- **Limit Control**: Control how many jobs to fetch (1-100)
+
+### 4. **Market Operations**
+- **Market Discovery**: Retrieve all available markets
+- **Market Details**: View pricing, timeouts, and configuration
+- **Market Monitoring**: Real-time updates for market changes
+
+### 5. **Real-time Monitoring**
+- **WebSocket Subscriptions**: Live updates for account changes
+- **Multi-Account Types**: Monitor jobs, runs, and markets simultaneously
+- **Automatic Reconnection**: Handles connection failures gracefully
+- **Error Reporting**: Clear error messages and recovery
+
+## 🖥️ User Interface Features
+
+### 1. **Terminal-style Output**
+- **Color-coded Logs**: Different colors for info, success, error, and warning messages
+- **Timestamps**: Every log entry includes a timestamp
+- **Auto-scroll**: Optional automatic scrolling to latest entries
+- **Log Management**: Clear logs button for fresh starts
+
+### 2. **Responsive Design**
+- **Mobile-friendly**: Works on phones, tablets, and desktops
+- **Grid Layout**: Adaptive layout that works on all screen sizes
+- **Modern UI**: Clean, professional interface using Tailwind CSS
+
+### 3. **Interactive Controls**
+- **Form Validation**: Input validation and error handling
+- **Loading States**: Visual feedback during operations
+- **Disabled States**: Buttons disabled during loading to prevent conflicts
+- **Status Indicators**: Visual indicators for connection and monitoring status
+
+## 🔧 Technical Features
+
+### 1. **Modern Web Technologies**
+- **Nuxt 3**: Latest Vue.js framework for optimal performance
+- **Vue 3 Composition API**: Modern reactive programming
+- **TypeScript Support**: Full type safety and IntelliSense
+- **Hot Module Replacement**: Instant updates during development
+
+### 2. **Blockchain Integration**
+- **Solana SDK Integration**: Full compatibility with Solana blockchain
+- **WASM Support**: WebAssembly support for cryptographic operations
+- **Address Validation**: Proper Solana address handling
+- **Error Handling**: Comprehensive blockchain error handling
+
+### 3. **Development Experience**
+- **Fast Builds**: Optimized build process with Vite
+- **Development Server**: Hot reload for rapid development
+- **Dependency Optimization**: Pre-bundled dependencies for faster loading
+- **SSR Disabled**: Client-side rendering for better SDK compatibility
+
+## 📊 Monitoring Capabilities
+
+### 1. **Account Monitoring**
+- **Job Accounts**: Monitor job state changes, node assignments, and completion
+- **Run Accounts**: Track job execution and node performance
+- **Market Accounts**: Watch for pricing and configuration changes
+
+### 2. **Real-time Updates**
+- **Live Data**: Updates appear immediately as they happen on-chain
+- **Detailed Information**: Full account data with formatted display
+- **Historical View**: All updates are logged and preserved during session
+
+### 3. **Error Handling**
+- **Connection Recovery**: Automatic reconnection on WebSocket failures
+- **Error Classification**: Different error types with appropriate handling
+- **User Feedback**: Clear error messages and recovery suggestions
+
+## 🎨 User Experience Features
+
+### 1. **Intuitive Interface**
+- **Logical Grouping**: Related functions grouped in clear sections
+- **Progressive Disclosure**: Advanced options available but not overwhelming
+- **Visual Hierarchy**: Clear information hierarchy with proper typography
+
+### 2. **Helpful Defaults**
+- **Example Data**: Pre-filled example job addresses for testing
+- **Sensible Limits**: Default limits that work well for most use cases
+- **Network Selection**: Starts with devnet for safer testing
+
+### 3. **Documentation Integration**
+- **Inline Help**: Helpful descriptions and tooltips
+- **Example Usage**: Clear examples of how to use each feature
+- **Troubleshooting**: Built-in error handling and user guidance
+
+## 🚀 Performance Features
+
+### 1. **Optimized Loading**
+- **Dynamic Imports**: SDK loaded only when needed
+- **Code Splitting**: Efficient bundle splitting for faster initial load
+- **Dependency Optimization**: Pre-bundled common dependencies
+
+### 2. **Efficient Updates**
+- **Reactive State**: Efficient state management with Vue 3 reactivity
+- **Minimal Re-renders**: Optimized component updates
+- **Memory Management**: Proper cleanup of WebSocket connections
+
+### 3. **Browser Compatibility**
+- **Modern Browsers**: Optimized for Chrome, Firefox, Safari, Edge
+- **WebSocket Support**: Fallback handling for connection issues
+- **WASM Support**: WebAssembly for cryptographic operations
+
+## 📱 Accessibility Features
+
+### 1. **Keyboard Navigation**
+- **Tab Order**: Logical tab order through interface elements
+- **Keyboard Shortcuts**: Standard keyboard interactions
+- **Focus Management**: Clear focus indicators
+
+### 2. **Screen Reader Support**
+- **Semantic HTML**: Proper HTML structure for screen readers
+- **ARIA Labels**: Appropriate ARIA labels for interactive elements
+- **Status Updates**: Screen reader announcements for status changes
+
+### 3. **Visual Accessibility**
+- **Color Contrast**: High contrast colors for readability
+- **Font Sizes**: Readable font sizes across all devices
+- **Visual Indicators**: Multiple ways to convey information (not just color)
+
+This playground serves as both a learning tool for developers new to the Nosana SDK and a testing environment for experienced developers working with the platform.